Add shouldForceCloseModal property

Adds `shouldForceCloseModal` property to `WalletConnectionModalBase` component.
threshold-network · Jul 25, 2023 · 3bf7da1 · 3bf7da1
1 parent ab114c9
commit 3bf7da1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/components/Modal/SelectWalletModal/ConnectLedgerLive.tsx b/src/components/Modal/SelectWalletModal/ConnectLedgerLive.tsx
@@ -35,6 +35,7 @@ const ConnectLedgerLive: FC<{ goBack: () => void; closeModal: () => void }> = ({
       }
       tryAgain={connectionRejected ? () => activate(ledgerLive) : undefined}
       walletType={WalletType.LedgerLive}
+      shouldForceCloseModal
     />
   )
 }

diff --git a/src/components/Modal/SelectWalletModal/ConnectWalletConnect.tsx b/src/components/Modal/SelectWalletModal/ConnectWalletConnect.tsx
@@ -36,6 +36,7 @@ const ConnectWalletConnect: FC<{
         activate(walletConnect)
       }}
       walletType={WalletType.WalletConnect}
+      shouldForceCloseModal
     >
       <WalletConnectStatusAlert
         connectionRejected={connectionRejected}

diff --git a/src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx b/src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx
@@ -27,6 +27,14 @@ interface Props extends BaseModalProps {
   goBack: () => void
   connector?: AbstractConnector
   walletType: WalletType
+  /**
+   * This is required for some of the providers (for example WalletConnect v2),
+   * because they have their own modal that is being opened. In that case we
+   * can't display our loading modal because it has larger z-index than
+   * provider's one and it's too problematic to change that.
+   *
+   */
+  shouldForceCloseModal?: boolean
 }
 
 const WalletConnectionModalBase: FC<Props> = ({
@@ -40,6 +48,7 @@ const WalletConnectionModalBase: FC<Props> = ({
   onContinue,
   connector,
   walletType,
+  shouldForceCloseModal,
 }) => {
   const { activate, active, account } = useWeb3React()
   const captureWalletConnected = useCapture(PosthogEvent.WalletConnected)
@@ -49,11 +58,7 @@ const WalletConnectionModalBase: FC<Props> = ({
 
     captureWalletConnected({ walletType })
     activate(connector)
-    if (
-      walletType === WalletType.LedgerLive ||
-      walletType === WalletType.WalletConnect
-    )
-      closeModal()
+    if (shouldForceCloseModal) closeModal()
   }, [activate, connector, captureWalletConnected, walletType])
 
   return (