diff --git a/extension/src/providers/useWalletConnect.ts b/extension/src/providers/useWalletConnect.ts index b1b7b5aa..e2b8a021 100644 --- a/extension/src/providers/useWalletConnect.ts +++ b/extension/src/providers/useWalletConnect.ts @@ -137,14 +137,19 @@ interface WalletConnectResult { chainId: number | null } -const useWalletConnect = (connectionId: string): WalletConnectResult | null => { +const useWalletConnect = ( + connectionId: string, + connectionChainId: number +): WalletConnectResult | null => { const [provider, setProvider] = useState(null) const [connected, setConnected] = useState( provider ? provider.connected : false ) const [accounts, setAccounts] = useState(provider ? provider.accounts : []) - const [chainId, setChainId] = useState(provider ? provider.chainId : 1) + const [chainId, setChainId] = useState( + provider ? provider.chainId : connectionChainId + ) // effect to initialize the provider useEffect(() => { @@ -153,7 +158,7 @@ const useWalletConnect = (connectionId: string): WalletConnectResult | null => { connectionId, projectId: WALLETCONNECT_PROJECT_ID, showQrModal: true, - chains: [1], + chains: [connectionChainId], optionalChains: Object.keys(RPC).map((chainId) => Number(chainId)), rpcMap: RPC, }) @@ -165,7 +170,7 @@ const useWalletConnect = (connectionId: string): WalletConnectResult | null => { setAccounts(provider.accounts) setChainId(provider.chainId) }) - }, [connectionId]) + }, [connectionId, connectionChainId]) // effect to subscribe to provider events useEffect(() => { diff --git a/extension/src/settings/Connection/ConnectButton/index.tsx b/extension/src/settings/Connection/ConnectButton/index.tsx index 89f60a02..ac1f5eb5 100644 --- a/extension/src/settings/Connection/ConnectButton/index.tsx +++ b/extension/src/settings/Connection/ConnectButton/index.tsx @@ -31,7 +31,7 @@ const ConnectButton: React.FC<{ id: string }> = ({ id }) => { const { connected, connection } = useConnection(id) const metamask = useMetaMask() - const walletConnect = useWalletConnect(connection.id) + const walletConnect = useWalletConnect(connection.id, connection.chainId || 1) const connect = ( providerType: ProviderType, diff --git a/extension/src/settings/connectionHooks.tsx b/extension/src/settings/connectionHooks.tsx index d0bd90ee..0474ca47 100644 --- a/extension/src/settings/connectionHooks.tsx +++ b/extension/src/settings/connectionHooks.tsx @@ -122,7 +122,7 @@ export const useConnection = (id?: string) => { } const metamask = useMetaMask() - const walletConnect = useWalletConnect(connection.id) + const walletConnect = useWalletConnect(connection.id, connection.chainId || 1) const provider: Eip1193Provider = (connection.providerType === ProviderType.MetaMask