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>
  );
}

​
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>
  );
}

​
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

​
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