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.

5. 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";

6. Still in Index.tsx, add a constant that holds an array of wallets:

   ...const wallets = [new PetraWallet()];...

7. Inside the render method, update the code with the following:

   ... ...

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";