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
• A smart contract deployed on Sei (this guide uses a simple Storage contract)

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

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/
• 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)

Storage.sol

// 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 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

npm create vite@latest sei-thirdweb-app -- --template react-ts
cd sei-thirdweb-app
npm install

Install dependencies

npm install thirdweb@^5

Configure environment variables

Create a .env file in your project root:

.env

VITE_TEMPLATE_CLIENT_ID=your_thirdweb_client_id_here

Get your Client ID from the thirdweb dashboard under Settings → API Keys.

Enable gas sponsorship

To sponsor gas on Sei Mainnet:

1. Go to the billing settings 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:

src/client.ts

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:

src/App.tsx

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:

package.json

{
  "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

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

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

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
Transaction reverted	Invalid contract address	Verify the contract on Seiscan
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

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

Resources

• thirdweb documentation: https://portal.thirdweb.com/
• thirdweb dashboard: https://thirdweb.com/dashboard
• Seiscan: https://seiscan.io/
• Remix IDE: https://remix.ethereum.org/