From fe253dce6a70e6e74696a1d1f0c58b2210e5f05b Mon Sep 17 00:00:00 2001
From: adrianvrj <adrivargas48@gmail.com>
Date: Sat, 21 Dec 2024 16:30:57 -0600
Subject: [PATCH] [feat] managing braavos chain id

---
 README.md                              | 39 --------------------------
 components/modules/Fund/FundDonate.tsx | 11 ++++----
 components/modules/Fund/FundVote.tsx   | 12 ++++----
 constants/index.ts                     |  5 +++-
 4 files changed, 14 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index b0247f0..f64d750 100644
--- a/README.md
+++ b/README.md
@@ -13,45 +13,6 @@
 - Rename the  `frontend/gostarkme-web/.env.example`  file to: `frontend/gostarkme-web/.env`.
 
 
-
-- Comment the content of the file `frontend/gostarkme-web/next.config.mjs`. Adding only one element to the ```nextConfig``` object like this:
-
-```
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-    /**
-     * Enable static exports for the App Router.
-     *
-     * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
-     */
-    // output: "export",
-  
-    /**
-     * Set base path. This is the slug of your GitHub repository.
-     *
-     * @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
-     */
-    // basePath: "/gostarkme",
-
-    // assetPrefix: 'https://web3wagers.github.io/gostarkme',
-  
-    /**
-     * Disable server-based image optimization. Next.js does not support
-     * dynamic features with static exports.
-     *
-     * @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
-     */
-    // images: {
-    //   unoptimized: true,
-    // },
-
-    reactStrictMode: false,
-  };
-  
-  export default nextConfig;
-```
-
-
 ## Local Deployment
 
 ### Installing Dependencies
diff --git a/components/modules/Fund/FundDonate.tsx b/components/modules/Fund/FundDonate.tsx
index af8844e..c50b2d5 100644
--- a/components/modules/Fund/FundDonate.tsx
+++ b/components/modules/Fund/FundDonate.tsx
@@ -3,7 +3,7 @@
 import { calculatePorcentage } from "@/app/utils";
 import ProgressBar from "@/components/ui/ProgressBar";
 import ShareXButton from "@/components/ui/ShareOnX";
-import { provider } from "@/constants";
+import { BRAAVOS_CHAIN_ID, CHAIN_ID, provider } from "@/constants";
 import { addrSTRK } from "@/contracts/addresses";
 import { activeChainId } from "@/state/activeChain";
 import {
@@ -33,7 +33,6 @@ const FundDonate = ({ currentBalance, goal, addr, name, icon }: FundDonateProps)
   const [isDonating, setIsDonating] = useState(false);
   const wallet = useAtomValue(walletStarknetkitLatestAtom);
   const chainId = useAtomValue(activeChainId);
-  const networkEnvironment = process.env.NEXT_PUBLIC_CHAIN_ID;
   const progress = calculatePorcentage(localBalance, goal);
   const [donationMessage, setDonationMessage] = useState('');
 
@@ -145,18 +144,18 @@ const FundDonate = ({ currentBalance, goal, addr, name, icon }: FundDonateProps)
       )}
       <div className="text-center">
         <button
-          disabled={chainId !== networkEnvironment || !wallet || isDonating}
+          disabled={chainId !== CHAIN_ID && chainId !== BRAAVOS_CHAIN_ID || !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 ${chainId !== networkEnvironment || isDonating ? "opacity-50 cursor-not-allowed" : ""}`}
+          duration-500 active:duration-0 shadow-gray-400 ${chainId !== CHAIN_ID && chainId !== BRAAVOS_CHAIN_ID || isDonating ? "opacity-50 cursor-not-allowed" : ""}`}
         >
           {isDonating === true ? "Donating..." : "Donate"}
         </button>
-        {wallet && chainId !== networkEnvironment && (
+        {wallet && chainId !== CHAIN_ID && chainId !== BRAAVOS_CHAIN_ID && (
           <p className="text-sm text-gray-500 mt-2">
             Your wallet is currently connected to the wrong network. Please
-            switch to {networkEnvironment} to continue.
+            switch to {CHAIN_ID} to continue.
           </p>
         )}
         {!wallet && (
diff --git a/components/modules/Fund/FundVote.tsx b/components/modules/Fund/FundVote.tsx
index 788d2ef..848d363 100644
--- a/components/modules/Fund/FundVote.tsx
+++ b/components/modules/Fund/FundVote.tsx
@@ -8,7 +8,7 @@ import { latestTxAtom } from "@/state/latestTx";
 import { useAtom, useAtomValue } from "jotai";
 import { useState } from "react";
 import ShareXButton from "@/components/ui/ShareOnX";
-import { provider } from "@/constants";
+import { BRAAVOS_CHAIN_ID, CHAIN_ID, provider } from "@/constants";
 import { CallData } from "starknet";
 import { activeChainId } from "@/state/activeChain";
 
@@ -24,8 +24,6 @@ interface FundVoteProps {
 export const FundVote = ({ name, upVotes, upVotesNeeded, addr, voted, setLoading }: FundVoteProps) => {
   const wallet = useAtomValue(walletStarknetkitLatestAtom);
   const chainId = useAtomValue(activeChainId);
-  const networkEnvironment = process.env.NEXT_PUBLIC_CHAIN_ID;
-
   const [progress, setProgress] = useState(calculatePorcentage(upVotes, upVotesNeeded));
   const [currentUpvotes, setCurrentUpvotes] = useState(upVotes);
   const voteMessage = `🗳️ Voted for ${name} on Go Stark Me! Support now: https://gostarkme.com 🙌💫 @undefined_org_ @Starknet`;
@@ -108,15 +106,15 @@ export const FundVote = ({ name, upVotes, upVotesNeeded, addr, voted, setLoading
           <div className="text-center">
             <button
               onClick={handleVoteClick}
-              disabled={isVoting || chainId !== networkEnvironment}
+              disabled={isVoting || chainId !== CHAIN_ID && chainId != BRAAVOS_CHAIN_ID}
               className={`bg-darkblue text-white py-2 px-4 md:py-3 md:px-6 rounded-md text-xs md:text-sm shadow-md hover:bg-starkorange
-              active:bg-darkblue ease-in-out duration-500 ${chainId !== networkEnvironment ? "opacity-50 cursor-not-allowed" : ""}`}
+              active:bg-darkblue ease-in-out duration-500 ${chainId !== CHAIN_ID && chainId != BRAAVOS_CHAIN_ID ? "opacity-50 cursor-not-allowed" : ""}`}
             >
               Vote
             </button>
-            {chainId !== networkEnvironment && (
+            {chainId !== CHAIN_ID && chainId != BRAAVOS_CHAIN_ID && (
               <p className="text-xs md:text-sm text-gray-500 mt-2">
-                Your wallet is connected to the wrong network. Please switch to {networkEnvironment}.
+                Your wallet is connected to the wrong network. Please switch to {CHAIN_ID}.
               </p>
             )}
           </div>
diff --git a/constants/index.ts b/constants/index.ts
index 92d22c2..94620c2 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -35,4 +35,7 @@ export const navItems = [
     // { label: 'My funds', href: '/app/myfunds' }
   ];
 
- export const upVotesNeeded = 50;
\ No newline at end of file
+ export const upVotesNeeded = 50;
+
+ export const BRAAVOS_CHAIN_ID = CHAIN_ID == constants.NetworkName.SN_MAIN ?
+  "0x534e5f4d41494e" : "0x534e5f5345504f4c4941";