You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/src/routes/docs/[...1]overview/[...1]introduction.md
+5-1Lines changed: 5 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,7 +35,9 @@ Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain
35
35
36
36
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).
37
37
38
+
- Ethereum
38
39
- Arbitrum
40
+
- Optimism
39
41
- Avalanche
40
42
- BNB Chain
41
43
- Celo
@@ -44,8 +46,10 @@ web3-onboard supports all EVM networks. Supporting a new network is simply a mat
44
46
- Gnosis Chain
45
47
- Harmony One
46
48
- Moonriver
47
-
- Optimism
48
49
- Polygon
50
+
- Goerli
51
+
- Sepolia
52
+
- Core Goerli
49
53
- Any other EVM network
50
54
51
55
### [Optional] Use an API key to fetch real time transaction data, balances & gas
Copy file name to clipboardExpand all lines: docs/src/routes/docs/[...3]modules/core.md
+56-16Lines changed: 56 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,6 +28,7 @@ npm install @web3-onboard/core
28
28
</Tabs>
29
29
30
30
#### All Wallet Modules
31
+
31
32
If you would like to support all wallets, then you can install all of the wallet modules:
32
33
33
34
<Tabs values={['yarn', 'npm']}>
@@ -89,19 +90,28 @@ type InitOptions {
89
90
* 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.
90
91
*/
91
92
containerElements?: Partial<ContainerElements>
92
-
/**
93
+
/**
93
94
* Custom or predefined theme for Web3Onboard i.e. default, dark, Custom, etc.
94
95
*/
95
96
theme?: Theme
97
+
/**
98
+
* Defaults to False
99
+
* If set to true the Inter font will not be imported and
100
+
* instead the default 'sans-serif' font will be used
101
+
* To define the font used see `--w3o-font-family` prop within
102
+
* the Theme initialization object or set as css variable
103
+
*/
104
+
disableFontDownload?: boolean
96
105
}
97
106
98
107
```
108
+
99
109
---
100
110
101
111
#### wallets
102
112
103
-
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.
104
-
These modules are separate @web3-onboard packages such as `@web3-onboard/injected-wallets` or `@web3-onboard/ledger`.
113
+
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.
114
+
These modules are separate @web3-onboard packages such as `@web3-onboard/injected-wallets` or `@web3-onboard/ledger`.
105
115
For a full list click [here](#all-wallet-modules).
106
116
107
117
---
@@ -114,9 +124,11 @@ An array of Chains that your app supports:
114
124
typeChain= {
115
125
id:ChainId// hex encoded string, eg '0x1' for Ethereum Mainnet
116
126
namespace?:'evm'// string indicating chain namespace. Defaults to 'evm' but will allow other chain namespaces in the future
117
-
rpcUrl:string// used for network requests
118
-
label:string// used for display, eg Ethereum Mainnet
119
-
token:TokenSymbol// the native token symbol, eg ETH, BNB, MATIC
127
+
// PLEASE NOTE: Some wallets require an rpcUrl, label, and token for actions such as adding a new chain.
128
+
// It is recommended to include rpcUrl, label, and token for full functionality.
129
+
rpcUrl?:string// Recommended to include. Used for network requests.
130
+
label?:string// Recommended to include. Used for display, eg Ethereum Mainnet.
131
+
token?:TokenSymbol// Recommended to include. The native token symbol, eg ETH, BNB, MATIC.
120
132
color?:string// the color used to represent the chain and will be used as a background for the icon
121
133
icon?:string// the icon to represent the chain
122
134
publicRpcUrl?:string// an optional public RPC used when adding a new chain config to the wallet
@@ -179,18 +191,28 @@ An object that allows for customizing the connect modal layout and behavior
179
191
180
192
```typescriptcopy
181
193
typeConnectModalOptions= {
194
+
/**
195
+
* Display the connect modal sidebar - only applies to desktop views
196
+
*/
182
197
showSidebar?:boolean
183
198
/**
184
199
* Disabled close of the connect modal with background click and
185
200
* hides the close button forcing an action from the connect modal
186
201
* Defaults to false
187
202
*/
188
203
disableClose?:boolean
189
-
/**If set to true, the last connected wallet will store in local storage.
190
-
* Then on init, onboard will try to reconnect to that wallet with
191
-
* no modals displayed
204
+
/**
205
+
* If set to true, the most recently connected wallet will store in
206
+
* local storage. Then on init, onboard will try to reconnect to
207
+
* that wallet with no modals displayed
208
+
*/
209
+
autoConnectLastWallet?:boolean
210
+
/**
211
+
* If set to true, all previously connected wallets will store in
212
+
* local storage. Then on init, onboard will try to reconnect to
213
+
* each wallet with no modals displayed
192
214
*/
193
-
autoConnectLastWallet?:boolean// defaults to false
215
+
autoConnectAllPreviousWallet?:boolean
194
216
/**
195
217
* Customize the link for the `I don't have a wallet` flow shown on the
@@ -268,6 +291,17 @@ It will allow you to customize the look and feel of web3-onboard, try different
268
291
269
292
---
270
293
294
+
#### disableFontDownload
295
+
296
+
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.
297
+
To define the font use `--w3o-font-family` prop within the `Theme` initialization object or set as a css variable.
298
+
299
+
```typescript
300
+
typedisableFontDownload=boolean// defaults to false
301
+
```
302
+
303
+
---
304
+
271
305
#### accountCenter
272
306
273
307
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.
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.
1018
+
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.
976
1019
977
1020
## Custom Styling
978
1021
@@ -1079,9 +1122,7 @@ The Onboard styles can be customized via [CSS variables](https://developer.mozil
1079
1122
--onboard-action-required-modal-background
1080
1123
1081
1124
/* FONTS */
1082
-
--onboard-font-family-normal: Sofia Pro;
1083
-
--onboard-font-family-semibold: Sofia Pro Semibold;
1084
-
--onboard-font-family-light: Sofia Pro Light;
1125
+
--onboard-font-family-normal: Inter, sans-serif;
1085
1126
1086
1127
--onboard-font-size-1: 3rem;
1087
1128
--onboard-font-size-2: 2.25rem;
@@ -1149,8 +1190,7 @@ The Onboard styles can be customized via [CSS variables](https://developer.mozil
1149
1190
--account-select-modal-danger-500: #ff4f4f;
1150
1191
1151
1192
/* FONTS */
1152
-
--account-select-modal-font-family-normal: Sofia Pro;
1153
-
--account-select-modal-font-family-light: Sofia Pro Light;
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.
180
+
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.
181
181
182
182
```typescript
183
183
import { useSetChain } from'@web3-onboard/react'
@@ -196,7 +196,13 @@ type UseSetChain = (
196
196
typeSetChainOptions= {
197
197
chainId:string
198
198
chainNamespace?:string
199
-
wallet?:WalletState['label']
199
+
wallet?:WalletState['label'],
200
+
// if chain was instantiated without rpcUrl, include here. Used for network requests
201
+
rpcUrl?:string,
202
+
// if chain was instantiated without token, include here. Used for display, eg Ethereum Mainnet
203
+
label?:string,
204
+
// if chain was instantiated without label, include here. The native token symbol, eg ETH, BNB, MATIC
0 commit comments