> ## Documentation Index
> Fetch the complete documentation index at: https://docs.solanamobile.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Anchor Integration Guide
> This guide will show you how to integrate an Anchor Program into your React Native dApp, using the [Anchor Counter dApp](https://github.com/solana-mobile/tutorial-apps/tree/main/AnchorCounterDapp) as reference.
export const Button = ({href, children}) => {
return
;
};
## What you will learn
* How to import an Anchor Program into a React Native project
* How to create an Anchor Wallet and Provider with Mobile Wallet Adapter
* How to sign and submit transactions with an Anchor Program IDL
* How to generate instructions with an Anchor Program IDL
## Prerequisites
* [React Native setup](/get-started/react-native/setup) and [Anchor setup](https://book.anchor-lang.com/getting_started/installation.html)
* Basic understanding of [Anchor Programs](https://book.anchor-lang.com/) and IDL.
* An existing [deployed](https://book.anchor-lang.com/anchor_in_depth/milestone_project_tic-tac-toe.html#deployment) Anchor Program.
## Installation
Add the Anchor library to your React Native Project:
**CAUTION**
React Native apps should use Anchor v0.28.0 because later versions of the library have a polyfill issue on React Native.
```shell yarn theme={null}
yarn add @coral-xyz/anchor@0.28.0
```
```shell npm theme={null}
npm install @coral-xyz/anchor@0.28.0
```
## Create an Anchor Wallet with Mobile Wallet Adapter
**TIP**
The Anchor Counter Program example app shows how to create an Anchor wallet that is integrated
with a more complex state management framework.
To create an `AnchorWallet`, use Mobile Wallet Adapter `transact` to implement the required signing functions.
A simple implementation:
```tsx expandable theme={null}
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;
}, []);
```
## Importing an Anchor Program in Typescript
### Generating an Anchor Program IDL
If you have an Anchor project in your local workspace, build the program and generate the Typescript IDL with:
```shell theme={null}
anchor build
```
If the Anchor program is already deployed and you know its address, you can use the [Anchor CLI](https://book.anchor-lang.com/anchor_references/cli.html?highlight=idl#idl) to fetch it:
```shell theme={null}
anchor idl fetch GrAkKfEpTKQuVHG2Y97Y2FF4i7y7Q5AHLK94JBy7Y5yv
```
### Instantiate your Anchor Program
Once your IDL has been generated, you can import it and create an instance of your `Program` in Typescript.
* Import your generated IDL file, in this case from `/target/types/basic_counter.ts`
* Use the `anchorWallet` from the previous step to create an `AnchorProvider`.
```tsx expandable theme={null}
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(
idl as BasicCounterProgram,
counterProgramId,
provider
);
}, [counterProgramId, provider]);
```
## Sign transactions manually with Mobile Wallet Adapter
With an instantiated `Program`, you can:
* Generate serialized program instructions.
* Construct a `Transaction` with the generated instructions.
* Manually sign the `Transaction` with Mobile Wallet Adapter.
In the following example, we generate an `incrementInstruction` from the program then sign it within a Mobile Wallet Adapter
session.
```tsx expandable theme={null}
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];
});
}
```
This approach is flexible and allows you to fully utilize the Mobile Wallet Adapter session.
## Sign transactions using a Mobile Wallet Adapter signer
With an instantiated `Program`, you can also use the Anchor provided `rpc()` function to sign and submit an Anchor transaction to an RPC.
```tsx expandable theme={null}
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;
};
```
Calling the `rpc()` will generate and sign the transaction using the interface methods (`signTransaction`, `signAllTransactions`) of the Anchor Wallet that the program was instantiated with.
## Generating Clients with Codama
Use [Codama](https://github.com/codama-idl/codama) to generate TypeScript client code from your Anchor IDL.
### 1. Ensure your Anchor IDL exists
```shell theme={null}
anchor build
```
This should produce an IDL under `target/idl/...`.
Place the file where your `codama.json` points (example below uses `program/idl.json`).
### 2. Install dependencies
```shell theme={null}
npm install -D codama @codama/renderers-js
```
### 3. Add `codama.json` (project root)
```json theme={null}
{
"idl": "program/idl.json",
"before": [],
"scripts": {
"js": {
"from": "@codama/renderers-js",
"args": ["src/generated/your-program"]
}
}
}
```
Why these fields exist:
* `idl`: Tells Codama which Anchor IDL file to read.
* `scripts.js.from`: Tells Codama which renderer to run (TypeScript/JS client renderer).
* `scripts.js.args`: Renderer arguments. For `@codama/renderers-js`, the first value is the output directory for generated files.
* `before`: Optional transform pipeline before rendering (empty here).
### 4. Generate code
```shell theme={null}
npx codama run js
```
### 5. Output structure
Generated files are written to the output directory set in `scripts.js.args`.
With the config above:
```text theme={null}
src/generated/your-program/
accounts/
instructions/
programs/
types/
errors/
```