[fix] - MetaMask Connect Flow

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.8.5-alpha.1",
+  "version": "2.8.5-alpha.2",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",

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}