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
At a high level, `web3-react` is a state machine which ensures that certain key pieces of data (the user's current account, for example) relevant to your dApp are kept up-to-date. To this end, `web3-react` uses [Context](https://reactjs.org/docs/context.html) to efficiently store this data, and inject it wherever you need it in your application.
17
+
At a high level, `web3-react-multichain` is a state machine which ensures that certain key pieces of data (the user's current account, for example) relevant to your dApp are kept up-to-date. To this end, `web3-react-multichain` uses [Context](https://reactjs.org/docs/context.html) to efficiently store this data, and inject it wherever you need it in your application.
24
18
25
-
The data conforms to the following interface:
19
+
The data conforms to the following interface where Web3Provider is an [ethers-js Web3Provider](https://docs.ethers.io/v5/api/providers/other/#Web3Provider):
The documentation that follows is for `@web3-react/core`, the package responsible for managing this context. To understand where the data itself comes from, head over to the [connectors/ folder](./connectors/).
42
+
The documentation that follows is for `@web3-react-multichain/core`, the package responsible for managing this context. To understand where the data itself comes from, head over to the [connectors/ folder](./connectors/).
48
43
49
44
## Install
50
45
- Grab a fresh copy of `react@>=16.8`...\
51
46
`yarn add react`
52
47
53
-
- ...and then install `web3-react`\
54
-
`yarn add @web3-react/core`
48
+
- ...and then install `web3-react-multichain`\
49
+
`yarn add @web3-react-multichain/core`
55
50
56
-
## `web3-react@core` API Reference
51
+
## `web3-react-multichain@core` API Reference
57
52
58
53
### Web3ReactProvider
59
-
`web3-react` relies on the existence of a `Web3ReactProvider` at the root of your application (or more accurately, at the root of the subtree which you'd like to have web3 functionality). It requires a single `getLibrary` prop which is responsible for instantiating a web3 convenience library object from a low-level provider.
`web3-react-multichain` relies on the existence of a `Web3ReactProvider` at the root of your application (or more accurately, at the root of the subtree which you'd like to have web3 functionality).
If you're using Hooks (😇), useWeb3React will be your best friend. Call it from within any function component to access context variables, just like that. It accepts an optional `key` argument, if you're using [multiple roots](#createweb3reactroot).
86
-
87
-
#### Arguments
88
-
```typescript
89
-
key?:string
90
-
```
70
+
If you're using Hooks (😇), useWeb3React will be your best friend. Call it from within any function component to access context variables, just like that.
In some cases, your dApp may want to maintain >1 active web3 connections simultaneously. This could be for any number of reasons, including:
104
-
105
-
- Wanting "always-on" access to a remote node, while letting users bring their own accounts as necessary
106
-
- Communicating with a sidechain and mainnet in tandem
107
-
- Balancing an in-browser burner wallet with other connection methods
108
-
109
-
In cases like these, you'll likely want to create a second (or maybe even third, but probably not fourth) root, which will function exactly like another [Web3ReactProvider](#web3reactprovider) (in fact, Web3ReactProvider uses createWeb3ReactRoot under the hood). It requires a `key` argument, used to identify the root to [useWeb3React](#useweb3react) (or [getWeb3ReactContext](#getweb3reactcontext)).
If you're not using Hooks (😳), getWeb3ReactContext is your savior. It gives direct access to the context returned by [createContext](https://reactjs.org/docs/context.html#reactcreatecontext), which will unlock the use of [contextType](https://reactjs.org/docs/context.html#classcontexttype) in class components, the [Context.Consumer](https://reactjs.org/docs/context.html#contextconsumer) pattern, or whatever other render prop/HOC/etc. shenanigans your manager whose personal site still runs on PHP is making you write. It accepts an optional `key` argument to identify the root.
Errors that occur during the initial activation of a connector (i.e. inside activate), are are handled in 1 of 4 ways:
172
99
173
-
1) In the case where there's been 1 or more other updates to the `web3-react` context between when activate was called and when it resolved with the data required to complete the activation, errors are silently suppressed (in development mode, a warning will be logged to the console). This should really only happen in cases where activation takes a very long time and the user does something in the intervening time, such as activating another connector, deactivating the current connector, etc.
174
-
2) If `throwErrors` (the third argument to activate) is passed, errors will be thrown and should be handled in a .catch. No updates to the `web3-react` context will occur.
175
-
3) If `onError` (the second argument to activate) is passed, that function is called with the error. No updates to the `web3-react` context will occur.
176
-
4) Otherwise, the error will be set in the `web3-react` context (along with the connector).
100
+
1) In the case where there's been 1 or more other updates to the `web3-react-multichain` context between when activate was called and when it resolved with the data required to complete the activation, errors are silently suppressed (in development mode, a warning will be logged to the console). This should really only happen in cases where activation takes a very long time and the user does something in the intervening time, such as activating another connector, deactivating the current connector, etc.
101
+
2) If `throwErrors` (the third argument to activate) is passed, errors will be thrown and should be handled in a .catch. No updates to the `web3-react-multichain` context will occur.
102
+
3) If `onError` (the second argument to activate) is passed, that function is called with the error. No updates to the `web3-react-multichain` context will occur.
103
+
4) Otherwise, the error will be set in the `web3-react-multichain` context (along with the connector).
177
104
178
105
Errors that occur while a connector is set are handled in 1 of 2 ways:
179
106
180
-
1) If an `onError` function was passed, this function is called with the error. No updates to the `web3-react` context will occur.
181
-
2) Otherwise, the error will be set in the `web3-react` context.
107
+
1) If an `onError` function was passed, this function is called with the error. No updates to the `web3-react-multichain` context will occur.
108
+
2) Otherwise, the error will be set in the `web3-react-multichain` context.
182
109
183
-
In all of these scenarios, note that calling setError will update the `web3-react` context. This can be called any time a connector is set, and it can be useful for e.g. manually triggering your app's handling of the `web3-react` error property.
110
+
In all of these scenarios, note that calling setError will update the `web3-react-multichain` context. This can be called any time a connector is set, and it can be useful for e.g. manually triggering your app's handling of the `web3-react-multichain` error property.
184
111
185
-
Note: if an error is ever set in the `web3-react` context, and a connector triggers an update, the manager will attempt to revalidate all properties as if activate was called again, to recover from the error state.
112
+
Note: if an error is ever set in the `web3-react-multichain` context, and a connector triggers an update, the manager will attempt to revalidate all properties as if activate was called again, to recover from the error state.
Connectors are stand-alone packages that interface with `web3-react` and manage connections to a single type of Ethereum node or wallet. To give an example: it's quite common for dApp users to rely on browser extensions such as [MetaMask](https://metamask.io/) to manage their account for them. So, `web3-react` defines a connector that's responsible for interfacing with browser extensions. The current list of first-party `web3-react` connectors can be found in the [top-level README.md](../../).
3
+
Connectors are stand-alone packages that interface with `web3-react-multichain` and manage connections to a single type of Ethereum node or wallet. To give an example: it's quite common for dApp users to rely on browser extensions such as [MetaMask](https://metamask.io/) to manage their account for them. So, `web3-react-multichain` defines a connector that's responsible for interfacing with browser extensions. The current list of first-party `web3-react-multichain` connectors can be found in the [top-level README.md](../../).
4
4
5
-
One enormous benefit to `web3-react` is that it's incredibly easy to extend existing/create new connectors! They're very simple Javascript class objects which simply need to define a few functions to be fully compatible with the rest of `web3-react`.
5
+
One enormous benefit to `web3-react-multichain` is that it's incredibly easy to extend existing/create new connectors! They're very simple Javascript class objects which simply need to define a few functions to be fully compatible with the rest of `web3-react-multichain`.
6
6
7
7
For more information on specific first-party connectors, see the individual files in this folder.
MetaMask throws an error when you call `wallet_addEthereumChain` with one of it's default chains as a parameter. `@web3-react-multichain/injected-connector` is using that rpc method under the hood for `getProvider` so you'll need to prompt users to change their network to a default chain manually.
0 commit comments