> ## 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.

# Execute Transactions with Solana Libraries

> Interact with Solana programs and execute complex transactions using Web3.js or Anchor

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>;
};

Execute transactions on the Solana blockchain using Para's integrated signers. This includes signing and broadcasting transactions to the network.

<Card title="Setup Solana Libraries First" description="You must complete the Solana library setup before executing transactions" 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 { Address } from '@solana/addresses';
    import {
      createSolanaRpc,
      createTransactionMessage,
      setTransactionMessageFeePayer,
      setTransactionMessageLifetimeUsingBlockhash,
      appendTransactionMessageInstruction,
      lamports,
      pipe,
    } from '@solana/kit';
    import { getTransferSolInstruction } from '@solana-program/system';

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

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

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

        const recipient = "RECIPIENT_ADDRESS_HERE" as Address;
        const response = await rpc.getLatestBlockhash().send();
        const { blockhash, lastValidBlockHeight } = response.value;

        const transferInstruction = getTransferSolInstruction({
          source: solanaSigner,
          destination: recipient,
          amount: lamports(LAMPORTS_PER_SOL / 10n),
        });

        const transaction = pipe(
          createTransactionMessage({ version: "legacy" }),
          (tx) => setTransactionMessageFeePayer(solanaSigner.address, tx),
          (tx) => setTransactionMessageLifetimeUsingBlockhash({ blockhash, lastValidBlockHeight }, tx),
          (tx) => appendTransactionMessageInstruction(transferInstruction, tx)
        );

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

      return <button onClick={sendSOL}>Send 0.1 SOL</button>;
    }
    ```
  </Tab>

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

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

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

        const recipient = new PublicKey("RECIPIENT_ADDRESS_HERE");

        const transaction = new Transaction().add(
          SystemProgram.transfer({
            fromPubkey: signer.sender,
            toPubkey: recipient,
            lamports: LAMPORTS_PER_SOL * 0.1,
          })
        );

        try {
          const signature = await signer.sendTransaction(transaction, {
            skipPreflight: false,
            preflightCommitment: "confirmed",
          });

          console.log("Transaction signature:", signature);

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

      return <button onClick={sendSOL}>Send 0.1 SOL</button>;
    }
    ```
  </Tab>

  <Tab title="Anchor">
    Use `useParaSolanaSigner` with Codama-generated program clients:

    ```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 with Codama
    import { getInitializeInstruction } from "./generated/instructions";

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

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

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

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

        const instruction = getInitializeInstruction({
          user: solanaSigner,
          // other accounts are resolved by Codama from your IDL
        });

        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:", signature);
      };

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

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

## Next Steps

<CardGroup cols={3}>
  <Card title="Get Transaction Status" description="Check transaction confirmations" href="/v2/react/guides/web3-operations/solana/get-transaction-status" icon="clock" />

  <Card title="Send Tokens" description="Transfer SPL tokens between accounts" href="/v2/react/guides/web3-operations/solana/send-tokens" icon="coins" />

  <Card title="Compute Units" description="Set compute units and priority fees" href="/v2/react/guides/web3-operations/solana/compute-units" icon="calculator" />
</CardGroup>
