> ## Documentation Index
> Fetch the complete documentation index at: https://seilabs-docs-evm-cookbook.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Thirdweb

> Learn how to integrate thirdweb's Account Abstraction SDK with Sei network to build decentralized applications with seamless wallet connectivity.

## Overview

This step-by-step guide shows how to integrate thirdweb's Account Abstraction SDK on Sei. By the end of the guide, you will know how to set up wallet connection with social logins and build dApps with sponsored gas.

## What this guide covers

* Core concepts and the benefits for user experience
* Creating a React application with the thirdweb SDK and Vite
* Setting up social logins and gasless transactions
* Interacting with smart contracts

## Prerequisites

Before you start, make sure that you have:

* Node.js v18 or later installed
* Basic knowledge of React and TypeScript
* A thirdweb account with an API key from the [thirdweb dashboard](https://thirdweb.com/dashboard)
* A smart contract deployed on Sei (this guide uses a simple Storage contract)

<Warning>**For Sei Mainnet**: Gas sponsorship requires an active thirdweb Pay As You Go subscription (\$5/month minimum).</Warning>

## What is account abstraction?

Account abstraction (AA) changes how users interact with dApps. Instead of traditional externally owned accounts (EOAs), users get smart contract wallets that support advanced features.

### Core concepts

* **Smart wallets**: Contract-based accounts with programmable logic
* **Gas sponsorship**: dApps pay transaction fees for users
* **Social recovery**: Authentication methods other than private keys
* **Batch transactions**: Multiple operations in a single transaction

## Network information

### Sei Mainnet configuration

* **Network name**: SEI EVM
* **Chain ID**: 1329
* **Public RPC URL**: `https://evm-rpc.sei-apis.com`
* **Explorer**: [https://seiscan.io/](https://seiscan.io/)
* **Currency**: SEI
* **thirdweb RPC**: `https://1329.rpc.thirdweb.com/{YOUR_CLIENT_ID}`

### Step 1: Deploy a Storage contract

Before you integrate the SDK, deploy a simple Storage contract on Sei. This contract stores and retrieves a number.

#### Storage contract (Solidity)

```solidity title="Storage.sol" theme={null}
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Storage {
    uint256 private value;

    function store(uint256 num) public {
        value = num;
    }

    function retrieve() public view returns (uint256) {
        return value;
    }
}
```

Use [Remix](https://remix.ethereum.org/) to deploy this contract on Sei. Save the contract address, because you need it in the code.

### Step 2: Project setup

#### Create a new project

```bash theme={null}
npm create vite@latest sei-thirdweb-app -- --template react-ts
cd sei-thirdweb-app
npm install
```

#### Install dependencies

```bash theme={null}
npm install thirdweb@^5
```

#### Configure environment variables

Create a `.env` file in your project root:

```env title=".env" theme={null}
VITE_TEMPLATE_CLIENT_ID=your_thirdweb_client_id_here
```

Get your Client ID from the [thirdweb dashboard](https://thirdweb.com/dashboard) under **Settings** → **API Keys**.

#### Enable gas sponsorship

To sponsor gas on Sei Mainnet:

1. Go to the [billing settings](https://thirdweb.com/dashboard/settings/billing) in the thirdweb dashboard.
2. Subscribe to the **Pay As You Go** plan (\$5/month).
3. Without this plan, sponsored transactions fail on Sei Mainnet.

### Step 3: Configure thirdweb client

Create `src/client.ts`:

```typescript title="src/client.ts" theme={null}
import { createThirdwebClient } from 'thirdweb';

export const client = createThirdwebClient({
  clientId: import.meta.env.VITE_TEMPLATE_CLIENT_ID
});
```

### Step 4: Smart contract integration

Replace the contents of `src/App.tsx` with this code:

```typescript title="src/App.tsx" lines theme={null}
import {
  ConnectButton,
  TransactionButton,
  useActiveAccount,
  useReadContract,
} from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
import { client } from "./client";
import { getContract } from "thirdweb";
import { defineChain } from "thirdweb/chains";
import { prepareContractCall, sendAndConfirmTransaction } from "thirdweb";

const THIRDWEB_API_KEY = import.meta.env.VITE_TEMPLATE_CLIENT_ID;

// Configure Sei network
const rpc = `https://1329.rpc.thirdweb.com/${THIRDWEB_API_KEY}`;
const seiChain = defineChain({
  id: 1329,
  rpc,
});

// Your deployed Storage contract address
const storageContract = getContract({
  client,
  chain: seiChain,
  address: "0xYourContractAddressHere", // Replace with your contract address
});

// Configure wallet options
const wallets = [
  inAppWallet({
    auth: {
      options: [
        "google",
        "x",
        "apple",
        "discord",
        "facebook",
        "farcaster",
        "telegram",
        "email",
        "phone",
        "passkey",
        "guest",
      ],
    },
  }),
];

// Store custom value function
async function handleStore(account: any, value: string) {
  if (!account) return;

  const transaction = prepareContractCall({
    contract: storageContract,
    method: "function store(uint256 num)",
    params: [BigInt(value)],
  });

  try {
    const txResult = await sendAndConfirmTransaction({
      transaction,
      account,
    });
    console.log("Transaction successful:", txResult.transactionHash);
    alert(`Stored ${value} successfully!`);
    return txResult.transactionHash;
  } catch (error) {
    console.error("Transaction failed:", error);
    alert("Transaction failed. Check console for details.");
  }
}

function App() {
  const account = useActiveAccount();

  // Read the stored value (free RPC call — no transaction needed)
  const { data: storedValue, refetch: refetchStoredValue } = useReadContract({
    contract: storageContract,
    method: "function retrieve() view returns (uint256)",
  });

  return (
    <div className="min-h-screen bg-gray-100 py-8">
      <div className="max-w-4xl mx-auto px-4">
        <h1 className="text-3xl font-bold text-center mb-8">
          Sei x thirdweb Account Abstraction
        </h1>

        <div className="bg-white  shadow-md p-6 mb-6">
          <h2 className="text-xl font-semibold mb-4">Connect Wallet</h2>
          <ConnectButton
            client={client}
            wallets={wallets}
            accountAbstraction={{
              chain: seiChain,
              sponsorGas: true,
            }}
            connectButton={{
              label: "Connect to Sei Network",
            }}
          />
        </div>

        {account && (
          <div className="bg-white  shadow-md p-6">
            <h3 className="text-xl font-semibold mb-4">
              Storage Contract Interactions
            </h3>
            <p className="text-gray-600 mb-6">
              Connected: {account.address}
            </p>

            <div className="space-y-4">
              <div>
                <h4 className="font-medium mb-2">Store Number 37</h4>
                <TransactionButton
                  transaction={() =>
                    prepareContractCall({
                      contract: storageContract,
                      method: "function store(uint256 num)",
                      params: [BigInt(37)],
                    })
                  }
                  onTransactionConfirmed={(result) => {
                    console.log("Confirmed:", result);
                    alert("Number 37 stored!");
                  }}
                  onError={(error) => {
                    console.error("Error:", error);
                    alert("Transaction failed.");
                  }}
                >
                  Store Number 37
                </TransactionButton>
              </div>

              <div>
                <h4 className="font-medium mb-2">Store Custom Number</h4>
                <button
                  onClick={() => {
                    const value = prompt("Enter a number:");
                    if (value && !isNaN(Number(value))) {
                      handleStore(account, value);
                    } else if (value) {
                      alert("Please enter a valid number");
                    }
                  }}
                  className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
                >
                  Store Custom Number
                </button>
              </div>

              <div>
                <h4 className="font-medium mb-2">Retrieve Stored Number</h4>
                <p className="text-gray-600 mb-2">
                  Stored value:{" "}
                  {storedValue !== undefined ? storedValue.toString() : "—"}
                </p>
                <button
                  onClick={() => refetchStoredValue()}
                  className="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600"
                >
                  Refresh Number
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;
```

#### Understanding key components

| Component | Description |
| - | - |
| `ConnectButton` | Pre-built UI component for wallet connection |
| `TransactionButton` | Simplified transaction execution with loading states |
| `useActiveAccount` | Hook to get the currently connected account |
| `prepareContractCall` | Prepares a transaction for a contract interaction |
| `inAppWallet` | Smart wallet with social login capabilities |

### Step 5: Package configuration

Make sure that your `package.json` includes these entries:

```json title="package.json" theme={null}
{
  "name": "sei-thirdweb-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3",
    "react-dom": "^18.3",
    "thirdweb": "^5"
  },
  "devDependencies": {
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "typescript": "^5.2.2",
    "vite": "^4"
  }
}
```

### Step 6: Run the application

#### Start development server

```bash theme={null}
npm run dev
```

#### Test the application

1. In your browser, go to `http://localhost:5173`.
2. Click **Connect to Sei Network**.
3. Choose your preferred login method, such as Google or email.
4. A smart wallet is created for you automatically. You do not pay gas for it.
5. After you connect, you see three interaction buttons.
6. Store the number 37 or a custom number.
7. Retrieve the stored value. All transactions are gasless.
8. Monitor the browser console for these items:
   * Transaction hashes
   * Error messages
   * Connection status
   * Smart contract interactions

<Info>Gas is sponsored automatically when you use account abstraction, so users do not need SEI tokens to interact with the contract.</Info>

### Step 7: Done!

Your dApp now uses thirdweb's Account Abstraction SDK on Sei. Users can connect with social logins and interact with your contracts without holding SEI tokens for gas.

## What you've accomplished

* Created a React application with the thirdweb SDK v5
* Configured account abstraction for Sei
* Implemented social login authentication
* Enabled gasless transactions
* Built contract interaction interfaces
* Learned error handling for dApps

## Troubleshooting

### Common issues and solutions

| Error | Problem | Solution |
| - | - | - |
| `Client ID not found` | Environment variable does not load | Check the `.env` file and restart the dev server |
| `Sponsored transactions failing` | No active subscription | Subscribe to the [Pay As You Go plan](https://thirdweb.com/dashboard/settings/billing) |
| `Transaction reverted` | Invalid contract address | Verify the contract on [Seiscan](https://seiscan.io/) |
| `Cannot connect wallet` | Network configuration issue | Check the Client ID and the RPC URL format |
| `Gas estimation failed` | Contract method issue | Verify the contract ABI and the function signature |

### Network connection issues

<Danger>
  If the RPC endpoint does not respond:

  1. Make sure that your Client ID is active.
  2. Check your internet connection.
  3. Try the public RPC endpoint: `https://evm-rpc.sei-apis.com`
</Danger>

## Resources

* **thirdweb documentation**: [https://portal.thirdweb.com/](https://portal.thirdweb.com/)
* **thirdweb dashboard**: [https://thirdweb.com/dashboard](https://thirdweb.com/dashboard)
* **Seiscan**: [https://seiscan.io/](https://seiscan.io/)
* **Remix IDE**: [https://remix.ethereum.org/](https://remix.ethereum.org/)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.