This guide will cover how to connect wallets with
web3-react. It is based on the
web3-react example found in the Uniswap code examples repository. To run this example, check out the examples's README and follow the setup instructions.
The input parameters to this guide are the chains that we want our app to be able to connect to and their RPC URLs.
The guide will cover:
- Creating a
- Building a
- Connecting and disconnecting the application to the connector
At the end of the guide, we should be able to connect and disconnect your dApp to a MetaMask connector.
For this guide, the following
web3-react packages are used:
This guide uses
web3-react version 8, which is a beta version.
These will be automatically installed by following the example's README.
To be able to interact with the methods that
web3-react offers, we first need to setup a
Web3ReactProvider and wrap our application in it.
web3-react uses a React
Context to allow us to use the exposed hooks without additional configuration.
To start, we create a React component called
Web3ContextProvider in order to wrap the logic of configuring the
Web3ReactProvider. In this component, we first import
Web3ReactProvider from @web3-react/core.
The component receives just one prop which is the
children to which it will be providing the
We then implement the component by rendering the imported
Web3ReactProvider with the
children within that:
Note that we map our list of
Connections to a tuple of the
hooks of the connection. The third element of a
Connection refers to the type of
Connection being established, which we will later use to keep track of the actively connected wallet.
Finally, having created the
Web3ContextProvider component, we can navigate to our index file and wrap the whole application with it:
Building an Injected Connector
The only parameter that we provided to the
Web3ReactProvider component is a list of prioritized connectors, declared as
PRIORITIZED_CONNECTORS. The prioritization ordering is with regards to which connector we want to be active when more than one connector is connected to our application. The list is defined inside our connectors module:
Each one of those connectors lives within its own file, and they all follow a similar setup pattern.
An example of a connector in the list is the
InjectedConnector, which supports wallets that inject an Ethereum Provider into the browser window. The most popular example of an injected connector is the MetaMask browser extension. To set it up, we import
initializeConnector function from core and the
MetaMask type from metamask:
We then utilize the templated
initializeConnector function with
MetaMask as the type argument:
By passing in
MetaMask as the type argument, we define the function's required input parameters. In this case, the only parameter we need to pass is an instance of
Metamask, which receives the
onError parameters. The first parameter defines the actions that
web3-react performs on its local store for the connector (this usually can be passed through without modification), while the second parameter is the callback invoked when an error occurs.
The return type of the function is a tuple of the initialized
Connector and the
Hooks that we can use on it. Using this tuple, we create an instance of a
Connection type, by setting the
type property to
Finally, we return the instance of
Connection we created, which is added to the list of prioritized connectors.
For help on creating the rest of the supported connectors of this examples, please visit our connectors page!
Connecting and disconnecting the application to the connector
Having built our
InjectedConnector, we can now use it in the Context that allows our application to use that connector:
The component receives 5 parameters:
isEnableddetermines whether the connector is eligible to be activated
isConnecteddetermines whether the connector is currently active
onActivateis called once the component has established a connection
onDeactivateis called once the component has disconnected
In the case of MetaMask, when declaring the
InjectedConnector we pass the connector-specific arguments:
Then, in the
html portion of the
Option, we can figure out whether we want the current
Option's action button to be disabled, and whether clicking the button would result in the connector being connected or disconnected:
Finally, we also have enough information to figure out what action to take when the button is clicked. In the case that the click triggers a connection:
To connect our wallet, all we need to do is to call the
tryActivateConnector function and pass it the
InjectedConnector. We then call the
onActivate callback, which makes the
InjectedConnector the active connector in our application's state.
tryActivateConnector takes as its argument the connector that we want to activate, and attempts to call
activate on it. If this activation succeeds, it returns the new
In the case that the click triggers a disconnection:
To disconnect, all we need to do is to call
tryDeactivateConnector and pass in it the
InjectedConnector we created before. We then call the
onDeactivate callback, which removes the
InjectedConnector as the currently active connector from our application's state.
tryDeactivateConnector takes as its argument the connector that we want to deactivate, and attempts to call
deactivate on it. If this deactivation succeeds, it resets the connector's state by calling
resetState and returns
Now that we have gone through connecting and disconnecting from an
InjectedConnector, we will learn how to connect and disconnect from all the different types of connectors that