Merge pull request #1606 from blocknative/release/2.21.0

Release 2.21.0

docs/package.json

@@ -54,33 +54,33 @@
   },
   "type": "module",
   "dependencies": {
-    "bnc-sdk": "^4.6.6",
-    "@web3-onboard/coinbase": "^2.1.4",
-    "@web3-onboard/core": "^2.15.5",
-    "@web3-onboard/dcent": "^2.2.3",
-    "@web3-onboard/enkrypt": "^2.0.0",
-    "@web3-onboard/fortmatic": "^2.0.14",
-    "@web3-onboard/gas": "^2.1.4",
-    "@web3-onboard/gnosis": "^2.1.6",
-    "@web3-onboard/infinity-wallet": "^2.0.0",
-    "@web3-onboard/injected-wallets": "^2.8.1",
-    "@web3-onboard/keepkey": "^2.3.3",
-    "@web3-onboard/keystone": "^2.3.3",
-    "@web3-onboard/ledger": "^2.4.2",
-    "@web3-onboard/magic": "^2.1.3",
-    "@web3-onboard/mew-wallet": "^2.0.0",
-    "@web3-onboard/portis": "^2.1.3",
-    "@web3-onboard/sequence": "^2.0.4",
-    "@web3-onboard/taho": "^2.0.0",
-    "@web3-onboard/torus": "^2.2.0",
-    "@web3-onboard/transaction-preview": "^2.0.4",
-    "@web3-onboard/trezor": "^2.3.3",
-    "@web3-onboard/trust": "^2.0.0",
-    "@web3-onboard/uauth": "^2.0.1",
-    "@web3-onboard/walletconnect": "^2.3.2",
-    "@web3-onboard/web3auth": "^2.1.4",
-    "@web3-onboard/xdefi": "^2.0.0",
+    "@web3-onboard/coinbase": "^2.2.1",
+    "@web3-onboard/core": "^2.16.0",
+    "@web3-onboard/dcent": "^2.2.4",
+    "@web3-onboard/enkrypt": "^2.0.1",
+    "@web3-onboard/fortmatic": "^2.0.16",
+    "@web3-onboard/gas": "^2.1.5",
+    "@web3-onboard/gnosis": "^2.1.7",
+    "@web3-onboard/infinity-wallet": "^2.0.1",
+    "@web3-onboard/injected-wallets": "^2.8.3",
+    "@web3-onboard/keepkey": "^2.3.4",
+    "@web3-onboard/keystone": "^2.3.4",
+    "@web3-onboard/ledger": "^2.4.3",
+    "@web3-onboard/magic": "^2.1.4",
+    "@web3-onboard/mew-wallet": "^2.0.1",
+    "@web3-onboard/portis": "^2.1.4",
+    "@web3-onboard/sequence": "^2.0.5",
+    "@web3-onboard/taho": "^2.0.1",
+    "@web3-onboard/torus": "^2.2.2",
+    "@web3-onboard/transaction-preview": "^2.0.5",
+    "@web3-onboard/trezor": "^2.3.4",
+    "@web3-onboard/trust": "^2.0.1",
+    "@web3-onboard/uauth": "^2.0.2",
+    "@web3-onboard/walletconnect": "^2.3.3",
+    "@web3-onboard/web3auth": "^2.2.0",
+    "@web3-onboard/xdefi": "^2.0.1",
     "animejs": "^3.2.1",
+    "bnc-sdk": "^4.6.6",
     "ethers": "^5.7.0"
   }
 }

docs/src/lib/components/ThemeCustomizer.svelte

@@ -81,31 +81,35 @@
       '--w3o-text-color': 'unset',
       '--w3o-border-color': 'unset',
       '--w3o-action-color': 'unset',
-      '--w3o-border-radius': 'unset'
+      '--w3o-border-radius': 'unset',
+      '--w3o-font-family': 'unset'
     },
     custom: {
       '--w3o-background-color': 'unset',
       '--w3o-foreground-color': 'unset',
       '--w3o-text-color': 'unset',
       '--w3o-border-color': 'unset',
       '--w3o-action-color': 'unset',
-      '--w3o-border-radius': 'unset'
+      '--w3o-border-radius': 'unset',
+      '--w3o-font-family': 'unset'
     },
     light: {
       '--w3o-background-color': '#ffffff',
       '--w3o-foreground-color': '#EFF1FC',
       '--w3o-text-color': '#1a1d26',
       '--w3o-border-color': '#d0d4f7',
       '--w3o-action-color': '#6370E5',
-      '--w3o-border-radius': '16px'
+      '--w3o-border-radius': '16px',
+      '--w3o-font-family': 'unset'
     },
     dark: {
       '--w3o-background-color': '#1A1D26',
       '--w3o-foreground-color': '#242835',
       '--w3o-text-color': '#EFF1FC',
       '--w3o-border-color': '#33394B',
       '--w3o-action-color': '#929bed',
-      '--w3o-border-radius': '16px'
+      '--w3o-border-radius': '16px',
+      '--w3o-font-family': 'unset'
     }
   }
 

docs/src/lib/services/onboard.js

@@ -32,7 +32,7 @@ const intiOnboard = async (theme) => {
   const { default: trezorModule } = await import('@web3-onboard/trezor')
   const { default: ledgerModule } = await import('@web3-onboard/ledger')
   const { default: walletConnectModule } = await import('@web3-onboard/walletconnect')
-  // const { default: infinityWalletModule } = await import('@web3-onboard/infinity-wallet')
+  const { default: infinityWalletModule } = await import('@web3-onboard/infinity-wallet')
   const { default: coinbaseModule } = await import('@web3-onboard/coinbase')
   const { default: dcentModule } = await import('@web3-onboard/dcent')
   const { default: portisModule } = await import('@web3-onboard/portis')
@@ -53,7 +53,7 @@ const intiOnboard = async (theme) => {
   const INFURA_ID = '8b60d52405694345a99bcb82e722e0af'
 
   const injected = injectedModule()
-  // const infinityWallet = infinityWalletModule()
+  const infinityWallet = infinityWalletModule()
   const coinbase = coinbaseModule()
   const dcent = dcentModule()
   const walletConnect = walletConnectModule({
@@ -121,7 +121,7 @@ const intiOnboard = async (theme) => {
       torus,
       sequence,
       web3auth,
-      // infinityWallet,
+      infinityWallet,
       dcent,
       enkrypt,
       mewWallet,
@@ -144,6 +144,12 @@ const intiOnboard = async (theme) => {
         label: 'Goerli',
         rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
       },
+      {
+        id: 11155111,
+        token: 'ETH',
+        label: 'Sepolia',
+        rpcUrl: 'https://rpc.sepolia.org/'
+      },
       {
         id: '0x13881',
         token: 'MATIC',

docs/src/routes/docs/[...1]overview/[...1]introduction.md

@@ -35,7 +35,9 @@ Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain
 
 web3-onboard supports all EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more information see [initialization options](https://onboard.blocknative.com/docs/modules/core#options).
 
+- Ethereum 
 - Arbitrum
+- Optimism
 - Avalanche
 - BNB Chain
 - Celo
@@ -44,8 +46,10 @@ web3-onboard supports all EVM networks. Supporting a new network is simply a mat
 - Gnosis Chain
 - Harmony One
 - Moonriver
-- Optimism
 - Polygon
+- Goerli
+- Sepolia
+- Core Goerli
 - Any other EVM network
 
 ### [Optional] Use an API key to fetch real time transaction data, balances & gas

docs/src/routes/docs/[...2]getting-started/[...3]custom-styling.md

@@ -127,9 +127,7 @@ The Onboard styles can customized via [CSS custom properties](https://developer.
   --onboard-action-required-modal-background
 
   /* FONTS */
-  --onboard-font-family-normal: Sofia Pro;
-  --onboard-font-family-semibold: Sofia Pro Semibold;
-  --onboard-font-family-light: Sofia Pro Light;
+  --onboard-font-family-normal:  Inter, sans-serif;
 
   --onboard-font-size-1: 3rem;
   --onboard-font-size-2: 2.25rem;
@@ -197,8 +195,7 @@ The Onboard styles can customized via [CSS custom properties](https://developer.
   --account-select-modal-danger-500: #ff4f4f;
 
   /* FONTS */
-  --account-select-modal-font-family-normal: Sofia Pro;
-  --account-select-modal-font-family-light: Sofia Pro Light;
+  --account-select-modal-font-family-normal:  Inter, sans-serif;
   --account-select-modal-font-size-5: 1rem;
   --account-select-modal-font-size-7: .75rem;
   --account-select-modal-font-line-height-1: 24px;

docs/src/routes/docs/[...3]modules/core.md

@@ -28,6 +28,7 @@ npm install @web3-onboard/core
 </Tabs>
 
 #### All Wallet Modules
+
 If you would like to support all wallets, then you can install all of the wallet modules:
 
 <Tabs values={['yarn', 'npm']}>
@@ -89,19 +90,28 @@ type InitOptions {
    * Object mapping for W3O components with the key being the component and the value the DOM element to mount the component to. This element must be available at time of package script execution.
    */
   containerElements?: Partial<ContainerElements>
-    /**
+  /**
    * Custom or predefined theme for Web3Onboard i.e. default, dark, Custom, etc.
    */
   theme?: Theme
+  /**
+   * Defaults to False
+   * If set to true the Inter font will not be imported and
+   * instead the default 'sans-serif' font will be used
+   * To define the font used see `--w3o-font-family` prop within
+   * the Theme initialization object or set as css variable
+   */
+  disableFontDownload?: boolean
 }
 
 ```
+
 ---
 
 #### wallets
 
-An array of wallet modules that you would like to be presented to the user to select from when connecting a wallet. A wallet module is an abstraction that allows for easy interaction without needing to know the specifics of how that wallet works and are separate packages that can be included. 
-These modules are separate @web3-onboard packages such as `@web3-onboard/injected-wallets` or `@web3-onboard/ledger`. 
+An array of wallet modules that you would like to be presented to the user to select from when connecting a wallet. A wallet module is an abstraction that allows for easy interaction without needing to know the specifics of how that wallet works and are separate packages that can be included.
+These modules are separate @web3-onboard packages such as `@web3-onboard/injected-wallets` or `@web3-onboard/ledger`.
 For a full list click [here](#all-wallet-modules).
 
 ---
@@ -114,9 +124,11 @@ An array of Chains that your app supports:
 type Chain = {
   id: ChainId // hex encoded string, eg '0x1' for Ethereum Mainnet
   namespace?: 'evm' // string indicating chain namespace. Defaults to 'evm' but will allow other chain namespaces in the future
-  rpcUrl: string // used for network requests
-  label: string // used for display, eg Ethereum Mainnet
-  token: TokenSymbol // the native token symbol, eg ETH, BNB, MATIC
+  // PLEASE NOTE: Some wallets require an rpcUrl, label, and token for actions such as adding a new chain.
+  // It is recommended to include rpcUrl, label, and token for full functionality.
+  rpcUrl?: string // Recommended to include. Used for network requests.
+  label?: string // Recommended to include. Used for display, eg Ethereum Mainnet.
+  token?: TokenSymbol // Recommended to include. The native token symbol, eg ETH, BNB, MATIC.
   color?: string // the color used to represent the chain and will be used as a background for the icon
   icon?: string // the icon to represent the chain
   publicRpcUrl?: string // an optional public RPC used when adding a new chain config to the wallet
@@ -171,26 +183,36 @@ type RecommendedInjectedWallets = {
 
 ---
 
-#### connectModal
+#### connect
 
 An object that allows for customizing the connect modal layout and behavior
 
 <img src="{walletModal}" alt="Web3-Onboard connect wallet modal"/>
 
 ```typescript copy
 type ConnectModalOptions = {
+  /**
+   * Display the connect modal sidebar - only applies to desktop views
+   */
   showSidebar?: boolean
   /**
    * Disabled close of the connect modal with background click and
    * hides the close button forcing an action from the connect modal
    * Defaults to false
    */
   disableClose?: boolean
-  /**If set to true, the last connected wallet will store in local storage.
-   * Then on init, onboard will try to reconnect to that wallet with
-   * no modals displayed
+  /**
+   * If set to true, the most recently connected wallet will store in
+   * local storage. Then on init, onboard will try to reconnect to
+   * that wallet with no modals displayed
+   */
+  autoConnectLastWallet?: boolean
+  /**
+   * If set to true, all previously connected wallets will store in
+   * local storage. Then on init, onboard will try to reconnect to
+   * each wallet with no modals displayed
    */
-  autoConnectLastWallet?: boolean // defaults to false
+  autoConnectAllPreviousWallet?: boolean
   /**
    * Customize the link for the `I don't have a wallet` flow shown on the
    * select wallet modal.
@@ -250,6 +272,7 @@ export type BuiltInThemes = 'default' | 'dark' | 'light'
 
 export type ThemingMap = {
   '--w3o-background-color'?: string
+  '--w3o-font-family'?: string
   '--w3o-foreground-color'?: string
   '--w3o-text-color'?: string
   '--w3o-border-color'?: string
@@ -268,6 +291,17 @@ It will allow you to customize the look and feel of web3-onboard, try different
 
 ---
 
+#### disableFontDownload
+
+If set to `true` the default `Inter` font will not be imported and instead the web based `sans-serif` font will be used if a font is not defined through the `Theme` or exposed css variable.
+To define the font use `--w3o-font-family` prop within the `Theme` initialization object or set as a css variable.
+
+```typescript
+type disableFontDownload = boolean // defaults to false
+```
+
+---
+
 #### accountCenter
 
 An object that defines whether the account center UI (default and minimal) is enabled and its position on the screen. Currently the account center is enabled for both desktop and mobile devices.
@@ -437,6 +471,12 @@ const onboard = Onboard({
       label: 'Goerli',
       rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
     },
+    {
+      id: 11155111,
+      token: 'ETH',
+      label: 'Sepolia',
+      rpcUrl: 'https://rpc.sepolia.org/'
+    },
     {
       id: '0x38',
       token: 'BNB',
@@ -967,12 +1007,15 @@ type SetChainOptions = {
   chainId: string // hex encoded string
   chainNamespace?: 'evm' // defaults to 'evm' (currently the only valid value, but will add more in future updates)
   wallet?: string // the wallet.label of the wallet to set chain
+  rpcUrl?: string // if chain was instantiated without rpcUrl, include here. Used for network requests
+  token?: string // if chain was instantiated without token, include here. Used for display, eg Ethereum Mainnet
+  label?: string // if chain was instantiated without label, include here. The native token symbol, eg ETH, BNB, MATIC
 }
 
 const success = await onboard.setChain({ chainId: '0x89' })
 ```
 
-The `setChain` methods takes an options object with a `chainId` property hex encoded string for the chain id to switch to. The chain id must be one of the chains that Onboard was initialized with. If the wallet supports programatically adding and switching the chain, then the user will be prompted to do so, if not, then a modal will be displayed indicating to the user that they need to switch chains to continue. The `setChain` method returns a promise that resolves when either the user has confirmed the chain switch, or has dismissed the modal and resolves with a boolean indicating if the switch network was successful or not. The `setChain` method will by default switch the first wallet (the most recently connected) in the `wallets` array. A specific wallet can be targeted by passing in the `wallet.label` in the options object as the `wallet` parameter.
+The `setChain` methods takes an options object with a `chainId` property hex encoded string for the chain id to switch to. The chain id must be one of the chains that Onboard was initialized with. If the wallet supports programatically adding and switching the chain, then the user will be prompted to do so, if not, then a modal will be displayed indicating to the user that they need to switch chains to continue. The `setChain` method returns a promise that resolves when either the user has confirmed the chain switch, or has dismissed the modal and resolves with a boolean indicating if the switch network was successful or not. The `setChain` method will by default switch the first wallet (the most recently connected) in the `wallets` array. A specific wallet can be targeted by passing in the `wallet.label` in the options object as the `wallet` parameter. If a chain was instantiated without an rpcUrl, token, or label, add these options for wallets that require this information for adding a new chain.
 
 ## Custom Styling
 
@@ -1079,9 +1122,7 @@ The Onboard styles can be customized via [CSS variables](https://developer.mozil
   --onboard-action-required-modal-background
 
   /* FONTS */
-  --onboard-font-family-normal: Sofia Pro;
-  --onboard-font-family-semibold: Sofia Pro Semibold;
-  --onboard-font-family-light: Sofia Pro Light;
+  --onboard-font-family-normal:  Inter, sans-serif;
 
   --onboard-font-size-1: 3rem;
   --onboard-font-size-2: 2.25rem;
@@ -1149,8 +1190,7 @@ The Onboard styles can be customized via [CSS variables](https://developer.mozil
   --account-select-modal-danger-500: #ff4f4f;
 
   /* FONTS */
-  --account-select-modal-font-family-normal: Sofia Pro;
-  --account-select-modal-font-family-light: Sofia Pro Light;
+  --account-select-modal-font-family-normal:  Inter, sans-serif;
   --account-select-modal-font-size-5: 1rem;
   --account-select-modal-font-size-7: .75rem;
   --account-select-modal-font-line-height-1: 24px;

docs/src/routes/docs/[...3]modules/react.md

@@ -177,7 +177,7 @@ setPrimaryWallet(wallets[1], wallets[1].accounts[2].address)
 
 ## `useSetChain`
 
-This hook allows you to set the chain of a user's connected wallet, keep track of the current chain the user is connected to and the status of setting the chain. Passing in a wallet label will operate on that connected wallet, otherwise it will default to the last connected wallet.
+This hook allows you to set the chain of a user's connected wallet, keep track of the current chain the user is connected to and the status of setting the chain. Passing in a wallet label will operate on that connected wallet, otherwise it will default to the last connected wallet. If a chain was instantiated without an rpcUrl, token, or label, add these options for wallets that require this information for adding a new chain.
 
 ```typescript
 import { useSetChain } from '@web3-onboard/react'
@@ -196,7 +196,13 @@ type UseSetChain = (
 type SetChainOptions = {
   chainId: string
   chainNamespace?: string
-  wallet?: WalletState['label']
+  wallet?: WalletState['label'],
+  // if chain was instantiated without rpcUrl, include here. Used for network requests
+  rpcUrl?: string, 
+  // if chain was instantiated without token, include here. Used for display, eg Ethereum Mainnet
+  label?: string,
+  // if chain was instantiated without label, include here. The native token symbol, eg ETH, BNB, MATIC
+  token?: string,
 }
 
 const [

docs/src/routes/docs/[...4]wallets/magic.md

@@ -102,8 +102,7 @@ The Magic Wallet Login styles can customized via [CSS variables](https://develop
   --login-modal-danger-500: #ff4f4f;
 
   /* FONTS */
-  --login-modal-font-family-normal: Sofia Pro;
-  --login-modal-font-family-light: Sofia Pro Light;
+  --login-modal-font-family-normal: Inter, sans-serif;
   --login-modal-font-size-5: 1rem;
   --login-modal-font-line-height-1: 24px;