Setup Web3 Libraries

Learn how to set up popular Web3 libraries with Para. Choose from , , or to build your EVM application.

Prerequisites

Before setting up Web3 libraries, you need an authenticated Para session.

Setup Para Instance

Installation

If using viem and the @getpara/react-sdk you can use our hook or hook to access the Viem client and account without any additional setup.

Ethers.js
Viem
Wagmi

npm install @getpara/ethers-v6-integration ethers@^6 --save-exact

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

Library Setup and Configuration

Configure your chosen Web3 library. You can use either a hook-based approach for React applications or a direct client setup for non-React environments or if you want to access the client outside of the ParaProvider context.

Hook-based (React)
Direct Client (Non-React)

Ethers.js
Viem
Wagmi

useEthers.ts

import { useClient, useAccount } from "@getpara/react-sdk";
import { ParaEthersSigner } from "@getpara/ethers-v6-integration";
import { ethers } from "ethers";
import { useMemo } from "react";

export function useEthers(rpcUrl: string = "https://ethereum-sepolia-rpc.publicnode.com") {
  const para = useClient();
  const { isConnected, embedded } = useAccount();
  
  const clients = useMemo(() => {
    // Create a provider connected to your RPC endpoint
    const provider = new ethers.JsonRpcProvider(rpcUrl);
    
    // Check if Para is initialized and user has wallets
    if (!para || !isConnected || !embedded.wallets?.length) {
      return { provider, signer: null };
    }
    
    // Filter for EVM-compatible wallets
    const evmWallets = embedded.wallets.filter(w => w.type === "EVM");
    if (evmWallets.length === 0) {
      return { provider, signer: null };
    }
    
    // Create Para-enabled signer for transaction signing
    const signer = new ParaEthersSigner(para, provider);
    return { provider, signer };
  }, [para, isConnected, embedded.wallets, rpcUrl]);
  
  return clients;
}

useViem.ts

import { useClient, useAccount } from "@getpara/react-sdk";
import { createParaViemClient, createParaAccount } from "@getpara/viem-v2-integration";
import { createPublicClient, http } from "viem";
import { sepolia } from "viem/chains";
import { useMemo } from "react";

export function useViem(chain = sepolia, rpcUrl: string = "https://ethereum-sepolia-rpc.publicnode.com") {
  const para = useClient();
  const { isConnected, embedded } = useAccount();
  
  const clients = useMemo(async () => {
    // Create a public client for reading blockchain data
    const publicClient = createPublicClient({
      chain,
      transport: http(rpcUrl)
    });
    
    // Check if Para is initialized and user has wallets
    if (!para || !isConnected || !embedded.wallets?.length) {
      return { publicClient, walletClient: null };
    }
    
    // Filter for EVM-compatible wallets
    const evmWallets = embedded.wallets.filter(w => w.type === "EVM");
    if (evmWallets.length === 0) {
      return { publicClient, walletClient: null };
    }
    
    // Create Para account and wallet client for transactions
    const account = await createParaAccount(para);
    const walletClient = createParaViemClient(para, {
      account,
      chain,
      transport: http(rpcUrl)
    });
    
    return { publicClient, walletClient };
  }, [para, isConnected, embedded.wallets, chain, rpcUrl]);
  
  return clients;
}

ParaProvider already includes Wagmi. You can use Wagmi hooks directly after setting up ParaProvider:

example-usage.tsx

import { useAccount, useBalance, useSendTransaction } from "wagmi";

function MyComponent() {
  const { address, isConnected } = useAccount();
  const { data: balance } = useBalance({ address });
  const { sendTransaction } = useSendTransaction();

  // Use any Wagmi hook - ParaProvider handles the configuration
  if (isConnected) {
    return (
      <div>
        <p>Address: {address}</p>
        <p>Balance: {balance?.formatted}</p>
      </div>
    );
  }
}

For advanced users integrating Para with existing Wagmi setups that manage external wallets, see the .

Ethers.js
Viem

ethers-setup.ts

import { ParaEthersSigner } from "@getpara/ethers-v6-integration";
import { ethers } from "ethers";
import Para from "@getpara/web-sdk";

const PARA_API_KEY = "YOUR_PARA_API_KEY"; // Replace with your API key

export async function setupEthers(rpcUrl: string = "https://ethereum-sepolia-rpc.publicnode.com") {
  // Initialize Para SDK with your API key
  const para = new Para(PARA_API_KEY);
  const provider = new ethers.JsonRpcProvider(rpcUrl);
  
  // Verify user has an active session
  const isAuthenticated = await para.isSessionActive();
  if (!isAuthenticated) {
    throw new Error("Para session not authenticated");
  }
  
  // Get user's EVM wallets
  const wallets = await para.getWalletsByType({ type: "EVM" });
  if (wallets.length === 0) {
    throw new Error("No EVM wallets available");
  }
  
  // Create Para-enabled signer for transactions
  const signer = new ParaEthersSigner(para, provider);
  
  return { provider, signer, para };
}

viem-setup.ts

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

const PARA_API_KEY = "YOUR_PARA_API_KEY"; // Replace with your API key

export async function setupViem(chain = sepolia, rpcUrl: string = "https://ethereum-sepolia-rpc.publicnode.com") {
  // Initialize Para SDK with your API key
  const para = new Para(PARA_API_KEY);
  
  // Create public client for reading blockchain data
  const publicClient = createPublicClient({
    chain,
    transport: http(rpcUrl)
  });
  
  // Verify user has an active session
  const isAuthenticated = await para.isSessionActive();
  if (!isAuthenticated) {
    throw new Error("Para session not authenticated");
  }
  
  // Get user's EVM wallets
  const wallets = await para.getWalletsByType({ type: "EVM" });
  if (wallets.length === 0) {
    throw new Error("No EVM wallets available");
  }
  
  // Create Para account and wallet client for transactions
  const account = await createParaAccount(para);
  const walletClient = createParaViemClient(para, {
    account,
    chain,
    transport: http(rpcUrl)
  });
  
  return { publicClient, walletClient, para };
}

Next Steps

Now that you have Web3 libraries configured with Para, explore common operations.

Start Your Integration

Set Up Your Framework

Sign Transactions & Messages

Configure Wallets

Manage Sessions

Customize Your Integration

Build with Hooks

Troubleshooting

Setup Web3 Libraries

Prerequisites

Setup Para Instance

Installation

Wagmi Connector Guide

Library Setup and Configuration

Next Steps

Configure RPC

Send Tokens

Sign Messages

Start Your Integration

Set Up Your Framework

Sign Transactions & Messages

Configure Wallets

Manage Sessions

Customize Your Integration

Build with Hooks

Troubleshooting

​Prerequisites

Setup Para Instance

​Installation

Wagmi Connector Guide

​Library Setup and Configuration

​Next Steps

Configure RPC

Send Tokens

Sign Messages

Prerequisites

Installation

Library Setup and Configuration

Next Steps