Prerequisites
You need Web3 libraries configured with Para authentication.Setup Web3 Libraries
- 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>
);
}