> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Interact with Solana Programs

> Call program instructions and work with Anchor IDLs using Para

export const Card = ({imgUrl, title, description, href, horizontal = false, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  const handleClick = e => {
    e.preventDefault();
    if (newTab) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = href;
    }
  };
  return <div className={`not-prose relative my-2 p-[1px] rounded-xl transition-all duration-300 ${isHovered ? 'bg-gradient-to-r from-[#FF4E00] to-[#874AE3]' : 'bg-gray-200'}`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <a href={href} onClick={handleClick} className={`not-prose flex ${horizontal ? 'flex-row' : 'flex-col'} font-normal h-full bg-white overflow-hidden w-full cursor-pointer rounded-[11px] no-underline`}>
        {imgUrl && <div className={`relative overflow-hidden flex-shrink-0 ${horizontal ? 'w-[30%] rounded-l-[11px]' : 'w-full'}`} onClick={e => e.stopPropagation()}>
            <img src={imgUrl} alt={title} className="w-full h-full object-cover pointer-events-none select-none" draggable="false" />
            <div className="absolute inset-0 pointer-events-none" />
          </div>}
        <div className={`flex-grow px-6 py-5 ${horizontal ? 'w-[70%]' : 'w-full'} flex flex-col ${horizontal && imgUrl ? 'justify-center' : 'justify-start'}`}>
          {title && <h2 className="font-semibold text-base text-gray-800 m-0">{title}</h2>}
          {description && <div className={`font-normal text-gray-500 re leading-6 ${horizontal || !imgUrl ? 'mt-0' : 'mt-1'}`}>
              <p className="m-0 text-xs">{description}</p>
            </div>}
        </div>
      </a>
    </div>;
};

Interact with Solana programs by calling instructions and working with Anchor IDLs. This guide covers manual instruction creation and Anchor's type-safe program interaction.

<Card title="Setup Solana Libraries First" description="You must complete the Solana library setup before interacting with programs" href="/v2/react/guides/web3-operations/solana/setup-libraries" horizontal />

<Tabs>
  <Tab title="@solana/kit">
    ```typescript theme={null}
    import { useParaSolanaSigner, useParaSolanaSignAndSend } from '@getpara/react-sdk';
    import { PublicKey, SystemProgram, TransactionInstruction } from '@solana/web3.js';
    import {
      createSolanaRpc,
      createTransactionMessage,
      setTransactionMessageFeePayerSigner,
      setTransactionMessageLifetimeUsingBlockhash,
      appendTransactionMessageInstructions,
      pipe,
    } from '@solana/kit';
    import { Buffer } from 'buffer';

    const rpc = createSolanaRpc("https://api.mainnet-beta.solana.com");

    function InteractWithProgram() {
      const { solanaSigner, isLoading } = useParaSolanaSigner({ rpc });
      const { signAndSendAsync, isPending } = useParaSolanaSignAndSend(solanaSigner);

      const callProgram = async () => {
        if (!solanaSigner) {
          console.error("No signer available. Connect wallet first.");
          return;
        }

        const programId = new PublicKey("YOUR_PROGRAM_ID");

        // Example: Initialize account with custom data
        const [pda] = PublicKey.findProgramAddressSync(
          [Buffer.from("seed"), solanaSigner.publicKey.toBuffer()],
          programId
        );

        // Create instruction data (program-specific)
        const instructionData = Buffer.alloc(9);
        instructionData.writeUInt8(0, 0); // Instruction index
        instructionData.writeBigUInt64LE(BigInt(1000), 1); // Example parameter

        const instruction = new TransactionInstruction({
          keys: [
            { pubkey: solanaSigner.publicKey, isSigner: true, isWritable: true },
            { pubkey: pda, isSigner: false, isWritable: true },
            { pubkey: SystemProgram.programId, isSigner: false, isWritable: false },
          ],
          programId,
          data: instructionData,
        });

        const { value: latestBlockhash } = await rpc.getLatestBlockhash().send();

        const transaction = pipe(
          createTransactionMessage({ version: 0 }),
          (tx) => setTransactionMessageFeePayerSigner(solanaSigner.publicKey, tx),
          (tx) => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, tx),
          (tx) => appendTransactionMessageInstructions([instruction], tx)
        );

        const result = await signAndSendAsync({ transactions: [transaction] });

        console.log("Program call signature:", result);
        console.log("Transaction confirmed");
      };

      return <button onClick={callProgram}>Call Program</button>;
    }
    ```
  </Tab>

  <Tab title="@solana/web3.js">
    ```typescript theme={null}
    import { useParaSolana } from './hooks/useParaSolana';
    import { Transaction, TransactionInstruction, PublicKey, SystemProgram } from '@solana/web3.js';
    import { Buffer } from 'buffer';

    function InteractWithProgram() {
      const { connection, signer } = useParaSolana();

      const callProgram = async () => {
        const programId = new PublicKey("YOUR_PROGRAM_ID");

        // Example: Initialize account with custom data
        const [pda] = PublicKey.findProgramAddressSync(
          [Buffer.from("seed"), signer.sender.toBuffer()],
          programId
        );

        // Create instruction data (program-specific)
        const instructionData = Buffer.alloc(9);
        instructionData.writeUInt8(0, 0); // Instruction index
        instructionData.writeBigUInt64LE(BigInt(1000), 1); // Example parameter

        const instruction = new TransactionInstruction({
          keys: [
            { pubkey: signer.sender, isSigner: true, isWritable: true },
            { pubkey: pda, isSigner: false, isWritable: true },
            { pubkey: SystemProgram.programId, isSigner: false, isWritable: false },
          ],
          programId,
          data: instructionData,
        });

        const transaction = new Transaction().add(instruction);

        try {
          const signature = await signer.sendTransaction(transaction);
          console.log("Program call signature:", signature);

          const confirmation = await connection.confirmTransaction(signature, "confirmed");
          console.log("Transaction confirmed:", confirmation);
        } catch (error) {
          console.error("Program call failed:", error);
        }
      };

      return <button onClick={callProgram}>Call Program</button>;
    }
    ```
  </Tab>

  <Tab title="Anchor">
    Use Codama-generated typed instructions for type-safe program interaction:

    ```typescript theme={null}
    import { useParaSolanaSigner } from "@getpara/react-sdk";
    import { createSolanaRpc } from "@solana/kit";
    import { pipe, createTransactionMessage, setTransactionMessageFeePayerSigner,
      setTransactionMessageLifetimeUsingBlockhash, appendTransactionMessageInstruction,
      signAndSendTransactionMessageWithSigners } from "@solana/kit";
    // Generated from your Anchor IDL
    import { getInitializeInstruction, getUpdateInstruction } from "./generated/instructions";

    const rpc = createSolanaRpc("https://api.devnet.solana.com");

    function InteractWithProgram() {
      const { solanaSigner, isLoading } = useParaSolanaSigner({ rpc });

      const callProgram = async () => {
        if (!solanaSigner) return;

        const { value: latestBlockhash } = await rpc.getLatestBlockhash().send();

        // Codama generates typed instruction builders from your IDL
        const instruction = getInitializeInstruction({
          user: solanaSigner,
          data: { value: 1000 },
        });

        const tx = pipe(
          createTransactionMessage({ version: 0 }),
          tx => setTransactionMessageFeePayerSigner(solanaSigner, tx),
          tx => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, tx),
          tx => appendTransactionMessageInstruction(instruction, tx),
        );

        const signature = await signAndSendTransactionMessageWithSigners(tx);
        console.log("Transaction:", signature);
      };

      if (isLoading) return <p>Loading...</p>;
      return <button onClick={callProgram}>Call Program</button>;
    }
    ```

    <Info>Generate your client: `npx codama idl path/to/idl.json -o src/generated`</Info>
  </Tab>
</Tabs>

## Next Steps

<CardGroup cols={3}>
  <Card title="Compute Units" description="Optimize transaction compute units" href="/v2/react/guides/web3-operations/solana/compute-units" icon="calculator" />

  <Card title="Execute Transactions" description="Build complex transactions" href="/v2/react/guides/web3-operations/solana/execute-transactions" icon="bolt" />

  <Card title="Get Transaction Status" description="Monitor transaction results" href="/v2/react/guides/web3-operations/solana/get-transaction-status" icon="clock" />
</CardGroup>