From f6e1c3f033407fb2bf2cabbf34dd587b43c673d0 Mon Sep 17 00:00:00 2001
From: Abeeujah <abeeujah@gmail.com>
Date: Fri, 29 Nov 2024 12:51:55 +0100
Subject: [PATCH] feat: Check connection network

---
 .../components/modules/Fund/FundDonate.tsx    | 36 ++++++++++++-------
 .../components/modules/Fund/FundVote.tsx      | 31 ++++++++++++----
 .../components/ui/ConnectWalletButton.tsx     |  7 ++--
 .../gostarkme-web/state/connectedWallet.ts    | 10 ++++--
 4 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx b/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx
index 7cad31a..78c7ebc 100644
--- a/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx
+++ b/frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx
@@ -5,7 +5,11 @@ import ProgressBar from "@/components/ui/ProgressBar";
 import { provider } from "@/constants";
 import { strkAbi } from "@/contracts/abis/strk";
 import { addrSTRK } from "@/contracts/addresses";
-import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
+import {
+  networkAtom,
+  networkEnvironmentAtom,
+  walletStarknetkitLatestAtom,
+} from "@/state/connectedWallet";
 import { useAtomValue } from "jotai";
 import Image, { StaticImageData } from "next/image";
 import { useState } from "react";
@@ -24,6 +28,8 @@ const FundDonate = ({ currentBalance, goal, addr, icon }: FundDonateProps) => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [localBalance, setLocalBalance] = useState<number>(currentBalance);
   const wallet = useAtomValue(walletStarknetkitLatestAtom);
+  const network = useAtomValue(networkAtom);
+  const networkEnvironment = useAtomValue(networkEnvironmentAtom);
   const progress = calculatePorcentage(localBalance, goal);
 
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -126,17 +132,23 @@ const FundDonate = ({ currentBalance, goal, addr, icon }: FundDonateProps) => {
           {error}
         </p>
       )}
-      <button
-        onClick={handleDonateClick}
-        disabled={isLoading}
-        className={`self-center py-2 px-6 md:py-3 md:px-10 rounded-md text-xs md:text-sm shadow-xl ease-in-out duration-500 active:duration-0 shadow-gray-400 
-          ${isLoading 
-            ? 'bg-gray-400 cursor-not-allowed' 
-            : 'bg-darkblue text-white hover:bg-starkorange active:bg-darkblue'
-          }`}
-      >
-        {isLoading ? "Processing..." : "Donate"}
-      </button>
+      <div className="text-center">
+        <button
+          disabled={!network}
+          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 ? "opacity-50 cursor-not-allowed" : ""}`}
+        >
+          Donate
+        </button>
+        {wallet && !network && (
+          <p className="text-sm text-gray-500 mt-2">
+            Your wallet is currently connected to the wrong network. Please
+            switch to {networkEnvironment[1]} to continue.
+          </p>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx b/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx
index 9cd568d..370165f 100644
--- a/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx
+++ b/frontend/gostarkme-web/components/modules/Fund/FundVote.tsx
@@ -2,7 +2,11 @@ import { calculatePorcentage } from "@/app/utils";
 import { Button } from "@/components/ui/Button";
 import ProgressBar from "@/components/ui/ProgressBar";
 import { fundAbi } from "@/contracts/abis/fund";
-import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
+import {
+  networkAtom,
+  networkEnvironmentAtom,
+  walletStarknetkitLatestAtom,
+} from "@/state/connectedWallet";
 import { latestTxAtom } from "@/state/latestTx";
 import { useAtomValue, useSetAtom } from "jotai";
 import { Contract, InvokeFunctionResponse } from "starknet";
@@ -20,6 +24,8 @@ interface FundVoteProps {
 export const FundVote = ({ upVotes, upVotesNeeded, addr, setLoading}: FundVoteProps) => {
 
   const wallet = useAtomValue(walletStarknetkitLatestAtom);
+  const network = useAtomValue(networkAtom);
+  const networkEnvironment = useAtomValue(networkEnvironmentAtom);
 
   const progress = calculatePorcentage(upVotes, upVotesNeeded);
 
@@ -110,12 +116,23 @@ export const FundVote = ({ upVotes, upVotesNeeded, addr, setLoading}: FundVotePr
             <p className="text-sm text-gray-500 mt-2">You have already voted</p>
           </div>
         ) : (
-          <Button 
-            label={isVoting ? "Voting..." : "Vote"} 
-            onClick={handleVote}
-            disabled={isVoting} 
-            className={isVoting ? "opacity-50 cursor-not-allowed" : ""}
-          /> // If the wallet is connected, and voteStatus is false render a button that allows voting
+          <div className="text-center">
+            <Button
+              label={isVoting ? "Voting..." : "Vote"}
+              onClick={handleVote}
+              disabled={isVoting || !network}
+              className={
+                isVoting || !network ? "opacity-50 cursor-not-allowed" : ""
+              }
+            />
+            {/* // If the wallet is connected, and voteStatus is false render a button that allows voting */}
+            {!network && (
+              <p className="text-sm text-gray-500 mt-2">
+                Your wallet is currently connected to the wrong network. Please
+                switch to {networkEnvironment[1]} to continue.
+              </p>
+            )}
+          </div>
         )
       ) : ( // If the wallet is not connected, render a disabled vote button with instructions
         <div className="text-center"> 
diff --git a/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx b/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx
index 6c7dbf6..24a900f 100644
--- a/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx
+++ b/frontend/gostarkme-web/components/ui/ConnectWalletButton.tsx
@@ -1,11 +1,12 @@
 "use client";
 import { ARGENT_WEBWALLET_URL, CHAIN_ID, provider } from "@/constants";
-import { walletStarknetkitLatestAtom } from "@/state/connectedWallet";
-import { useAtom } from "jotai";
+import { networkAtom, walletStarknetkitLatestAtom } from "@/state/connectedWallet";
+import { useAtom, useSetAtom } from "jotai";
 import { connect, disconnect } from "starknetkit";
 
 export default function WalletConnector() {
   const [wallet, setWallet] = useAtom(walletStarknetkitLatestAtom)
+  const setNetworkAtom = useSetAtom(networkAtom)
 
   const handleConnect = async (event:any) => {
     try {
@@ -21,6 +22,8 @@ export default function WalletConnector() {
         },
       })
 
+      wallet && setNetworkAtom(wallet?.chainId === process.env.NEXT_PUBLIC_NETWORK)
+
       setWallet(wallet)
     } catch (e) {
       console.error(e)
diff --git a/frontend/gostarkme-web/state/connectedWallet.ts b/frontend/gostarkme-web/state/connectedWallet.ts
index a9638a7..8fce7e8 100644
--- a/frontend/gostarkme-web/state/connectedWallet.ts
+++ b/frontend/gostarkme-web/state/connectedWallet.ts
@@ -1,6 +1,10 @@
-import { atomWithReset } from "jotai/utils"
-import { StarknetWindowObject } from "starknetkit"
+import { atom } from "jotai";
+import { atomWithReset } from "jotai/utils";
+import { StarknetWindowObject } from "starknetkit";
 
 export const walletStarknetkitLatestAtom = atomWithReset<
   StarknetWindowObject | null | undefined
->(undefined)
+>(undefined);
+
+export const networkAtom = atom(false);
+export const networkEnvironmentAtom = atom(["Mainnet", "Sepolia", "Devnet"]);