From 7ecb78410f0551d67859452f6f80bdc564dc17c4 Mon Sep 17 00:00:00 2001 From: adrianvrj Date: Tue, 17 Dec 2024 08:56:14 -0600 Subject: [PATCH] feat-296 manage global chain id --- .../components/modules/Fund/FundDonate.tsx | 14 +++++--------- .../components/modules/Fund/FundVote.tsx | 14 +++++--------- .../components/ui/ConnectWalletButton.tsx | 10 +++++++++- frontend/gostarkme-web/state/activeChain.ts | 5 +++++ 4 files changed, 24 insertions(+), 19 deletions(-) create mode 100644 frontend/gostarkme-web/state/activeChain.ts diff --git a/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx b/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx index cbe3a53..a17178a 100644 --- a/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx +++ b/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx @@ -5,6 +5,7 @@ import ProgressBar from "@/components/ui/ProgressBar"; import ShareXButton from "@/components/ui/ShareOnX"; import { provider } from "@/constants"; import { addrSTRK } from "@/contracts/addresses"; +import { activeChainId } from "@/state/activeChain"; import { walletStarknetkitLatestAtom, } from "@/state/connectedWallet"; @@ -31,17 +32,12 @@ const FundDonate = ({ currentBalance, goal, addr, name, icon }: FundDonateProps) const [latestTx, setLatestTx] = useAtom(latestTxAtom); const [isDonating, setIsDonating] = useState(false); const wallet = useAtomValue(walletStarknetkitLatestAtom); - const [network, setNetwork] = useState(wallet?.chainId); + const chainId = useAtomValue(activeChainId); const networkEnvironment = process.env.NEXT_PUBLIC_CHAIN_ID; const progress = calculatePorcentage(localBalance, goal); const donationMessage = `🙌 Supporting ${name} on Go Stark Me! Donate now: https://web3wagers.github.io/gostarkme/ 💪 @undefined_org_ @Starknet`; - const handleNetwork = (chainId?: string, accounts?: string[]) => { - setNetwork(wallet?.chainId); - }; - wallet?.on('networkChanged', handleNetwork); - const handleAmountChange = (e: React.ChangeEvent) => { const value = e.target.value === "" ? "" : Number(e.target.value); setAmount(value); @@ -149,15 +145,15 @@ const FundDonate = ({ currentBalance, goal, addr, name, icon }: FundDonateProps) )}
- {wallet && network !== networkEnvironment && ( + {wallet && chainId !== networkEnvironment && (

Your wallet is currently connected to the wrong network. Please switch to {networkEnvironment} to continue. diff --git a/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx b/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx index 83fa0e0..d533ab2 100644 --- a/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx +++ b/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx @@ -10,6 +10,7 @@ import { useState } from "react"; import ShareXButton from "@/components/ui/ShareOnX"; import { provider } from "@/constants"; import { CallData } from "starknet"; +import { activeChainId } from "@/state/activeChain"; interface FundVoteProps { name: String, @@ -22,7 +23,7 @@ interface FundVoteProps { export const FundVote = ({ name, upVotes, upVotesNeeded, addr, voted, setLoading }: FundVoteProps) => { const wallet = useAtomValue(walletStarknetkitLatestAtom); - const [network, setNetwork] = useState(wallet?.chainId); + const chainId = useAtomValue(activeChainId); const networkEnvironment = process.env.NEXT_PUBLIC_CHAIN_ID; const [progress, setProgress] = useState(calculatePorcentage(upVotes, upVotesNeeded)); @@ -34,11 +35,6 @@ export const FundVote = ({ name, upVotes, upVotesNeeded, addr, voted, setLoading const [latestTx, setLatestTx] = useAtom(latestTxAtom); const [canVote, setCanVote] = useState((voted != BigInt(0) ? false : true)); - const handleNetwork = (chainId?: string, accounts?: string[]) => { - setNetwork(wallet?.chainId); - }; - wallet?.on('networkChanged', handleNetwork); - const waitForTransaction = async (hash: string) => { try { await provider.waitForTransaction(hash); @@ -117,12 +113,12 @@ export const FundVote = ({ name, upVotes, upVotesNeeded, addr, voted, setLoading

- {network !== networkEnvironment && ( + {chainId !== networkEnvironment && (

Your wallet is currently connected to the wrong network. Please switch to {networkEnvironment} to continue. diff --git a/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx b/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx index dc4ab78..65d4199 100644 --- a/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx +++ b/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx @@ -1,11 +1,18 @@ "use client"; import { ARGENT_WEBWALLET_URL, CHAIN_ID, provider } from "@/constants"; +import { activeChainId } from "@/state/activeChain"; import { walletStarknetkitLatestAtom } from "@/state/connectedWallet"; import { useAtom, useSetAtom } from "jotai"; import { connect, disconnect } from "starknetkit"; export default function WalletConnector() { const [wallet, setWallet] = useAtom(walletStarknetkitLatestAtom) + const [activeChain, setActiveChain] = useAtom(activeChainId); + + const handleNetwork = (chainId?: string, accounts?: string[]) => { + setActiveChain(wallet?.chainId); + }; + wallet?.on('networkChanged', handleNetwork); const handleConnect = async (event:any) => { try { @@ -21,7 +28,8 @@ export default function WalletConnector() { }, }) - setWallet(wallet) + setWallet(wallet); + setActiveChain(wallet?.chainId); } catch (e) { console.error(e) alert((e as any).message) diff --git a/frontend/gostarkme-web/state/activeChain.ts b/frontend/gostarkme-web/state/activeChain.ts new file mode 100644 index 0000000..2457a5f --- /dev/null +++ b/frontend/gostarkme-web/state/activeChain.ts @@ -0,0 +1,5 @@ +import { atomWithReset } from "jotai/utils" + +export const activeChainId = atomWithReset< + string | null | undefined +>(undefined) \ No newline at end of file