On this page

Aptos Wallet Adapter

Official Aptos wallet connection library for React. Compatible OneKey versions register through Aptos Wallet Standard.

The adapter discovers wallets that register Aptos Wallet Standard features. Verify OneKey appears in wallets before offering the connection, and test the wallet and adapter versions you ship.

Installation


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

Basic Setup

Wrap your application with AptosWalletAdapterProvider:

App.tsx


import { AptosWalletAdapterProvider } from '@aptos-labs/wallet-adapter-react'
 
function App() {
  return (
    <AptosWalletAdapterProvider autoConnect={true}>
      <YourApp />
    </AptosWalletAdapterProvider>
  )
}

Wallet Connection

Connect Button

ConnectButton.tsx


import { useWallet } from '@aptos-labs/wallet-adapter-react'
 
function ConnectButton() {
  const { connect, disconnect, account, connected, wallets } = useWallet()
 
  if (connected && account) {
    return (
      <div>
        <p>Connected: {account.address.toString().slice(0, 6)}...{account.address.toString().slice(-4)}</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    )
  }
 
  return (
    <div>
      {wallets?.map((wallet) => (
        <button
          key={wallet.name}
          onClick={() => connect(wallet.name)}
        >
          <img src={wallet.icon} alt={wallet.name} width={24} />
          {wallet.name}
        </button>
      ))}
    </div>
  )
}

This minimal example renders a custom wallet list. For production, add dialog focus management and keyboard handling, or use an accessible dialog component:

WalletModal.tsx


import { useWallet } from '@aptos-labs/wallet-adapter-react'
import { useState } from 'react'
 
function WalletModal() {
  const { wallets, connect } = useWallet()
  const [isOpen, setIsOpen] = useState(false)
  const [error, setError] = useState('')
 
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Connect Wallet</button>
 
      {isOpen && (
        <div className="modal">
          <h2>Select Wallet</h2>
          {error && <p role="alert">{error}</p>}
          {wallets?.map((wallet) => (
            <button
              key={wallet.name}
              onClick={async () => {
                try {
                  await connect(wallet.name)
                  setIsOpen(false)
                } catch (error) {
                  setError(error instanceof Error ? error.message : 'Connection failed')
                }
              }}
            >
              <img src={wallet.icon} alt={wallet.name} width={24} />
              {wallet.name}
            </button>
          ))}
          <button onClick={() => setIsOpen(false)}>Close</button>
        </div>
      )}
    </>
  )
}

Transactions

Sign and Submit Transaction

Replace the abbreviated recipient and catch rejected or failed requests in your UI. The client and wallet must use the same network.


import { useWallet } from '@aptos-labs/wallet-adapter-react'
import { Aptos, AptosConfig, Network } from '@aptos-labs/ts-sdk'
 
function TransferAPT() {
  const { account, network, signAndSubmitTransaction } = useWallet()
 
  const config = new AptosConfig({ network: Network.MAINNET })
  const aptos = new Aptos(config)
 
  const handleTransfer = async () => {
    if (!account) return
    if (network?.name !== Network.MAINNET) throw new Error('Select Aptos mainnet first')
 
    const response = await signAndSubmitTransaction({
      sender: account.address,
      data: {
        function: '0x1::aptos_account::transfer',
        functionArguments: [
          '0x1234...', // recipient address
          100000000,   // amount in octas (1 APT = 100000000)
        ],
      },
    })
 
    // Wait for transaction
    const result = await aptos.waitForTransaction({
      transactionHash: response.hash,
    })
 
    console.log('Transaction confirmed:', result)
  }
 
  return <button onClick={handleTransfer}>Transfer APT</button>
}

Sign Message

For authentication, replace the example nonce with a server-issued, single-use challenge and verify the signed response on your server.


import { useWallet } from '@aptos-labs/wallet-adapter-react'
 
function SignMessage() {
  const { signMessage, account } = useWallet()
 
  const handleSign = async () => {
    const response = await signMessage({
      message: 'Welcome to My dApp!',
      nonce: crypto.randomUUID(),
    })
 
    console.log('Signature:', response.signature)
    console.log('Full message:', response.fullMessage)
  }
 
  return <button disabled={!account} onClick={handleSign}>Sign Message</button>
}

Network Configuration

Configure the network in the provider:


import { AptosWalletAdapterProvider } from '@aptos-labs/wallet-adapter-react'
import { Network } from '@aptos-labs/ts-sdk'
 
function App() {
  return (
    <AptosWalletAdapterProvider
      autoConnect={true}
      dappConfig={{
        network: Network.MAINNET,
        // Optional: specify additional networks
        aptosApiKeys: {
          [Network.MAINNET]: 'YOUR_API_KEY',
          [Network.TESTNET]: 'YOUR_TESTNET_KEY',
        },
      }}
    >
      <YourApp />
    </AptosWalletAdapterProvider>
  )
}

Hooks Reference

Hook or returned member	Description
`useWallet()`	Main hook for wallet connection and transactions
`account`	Current connected account
`connected`	Connection status
`wallets`	List of available wallets
`connect(walletName)`	Connect to a specific wallet
`disconnect()`	Disconnect current wallet
`signAndSubmitTransaction(payload)`	Sign and submit a transaction
`signMessage(request)`	Sign an arbitrary message
`network`	Current network info