Claude-starter 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.

install
source · Clone the upstream repo
git clone https://github.com/raintree-technology/claude-starter
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/raintree-technology/claude-starter "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/aptos/dapp-integration" ~/.claude/skills/raintree-technology-claude-starter-aptos-dapp-integration-097353 && rm -rf "$T"
manifest: skills/aptos/dapp-integration/SKILL.md
source content

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