Skip to main content

Aptos Wallet Adapter

Aptos Wallet Adapter is a commonly used wallet connection layer in the React ecosystem. UKey Wallet follows the Wallet Standard, so it can be automatically discovered by the Adapter in the browser environment. There is usually no need to write additional registration code for UKey Wallet on the project side.

ℹ️

UKey Wallet will appear in the wallet list whenever UKey Wallet is installed or accessible in the user's environment. You only need to render the connection entry and continue processing business according to the account status returned by the Adapter.

Setup​

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

Basic settings​

Mount AptosWalletAdapterProvider on the outer layer of the application root component, so that components in the page can read the wallet status through Hook:

import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";

function AptosWalletShell() {
  return (
    <AptosWalletAdapterProvider autoConnect={true}>
      <YourApp />
    </AptosWalletAdapterProvider>
  );
}

Wallet connection​

Basic connection button​

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

function AptosConnectPanel() {
  const { connect, disconnect, account, connected, wallets } = useWallet();

  if (connected && account) {
    return (
      <div>
        <p>
          Connected: {account.address.slice(0, 6)}...{account.address.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>
  );
}

Custom wallet selection pop-up window​

If the product needs its own visual style, it can read the wallets list, render the pop-up window by itself, and then call connect(wallet.name) to complete the connection:

import { useWallet } from "@aptos-labs/wallet-adapter-react";
import { useState } from "react";

function AptosWalletPicker() {
  const { wallets, connect } = useWallet();
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Connect wallet</button>

      {isOpen && (
        <div className="modal">
          <h2>Select wallet</h2>
          {wallets?.map((wallet) => (
            <button
              key={wallet.name}
              onClick={() => {
                connect(wallet.name);
                setIsOpen(false);
              }}
            >
              <img src={wallet.icon} alt={wallet.name} width={24} />
              {wallet.name}
            </button>
          ))}
          <button onClick={() => setIsOpen(false)}>Close</button>
        </div>
      )}
    </>
  );
}

Transfers​

Sign and submit the transaction​

import { useWallet } from "@aptos-labs/wallet-adapter-react";
import { Aptos, AptosConfig, Network } from "@aptos-labs/ts-sdk";

function AptosTransferAction() {
  const { account, signAndSubmitTransaction } = useWallet();

  const config = new AptosConfig({ network: Network.MAINNET });
  const aptos = new Aptos(config);

  const handleTransfer = async () => {
    if (!account) return;

    const requestResult = await signAndSubmitTransaction({
      sender: account.address,
      data: {
        function: "0x1::aptos_account::transfer",
        functionArguments: [
          "0xdemo_receiver...", // Note: receiving address
          100000000, // sample amount in octas (1 APT = 100000000)
        ],
      },
    });

    // Note: Wait for transaction confirmation
    const txResult = await aptos.waitForTransaction({
      transactionHash: requestResult.hash,
    });

    console.log("Transaction finalized:", txResult);
  };

  return <button onClick={handleTransfer}>Transfer APT</button>;
}

Approve msg​

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

function AptosMessageSigner() {
  const { signMessage, account } = useWallet();

  const handleSign = async () => {
    const requestResult = await signMessage({
      message: "Welcome to UKey Wallet Demo!",
      nonce: crypto.randomUUID(),
    });

    console.log("Generated signature:", requestResult.signature);
    console.log("Composed full message:", requestResult.fullMessage);
  };

  return <button onClick={handleSign}>Sign message</button>;
}

Network configuration​

You can specify the default network and API Key in Provider's dappConfig to ensure that wallet connection, transaction construction and on-chain queries all point to the same network environment:

import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
import { Network } from "@aptos-labs/ts-sdk";

function AptosNetworkShell() {
  return (
    <AptosWalletAdapterProvider
      autoConnect={true}
      dappConfig={{
        network: Network.MAINNET,
        // Optionally add extra network configuration here
        aptosApiKeys: {
          [Network.MAINNET]: "YOUR_API_KEY",
          [Network.TESTNET]: "YOUR_TESTNET_KEY",
        },
      }}
    >
      <YourApp />
    </AptosWalletAdapterProvider>
  );
}

Hooks reference​

Hookdescription
useWallet()The main hook for reading wallet status and calling wallet capabilities
accountAccount currently connected
connectedHas the connection been completed?
walletsList of wallets available in the current environment
connect(walletName)Connect to the designated wallet
disconnect()Disconnect current connection
signAndSubmitTransaction(payload)Sign and then submit the transaction
signMessage(request)Request wallet signature message
networkCurrent Network information