Connecting to Petra

Connect your dApp to Petra using the Aptos Wallet Adapter (opens in a new tab). It provides a standardized interface that works across all Aptos wallets, including Petra.

See the Quick Start guide for full setup details.

Installation

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

Provider Setup

Wrap your app with AptosWalletAdapterProvider at the root level:

import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
 
function Root() {
  return (
    <AptosWalletAdapterProvider
      dappInfo={{
        aptosConnect: { dappName: "My dApp" },
      }}
      optInWallets={["Petra"]}
      autoConnect
    >
      <App />
    </AptosWalletAdapterProvider>
  );
}

• optInWallets — Lists wallets to show as options in the connect flow. Adding "Petra" ensures Petra appears as a wallet choice.
• autoConnect — Automatically reconnects returning users who previously approved the connection.

Connecting and Disconnecting

Use the useWallet hook to manage the connection lifecycle:

import { useWallet } from "@aptos-labs/wallet-adapter-react";
 
function ConnectButton() {
  const { connect, disconnect, connected, account } = useWallet();
 
  if (connected) {
    return (
      <div>
        <p>Connected: {account?.address}</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }
 
  return <button onClick={() => connect("Petra")}>Connect Petra</button>;
}

• connect("Petra") — Prompts the user to approve a connection to your dApp through Petra.
• account — Contains the connected account's address and publicKey.
• disconnect() — Ends the session. The user will need to reconnect to make further requests.