thirdweb-dev · Adamj1232 · Jul 15, 2022 · Jul 12, 2022 · Jul 13, 2022 · Jul 14, 2022
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web3-onboard-monorepo",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "private": true,
   "workspaces": [
     "./packages/*"
@@ -33,7 +33,10 @@
     "Mempool",
     "pending",
     "confirmed",
-    "Injected Wallet"
+    "Injected Wallet",
+    "GameStop",
+    "Crypto",
+    "Crypto Wallet"
   ],
   "repository": {
     "type": "git",

diff --git a/packages/coinbase/package.json b/packages/coinbase/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "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",
@@ -29,7 +29,9 @@
     "Mempool",
     "pending",
     "confirmed",
-    "Injected Wallet"
+    "Injected Wallet",
+    "Crypto",
+    "Crypto Wallet"
   ],
   "repository": {
     "type": "git",
@@ -57,6 +59,6 @@
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "^3.0.5",
-    "@web3-onboard/common": "^2.1.5"
+    "@web3-onboard/common": "^2.1.6"
   }
 }
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "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",
@@ -29,7 +29,9 @@
     "Mempool",
     "pending",
     "confirmed",
-    "Injected Wallet"
+    "Injected Wallet",
+    "Crypto",
+    "Crypto Wallet"
   ],
   "repository": {
     "type": "git",

diff --git a/packages/common/src/elements/TableHeader.svelte b/packages/common/src/elements/TableHeader.svelte
@@ -80,10 +80,7 @@
   input[type='checkbox'] {
     -webkit-appearance: none;
     width: auto;
-    background: var(
-      --account-select-white,
-      var(--onboard-white, var(--white))
-    );
+    background: var(--account-select-white, var(--onboard-white, var(--white)));
     border: 1px solid
       var(--account-select-gray-300, var(--onboard-gray-300, var(--gray-300)));
     padding: 0.5em;
@@ -144,6 +141,9 @@
       --account-select-font-family-light,
       var(--font-family-light)
     );
+    font-size: var(--account-select-font-size-7, var(--font-size-7));
+    max-width: 15rem;
+    line-height: 1;
   }
 
   .table-controls {

diff --git a/packages/common/src/views/AccountSelect.svelte b/packages/common/src/views/AccountSelect.svelte
@@ -67,7 +67,17 @@
       loadingAccounts = false
     } catch (err) {
       const { message } = err as { message: string }
-      errorFromScan = message || 'There was an error scanning for accounts'
+
+      if (
+        typeof message === 'string' &&
+        message.includes('could not detect network')
+      ) {
+        errorFromScan =
+          'There was an error detecting connected network from RPC endpoint'
+      } else {
+        errorFromScan = message || 'There was an error scanning for accounts'
+      }
+
       loadingAccounts = false
     }
   }
@@ -397,10 +407,7 @@
     right: 0.2rem;
     width: 2.5rem;
     height: 2.5rem;
-    background: var(
-      --account-select-white,
-      var(--onboard-white, var(--white))
-    );
+    background: var(--account-select-white, var(--onboard-white, var(--white)));
     border-radius: 1rem;
   }
 

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -713,7 +713,7 @@ onboard.state.actions.updateAccountCenter({
 ```
 
 **`setPrimaryWallet`**
-The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is to be set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in:
+The primary wallet (first in the list of connected wallets) and primary account (first in the list of connected accounts for a wallet) can be set by using the `setPrimaryWallet` function. The wallet that is set needs to be passed in for the first parameter and if you would like to set the primary account, the address of that account also needs to be passed in:
 
 ```typescript
 // set the second wallet in the wallets array as the primary
@@ -792,6 +792,10 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
 
   /* CUSTOMIZE ACCOUNT CENTER*/
   --account-center-z-index
+  --account-center-position-top
+  --account-center-position-bottom
+  --account-center-position-right
+  --account-center-position-left
   --account-center-minimized-background
   --account-center-maximized-upper-background
   --account-center-maximized-network-section
@@ -925,7 +929,12 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --account-select-modal-margin-4: 1rem;
   --account-select-modal-margin-5: 0.5rem;
 
-  /* notify STYLES */
+  /* NOTIFY STYLES */
+  /* Notify Positioning variables only take effect if Notify is Positioned separate of Account Center */
+  --notify-onboard-container-position-top
+  --notify-onboard-container-position-bottom
+  --notify-onboard-container-position-right
+  --notify-onboard-container-position-left
   --notify-onboard-font-family-normal
   --notify-onboard-font-size-5
   --notify-onboard-gray-300

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "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",
@@ -29,7 +29,10 @@
     "Mempool",
     "pending",
     "confirmed",
-    "Injected Wallet"
+    "Injected Wallet",
+    "GameStop",
+    "Crypto",
+    "Crypto Wallet"
   ],
   "repository": {
     "type": "git",
@@ -78,7 +81,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.1.5",
+    "@web3-onboard/common": "^2.1.6",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "^4.4.1",
     "bowser": "^2.11.0",

diff --git a/packages/core/src/configuration.ts b/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 {

diff --git a/packages/core/src/connect.ts b/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'

diff --git a/packages/core/src/index.ts b/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'
@@ -61,7 +61,8 @@ export type {
   CustomNotification,
   Notification,
   Notify,
-  UpdateNotification
+  UpdateNotification,
+  PreflightNotificationsOptions
 } from './types'
 
 export type { EIP1193Provider } from '@web3-onboard/common'
@@ -167,7 +168,6 @@ function init(options: InitOptions): OnboardAPI {
       if (!apiKey || !notifyUpdate.enabled) {
         notifyUpdate.enabled = false
       }
-      console.log(notifyUpdate)
       updateNotify(notifyUpdate)
     }
   } else {
@@ -190,11 +190,10 @@ function init(options: InitOptions): OnboardAPI {
   updateConfiguration({
     appMetadata,
     svelteInstance: app,
-    apiKey
+    apiKey,
+    initialWalletInit: wallets
   })
 
-  setWalletModules(wallets)
-
   return API
 }
 
@@ -316,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)

diff --git a/packages/core/src/preflight-notifications.ts b/packages/core/src/preflight-notifications.ts
@@ -63,8 +63,7 @@ export async function preflightNotifications(
     if (transactionCost.gt(new BigNumber(balance))) {
       const eventCode = 'nsfFail'
 
-      const newNotification = buildNotification(eventCode, id)
-      addNotification(newNotification)
+      addNotification(buildNotification(eventCode, id))
     }
   }
 
@@ -93,8 +92,7 @@ export async function preflightNotifications(
   }, reminderTimeout)
 
   const eventCode = 'txRequest'
-  const newNotification = buildNotification(eventCode, id)
-  addNotification(newNotification)
+  addNotification(buildNotification(eventCode, id))
 
   // if not provided with sendTransaction function,
   // resolve with transaction hash(or void) so dev can initiate transaction
@@ -112,8 +110,7 @@ export async function preflightNotifications(
     }
     const { eventCode, errorMsg } = extractMessageFromError(error as CatchError)
 
-    const newNotification = buildNotification(eventCode, id)
-    addNotification(newNotification)
+    addNotification(buildNotification(eventCode, id))
     console.error(errorMsg)
     return
   }

diff --git a/packages/core/src/store/actions.ts b/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'))
 

diff --git a/packages/core/src/types.ts b/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
@@ -213,14 +214,16 @@ export interface PreflightNotificationsOptions {
   estimateGas?: () => Promise<string>
   gasPrice?: () => Promise<string>
   balance?: string | number
-  txDetails?: {
-    value: string | number
-    to?: string
-    from?: string
-  }
+  txDetails?: TxDetails
   txApproveReminderTimeout?: number
 }
 
+export interface TxDetails {
+  value: string | number
+  to?: string
+  from?: string
+}
+
 // ==== ACTIONS ==== //
 export type Action =
   | AddChainsAction

diff --git a/packages/core/src/utils.ts b/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))