Skip to content

feat(checkout): Handle network switch when using walletconnect #2649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(checkout): Handle network switch when using walletconnect #2649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20b1965
show switch network screen for walletconnect if on incorrect network
jeetparikh Jun 5, 2025
11e7b27
always add a call for adding a chain when its walletconnect
jeetparikh Jun 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/checkout/sdk/src/network/network.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is crucial for walletconnect switch to work. Also adds a new network prompt when you don't have the network added

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);
Expand Down
8 changes: 1 addition & 7 deletions packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,20 +218,14 @@ export function WalletList(props: WalletListProps) {
const browserProvider = new WrappedBrowserProvider(ethereumProvider);
selectBrowserProvider(browserProvider, 'walletconnect');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to do this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Never mind, I see why we do


const { chainId } = await ((await browserProvider.getSigner()).provider.getNetwork());

if (ethereumProvider.chainId !== targetChainId) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From my testing, the ethereumProvider.chainId was never targetChainId - even when my MM was on the right chain

// @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({
Expand Down
10 changes: 9 additions & 1 deletion packages/checkout/widgets-sample-app/src/components/ui/checkout/checkout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
);

Expand Down