raintree-technology

aptos-dapp-integration

Expert on building Aptos dApps with frontend integration. Covers wallet connectivity (Petra, Martian, Pontem), wallet adapter patterns, TypeScript SDK, transaction building and submission, account management, and React/Next.js integration.

raintree-technology 84 9 Updated 7mo ago
GitHub

Install

npx skillscat add raintree-technology/claude-starter/aptos-dapp-integration

Install via the SkillsCat registry.

About this skill

This skill provides guidance on integrating Aptos blockchain with frontend applications, including wallet connectivity for Petra, Martian, and Pontem, TypeScript SDK usage, transaction building, and React/Next.js patterns. It is used when developers need to build dApps that connect to Aptos wallets and interact with the blockchain from a web frontend.

SKILL.md

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