show switch network screen for walletconnect if on incorrect network

Author: jeetparikh

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({

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]
   );