Viem Integration

Viem is a TypeScript interface for Ethereum. This guide shows how to integrate Para’s secure signing with both v2 (recommended) and v1 versions.

Prerequisites

To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration. Before integrating Para with your application, ensure you have:

Completed Para authentication setup in your application (see one of our Setup Guides)
A valid Para API key
An RPC endpoint for your desired network

Need an API key? Visit the Developer Portal to create API keys, manage billing, teams, and more.

Installation

Choose your package manager to install the Para Viem integration along with Viem:

npm install @getpara/viem-v2-integration viem@^2

Basic Setup

import { createParaViemClient, createParaAccount } from "@getpara/viem-v2-integration";
import { http, parseEther } from "viem";
import { sepolia } from "viem/chains";
import Para, { Environment } from "@getpara/web-sdk";

// Initialize Para (ensure authentication is completed before signing)
const para = new Para(Environment.BETA, YOUR_API_KEY);

// Create a Para Account
const account = await createParaAccount(para);

// Create the Para Viem WalletClient
const walletClient = createParaViemClient(para, {
  account: account,
  chain: sepolia,
  transport: http("https://ethereum-sepolia-rpc.publicnode.com"),
});

// Now you can use the client with Viem's API

import { createParaViemClient, createParaAccount } from "@getpara/viem-v2-integration";
import { http, parseEther } from "viem";
import { sepolia } from "viem/chains";
import Para, { Environment } from "@getpara/web-sdk";

// Initialize Para (ensure authentication is completed before signing)
const para = new Para(Environment.BETA, YOUR_API_KEY);

// Create a Para Account
const account = await createParaAccount(para);

// Create the Para Viem WalletClient
const walletClient = createParaViemClient(para, {
  account: account,
  chain: sepolia,
  transport: http("https://ethereum-sepolia-rpc.publicnode.com"),
});

// Now you can use the client with Viem's API

If you’re currently using Viem v1, we recommend migrating to v2 for improved features and ongoing support.

import { createParaViemClient, createParaAccount } from "@getpara/viem-v1-integration";
import { http, parseEther } from "viem";
import { sepolia } from "viem/chains";
import Para, { Environment } from "@getpara/web-sdk";

// Initialize Para (ensure authentication is completed before signing)
const para = new Para(Environment.BETA, YOUR_API_KEY);

// Create a Para Account
const viemParaAccount = await createParaAccount(para);

// Create the Para Viem Client
const paraClient = createParaViemClient(para, {
  account: viemParaAccount,
  chain: sepolia,
  transport: http("https://ethereum-sepolia-rpc.publicnode.com"),
});

// Now you can use the client with Viem's API

Usage Examples

Once you’ve set up the Para Viem integration, you can leverage Viem’s API with Para’s secure signing. Para handles the secure signing process without changing how you construct transactions.

Sending ETH

import { parseEther, parseGwei } from "viem";

// Prepare transaction parameters
const transaction = {
  account: viemParaAccount,
  to: "0x1234567890123456789012345678901234567890" as `0x${string}`,
  value: parseEther("0.01"),
  gas: 21000n, // Or use parseGwei("21000")
};

// Send the transaction
try {
  const hash = await paraClient.sendTransaction(transaction);
  console.log("Transaction hash:", hash);
  
  // Wait for confirmation
  const receipt = await paraClient.waitForTransactionReceipt({ hash });
  console.log("Transaction confirmed in block:", receipt.blockNumber);
} catch (error) {
  console.error("Error sending transaction:", error);
}

import { parseEther, parseGwei } from "viem";

// Prepare transaction parameters
const transaction = {
  account: viemParaAccount,
  to: "0x1234567890123456789012345678901234567890" as `0x${string}`,
  value: parseEther("0.01"),
  gas: 21000n, // Or use parseGwei("21000")
};

// Send the transaction
try {
  const hash = await paraClient.sendTransaction(transaction);
  console.log("Transaction hash:", hash);
  
  // Wait for confirmation
  const receipt = await paraClient.waitForTransactionReceipt({ hash });
  console.log("Transaction confirmed in block:", receipt.blockNumber);
} catch (error) {
  console.error("Error sending transaction:", error);
}

import { parseEther, parseGwei } from "viem";

// Prepare transaction parameters
const transaction = {
  account: viemParaAccount,
  to: "0x1234567890123456789012345678901234567890",
  value: parseEther("0.01"),
  gasLimit: parseGwei("21000"),
};

// Send the transaction
try {
  const hash = await paraClient.sendTransaction(transaction);
  console.log("Transaction hash:", hash);
  
  // Wait for confirmation
  const receipt = await paraClient.waitForTransactionReceipt({ hash });
  console.log("Transaction confirmed in block:", receipt.blockNumber);
} catch (error) {
  console.error("Error sending transaction:", error);
}

Interacting with Smart Contracts

import { parseUnits } from "viem";

// ERC-20 contract ABI (simplified for transfer)
const abi = [{
  name: "transfer",
  type: "function",
  stateMutability: "nonpayable",
  inputs: [
    { name: "recipient", type: "address" },
    { name: "amount", type: "uint256" }
  ],
  outputs: [{ type: "bool" }]
}];

// Create contract instance
const contract = {
  address: "0xTokenContractAddress" as `0x${string}`,
  abi
};

// Prepare the transaction
const { request } = await paraClient.simulateContract({
  ...contract,
  functionName: "transfer",
  args: [
    "0xRecipientAddress" as `0x${string}`,
    parseUnits("10", 18) // Adjust decimals based on your token
  ],
  account: viemParaAccount
});

// Send the transaction
const hash = await paraClient.writeContract(request);
console.log("Transaction hash:", hash);

import { parseUnits } from "viem";

// ERC-20 contract ABI (simplified for transfer)
const abi = [{
  name: "transfer",
  type: "function",
  stateMutability: "nonpayable",
  inputs: [
    { name: "recipient", type: "address" },
    { name: "amount", type: "uint256" }
  ],
  outputs: [{ type: "bool" }]
}];

// Create contract instance
const contract = {
  address: "0xTokenContractAddress" as `0x${string}`,
  abi
};

// Prepare the transaction
const { request } = await paraClient.simulateContract({
  ...contract,
  functionName: "transfer",
  args: [
    "0xRecipientAddress" as `0x${string}`,
    parseUnits("10", 18) // Adjust decimals based on your token
  ],
  account: viemParaAccount
});

// Send the transaction
const hash = await paraClient.writeContract(request);
console.log("Transaction hash:", hash);

import { parseUnits } from "viem";

// ERC-20 contract ABI (simplified for transfer)
const abi = [{
  name: "transfer",
  type: "function",
  stateMutability: "nonpayable",
  inputs: [
    { name: "recipient", type: "address" },
    { name: "amount", type: "uint256" }
  ],
  outputs: [{ type: "bool" }]
}];

// Create contract instance
const contract = {
  address: "0xTokenContractAddress",
  abi
};

// Prepare the transaction
const { request } = await paraClient.simulateContract({
  ...contract,
  functionName: "transfer",
  args: [
    "0xRecipientAddress",
    parseUnits("10", 18) // Adjust decimals based on your token
  ],
  account: viemParaAccount
});

// Send the transaction
const hash = await paraClient.writeContract(request);
console.log("Transaction hash:", hash);

Raw Transaction Signing

In some cases, you might want to sign a transaction without sending it immediately:

// Prepare transaction parameters
const transaction = {
  account: viemParaAccount,
  to: "0x1234567890123456789012345678901234567890" as `0x${string}`,
  value: parseEther("0.01"),
  gas: 21000n,
};

// Sign the transaction (returns the signed transaction bytes)
try {
  const signedTx = await paraClient.signTransaction(transaction);
  console.log("Signed transaction:", signedTx);
  
  // You can later broadcast this signed transaction
  const hash = await paraClient.broadcastTransaction({
    serializedTransaction: signedTx
  });
  console.log("Transaction hash:", hash);
} catch (error) {
  console.error("Error signing transaction:", error);
}

// Prepare transaction parameters
const transaction = {
  account: viemParaAccount,
  to: "0x1234567890123456789012345678901234567890" as `0x${string}`,
  value: parseEther("0.01"),
  gas: 21000n,
};

// Sign the transaction (returns the signed transaction bytes)
try {
  const signedTx = await paraClient.signTransaction(transaction);
  console.log("Signed transaction:", signedTx);
  
  // You can later broadcast this signed transaction
  const hash = await paraClient.broadcastTransaction({
    serializedTransaction: signedTx
  });
  console.log("Transaction hash:", hash);
} catch (error) {
  console.error("Error signing transaction:", error);
}

// Prepare transaction parameters
const transaction = {
  account: viemParaAccount,
  to: "0x1234567890123456789012345678901234567890",
  value: parseEther("0.01"),
  gasLimit: parseGwei("21000"),
};

// Sign the transaction (returns the signed transaction bytes)
try {
  const signedTx = await paraClient.signTransaction(transaction);
  console.log("Signed transaction:", signedTx);
  
  // You can later broadcast this signed transaction
  const hash = await paraClient.sendRawTransaction({
    serializedTransaction: signedTx
  });
  console.log("Transaction hash:", hash);
} catch (error) {
  console.error("Error signing transaction:", error);
}

Para Viem Client Methods

The Para Viem client provides methods that allow you to leverage Para’s secure signing capabilities:

createParaAccount(para)

function

signMessage(message)

function

signTransaction(transaction)

function

signTypedData(parameters)

function

Signs EIP-712 typed data with Para.

const signature = await paraClient.signTypedData({
  account: viemParaAccount,
  domain,
  types,
  primaryType: 'Mail',
  message
});
console.log("Typed Data Signature:", signature);

Para handles only the signing process. It does not modify your transaction in any way. All transaction construction, including gas estimations and parameter settings, is your responsibility through the Viem API.

Important Considerations

When working with the Para Viem integration, keep in mind:

Authentication requirement: The Para client must have an authenticated account before attempting any signing operations.
Wallet availability: Ensure Para has wallets available for the EVM wallet type. If you encounter errors about missing wallets, check your developer portal settings to confirm your API key is configured for EVM wallet types.
Transaction construction: Para only signs the raw bytes of the transaction you provide. Any issues related to transaction parameters (gas price, gas limit, etc.) or RPC interactions are not related to Para’s signing functionality.
Viem version compatibility: Ensure you’re using the correct Para integration package that matches your Viem version (v1 or v2).

Server-Side Signing

Para’s signers can also be used on the server-side using pregen wallets or an active client side session. To learn more about using para on the server, check out these guides:

Para Server SDK Setup

Setup the Para Server SDK to use Para's signers on the server-side.

Examples

If you’d like to learn more about how to use the Para Viem WalletClient for different transaction types, check out this example in our Examples Hub:

Para Viem Examples

This signer-ethers example shows how to use the Para Viem WalletClient to send transactions, sign messages, and interact with smart contracts.

Troubleshooting

Transaction Fails with RPC Error

No Wallets Available

TypeScript Type Errors

Viem v2 has stricter type requirements than v1, particularly around address formatting. Ensure you’re using the correct type annotations:

// Convert string addresses to the correct Viem type
const address = "0x1234..." as `0x${string}`;

// For v2, use BigInt values for gas limits
const gas = 21000n; // or parseGwei("21000")

Next Steps

Now that you’ve completed integrating Para with Viem, explore more advanced features and use cases.

Permissions Popups

Learn about Para's permissions popups and how to use them in your application

Go Live Checklist

A checklist to ensure your project is ready for launch with Para

Introduction

Setup

Guides

API & Troubleshooting

Viem Integration

Prerequisites

Installation

Basic Setup

Usage Examples

Sending ETH

Interacting with Smart Contracts

Raw Transaction Signing

Para Viem Client Methods

Important Considerations

Server-Side Signing

Para Server SDK Setup

Examples

Para Viem Examples

Troubleshooting

Next Steps

Permissions Popups

Go Live Checklist

Introduction

Setup

Guides

API & Troubleshooting

​Prerequisites

​Installation

​Basic Setup

​Usage Examples

​Sending ETH

​Interacting with Smart Contracts

​Raw Transaction Signing

​Para Viem Client Methods

​Important Considerations

​Server-Side Signing

Para Server SDK Setup

​Examples

Para Viem Examples

​Troubleshooting

​Next Steps

Permissions Popups

Go Live Checklist

Prerequisites

Installation

Basic Setup

Usage Examples

Sending ETH

Interacting with Smart Contracts

Raw Transaction Signing

Para Viem Client Methods

Important Considerations

Server-Side Signing

Examples

Troubleshooting

Next Steps