raintree-technology/aptos-dapp-integration

Aptos DApp Integration Expert

Expert on integrating Aptos blockchain with frontend applications.

Triggers

• wallet connect, petra, martian, pontem
• typescript sdk, aptos sdk, @aptos-labs/ts-sdk
• dapp, frontend integration
• wallet adapter, transaction, sign

Wallet Adapter Setup

Installation

npm install @aptos-labs/wallet-adapter-react \
            petra-plugin-wallet-adapter \
            @martianwallet/aptos-wallet-adapter

React Provider

import { AptosWalletAdapterProvider } from "@aptos-labs/wallet-adapter-react";
import { PetraWallet } from "petra-plugin-wallet-adapter";
import { MartianWallet } from "@martianwallet/aptos-wallet-adapter";

function App() {
  const wallets = [new PetraWallet(), new MartianWallet()];

  return (
    <AptosWalletAdapterProvider plugins={wallets} autoConnect={true}>
      <YourApp />
    </AptosWalletAdapterProvider>
  );
}

Using Wallet Hooks

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

function WalletButton() {
  const { connect, disconnect, account, connected, signAndSubmitTransaction } = useWallet();

  if (connected) {
    return (
      <div>
        <p>Connected: {account?.address}</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }

  return <button onClick={() => connect("Petra")}>Connect</button>;
}

TypeScript SDK

Initialize Client

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

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

Read Data

// Account info
const account = await aptos.getAccountInfo({ accountAddress: "0x..." });

// Resources
const resources = await aptos.getAccountResources({ accountAddress: "0x..." });

// Specific resource
const coin = await aptos.getAccountResource({
  accountAddress: "0x...",
  resourceType: "0x1::coin::CoinStore<0x1::aptos_coin::AptosCoin>"
});

// View function
const result = await aptos.view({
  payload: {
    function: "0x1234::module::get_balance",
    functionArguments: ["0xabcd..."],
  },
});

Submit Transactions

const { signAndSubmitTransaction } = useWallet();

const handleTransfer = async () => {
  const response = await signAndSubmitTransaction({
    data: {
      function: "0x1::coin::transfer",
      typeArguments: ["0x1::aptos_coin::AptosCoin"],
      functionArguments: ["0xrecipient...", "100000000"],
    },
  });

  await aptos.waitForTransaction({ transactionHash: response.hash });
};

Transaction with SDK (More Control)

// Build
const transaction = await aptos.transaction.build.simple({
  sender: sender.accountAddress,
  data: {
    function: "0x1234::module::my_function",
    functionArguments: [arg1, arg2],
  },
});

// Sign
const senderAuth = aptos.transaction.sign({ signer: sender, transaction });

// Submit
const response = await aptos.transaction.submit.simple({
  transaction,
  senderAuthenticator: senderAuth,
});

// Wait
await aptos.waitForTransaction({ transactionHash: response.hash });

Common Patterns

Check Balance

async function getAptBalance(address: string): Promise<number> {
  const resource = await aptos.getAccountResource({
    accountAddress: address,
    resourceType: "0x1::coin::CoinStore<0x1::aptos_coin::AptosCoin>",
  });
  return Number(resource.coin.value);
}

Display NFTs

const nfts = await aptos.getAccountOwnedTokens({ accountAddress: address });

Transaction Status Hook

function useTransactionStatus() {
  const [status, setStatus] = useState<"idle" | "pending" | "success" | "error">("idle");

  const submitTransaction = async (txn) => {
    setStatus("pending");
    try {
      const response = await signAndSubmitTransaction(txn);
      await aptos.waitForTransaction({ transactionHash: response.hash });
      setStatus("success");
    } catch {
      setStatus("error");
    }
  };

  return { status, submitTransaction };
}

Error Handling

try {
  await signAndSubmitTransaction(txn);
} catch (error: any) {
  if (error.code === 4001) {
    console.error("User rejected");
  } else if (error.message.includes("INSUFFICIENT_BALANCE")) {
    console.error("Insufficient balance");
  }
}

Best Practices

• Always validate input before building transactions
• Show transaction details before signing
• Handle wallet disconnection gracefully
• Check network before submitting
• Use HTTPS for all API calls
• Never ask for private keys