Connecting to Wallets
Introduction
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.
In this example we will walk through setting up web3-react and connecting the most popular browser-injected connector, MetaMask, using @web3-react/metamask.
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
web3-reactWeb3ReactProvider - Building a
web3-reactInjectedConnector - 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:
info
This guide uses web3-react version 8, which is a beta version.
These will be automatically installed by following the example's README.
The core code of this guide can be found in Web3ContextProvider and InjectedConnector.
Creating a Web3ReactProvider
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 Context:
loading...
We then implement the component by rendering the imported Web3ReactProvider with the children within that:
loading...
Note that we map our list of Connections to a tuple of the connector and 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:
loading...
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:
loading...
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:
loading...
We then utilize the templated initializeConnector function with MetaMask as the type argument:
loading...
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 actions and 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 INJECTED:
loading...
Finally, we return the instance of Connection we created, which is added to the list of prioritized connectors.
info
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:
loading...
The component receives 5 parameters:
isEnableddetermines whether the connector is eligible to be activatedisConnecteddetermines whether the connector is currently activeconnectionTypedetermines theConnectionTypeonActivateis called once the component has established a connectiononDeactivateis called once the component has disconnected
In the case of MetaMask, when declaring the InjectedConnector we pass the connector-specific arguments:
loading...
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:
loading...
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:
loading...
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 ConnectionType:
loading...
In the case that the click triggers a disconnection:
loading...
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 null:
loading...
Next Steps
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 web3-react supports.