Skip to main content
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:
  • Wagmi v2
  • Wagmi v1
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.
  • Wagmi v2
  • Wagmi v1
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>
  );
}

​
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

  • Wagmi v2
  • Wagmi v1
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>
  );
}

​
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

Custom Wagmi Wallet Connector Example

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

​
Troubleshooting

If you encounter problems connecting with Para through Wagmi:
  1. Verify that your Para client is properly initialized and authenticated
  2. Check if you’ve properly configured the Para connector with the correct chains
  3. Ensure the connector is correctly passed to the Wagmi configuration
  4. Check browser console for specific errors
If Wagmi hooks aren’t working as expected:
  1. Verify that your component is wrapped with the proper Wagmi providers
  2. For Next.js, ensure you’ve added the 'use client' directive at the top of your component file
  3. Confirm that you’re using the correct version of hooks matching your Wagmi version
  4. Check for any conditional rendering that might be causing hooks to be skipped
If transactions fail:
  1. Check if the user has sufficient funds for the transaction
  2. Verify that the transaction parameters (gas limits, etc.) are correctly set
  3. Check if the connected chain matches the expected network for your dApp
  4. Look for RPC connection issues in the browser console

​
Next Steps

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

Permissions Popups

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

Go Live Checklist

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