feat: update contract addresses and fix SSR hydration issues

- Update relay and ERC20 manager contract addresses to latest versions
- Add SSR-safe checks to prevent hydration mismatches in providers
- Fix chain ID bug (0x69 -> 0x39) in Pali v2 provider
- Add loading states for wallet components during SSR
- Replace hardcoded URLs with environment variables
- Improve wallet connection reliability and UI consistency

Author: jagdeep sidhu

components/Bridge/hooks/useErc20ManagerContract.ts

@@ -14,7 +14,7 @@ export const useErc20ManagerContract = () => {
         SyscoinERC20ManagerABI,
         flags.isEnabled("isSys5Enabled")
           ? constants?.contracts.ecr20ManagerContract.address
-          : "0xA738a563F9ecb55e0b2245D1e9E380f0fE455ea1"
+          : "0x7904299b3D3dC1b03d1DdEb45E9fDF3576aCBd5f"
       ),
     [web3, flags, constants?.contracts.ecr20ManagerContract.address]
   );

components/WalletList/MetaMask.tsx

@@ -2,12 +2,41 @@ import { Button, Box, Typography, Link } from "@mui/material";
 import Image from "next/image";
 import { useConnectedWallet } from "../../contexts/ConnectedWallet/useConnectedWallet";
 import { Launch } from "@mui/icons-material";
+import { useMetamask } from "@contexts/Metamask/Provider";
+import { useState, useEffect } from "react";
 
 const WalletListMetamask = () => {
   const { nevm, connectNEVM, availableWallets } = useConnectedWallet();
+  const { isEnabled } = useMetamask();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // Show consistent loading state during SSR
+    return (
+      <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
+        <Image
+          src="/metamask-logo.svg"
+          height={32}
+          width={32}
+          alt="Metamask logo"
+        />
+        <Typography variant="body1">MetaMask</Typography>
+        <Button sx={{ ml: "auto" }} variant="contained" disabled>
+          Loading...
+        </Button>
+      </Box>
+    );
+  }
+
+  // Skip rendering if this isn't the MetaMask connection type
   if (nevm.type !== "metamask") {
     return null;
   }
+
   return (
     <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
       <Image
@@ -19,7 +48,7 @@ const WalletListMetamask = () => {
 
       {nevm.type === "metamask" && nevm.account ? (
         <>
-          <Typography variant="body1" color="secondary">
+          <Typography variant="body1" color="secondary" noWrap maxWidth={"70%"}>
             {nevm.account}
           </Typography>
           <Typography variant="body1" color="success.main" sx={{ ml: "auto" }}>
@@ -28,8 +57,8 @@ const WalletListMetamask = () => {
         </>
       ) : (
         <>
-          <Typography variant="body1">Metamask</Typography>
-          {availableWallets.metamask ? (
+          <Typography variant="body1">MetaMask</Typography>
+          {availableWallets.metamask && isEnabled ? (
             <Button
               sx={{ ml: "auto" }}
               variant="contained"
@@ -40,7 +69,7 @@ const WalletListMetamask = () => {
           ) : (
             <Link
               href="https://metamask.io/"
-              title="Go to Metamask"
+              title="Go to MetaMask"
               sx={{ ml: "auto" }}
               target="_blank"
             >

components/WalletList/PaliWallet.tsx

@@ -7,9 +7,34 @@ import {
   usePaliWalletV2,
 } from "@contexts/PaliWallet/usePaliWallet";
 import Web3 from "web3";
+import { useState, useEffect } from "react";
 
 const InstallPaliWallet = () => {
   const { connectWallet, isInstalled } = usePaliWallet();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // Show loading state during SSR
+    return (
+      <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
+        <Image
+          src="/pali-wallet-logo.svg"
+          height={32}
+          width={32}
+          alt="PaliWallet logo"
+        />
+        <Typography variant="body1">Pali Wallet</Typography>
+        <Button sx={{ ml: "auto" }} variant="contained" disabled>
+          Loading...
+        </Button>
+      </Box>
+    );
+  }
+
   return (
     <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
       <Image
@@ -43,9 +68,32 @@ const PaliWalletV2 = () => {
   const { utxo, nevm } = useConnectedWallet();
   const { isBitcoinBased, switchTo, isInstalled, isEVMInjected } =
     usePaliWalletV2();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   const connectedAccount = isBitcoinBased ? utxo.account : nevm.account;
   const isConnected = Boolean(connectedAccount);
 
+  if (!mounted) {
+    // Show loading state during SSR
+    return (
+      <Box sx={{ mb: 2 }}>
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <Image
+            src="/pali-wallet-logo.svg"
+            height={32}
+            width={32}
+            alt="PaliWallet logo"
+          />
+          <Typography variant="body1">Loading...</Typography>
+        </Box>
+      </Box>
+    );
+  }
+
   if (utxo.type !== "pali-wallet" || !isInstalled || !isConnected) {
     return <InstallPaliWallet />;
   }
@@ -106,6 +154,29 @@ const PaliWalletV2 = () => {
 const WalletListPaliWallet = () => {
   const { utxo } = useConnectedWallet();
   const { version, isInstalled } = usePaliWallet();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // Show consistent loading state during SSR
+    return (
+      <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
+        <Image
+          src="/pali-wallet-logo.svg"
+          height={32}
+          width={32}
+          alt="PaliWallet logo"
+        />
+        <Typography variant="body1">Pali Wallet</Typography>
+        <Button sx={{ ml: "auto" }} variant="contained" disabled>
+          Loading...
+        </Button>
+      </Box>
+    );
+  }
 
   if (version === "v2") {
     return <PaliWalletV2 />;

constants.ts

@@ -4,11 +4,11 @@ export const DEFAULT_GAS_LIMIT = 120_000;
 export const RELAY_CONTRACT_ADDRESS =
   process.env.SYS5_ENABLED === "true"
     ? process.env.RELAY_CONTRACT_ADDRESS
-    : "0xD822557aC2F2b77A1988617308e4A29A89Cb95A6";
+    : "0xd714E7915362FF89388025F584726E6dF26D20f9";
 
 export const ERC20_MANAGER_CONTRACT_ADDRESS =
   process.env.SYS5_ENABLED === "true"
     ? process.env.ERC20_MANAGER_CONTRACT_ADDRESS
-    : "0xA738a563F9ecb55e0b2245D1e9E380f0fE455ea1";
+    : "0x7904299b3D3dC1b03d1DdEb45E9fDF3576aCBd5f";
 
 export const ADMIN_LOGIN_MESSAGE = "Login to Syscoin Bridge Admin";

contexts/ConnectedWallet/Provider.tsx

@@ -60,11 +60,18 @@ const ConnectedWalletProvider: React.FC<{ children: ReactNode }> = ({
   const metamask = useMetamask();
   const [utxoWalletType, setUtxoWalletType] =
     useState<UTXOWallet>("pali-wallet");
-  const [nevmWalletType, setNevmWalletType] = useState<NEVMWallet>(
-    paliWallet.version === "v2" && paliWalletV2.isEVMInjected
-      ? "pali-wallet"
-      : "metamask"
-  );
+  const [nevmWalletType, setNevmWalletType] = useState<NEVMWallet>(() => {
+    // Check if Pali v2 with EVM injection is available
+    if (paliWallet.version === "v2" && paliWalletV2.isEVMInjected) {
+      return "pali-wallet";
+    }
+    // Check if window.ethereum is Pali v2
+    if (typeof window !== "undefined" && window.ethereum?.wallet === "pali-v2") {
+      return "pali-wallet";
+    }
+    // Default to MetaMask
+    return "metamask";
+  });
   const nevm = useNEVM();
 
   const utxoAccount = paliWallet.connectedAccount;
@@ -80,6 +87,14 @@ const ConnectedWalletProvider: React.FC<{ children: ReactNode }> = ({
   const connectNEVM = (type: NEVMWallet) => {
     if (type === "metamask") {
       nevm.connect();
+    } else if (type === "pali-wallet") {
+      // Handle Pali wallet EVM connection
+      if (window.ethereum && window.ethereum.wallet === "pali-v2") {
+        window.ethereum.request({ method: 'eth_requestAccounts' })
+          .catch((error) => {
+            console.error('Failed to connect Pali EVM provider:', error);
+          });
+      }
     }
     setNevmWalletType(
       window.ethereum.wallet === "pali-v2" ? "pali-wallet" : "metamask"
@@ -189,10 +204,21 @@ const ConnectedWalletProvider: React.FC<{ children: ReactNode }> = ({
     if (!window.ethereum) {
       return;
     }
-    setNevmWalletType(
-      window.ethereum.wallet === "pali-v2" ? "pali-wallet" : "metamask"
-    );
-  }, [paliWalletV2.isEVMInjected, setNevmWalletType]);
+    
+    // Determine the correct NEVM wallet type based on current state
+    let correctWalletType: NEVMWallet = "metamask";
+    
+    if (window.ethereum.wallet === "pali-v2") {
+      correctWalletType = "pali-wallet";
+    } else if (paliWallet.version === "v2" && paliWalletV2.isEVMInjected) {
+      correctWalletType = "pali-wallet";
+    }
+    
+    // Only update if the wallet type has actually changed
+    if (nevmWalletType !== correctWalletType) {
+      setNevmWalletType(correctWalletType);
+    }
+  }, [paliWalletV2.isEVMInjected, paliWallet.version, nevmWalletType]);
 
   return (
     <ConnectedWalletContext.Provider

contexts/Metamask/Provider.tsx

@@ -32,10 +32,12 @@ const MetamaskProvider: React.FC<{ children: React.ReactNode }> = ({
 }) => {
   const { data: isEnabled } = useQuery(["metamask", "enabled"], {
     queryFn: () => {
+      if (typeof window === "undefined") return false;
       return (
         typeof window.ethereum !== "undefined" && window.ethereum.isMetaMask
       );
     },
+    enabled: typeof window !== "undefined",
   });
 
   return (

contexts/PaliWallet/V2Provider.tsx

@@ -81,36 +81,46 @@ export const PaliWalletV2Provider: React.FC<{
   const { constants } = useConstants();
   const installed = useQuery(["pali", "is-installed"], {
     queryFn: () => {
+      if (typeof window === "undefined") return false;
       return Boolean(window.pali) && window.pali.wallet === "pali-v2";
     },
     refetchInterval: 1000,
+    enabled: typeof window !== "undefined",
   });
 
   const isEVMInjected = useQuery(["pali", "is-ethereum-injected"], {
     queryFn: () => {
+      if (typeof window === "undefined") return false;
       return Boolean(window.ethereum) && window.ethereum.wallet === "pali-v2";
     },
     refetchInterval: 1000,
+    enabled: typeof window !== "undefined",
   });
 
   const isInstalled = installed.isFetched && installed.data;
 
   const isBitcoinBased = useQuery(["pali", "isBitcoinBased"], {
     queryFn: () => {
+      if (typeof window === "undefined" || !window.pali) return false;
       const bitcoinBased = window.pali.isBitcoinBased();
       return Boolean(bitcoinBased);
     },
-    enabled: isInstalled,
+    enabled: isInstalled && typeof window !== "undefined",
     refetchInterval: 1000,
   });
 
-  const providerState = useQuery<ProviderState>(["pali", "provider-state"], {
-    queryFn: () => {
-      return window.pali.request({
-        method: "wallet_getProviderState",
-      });
+  const providerState = useQuery<ProviderState | null>(["pali", "provider-state"], {
+    queryFn: async (): Promise<ProviderState | null> => {
+      if (typeof window === "undefined" || !window.pali) return null;
+      try {
+        return await window.pali.request({
+          method: "wallet_getProviderState",
+        });
+      } catch (error) {
+        return null;
+      }
     },
-    enabled: isInstalled,
+    enabled: isInstalled && typeof window !== "undefined",
   });
 
   const requestAccounts = () => {
@@ -225,7 +235,7 @@ export const PaliWalletV2Provider: React.FC<{
         return Promise.reject("Pali Wallet is not installed");
       }
 
-      const chainId = parseInt(constants?.chain_id ?? "0x69", 16);
+      const chainId = parseInt(constants?.chain_id ?? "0x39", 16);
 
       if (networkType === "bitcoin") {
         return window.pali

contexts/Transfer/constants.ts

@@ -9,5 +9,5 @@ export const NEVMNetwork = {
     decimals: 18,
   },
   rpcUrls: [process.env.NEVM_RPC_URL!],
-  blockExplorerUrls: ["https://explorer.syscoin.org/"],
+  blockExplorerUrls: [process.env.NEXT_PUBLIC_NEVM_EXPLORER || "https://explorer.syscoin.org/"],
 };

contexts/Transfer/functions/nevmToSys.ts

@@ -114,7 +114,7 @@ const mintSysx = async (
   const txOpts = { rbf: true };
   // web3 URL + ID and nevm burn txid
   const assetOpts = {
-    web3url: "https://rpc.syscoin.org",
+    web3url: process.env.NEXT_PUBLIC_NEVM_RPC_URL || "https://rpc.syscoin.org",
     ethtxid: receipt.transactionHash,
   };
   // will be auto filled based on ethtxid eth-proof