Execute Transactions

Execute complex transactions with custom data and manage their lifecycle using Para.

Prerequisites

You need Web3 libraries configured with Para authentication.

Ethers.js
Viem
Wagmi

Execute Raw Transactions

import { useParaEthersSigner, useParaEthersSendTransaction } from "@getpara/react-sdk";
import { ethers, JsonRpcProvider } from "ethers";

const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");

function ExecuteTransaction() {
  const { ethersSigner } = useParaEthersSigner({ provider });

  const {
    sendTransactionAsync,
    isPending,
    data: receipt,
  } = useParaEthersSendTransaction(ethersSigner);

  return (
    <div>
      <button
        onClick={() =>
          sendTransaction({
            to: "0x70997970C51812dc3A010C7d01b50e0d17dc79C8",
            data: "0x",
            value: ethers.parseEther("0.01"),
          })
        }
        disabled={isPending}
      >
        {isPending ? "Executing..." : "Execute Transaction"}
      </button>
      {receipt && <p>Transaction: {receipt.hash}</p>}
    </div>
  );
}

Execute Contract Functions

import { useParaEthersSigner, useParaEthersWriteContract } from "@getpara/react-sdk";
import { JsonRpcProvider } from "ethers";

const CONTRACT_ABI = [
  "function setGreeting(string memory _greeting)",
  "function greet() view returns (string)"
];

const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");

function ContractInteraction({ contractAddress }: { contractAddress: string }) {
  const { ethersSigner } = useParaEthersSigner({ provider });

  const {
    writeContractAsync,
    isPending,
    data: receipt,
  } = useParaEthersWriteContract(ethersSigner);

  return (
    <div>
      <button
        onClick={() =>
          writeContract({
            address: contractAddress,
            abi: CONTRACT_ABI,
            functionName: "setGreeting",
            args: ["Hello from Para!"],
          })
        }
        disabled={isPending}
      >
        {isPending ? "Updating..." : "Update Greeting"}
      </button>
      {receipt && <p>Transaction: {receipt.hash}</p>}
    </div>
  );
}

Execute Raw Transactions

import { useParaViemClient, useParaViemSendTransaction } from "@getpara/react-sdk";
import { parseEther, http } from "viem";
import { sepolia } from "viem/chains";

function ExecuteTransaction() {
  const { viemClient } = useParaViemClient({
    walletClientConfig: { chain: sepolia, transport: http() },
  });

  const {
    sendTransactionAsync,
    isPending,
    data: hash,
  } = useParaViemSendTransaction(viemClient);

  return (
    <div>
      <button
        onClick={() =>
          sendTransaction({
            to: "0x70997970C51812dc3A010C7d01b50e0d17dc79C8",
            data: "0x",
            value: parseEther("0.01"),
          })
        }
        disabled={isPending}
      >
        {isPending ? "Executing..." : "Execute Transaction"}
      </button>
      {hash && <p>Transaction: {hash}</p>}
    </div>
  );
}

Execute Contract Functions

import { useParaViemClient, useParaViemWriteContract } from "@getpara/react-sdk";
import { http } from "viem";
import { sepolia } from "viem/chains";

const CONTRACT_ABI = [
  {
    name: "setGreeting",
    type: "function",
    stateMutability: "nonpayable",
    inputs: [{ name: "_greeting", type: "string" }],
    outputs: [],
  },
] as const;

function ContractInteraction({
  contractAddress,
}: {
  contractAddress: `0x${string}`;
}) {
  const { viemClient } = useParaViemClient({
    walletClientConfig: { chain: sepolia, transport: http() },
  });

  const {
    writeContractAsync,
    isPending,
    data: hash,
  } = useParaViemWriteContract(viemClient);

  return (
    <div>
      <button
        onClick={() =>
          writeContract({
            address: contractAddress,
            abi: CONTRACT_ABI,
            functionName: "setGreeting",
            args: ["Hello from Para!"],
          })
        }
        disabled={isPending}
      >
        {isPending ? "Updating..." : "Update Greeting"}
      </button>
      {hash && <p>Transaction: {hash}</p>}
    </div>
  );
}

Execute Raw Transactions

import { useSendTransaction } from "@getpara/react-sdk/wagmi";
import { parseEther } from "viem";

function ExecuteTransaction() {
  const { data: hash, isPending, sendTransaction } = useSendTransaction();

  return (
    <div>
      <button
        onClick={() => sendTransaction({
          to: "0x70997970C51812dc3A010C7d01b50e0d17dc79C8",
          data: "0x",
          value: parseEther("0.01")
        })}
        disabled={isPending}
      >
        {isPending ? "Executing..." : "Execute Transaction"}
      </button>
      {hash && <p>Transaction: {hash}</p>}
    </div>
  );
}

Execute Contract Functions

import { useWriteContract, useReadContract } from "@getpara/react-sdk/wagmi";

const CONTRACT_ABI = [
  {
    name: "setGreeting",
    type: "function",
    stateMutability: "nonpayable",
    inputs: [{ name: "_greeting", type: "string" }],
    outputs: []
  },
  {
    name: "greet",
    type: "function",
    stateMutability: "view",
    inputs: [],
    outputs: [{ type: "string" }]
  }
] as const;

function ContractInteraction({
  contractAddress
}: {
  contractAddress: `0x${string}`
}) {
  const { data: hash, isPending, writeContract } = useWriteContract();

  const { data: greeting } = useReadContract({
    address: contractAddress,
    abi: CONTRACT_ABI,
    functionName: "greet"
  });

  return (
    <div>
      <p>Current greeting: {greeting}</p>
      <button
        onClick={() => writeContract({
          address: contractAddress,
          abi: CONTRACT_ABI,
          functionName: "setGreeting",
          args: ["Hello from Para!"]
        })}
        disabled={isPending}
      >
        {isPending ? "Updating..." : "Update Greeting"}
      </button>
      {hash && <p>Transaction: {hash}</p>}
    </div>
  );
}

​Prerequisites

​Execute Raw Transactions

​Execute Contract Functions

​Execute Raw Transactions

​Execute Contract Functions

​Execute Raw Transactions

​Execute Contract Functions

​Next Steps

Prerequisites

Execute Raw Transactions

Execute Contract Functions

Execute Raw Transactions

Execute Contract Functions

Execute Raw Transactions

Execute Contract Functions

Next Steps