From 79d800c21941ddb9dea28443292d9b7511d557c7 Mon Sep 17 00:00:00 2001
From: Ted Ian Osias <osiastedian@gmail.com>
Date: Thu, 26 Sep 2024 23:16:05 +0800
Subject: [PATCH] chore: deliver chainId via flags

---
 components/Bridge/NEVMStepWrapepr.tsx                  |  5 +++--
 .../Steps/ConnectValidate/StartTransferButton.tsx      |  3 ++-
 components/Bridge/UTXOStepWrapper.tsx                  |  4 +++-
 components/Bridge/hooks/useFeatureFlags.ts             |  2 ++
 contexts/ConnectedWallet/NEVMProvider.tsx              |  2 --
 contexts/PaliWallet/V2Provider.tsx                     | 10 +++++-----
 pages/_app.tsx                                         |  4 +---
 pages/api/flags.ts                                     |  6 +++++-
 pages/bridge/[id].tsx                                  |  4 +---
 9 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/components/Bridge/NEVMStepWrapepr.tsx b/components/Bridge/NEVMStepWrapepr.tsx
index 121b398..4ac02be 100644
--- a/components/Bridge/NEVMStepWrapepr.tsx
+++ b/components/Bridge/NEVMStepWrapepr.tsx
@@ -1,8 +1,8 @@
-import { CHAIN_ID } from "@constants";
 import { useNEVM } from "@contexts/ConnectedWallet/NEVMProvider";
 import { usePaliWalletV2 } from "@contexts/PaliWallet/usePaliWallet";
 import { Button } from "@mui/material";
 import { isValidEthereumAddress } from "@pollum-io/sysweb3-utils";
+import { useFeatureFlags } from "./hooks/useFeatureFlags";
 
 type Props = {
   children: React.ReactNode;
@@ -11,6 +11,7 @@ type Props = {
 const NEVMStepWrapper: React.FC<Props> = ({ children }) => {
   const { version, isBitcoinBased, switchTo, isEVMInjected, connectWallet } =
     usePaliWalletV2();
+  const { chainId: expectedChainId } = useFeatureFlags();
 
   const { connect, account, chainId, switchToMainnet } = useNEVM();
 
@@ -34,7 +35,7 @@ const NEVMStepWrapper: React.FC<Props> = ({ children }) => {
     );
   }
 
-  if (chainId !== `0x${Number(CHAIN_ID).toString(16)}`) {
+  if (chainId !== `0x${Number(expectedChainId).toString(16)}`) {
     return (
       <Button variant="contained" onClick={switchToMainnet}>
         Switch to NEVM Network
diff --git a/components/Bridge/Steps/ConnectValidate/StartTransferButton.tsx b/components/Bridge/Steps/ConnectValidate/StartTransferButton.tsx
index 47c2db6..590e695 100644
--- a/components/Bridge/Steps/ConnectValidate/StartTransferButton.tsx
+++ b/components/Bridge/Steps/ConnectValidate/StartTransferButton.tsx
@@ -1,4 +1,4 @@
-import { MIN_AMOUNT, CHAIN_ID } from "@constants";
+import { MIN_AMOUNT } from "@constants";
 import { SYSX_ASSET_GUID } from "@contexts/Transfer/constants";
 import { ITransfer } from "@contexts/Transfer/types";
 import { CheckCircleOutline } from "@mui/icons-material";
@@ -23,6 +23,7 @@ export const ConnectValidateStartTransferButton: React.FC<{
   transfer: ITransfer;
   isSaving: boolean;
 }> = ({ isSaving, transfer }) => {
+  const { chainId: CHAIN_ID } = useFeatureFlags();
   const {
     watch,
     formState: { errors, isValid },
diff --git a/components/Bridge/UTXOStepWrapper.tsx b/components/Bridge/UTXOStepWrapper.tsx
index 577e2c9..c35f09b 100644
--- a/components/Bridge/UTXOStepWrapper.tsx
+++ b/components/Bridge/UTXOStepWrapper.tsx
@@ -1,7 +1,7 @@
-import { CHAIN_ID } from "@constants";
 import { usePaliWalletV2 } from "@contexts/PaliWallet/usePaliWallet";
 import { Button } from "@mui/material";
 import { isValidSYSAddress } from "@pollum-io/sysweb3-utils";
+import { useFeatureFlags } from "./hooks/useFeatureFlags";
 
 type UTXOStepWrapperProps = {
   children: React.ReactNode;
@@ -17,6 +17,8 @@ const UTXOStepWrapper: React.FC<UTXOStepWrapperProps> = ({ children }) => {
     changeAccount,
   } = usePaliWalletV2();
 
+  const { chainId: CHAIN_ID } = useFeatureFlags();
+
   if (version === "v2" && !isBitcoinBased) {
     return (
       <Button variant="contained" onClick={() => switchTo("bitcoin")}>
diff --git a/components/Bridge/hooks/useFeatureFlags.ts b/components/Bridge/hooks/useFeatureFlags.ts
index 8dff031..978de5c 100644
--- a/components/Bridge/hooks/useFeatureFlags.ts
+++ b/components/Bridge/hooks/useFeatureFlags.ts
@@ -3,6 +3,7 @@ import { useQuery } from "react-query";
 type FeatureFlags = {
   foundationFundingAvailable: boolean;
   adminEnabled: boolean;
+  chainId: string;
 };
 
 export const useFeatureFlags = () => {
@@ -13,5 +14,6 @@ export const useFeatureFlags = () => {
   return {
     isEnabled: (flag: keyof FeatureFlags) =>
       (flags.isFetched && flags.data?.[flag]) ?? false,
+    chainId: flags.data?.chainId ? parseInt(flags.data.chainId) : 57,
   };
 };
diff --git a/contexts/ConnectedWallet/NEVMProvider.tsx b/contexts/ConnectedWallet/NEVMProvider.tsx
index 899bb40..ae666f9 100644
--- a/contexts/ConnectedWallet/NEVMProvider.tsx
+++ b/contexts/ConnectedWallet/NEVMProvider.tsx
@@ -19,8 +19,6 @@ interface INEVMContext {
   connect: () => void;
 }
 
-export const MAINNET_CHAIN_ID = "0x39";
-
 const NEVMContext = createContext({} as INEVMContext);
 
 export const useNEVM = () => useContext(NEVMContext);
diff --git a/contexts/PaliWallet/V2Provider.tsx b/contexts/PaliWallet/V2Provider.tsx
index 75596af..c13c5aa 100644
--- a/contexts/PaliWallet/V2Provider.tsx
+++ b/contexts/PaliWallet/V2Provider.tsx
@@ -8,7 +8,7 @@ import { utils as syscoinUtils } from "syscoinjs-lib";
 import { PaliWallet } from "./types";
 import MetamaskProvider from "@contexts/Metamask/Provider";
 import { isValidSYSAddress } from "@pollum-io/sysweb3-utils";
-import { CHAIN_ID } from "@constants";
+import { useFeatureFlags } from "components/Bridge/hooks/useFeatureFlags";
 
 export interface ProviderState {
   xpub: string;
@@ -74,9 +74,9 @@ declare global {
 
 export const PaliWalletV2Provider: React.FC<{
   children: React.ReactElement;
-  chainId: string;
-}> = ({ children, chainId }) => {
+}> = ({ children }) => {
   const queryClient = useQueryClient();
+  const { chainId } = useFeatureFlags();
   const installed = useQuery(["pali", "is-installed"], {
     queryFn: () => {
       return Boolean(window.pali) && window.pali.wallet === "pali-v2";
@@ -153,7 +153,7 @@ export const PaliWalletV2Provider: React.FC<{
     () =>
       connectedAccount.isSuccess &&
       connectedAccount.data &&
-      isValidSYSAddress(connectedAccount.data.address, parseInt(chainId))
+      isValidSYSAddress(connectedAccount.data.address, chainId)
         ? connectedAccount.data.address
         : undefined,
     [connectedAccount.data, connectedAccount.isSuccess]
@@ -234,7 +234,7 @@ export const PaliWalletV2Provider: React.FC<{
             method: "eth_changeUTXOEVM",
             params: [
               {
-                chainId: CHAIN_ID,
+                chainId,
               },
             ],
           })
diff --git a/pages/_app.tsx b/pages/_app.tsx
index b9ebcf6..fbc0bf3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -11,8 +11,6 @@ import WelcomeModal from "components/WelcomeModal";
 
 const queryClient = new QueryClient();
 
-const chainId = process.env.NEXT_PUBLIC_CHAIN_ID!;
-
 function MyApp({ Component, pageProps, router }: AppProps) {
   const isAdmin = router.pathname.includes("/admin");
   if (router.pathname.includes("/bridge")) {
@@ -25,7 +23,7 @@ function MyApp({ Component, pageProps, router }: AppProps) {
   }
   return (
     <QueryClientProvider client={queryClient}>
-      <PaliWalletV2Provider chainId={chainId}>
+      <PaliWalletV2Provider>
         <MetamaskProvider>
           <NEVMProvider>
             <ConnectedWalletProvider>
diff --git a/pages/api/flags.ts b/pages/api/flags.ts
index a32c4dc..a4c6744 100644
--- a/pages/api/flags.ts
+++ b/pages/api/flags.ts
@@ -3,7 +3,11 @@ import { NextApiRequest, NextApiResponse } from "next";
 function handler(req: NextApiRequest, res: NextApiResponse) {
   const foundationFundingAvailable = process.env.FOUNDATION_FUNDED === "true";
   const adminEnabled = process.env.ADMIN_API_KEY !== undefined;
-  return res.status(200).json({ foundationFundingAvailable, adminEnabled });
+  return res.status(200).json({
+    foundationFundingAvailable,
+    adminEnabled,
+    chainId: process.env.CHAIN_ID,
+  });
 }
 
 export default handler;
diff --git a/pages/bridge/[id].tsx b/pages/bridge/[id].tsx
index acd744e..228c1f5 100644
--- a/pages/bridge/[id].tsx
+++ b/pages/bridge/[id].tsx
@@ -56,8 +56,6 @@ const createTransfer = (type: TransferType): ITransfer => ({
   agreedToTerms: false,
 });
 
-const chainId = process.env.NEXT_PUBLIC_CHAIN_ID!;
-
 const BridgePage: NextPage = () => {
   const { query } = useRouter();
   const queryClient = useMemo(() => new QueryClient(), []);
@@ -76,7 +74,7 @@ const BridgePage: NextPage = () => {
     <SyscoinProvider>
       <Web3Provider>
         <QueryClientProvider client={queryClient}>
-          <PaliWalletV2Provider chainId={chainId}>
+          <PaliWalletV2Provider>
             <MetamaskProvider>
               <NEVMProvider>
                 <ConnectedWalletProvider>