From c18ebea4f54c791c781654591124e77eae2b6999 Mon Sep 17 00:00:00 2001 From: Shreyas Padmakiran Date: Fri, 12 Dec 2025 14:23:20 +0400 Subject: [PATCH 1/4] add-thirdweb-7702-docs --- content/evm/wallet-integrations/_meta.js | 6 + .../evm/wallet-integrations/thirdweb-7702.mdx | 462 ++++++++++++++++++ 2 files changed, 468 insertions(+) create mode 100644 content/evm/wallet-integrations/thirdweb-7702.mdx diff --git a/content/evm/wallet-integrations/_meta.js b/content/evm/wallet-integrations/_meta.js index bf78462d..622fb549 100644 --- a/content/evm/wallet-integrations/_meta.js +++ b/content/evm/wallet-integrations/_meta.js @@ -4,5 +4,11 @@ export default { }, pimlico: { title: 'Pimlico' + }, + thirdweb: { + title: 'Thirdweb(4337)' + }, + 'thirdweb-7702': { + title: 'Thirdweb(7702)' } }; diff --git a/content/evm/wallet-integrations/thirdweb-7702.mdx b/content/evm/wallet-integrations/thirdweb-7702.mdx new file mode 100644 index 00000000..740625ca --- /dev/null +++ b/content/evm/wallet-integrations/thirdweb-7702.mdx @@ -0,0 +1,462 @@ +# Account Abstraction with EIP-7702 using thirdweb + +## Overview + +This comprehensive guide demonstrates how to integrate thirdweb's EIP-7702 Account Abstraction SDK into your application. EIP-7702 represents the next generation of account abstraction, allowing Externally Owned Accounts (EOAs) to temporarily function as smart contracts, enabling gasless transactions and advanced wallet features without requiring users to migrate to new wallet addresses. + +## What This Guide Covers + +- Understanding EIP-7702 +- Setting up a React application with thirdweb's EIP-7702 implementation +- Implementing social logins with smart account features +- Creating gasless transaction experiences on Sei Network + +## Prerequisites + +Before starting, ensure you have: + +- Node.js v18+ installed +- Basic knowledge of React and TypeScript +- A thirdweb account with API key from [thirdweb Dashboard](https://thirdweb.com/dashboard) +- **For Mainnet**: An active thirdweb Pay As You Go subscription ($5/month minimum) for gas sponsorship + +## What is EIP-7702? + +EIP-7702 is an Ethereum Improvement Proposal that introduces native account abstraction by allowing EOAs to temporarily delegate execution to smart contracts. This approach offers several advantages over traditional ERC-4337 implementations: + +### Sei Network Setup + +**Testnet** : + +- **Sei testnet RPC**: `https://evm-rpc-testnet.sei-apis.com` +- **Chain ID**: 1328 + +**Mainnet** : + +- **SEI mainnet RPC**: `https://evm-rpc.sei-apis.com` +- **Chain ID**: 1329 + +## Step 1: Deploy a Storage Contract + +For this example, we'll deploy a simple Storage contract that stores and retrieves numbers. This will demonstrate gasless transactions and smart account features with EIP-7702. + +### Storage Contract (Solidity) + +```solidity +// 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; + } +} +``` + +Deploy this contract using [Remix](https://remix.ethereum.org/) or your preferred deployment tool. Note the contract address for later use. + +## Step 2: Project Setup + +### Create a New Project + +```bash +npm create vite@latest eip7702-demo -- --template react-ts +cd eip7702-demo +npm install +``` + +### Install Dependencies + +```bash +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 +VITE_STORAGE_CONTRACT_ADDRESS=your_deployed_contract_address_here +``` + +Get your Client ID from [thirdweb Dashboard](https://thirdweb.com/dashboard) → Settings → API Keys. + +### Enable Gas Sponsorship (Production) + +For mainnet gas sponsorship: + +1. Visit [thirdweb Dashboard Billing](https://thirdweb.com/dashboard/settings/billing) +2. Subscribe to the **Pay As You Go** plan ($5/month minimum) +3. Enable gas sponsorship in your project settings + +## Step 3: Configure thirdweb Client + +Create `src/client.ts`: + +```typescript +import { createThirdwebClient } from 'thirdweb'; + +export const client = createThirdwebClient({ + clientId: import.meta.env.VITE_TEMPLATE_CLIENT_ID +}); +``` + +## Step 4: Setup ThirdwebProvider + +First, update `src/main.tsx` to include the ThirdwebProvider: + +```typescript +import React from 'react' +import ReactDOM from 'react-dom/client' +import { ThirdwebProvider } from "thirdweb/react" +import App from './App.tsx' +import './index.css' + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + + + , +) +``` + +## Step 5: EIP-7702 Smart Account Implementation + +Now replace `src/App.tsx` with the complete EIP-7702 implementation: + +```typescript +import React, { useState } from "react"; +import { + ConnectButton, + TransactionButton, + useActiveAccount, + useWalletBalance, + useReadContract, +} from "thirdweb/react"; +import { inAppWallet } from "thirdweb/wallets"; +import { client } from "./client"; +import { + getContract, + prepareContractCall, + sendAndConfirmTransaction, +} from "thirdweb"; +import { defineChain } from "thirdweb/chains"; + +const { VITE_TEMPLATE_CLIENT_ID: THIRDWEB_API_KEY } = import.meta.env; +// Configure Sei network +const rpc = `https://1329.rpc.thirdweb.com/${THIRDWEB_API_KEY}`; +const seiChain = defineChain({ + id: 1329, + rpc, +}); + +// Choose your target chain - EIP-7702 enabled chains +const targetChain = seiChain; + +// Get contract address from environment +const CONTRACT_ADDRESS = import.meta.env.VITE_STORAGE_CONTRACT_ADDRESS; + +// Configure the Storage contract +const storageContract = getContract({ + client, + chain: targetChain, + address: CONTRACT_ADDRESS, +}); + +// Configure EIP-7702 enabled wallet +const wallets = [ + inAppWallet({ + auth: { + options: [ + "google", + "email", + "passkey", + "apple", + "facebook", + "discord", + "x", + "telegram", + "phone", + "guest", + ], + }, + // Enable EIP-7702 smart account features + executionMode: { + mode: "EIP7702", + sponsorGas: true, // Enable gasless transactions + }, + }), +]; + +function App() { + const account = useActiveAccount(); + const [transactionStatus, setTransactionStatus] = useState(""); + + // Get wallet balance + const { data: balance } = useWalletBalance({ + client, + chain: targetChain, + address: account?.address, + }); + + const { data: storeValue } = useReadContract({ + contract: storageContract, + method: "function retrieve() view returns (uint256)", + }); + + // Custom store function with status updates + const handleCustomStore = async (storeNumber: number) => { + if (!account) return; + + setTransactionStatus("Preparing transaction..."); + + try { + const transaction = prepareContractCall({ + contract: storageContract, + method: "function store(uint256 number)", + params: [BigInt(storeNumber)], + }); + + setTransactionStatus("Sending transaction..."); + + const result = await sendAndConfirmTransaction({ + transaction, + account, + }); + + setTransactionStatus(`Success! Transaction: ${result.transactionHash}`); + + // Reset status after 5 seconds + setTimeout(() => setTransactionStatus(""), 5000); + } catch (error) { + console.error("Store failed:", error); + setTransactionStatus( + `Error: ${ + error instanceof Error ? error.message : "Transaction failed" + }` + ); + + // Reset status after 5 seconds + setTimeout(() => setTransactionStatus(""), 5000); + } + }; + + return ( +
+
+
+

+ EIP-7702 Account Abstraction Demo +

+
+ + {/* Connection Section */} +
+

+ Connect Your Smart Account +

+

+ Connect with social login and get instant smart account features - + no wallet setup required! +

+ + + {/* Display account info */} + {account && ( +
+

+ ✅ Smart Account Connected +

+

+ Address: {account.address} +

+

+ Balance: {balance?.displayValue}{" "} + {balance?.symbol} +

+
+ )} +
+ + {account && ( + <> + {/* Contract Information */} +
+
+
+

Store Value

+
+
+

+ {storeValue?.toString() || "0"} +

+
+
+
+ + {/* Transaction Section */} +
+
+
+

Store

+ + prepareContractCall({ + contract: storageContract, + method: "function store(uint256 to)", + params: [BigInt(37)], + }) + } + onTransactionSent={(result) => { + console.log("Transaction sent:", result.transactionHash); + setTransactionStatus( + "Transaction sent, waiting for confirmation..." + ); + }} + onTransactionConfirmed={(result) => { + console.log( + "Transaction confirmed:", + result.transactionHash + ); + setTransactionStatus( + `Store was successfully! TX: ${result.transactionHash}` + ); + setTimeout(() => setTransactionStatus(""), 5000); + }} + onError={(error) => { + console.error("Transaction error:", error); + setTransactionStatus(`❌ Error: ${error.message}`); + setTimeout(() => setTransactionStatus(""), 5000); + }} + > + Store 37 + +
+
+
+ + {/* Custom Store Button */} +
+
+

+ Custom Implementation +

+ +
+
+ + {/* Status Display */} + {transactionStatus && ( +
+

Transaction Status

+

+ {transactionStatus} +

+
+ )} + + )} +
+
+ ); +} + +export default App; + +``` + +## Step 6: Package Configuration + +Update your `package.json`: + +```json +{ + "name": "eip7702-storage-abstraction-demo", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1", + "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": "^5.0.8" + } +} +``` + +## Step 7: Run the Application + +### Start Development Server + +```bash +npm run dev +``` + +### Test EIP-7702 Features + +1. **Open** `http://localhost:5173` in your browser +2. **Connect** using any social login (Google, email, etc.) +3. **Observe** the automatic smart account creation (no gas required!) +4. **Test** gasless storage operations: + - Store the predefined value (37) using the "Store 37" button + - Store custom numbers using the "Store Custom Number" button + - Read stored values displayed in the interface +5. **Monitor** console for transaction hashes and status updates +6. **Thirdweb Dashboard**: View more details in your thirdweb dashboard + +## Troubleshooting + +### Network Issues + +If experiencing connectivity problems: + +1. Check the [thirdweb status page](https://status.thirdweb.com) +2. Verify your API key is active and has sufficient credits + +## Resources + +### Documentation & Tools + +- **[thirdweb Portal](https://portal.thirdweb.com/)**: Comprehensive SDK documentation +- **[thirdweb Dashboard](https://thirdweb.com/dashboard)**: Manage projects and API keys +- **[GitHub Repository](https://github.com/thirdweb-dev)**: Source code and examples +- **[Developer Blog](https://blog.thirdweb.com/)**: Latest updates and tutorials +- **[Sei Tech Chat](https://t.me/+7N5zdbDEF7IwZWJk)**: Developer community and support From 257ebcb234216861f96d602bf8c2cca8730614a1 Mon Sep 17 00:00:00 2001 From: Shreyas Padmakiran Date: Fri, 12 Dec 2025 14:25:38 +0400 Subject: [PATCH 2/4] small touchups --- content/evm/wallet-integrations/thirdweb-7702.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/evm/wallet-integrations/thirdweb-7702.mdx b/content/evm/wallet-integrations/thirdweb-7702.mdx index 740625ca..b1bd6a28 100644 --- a/content/evm/wallet-integrations/thirdweb-7702.mdx +++ b/content/evm/wallet-integrations/thirdweb-7702.mdx @@ -86,7 +86,7 @@ VITE_TEMPLATE_CLIENT_ID=your_thirdweb_client_id_here VITE_STORAGE_CONTRACT_ADDRESS=your_deployed_contract_address_here ``` -Get your Client ID from [thirdweb Dashboard](https://thirdweb.com/dashboard) → Settings → API Keys. +Get your Client ID from [thirdweb Dashboard](https://thirdweb.com/dashboard) → Project → Overview ### Enable Gas Sponsorship (Production) From 56b68300d42eaebbdfb8e2aa0993a26137e61426 Mon Sep 17 00:00:00 2001 From: Shreyas Padmakiran Date: Fri, 12 Dec 2025 15:30:38 +0400 Subject: [PATCH 3/4] add nextra style --- content/evm/wallet-integrations/thirdweb-7702.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/content/evm/wallet-integrations/thirdweb-7702.mdx b/content/evm/wallet-integrations/thirdweb-7702.mdx index b1bd6a28..7b599c51 100644 --- a/content/evm/wallet-integrations/thirdweb-7702.mdx +++ b/content/evm/wallet-integrations/thirdweb-7702.mdx @@ -1,4 +1,7 @@ -# Account Abstraction with EIP-7702 using thirdweb +--- +title: Thirdweb EIP-7702 Integration Guide +description: Learn how to integrate thirdweb's Account Abstraction SDK with Sei network to build decentralized applications with seamless wallet connectivity. +--- ## Overview From 6fd01240ac8719b3a49c7b8434697e98836fd506 Mon Sep 17 00:00:00 2001 From: alexander-sei Date: Tue, 16 Dec 2025 16:17:30 +0100 Subject: [PATCH 4/4] add Tailwind and sall touchups --- .../evm/wallet-integrations/thirdweb-7702.mdx | 109 ++++++++++++++---- 1 file changed, 89 insertions(+), 20 deletions(-) diff --git a/content/evm/wallet-integrations/thirdweb-7702.mdx b/content/evm/wallet-integrations/thirdweb-7702.mdx index 7b599c51..03ec2c3c 100644 --- a/content/evm/wallet-integrations/thirdweb-7702.mdx +++ b/content/evm/wallet-integrations/thirdweb-7702.mdx @@ -27,17 +27,25 @@ Before starting, ensure you have: EIP-7702 is an Ethereum Improvement Proposal that introduces native account abstraction by allowing EOAs to temporarily delegate execution to smart contracts. This approach offers several advantages over traditional ERC-4337 implementations: -### Sei Network Setup +- **Same Address**: Users keep their existing EOA address—no migration to a new smart contract wallet required +- **Native Protocol Support**: Built into the protocol layer, not requiring external bundler infrastructure +- **Lower Gas Costs**: More efficient than ERC-4337 since it doesn't need separate UserOperation bundling +- **Temporary Delegation**: EOAs can temporarily act as smart contracts for a single transaction, then revert to normal behavior +- **Backward Compatible**: Works with existing wallets and infrastructure without breaking changes -**Testnet** : +## Sei Network Configuration -- **Sei testnet RPC**: `https://evm-rpc-testnet.sei-apis.com` +**Testnet:** + +- **RPC URL**: `https://evm-rpc-testnet.sei-apis.com` - **Chain ID**: 1328 +- **Block Explorer**: [Seiscan Testnet](https://testnet.seiscan.io) -**Mainnet** : +**Mainnet:** -- **SEI mainnet RPC**: `https://evm-rpc.sei-apis.com` +- **RPC URL**: `https://evm-rpc.sei-apis.com` - **Chain ID**: 1329 +- **Block Explorer**: [Seiscan](https://seiscan.io) ## Step 1: Deploy a Storage Contract @@ -80,6 +88,36 @@ npm install npm install thirdweb@^5 ``` +### Install and Configure Tailwind CSS + +Install Tailwind CSS and its dependencies: + +```bash +npm install -D tailwindcss postcss autoprefixer +npx tailwindcss init -p +``` + +Update `tailwind.config.js`: + +```javascript +/** @type {import('tailwindcss').Config} */ +export default { + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], + theme: { + extend: {} + }, + plugins: [] +}; +``` + +Replace the contents of `src/index.css` with: + +```css +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + ### Configure Environment Variables Create a `.env` file in your project root: @@ -99,7 +137,20 @@ For mainnet gas sponsorship: 2. Subscribe to the **Pay As You Go** plan ($5/month minimum) 3. Enable gas sponsorship in your project settings -## Step 3: Configure thirdweb Client +## Step 3: Configure Vite + +Create or update `vite.config.ts`: + +```typescript +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()] +}); +``` + +## Step 4: Configure thirdweb Client Create `src/client.ts`: @@ -111,7 +162,7 @@ export const client = createThirdwebClient({ }); ``` -## Step 4: Setup ThirdwebProvider +## Step 5: Setup ThirdwebProvider First, update `src/main.tsx` to include the ThirdwebProvider: @@ -131,9 +182,15 @@ ReactDOM.createRoot(document.getElementById('root')!).render( ) ``` -## Step 5: EIP-7702 Smart Account Implementation +## Step 6: EIP-7702 Smart Account Implementation + +Now replace `src/App.tsx` with the complete EIP-7702 implementation. -Now replace `src/App.tsx` with the complete EIP-7702 implementation: +**Key Configuration:** +The `executionMode` configuration enables EIP-7702 features: + +- `mode: "EIP7702"` - Enables EIP-7702 account abstraction (EOA acts as smart contract temporarily) +- `sponsorGas: true` - Enables gasless transactions (thirdweb pays gas on behalf of users) ```typescript import React, { useState } from "react"; @@ -224,7 +281,7 @@ function App() { try { const transaction = prepareContractCall({ contract: storageContract, - method: "function store(uint256 number)", + method: "function store(uint256 num)", params: [BigInt(storeNumber)], }); @@ -302,11 +359,9 @@ function App() { <> {/* Contract Information */}
-
+
-

Store Value

-
-
+

Current Stored Value

{storeValue?.toString() || "0"}

@@ -323,7 +378,7 @@ function App() { transaction={() => prepareContractCall({ contract: storageContract, - method: "function store(uint256 to)", + method: "function store(uint256 num)", params: [BigInt(37)], }) } @@ -339,7 +394,7 @@ function App() { result.transactionHash ); setTransactionStatus( - `Store was successfully! TX: ${result.transactionHash}` + `Stored successfully! TX: ${result.transactionHash}` ); setTimeout(() => setTransactionStatus(""), 5000); }} @@ -396,7 +451,7 @@ export default App; ``` -## Step 6: Package Configuration +## Step 7: Package Configuration Update your `package.json`: @@ -419,13 +474,16 @@ Update your `package.json`: "@types/react": "^18.2.56", "@types/react-dom": "^18.2.19", "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.18", + "postcss": "^8.4.35", + "tailwindcss": "^3.4.1", "typescript": "^5.2.2", "vite": "^5.0.8" } } ``` -## Step 7: Run the Application +## Step 8: Run the Application ### Start Development Server @@ -453,13 +511,24 @@ If experiencing connectivity problems: 1. Check the [thirdweb status page](https://status.thirdweb.com) 2. Verify your API key is active and has sufficient credits +3. Ensure you're connected to the correct network (Chain ID 1329 for mainnet, 1328 for testnet) + +### Transaction Verification + +After a successful transaction, you can verify it on the block explorer: + +- **Mainnet**: [Seiscan](https://seiscan.io) +- **Testnet**: [Seiscan Testnet](https://testnet.seiscan.io) + +Search for your transaction hash to see full details including gas used, status, and event logs. ## Resources -### Documentation & Tools +### thirdweb Documentation & Tools - **[thirdweb Portal](https://portal.thirdweb.com/)**: Comprehensive SDK documentation +- **[EIP-7702 Documentation](https://portal.thirdweb.com/connect/account-abstraction/eip-7702)**: Official thirdweb EIP-7702 guide - **[thirdweb Dashboard](https://thirdweb.com/dashboard)**: Manage projects and API keys - **[GitHub Repository](https://github.com/thirdweb-dev)**: Source code and examples - **[Developer Blog](https://blog.thirdweb.com/)**: Latest updates and tutorials -- **[Sei Tech Chat](https://t.me/+7N5zdbDEF7IwZWJk)**: Developer community and support +- **[EIP-7702 Specification](https://eips.ethereum.org/EIPS/eip-7702)**: Official Ethereum Improvement Proposal