> ## 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.

# Integrating Para with thirdweb

> Learn how to integrate Para's embedded wallets with thirdweb for smart accounts, gas sponsorship, and in-app payments

Integrate Para's embedded wallets with thirdweb for smart accounts, gas sponsorship, and in-app payments. The `useThirdwebSmartAccount` hook handles Para signer creation, smart wallet setup, and gas sponsorship configuration automatically — supporting both EIP-4337 and EIP-7702 modes.

## Prerequisites

* Para API key from the [Para Developer Portal](https://developer.getpara.com/)
* thirdweb Client ID from the [thirdweb Dashboard](https://thirdweb.com/dashboard)
* Node.js 18+ and React/Next.js development environment

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @getpara/react-sdk viem @tanstack/react-query
  ```

  ```bash yarn theme={null}
  yarn add @getpara/react-sdk viem @tanstack/react-query
  ```

  ```bash pnpm theme={null}
  pnpm add @getpara/react-sdk viem @tanstack/react-query
  ```
</CodeGroup>

### Add your keys to .env.local

```bash theme={null}
NEXT_PUBLIC_THIRDWEB_CLIENT_ID=your_thirdweb_client_id
NEXT_PUBLIC_PARA_API_KEY=your_para_api_key
```

## Setup Para Provider

```tsx filename="app/providers.tsx" theme={null}
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ParaProvider } from "@getpara/react-sdk";

const queryClient = new QueryClient();

export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY!,
          env: "BETA",
        }}
        config={{ appName: "My App" }}
      >
        {children}
      </ParaProvider>
    </QueryClientProvider>
  );
}
```

## Usage

Use the `useThirdwebSmartAccount` hook to create and manage a thirdweb smart account. The hook handles Para signer creation, smart wallet setup, and gas sponsorship configuration internally.

```tsx filename="components/ThirdwebDemo.tsx" theme={null}
"use client";

import { useThirdwebSmartAccount } from "@getpara/react-sdk";
import { useMutation } from "@tanstack/react-query";
import { sepolia } from "viem/chains";
import { parseEther } from "viem";

const THIRDWEB_CLIENT_ID = process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!;

export function ThirdwebDemo() {
  const { smartAccount, isLoading, error } = useThirdwebSmartAccount({
    clientId: THIRDWEB_CLIENT_ID,
    chain: sepolia,
    sponsorGas: true,   // enable gas sponsorship (default)
    mode: "4337",       // or "7702"
  });

  const {
    mutate: sendTransaction,
    isPending: isSending,
    error: sendError,
  } = useMutation({
    mutationFn: async () => {
      if (!smartAccount) throw new Error("Smart account not ready");
      return smartAccount.sendTransaction({
        to: "0xRecipient",
        value: parseEther("0.01"),
      });
    },
    onSuccess: (receipt) => {
      console.log("Transaction hash:", receipt.transactionHash);
    },
  });

  const {
    mutate: sendBatch,
    isPending: isBatching,
    error: batchError,
  } = useMutation({
    mutationFn: async () => {
      if (!smartAccount) throw new Error("Smart account not ready");
      return smartAccount.sendBatchTransaction([
        { to: "0xRecipientA", value: parseEther("0.01") },
        { to: "0xRecipientB", data: "0xencodedCallData" },
      ]);
    },
    onSuccess: (receipt) => {
      console.log("Batch tx hash:", receipt.transactionHash);
    },
  });

  if (isLoading) return <p>Setting up smart account...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!smartAccount) return null;

  return (
    <div>
      <h2>thirdweb Smart Account</h2>
      <p>Address: {smartAccount.smartAccountAddress}</p>
      <p>Mode: {smartAccount.mode}</p>

      <button onClick={() => sendTransaction()} disabled={isSending}>
        {isSending ? "Sending..." : "Send Transaction"}
      </button>
      {sendError && <p style={{ color: "red" }}>{sendError.message}</p>}

      <button onClick={() => sendBatch()} disabled={isBatching}>
        {isBatching ? "Batching..." : "Send Batch"}
      </button>
      {batchError && <p style={{ color: "red" }}>{batchError.message}</p>}
    </div>
  );
}
```

## Key Features

* **Dual mode support**: Choose between EIP-4337 (smart wallets via bundler) or EIP-7702 (EOA delegation)
* **Built-in gas sponsorship**: Enable `sponsorGas: true` for gasless transactions
* **Transaction batching**: Send multiple transactions atomically via `sendBatchTransaction`
* **Para wallet management**: Embedded wallet infrastructure with MPC security

## Next Steps

<CardGroup cols={2}>
  <Card title="thirdweb Documentation" icon="book" href="https://portal.thirdweb.com/">
    Explore thirdweb's smart wallet features and SDK documentation
  </Card>

  <Card title="Account Abstraction Guide" icon="layer-group" href="/v2/react/guides/web3-operations/evm/account-abstraction">
    See all supported AA providers and the unified SmartAccount interface
  </Card>
</CardGroup>

## Related Walkthroughs

<CardGroup cols={3}>
  <Card title="Porto Integration" icon="key" href="/v2/walkthroughs/porto">
    Intermediate · 30 min · EIP-7702 smart accounts with session keys
  </Card>

  <Card title="Rhinestone Integration" icon="gem" href="/v2/walkthroughs/Rhinestone">
    Advanced · 40 min · Cross-chain smart accounts with gas abstraction
  </Card>

  <Card title="Aave v3 Integration" icon="landmark" href="/v2/walkthroughs/aave">
    Advanced · 45 min · Lending, borrowing, and yield strategies
  </Card>
</CardGroup>