Explore dApps

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.

Configration

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

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

💡

Usage

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

Follow the shadcn/ui installation instructions (opens in a new tab) if you haven't already configured it in your app.
Run the following command to install all of the shadcn/ui components that the wallet selector depends on:

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

Configration

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.json Telegram Mini App Development