[fix] - MetaMask Connect Flow (#1293)

* Handle case where MM connection in progress

* Increment version

* Update copy

* Add return statement

Author: lnbc1QWFyb24

packages/core/src/i18n/en.json

@@ -25,6 +25,7 @@
       },
       "mainText": "Connecting...",
       "paragraph": "Make sure to select all accounts that you want to grant access to.",
+      "previousConnection": "{wallet} already has a pending connection request, please open the {wallet} app to login and connect.",
       "rejectedText": "Connection Rejected!",
       "rejectedCTA": "Click here to try again",
       "primaryButton": "Back to wallets"

packages/core/src/views/connect/ConnectingWallet.svelte

@@ -12,6 +12,7 @@
   export let deselectWallet: (label: string) => void
   export let setStep: (update: keyof i18n['connect']) => void
   export let connectionRejected: boolean
+  export let previousConnectionRequest: boolean
 
   const { appMetadata } = configuration
 </script>
@@ -69,23 +70,27 @@
 <div class="container flex flex-column items-center">
   <div
     class="connecting-container flex justify-between items-center"
-    class:warning={connectionRejected}
+    class:warning={connectionRejected || previousConnectionRequest}
   >
     <div class="flex">
       <div class="flex justify-center relative">
         <WalletAppBadge
           size={40}
           padding={8}
           icon={(appMetadata && appMetadata.icon) || questionIcon}
-          border={connectionRejected ? 'yellow' : 'blue'}
+          border={connectionRejected || previousConnectionRequest
+            ? 'yellow'
+            : 'blue'}
           background="lightGray"
         />
 
         <div class="relative" style="right: 0.5rem;">
           <WalletAppBadge
             size={40}
             padding={8}
-            border={connectionRejected ? 'yellow' : 'blue'}
+            border={connectionRejected || previousConnectionRequest
+              ? 'yellow'
+              : 'blue'}
             background="white"
             icon={selectedWallet.icon}
           />
@@ -95,9 +100,9 @@
       <div class="flex flex-column justify-center ml">
         <div class="text" class:text-rejected={connectionRejected}>
           {$_(
-            connectionRejected
-              ? 'connect.connectingWallet.rejectedText'
-              : 'connect.connectingWallet.mainText',
+            `connect.connectingWallet.${
+              connectionRejected ? 'rejectedText' : 'mainText'
+            }`,
             {
               default: connectionRejected
                 ? en.connect.connectingWallet.rejectedText
@@ -113,9 +118,15 @@
           </div>
         {:else}
           <div class="subtext">
-            {$_('connect.connectingWallet.paragraph', {
-              default: en.connect.connectingWallet.paragraph
-            })}
+            {$_(
+              `connect.connectingWallet.${
+                previousConnectionRequest ? 'previousConnection' : 'paragraph'
+              }`,
+              {
+                default: en.connect.connectingWallet.paragraph,
+                values: { wallet: selectedWallet.label }
+              }
+            )}
           </div>
         {/if}
       </div>

packages/core/src/views/connect/Index.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { ProviderRpcErrorCode, WalletModule } from '@web3-onboard/common'
-  import { BehaviorSubject, takeUntil } from 'rxjs'
   import EventEmitter from 'eventemitter3'
   import { _ } from 'svelte-i18n'
   import en from '../../i18n/en.json'
-  import { selectAccounts } from '../../provider.js'
+  import { listenAccountsChanged, selectAccounts } from '../../provider.js'
   import { state } from '../../store/index.js'
   import { connectWallet$, onDestroy$ } from '../../streams.js'
   import { addWallet, updateAccount } from '../../store/actions.js'
@@ -20,6 +19,18 @@
   import { configuration } from '../../configuration.js'
   import { getBlocknativeSdk } from '../../services.js'
   import { BigNumber } from 'ethers'
+
+  import {
+    BehaviorSubject,
+    distinctUntilChanged,
+    filter,
+    firstValueFrom,
+    mapTo,
+    Subject,
+    take,
+    takeUntil
+  } from 'rxjs'
+
   import {
     getChainId,
     requestAccounts,
@@ -39,8 +50,10 @@
 
   const { appMetadata } = configuration
   const { walletModules, connect } = state.get()
+  const cancelPreviousConnect$ = new Subject<void>()
 
   let connectionRejected = false
+  let previousConnectionRequest = false
   let wallets: WalletWithLoadingIcon[] = []
   let selectedWallet: WalletState | null
   let agreed: boolean
@@ -54,6 +67,25 @@
     'selectingWallet'
   )
 
+  // handle the edge case where disableModals was set to true on first call
+  // and then set to false on second call and there is still a pending call
+  connectWallet$
+    .pipe(
+      distinctUntilChanged(
+        (prev, curr) =>
+          prev.autoSelect &&
+          curr.autoSelect &&
+          prev.autoSelect.disableModals === curr.autoSelect.disableModals
+      ),
+      filter(
+        ({ autoSelect }) => autoSelect && autoSelect.disableModals === false
+      ),
+      takeUntil(onDestroy$)
+    )
+    .subscribe(() => {
+      selectedWallet && connectWallet()
+    })
+
   // ==== SELECT WALLET ==== //
   async function selectWallet({
     label,
@@ -161,8 +193,15 @@
 
     const { provider, label } = selectedWallet
 
+    cancelPreviousConnect$.next()
+
     try {
-      const [address] = await requestAccounts(provider)
+      const [address] = await Promise.race([
+        // resolved account
+        requestAccounts(provider),
+        // or connect wallet is called again whilst waiting for response
+        firstValueFrom(cancelPreviousConnect$.pipe(mapTo([])))
+      ])
 
       // canceled previous request
       if (!address) {
@@ -216,6 +255,25 @@
 
       // account access has already been requested and is awaiting approval
       if (code === ProviderRpcErrorCode.ACCOUNT_ACCESS_ALREADY_REQUESTED) {
+        previousConnectionRequest = true
+
+        if (autoSelect.disableModals) {
+          connectWallet$.next({ inProgress: false })
+          return
+        }
+
+        listenAccountsChanged({
+          provider: selectedWallet.provider,
+          disconnected$: connectWallet$.pipe(
+            filter(({ inProgress }) => !inProgress),
+            mapTo('')
+          )
+        })
+          .pipe(take(1))
+          .subscribe(([account]) => {
+            account && connectWallet()
+          })
+
         return
       }
     }
@@ -286,6 +344,7 @@
   })
 
   function setStep(update: keyof i18n['connect']) {
+    cancelPreviousConnect$.next()
     modalStep$.next(update)
   }
 
@@ -408,6 +467,7 @@
             <ConnectingWallet
               {connectWallet}
               {connectionRejected}
+              {previousConnectionRequest}
               {setStep}
               {deselectWallet}
               {selectedWallet}