update modules, fix pimlico, use baseSepolia, update NFT (#3)

.env.example

@@ -1,3 +1,8 @@
+# base sepolia privy app_id
 NEXT_PUBLIC_PRIVY_APP_ID=
+
+# base sepolia rpc url from https://dashboard.pimlico.io/apikeys 
 NEXT_PUBLIC_PIMLICO_PAYMASTER_URL=
+
+# base sepolia rpc url from https://dashboard.pimlico.io/apikeys 
 NEXT_PUBLIC_PIMLICO_BUNDLER_URL=

README.md

@@ -24,7 +24,7 @@ git clone https://github.com/<your-github-handle>/permissionless-example
 npm i 
 ```
 
-3. Initialize your environment variables by copying the `.env.example` file to an `.env.local` file. Then, in `.env.local`, paste your **Privy App ID** from the [Privy console](https://console.privy.io) and your **Pimlico Bundler and Paymaster URLs** from the [Pimlico dashboard](https://dashboard.pimlico.io/). This app uses the **Base Goerli** testnet; you should make sure to apply the same settings to your Pimlico configuration in the dashboard. 
+3. Initialize your environment variables by copying the `.env.example` file to an `.env.local` file. Then, in `.env.local`, paste your **Privy App ID** from the [Privy console](https://console.privy.io) and your **Pimlico Bundler and Paymaster URLs** from the [Pimlico dashboard](https://dashboard.pimlico.io/). This app uses the **Base Sepolia** testnet; you should make sure to apply the same settings to your Pimlico configuration in the dashboard. 
 
 ```sh
 # In your terminal, create .env.local from .env.example

hooks/SmartAccountContext.tsx

@@ -1,23 +1,31 @@
 import React, { useState, useEffect, useContext } from "react";
 import { ConnectedWallet, useWallets } from "@privy-io/react-auth";
+import { createPublicClient, createWalletClient, custom, http } from "viem";
+import { baseSepolia } from "viem/chains";
+import { Address, Chain, Transport } from "viem";
+import { SmartAccount } from "permissionless/accounts";
 import {
-  createPublicClient,
-  createWalletClient,
-  custom,
-  http,
-} from "viem";
-import { baseGoerli } from "viem/chains";
-import { walletClientToCustomSigner, type SmartAccountClient, createSmartAccountClient } from "permissionless";
+  walletClientToSmartAccountSigner,
+  type SmartAccountClient,
+  createSmartAccountClient,
+  ENTRYPOINT_ADDRESS_V06,
+} from "permissionless";
+import { EntryPoint } from "permissionless/types";
 import { signerToSimpleSmartAccount } from "permissionless/accounts";
 import { createPimlicoPaymasterClient } from "permissionless/clients/pimlico";
-import { BASE_GOERLI_ENTRYPOINT_ADDRESS, SMART_ACCOUNT_FACTORY_ADDRESS } from "../lib/constants";
+import { SMART_ACCOUNT_FACTORY_ADDRESS } from "../lib/constants";
 
 /** Interface returned by custom `useSmartAccount` hook */
 interface SmartAccountInterface {
   /** Privy embedded wallet, used as a signer for the smart account */
   eoa: ConnectedWallet | undefined;
   /** Smart account client to send signature/transaction requests to the smart account */
-  smartAccountClient: SmartAccountClient | undefined;
+  smartAccountClient:
+    | SmartAccountClient<EntryPoint, Transport, Chain, SmartAccount<EntryPoint>>
+    | Transport
+    | any
+    | SmartAccount<EntryPoint, string, Transport, Chain>
+    | null;
   /** Smart account address */
   smartAccountAddress: `0x${string}` | undefined;
   /** Boolean to indicate whether the smart account state has initialized */
@@ -41,14 +49,24 @@ export const SmartAccountProvider = ({
   children: React.ReactNode;
 }) => {
   // Get a list of all of the wallets (EOAs) the user has connected to your site
-  const {wallets} = useWallets();
+  const { wallets } = useWallets();
   // Find the embedded wallet by finding the entry in the list with a `walletClientType` of 'privy'
-  const embeddedWallet = wallets.find((wallet) => wallet.walletClientType === "privy");
+  const embeddedWallet = wallets.find(
+    (wallet) => wallet.walletClientType === "privy"
+  );
 
   // States to store the smart account and its status
   const [eoa, setEoa] = useState<ConnectedWallet | undefined>();
-  const [smartAccountClient, setSmartAccountClient] = useState<SmartAccountClient | undefined>();
-  const [smartAccountAddress, setSmartAccountAddress] = useState<`0x${string}` | undefined>();
+  const [smartAccountClient, setSmartAccountClient] = useState<
+    | SmartAccountClient<EntryPoint, Transport, Chain, SmartAccount<EntryPoint>>
+    | Transport
+    | any
+    | SmartAccount<EntryPoint, string, Transport, Chain>
+    | null
+  >();
+  const [smartAccountAddress, setSmartAccountAddress] = useState<
+    `0x${string}` | undefined
+  >();
   const [smartAccountReady, setSmartAccountReady] = useState(false);
 
   useEffect(() => {
@@ -60,32 +78,39 @@ export const SmartAccountProvider = ({
       const eip1193provider = await eoa.getEthereumProvider();
       const privyClient = createWalletClient({
         account: eoa.address as `0x${string}`,
-        chain: baseGoerli,
+        chain: baseSepolia,
         transport: custom(eip1193provider),
       });
 
-      const customSigner = walletClientToCustomSigner(privyClient);
-
-      const publicClient = createPublicClient({ 
-        chain: baseGoerli, // Replace this with the chain of your app
-        transport: http()
-      })
+      const customSigner = walletClientToSmartAccountSigner(privyClient);
 
-      const simpleSmartAccount = await signerToSimpleSmartAccount(publicClient, {
-        entryPoint: BASE_GOERLI_ENTRYPOINT_ADDRESS,
-        signer: customSigner,
-        factoryAddress: SMART_ACCOUNT_FACTORY_ADDRESS,
+      const publicClient = createPublicClient({
+        chain: baseSepolia, // Replace this with the chain of your app
+        transport: http(),
       });
 
+      const simpleSmartAccount = await signerToSimpleSmartAccount(
+        publicClient,
+        {
+          entryPoint: ENTRYPOINT_ADDRESS_V06,
+          signer: customSigner,
+          factoryAddress: SMART_ACCOUNT_FACTORY_ADDRESS! as Address,
+        }
+      );
+
       const pimlicoPaymaster = createPimlicoPaymasterClient({
+        chain: baseSepolia,
         transport: http(process.env.NEXT_PUBLIC_PIMLICO_PAYMASTER_URL),
+        entryPoint: ENTRYPOINT_ADDRESS_V06,
       });
 
       const smartAccountClient = createSmartAccountClient({
         account: simpleSmartAccount,
-        chain: baseGoerli, // Replace this with the chain for your app
-        transport: http(process.env.NEXT_PUBLIC_PIMLICO_BUNDLER_URL),
-        sponsorUserOperation: pimlicoPaymaster.sponsorUserOperation // If your app uses a paymaster for gas sponsorship
+        chain: baseSepolia, // Replace this with the chain for your app
+        bundlerTransport: http(process.env.NEXT_PUBLIC_PIMLICO_BUNDLER_URL),
+        middleware: {
+          sponsorUserOperation: pimlicoPaymaster.sponsorUserOperation, // If your app uses a paymaster for gas sponsorship
+        },
       });
 
       const smartAccountAddress = smartAccountClient.account?.address;
@@ -98,7 +123,6 @@ export const SmartAccountProvider = ({
     if (embeddedWallet) createSmartWallet(embeddedWallet);
   }, [embeddedWallet?.address]);
 
-
   return (
     <SmartAccountContext.Provider
       value={{

lib/constants.ts

@@ -1,8 +1,7 @@
-export const SMART_ACCOUNT_FACTORY_ADDRESS = "0x9406Cc6185a346906296840746125a0E44976454";
-export const BASE_GOERLI_ENTRYPOINT_ADDRESS = "0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789";
-// Sample NFT pulled from https://docs.base.org/guides/deploy-smart-contracts#verifying-the-smart-contract
-export const NFT_ADDRESS = "0x6527E5052de5521fE370AE5ec0aFCC6cD5a221de";
-
-
-export const BASE_GOERLI_SCAN_URL = "https://goerli.basescan.org";
+// Base Sepolia Factory Address https://docs.alchemy.com/reference/factory-addresses
+export const SMART_ACCOUNT_FACTORY_ADDRESS =
+  "0x15Ba39375ee2Ab563E8873C8390be6f2E2F50232";
+// Sample NFT deployed to Base Sepolia, pulled from https://docs.base.org/guides/deploy-smart-contracts#verifying-the-smart-contract
+export const NFT_ADDRESS = "0x3331AfB9805ccF5d6cb1657a8deD0677884604A7";
 
+export const BASE_SEPOLIA_SCAN_URL = "https://sepolia.basescan.org";