> ## 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 Web3Modal to Para

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

Migrate your existing Web3Modal application to Para's unified wallet system. Since both Web3Modal and Para use Wagmi internally, the migration involves replacing the Web3Modal provider with Para's `ParaProvider` while maintaining your existing Wagmi configuration.

## Installation

Replace Web3Modal packages with Para SDK while keeping Wagmi:

```bash Terminal theme={null}
npm uninstall @web3modal/wagmi
npm install @getpara/react-sdk
npm run postinstall
```

<Note>
  For a full list of dependencies, refer to the [Quick Start Guide](/v2/react/quickstart).
</Note>

## Configuration Changes

### Before: Web3Modal Config

Your existing Web3Modal configuration likely looks like this:

```typescript config/index.ts theme={null}
import { cookieStorage, createStorage } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { http, createConfig } from 'wagmi';
import { walletConnect, injected, coinbaseWallet } from 'wagmi/connectors';

export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!projectId) throw new Error('Project ID is not defined');

const metadata = {
  name: 'Web3Modal Example',
  description: 'Web3Modal Example',
  url: 'https://web3modal.com',
  icons: ['https://avatars.githubusercontent.com/u/37784886'],
};

export const config = createConfig({
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  connectors: [
    walletConnect({ projectId, metadata, showQrModal: false }),
    injected({ shimDisconnect: true }),
    coinbaseWallet({
      appName: metadata.name,
      appLogoUrl: metadata.icons[0],
    }),
  ],
  ssr: true,
  storage: createStorage({
    storage: cookieStorage,
  }),
});
```

### After: Para Config

Transform your configuration for Para:

```typescript src/config/constants.ts theme={null}
import { Environment } from "@getpara/react-sdk";

export const API_KEY = process.env.NEXT_PUBLIC_PARA_API_KEY ?? "";
export const ENVIRONMENT = 
  (process.env.NEXT_PUBLIC_PARA_ENVIRONMENT as Environment) || Environment.BETA;
export const PROJECT_ID = process.env.NEXT_PUBLIC_PROJECT_ID ?? "";

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

## Provider Migration

### Before: Web3Modal Provider

Your existing Web3Modal provider:

```tsx context/Web3ModalProvider.tsx theme={null}
'use client';
import React, { ReactNode } from 'react';
import { config, projectId } from '@/config';
import { createWeb3Modal } from '@web3modal/wagmi/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { State, WagmiProvider } from 'wagmi';

const queryClient = new QueryClient();
createWeb3Modal({
  wagmiConfig: config,
  projectId,
  enableAnalytics: true,
});

export default function Web3ModalProvider({
  children,
  initialState,
}: {
  children: ReactNode;
  initialState?: State;
}) {
  return (
    <WagmiProvider config={config} initialState={initialState}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}
```

### After: Para Provider

Replace with Para's provider, passing your Wagmi config:

```tsx src/context/ParaProvider.tsx theme={null}
"use client";

import { ParaProvider as Provider } from "@getpara/react-sdk";
import { API_KEY, ENVIRONMENT, PROJECT_ID } from "@/config/constants";
import { mainnet } from "wagmi/chains";
import { cookieStorage, createStorage, http } 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: {
            chains: [mainnet],
            transports: {
              [mainnet.id]: http(),
            },
            ssr: true,
            storage: createStorage({
              storage: cookieStorage,
            }),
          },
        },
        walletConnect: {
          projectId: PROJECT_ID,
        },
      }}
      config={{
        appName: "Your App Name",
        description: "Your App Description",
      }}
      paraModalConfig={{
        authLayout: ["AUTH:FULL", "EXTERNAL:FULL"],
        theme: { mode: "light" },
      }}
    >
      {children}
    </Provider>
  );
}
```

## Layout Update

### Before: Web3Modal Layout

```tsx app/layout.tsx theme={null}
import './globals.css';
import type { Metadata } from 'next';
import { headers } from 'next/headers';
import { cookieToInitialState } from 'wagmi';
import { config } from '@/config';
import Web3ModalProvider from '@/context/Web3ModalProvider';

export const metadata: Metadata = {
  title: 'Your App',
  description: 'Your App Description',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const initialState = cookieToInitialState(config, headers().get('cookie'));
  return (
    <html lang="en">
      <body>
        <Web3ModalProvider initialState={initialState}>
          {children}
        </Web3ModalProvider>
      </body>
    </html>
  );
}
```

### After: Para Layout

```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: "Your App Description",
};

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

## Connect Button Migration

### Before: Web3Modal Button

```tsx components/ConnectButton.tsx theme={null}
'use client';
import { useWeb3Modal } from '@web3modal/wagmi/react';

export default function ConnectButton() {
  const { open } = useWeb3Modal();
  return <button onClick={() => open()}>Connect Wallet</button>;
}
```

### After: Para Button

```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 (
      <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>
  );
}
```

## Configuration Mapping

<Info>
  Para maintains full Wagmi compatibility. Your existing Wagmi hooks and configuration continue to work seamlessly.
</Info>

| Web3Modal Config         | Para Config                      | Location               |
| ------------------------ | -------------------------------- | ---------------------- |
| `projectId`              | `walletConnect.projectId`        | `externalWalletConfig` |
| `wagmiConfig.chains`     | `evmConnector.config.chains`     | `externalWalletConfig` |
| `wagmiConfig.transports` | `evmConnector.config.transports` | `externalWalletConfig` |
| `wagmiConfig.ssr`        | `evmConnector.config.ssr`        | `externalWalletConfig` |
| `wagmiConfig.storage`    | `evmConnector.config.storage`    | `externalWalletConfig` |
| `metadata.name`          | `config.appName`                 | Root config            |
| `metadata.description`   | `config.description`             | Root config            |

## Advanced Configuration

### Multiple Chains

```tsx src/context/ParaProvider.tsx theme={null}
import { mainnet, polygon, arbitrum, optimism } from "wagmi/chains";

// In ParaProvider
externalWalletConfig={{
  evmConnector: {
    config: {
      chains: [mainnet, polygon, arbitrum, optimism],
      transports: {
        [mainnet.id]: http(),
        [polygon.id]: http(),
        [arbitrum.id]: http(),
        [optimism.id]: http(),
      },
    },
  },
}}
```

### Custom RPC Endpoints

```tsx src/context/ParaProvider.tsx theme={null}
import { http } from "wagmi";

// In ParaProvider
externalWalletConfig={{
  evmConnector: {
    config: {
      transports: {
        [mainnet.id]: http("https://your-custom-rpc.com"),
      },
    },
  },
}}
```

### Social Login Support

Para adds embedded wallet support automatically:

```tsx src/context/ParaProvider.tsx theme={null}
paraModalConfig={{
  authLayout: ["AUTH:FULL", "EXTERNAL:FULL"],
  oAuthMethods: ["GOOGLE", "APPLE", "DISCORD", "TWITTER"],
  disableEmailLogin: false,
  disablePhoneLogin: false,
}}
```

## Using Wagmi Hooks

Your existing Wagmi code continues to work without changes:

```tsx src/components/AccountInfo.tsx theme={null}
import { useAccount, useBalance, useEnsName } from "wagmi";

export function AccountInfo() {
  const { address } = useAccount();
  const { data: balance } = useBalance({ address });
  const { data: ensName } = useEnsName({ address });

  if (!address) return null;

  return (
    <div>
      <p>{ensName || address}</p>
      <p>{balance?.formatted} {balance?.symbol}</p>
    </div>
  );
}
```

## Migration Checklist

<Accordion title="Package Updates">
  * Remove `@web3modal/wagmi` and `@web3modal/wagmi/react`
  * Install `@getpara/react-sdk`
  * Keep `wagmi`, `viem`, and `@tanstack/react-query`
  * Run the Para postinstall script
</Accordion>

<Accordion title="Configuration Migration">
  * Move Wagmi config to `externalWalletConfig.evmConnector.config`
  * Add Para API key to environment variables
  * Migrate metadata to Para's config object
  * Keep WalletConnect project ID for external wallets
</Accordion>

<Accordion title="Provider Updates">
  * Replace Web3ModalProvider with ParaProvider
  * Remove cookie state handling (Para manages internally)
  * Keep QueryClientProvider wrapper
  * Import Para styles
</Accordion>

<Accordion title="Component Updates">
  * Replace `useWeb3Modal` with `useModal`
  * Update connect button component
  * Keep all Wagmi hook usage unchanged
  * Test wallet connections
</Accordion>

## Common Issues

<Warning>
  **SSR Hydration**: Para handles SSR internally. Remove manual cookie state management from your layout.
</Warning>

<Warning>
  **Connector Configuration**: Para manages wallet connectors internally. Remove explicit connector imports from Wagmi.
</Warning>

## Next Steps

<CardGroup cols={3}>
  <Card title="Hook Reference" href="/v2/react/guides/hooks">
    Explore Para's React hooks for wallet interactions
  </Card>

  <Card title="Custom Styling" href="/v2/react/guides/customization/modal">
    Customize the Para modal appearance
  </Card>

  <Card title="Chain Management" href="/v2/react/guides/external-wallets/evm">
    Configure multi-chain support
  </Card>
</CardGroup>