Skip to main content

Overview

This guide will help you understand how to connect with Aptos MoveVM wallets.

Aptos Move Wallets

With Aptos compatible networks, you can use @aptos-labs/wallet-adapter-react to provide your dApp with a Provider and Context for connecting MoveVM wallets to your dapp.

This Provider uses a standard interface for all Movement Wallets, making it easy for new wallets to be supported.

Using the React Provider and Context​

In this example, we'll be using Next.js and TypeScript.

Set up Next.js​

Initialize Next Project
npm create next-app

Install @aptos-labs/wallet-adapter-react​

Install the Wallet Adapter
npm install @aptos-labs/wallet-adapter-react @aptos-labs/ts-sdk

Implement Wallet Provider & Custom network​

Create a new files with name provider/WalletProvider.tsx, import the Aptos Wallet Adapter and any legacy wallet plugins & custom network to connect to the porto network or aptos devnet.

src/provider/WalletProvider.tsx
import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
import { PropsWithChildren } from "react";
import { AptosConfig, Network } from "@aptos-labs/ts-sdk";

export const WalletProvider = ({ children }: PropsWithChildren) => {
  const wallets = [
    // add plugins for non AIP 62 compliant wallets here
  ];
  const config = new AptosConfig({
    network: Network.TESTNET,
    fullnode: 'https://aptos.testnet.porto.movementlabs.xyz/v1',
    faucet: 'https://fund.testnet.porto.movementlabs.xyz/'
  })

  return (
    <AptosWalletAdapterProvider
      plugins={wallets}
      autoConnect={true}
      dappConfig={config}
      onError={(error) => {
        console.log("error", error);
      }}
    >
      {children}
    </AptosWalletAdapterProvider>
  );
};
Details

All fields of AptosWalletAdapterProvider It is recommended to:

Set autoConnect to true. Include plugins for any wallets that are using the legacy standard.

FieldDescriptionExample
autoConnectA prop indicates whether the dapp should auto connect with the most recently connected wallet on page reload.true
optInWalletsLimit the list of supported AIP-62 wallets to just the ones with names in optedInWallets.['Petra']
dappConfigSpecify an alternate network to work on. This prop only works for wallets which are NOT chrome extensions. If set, this object must include the name of the network the app is connected to. The object may include a aptosConnectDappId.{ network: 'mainnet', aptosConnectDappId: undefined }
onErrorA callback function to fire when the adapter throws an error.(error) => { console.log("error", error); }
pluginsAny legacy standard wallet, i.e., a wallet that is not AIP-62 standard compatible, should be installed in this array. Check https://github.com/aptos-labs/aptos-wallet-adapter/blob/main/README.md#supported-wallet-packages for a list of legacy standard wallet plugins.[new LegacyWallet()]

Import Provider to layout.tsx​

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import { WalletProvider } from "@/provider";

// ... {rest code}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <WalletProvider>
          {children}
        </WalletProvider>
      </body>
    </html>
  );
}

Edit src/app/page.tsx & import useWallet to access data from the Provider​

src/app/page.tsx
'use client'


import {useWallet} from '@aptos-labs/wallet-adapter-react'

export default function Home() {
  const { account, connected, wallet, changeNetwork } = useWallet();

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
    {account && account.address}
    </div>
  );
}

For more information about the useWallet hook, you can refer to the following interface:

export interface WalletContextState {
  connected: boolean;
  isLoading: boolean;
  account: AccountInfo | null;
  network: NetworkInfo | null;
  connect(walletName: WalletName): void;
  disconnect(): void;
  wallet: WalletInfo | null;
  wallets?: ReadonlyArray<Wallet | AptosStandardSupportedWallet>;
  signAndSubmitTransaction(transaction: InputTransactionData): Promise<any>;
  signTransaction(
    transactionOrPayload: AnyRawTransaction | Types.TransactionPayload,
    asFeePayer?: boolean,
    options?: InputGenerateTransactionOptions
  ): Promise<AccountAuthenticator>;
  submitTransaction(
    transaction: InputSubmitTransactionData
  ): Promise<PendingTransactionResponse>;
  signMessage(message: SignMessagePayload): Promise<SignMessageResponse>;
  signMessageAndVerify(message: SignMessagePayload): Promise<boolean>;
  changeNetwork(network: Network): Promise<AptosChangeNetworkOutput>;
}
Details all function of useWallet()

Functions​

See WalletCore.ts in wallet-adapter-core for where these functions are implemented.

FunctionSignatureDescription
connectconnect(walletName: WalletName): voidConnects to the specified wallet by its name.
disconnectdisconnect(): voidDisconnects the currently connected wallet.
signTransactionsignTransaction(transactionOrPayload: AnyRawTransaction | Types.TransactionPayload, asFeePayer?: boolean, options?: InputGenerateTransactionOptions): Promise<AccountAuthenticator>Signs a transaction with optional parameters for fee payment.
submitTransactionsubmitTransaction(transaction: InputSubmitTransactionData): Promise<PendingTransactionResponse>Submits a transaction with the provided transaction data.
signAndSubmitTransactionsignAndSubmitTransaction(transaction: InputTransactionData): Promise<any>Signs and submits a transaction with the given input data.
signMessagesignMessage(message: SignMessagePayload): Promise<SignMessageResponse>Signs a message and returns the signature and other response info.
signMessageAndVerifysignMessageAndVerify(message: SignMessagePayload): Promise<boolean>Signs a message and verifies the signer.
changeNetworkchangeNetwork(network: Network): Promise<AptosChangeNetworkOutput>Requests a change in the connected network. This is not supported by all wallets.