Merge pull request #1149 from blocknative/release/2.5.0

(main) Release: 2.5.0

Author: Adamj1232

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",

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"
   }
 }

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",

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 {

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;
   }
 

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

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",

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'
@@ -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)