Set chain id based on the env variable

Define the chain id based on the env variable and use it in the
`connect` function from wagmi. We have separate builds for each network
and we do not change chain dynamically so we can use hardcoded value in
`connect` function. If we use the `useChainId` hook from wagmi it will
return the cached chain id. So when for example we were locally testing
a dapp on the testnet and then changed the env variables to integrate
with the mainnet, the wagmi used the cached chain id for the testnet and
we couldn't connect to the wallet.

dapp/src/hooks/useWallet.ts

@@ -2,7 +2,6 @@ import { useCallback, useMemo } from "react"
 import {
   Connector,
   useAccount,
-  useChainId,
   useConfig,
   useConnect,
   useDisconnect,
@@ -17,6 +16,7 @@ import {
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useDispatch, useSelector } from "react-redux"
 import { selectWalletAddress, setAddress } from "#/store/wallet"
+import { CHAIN_ID as chainId } from "#/wagmiConfig"
 import useBitcoinBalance from "./orangeKit/useBitcoinBalance"
 import useResetWalletState from "./useResetWalletState"
 import useLastUsedBtcAddress from "./useLastUsedBtcAddress"
@@ -51,9 +51,8 @@ export function useWallet(): UseWalletReturn {
 
   const { data: balance } = useBitcoinBalance(btcAddress)
 
-  const chainId = useChainId()
   const config = useConfig()
-  // `useAccount` hook returns the Ethereum address
+  // `useAccount` hook returns the Ethereum address.
   const { status: accountStatus, address: account } = useAccount()
 
   // `isConnected` is variable derived from `status` but does not guarantee us a
@@ -97,7 +96,10 @@ export function useWallet(): UseWalletReturn {
         const prevAddress = await selectedConnector.getBitcoinAddress()
         const {
           accounts: [newAccount],
-        } = await selectedConnector.connect({ chainId, isReconnecting: true })
+        } = await selectedConnector.connect({
+          chainId,
+          isReconnecting: true,
+        })
         const newAddress = await selectedConnector.getBitcoinAddress()
 
         if (newAddress !== prevAddress) {
@@ -148,7 +150,10 @@ export function useWallet(): UseWalletReturn {
       }
 
       connect(
-        { connector: typeConversionToConnector(selectedConnector), chainId },
+        {
+          connector: typeConversionToConnector(selectedConnector),
+          chainId,
+        },
         {
           onError: (error) => {
             if (options?.onError) options.onError(error)
@@ -166,7 +171,7 @@ export function useWallet(): UseWalletReturn {
         },
       )
     },
-    [connect, chainId, reconnect],
+    [connect, reconnect],
   )
 
   return useMemo(

dapp/src/wagmiConfig.ts

@@ -7,7 +7,7 @@ import referralProgram, { EmbedApp } from "./utils/referralProgram"
 import { orangeKit } from "./utils"
 
 const isTestnet = env.USE_TESTNET
-const CHAIN_ID = isTestnet ? sepolia.id : mainnet.id
+export const CHAIN_ID = isTestnet ? sepolia.id : mainnet.id
 
 const chains: [Chain, ...Chain[]] = isTestnet ? [sepolia] : [mainnet]
 const connectorConfig = {