ts-sdk-wallet-adapter

TypeScript SDK: Wallet Adapter (React)

Purpose

Guide wallet connection and frontend transaction submission in React using @aptos-labs/wallet-adapter-react. End users sign transactions via their browser wallet (Petra, Nightly, etc.) — never via raw private keys.

ALWAYS

1. Use @aptos-labs/wallet-adapter-react for frontend wallet integration — this is the standard React adapter.
2. Wrap your app root with AptosWalletAdapterProvider — all useWallet() calls require this context.
3. Use useWallet() hook to access wallet functions in React components.
4. Use the wallet adapter's signAndSubmitTransaction (from useWallet()) in frontend — NOT the SDK's direct aptos.signAndSubmitTransaction.
5. Always call aptos.waitForTransaction({ transactionHash }) after submit — the wallet returns when the tx is accepted, not committed.

NEVER

1. Do not use Account.generate() or raw private keys in browser/frontend — use wallet adapter for end users.
2. Do not use the SDK's aptos.signAndSubmitTransaction in React components — use the wallet adapter's version from useWallet().
3. Do not hardcode wallet names — use the wallets array from useWallet() for a dynamic list.

---

Installation

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

Modern AIP-62 standard wallets (Petra, Nightly, etc.) are autodetected and do NOT require additional packages. Legacy wallets need their plugin package installed separately.

---

Provider setup

Wrap your app root with AptosWalletAdapterProvider:

// main.tsx or App.tsx
import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
import { Network } from "@aptos-labs/ts-sdk";

function App() {
  return (
    <AptosWalletAdapterProvider
      autoConnect={true}
      dappConfig={{
        network: Network.TESTNET
      }}
      onError={(error) => console.error("Wallet error:", error)}
    >
      <YourApp />
    </AptosWalletAdapterProvider>
  );
}