Migrating from Reown to Para

Step-by-step guide for migrating your Reown (WalletConnect) application to Para SDK

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