> ## 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.
# 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:
```bash Terminal theme={null}
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](/v2/react/quickstart).
## Setup
### Configure Constants
Create a constants file for your Para configuration:
```typescript src/config/constants.ts theme={null}
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:
```tsx src/context/ParaProvider.tsx theme={null}
"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 (
{children}
);
}
```
### Update Root Layout
Replace your Reown context provider with the ParaProvider:
```tsx src/app/layout.tsx theme={null}
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 (
{children}
);
}
```
## Usage
### Connect Button
Replace Reown's `` with Para's modal hooks:
```tsx src/components/ConnectButton.tsx theme={null}
"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 (
);
}
return (
);
}
```
### Using Wagmi Hooks
`ParaProvider` maintains full Wagmi compatibility. Your existing Wagmi code continues to work within the Para context.
```tsx src/components/Balance.tsx theme={null}
import { useAccount, useBalance } from "wagmi";
export function Balance() {
const { address } = useAccount();
const { data } = useBalance({ address });
if (!data) return null;
return (
Balance: {data.formatted} {data.symbol}
);
}
```
## 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 `` 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
Explore Para's React hooks for wallet interactions
Customize the Para modal appearance and behavior
Configure additional external wallet support
Learn about Para's session management