web3-onboard/core:v2.0.9: [enhancement] - Autoselect Disable Modals (#873)

* Add additional options to autoselect

* Increment version

* Update docs

* Update variable name for better readablility

Author: lnbc1QWFyb24

packages/core/README.md

@@ -208,6 +208,11 @@ if (previouslyConnectedWallets) {
   // Connect the most recently connected wallet (first in the array)
   await onboard.connectWallet({ autoSelect: previouslyConnectedWallets[0] })
 
+  // You can also auto connect "silently" and disable all onboard modals to avoid them flashing on page load
+  await onboard.connectWallet({
+    autoSelect: { label: previouslyConnectedWallets[0], disableModals: true }
+  })
+
   // OR - loop through and initiate connection for all previously connected wallets
   // note: This UX might not be great as the user may need to login to each wallet one after the other
   // for (walletLabel in previouslyConnectedWallets) {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/src/connect.ts

@@ -2,10 +2,12 @@ import { firstValueFrom } from 'rxjs'
 import { filter, withLatestFrom, pluck } from 'rxjs/operators'
 import { state } from './store'
 import { connectWallet$, wallets$ } from './streams'
-import type { ConnectOptions, WalletState } from './types'
+import type { ConnectOptions, ConnectOptionsString, WalletState } from './types'
 import { validateConnectOptions } from './validation'
 
-async function connect(options?: ConnectOptions): Promise<WalletState[]> {
+async function connect(
+  options?: ConnectOptions | ConnectOptionsString
+): Promise<WalletState[]> {
   if (options) {
     const error = validateConnectOptions(options)
     if (error) {
@@ -22,9 +24,17 @@ async function connect(options?: ConnectOptions): Promise<WalletState[]> {
       'At least one chain must be set before attempting to connect a wallet'
     )
 
-  const { autoSelect } = options || { autoSelect: '' }
+  const { autoSelect } = options || {
+    autoSelect: { label: '', disableModals: false }
+  }
 
-  connectWallet$.next({ autoSelect, inProgress: true })
+  connectWallet$.next({
+    autoSelect:
+      typeof autoSelect === 'string'
+        ? { label: autoSelect, disableModals: false }
+        : autoSelect,
+    inProgress: true
+  })
 
   const result$ = connectWallet$.pipe(
     filter(

packages/core/src/streams.ts

@@ -12,7 +12,7 @@ import {
 import { resetStore } from './store/actions'
 import { state } from './store'
 
-import type { WalletState, InternalState } from './types'
+import type { WalletState, InternalState, ConnectOptions } from './types'
 
 export const reset$ = new Subject<void>()
 export const disconnectWallet$ = new Subject<WalletState['label']>()
@@ -25,7 +25,7 @@ export const internalState$ = new BehaviorSubject<InternalState>({
 })
 
 export const connectWallet$ = new BehaviorSubject<{
-  autoSelect?: string
+  autoSelect?: ConnectOptions['autoSelect']
   actionRequired?: string
   inProgress: boolean
 }>({ inProgress: false, actionRequired: '' })

packages/core/src/types.ts

@@ -30,7 +30,11 @@ export interface OnboardAPI {
   state: typeof state
 }
 export interface ConnectOptions {
-  autoSelect?: string // wallet name to autoselect for user
+  autoSelect?: { label: string; disableModals: boolean }
+}
+
+export interface ConnectOptionsString {
+  autoSelect?: string
 }
 
 export interface DisconnectOptions {

packages/core/src/validation.ts

@@ -5,7 +5,8 @@ import type {
   InitOptions,
   WalletState,
   ConnectOptions,
-  DisconnectOptions
+  DisconnectOptions,
+  ConnectOptionsString
 } from './types'
 
 const chainId = Joi.string().pattern(/^0x[0-9a-fA-F]+$/)
@@ -100,7 +101,13 @@ const initOptions = Joi.object({
 })
 
 const connectOptions = Joi.object({
-  autoSelect: Joi.string()
+  autoSelect: [
+    Joi.object({
+      label: Joi.string().required(),
+      disableModals: Joi.boolean()
+    }),
+    Joi.string()
+  ]
 })
 
 const disconnectOptions = Joi.object({
@@ -133,7 +140,9 @@ export function validateWalletModule(data: WalletModule): ValidateReturn {
   return validate(walletModule, data)
 }
 
-export function validateConnectOptions(data: ConnectOptions): ValidateReturn {
+export function validateConnectOptions(
+  data: ConnectOptions | ConnectOptionsString
+): ValidateReturn {
   return validate(connectOptions, data)
 }
 

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

@@ -1,58 +1,17 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n'
-
-  import { getBalance, getEns } from '../../provider'
-  import { updateAccount } from '../../store/actions'
-  import { connectWallet$, internalState$ } from '../../streams'
-  import { validEnsChain } from '../../utils'
+  import { internalState$ } from '../../streams'
   import success from '../../icons/success'
   import WalletAppBadge from '../shared/WalletAppBadge.svelte'
 
   import type { WalletState } from '../../types'
   import defaultAppIcon from '../../icons/default-app-icon'
   import SuccessStatusIcon from '../shared/SuccessStatusIcon.svelte'
-  import { state } from '../../store'
   import en from '../../i18n/en.json'
 
   export let selectedWallet: WalletState
 
-  const { label } = selectedWallet
   const { appMetadata } = internalState$.getValue()
-
-  async function updateAccountDetails() {
-    const { accounts, chains: selectedWalletChains } = selectedWallet
-    const appChains = state.get().chains
-    const [connectedWalletChain] = selectedWalletChains
-
-    const appChain = appChains.find(
-      ({ namespace, id }) =>
-        namespace === connectedWalletChain.namespace &&
-        id === connectedWalletChain.id
-    )
-
-    const { address } = accounts[0]
-    let { balance, ens } = accounts[0]
-
-    if (balance === null) {
-      getBalance(address, appChain).then(balance => {
-        updateAccount(label, address, {
-          balance
-        })
-      })
-    }
-
-    if (ens === null && validEnsChain(connectedWalletChain.id)) {
-      getEns(address, appChain).then(ens => {
-        updateAccount(label, address, {
-          ens
-        })
-      })
-    }
-
-    setTimeout(() => connectWallet$.next({ inProgress: false }), 1500)
-  }
-
-  updateAccountDetails()
 </script>
 
 <style>

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

@@ -1,71 +1,19 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n'
-  import { createEventDispatcher } from 'svelte'
-  import { ProviderRpcErrorCode } from '@web3-onboard/common'
-
-  import { getChainId, requestAccounts, trackWallet } from '../../provider'
   import { internalState$ } from '../../streams'
   import type { WalletState, i18n } from '../../types'
 
   import WalletAppBadge from '../shared/WalletAppBadge.svelte'
   import defaultAppIcon from '../../icons/default-app-icon'
   import en from '../../i18n/en.json'
-  import { addWallet } from '../../store/actions'
 
+  export let connectWallet: () => Promise<void>
   export let selectedWallet: WalletState
   export let deselectWallet: (label: string) => void
-  export let updateSelectedWallet: (update: Partial<WalletState>) => void
   export let setStep: (update: keyof i18n['connect']) => void
-
-  let connectionRejected = false
+  export let connectionRejected: boolean
 
   const { appMetadata } = internalState$.getValue()
-
-  const dispatch = createEventDispatcher<{ connectionRejected: boolean }>()
-
-  async function connect() {
-    dispatch('connectionRejected', false)
-    connectionRejected = false
-
-    const { provider, label } = selectedWallet
-
-    try {
-      const [address] = await requestAccounts(provider)
-
-      // canceled previous request
-      if (!address) {
-        return
-      }
-
-      const chain = await getChainId(provider)
-
-      const update: Pick<WalletState, 'accounts' | 'chains'> = {
-        accounts: [{ address, ens: null, balance: null }],
-        chains: [{ namespace: 'evm', id: chain }]
-      }
-
-      addWallet({ ...selectedWallet, ...update })
-      trackWallet(provider, label)
-      updateSelectedWallet(update)
-      setStep('connectedWallet')
-    } catch (error) {
-      const { code } = error as { code: number; message: string }
-
-      // user rejected account access
-      if (code === ProviderRpcErrorCode.ACCOUNT_ACCESS_REJECTED) {
-        connectionRejected = true
-        dispatch('connectionRejected', true)
-        return
-      }
-
-      // account access has already been requested and is awaiting approval
-      if (code === ProviderRpcErrorCode.ACCOUNT_ACCESS_ALREADY_REQUESTED) {
-        return
-      }
-    }
-  }
-
-  connect()
 </script>
 
 <style>
@@ -176,7 +124,7 @@
           )}
         </div>
         {#if connectionRejected}
-          <div class="rejected-cta subtext" on:click={connect}>
+          <div class="rejected-cta subtext" on:click={connectWallet}>
             {$_('connect.connectingWallet.rejectedCTA', {
               default: en.connect.connectingWallet.rejectedCTA
             })}
@@ -195,7 +143,6 @@
   <button
     on:click={() => {
       deselectWallet(selectedWallet.label)
-      dispatch('connectionRejected', false)
       setStep('selectingWallet')
     }}
     class="onboard-button-primary"