Nextjs app + ZeroDev

.gitignore

@@ -1 +1,2 @@
 node_modules
+.idea/

examples/connectkit-vite/package.json

@@ -15,8 +15,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "viem": "2.x",
-    "wagmi": "^2.14.9",
-    "dynamic-global-wallet": "workspace:*"
+    "wagmi": "^2.14.9"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

examples/connectkit-vite/src/main.tsx

@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import { WagmiProvider, createConfig, http } from "wagmi";
-import { mainnet } from "wagmi/chains";
+import { seiTestnet } from "wagmi/chains";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   ConnectKitButton,
@@ -16,12 +16,10 @@ import "dynamic-global-wallet/solana";
 const config = createConfig(
   getDefaultConfig({
     // Your dApps chains
-    chains: [mainnet],
+    chains: [seiTestnet],
     transports: {
       // RPC URL for each chain
-      [mainnet.id]: http(
-        `https://eth-mainnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_ID}`
-      ),
+      [seiTestnet.id]: http(),
     },
 
     // Required API Keys

examples/dynamic-nextjs/app/components/Methods.js

@@ -3,8 +3,12 @@ import { useState, useEffect } from 'react';
 import { useDynamicContext, useIsLoggedIn, useUserWallets } from "@dynamic-labs/sdk-react-core";
 import { isEthereumWallet } from '@dynamic-labs/ethereum'
 import { isSolanaWallet } from '@dynamic-labs/solana'
+import { encodeFunctionData } from 'viem';
+import { createKernelClient } from "@sei-js/sei-global-wallet/zerodev";
+import gw from '@sei-js/sei-global-wallet'
 
 import './Methods.css';
+import {PaymasterTypeEnum} from "@dynamic-labs/ethereum-aa";
 
 export default function DynamicMethods({ isDarkMode }) {
   const isLoggedIn = useIsLoggedIn();
@@ -13,7 +17,6 @@ export default function DynamicMethods({ isDarkMode }) {
   const [isLoading, setIsLoading] = useState(true);
   const [result, setResult] = useState('');
 
-
   const safeStringify = (obj) => {
     const seen = new WeakSet();
     return JSON.stringify(obj, (key, value) => {
@@ -92,6 +95,140 @@ export default function DynamicMethods({ isDarkMode }) {
     }
 
 
+    async function interactWithCounter() {
+        try {
+
+            setResult('Creating ZeroDev kernel client for AA transaction...');
+
+            const contractAddress = '0x5bed1d02dc4c1696b1167e78254686d54bcb8a5a';
+            const contractABI = [
+                {
+                    inputs: [],
+                    name: 'increment',
+                    outputs: [],
+                    stateMutability: 'nonpayable',
+                    type: 'function',
+                },
+                {
+                    inputs: [],
+                    name: 'getCount',
+                    outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
+                    stateMutability: 'view',
+                    type: 'function',
+                },
+            ];
+
+            const publicClient = await primaryWallet.getPublicClient();
+
+            // First, read the current count
+            const currentCount = await publicClient.readContract({
+                address: contractAddress,
+                abi: contractABI,
+                functionName: 'getCount',
+            });
+
+            setResult(`Current count: ${currentCount}\nSetting up ZeroDev Account Abstraction with extensive logging...`);
+
+            try {
+                console.log('🔧 Step 1: Importing ZeroDev SDK and viem dependencies...');
+
+                // Try to import the required functions and constants
+
+                const smartWallet = gw.wallets[0]
+
+                // Check if this is a smart wallet (AA-enabled)
+                console.log('Smart wallet:', smartWallet);
+                console.log('Wallet keys:', Object.keys(smartWallet));
+
+                const kernelClient = await createKernelClient({
+                    wallet: smartWallet,
+                    paymaster: PaymasterTypeEnum.SPONSOR,
+                    paymasterRpc: 'https://rpc.zerodev.app/api/v2/paymaster/e4f5bff6-c521-4b69-adce-7102b6b240d2?selfFunded=true',
+                });
+                const { account } = kernelClient;
+
+                console.log('Kernel client', kernelClient)
+                console.log('Account:', account);
+
+                setResult(`Current count: ${currentCount}\nZeroDev setup complete! Sending AA transaction...`);
+
+                console.log('✅ Step 3: User operation prepared');
+
+                console.log('🚀 Step 4: Sending user operation...');
+
+
+                const hash = await kernelClient.sendUserOperation({
+                    callData: await kernelClient.account.encodeCalls([{
+                        to: primaryWallet.address,
+                        value: BigInt(0),
+                        data: "0x", // Empty data for simple ETH transfer
+                    }])
+                })
+                console.log('🚀 User operation sent!');
+                console.log('User operation hash:', hash);
+
+                setResult(`AA Transaction sent!\nUser Operation Hash: ${hash}\nWaiting for confirmation...`);
+
+                console.log('⏳ Step 5: Waiting for user operation receipt...');
+                // Wait for the user operation to be mined
+                await new Promise(resolve => setTimeout(resolve, 5000));
+
+                console.log('📖 Step 6: Reading new count...');
+                const newCount = await publicClient.readContract({
+                    address: contractAddress,
+                    abi: contractABI,
+                    functionName: 'getCount',
+                });
+                console.log('New count:', newCount);
+
+                setResult(
+                    `✅ Counter incremented successfully with ZeroDev Account Abstraction!\n\n` +
+                    `Previous count: ${currentCount}\n` +
+                    `New count: ${newCount}\n\n` +
+                    `🎉 Transaction was sponsored (gas-free)!\n` +
+                    `🔗 Using ZeroDev v5 with ERC-4337\n` +
+                    `⛽ Paymaster: Gas sponsored\n`
+                );
+
+            } catch (aaError) {
+                console.error('❌ ZeroDev AA Error:', aaError);
+                console.error('Error stack:', aaError.stack);
+
+                // Fallback to regular transaction
+                console.log('🔄 Falling back to regular transaction...');
+
+                const walletClient = await primaryWallet.getWalletClient();
+                const hash = await walletClient.writeContract({
+                    address: contractAddress,
+                    abi: contractABI,
+                    functionName: 'increment',
+                });
+
+                const receipt = await publicClient.waitForTransactionReceipt({ hash });
+                const newCount = await publicClient.readContract({
+                    address: contractAddress,
+                    abi: contractABI,
+                    functionName: 'getCount',
+                });
+
+                setResult(
+                    `⚠️ ZeroDev AA failed, used regular transaction instead\n\n` +
+                    `AA Error: ${aaError.message}\n\n` +
+                    `Previous count: ${currentCount}\n` +
+                    `New count: ${newCount}\n\n` +
+                    `Transaction hash: ${hash}\n` +
+                    `Block: ${receipt.blockNumber}\n` +
+                    `Gas used: ${receipt.gasUsed}`
+                );
+            }
+
+        } catch (error) {
+            console.error('AA Counter interaction error:', error);
+            setResult(`Error: ${error.message}\n\nNote: Make sure you have a smart wallet (AA-enabled) and @zerodev/sdk is installed.`);
+        }
+    }
+
+
 
    return (
     <>
@@ -101,12 +238,12 @@ export default function DynamicMethods({ isDarkMode }) {
             <button className="btn btn-primary" onClick={showUser}>Fetch User</button>
             <button className="btn btn-primary" onClick={showUserWallets}>Fetch User Wallets</button>
 
-            
+
     {primaryWallet && isEthereumWallet(primaryWallet) &&
       <>
         <button className="btn btn-primary" onClick={fetchPublicClient}>Fetch Public Client</button>
         <button className="btn btn-primary" onClick={fetchWalletClient}>Fetch Wallet Client</button>
-        <button className="btn btn-primary" onClick={signEthereumMessage}>Sign "Hello World" on Ethereum</button>    
+        <button className="btn btn-primary" onClick={signEthereumMessage}>Sign "Hello World" on Ethereum</button>
       </>
     }
 
@@ -115,10 +252,16 @@ export default function DynamicMethods({ isDarkMode }) {
       <>
         <button className="btn btn-primary" onClick={fetchConnection}>Fetch Connection</button>
         <button className="btn btn-primary" onClick={fetchSigner}>Fetch Signer</button>
-          <button className="btn btn-primary" onClick={signSolanaMessage}>Sign "Hello World" on Solana</button>    
+          <button className="btn btn-primary" onClick={signSolanaMessage}>Sign "Hello World" on Solana</button>
       </>
   }
 
+    {primaryWallet && isEthereumWallet(primaryWallet) &&
+      <>
+        <button className="btn btn-primary" onClick={interactWithCounter}>Increment Counter Contract</button>
+      </>
+    }
+
         </div>
           {result && (
             <div className="results-container">
@@ -134,4 +277,4 @@ export default function DynamicMethods({ isDarkMode }) {
       )}
     </>
   );
-}
+}

examples/dynamic-nextjs/app/layout.tsx

@@ -7,8 +7,7 @@ import Providers from "@/lib/providers";
 
 const inter = Inter({ subsets: ["latin"] });
 
-import "dynamic-global-wallet/ethereum";
-import "dynamic-global-wallet/solana";
+import "@sei-js/sei-global-wallet/ethereum";
 
 export default function RootLayout({
   children,

examples/dynamic-nextjs/lib/providers.tsx

@@ -3,14 +3,15 @@
 import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
 import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
 import { SolanaWalletConnectors } from "@dynamic-labs/solana";
+import { ZeroDevSmartWalletConnectors } from "@dynamic-labs/ethereum-aa";
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <DynamicContextProvider
       theme="auto"
       settings={{
-        environmentId: "2762a57b-faa4-41ce-9f16-abff9300e2c9",
-        walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors],
+        environmentId: "f981dab3-486c-4fd9-8e35-0a3cc32f263d",
+        walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors, ZeroDevSmartWalletConnectors],
       }}
     >
       {children}

examples/dynamic-nextjs/package.json

@@ -9,26 +9,31 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "next": "15.1.6",
-    "@dynamic-labs/sdk-react-core": "*",
-    "viem": "*",
+    "@dynamic-labs/client": "^4.28.0",
     "@dynamic-labs/ethereum": "*",
+    "@dynamic-labs/ethereum-aa": "*",
+    "@dynamic-labs/sdk-react-core": "*",
     "@dynamic-labs/solana": "*",
+    "@dynamic-labs/viem-extension": "^4.28.0",
+    "@dynamic-labs/zerodev-extension": "^4.28.0",
+    "@sei-js/sei-global-wallet": "file:/Users/denyssinyakov/repos/sei-js/packages/sei-global-wallet/sei-js-sei-global-wallet-1.3.13.tgz",
     "crypto-browserify": "^3.12.0",
-    "stream-browserify": "^3.0.0",
+    "dynamic-global-wallet": "workspace:*",
+    "next": "15.1.6",
     "process": "^0.11.10",
-    "dynamic-global-wallet": "workspace:*"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "stream-browserify": "^3.0.0",
+    "viem": "^2.28.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^9",
     "eslint-config-next": "15.1.6",
-    "@eslint/eslintrc": "^3"
+    "typescript": "^5"
   },
   "browser": {
     "crypto": false

examples/dynamic-vite/package.json

@@ -13,7 +13,6 @@
     "@dynamic-labs/ethereum": "*",
     "@dynamic-labs/sdk-react-core": "*",
     "@dynamic-labs/solana": "*",
-    "dynamic-global-wallet": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "viem": "*"

examples/dynamic-vite/src/App.tsx

@@ -13,7 +13,7 @@ function App() {
     <DynamicContextProvider
       theme="auto"
       settings={{
-        environmentId: "2762a57b-faa4-41ce-9f16-abff9300e2c9",
+        environmentId: "c45837f2-68a5-4e36-9183-f2de1bf73547",
         walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors],
       }}
     >

examples/privy-vite/package.json

@@ -12,8 +12,7 @@
   "dependencies": {
     "@privy-io/react-auth": "^2.2.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "dynamic-global-wallet": "workspace:*"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

examples/rainbowkit-vite/src/main.tsx

@@ -9,7 +9,7 @@ import {
   RainbowKitProvider,
 } from "@rainbow-me/rainbowkit";
 import { WagmiProvider } from "wagmi";
-import { mainnet, polygon, optimism, arbitrum, base } from "wagmi/chains";
+import { seiTestnet, polygon, optimism, arbitrum, base } from "wagmi/chains";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 
 import "dynamic-global-wallet/ethereum";
@@ -20,7 +20,7 @@ const queryClient = new QueryClient();
 const config = getDefaultConfig({
   appName: "My RainbowKit App",
   projectId: "YOUR_PROJECT_ID",
-  chains: [mainnet, polygon, optimism, arbitrum, base],
+  chains: [seiTestnet, polygon, optimism, arbitrum, base],
   ssr: true, // If your dApp uses server side rendering (SSR)
 });