Merge pull request #1296 from blocknative/release/2.12.0

Release 2.12.0 (main)

.github/workflows/issue-to-notion.yml

@@ -24,8 +24,8 @@ jobs:
           FLAG: Github
           STATUS: Backlog
           # Product Work Board
-          DATABASE_ID: 29876f9a9b864ca39a984f42e17fd345
-          PROJECT_NAME: Onboard.js
+          DATABASE_ID: 69f0e513a59d445b87a1baed729c75c5
+          PROJECT_NAME: web3-onboard
           # User ids of who to assign the card to in notion: Taylor, Adam, Aaron
           NOTION_USER_IDS: f6cbb362-4908-4138-9ef0-434003d9a9f8,8a3a2287-5d2c-4665-906d-02ae9a113340,3b407adf-6552-40de-b22f-5efa852c34a2
         shell: bash

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web3-onboard-monorepo",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "private": true,
   "workspaces": {
     "packages": [
@@ -51,7 +51,7 @@
     "url": "https://github.com/blocknative/web3-onboard.git",
     "directory": "packages/core"
   },
-  "homepage": "https://www.blocknative.com/onboard",
+  "homepage": "https://onboard.blocknative.com",
   "bugs": "https://github.com/blocknative/web3-onboard/issues",
   "scripts": {
     "install-m1-mac": "yarn install --ignore-optional",

packages/coinbase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Coinbase SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised 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",
@@ -38,7 +38,7 @@
     "url": "https://github.com/blocknative/web3-onboard.git",
     "directory": "packages/coinbase"
   },
-  "homepage": "https://www.blocknative.com/onboard",
+  "homepage": "https://onboard.blocknative.com",
   "bugs": "https://github.com/blocknative/web3-onboard/issues",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -59,6 +59,6 @@
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "^3.0.5",
-    "@web3-onboard/common": "^2.2.2"
+    "@web3-onboard/common": "^2.2.3"
   }
 }

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised 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",
@@ -38,7 +38,7 @@
     "url": "https://github.com/blocknative/web3-onboard.git",
     "directory": "packages/common"
   },
-  "homepage": "https://www.blocknative.com/onboard",
+  "homepage": "https://onboard.blocknative.com",
   "bugs": "https://github.com/blocknative/web3-onboard/issues",
   "scripts": {
     "build": "tsc",
@@ -75,6 +75,6 @@
   "dependencies": {
     "bignumber.js": "^9.1.0",
     "ethers": "5.5.4",
-    "joi": "^17.4.2"
+    "joi": "^17.6.1"
   }
 }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.8.4",
+  "version": "2.8.5",
   "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",
@@ -39,7 +39,7 @@
     "url": "https://github.com/blocknative/web3-onboard.git",
     "directory": "packages/core"
   },
-  "homepage": "https://www.blocknative.com/onboard",
+  "homepage": "https://onboard.blocknative.com",
   "bugs": "https://github.com/blocknative/web3-onboard/issues",
   "scripts": {
     "build": "rollup -c",
@@ -82,13 +82,13 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.2.2",
+    "@web3-onboard/common": "^2.2.3",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "^4.4.1",
     "bowser": "^2.11.0",
     "ethers": "5.5.3",
     "eventemitter3": "^4.0.7",
-    "joi": "17.6.0",
+    "joi": "^17.6.1",
     "lodash.merge": "^4.6.2",
     "lodash.partition": "^4.6.0",
     "nanoid": "^4.0.0",

packages/core/src/chain.ts

@@ -1,6 +1,6 @@
-import { firstValueFrom } from 'rxjs'
+import { firstValueFrom, Observable } from 'rxjs'
 import { filter, map } from 'rxjs/operators'
-import { ProviderRpcErrorCode } from '@web3-onboard/common'
+import { Chain, ProviderRpcErrorCode } from '@web3-onboard/common'
 import { addNewChain, switchChain } from './provider.js'
 import { state } from './store/index.js'
 import { switchChainModal$ } from './streams.js'
@@ -66,21 +66,17 @@ async function setChain(options: {
       filter(x => x === null),
       map(() => false)
     )
-
     if (
       code === ProviderRpcErrorCode.CHAIN_NOT_ADDED ||
       code === ProviderRpcErrorCode.UNRECOGNIZED_CHAIN_ID
     ) {
       // chain has not been added to wallet
-      try {
-        await addNewChain(wallet.provider, chain)
-        await switchChain(wallet.provider, chainIdHex)
-        return true
-      } catch (error) {
-        // display notification to user to switch chain
-        switchChainModal$.next({ chain })
-        return firstValueFrom(switchChainModalClosed$)
-      }
+      return chainNotInWallet(
+        wallet,
+        chain,
+        switchChainModalClosed$,
+        chainIdHex
+      )
     }
 
     if (code === ProviderRpcErrorCode.UNSUPPORTED_METHOD) {
@@ -93,4 +89,26 @@ async function setChain(options: {
   return false
 }
 
+const chainNotInWallet = async (
+  wallet: WalletState,
+  chain: Chain,
+  switchChainModalClosed$: Observable<boolean>,
+  chainIdHex: string
+): Promise<boolean> => {
+  try {
+    await addNewChain(wallet.provider, chain)
+    await switchChain(wallet.provider, chainIdHex)
+    return true
+  } catch (error) {
+    const { code } = error as { code: number }
+    if (code === ProviderRpcErrorCode.ACCOUNT_ACCESS_REJECTED) {
+      // add new chain rejected by user
+      return false
+    }
+    // display notification to user to switch chain
+    switchChainModal$.next({ chain })
+    return firstValueFrom(switchChainModalClosed$)
+  }
+}
+
 export default setChain

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}