Migrating from Reown to Para

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

Dependencies

Remove @reown/appkit packages
Install @getpara/react-sdk
Keep Wagmi and Viem packages
Run postinstall script

Configuration

Set environment variables
Update Next.js config (remove Webpack externals)
Import Para styles
Configure chain list

Components

Replace <appkit-button /> with custom component
Update provider hierarchy
Test wallet connections
Verify transaction flows

Testing

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

Getting Started

Migrations

General Guides

How Para Works

Troubleshooting

Resources

Migrating from Reown to Para

Installation

Setup

Configure Constants

Create Providers

Update Root Layout

Usage

Connect Button

Using Wagmi Hooks

Migration Checklist

Next Steps

Hook Reference

Customization

External Wallets

Sessions

​Installation

​Setup

​Configure Constants

​Create Providers

​Update Root Layout

​Usage

​Connect Button

​Using Wagmi Hooks

​Migration Checklist

​Next Steps

Hook Reference

Customization

External Wallets

Sessions

Installation

Setup

Configure Constants

Create Providers

Update Root Layout

Usage

Connect Button

Using Wagmi Hooks

Migration Checklist

Next Steps