Prerequisites
Before setting up Web3 libraries, you need an authenticated Para session.- Ethers.js
- Viem
- Wagmi
Install
npm install @getpara/react-sdk ethers
@getpara/react-sdk bundles @getpara/ethers-v6-integration — no separate integration package install needed.Usage
- Hook (React)
- Direct (Non-React)
Use the hook to create an ethers signer for your user’s Para embedded wallet or external wallet. For convenience, the and hooks wrap common signer methods in a React Query mutation.
import { useParaEthersSigner, useParaEthersSignMessage } from "@getpara/react-sdk";
import { JsonRpcProvider } from "ethers";
const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");
function SignWithEthers() {
const { ethersSigner, isLoading } = useParaEthersSigner({ provider });
const { signMessageAsync, isPending } = useParaEthersSignMessage(ethersSigner);
const handleSign = async () => {
const signature = await signMessageAsync("Hello from Para!");
console.log("Signature:", signature);
};
if (isLoading) return <p>Loading...</p>;
return (
<button onClick={handleSign} disabled={isPending}>
{isPending ? "Signing..." : "Sign Message"}
</button>
);
}
Wallet Resolution
When noaddress or walletId is passed, the hook resolves the wallet in this order:- Selected wallet — if the user selected an EVM wallet in the UI. If there is only one EVM wallet in the session, it is already selected by default
- First EVM wallet — the first available EVM wallet on the account
address or walletId:const { ethersSigner } = useParaEthersSigner({
provider,
address: "0x1234...", // or walletId: "uuid-..."
});
Use
createParaEthersSigner to create a signer directly.import { createParaEthersSigner } from "@getpara/ethers-v6-integration";
import { ethers } from "ethers";
import Para from "@getpara/web-sdk";
const para = new Para("YOUR_API_KEY");
const provider = new ethers.JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");
// Authenticate first...
const signer = createParaEthersSigner({ para, provider });
const signature = await signer.signMessage("Hello from Para!");
Wallet Resolution
When noaddress or walletId is passed, the factory picks the first available EVM wallet.To target a specific wallet:const signer = createParaEthersSigner({
para,
provider,
address: "0x1234...", // looks up by address
// or walletId: "uuid-...", // looks up by ID
});
Install
npm install @getpara/react-sdk viem
@getpara/react-sdk bundles @getpara/viem-v2-integration — no separate integration package install needed.Usage
- Hook (React)
- Direct (Non-React)
Use the hook to create a viem
WalletClient for your user’s Para embedded wallet or external wallet. For convenience, the , , , and hooks wrap common client methods in a React Query mutation.import { useParaViemClient, useParaViemSignMessage } from "@getpara/react-sdk";
import { createPublicClient, http } from "viem";
import { sepolia } from "viem/chains";
const publicClient = createPublicClient({
chain: sepolia,
transport: http("https://ethereum-sepolia-rpc.publicnode.com"),
});
function SignWithViem() {
const { viemClient, isLoading } = useParaViemClient({
walletClientConfig: {
chain: sepolia,
transport: http("https://ethereum-sepolia-rpc.publicnode.com"),
},
});
const { signMessageAsync, isPending } = useParaViemSignMessage(viemClient);
const handleSign = async () => {
const signature = await signMessageAsync({ message: "Hello from Para!" });
console.log("Signature:", signature);
};
if (isLoading) return <p>Loading...</p>;
return (
<button onClick={handleSign} disabled={isPending}>
{isPending ? "Signing..." : "Sign Message"}
</button>
);
}
Wallet Resolution
When noaddress or walletId is passed, the hook resolves the wallet in this order:- Selected wallet — if the user selected an EVM wallet in the UI. If there is only one EVM wallet in the session, it is already selected by default
- First EVM wallet — the first available EVM wallet on the account
const { viemClient } = useParaViemClient({
address: "0x1234...", // or walletId: "uuid-..."
walletClientConfig: { chain: sepolia, transport: http() },
});
Use
createParaViemAccount and createParaViemClient to create a wallet client directly.import { createParaViemAccount, createParaViemClient } from "@getpara/viem-v2-integration";
import { createPublicClient, http } from "viem";
import { sepolia } from "viem/chains";
import Para from "@getpara/web-sdk";
const para = new Para("YOUR_API_KEY");
// Authenticate first...
const account = createParaViemAccount({ para });
const walletClient = createParaViemClient({ para, walletClientConfig: {
account,
chain: sepolia,
transport: http("https://ethereum-sepolia-rpc.publicnode.com"),
}});
const signature = await walletClient.signMessage({ message: "Hello from Para!" });
Wallet Resolution
When noaddress or walletId is passed, the factory picks the first available EVM wallet.To target a specific wallet:const account = createParaViemAccount({
para,
address: "0x1234...", // looks up by address
// or walletId: "uuid-...", // looks up by ID
});
Install
npm install @getpara/react-sdk
ParaProvider already includes Wagmi under the hood. No additional packages needed. If you’ve set up ParaProvider as shown in the , you can use Wagmi hooks directly.
Usage
import { useAccount, useBalance, useSendTransaction, useSignMessage } from "@getpara/react-sdk/wagmi";
function MyComponent() {
const { address, isConnected } = useAccount();
const { data: balance } = useBalance({ address });
const { signMessageAsync } = useSignMessage();
const { sendTransaction } = useSendTransaction();
if (!isConnected) return <p>Not connected</p>;
return (
<div>
<p>Address: {address}</p>
<p>Balance: {balance?.formatted}</p>
<button onClick={() => signMessageAsync({ message: "Hello" })}>
Sign Message
</button>
</div>
);
}
Wallet Resolution
Wagmi uses its own connector system. When using ParaProvider, the Para connector is the active connector and signing goes through Para’s MPC. External wallets connected via wagmi (e.g. MetaMask) use their own signing providers.For advanced users integrating Para with existing Wagmi setups that manage external wallets, see the .