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..03ec2c3c --- /dev/null +++ b/content/evm/wallet-integrations/thirdweb-7702.mdx @@ -0,0 +1,534 @@ +--- +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 + +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: + +- **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 + +## Sei Network Configuration + +**Testnet:** + +- **RPC URL**: `https://evm-rpc-testnet.sei-apis.com` +- **Chain ID**: 1328 +- **Block Explorer**: [Seiscan Testnet](https://testnet.seiscan.io) + +**Mainnet:** + +- **RPC URL**: `https://evm-rpc.sei-apis.com` +- **Chain ID**: 1329 +- **Block Explorer**: [Seiscan](https://seiscan.io) + +## 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 +``` + +### 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: + +```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) → Project → Overview + +### 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 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`: + +```typescript +import { createThirdwebClient } from 'thirdweb'; + +export const client = createThirdwebClient({ + clientId: import.meta.env.VITE_TEMPLATE_CLIENT_ID +}); +``` + +## Step 5: 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 6: EIP-7702 Smart Account 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"; +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 num)", + 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 */} +
+
+
+

Current Stored Value

+

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

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

Store

+ + prepareContractCall({ + contract: storageContract, + method: "function store(uint256 num)", + 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( + `Stored 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 7: 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", + "autoprefixer": "^10.4.18", + "postcss": "^8.4.35", + "tailwindcss": "^3.4.1", + "typescript": "^5.2.2", + "vite": "^5.0.8" + } +} +``` + +## Step 8: 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 +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 + +### 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 +- **[EIP-7702 Specification](https://eips.ethereum.org/EIPS/eip-7702)**: Official Ethereum Improvement Proposal