Skip to main content

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 Pegasys 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:

  1. Creating a web3-react Web3ReactProvider
  2. Building a web3-react InjectedConnector
  3. 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:

Defining the Web3React component
loading...

We then implement the component by rendering the imported Web3ReactProvider with the children within that:

Implementing the component
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:

Wrapping our app with the web3 context
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:

Creating the prioritized Connectors list
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:

Importing Connector dependencies
loading...

We then utilize the templated initializeConnector function with MetaMask as the type argument:

Initializing the MetaMask connector
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:

Creating a connection instance
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:

Creating the Option component
loading...

The component receives 5 parameters:

  • isEnabled determines whether the connector is eligible to be activated
  • isConnected determines whether the connector is currently active
  • connectionType determines the ConnectionType
  • onActivate is called once the component has established a connection
  • onDeactivate is called once the component has disconnected

In the case of MetaMask, when declaring the InjectedConnector we pass the connector-specific arguments:

Creating an injected connector
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:

The component user interface
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:

On connecting to a Connector
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:

The implementation of tryActivateConnector
loading...

In the case that the click triggers a disconnection:

On disconnecting from a Connector
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:

The implementation of tryDeactivateConnector
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.