From e9f6830960c8e23a0e5b66220d38bf4de85affed Mon Sep 17 00:00:00 2001
From: Charlie McKenzie <charlie@dreamoftrees.com>
Date: Wed, 6 Mar 2024 15:34:37 +1100
Subject: [PATCH] fix: Checkout Connect Widget to wrap web3provider (#1568)

---
 .../src/lib/hooks/useWalletConnect.ts         | 19 +++++++++++++++++++
 .../components/BridgeReviewSummaryStyles.ts   |  1 +
 .../connect/views/SwitchNetworkZkEVM.tsx      |  3 ++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts b/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts
index 3db10b5912..92dc4fbe56 100644
--- a/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts
+++ b/packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts
@@ -52,6 +52,25 @@ export const useWalletConnect = () => {
                 } else {
                   // eslint-disable-next-line no-console
                   console.log('activate succeeded but there is no connected session');
+
+                  if (displayUri.current !== '') {
+                    walletConnectModal?.openModal({
+                      uri: displayUri.current,
+                    })
+                      .then((result) => {
+                        setWalletConnectBusy(false);
+                        resolve(result);
+                      })
+                      .catch((error) => {
+                        // Error opening WalletConnect Modal
+                        setWalletConnectBusy(true);
+                        reject(error);
+                      });
+                  } else {
+                    // if we don't have a display uri and no connected session
+                    // call connect to generate display_uri event
+                    ethereumProvider?.connect();
+                  }
                 }
                 // eslint-disable-next-line no-console
               }).catch((err) => console.log('activate existing pairing error', err));
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
index 18e4b7293c..3c116e9d3b 100644
--- a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
+++ b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
@@ -65,4 +65,5 @@ export const rawImageStyle = {
   width: '32px',
   height: '32px',
   padding: '6px',
+  left: 'base.spacing.x3',
 };
diff --git a/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx b/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx
index 13adc401c9..136ebf7a5f 100644
--- a/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/connect/views/SwitchNetworkZkEVM.tsx
@@ -1,6 +1,7 @@
 import {
   useCallback, useContext, useEffect, useState,
 } from 'react';
+import { Web3Provider } from '@ethersproject/providers';
 import { useTranslation } from 'react-i18next';
 import { isWalletConnectProvider } from 'lib/provider';
 import { SimpleTextBody } from '../../../components/Body/SimpleTextBody';
@@ -40,7 +41,7 @@ export function SwitchNetworkZkEVM() {
         connectDispatch({
           payload: {
             type: ConnectActions.SET_PROVIDER,
-            provider,
+            provider: new Web3Provider(provider.provider as any),
           },
         });