Documentation
Using Aptos Wallet Adapter
Extension DApps

Explore dApps

Live Demo (opens in a new tab)

React

In react, we recommend to use @aptos-labs/wallet-adapter-react (opens in a new tab).
And use the code reference to use the useWallet hook and AptosWalletAdapterProvider provider.
Like here (opens in a new tab).

Installation

pnpm add @aptos-labs/wallet-adapter-react
💡
It recommends using pnpm or yarn to install the package.

Configuration

Place your <YOUR_DAPP_MANIFEST_URL> at the mizuwallet trait of the AptosWalletAdapterProvider provider.

<AptosWalletAdapterProvider
	...
	optInWallets={["Mizu Wallet"]}
	dappConfig={{
		aptosConnectDappId: "",
		network: Network.TESTNET,
    	// Add your config here
    	mizuwallet: {
    		manifestURL: <YOUR_DAPP_MANIFEST_URL>
    	},
    }}
    onError={(error) => {}}
    >
      {children}
</AptosWalletAdapterProvider>
💡

Read more about Manifest URL.

💡

See the whole code example in the @aptos-labs/aptos-wallet-adapter (opens in a new tab).

Usage

If you want to add the shadcn/ui Aptos wallet selector to your shadcn-based app, follow these steps:

npx shadcn-ui@latest add button collapsible dialog dropdown-menu toast

  • Copy the wallet-selector.tsx file from this repo to your src/components/ directory.

  • If you have not already configured AptosWalletAdapterProvider for your app, you can also copy the wallet-provider.tsx file from this repo. Be sure to install the @aptos-labs/wallet-adapter-react package and the wallet adapter plugins for the wallet options you plan to support.

  • Wrap your app with the WalletProvider component. See layout.tsx for an example.

  • Render <WalletSelector /> in your app where you want to place the "Connect Wallet" button. See page.tsx as an example.

Vue

Installation

pnpm add @aptos-labs/wallet-adapter-core

Configuration

import { WalletCore } from '@aptos-labs/wallet-adapter-core';
 
const walletCore = new WalletCore([], ['Mizu Wallet'], {
	network: Network.TESTNET,
	mizuwallet: {
		manifestURL: <YOUR_DAPP_MANIFEST_URL>,
	},
});

Usage

connect

// Listen to the event `connect`
walletCore.on("connect", () => {
  console.log(walletCore.account?.address);
});
 
walletCore?.connect("Mizu Wallet");

disconnect

walletCore?.disconnect();

signAndSubmitTransaction

const transaction = {
  data: {
    function: "0x1::aptos_account::transfer",
    typeArguments: ["0x1::aptos_coin::AptosCoin"],
    functionArguments: [
      "0xec08b1fbd892910bf772c2e4595864efb2169e68dafa32dc2f123383dd246c51",
      1,
    ],
  },
};
 
const response = await walletCore?.signAndSubmitTransaction(transaction);
 
// response.hash is the transaction hash
console.log(response.hash);
Manifest JsonTelegram Mini App Development