Wagmi Connector Integration

Build custom wallet connection interfaces using Para as a connector. This guide shows how to integrate Para alongside other wallet options in your own UI.

Para’s ParaModal is built with Wagmi under the hood. We recommend using ParaModal directly for a complete authentication experience. Use this guide only if you need a custom wallet selection UI while still including Para for social login.

Prerequisites

Before building a custom Wagmi connector, ensure you have Para configured in your application.

Installation

Install the Para Wagmi integration:

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

yarn add @getpara/wagmi-v2-integration @tanstack/react-query wagmi@^2 viem --exact

pnpm add @getpara/wagmi-v2-integration @tanstack/react-query wagmi@^2 viem --save-exact

bun add @getpara/wagmi-v2-integration @tanstack/react-query wagmi@^2 viem --exact

Basic Setup

Create a Wagmi config with Para as a connector option:

wagmi.config.ts

import { paraConnector } from "@getpara/wagmi-v2-integration";
import { createConfig, http } from "wagmi";
import { sepolia } from "wagmi/chains";
import Para from "@getpara/web-sdk";

// Initialize Para
const para = new Para("YOUR_PARA_API_KEY");

// Create Para connector
const connector = paraConnector({
  para,
  chains: [sepolia],
  appName: "Your App Name"
});

// Configure Wagmi
export const config = createConfig({
  chains: [sepolia],
  connectors: [connector], // Add other connectors as needed
  transports: {
    [sepolia.id]: http("https://ethereum-sepolia-rpc.publicnode.com")
  }
});

Provider Setup

Wrap your app with the necessary providers:

app.tsx

import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "./wagmi.config";

const queryClient = new QueryClient();

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

You can learn more about the WagmiProvider and its definition in the .

Using the Connector

Connect with Para using Wagmi hooks:

connect-button.tsx

import { useConnect } from "wagmi";

function ConnectWithPara() {
  const { connect, connectors } = useConnect();
  
  // Find Para connector
  const paraConnector = connectors.find(c => c.id === "para");
  
  return (
    <button onClick={() => connect({ connector: paraConnector })}>
      Connect with Para
    </button>
  );
}

Configuration Options

The Para connector supports these options:

const connector = paraConnector({
  para,                    // Your Para instance (required)
  chains,                  // Supported chains array (required)
  appName: "Your App",     // Display name (required)
  nameOverride: "Para",    // Connector name override
  idOverride: "para",      // Connector ID override
});

Next Steps

Export Private Key Connect with Reown AppKit

⌘I

​Prerequisites

​Installation

​Basic Setup

​Provider Setup

​Using the Connector

​Configuration Options

​Next Steps

Prerequisites

Installation

Basic Setup

Provider Setup

Using the Connector

Configuration Options

Next Steps