Skip to content
🎉 Welcome to the new Aptos Docs! Click here to submit feedback!
BuildGuidesBuild an E2E Dapp with Aptos3. Add Wallet Support

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:
Terminal
npm i @aptos-labs/wallet-adapter-react
Terminal
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
Terminal
npm i petra-plugin-wallet-adapter

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:
Index.tsx
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:
Index.tsx
...
const wallets = [new PetraWallet()];
...
  1. Inside the render method, update the code with the following:
Index.tsx
...
<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:
App.tsx
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.
App.tsx
...
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:
App.tsx
...
<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.

2. Set Up React App4. Fetch Data from Chain