[core: 2.5.0-alpha.1] - [enhancement] - Delayed Wallet Init (#1145)

* Init wallets upon connect call

* Remove log

* Remove log

* Increase wait to be safe

* Fix autoselect wait check

* Add gamestop and autoselect for testing

* Revert "Add gamestop and autoselect for testing"

This reverts commit 0526972.

* Increment version

* Remove unused import

Author: lnbc1QWFyb24

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.4.1-alpha.1",
+  "version": "2.5.0-alpha.1",
   "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/configuration.ts

@@ -5,7 +5,8 @@ export let configuration: Configuration = {
   svelteInstance: null,
   appMetadata: null,
   apiKey: null,
-  device: getDevice()
+  device: getDevice(),
+  initialWalletInit: []
 }
 
 export function updateConfiguration(update: Partial<Configuration>): void {

packages/core/src/connect.ts

@@ -1,8 +1,11 @@
 import { firstValueFrom } from 'rxjs'
 import { filter, withLatestFrom, pluck } from 'rxjs/operators'
+import { configuration } from './configuration'
 import { state } from './store'
+import { setWalletModules } from './store/actions'
 import { connectWallet$, wallets$ } from './streams'
 import type { ConnectOptions, ConnectOptionsString, WalletState } from './types'
+import { wait } from './utils'
 import { validateConnectOptions } from './validation'
 
 async function connect(
@@ -28,6 +31,16 @@ async function connect(
     autoSelect: { label: '', disableModals: false }
   }
 
+  // if auto selecting, wait until next event loop
+  if (autoSelect && (typeof autoSelect === 'string' || autoSelect.label)) {
+    await wait(50)
+  }
+
+  // first time calling connect, so initialize and set wallet modules
+  if (!state.get().walletModules.length) {
+    setWalletModules(configuration.initialWalletInit)
+  }
+
   connectWallet$.next({
     autoSelect:
       typeof autoSelect === 'string'

packages/core/src/index.ts

@@ -17,12 +17,12 @@ import { configuration, updateConfiguration } from './configuration'
 
 import {
   addChains,
-  setWalletModules,
   updateAccountCenter,
   updateNotify,
   customNotification,
   setLocale,
-  setPrimaryWallet
+  setPrimaryWallet,
+  setWalletModules
 } from './store/actions'
 
 import updateBalances from './update-balances'
@@ -168,7 +168,6 @@ function init(options: InitOptions): OnboardAPI {
       if (!apiKey || !notifyUpdate.enabled) {
         notifyUpdate.enabled = false
       }
-      console.log(notifyUpdate)
       updateNotify(notifyUpdate)
     }
   } else {
@@ -191,11 +190,10 @@ function init(options: InitOptions): OnboardAPI {
   updateConfiguration({
     appMetadata,
     svelteInstance: app,
-    apiKey
+    apiKey,
+    initialWalletInit: wallets
   })
 
-  setWalletModules(wallets)
-
   return API
 }
 
@@ -317,10 +315,13 @@ function mountApp() {
       </style>
     `
 
-  const containerElementQuery = state.get().accountCenter.containerElement || 'body'
+  const containerElementQuery =
+    state.get().accountCenter.containerElement || 'body'
   const containerElement = document.querySelector(containerElementQuery)
   if (!containerElement) {
-    throw new Error(`Element with query ${state.get().accountCenter} does not exist.`)
+    throw new Error(
+      `Element with query ${state.get().accountCenter} does not exist.`
+    )
   }
 
   containerElement.appendChild(onboard)

packages/core/src/store/actions.ts

@@ -123,7 +123,6 @@ export function removeWallet(id: string): void {
 }
 
 export function setPrimaryWallet(wallet: WalletState, address?: string): void {
-  console.log({ address })
   const error =
     validateWallet(wallet) || (address && validateString(address, 'address'))
 

packages/core/src/types.ts

@@ -119,6 +119,7 @@ export type Configuration = {
   appMetadata: AppMetadata | null
   device: Device | DeviceNotBrowser
   apiKey: string
+  initialWalletInit: WalletInit[]
 }
 
 export type Locale = string

packages/core/src/utils.ts

@@ -85,8 +85,8 @@ export function shortenEns(ens: string): string {
 
 export async function copyWalletAddress(text: string): Promise<void> {
   try {
-   const copy = await navigator.clipboard.writeText(text);
-   return copy
+    const copy = await navigator.clipboard.writeText(text)
+    return copy
   } catch (err) {
     console.error('Failed to copy: ', err)
   }
@@ -242,3 +242,6 @@ export const defaultNotifyEventStyles: Record<string, NotifyEventStyles> = {
     eventIcon: info
   }
 }
+
+export const wait = (time: number) =>
+  new Promise(resolve => setTimeout(resolve, time))