Reown AppKit is a powerful framework for building Web3 modal experiences. Since AppKit is powered by Wagmi, integrating Para follows a similar pattern to the Wagmi integration with additional AppKit-specific configuration.

​
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

Install the Para Wagmi integration along with Reown AppKit and its dependencies:

npm install @getpara/wagmi-v2-integration@alpha @reown/appkit @reown/appkit-adapter-wagmi @tanstack/react-query wagmi viem

​
Setup

Setting up Para with Reown AppKit involves creating a Para connector and configuring it as a custom connector in AppKit’s Wagmi adapter.

​
1. Initialize Para Client

First, create and configure your Para client:

import Para, { Environment } from "@getpara/web-sdk";

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

​
2. Create Para Connector

Create the Para connector using the Wagmi v2 integration:

import { paraConnector } from "@getpara/wagmi-v2-integration";
import { OAuthMethod } from "@getpara/web-sdk";
import { mainnet, sepolia } from "viem/chains";

const connector = paraConnector({
  para,
  chains: [mainnet, sepolia],
  appName: "Your dApp Name",
  options: {},
  oAuthMethods: [
    OAuthMethod.GOOGLE,
    OAuthMethod.TWITTER,
    OAuthMethod.DISCORD,
    // Add other OAuth methods as needed
  ],
});

​
3. Configure Reown AppKit

Create the AppKit configuration with the Para connector:

import { createAppKit } from "@reown/appkit";
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { QueryClient } from "@tanstack/react-query";

// Create a query client
const queryClient = new QueryClient();

// Get your project ID from https://cloud.reown.com
const projectId = "YOUR_REOWN_PROJECT_ID";

// Set up metadata for your app
const metadata = {
  name: "Your dApp Name",
  description: "Your dApp Description",
  url: "https://yourdapp.com",
  icons: ["https://yourdapp.com/icon.png"],
};

// Create custom connectors array with Para connector
const connectors = [connector];

// Create Wagmi adapter with custom connectors
const wagmiAdapter = new WagmiAdapter({
  networks: [mainnet, sepolia],
  projectId,
  connectors,
});

// Create AppKit instance
const appKit = createAppKit({
  adapters: [wagmiAdapter],
  networks: [mainnet, sepolia],
  projectId,
  metadata,
  features: {
    analytics: true,
    email: true,
    socials: ["google", "x", "github", "discord"],
  },
});

​
4. Set Up Providers

Wrap your application with the necessary providers:

import { WagmiProvider } from "wagmi";
import { QueryClientProvider } from "@tanstack/react-query";

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

​
Advanced Configuration

Customize the Para connector with additional options to enhance the user experience:

const connector = paraConnector({
  para,
  chains: [mainnet, sepolia],
  appName: "Your dApp Name",
  logo: "/path/to/logo.svg",
  oAuthMethods: [
    OAuthMethod.GOOGLE,
    OAuthMethod.APPLE,
    OAuthMethod.DISCORD,
    OAuthMethod.TWITTER,
    OAuthMethod.FACEBOOK,
    OAuthMethod.FARCASTER,
  ],
  theme: {
    foregroundColor: "#2D3648",
    backgroundColor: "#FFFFFF",
    accentColor: "#0066CC",
    darkForegroundColor: "#E8EBF2",
    darkBackgroundColor: "#1A1F2B",
    darkAccentColor: "#4D9FFF",
    mode: "light",
    borderRadius: "md",
    font: "Inter",
  },
  onRampTestMode: true,
  disableEmailLogin: false,
  disablePhoneLogin: false,
  recoverySecretStepEnabled: true,
});

​
Usage

Once configured, use Reown AppKit’s components to enable wallet connection in your app:

​
Using the Connect Button

import { useAppKit } from "@reown/appkit/react";

function ConnectButton() {
  const { open } = useAppKit();

  return (
    <button onClick={() => open()}>
      Connect Wallet
    </button>
  );
}

​
Using Pre-built Components

AppKit provides pre-built components for common Web3 UI patterns:

import { 
  AppKitButton,
  AppKitNetwork,
  AppKitNetworkButton 
} from "@reown/appkit/react";

function Header() {
  return (
    <div>
      <AppKitButton />
      <AppKitNetwork />
      <AppKitNetworkButton />
    </div>
  );
}

​
Accessing Account Information

Use Wagmi hooks to access connected account information:

import { useAccount, useBalance } from "wagmi";

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

  if (!isConnected) {
    return <p>Not connected</p>;
  }

  return (
    <div>
      <p>Address: {address}</p>
      <p>Balance: {balance?.formatted} {balance?.symbol}</p>
    </div>
  );
}

​
Examples

Explore a complete implementation of Para with Reown AppKit:

Reown AppKit with Para Example

A complete example showing how to integrate Para as a custom connector in Reown AppKit

​
Troubleshooting

​
Next Steps

Now that you have Para integrated with Reown AppKit, explore these additional resources:

Wagmi Integration

Learn more about Para's Wagmi integration for custom implementations

Permissions & Security

Understand Para's permission system and security features