Quick start - using Aptos Connect in your dApp

The easiest way to interact with Aptos Connect is via the Aptos Wallet Adapter (opens in a new tab). Our Aptos Wallet Adapter provides a standardized way of integrating wallets into your dApp.

Install Aptos Wallet Adapter

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

The AptosConnect plugin is included by default, so there's no need to explicitly add it. Just wrap your app with AptosWalletAdapterProvider as shown:

  import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
 
  // Show the following wallets as options even when not already installed
  const optInWallets = ["Petra"];
 
  const dappInfo = {
    aptosConnect: {
      dappName: "My awesome dapp"  // defaults to document's title
      dappImageURI: "..."  // defaults to dapp's favicon
    },
  };
 
  <AptosWalletAdapterProvider
    dappInfo={dappInfo}
    autoConnect
    optInWallets={optInWallets}>
      <App/>
  </AptosWalletAdapterProvider>

Send a transaction

Once the Aptos Wallet Adapter is initialized, you can access it from anywhere in your app with the useWallet hook. The signature interface will be the same, whether the user connects to Aptos Connect or to a custodial wallet.

const { signAndSubmitTransaction } = useWallet();
 
const transaction: InputTransactionData = {
  data: {
    function: '0x1::coin::transfer',
    typeArguments: [APTOS_COIN],
    functionArguments: [account.address, 1],
  },
};
 
const txn = await signAndSubmitTransaction(transaction);

Update Aptos Wallet Adapter

If your app is already using the Aptos Wallet Adapter, then run the following command to make sure you're running the latest version of the package, that comes bundled with Aptos Connect.

pnpm update @aptos-labs/wallet-adapter-react

Remove the Identity Connect plugin from your project's packages and imported plugins

pnpm remove @identity-connect/wallet-adapter-plugin

Additionally, if you still wish to allow pairing to external wallets, make sure to pass the dappId in the Wallet Adapter config as follows:

  const dappConfig = {
    aptosConnect: {
      // Pass the dappId here
      dappId: "my-dapp-id"
      // ...,
    }
  };
 
  <AptosWalletAdapterProvider dappConfig={dappConfig} /* ... */>
    <App/>
  </AptosWalletAdapterProvider>

Adding UI support for Aptos Connect

If you want to continue using your own custom UI then you simply need to add a Continue with Google button like we did in the wallet adapter UI, and link it to the Core package of the Aptos Wallet Adapter.

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

We also recommend adding a link to aptosconnect.app to your connected wallet UI so that a user can easily open a new tab to their wallet. This is needed since the user does not have an extension or app to open to view their account