Migrating from Thirdweb to Para

Migrate your existing Thirdweb application to Para’s unified wallet system. Para provides similar wallet connection capabilities with additional features like embedded wallets and session management while maintaining a simple integration.

Installation

Replace Thirdweb with Para SDK:

Terminal

npm uninstall thirdweb
npm install @getpara/react-sdk @tanstack/react-query wagmi@^2 viem

For a full list of dependencies, refer to the Quick Start Guide.

Configuration Changes

Before: Thirdweb Client

Your existing Thirdweb client configuration:

lib/client.ts

import { createThirdwebClient } from "thirdweb";

export const client = createThirdwebClient({
  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!,
});

After: Para Configuration

Replace with Para configuration:

src/config/constants.ts

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;

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

Provider Migration

Before: Thirdweb Provider

Your existing Thirdweb provider in the layout:

app/layout.tsx

import type { Metadata } from "next";
import { ThirdwebProvider } from "thirdweb/react";

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <ThirdwebProvider>{children}</ThirdwebProvider>
      </body>
    </html>
  );
}

After: Para Provider Setup

Create a Para provider component:

src/context/ParaProvider.tsx

"use client";

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

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, polygon, arbitrum],
          },
        },
        walletConnect: {
          projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || "",
        },
      }}
      config={{
        appName: "Your App Name",
      }}
      paraModalConfig={{
        authLayout: ["AUTH:FULL", "EXTERNAL:FULL"],
        theme: { mode: "light" },
      }}
    >
      {children}
    </Provider>
  );
}

Update your layout:

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: "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: Thirdweb ConnectButton

app/page.tsx

"use client";
import { ConnectButton } from "thirdweb/react";
import { client } from "@/lib/client";

export default function Home() {
  return (
    <main>
      <ConnectButton client={client} />
    </main>
  );
}

After: Para Connect Button

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

Use it in your page:

src/app/page.tsx

import { ConnectButton } from "@/components/ConnectButton";

export default function Home() {
  return (
    <main>
      <ConnectButton />
    </main>
  );
}

Hook Migration

Account Information

import { useActiveAccount } from "thirdweb/react";

function Account() {
  const account = useActiveAccount();
  
  return (
    <div>
      Address: {account?.address}
    </div>
  );
}

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

function Account() {
  const { address } = useAccount();
  
  return (
    <div>
      Address: {address}
    </div>
  );
}

Wallet Connection Status

import { useActiveWalletConnectionStatus } from "thirdweb/react";

function ConnectionStatus() {
  const status = useActiveWalletConnectionStatus();
  
  return (
    <div>
      Status: {status}
    </div>
  );
}

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

function ConnectionStatus() {
  const { isConnected, isConnecting } = useAccount();
  
  return (
    <div>
      Status: {isConnecting ? "connecting" : isConnected ? "connected" : "disconnected"}
    </div>
  );
}

Disconnect Wallet

import { useDisconnect } from "thirdweb/react";

function DisconnectButton() {
  const { disconnect } = useDisconnect();
  
  return (
    <button onClick={disconnect}>
      Disconnect
    </button>
  );
}

import { useDisconnect } from "wagmi";

function DisconnectButton() {
  const { disconnect } = useDisconnect();
  
  return (
    <button onClick={() => disconnect()}>
      Disconnect
    </button>
  );
}

Smart Contract Interaction

Para uses Wagmi for contract interactions, providing a different approach than Thirdweb:

Reading Contract Data

import { getContract } from "thirdweb";
import { useReadContract } from "thirdweb/react";
import { client } from "@/lib/client";

const contract = getContract({
  client,
  chain: ethereum,
  address: "0x...",
});

function ContractRead() {
  const { data } = useReadContract({
    contract,
    method: "function balanceOf(address) returns (uint256)",
    params: ["0x..."],
  });
  
  return <div>{data?.toString()}</div>;
}

import { useReadContract } from "wagmi";

const abi = [
  {
    name: "balanceOf",
    type: "function",
    inputs: [{ name: "owner", type: "address" }],
    outputs: [{ name: "balance", type: "uint256" }],
  },
] as const;

function ContractRead() {
  const { data } = useReadContract({
    address: "0x...",
    abi,
    functionName: "balanceOf",
    args: ["0x..."],
  });
  
  return <div>{data?.toString()}</div>;
}

Writing to Contract

import { prepareContractCall } from "thirdweb";
import { useSendTransaction } from "thirdweb/react";

function ContractWrite() {
  const { mutate: sendTransaction } = useSendTransaction();
  
  const handleTransfer = () => {
    const transaction = prepareContractCall({
      contract,
      method: "function transfer(address, uint256)",
      params: ["0x...", 100n],
    });
    sendTransaction(transaction);
  };
  
  return <button onClick={handleTransfer}>Transfer</button>;
}

import { useWriteContract } from "wagmi";

function ContractWrite() {
  const { writeContract } = useWriteContract();
  
  const handleTransfer = () => {
    writeContract({
      address: "0x...",
      abi,
      functionName: "transfer",
      args: ["0x...", 100n],
    });
  };
  
  return <button onClick={handleTransfer}>Transfer</button>;
}

Feature Comparison

Feature	Thirdweb	Para
Wallet Connection	✅	✅
Social Login	Via Auth SDK	✅ Built-in
Email/Phone Login	Via Auth SDK	✅ Built-in
Smart Contracts	Custom SDK	Wagmi hooks
Chain Switching	✅	✅
Session Management	Limited	✅ Advanced
Gas Sponsorship	Via Engine	✅ Built-in

Advanced Features

Para includes social login without additional configuration:

src/context/ParaProvider.tsx

paraModalConfig={{
  oAuthMethods: ["GOOGLE", "APPLE", "DISCORD", "TWITTER", "FACEBOOK"],
  disableEmailLogin: false,
  disablePhoneLogin: false,
}}

Multi-Chain Support

src/context/ParaProvider.tsx

import { mainnet, polygon, arbitrum, optimism, base } from "wagmi/chains";

externalWalletConfig={{
  evmConnector: {
    config: {
      chains: [mainnet, polygon, arbitrum, optimism, base],
    },
  },
}}

Custom Theme

src/context/ParaProvider.tsx

paraModalConfig={{
  theme: {
    mode: "dark",
    foregroundColor: "#FFFFFF",
    backgroundColor: "#1A1A1A",
    accentColor: "#6366F1",
    borderRadius: "medium",
    font: "Inter",
  },
  logo: "/logo.svg",
}}

Migration Checklist

Dependencies

Remove thirdweb package
Install @getpara/react-sdk, wagmi, viem
Add @tanstack/react-query
Run Para postinstall script

Configuration

Replace Thirdweb client with Para configuration
Update environment variables
Configure supported chains
Set up WalletConnect project ID if needed

Components

Replace ThirdwebProvider with ParaProvider
Update ConnectButton implementation
Migrate hooks to Para/Wagmi equivalents
Update contract interaction code

Testing

Test wallet connections
Verify contract interactions
Check chain switching
Test social login if enabled

Common Patterns

Balance Display

src/components/Balance.tsx

import { useAccount, useBalance } from "wagmi";
import { formatEther } from "viem";

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

  if (!data) return null;

  return (
    <div>
      {formatEther(data.value)} {data.symbol}
    </div>
  );
}

Transaction History

src/components/TransactionHistory.tsx

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

export function TransactionHistory() {
  const { data: wallet } = useWallet();
  
  // Para provides transaction history through the wallet object
  const transactions = wallet?.transactions || [];
  
  return (
    <ul>
      {transactions.map((tx) => (
        <li key={tx.hash}>{tx.hash}</li>
      ))}
    </ul>
  );
}

Next Steps

Wagmi Documentation

Learn about Wagmi hooks for contract interactions

Hook Reference

Explore Para’s React hooks

Sessions

Implement session management

Getting Started

Migrations

General Guides

How Para Works

Troubleshooting

Resources

Migrating from Thirdweb to Para

Installation

Configuration Changes

Before: Thirdweb Client

After: Para Configuration

Provider Migration

Before: Thirdweb Provider

After: Para Provider Setup

Connect Button Migration

Before: Thirdweb ConnectButton

After: Para Connect Button

Hook Migration

Account Information

Wallet Connection Status

Disconnect Wallet

Smart Contract Interaction

Reading Contract Data

Writing to Contract

Feature Comparison

Advanced Features

Multi-Chain Support

Custom Theme

Migration Checklist

Common Patterns

Balance Display

Transaction History

Next Steps

Wagmi Documentation

Hook Reference

Sessions

​Installation

​Configuration Changes

​Before: Thirdweb Client

​After: Para Configuration

​Provider Migration

​Before: Thirdweb Provider

​After: Para Provider Setup

​Connect Button Migration

​Before: Thirdweb ConnectButton

​After: Para Connect Button

​Hook Migration

​Account Information

​Wallet Connection Status

​Disconnect Wallet

​Smart Contract Interaction

​Reading Contract Data

​Writing to Contract

​Feature Comparison

​Advanced Features

​Social Login

​Multi-Chain Support

​Custom Theme

​Migration Checklist

​Common Patterns

​Balance Display

​Transaction History

​Next Steps

Wagmi Documentation

Hook Reference

Sessions

Installation

Configuration Changes

Before: Thirdweb Client

After: Para Configuration

Provider Migration

Before: Thirdweb Provider

After: Para Provider Setup

Connect Button Migration

Before: Thirdweb ConnectButton

After: Para Connect Button

Hook Migration

Account Information

Wallet Connection Status

Disconnect Wallet

Smart Contract Interaction

Reading Contract Data

Writing to Contract

Feature Comparison

Advanced Features

Social Login

Multi-Chain Support

Custom Theme

Migration Checklist

Common Patterns

Balance Display

Transaction History

Next Steps