Exercise 1
In the first exercise we'll use the provided template to implement connecting our DApp to MetaMask. We'll be modifying two files: AccountButton.tsx and AccountModal.tsx.
👉 Let's start with the first one.
AccountButton.tsx
This file contains the AccountButton component. It's a button that displays the current account address and allows the user to connect to a wallet. It also displays a modal with the account details when the user clicks on the button. Let's start by importing the useEthers hook from useDApp:
import { useEthers } from '@usedapp/core';
Next we'll use the useEthers hook to get the current account address and the activateBrowserWallet function.
const { account, activateBrowserWallet } = useEthers();
Modify the onConnect function to use the activateBrowserWallet function:
const onConnect = () => {
activateBrowserWallet();
};
If the user is connected, the the account variable we'll be set to the current user's address. We want to print the shortened address instead of the connect button when the user is connected.
- // TODO: Display this component only if the user is connected
- if (false) {
+ if (account) {
To print the shortened address we'll use the shortenAddress function from useDApp:
- import { useEthers } from '@usedapp/core';
+ import { shortenAddress, useEthers } from '@usedapp/core';
- {/* TODO: Display shortened version of connected user */}
+ {shortenAddress(account)}
AccountModal.tsx
The next step will be to display the account details in the modal. We'll also add a button that allows the user to disconnect from the wallet. Let's start by making all the necessary imports:
import { shortenAddress, useEtherBalance, useEthers } from '@usedapp/core';
import { utils } from 'ethers';
We can get the current account address the same way as in the AccountButton.tsx file, but this time we'll also want to get the deactivate function which allows us to disconnect from the wallet.
const { account, deactivate } = useEthers();
Next get the current account balance. We can do that using the useEtherBalance hook:
const balance = useEtherBalance(account);
Let's display the account address and the balance in the modal:
- // TODO: The Dialog should should be displayed only if the user is connected
- if (true) {
+ if (!account) {
- {/* TODO: Display shortened version of connected user */}
+ {shortenAddress(account)}
- {/* TODO: Display balance of the current user */}
+ {balance ? utils.formatEther(balance) : 0} ETH
Let's now implement functionality for the disconnect button. We'll use the deactivate function we got from the useEthers hook:
- // TODO: Disconnect from wallet
+ deactivate();
The last thing to do in this exercise is to allow the user to copy the account address by pressing the copy button.
- // TODO: Copy address of the current user to clipboard
+ if (account) {
+ navigator.clipboard.writeText(account);
+ }
This concludes the first exercise. You should now be able to connect your DApp to MetaMask.