Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.getpara.com/llms.txt

Use this file to discover all available pages before exploring further.

Migrate your existing Reown (WalletConnect) application to Para’s unified wallet system. Para simplifies wallet management by providing a single ParaProvider component that handles both embedded and external wallets while maintaining full Wagmi compatibility.

​
Installation

Update your dependencies to replace Reown packages with Para SDK:
Terminal
npm uninstall @reown/appkit @reown/appkit-adapter-wagmi
npm install @getpara/react-sdk --save-exact
For a full list of dependencies, refer to the Quick Start Guide.

​
Setup

​
Configure Constants

Create a constants file for your Para configuration:
src/config/constants.ts
import { Environment } from "@getpara/react-sdk";

export const API_KEY = process.env.NEXT_PUBLIC_PARA_API_KEY ?? ""; // Grab your API key from developer.getpara.com
export const ENVIRONMENT = 
  (process.env.NEXT_PUBLIC_PARA_ENVIRONMENT as Environment) || Environment.BETA;

if (!API_KEY) {
  throw new Error("Missing NEXT_PUBLIC_PARA_API_KEY environment variable");
}

​
Create Providers

Set up the Para provider to replace Reown’s WagmiProvider:
src/context/ParaProvider.tsx
"use client";

import { ParaProvider as Provider } from "@getpara/react-sdk";
import { API_KEY, ENVIRONMENT } from "@/config/constants";
import { mainnet, polygon, sepolia } from "wagmi/chains";
import { cookieStorage, createStorage } from "wagmi";

export function ParaProvider({ children }: { children: React.ReactNode }) {
  return (
    <Provider
      paraClientConfig={{
        apiKey: API_KEY,
        env: ENVIRONMENT,
      }}
      externalWalletConfig={{
        wallets: ["METAMASK", "COINBASE", "WALLETCONNECT", "RAINBOW"],
        evmConnector: {
          config: { // evmConnector.config is the Wagmi config. You can pass in the same wagmi config you would pass to WagmiConfig
            chains: [mainnet, polygon, sepolia],
            storage: createStorage({
              storage: cookieStorage,
            }),
          },
        },
        walletConnect: {
          projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || "",
        },
      }}
      config={{ appName: "Your App Name" }}
      paraModalConfig={{
        authLayout: ["AUTH:FULL", "EXTERNAL:FULL"],
      }}
    >
      {children}
    </Provider>
  );
}

​
Update Root Layout

Replace your Reown context provider with the ParaProvider:
src/app/layout.tsx
import type { Metadata } from "next";
import "@getpara/react-sdk/styles.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ParaProvider } from "@/context/ParaProvider";

const queryClient = new QueryClient();

export const metadata: Metadata = {
  title: "Your App",
  description: "Powered by Para",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <QueryClientProvider client={queryClient}>
          <ParaProvider>
            {children}
          </ParaProvider>
        </QueryClientProvider>
      </body>
    </html>
  );
}

​
Usage

​
Connect Button

Replace Reown’s <appkit-button /> with Para’s modal hooks:
src/components/ConnectButton.tsx
"use client";

import { useAccount, useModal, useWallet } from "@getpara/react-sdk";

export function ConnectButton() {
  const { openModal } = useModal();
  const { data: wallet } = useWallet();
  const { isConnected } = useAccount();

  if (isConnected && wallet?.address) {
    return (
      <button onClick={() => openModal()} className="connect-button">
        {wallet.address.slice(0, 6)}...{wallet.address.slice(-4)}
      </button>
    );
  }

  return (
    <button onClick={() => openModal()} className="connect-button">
      Connect Wallet
    </button>
  );
}

​
Using Wagmi Hooks

ParaProvider maintains full Wagmi compatibility. Your existing Wagmi code continues to work within the Para context.
src/components/Balance.tsx
import { useAccount, useBalance } from "wagmi";

export function Balance() {
  const { address } = useAccount();
  const { data } = useBalance({ address });

  if (!data) return null;

  return (
    <div>
      Balance: {data.formatted} {data.symbol}
    </div>
  );
}

​
Migration Checklist

  • Remove @reown/appkit packages
  • Install @getpara/react-sdk
  • Keep Wagmi and Viem packages
  • Run postinstall script
  • Set environment variables
  • Update Next.js config (remove Webpack externals)
  • Import Para styles
  • Configure chain list
  • Replace <appkit-button /> with custom component
  • Update provider hierarchy
  • Test wallet connections
  • Verify transaction flows
  • Connect external wallets
  • Test embedded login (email/social)
  • Verify chain switching
  • Check transaction signing

​
Next Steps

Hook Reference

Explore Para’s React hooks for wallet interactions

Customization

Customize the Para modal appearance and behavior

External Wallets

Configure additional external wallet support

Sessions

Learn about Para’s session management