The first step to building a dApp is allowing a user to connect their wallet to your app. This post walks you through a very simple implementation of connecting an ethereum wallet using Create React App, Tailwind, and Typescript. If you just want to see the code, check out the github repo.
At a high level, we will create a React app, make a few modifications for polyfills, and setup a react hook for connecting a wallet.
Get Setup
Get started using Create React App
Install tailwind to make styling more consistent and better!
React App Rewired
Since CRA upgraded to v5, it no longer automatically polyfills node.js core modules (github issue). So some great people in the community wrote React App Rewired to allow us to do this without ejecting from the CRA environment. We do this by doing the following:
Then update package.json by changing the scripts section to look like:
You can see the configuration for react app rewired in config-overrides.js. These are required to work with the web3 libraries.
Code Walkthrough
Connecting a wallet
To connect the user’s wallet we will use @usedapp and WalletConnect.
Next let’s setup a hook so we can abstract away connecting to a wallet.
Okay so that’s a lot of code. Let’s break it down just a bit:
In this first section, we import our requirements and define some types. This is just boilerplate. Note that we’re wrapping a hook from `@usedapp/core` to provide a bit more functionality to it.
We define a function to get the web3 modal. A lot of these fields are configurable and you can expand on these to talk with other chains and networks. However for this example we will hardcode eth mainnet as the chain to interact with and use Metamask as the way to connect.
Note that the environment variable for `REACT_PUBLIC_INFURA_ID must be set. You can create one for free at Infura. This is not necessary for connecting a wallet but is very helpful for interacting with the blockchain. Particularly, we have some boilerplate to convert any wallet address into its ENS name if it has one.
Lastly we create two functions to activate the provider and deactivate (essentially connect wallet and disconnect wallet. Then we return the relevant state to any user of this hook.
Putting it all together
Now that we have a hook for connecting wallets, we need to provide the context for that hook in a context variable so we don’t require the user to connect multiple times in the context of the app. We instantiate the hook in a context provider which allows any child component access to the context. Furthermore, due to how React contexts work, a render of any child component referencing that context will rerender when the context changes! You can see in Home.tsx how to create a button that when clicked will connect a user’s wallet (or disconnect it).
Next Steps
Now that the user has connected their wallet, we want to verify that it actually is that user. In part 2 of this series, we will describe how to log a user in using just their wallet. Part 3 will describe how we generate web2.5 tokens for the logged in user. Part 4 will tie it all together to show how to provide value to any token holder.
