Keep Wallet Connected on Page Refresh — Web3 Dev

Hello, in this tutorial I will show you how to persist a wallet connection on page reload.

To do this, you first need to know how to connect the user to a wallet on your app. You can learn that here:

web3-react: Connect Users to MetaMask (or any wallet) From Your Frontend

Once you have an app that can connect to wallets, continue on.

Resources for this tutorial:

• GitHub Repo
• Video version of this tutorial for more details

Implementing this is super simple. You can think of it like an algorithm with these steps:

1: On connection to wallet, set a variable to true in local storage. Keeping it in local storage will allow us to persist that data on the user’s device.

Code example:

async function connect() {
  try {
    await activate(injected)
    localStorage.setItem('isWalletConnected', true)
  } catch (ex) {
    console.log(ex)
  }
}