diff --git a/templates/nextjs/advanced-permissions-starter/README.md b/templates/nextjs/advanced-permissions-starter/README.md index 3cf1839..9e968e3 100644 --- a/templates/nextjs/advanced-permissions-starter/README.md +++ b/templates/nextjs/advanced-permissions-starter/README.md @@ -1,6 +1,6 @@ # MetaMask Advanced Permissions (ERC-7715) Starter -This is a NextJS MetaMask Advanced Permissions (ERC-7715) starter created with [@metamask/create-gator-app](https://www.npmjs.com/package/@metamask/create-gator-app). +This is a NextJS MetaMask Advanced Permissions (ERC-7715) starter created with [`@metamask/create-gator-app`](https://www.npmjs.com/package/@metamask/create-gator-app). This template is meant to help you bootstrap your own projects with [Advanced Permissions (ERC-7715)](https://docs.metamask.io/smart-accounts-kit/guides/advanced-permissions/execute-on-metamask-users-behalf/). It helps you build a dApp with ERC-7715 support to request permissions and redeem them. @@ -9,13 +9,13 @@ Learn more about [ERC-7715](https://eips.ethereum.org/EIPS/eip-7715). ## Prerequisites -1. **Pimlico API Key**: In this template, you’ll use Pimlico’s - bundler and paymaster services to submit user operations and - sponsor transactions. You can get your API key from [Pimlico’s dashboard](https://dashboard.pimlico.io/apikeys). +1. **Pimlico API Key**: In this template, we use Pimlico's Bundler and Paymaster services to submit user + operations and sponsor transactions, respectively. You can retrieve the required API key + from the [Pimlico Dashboard](https://dashboard.pimlico.io/apikeys). 2. **RPC URL** In this template, you’ll need an RPC URL for the Sepolia chain. You can use a public - RPC or any provider of your choice, but we recommend using a paid RPC for better reliability and to - avoid rate-limiting issues. + RPC or any provider of your choice, but we recommend using a paid RPC for better reliability + and to avoid rate-limiting issues. ## Project structure @@ -63,7 +63,7 @@ NEXT_PUBLIC_RPC_URL = ## Getting started -First, start the development server using the package manager you chose during setup. +First, start the development server: ```bash npm run dev @@ -87,5 +87,5 @@ This template demonstrates a complete Advanced Permissions (ERC-7715) flow: To learn more about Smart Accounts Kit, take a look at the following resources: -- [Advanced Permissions (ERC-7715) guide](https://docs.metamask.io/smart-accounts-kit/guides/advanced-permissions/execute-on-metamask-users-behalf/) - Learn how to use ERC-7715 permissions. +- [Advanced Permissions (ERC-7715) guide](https://docs.metamask.io/smart-accounts-kit/guides/advanced-permissions/execute-on-metamask-users-behalf/) - Learn how to use MetaMask Advanced Permissions. - [Smart Accounts Kit Documentation](https://docs.metamask.io/smart-accounts-kit/) - Learn more about Smart Accounts Kit features and API. diff --git a/templates/nextjs/advanced-permissions-starter/package.json b/templates/nextjs/advanced-permissions-starter/package.json index f319ccc..9201fb8 100644 --- a/templates/nextjs/advanced-permissions-starter/package.json +++ b/templates/nextjs/advanced-permissions-starter/package.json @@ -9,16 +9,17 @@ "start": "next start" }, "dependencies": { - "@metamask/smart-accounts-kit": "^0.3.0", + "@metamask/sdk": "~0.33.1", + "@metamask/smart-accounts-kit": "^1.0.0", "@tailwindcss/postcss": "^4.1.1", - "@tanstack/react-query": "^5.90.7", + "@tanstack/react-query": "^5.90.21", "lucide-react": "^0.487.0", "next": "15.4.10", - "permissionless": "^0.2.46", + "permissionless": "^0.3.4", "react": "^19.0.0", "react-dom": "^19.0.0", - "viem": "^2.38.6", - "wagmi": "^2.19.2" + "viem": "^2.46.1", + "wagmi": "3.4.4" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/templates/nextjs/advanced-permissions-starter/src/components/ConnectButton.tsx b/templates/nextjs/advanced-permissions-starter/src/components/ConnectButton.tsx index d9d80c2..a42dc7b 100644 --- a/templates/nextjs/advanced-permissions-starter/src/components/ConnectButton.tsx +++ b/templates/nextjs/advanced-permissions-starter/src/components/ConnectButton.tsx @@ -1,12 +1,12 @@ "use client"; -import { useAccount, useChainId, useConnect, useSwitchChain } from "wagmi"; +import { useChainId, useConnect, useConnection, useSwitchChain } from "wagmi"; import Button from "@/components/Button"; import { metaMask } from "wagmi/connectors"; export default function ConnectButton() { - const { connect } = useConnect(); - const { chainId: connectedChainId, isConnected } = useAccount(); + const connect = useConnect(); + const { chainId: connectedChainId, isConnected } = useConnection(); const { switchChain } = useSwitchChain(); const currentChainId = useChainId(); @@ -19,7 +19,7 @@ export default function ConnectButton() { } return ( - ); diff --git a/templates/nextjs/advanced-permissions-starter/src/components/GrantPermissionsButton.tsx b/templates/nextjs/advanced-permissions-starter/src/components/GrantPermissionsButton.tsx index 72cc7d9..f5f0dcb 100644 --- a/templates/nextjs/advanced-permissions-starter/src/components/GrantPermissionsButton.tsx +++ b/templates/nextjs/advanced-permissions-starter/src/components/GrantPermissionsButton.tsx @@ -51,17 +51,10 @@ export default function GrantPermissionsButton() { const currentTime = Math.floor(Date.now() / 1000); // 30 days in seconds const expiry = currentTime + 24 * 60 * 60 * 30; - const permissions = await client.requestExecutionPermissions([{ chainId, expiry, - signer: { - type: "account", - data: { - address: sessionAccount.address, - }, - }, - isAdjustmentAllowed, + to: sessionAccount.address, permission: { type: "native-token-periodic", data: { @@ -71,6 +64,7 @@ export default function GrantPermissionsButton() { periodDuration: 86400, justification: "Permission to transfer 0.001 ETH every day", }, + isAdjustmentAllowed }, }]); savePermission(permissions[0]); diff --git a/templates/nextjs/advanced-permissions-starter/src/components/PermissionInfo.tsx b/templates/nextjs/advanced-permissions-starter/src/components/PermissionInfo.tsx index d39fbe5..f459fa5 100644 --- a/templates/nextjs/advanced-permissions-starter/src/components/PermissionInfo.tsx +++ b/templates/nextjs/advanced-permissions-starter/src/components/PermissionInfo.tsx @@ -27,7 +27,7 @@ export default function PermissionInfo() { 
-            {JSON.stringify(permission, null, 2)}
+            {JSON.stringify(permission, (_, v) => typeof v === "bigint" ? v.toString() : v, 2)}
diff --git a/templates/nextjs/advanced-permissions-starter/src/components/RedeemPermissionButton.tsx b/templates/nextjs/advanced-permissions-starter/src/components/RedeemPermissionButton.tsx index ba609a5..af1417b 100644 --- a/templates/nextjs/advanced-permissions-starter/src/components/RedeemPermissionButton.tsx +++ b/templates/nextjs/advanced-permissions-starter/src/components/RedeemPermissionButton.tsx @@ -8,7 +8,7 @@ import { useSessionAccount } from "@/providers/SessionAccountProvider"; import { usePermissions } from "@/providers/PermissionProvider"; import { Loader2, CheckCircle, ExternalLink } from "lucide-react"; import Button from "@/components/Button"; -import { useAccount, usePublicClient } from "wagmi"; +import { useConnection, usePublicClient } from "wagmi"; export default function RedeemPermissionButton() { const [loading, setLoading] = useState(false); @@ -17,7 +17,7 @@ export default function RedeemPermissionButton() { const { sessionAccount } = useSessionAccount(); const { permission } = usePermissions(); const publicClient = usePublicClient(); - const { chain } = useAccount(); + const { chain } = useConnection(); /** * Handles the redemption of delegation permissions. @@ -30,18 +30,11 @@ export default function RedeemPermissionButton() { setLoading(true); try { - const { context, signerMeta } = permission; - - if (!signerMeta) { - console.error("No signer meta found"); - setLoading(false); - return; - } - const { delegationManager } = signerMeta; + const { context, delegationManager } = permission; // Validate required parameters if (!context || !delegationManager) { - console.error("Missing required parameters for delegation"); + console.error("Missing required parameters for redeem permission"); setLoading(false); return; } @@ -67,7 +60,7 @@ export default function RedeemPermissionButton() { to: sessionAccount.address, data: '0x', value: 1n, - permissionsContext: context, + permissionContext: context, delegationManager, }, ], @@ -79,8 +72,6 @@ export default function RedeemPermissionButton() { }); setTxHash(receipt.transactionHash); - - console.log(receipt); } catch (error) { console.error(error); } finally { diff --git a/templates/nextjs/advanced-permissions-starter/src/components/Steps.tsx b/templates/nextjs/advanced-permissions-starter/src/components/Steps.tsx index a1cb494..7308b40 100644 --- a/templates/nextjs/advanced-permissions-starter/src/components/Steps.tsx +++ b/templates/nextjs/advanced-permissions-starter/src/components/Steps.tsx @@ -7,13 +7,13 @@ import RedeemPermissionButton from "@/components/RedeemPermissionButton"; import GrantPermissionsButton from "./GrantPermissionsButton"; import { useSessionAccount } from "@/providers/SessionAccountProvider"; import { usePermissions } from "@/providers/PermissionProvider"; -import { useAccount, useChainId } from "wagmi"; +import { useConnection, useChainId } from "wagmi"; export default function Steps() { const [step, setStep] = useState(1); const { sessionAccount } = useSessionAccount(); const { permission } = usePermissions(); - const { isConnected, chainId: connectedChainId } = useAccount(); + const { isConnected, chainId: connectedChainId } = useConnection(); const currentChainId = useChainId(); useEffect(() => { diff --git a/templates/nextjs/advanced-permissions-starter/src/components/WalletInfo.tsx b/templates/nextjs/advanced-permissions-starter/src/components/WalletInfo.tsx index 01a448a..23de9ff 100644 --- a/templates/nextjs/advanced-permissions-starter/src/components/WalletInfo.tsx +++ b/templates/nextjs/advanced-permissions-starter/src/components/WalletInfo.tsx @@ -2,7 +2,7 @@ import { Address, formatEther } from "viem"; import { ExternalLink } from "lucide-react"; -import { useAccount, useBalance } from "wagmi"; +import { useConnection, useBalance } from "wagmi"; interface WalletInfoProps { address: Address; @@ -11,7 +11,7 @@ interface WalletInfoProps { export default function WalletInfo({ address, label }: WalletInfoProps) { const { data: balance, isLoading } = useBalance({ address }); - const { chain } = useAccount(); + const { chain } = useConnection(); const viewOnEtherscan = () => { window.open(`${chain?.blockExplorers?.default?.url}/address/${address}`, "_blank"); diff --git a/templates/nextjs/advanced-permissions-starter/src/components/WalletInfoContainer.tsx b/templates/nextjs/advanced-permissions-starter/src/components/WalletInfoContainer.tsx index fbf4c6a..9640139 100644 --- a/templates/nextjs/advanced-permissions-starter/src/components/WalletInfoContainer.tsx +++ b/templates/nextjs/advanced-permissions-starter/src/components/WalletInfoContainer.tsx @@ -2,11 +2,11 @@ import { useSessionAccount } from "@/providers/SessionAccountProvider"; import WalletInfo from "@/components/WalletInfo"; -import { useAccount } from "wagmi"; +import { useConnection } from "wagmi"; export default function WalletInfoContainer() { const { sessionAccount } = useSessionAccount(); - const { address } = useAccount(); + const { address } = useConnection(); return (
diff --git a/templates/nextjs/delegation-starter/README.md b/templates/nextjs/delegation-starter/README.md index 89c193b..8e76cf4 100644 --- a/templates/nextjs/delegation-starter/README.md +++ b/templates/nextjs/delegation-starter/README.md @@ -2,19 +2,19 @@ This is a NextJS MetaMask Smart Accounts & Delegation template created with [`@metamask/create-gator-app`](https://npmjs.com/package/@metamask/create-gator-app). -This template is meant to help you bootstrap your own projects with Metamask Smart Acounts. It helps you build smart accounts with account abstraction, and powerful delegation features. +This template is meant to help you bootstrap your own projects with MetaMask Smart Accounts. It helps you build smart accounts with account abstraction, and powerful delegation features. -Learn more about [Metamask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/). +Learn more about [MetaMask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/). ## Prerequisites -1. **Pimlico API Key**: In this template, you’ll use Pimlico’s - bundler and paymaster services to submit user operations and - sponsor transactions. You can get your API key from [Pimlico’s dashboard](https://dashboard.pimlico.io/apikeys). +1. **Pimlico API Key**: In this template, we use Pimlico's Bundler and Paymaster services to submit + user operations and sponsor transactions, respectively. You can retrieve the required API key from + the [Pimlico Dashboard](https://dashboard.pimlico.io/apikeys). -2. **Web3Auth Client ID**: During setup, if you used the - `-add-web3auth` flag, you’ll need to create a new project on the - Web3Auth Dashboard and get your Client ID. You can follow the [Web3Auth documentation](https://web3auth.io/docs/dashboard-setup#getting-started). +2. **Web3Auth Client ID**: During setup, if you used the `-add-web3auth` flag, you’ll need to create a new + project on the Web3Auth Dashboard and get your Client ID. You can follow + the [Web3Auth documentation](https://web3auth.io/docs/dashboard-setup#getting-started). ## Project structure @@ -33,7 +33,7 @@ template/ └── tsconfig.json # TypeScript configuration ``` -## Setup environment variables +## Setup Environment Variables Update the following environment variables in the `.env` file at the root of your project. @@ -52,8 +52,7 @@ NEXT_PUBLIC_WEB3AUTH_NETWORK = ## Getting started -First, start the development server using the package manager -you chose during setup. +First, start the development server using the package manager you chose during setup: ```bash npm run dev diff --git a/templates/nextjs/delegation-starter/package.json b/templates/nextjs/delegation-starter/package.json index 2f491b4..a8ff8e4 100644 --- a/templates/nextjs/delegation-starter/package.json +++ b/templates/nextjs/delegation-starter/package.json @@ -9,14 +9,15 @@ "start": "next start" }, "dependencies": { - "@metamask/smart-accounts-kit": "^0.3.0", - "@tanstack/react-query": "^5.90.7", + "@metamask/sdk": "~0.33.1", + "@metamask/smart-accounts-kit": "^1.0.0", + "@tanstack/react-query": "^5.90.21", "next": "15.4.10", - "permissionless": "^0.2.57", + "permissionless": "^0.3.4", "react": "^19.0.0", "react-dom": "^19.0.0", - "viem": "^2.38.6", - "wagmi": "^2.19.2" + "viem": "^2.46.1", + "wagmi": "3.4.4" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/templates/nextjs/delegation-starter/src/components/ConnectButton.tsx b/templates/nextjs/delegation-starter/src/components/ConnectButton.tsx index 99d3def..176f160 100644 --- a/templates/nextjs/delegation-starter/src/components/ConnectButton.tsx +++ b/templates/nextjs/delegation-starter/src/components/ConnectButton.tsx @@ -1,15 +1,16 @@ "use client"; -import { useConnect } from "wagmi"; +import { useConnect, useConnectors } from "wagmi"; import Button from "@/components/Button"; export default function ConnectButton() { - const { connect, connectors } = useConnect(); + const connect = useConnect(); + const connectors = useConnectors(); return (
{connectors.map((connector) => ( - ))} diff --git a/templates/nextjs/delegation-starter/src/components/CreateDelegationButton.tsx b/templates/nextjs/delegation-starter/src/components/CreateDelegationButton.tsx index 7866f9a..d631f59 100644 --- a/templates/nextjs/delegation-starter/src/components/CreateDelegationButton.tsx +++ b/templates/nextjs/delegation-starter/src/components/CreateDelegationButton.tsx @@ -15,7 +15,6 @@ export default function CreateDelegationButton() { const handleCreateDelegation = async () => { if (!smartAccount || !delegateSmartAccount) return; - console.log(smartAccount.address, delegateSmartAccount.address); const delegation = prepareRootDelegation( smartAccount, delegateSmartAccount.address, @@ -30,7 +29,6 @@ export default function CreateDelegationButton() { signature, }; - console.log(signedDelegation); storeDelegation(signedDelegation); changeStep(5); }; diff --git a/templates/nextjs/delegation-starter/src/components/DeployDelegatorButton.tsx b/templates/nextjs/delegation-starter/src/components/DeployDelegatorButton.tsx index e83a6cd..4284a0e 100644 --- a/templates/nextjs/delegation-starter/src/components/DeployDelegatorButton.tsx +++ b/templates/nextjs/delegation-starter/src/components/DeployDelegatorButton.tsx @@ -34,7 +34,6 @@ export default function DeployDelegatorButton() { hash: userOperationHash, }); - console.log(receipt); setLoading(false); changeStep(3); }; diff --git a/templates/nextjs/delegation-starter/src/components/RedeemDelegationButton.tsx b/templates/nextjs/delegation-starter/src/components/RedeemDelegationButton.tsx index 803dbf7..affcce3 100644 --- a/templates/nextjs/delegation-starter/src/components/RedeemDelegationButton.tsx +++ b/templates/nextjs/delegation-starter/src/components/RedeemDelegationButton.tsx @@ -53,8 +53,6 @@ export default function RedeemDelegationButton() { }); setTransactionHash(receipt.transactionHash); - - console.log(receipt); } catch (error) { const errorMessage = (error as Error)?.message ?? 'Unknown error occurred'; console.error(`Error redeeming delegation: ${errorMessage}`); diff --git a/templates/nextjs/delegation-starter/src/components/Steps.tsx b/templates/nextjs/delegation-starter/src/components/Steps.tsx index fc5b57f..548b5fd 100644 --- a/templates/nextjs/delegation-starter/src/components/Steps.tsx +++ b/templates/nextjs/delegation-starter/src/components/Steps.tsx @@ -13,7 +13,7 @@ import DeployDelegatorButton from "@/components/DeployDelegatorButton"; import LearnMoreButton from "@/components/LearnMoreButton"; import RedeemDelegationButton from "@/components/RedeemDelegationButton"; import RedeemDelegationCodeBlock from "@/components/RedeemDelegationCodeBlock"; -import { useAccount } from "wagmi"; +import { useConnection } from "wagmi"; import useDelegateSmartAccount from "@/hooks/useDelegateSmartAccount"; import useDelegatorSmartAccount from "@/hooks/useDelegatorSmartAccount"; import { useStepContext } from "@/hooks/useStepContext"; @@ -21,7 +21,7 @@ import useStorageClient from "@/hooks/useStorageClient"; export default function Steps() { const { step, changeStep } = useStepContext(); - const { address } = useAccount(); + const { address } = useConnection(); const { smartAccount } = useDelegatorSmartAccount(); const { smartAccount: delegateSmartAccount } = useDelegateSmartAccount(); const { getDelegation } = useStorageClient(); diff --git a/templates/nextjs/delegation-starter/src/hooks/useDelegatorSmartAccount.ts b/templates/nextjs/delegation-starter/src/hooks/useDelegatorSmartAccount.ts index 01479b8..f1cdb1b 100644 --- a/templates/nextjs/delegation-starter/src/hooks/useDelegatorSmartAccount.ts +++ b/templates/nextjs/delegation-starter/src/hooks/useDelegatorSmartAccount.ts @@ -6,12 +6,12 @@ import { toMetaMaskSmartAccount, } from '@metamask/smart-accounts-kit'; import { useEffect, useState } from 'react'; -import { useAccount, usePublicClient, useWalletClient } from 'wagmi'; +import { useConnection, usePublicClient, useWalletClient } from 'wagmi'; export default function useDelegatorSmartAccount(): { smartAccount: MetaMaskSmartAccount | null; } { - const { address } = useAccount(); + const { address } = useConnection(); const publicClient = usePublicClient(); const { data: walletClient } = useWalletClient(); const [smartAccount, setSmartAccount] = useState( diff --git a/templates/nextjs/farcaster-starter/README.md b/templates/nextjs/farcaster-starter/README.md index d36085b..1ba5ba4 100644 --- a/templates/nextjs/farcaster-starter/README.md +++ b/templates/nextjs/farcaster-starter/README.md @@ -1,18 +1,16 @@ -# MetaMask Smart Acccounts Kit Farcaster Mini App Template +# MetaMask Smart Accounts Kit Farcaster Mini App Template -This is a NextJS MetaMask Smart Acccounts Kit Farcaster Mini App template created with [`@metamask/create-gator-app`](https://npmjs.com/package/@metamask/create-gator-app).. +This is a NextJS MetaMask Smart Accounts Kit Farcaster Mini App template created with [`@metamask/create-gator-app`](https://npmjs.com/package/@metamask/create-gator-app). This template helps you quickly bootstrap your project with a Farcaster mini app with MetaMask Smart Accounts. It provides a foundation for building mini apps that leverage account abstraction and powerful delegation features to deliver seamless, secure, and flexible user experiences. -Learn more about [Metamask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/). +Learn more about [MetaMask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/). ## Prerequisites -1. **Pimlico API Key**: In this template, you’ll use Pimlico’s bundler and paymaster - services to submit user operations and sponsor transactions. You can get - your API key from [Pimlico’s dashboard](https://dashboard.pimlico.io/apikeys). +**Pimlico API Key**: In this template, we use Pimlico's Bundler and Paymaster services to submit user operations and sponsor transactions, respectively. You can retrieve the required API key from the [Pimlico Dashboard](https://dashboard.pimlico.io/apikeys). ## Project structure @@ -31,7 +29,7 @@ template/ └── tsconfig.json # TypeScript configuration ``` -## Setup environment variables +## Setup Environment Variables Update the following environment variables in the `.env` file at the root of your project. @@ -41,7 +39,7 @@ NEXT_PUBLIC_PIMLICO_API_KEY = ## Getting started -First, start the development server using the package manager you chose during setup. +First, start the development server using the package manager you chose during setup: ```bash npm run dev @@ -59,7 +57,7 @@ Farcaster offers a handy [Embed tool](https://farcaster.xyz/~/developers/mini-ap works only with hosted URLs. To make your local project accessible remotely, you can create a tunnel using tools like ngrok or cloudflared. -In this guide, we’re using cloudflared, but you’re free to choose whichever tool you prefer. +In this guide, we're using cloudflared, but you're free to choose whichever tool you prefer. ### Create a tunnel diff --git a/templates/nextjs/farcaster-starter/package.json b/templates/nextjs/farcaster-starter/package.json index e9d79f6..63521fc 100644 --- a/templates/nextjs/farcaster-starter/package.json +++ b/templates/nextjs/farcaster-starter/package.json @@ -11,14 +11,15 @@ "dependencies": { "@farcaster/miniapp-sdk": "^0.2.1", "@farcaster/miniapp-wagmi-connector": "^1.1.0", - "@metamask/smart-accounts-kit": "^0.3.0", - "@tanstack/react-query": "^5.76.1", + "@metamask/sdk": "~0.33.1", + "@metamask/smart-accounts-kit": "^1.0.0", + "@tanstack/react-query": "^5.90.21", "next": "15.4.10", - "permissionless": "^0.2.57", + "permissionless": "^0.3.4", "react": "19.1.0", "react-dom": "19.1.0", - "viem": "^2.38.4", - "wagmi": "^2.18.2" + "viem": "^2.46.1", + "wagmi": "3.4.4" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/templates/nextjs/farcaster-starter/src/components/ConnectButton.tsx b/templates/nextjs/farcaster-starter/src/components/ConnectButton.tsx index 99d3def..176f160 100644 --- a/templates/nextjs/farcaster-starter/src/components/ConnectButton.tsx +++ b/templates/nextjs/farcaster-starter/src/components/ConnectButton.tsx @@ -1,15 +1,16 @@ "use client"; -import { useConnect } from "wagmi"; +import { useConnect, useConnectors } from "wagmi"; import Button from "@/components/Button"; export default function ConnectButton() { - const { connect, connectors } = useConnect(); + const connect = useConnect(); + const connectors = useConnectors(); return (
{connectors.map((connector) => ( - ))} diff --git a/templates/nextjs/farcaster-starter/src/components/Steps.tsx b/templates/nextjs/farcaster-starter/src/components/Steps.tsx index d0d4b89..c3e95c2 100644 --- a/templates/nextjs/farcaster-starter/src/components/Steps.tsx +++ b/templates/nextjs/farcaster-starter/src/components/Steps.tsx @@ -13,7 +13,7 @@ import DeployDelegatorButton from "@/components/DeployDelegatorButton"; import LearnMoreButton from "@/components/LearnMoreButton"; import RedeemDelegationButton from "@/components/RedeemDelegationButton"; import RedeemDelegationCodeBlock from "@/components/RedeemDelegationCodeBlock"; -import { useAccount } from "wagmi"; +import { useConnection } from "wagmi"; import useDelegateSmartAccount from "@/hooks/useDelegateSmartAccount"; import useDelegatorSmartAccount from "@/hooks/useDelegatorSmartAccount"; import { useStepContext } from "@/hooks/useStepContext"; @@ -21,7 +21,7 @@ import useStorageClient from "@/hooks/useStorageClient"; export default function Steps() { const { step, changeStep } = useStepContext(); - const { address } = useAccount(); + const { address } = useConnection(); const { smartAccount } = useDelegatorSmartAccount(); const { smartAccount: delegateSmartAccount } = useDelegateSmartAccount(); const { getDelegation } = useStorageClient(); diff --git a/templates/nextjs/farcaster-starter/src/hooks/useDelegatorSmartAccount.ts b/templates/nextjs/farcaster-starter/src/hooks/useDelegatorSmartAccount.ts index 01479b8..f1cdb1b 100644 --- a/templates/nextjs/farcaster-starter/src/hooks/useDelegatorSmartAccount.ts +++ b/templates/nextjs/farcaster-starter/src/hooks/useDelegatorSmartAccount.ts @@ -6,12 +6,12 @@ import { toMetaMaskSmartAccount, } from '@metamask/smart-accounts-kit'; import { useEffect, useState } from 'react'; -import { useAccount, usePublicClient, useWalletClient } from 'wagmi'; +import { useConnection, usePublicClient, useWalletClient } from 'wagmi'; export default function useDelegatorSmartAccount(): { smartAccount: MetaMaskSmartAccount | null; } { - const { address } = useAccount(); + const { address } = useConnection(); const publicClient = usePublicClient(); const { data: walletClient } = useWalletClient(); const [smartAccount, setSmartAccount] = useState( diff --git a/templates/nextjs/starter/README.md b/templates/nextjs/starter/README.md index 82090d3..b4548a8 100644 --- a/templates/nextjs/starter/README.md +++ b/templates/nextjs/starter/README.md @@ -2,19 +2,19 @@ This is a NextJS MetaMask Smart Accounts template created with [`@metamask/create-gator-app`](https://npmjs.com/package/@metamask/create-gator-app). -This template is meant to help you bootstrap your own projects with Metamask Smart Acounts. It helps you build smart accounts with account abstraction, and powerful delegation features. +This template is meant to help you bootstrap your own projects with MetaMask Smart Accounts. It helps you build smart accounts with account abstraction, and powerful delegation features. -Learn more about [Metamask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/). +Learn more about [MetaMask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/). ## Prerequisites -1. **Pimlico API Key**: In this template, you’ll use Pimlico’s - bundler and paymaster services to submit user operations and - sponsor transactions. You can get your API key from [Pimlico’s dashboard](https://dashboard.pimlico.io/apikeys). +1. **Pimlico API Key**: In this template, we use Pimlico's Bundler and Paymaster services to submit + user operations and sponsor transactions, respectively. You can retrieve the required API key + from the [Pimlico Dashboard](https://dashboard.pimlico.io/apikeys). -2. **Web3Auth Client ID**: During setup, if you used the - `-add-web3auth` flag, you’ll need to create a new project on the - Web3Auth Dashboard and get your Client ID. You can follow the [Web3Auth documentation](https://web3auth.io/docs/dashboard-setup#getting-started). +2. **Web3Auth Client ID**: During setup, if you used the `-add-web3auth` flag, you’ll need to create a + new project on the Web3Auth Dashboard and get your Client ID. You can follow + the [Web3Auth documentation](https://web3auth.io/docs/dashboard-setup#getting-started). ## Project structure @@ -33,7 +33,7 @@ template/ └── tsconfig.json # TypeScript configuration ``` -## Setup environment variables +## Setup Environment Variables Update the following environment variables in the `.env` file at the root of your project. @@ -53,7 +53,7 @@ NEXT_PUBLIC_WEB3AUTH_NETWORK = ## Getting started First, start the development server using the package manager -you chose during setup. +you chose during setup: ```bash npm run dev diff --git a/templates/nextjs/starter/package.json b/templates/nextjs/starter/package.json index ea9dae2..538774f 100644 --- a/templates/nextjs/starter/package.json +++ b/templates/nextjs/starter/package.json @@ -9,14 +9,15 @@ "start": "next start" }, "dependencies": { - "@metamask/smart-accounts-kit": "^0.3.0", - "@tanstack/react-query": "^5.81.5", + "@metamask/sdk": "~0.33.1", + "@metamask/smart-accounts-kit": "^1.0.0", + "@tanstack/react-query": "^5.90.21", "next": "15.4.10", - "permissionless": "^0.2.47", + "permissionless": "^0.3.4", "react": "^19.0.0", "react-dom": "^19.0.0", - "viem": "^2.31.6", - "wagmi": "^2.15.6" + "viem": "^2.46.1", + "wagmi": "3.4.4" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/templates/nextjs/starter/src/components/ConnectButton.tsx b/templates/nextjs/starter/src/components/ConnectButton.tsx index 99d3def..176f160 100644 --- a/templates/nextjs/starter/src/components/ConnectButton.tsx +++ b/templates/nextjs/starter/src/components/ConnectButton.tsx @@ -1,15 +1,16 @@ "use client"; -import { useConnect } from "wagmi"; +import { useConnect, useConnectors } from "wagmi"; import Button from "@/components/Button"; export default function ConnectButton() { - const { connect, connectors } = useConnect(); + const connect = useConnect(); + const connectors = useConnectors(); return (
{connectors.map((connector) => ( - ))} diff --git a/templates/nextjs/starter/src/components/Steps.tsx b/templates/nextjs/starter/src/components/Steps.tsx index d3f2be3..017fea1 100644 --- a/templates/nextjs/starter/src/components/Steps.tsx +++ b/templates/nextjs/starter/src/components/Steps.tsx @@ -1,9 +1,9 @@ import ConnectButton from "@/components/ConnectButton"; import TransactionForm from "@/components/TransactionForm"; -import { useAccount } from "wagmi"; +import { useConnection } from "wagmi"; export default function Steps() { - const { isConnected } = useAccount(); + const { isConnected } = useConnection(); if (!isConnected) { return ( diff --git a/templates/nextjs/starter/src/hooks/useSmartAccount.ts b/templates/nextjs/starter/src/hooks/useSmartAccount.ts index 04d2804..5e165ee 100644 --- a/templates/nextjs/starter/src/hooks/useSmartAccount.ts +++ b/templates/nextjs/starter/src/hooks/useSmartAccount.ts @@ -6,12 +6,12 @@ import { toMetaMaskSmartAccount, } from '@metamask/smart-accounts-kit'; import { useEffect, useState } from 'react'; -import { useAccount, usePublicClient, useWalletClient } from 'wagmi'; +import { useConnection, usePublicClient, useWalletClient } from 'wagmi'; export default function useSmartAccount(): { smartAccount: MetaMaskSmartAccount | null; } { - const { address } = useAccount(); + const { address } = useConnection(); const publicClient = usePublicClient(); const { data: walletClient } = useWalletClient(); const [smartAccount, setSmartAccount] = useState( diff --git a/templates/vite-react/delegation-starter/README.md b/templates/vite-react/delegation-starter/README.md index 427770e..18c37b9 100644 --- a/templates/vite-react/delegation-starter/README.md +++ b/templates/vite-react/delegation-starter/README.md @@ -2,19 +2,13 @@ This is a React MetaMask Smart Accounts & Delegation template created with [`@metamask/create-gator-app`](https://npmjs.com/package/@metamask/create-gator-app). -This template is meant to help you bootstrap your own projects with Metamask Smart Acounts. It helps you build smart accounts with account abstraction, and powerful delegation features. +This template is meant to help you bootstrap your own projects with MetaMask Smart Accounts. It helps you build smart accounts with account abstraction, and powerful delegation features. -Learn more about [Metamask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/). +Learn more about [MetaMask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/). ## Prerequisites -1. **Pimlico API Key**: In this template, you’ll use Pimlico’s - bundler and paymaster services to submit user operations and - sponsor transactions. You can get your API key from [Pimlico’s dashboard](https://dashboard.pimlico.io/apikeys). - -2. **Web3Auth Client ID**: During setup, if you used the - `-add-web3auth` flag, you’ll need to create a new project on the - Web3Auth Dashboard and get your Client ID. You can follow the [Web3Auth documentation](https://web3auth.io/docs/dashboard-setup#getting-started). +**Pimlico API Key**: In this template, we use Pimlico's Bundler and Paymaster services to submit user operations and sponsor transactions, respectively. You can retrieve the required API key from the [Pimlico Dashboard](https://dashboard.pimlico.io/apikeys). ## Project structure @@ -35,27 +29,19 @@ template/ └── tsconfig.json # TypeScript configuration ``` -## Setup environment variables +## Setup Environment Variables Update the following environment variables in the `.env` file at the root of your project. ``` VITE_PIMLICO_API_KEY = - -# Enter your Web3Auth Client ID if you -# used the --add-web3auth flag. -VITE_WEB3AUTH_CLIENT_ID = - -# The Web3Auth network is configured based -# on the network option you selected during setup. -VITE_WEB3AUTH_NETWORK = ``` ## Getting started First, start the development server using the package manager -you chose during setup. +you chose during setup: ```bash npm run dev @@ -69,7 +55,4 @@ Open [http://localhost:5173](http://localhost:5173) in your browser to view the ## Learn more -To learn more about MetaMask Smart Accounts, take a look at the following resources: - -- [MetaMask Smart Accounts Quickstart](https://docs.metamask.io/smart-accounts-kit/get-started/smart-account-quickstart/) - Get started quickly with the MetaMask Smart Accounts -- [Delegation guide](https://docs.metamask.io/smart-accounts-kit/guides/delegation/execute-on-smart-accounts-behalf/) - Get started quickly with creating a MetaMask smart account and completing the delegation lifecycle (creating, signing, and redeeming a delegation). +See the [Smart Accounts Kit documentation](https://docs.metamask.io/smart-accounts-kit/) to learn more about its features and API. diff --git a/templates/vite-react/delegation-starter/package.json b/templates/vite-react/delegation-starter/package.json index 50111ef..ebb5287 100644 --- a/templates/vite-react/delegation-starter/package.json +++ b/templates/vite-react/delegation-starter/package.json @@ -10,13 +10,14 @@ "preview": "vite preview" }, "dependencies": { - "@metamask/smart-accounts-kit": "^0.3.0", - "@tanstack/react-query": "^5.90.7", - "permissionless": "^0.2.57", + "@metamask/sdk": "~0.33.1", + "@metamask/smart-accounts-kit": "^1.0.0", + "@tanstack/react-query": "^5.90.21", + "permissionless": "^0.3.4", "react": "^19.0.0", "react-dom": "^19.0.0", - "viem": "^2.38.6", - "wagmi": "^2.19.2" + "viem": "^2.46.1", + "wagmi": "3.4.4" }, "devDependencies": { "@eslint/js": "^9.21.0", diff --git a/templates/vite-react/delegation-starter/src/components/ConnectButton.tsx b/templates/vite-react/delegation-starter/src/components/ConnectButton.tsx index 6823f6f..b21bade 100644 --- a/templates/vite-react/delegation-starter/src/components/ConnectButton.tsx +++ b/templates/vite-react/delegation-starter/src/components/ConnectButton.tsx @@ -1,13 +1,14 @@ -import { useConnect } from "wagmi"; +import { useConnect, useConnectors } from "wagmi"; import Button from "@/components/Button"; export default function ConnectButton() { - const { connect, connectors } = useConnect(); + const connect = useConnect(); + const connectors = useConnectors(); return (
{connectors.map((connector) => ( - ))} diff --git a/templates/vite-react/delegation-starter/src/components/CreateDelegationButton.tsx b/templates/vite-react/delegation-starter/src/components/CreateDelegationButton.tsx index 72c1dbb..45a5c31 100644 --- a/templates/vite-react/delegation-starter/src/components/CreateDelegationButton.tsx +++ b/templates/vite-react/delegation-starter/src/components/CreateDelegationButton.tsx @@ -13,7 +13,6 @@ export default function CreateDelegationButton() { const handleCreateDelegation = async () => { if (!smartAccount || !delegateSmartAccount) return; - console.log(smartAccount.address, delegateSmartAccount.address); const delegation = prepareRootDelegation( smartAccount, delegateSmartAccount.address, @@ -28,7 +27,6 @@ export default function CreateDelegationButton() { signature, }; - console.log(signedDelegation); storeDelegation(signedDelegation); changeStep(5); }; diff --git a/templates/vite-react/delegation-starter/src/components/DeployDelegatorButton.tsx b/templates/vite-react/delegation-starter/src/components/DeployDelegatorButton.tsx index b49b6e5..583bb9b 100644 --- a/templates/vite-react/delegation-starter/src/components/DeployDelegatorButton.tsx +++ b/templates/vite-react/delegation-starter/src/components/DeployDelegatorButton.tsx @@ -32,7 +32,6 @@ export default function DeployDelegatorButton() { hash: userOperationHash, }); - console.log(receipt); setLoading(false); changeStep(3); }; diff --git a/templates/vite-react/delegation-starter/src/components/RedeemDelegationButton.tsx b/templates/vite-react/delegation-starter/src/components/RedeemDelegationButton.tsx index c82dbc9..9823ef9 100644 --- a/templates/vite-react/delegation-starter/src/components/RedeemDelegationButton.tsx +++ b/templates/vite-react/delegation-starter/src/components/RedeemDelegationButton.tsx @@ -48,8 +48,6 @@ export default function RedeemDelegationButton() { }); setTransactionHash(receipt.transactionHash); - - console.log(receipt); } catch (error) { const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred'; console.error(`Error redeeming delegation: ${errorMessage}`); diff --git a/templates/vite-react/delegation-starter/src/components/Steps.tsx b/templates/vite-react/delegation-starter/src/components/Steps.tsx index 58987c8..daa9322 100644 --- a/templates/vite-react/delegation-starter/src/components/Steps.tsx +++ b/templates/vite-react/delegation-starter/src/components/Steps.tsx @@ -11,7 +11,7 @@ import DeployDelegatorButton from "@/components/DeployDelegatorButton"; import LearnMoreButton from "@/components/LearnMoreButton"; import RedeemDelegationButton from "@/components/RedeemDelegationButton"; import RedeemDelegationCodeBlock from "@/components/RedeemDelegationCodeBlock"; -import { useAccount } from "wagmi"; +import { useConnection } from "wagmi"; import useDelegateSmartAccount from "@/hooks/useDelegateSmartAccount"; import useDelegatorSmartAccount from "@/hooks/useDelegatorSmartAccount"; import { useStepContext } from "@/hooks/useStepContext"; @@ -19,7 +19,7 @@ import useStorageClient from "@/hooks/useStorageClient"; export default function Steps() { const { step, changeStep } = useStepContext(); - const { address } = useAccount(); + const { address } = useConnection(); const { smartAccount } = useDelegatorSmartAccount(); const { smartAccount: delegateSmartAccount } = useDelegateSmartAccount(); const { getDelegation } = useStorageClient(); diff --git a/templates/vite-react/delegation-starter/src/hooks/useDelegateSmartAccount.tsx b/templates/vite-react/delegation-starter/src/hooks/useDelegateSmartAccount.tsx index 4082294..d4b6e87 100644 --- a/templates/vite-react/delegation-starter/src/hooks/useDelegateSmartAccount.tsx +++ b/templates/vite-react/delegation-starter/src/hooks/useDelegateSmartAccount.tsx @@ -17,10 +17,8 @@ export default function useDelegateSmartAccount() { ); useEffect(() => { - console.log(delegateWallet); if (delegateWallet === "0x" || !publicClient) return; - console.log("Creating smart account"); const account = privateKeyToAccount(delegateWallet as `0x${string}`); toMetaMaskSmartAccount({ diff --git a/templates/vite-react/delegation-starter/src/hooks/useDelegatorSmartAccount.tsx b/templates/vite-react/delegation-starter/src/hooks/useDelegatorSmartAccount.tsx index 407a778..e5df2a8 100644 --- a/templates/vite-react/delegation-starter/src/hooks/useDelegatorSmartAccount.tsx +++ b/templates/vite-react/delegation-starter/src/hooks/useDelegatorSmartAccount.tsx @@ -4,12 +4,12 @@ import { toMetaMaskSmartAccount, } from "@metamask/smart-accounts-kit"; import { useEffect, useState } from "react"; -import { useAccount, usePublicClient, useWalletClient } from "wagmi"; +import { useConnection, usePublicClient, useWalletClient } from "wagmi"; export default function useDelegatorSmartAccount(): { smartAccount: MetaMaskSmartAccount | null; } { - const { address } = useAccount(); + const { address } = useConnection(); const publicClient = usePublicClient(); const { data: walletClient } = useWalletClient(); const [smartAccount, setSmartAccount] = useState( @@ -19,8 +19,6 @@ export default function useDelegatorSmartAccount(): { useEffect(() => { if (!address || !walletClient || !publicClient) return; - console.log("Creating smart account"); - toMetaMaskSmartAccount({ client: publicClient, implementation: Implementation.Hybrid, diff --git a/templates/vite-react/starter/README.md b/templates/vite-react/starter/README.md index 12b54a8..9b48b30 100644 --- a/templates/vite-react/starter/README.md +++ b/templates/vite-react/starter/README.md @@ -2,19 +2,19 @@ This is a React MetaMask Smart Accounts template created with [`@metamask/create-gator-app`](https://npmjs.com/package/@metamask/create-gator-app). -This template is meant to help you bootstrap your own projects with Metamask Smart Acounts. It helps you build smart accounts with account abstraction, and powerful delegation features. +This template is meant to help you bootstrap your own projects with MetaMask Smart Accounts. It helps you build smart accounts with account abstraction, and powerful delegation features. -Learn more about [Metamask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/). +Learn more about [MetaMask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/concepts/smart-accounts/). ## Prerequisites -1. **Pimlico API Key**: In this template, you’ll use Pimlico’s - bundler and paymaster services to submit user operations and - sponsor transactions. You can get your API key from [Pimlico’s dashboard](https://dashboard.pimlico.io/apikeys). +1. **Pimlico API Key**: In this template, we use Pimlico's Bundler and Paymaster services to submit user + operations and sponsor transactions, respectively. You can retrieve the required API key from + the [Pimlico Dashboard](https://dashboard.pimlico.io/apikeys). -2. **Web3Auth Client ID**: During setup, if you used the - `-add-web3auth` flag, you’ll need to create a new project on the - Web3Auth Dashboard and get your Client ID. You can follow the [Web3Auth documentation](https://web3auth.io/docs/dashboard-setup#getting-started). +2. **Web3Auth Client ID**: During setup, if you used the `-add-web3auth` flag, you’ll need to create a + new project on the Web3Auth Dashboard and get your Client ID. You can follow + the [Web3Auth documentation](https://web3auth.io/docs/dashboard-setup#getting-started). ## Project structure @@ -35,27 +35,19 @@ template/ └── tsconfig.json # TypeScript configuration ``` -## Setup environment variables +## Setup Environment Variables Update the following environment variables in the `.env` file at the root of your project. ``` VITE_PIMLICO_API_KEY = - -# Enter your Web3Auth Client ID if you -# used the --add-web3auth flag. -VITE_WEB3AUTH_CLIENT_ID = - -# The Web3Auth network is configured based -# on the network option you selected during setup. -VITE_WEB3AUTH_NETWORK = ``` ## Getting started First, start the development server using the package manager -you chose during setup. +you chose during setup: ```bash npm run dev diff --git a/templates/vite-react/starter/package.json b/templates/vite-react/starter/package.json index 6c0bef4..52522b8 100644 --- a/templates/vite-react/starter/package.json +++ b/templates/vite-react/starter/package.json @@ -10,13 +10,14 @@ "preview": "vite preview" }, "dependencies": { - "@metamask/smart-accounts-kit": "^0.3.0", - "@tanstack/react-query": "^5.76.1", - "permissionless": "^0.2.46", + "@metamask/sdk": "~0.33.1", + "@metamask/smart-accounts-kit": "^1.0.0", + "@tanstack/react-query": "^5.90.21", + "permissionless": "^0.3.4", "react": "^19.1.0", "react-dom": "^19.1.0", - "viem": "^2.29.2", - "wagmi": "^2.15.3" + "viem": "^2.46.1", + "wagmi": "3.4.4" }, "devDependencies": { "@eslint/js": "^9.29.0", diff --git a/templates/vite-react/starter/src/components/ConnectButton.tsx b/templates/vite-react/starter/src/components/ConnectButton.tsx index 6823f6f..b21bade 100644 --- a/templates/vite-react/starter/src/components/ConnectButton.tsx +++ b/templates/vite-react/starter/src/components/ConnectButton.tsx @@ -1,13 +1,14 @@ -import { useConnect } from "wagmi"; +import { useConnect, useConnectors } from "wagmi"; import Button from "@/components/Button"; export default function ConnectButton() { - const { connect, connectors } = useConnect(); + const connect = useConnect(); + const connectors = useConnectors(); return (
{connectors.map((connector) => ( - ))} diff --git a/templates/vite-react/starter/src/components/Steps.tsx b/templates/vite-react/starter/src/components/Steps.tsx index d3f2be3..017fea1 100644 --- a/templates/vite-react/starter/src/components/Steps.tsx +++ b/templates/vite-react/starter/src/components/Steps.tsx @@ -1,9 +1,9 @@ import ConnectButton from "@/components/ConnectButton"; import TransactionForm from "@/components/TransactionForm"; -import { useAccount } from "wagmi"; +import { useConnection } from "wagmi"; export default function Steps() { - const { isConnected } = useAccount(); + const { isConnected } = useConnection(); if (!isConnected) { return ( diff --git a/templates/vite-react/starter/src/hooks/useSmartAccount.ts b/templates/vite-react/starter/src/hooks/useSmartAccount.ts index 0b2948e..b3fdd2e 100644 --- a/templates/vite-react/starter/src/hooks/useSmartAccount.ts +++ b/templates/vite-react/starter/src/hooks/useSmartAccount.ts @@ -4,12 +4,12 @@ import { toMetaMaskSmartAccount, } from '@metamask/smart-accounts-kit'; import { useEffect, useState } from 'react'; -import { useAccount, usePublicClient, useWalletClient } from 'wagmi'; +import { useConnection, usePublicClient, useWalletClient } from 'wagmi'; export default function useSmartAccount(): { smartAccount: MetaMaskSmartAccount | null; } { - const { address } = useAccount(); + const { address } = useConnection(); const publicClient = usePublicClient(); const { data: walletClient } = useWalletClient(); const [smartAccount, setSmartAccount] = useState(