bug-296 manage global chain id

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<HTMLInputElement>) => {
     const value = e.target.value === "" ? "" : Number(e.target.value);
     setAmount(value);
@@ -149,15 +145,15 @@ const FundDonate = ({ currentBalance, goal, addr, name, icon }: FundDonateProps)
       )}
       <div className="text-center">
         <button
-          disabled={network !== networkEnvironment || !wallet || isDonating}
+          disabled={chainId !== networkEnvironment || !wallet || isDonating}
           onClick={handleDonateClick}
           className={`self-center bg-darkblue text-white py-2 px-6 md:py-3 md:px-10 rounded-md
           text-xs md:text-sm shadow-xl hover:bg-starkorange active:bg-darkblue ease-in-out
-          duration-500 active:duration-0 shadow-gray-400 ${network !== networkEnvironment || isDonating ? "opacity-50 cursor-not-allowed" : ""}`}
+          duration-500 active:duration-0 shadow-gray-400 ${chainId !== networkEnvironment || isDonating ? "opacity-50 cursor-not-allowed" : ""}`}
         >
           {isDonating === true ? "Donating..." : "Donate"}
         </button>
-        {wallet && network !== networkEnvironment && (
+        {wallet && chainId !== networkEnvironment && (
           <p className="text-sm text-gray-500 mt-2">
             Your wallet is currently connected to the wrong network. Please
             switch to {networkEnvironment} to continue.

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
           <div className="text-center">
             <button
               onClick={handleVoteClick}
-              disabled={isVoting || network !== networkEnvironment}
+              disabled={isVoting || chainId !== networkEnvironment}
               className={`self-center bg-darkblue text-white py-2 px-6 md:py-3 md:px-10 rounded-md
                 text-xs md:text-sm shadow-xl hover:bg-starkorange active:bg-darkblue ease-in-out
-                duration-500 active:duration-0 shadow-gray-400 ${network !== networkEnvironment ? "opacity-50 cursor-not-allowed" : ""}`}
+                duration-500 active:duration-0 shadow-gray-400 ${chainId !== networkEnvironment ? "opacity-50 cursor-not-allowed" : ""}`}
             >Vote</button>
-            {network !== networkEnvironment && (
+            {chainId !== networkEnvironment && (
               <p className="text-sm text-gray-500 mt-2">
                 Your wallet is currently connected to the wrong network. Please
                 switch to {networkEnvironment} to continue.

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)

frontend/gostarkme-web/state/activeChain.ts

@@ -0,0 +1,5 @@
+import { atomWithReset } from "jotai/utils"
+
+export const activeChainId = atomWithReset<
+  string | null | undefined
+>(undefined)