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
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
+57-17Lines changed: 57 additions & 17 deletions
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
@@ -171,26 +183,36 @@ type RecommendedInjectedWallets = {
171
183
172
184
---
173
185
174
-
#### connectModal
186
+
#### connect
175
187
176
188
An object that allows for customizing the connect modal layout and behavior
@@ -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