Skip to main content

3. Add Wallet Support

In the third chapter of the tutorial on building an end-to-end dapp on Aptos, you will be adding wallet support to your React app. You now need a wallet to submit a transaction to the blockchain.

Aptos provides a wallet adapter that supports many ecosystem wallets to offering a common interface and UI package that can be used to add a wallet connect button and a wallet selector modal.

  1. Stop the local server if running.
  2. In the client folder, run:
npm i @aptos-labs/wallet-adapter-react
npm i @aptos-labs/wallet-adapter-ant-design

This installs two packages:

  • the adapter React provider that holds the logic.
  • a wallet connect UI package.
  1. We now need to add wallets to our app. There is a list of wallets the adapter supports; but to keep this tutorial simple, we will use only one wallet. Still in the client folder, run
npm i petra-plugin-wallet-adapter
tip

If you haven't installed the Petra wallet extension yet:

  1. Install Petra Wallet and open the Chrome extension.
  2. Follow the user instructions on petra.app for help.
  3. Switch to the Devnet network by clicking Settings > Network and selecting devnet.
  4. Click the Faucet button to ensure you can receive test tokens.
  1. Open Index.tsx file. At the top of the file, add the following:
import { PetraWallet } from "petra-plugin-wallet-adapter";
import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
  1. Still in Index.tsx, add a constant that holds an array of wallets:
...
const wallets = [new PetraWallet()];
...
  1. Inside the render method, update the code with the following:
...
<AptosWalletAdapterProvider plugins={wallets} autoConnect={true}>
  <App />
</AptosWalletAdapterProvider>
...

That wraps our app with the adapter provider and initializes it with our wallets. It also sets the provider to autoConnect a wallet.

  1. Open the App.tsx file and import the wallet connect UI package we installed in the previous step. At the top of the file add the following:
import { WalletSelector } from "@aptos-labs/wallet-adapter-ant-design";
  1. The UI package uses a style .css file; let's import that one also at the bottom of the import statements.
...
import "@aptos-labs/wallet-adapter-ant-design/dist/index.css";
  1. In the return statement, remove the <h1>Connect Wallet</h1> text and add the WalletSelector component:
...
<Col span={12} style={{ textAlign: "right", paddingRight: "200px" }}>
  <WalletSelector />
</Col>
...
  1. Start the local server with npm start and open the app in the browser.

We now have a working Wallet connect button and a wallet selector modal. Feel free to play with it and connect a wallet with it.

Then learn how to fetch data from chain in chapter 4.