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. If you already support Aptos Wallet Adapter in your dApp, skip to Adding support for Aptos Connect in Aptos Wallet Adapter.

Install Aptos Wallet Adapter

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

AptosConnect is auto-added to the package, so no need to add it as a plugin. If you want to show other wallets you can include them in the plugins.

  import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
 
  const wallets = [new AnyOtherWalletYouWantToInclude()];
  <AptosWalletAdapterProvider
    plugins={wallets}
    autoConnect={true}
    optInWallets={["Petra"]}
    dappConfig={{ network: network.MAINNET, aptosConnectDappId: "dapp-id" }}>
      <App >
  </AptosWalletAdapterProvider>

Send a transaction

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

Once the wallet adapter is supported in your dApp, exposing Aptos Connect to your dApp + users is as easy as adding the Aptos Connect package. To add Aptos Connect to your application, please follow these steps.

Adding support for Aptos Connect in Aptos Wallet Adapter Add the Aptos Connect plugin to your Aptos Wallet Adapter

pnpm add @aptos-connect/wallet-adapter-plugin

Then, instantiate and add the AptosConnect wallet adapter plugin to your plugins list, as shown in the wallet adapter docs

const aptosConnectPlugin = new AptosConnectWalletAdapterPlugin();
const wallets = [
  aptosConnectPlugin,
  // ...
];

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

Adding UI support for Aptos Connect

If you use Aptos’ wallet adapter UI package, then run this command to update the wallet adapter UI:

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

If you want to start using Aptos wallet adapter UI package, run this command

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

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. 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