chore: deliver chainId via flags

syscoin · Sep 26, 2024 · 79d800c · 79d800c
1 parent 4de9f43
commit 79d800c
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>