Wagmi Integration

Wagmi is a collection of React Hooks 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 Wagmi integration along with Wagmi:

npm install @getpara/wagmi-v2-integration @tanstack/react-query wagmi@^2 viem

Setup

Using Para with Wagmi is similar to using any other wallet provider, create a connector and pass it to Wagmi’s configuration.

Wagmi is best used when creating a custom wallet connector UI. If not using a custom UI, consider using the ParaModal instead.

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { paraConnector } from "@getpara/wagmi-v2-integration";
import { OAuthMethod } from "@getpara/web-sdk";
import { createConfig, http } from "wagmi";
import { sepolia } from "wagmi/chains";
import Para, { Environment } from "@getpara/web-sdk";

const para = new Para(Environment.BETA, YOUR_API_KEY);

const connector = paraConnector({
  para,
  chains: [sepolia],
  appName: "Your dApp Name",
  options: {},
});

// Configure Wagmi
export const config = createConfig({
  chains: [sepolia],
  connectors: [connector],
  transports: {
    [sepolia.id]: http(),
  },
});

export const queryClient = new QueryClient();

Then set up your providers in your main app component by wrapping your app with WagmiProvider and QueryClientProvider:

import { WagmiProvider } from "wagmi";
import { QueryClientProvider } from "@tanstack/react-query";
import { config, queryClient } from "./wagmi"; // Path to your config file

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {/* Your app components */}
      </QueryClientProvider>
    </WagmiProvider>
  );
}

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { paraConnector } from "@getpara/wagmi-v2-integration";
import { OAuthMethod } from "@getpara/web-sdk";
import { createConfig, http } from "wagmi";
import { sepolia } from "wagmi/chains";
import Para, { Environment } from "@getpara/web-sdk";

const para = new Para(Environment.BETA, YOUR_API_KEY);

const connector = paraConnector({
  para,
  chains: [sepolia],
  appName: "Your dApp Name",
  options: {},
});

// Configure Wagmi
export const config = createConfig({
  chains: [sepolia],
  connectors: [connector],
  transports: {
    [sepolia.id]: http(),
  },
});

export const queryClient = new QueryClient();

Then set up your providers in your main app component by wrapping your app with WagmiProvider and QueryClientProvider:

import { WagmiProvider } from "wagmi";
import { QueryClientProvider } from "@tanstack/react-query";
import { config, queryClient } from "./wagmi"; // Path to your config file

function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {/* Your app components */}
      </QueryClientProvider>
    </WagmiProvider>
  );
}

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

import { paraConnector } from "@getpara/wagmi-v1-integration";
import { OAuthMethod } from "@getpara/web-sdk";
import { configureChains, createClient } from "wagmi";
import { mainnet, sepolia } from "wagmi/chains";
import { publicProvider } from "wagmi/providers/public";
import Para, { Environment } from "@getpara/web-sdk";

const para = new Para(Environment.BETA, YOUR_API_KEY);

// Configure chains and providers
const { chains, provider } = configureChains(
  [mainnet, sepolia],
  [publicProvider()]
);

// Create Wagmi client
export const client = createClient({
  autoConnect: true,
  connectors: [
    paraConnector({
      para,
      chains,
      options: {},
      appName: "Your dApp Name",
    }),
  ],
  provider,
});

export { chains };

Then set up your provider in your main app component:

import { WagmiConfig } from "wagmi";
import { client } from "./wagmi-config";

function App() {
  return (
    <WagmiConfig client={client}>
      {/* Your app components */}
    </WagmiConfig>
  );
}

Advanced Configuration

Para’s Wagmi connector supports additional configuration options to customize the user experience:

const connector = paraConnector({
  para,
  chains: [sepolia],
  appName: "Your dApp Name",
  options: {
    // Custom options for your connector
  },
  nameOverride: "Para", // Custom name displayed in UI
  idOverride: "para", // Custom ID for the connector
  oAuthMethods: [
    OAuthMethod.GOOGLE,
    OAuthMethod.TWITTER,
    OAuthMethod.DISCORD,
    // Add or remove methods as needed
  ],
  disableEmailLogin: false, // Set to true to disable email login
  disablePhoneLogin: false, // Set to true to disable phone login
  onRampTestMode: true, // Enable test mode for on-ramps if applicable
  customTheme: {
    // Custom theme options
    accentColor: "#5F4DFF",
    backgroundColor: "#FFFFFF",
  },
});

Usage Examples

Once you’ve set up the Para Wagmi integration, you can use Wagmi’s hooks to interact with EVM chains. Example for connecting to a wallet:

Connecting a Wallet

import { useAccount, useConnect, useDisconnect } from "wagmi";

function ConnectButton() {
  const { connect, connectors } = useConnect();
  const { address, isConnected } = useAccount();
  const { disconnect } = useDisconnect();

  if (isConnected) {
    return (
      <div>
        <p>Connected as {address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      {connectors
        .filter((connector) => connector.id === "para")
        .map((connector) => (
          <button
            key={connector.id}
            onClick={() => connect({ connector })}>
            Connect with {connector.name}
          </button>
        ))}
    </div>
  );
}

import { useAccount, useConnect, useDisconnect } from "wagmi";

function ConnectButton() {
  const { connect, connectors } = useConnect();
  const { address, isConnected } = useAccount();
  const { disconnect } = useDisconnect();

  if (isConnected) {
    return (
      <div>
        <p>Connected as {address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      {connectors
        .filter((connector) => connector.id === "para")
        .map((connector) => (
          <button
            key={connector.id}
            onClick={() => connect({ connector })}>
            Connect with {connector.name}
          </button>
        ))}
    </div>
  );
}

import { useAccount, useConnect, useDisconnect } from "wagmi";

function ConnectButton() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();

  if (isConnected) {
    return (
      <div>
        <p>Connected as {address}</p>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      {connectors
        .filter((connector) => connector.id === "para")
        .map((connector) => (
          <button
            key={connector.id}
            onClick={() => connect({ connector })}>
            Connect with {connector.name}
          </button>
        ))}
    </div>
  );
}

Examples

If you’d like to learn more about how to use Wagmi with Para, check out this example that creates a custom wallet connector UI with Para as a wallet option:

Custom Wagmi Wallet Connector Example

A simple example of using Para's RainbowKit wallet connector as a wallet option in Rainbowkit ConnectModal

Troubleshooting

Connection Issues

Hooks Not Working

Transaction Errors

Next Steps

With your Para and Wagmi integration complete, check out these other guides to further enhance your dApp:

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

Wagmi Integration

Prerequisites

Installation

Setup

Advanced Configuration

Usage Examples

Connecting a Wallet

Examples

Custom Wagmi Wallet Connector Example

Troubleshooting

Next Steps

Permissions Popups

Go Live Checklist

Introduction

Setup

Guides

API & Troubleshooting

​Prerequisites

​Installation

​Setup

​Advanced Configuration

​Usage Examples

​Connecting a Wallet

​Examples

Custom Wagmi Wallet Connector Example

​Troubleshooting

​Next Steps

Permissions Popups

Go Live Checklist

Prerequisites

Installation

Setup

Advanced Configuration

Usage Examples

Connecting a Wallet

Examples

Troubleshooting

Next Steps