Anchor Integration Guide

import * as anchor from "@coral-xyz/anchor";
import {
  transact,
  Web3MobileWallet,
} from "@solana-mobile/mobile-wallet-adapter-protocol-web3js";

const anchorWallet = useMemo(() => {
  return {
    signTransaction: async (transaction: Transaction) => {
      return transact(async (wallet: Web3MobileWallet) => {
        const authorizationResult = await wallet.authorize({
              cluster: RPC_ENDPOINT,
              identity: APP_IDENTITY,
        }));

        const signedTransactions = await wallet.signTransactions({
          transactions: [transaction],
        });
        return signedTransactions[0];
      });
    },
    signAllTransactions: async (transactions: Transaction[]) => {
      return transact(async (wallet: Web3MobileWallet) => {
        const authorizationResult = await wallet.authorize({
              cluster: RPC_ENDPOINT,
              identity: APP_IDENTITY,
        }));

        const signedTransactions = await wallet.signTransactions({
          transactions: transactions,
        });
        return signedTransactions;
      });
    },
    get publicKey() {
      return userPubKey;
    },
  } as anchor.Wallet;
}, []);

anchor build

anchor idl fetch GrAkKfEpTKQuVHG2Y97Y2FF4i7y7Q5AHLK94JBy7Y5yv

import { BasicCounter as BasicCounterProgram } from "../../basic-counter/target/types/basic_counter";
import { AnchorProvider, Program } from "@coral-xyz/anchor";

const COUNTER_PROGRAM_ID = "ADraQ2ENAbVoVZhvH5SPxWPsF2hH5YmFcgx61TafHuwu";

// Address of the devnet-deployed Counter Program
const counterProgramId = useMemo(() => {
  return new PublicKey(COUNTER_PROGRAM_ID);
}, []);

// Create an AnchorProvider with the anchorWallet.
const provider = useMemo(() => {
  if (!anchorWallet) {
    return null;
  }
  return new AnchorProvider(connection, anchorWallet, {
    preflightCommitment: "confirmed",
    commitment: "processed",
  });
}, [anchorWallet, connection]);

// Create an instance of your Program.
const counterProgram = useMemo(() => {
  if (!provider) {
    return null;
  }

  return new Program<BasicCounterProgram>(
    idl as BasicCounterProgram,
    counterProgramId,
    provider,
  );
}, [counterProgramId, provider]);

const {counterProgram, counterPDA} = useCounterProgram();

const signIncrementTransaction = async () => {
  return await transact(async (wallet: Web3MobileWallet) => {
    const authorizationResult = wallet.authorize({
      cluster: RPC_ENDPOINT,
      identity: APP_IDENTITY,
    }));

    const latestBlockhash = await connection.getLatestBlockhash();

    // Generate the increment ix from the Anchor program
    const incrementInstruction = await counterProgram.methods
        .increment(new anchor.BN(amount))
        .accounts({
          counter: counterPDA,
        })
        .instruction();

    // Build a transaction containing the instruction
    const incrementTransaction = new Transaction({
      ...latestBlockhash,
      feePayer: authorizationResult.publicKey,
    }).add(incrementInstruction);

    // Sign a transaction and receive
    const signedTransactions = await wallet.signTransactions({
      transactions: [incrementTransaction],
    });

    return signedTransactions[0];
  });
}

const { counterProgram, counterPDA } = useCounterProgram();

const incrementCounter = async () => {
  // Submit an increment transaction to the RPC endpoint
  const signature = await counterProgram.methods
    .increment(new anchor.BN(amount))
    .accounts({
      counter: counterPDA,
    })
    .rpc();

  return signature;
};

anchor build

npm install -D codama @codama/renderers-js

{
  "idl": "program/idl.json",
  "before": [],
  "scripts": {
    "js": {
      "from": "@codama/renderers-js",
      "args": ["src/generated/your-program"]
    }
  }
}

npx codama run js

src/generated/your-program/
  accounts/
  instructions/
  programs/
  types/
  errors/