From 20b1965dddd9d39dbd54721ede6f2d827bd087b8 Mon Sep 17 00:00:00 2001 From: Jeet Date: Thu, 5 Jun 2025 16:51:42 +1000 Subject: [PATCH 1/2] show switch network screen for walletconnect if on incorrect network --- .../src/widgets/connect/components/WalletList.tsx | 10 ++-------- .../src/components/ui/checkout/checkout.tsx | 10 +++++++++- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx index 8e5c15df58..d46061241d 100644 --- a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx +++ b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx @@ -215,23 +215,17 @@ export function WalletList(props: WalletListProps) { const connectCallback = async (ethereumProvider: EthereumProvider) => { if (ethereumProvider.connected && ethereumProvider.session) { - const browserProvider = new WrappedBrowserProvider(ethereumProvider); + const browserProvider = new WrappedBrowserProvider(ethereumProvider, 'any'); selectBrowserProvider(browserProvider, 'walletconnect'); - const { chainId } = await ((await browserProvider.getSigner()).provider.getNetwork()); - if (ethereumProvider.chainId !== targetChainId) { - // @ts-ignore allow protected method `switchEthereumChain` to be called - await ethereumProvider.switchEthereumChain(targetChainId); - } - - if (chainId as unknown as ChainId !== targetChainId) { viewDispatch({ payload: { type: ViewActions.UPDATE_VIEW, view: { type: ConnectWidgetViews.SWITCH_NETWORK }, }, }); + return; } viewDispatch({ diff --git a/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx b/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx index bd74914112..666c62cfea 100644 --- a/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx +++ b/packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx @@ -238,7 +238,15 @@ function CheckoutUI() { // setup widgets factory // ignore language or theme changes const widgetsFactory = useAsyncMemo( - async () => new WidgetsFactory(checkoutSdk, { theme, language }), + async () => new WidgetsFactory(checkoutSdk, { theme, language, walletConnect: { + projectId: "938b553484e344b1e0b4bb80edf8c362", + metadata: { + url: 'http://localhost:3000/checkout', + name: 'Widgets Sample App', + description: 'Checkout', + icons: [], + }, + } }), [checkoutSdk] ); From 11e7b2716f377a57660646525f3faf74771a3078 Mon Sep 17 00:00:00 2001 From: Jeet Date: Thu, 5 Jun 2025 17:00:24 +1000 Subject: [PATCH 2/2] always add a call for adding a chain when its walletconnect --- packages/checkout/sdk/src/network/network.ts | 7 +++++++ .../src/widgets/connect/components/WalletList.tsx | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/checkout/sdk/src/network/network.ts b/packages/checkout/sdk/src/network/network.ts index 1a5586f616..b36f8d7139 100644 --- a/packages/checkout/sdk/src/network/network.ts +++ b/packages/checkout/sdk/src/network/network.ts @@ -165,6 +165,13 @@ export async function switchWalletNetwork( ); } + // walletconnect on trying to switch network, if network doesn't exist, it does not throw an error! + // so the catch block below is not triggered, so we need to add the network manually + // always calling addNetworkToWallet is harmless, as nothing happens if the network already exists + if (provider.ethereumProvider?.isWalletConnect) { + await addNetworkToWallet(networkMap, provider, chainId); + } + // WT-1146 - Refer to the README in this folder for explanation on the switch network flow try { await switchNetworkInWallet(networkMap, provider, chainId); diff --git a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx index d46061241d..300eb51b9f 100644 --- a/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx +++ b/packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx @@ -215,7 +215,7 @@ export function WalletList(props: WalletListProps) { const connectCallback = async (ethereumProvider: EthereumProvider) => { if (ethereumProvider.connected && ethereumProvider.session) { - const browserProvider = new WrappedBrowserProvider(ethereumProvider, 'any'); + const browserProvider = new WrappedBrowserProvider(ethereumProvider); selectBrowserProvider(browserProvider, 'walletconnect'); if (ethereumProvider.chainId !== targetChainId) {