diff --git a/packages/react/src/ui/Connect/components/Bridge/BridgeDialog.tsx b/packages/react/src/ui/Connect/components/Bridge/BridgeDialog.tsx index 7a40c3e5..5ed7431d 100644 --- a/packages/react/src/ui/Connect/components/Bridge/BridgeDialog.tsx +++ b/packages/react/src/ui/Connect/components/Bridge/BridgeDialog.tsx @@ -1,5 +1,5 @@ import * as Dialog from '@radix-ui/react-dialog'; -import { useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useAccount, useBalance, @@ -35,13 +35,27 @@ type BridgeProps = { export function BridgeDialog({ theme }: BridgeProps) { const { networks } = useNetworkConfigs(); const { provider } = useProvider(); - const bridgeHref = useMemo(() => { - const network = networks.find((n) => n.chainId === provider?.getChainId()); - if (!network) return null; - if (!network.bridgeURL) return null; - const url = new URL(network.bridgeURL); - url.searchParams.set('', 'true'); - return url.toString(); + const [bridgeHref, setBridgeHref] = useState(null); + + useEffect(() => { + let abort = false; + const fetchBridgeHref = async () => { + if (abort) return; + const chainId = await provider?.getChainId(); + const network = networks.find((n) => n.chainId === chainId); + if (abort) return; + if (network?.bridgeURL) { + const url = new URL(network.bridgeURL); + url.searchParams.set('', 'true'); + setBridgeHref(url.toString()); + } else { + setBridgeHref(null); + } + }; + fetchBridgeHref(); + return () => { + abort = true; + }; }, [networks, provider]); const { isConnected, diff --git a/packages/walletconnect-connector/src/test/walletConnector.test.ts b/packages/walletconnect-connector/src/test/walletConnector.test.ts index e3a764ed..9ce3b457 100644 --- a/packages/walletconnect-connector/src/test/walletConnector.test.ts +++ b/packages/walletconnect-connector/src/test/walletConnector.test.ts @@ -220,11 +220,12 @@ describe('WalletConnect Connector', () => { describe('currentNetwork()', () => { test('returns fuel network', async () => { const network = await connector.currentNetwork(); + // @ts-expect-error fuelProvider is private + const chainId = await connector.fuelProvider.getChainId(); // @ts-expect-error fuelProvider is private expect(network.url).to.equal(connector.fuelProvider?.url); - // @ts-expect-error fuelProvider is private - expect(network.chainId).to.equal(connector.fuelProvider?.getChainId()); + expect(network.chainId).to.equal(chainId); }); }); });