> ## 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 Thirdweb to Para
> Step-by-step guide for migrating your Thirdweb application to Para SDK
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:
```bash Terminal theme={null}
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](/v2/react/quickstart).
## Configuration Changes
### Before: Thirdweb Client
Your existing Thirdweb client configuration:
```typescript lib/client.ts theme={null}
import { createThirdwebClient } from "thirdweb";
export const client = createThirdwebClient({
clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!,
});
```
### After: Para Configuration
Replace with 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 ?? "";
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:
```tsx app/layout.tsx theme={null}
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 (
{children}
);
}
```
### After: Para Provider Setup
Create a Para provider component:
```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, arbitrum } from "wagmi/chains";
export function ParaProvider({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Update your 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 (
{children}
);
}
```
## Connect Button Migration
### Before: Thirdweb ConnectButton
```tsx app/page.tsx theme={null}
"use client";
import { ConnectButton } from "thirdweb/react";
import { client } from "@/lib/client";
export default function Home() {
return (
);
}
```
### After: Para Connect 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 (
);
}
return (
);
}
```
Use it in your page:
```tsx src/app/page.tsx theme={null}
import { ConnectButton } from "@/components/ConnectButton";
export default function Home() {
return (
);
}
```
## Hook Migration
### Account Information
```tsx Thirdweb theme={null}
import { useActiveAccount } from "thirdweb/react";
function Account() {
const account = useActiveAccount();
return (
Address: {account?.address}
);
}
```
```tsx Para theme={null}
import { useAccount } from "@getpara/react-sdk";
function Account() {
const { address } = useAccount();
return (
Address: {address}
);
}
```
### Wallet Connection Status
```tsx Thirdweb theme={null}
import { useActiveWalletConnectionStatus } from "thirdweb/react";
function ConnectionStatus() {
const status = useActiveWalletConnectionStatus();
return (
Status: {status}
);
}
```
```tsx Para theme={null}
import { useAccount } from "@getpara/react-sdk";
function ConnectionStatus() {
const { isConnected, isConnecting } = useAccount();
return (
Status: {isConnecting ? "connecting" : isConnected ? "connected" : "disconnected"}
);
}
```
### Disconnect Wallet
```tsx Thirdweb theme={null}
import { useDisconnect } from "thirdweb/react";
function DisconnectButton() {
const { disconnect } = useDisconnect();
return (
);
}
```
```tsx Para theme={null}
import { useDisconnect } from "wagmi";
function DisconnectButton() {
const { disconnect } = useDisconnect();
return (
);
}
```
## Smart Contract Interaction
Para uses Wagmi for contract interactions, providing a different approach than Thirdweb:
### Reading Contract Data
```tsx Thirdweb theme={null}
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 {data?.toString()}
;
}
```
```tsx Para theme={null}
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 {data?.toString()}
;
}
```
### Writing to Contract
```tsx Thirdweb theme={null}
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 ;
}
```
```tsx Para theme={null}
import { useWriteContract } from "wagmi";
function ContractWrite() {
const { writeContract } = useWriteContract();
const handleTransfer = () => {
writeContract({
address: "0x...",
abi,
functionName: "transfer",
args: ["0x...", 100n],
});
};
return ;
}
```
## 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
### Social Login
Para includes social login without additional configuration:
```tsx src/context/ParaProvider.tsx theme={null}
paraModalConfig={{
oAuthMethods: ["GOOGLE", "APPLE", "DISCORD", "TWITTER", "FACEBOOK"],
disableEmailLogin: false,
disablePhoneLogin: false,
}}
```
### Multi-Chain Support
```tsx src/context/ParaProvider.tsx theme={null}
import { mainnet, polygon, arbitrum, optimism, base } from "wagmi/chains";
externalWalletConfig={{
evmConnector: {
config: {
chains: [mainnet, polygon, arbitrum, optimism, base],
},
},
}}
```
### Custom Theme
```tsx src/context/ParaProvider.tsx theme={null}
paraModalConfig={{
theme: {
mode: "dark",
foregroundColor: "#FFFFFF",
backgroundColor: "#1A1A1A",
accentColor: "#6366F1",
borderRadius: "medium",
font: "Inter",
},
logo: "/logo.svg",
}}
```
## Migration Checklist
* Remove `thirdweb` package
* Install `@getpara/react-sdk`, `wagmi`, `viem`
* Add `@tanstack/react-query`
* Run Para postinstall script
* Replace Thirdweb client with Para configuration
* Update environment variables
* Configure supported chains
* Set up WalletConnect project ID if needed
* Replace `ThirdwebProvider` with `ParaProvider`
* Update `ConnectButton` implementation
* Migrate hooks to Para/Wagmi equivalents
* Update contract interaction code
* Test wallet connections
* Verify contract interactions
* Check chain switching
* Test social login if enabled
## Common Patterns
### Balance Display
```tsx src/components/Balance.tsx theme={null}
import { useAccount, useBalance } from "wagmi";
import { formatEther } from "viem";
export function Balance() {
const { address } = useAccount();
const { data } = useBalance({ address });
if (!data) return null;
return (
{formatEther(data.value)} {data.symbol}
);
}
```
### Transaction History
```tsx src/components/TransactionHistory.tsx theme={null}
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 (
{transactions.map((tx) => (
- {tx.hash}
))}
);
}
```
## Next Steps
Learn about Wagmi hooks for contract interactions
Explore Para's React hooks
Implement session management