From 32a888b70c355fc0542d7a31057bc359177d9e58 Mon Sep 17 00:00:00 2001 From: AyushBherwani1998 Date: Fri, 12 Dec 2025 13:54:37 +0400 Subject: [PATCH 1/3] add eoa guide --- gator-sidebar.js | 1 + .../smart-accounts/signers/eoa-wallets.md | 114 ++++++++++++++++++ .../guides/smart-accounts/signers/index.md | 5 + 3 files changed, 120 insertions(+) create mode 100644 smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md diff --git a/gator-sidebar.js b/gator-sidebar.js index 9edec9b6c7b..655be818e4a 100644 --- a/gator-sidebar.js +++ b/gator-sidebar.js @@ -66,6 +66,7 @@ const sidebar = { items: [ 'guides/smart-accounts/signers/dynamic', 'guides/smart-accounts/signers/embedded-wallets', + 'guides/smart-accounts/signers/eoa-wallets', 'guides/smart-accounts/signers/privy', ], }, diff --git a/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md b/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md new file mode 100644 index 00000000000..6eb6ae230ec --- /dev/null +++ b/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md @@ -0,0 +1,114 @@ +--- +description: Learn how to use Externally Owned Account (EOA) with MetaMask Smart Accounts. +sidebar_label: EOA (e.g. MetaMask) +keywords: [metamask, smart account, signer, metamask smart account] +--- + +# Use Externally Owned Account (EOA) with MetaMask Smart Accounts + +Externally Owned Account (EOA) are one of the most widely used wallet (e.g. MetaMask, Phantom, and more) whcih consists of public +keypair where the private key is only known to the user. MetaMask Smart Accounts is a signer agnostic implementation that allows you +to use EOA as a signer for MetaMask Smart Accounts. + +:::info +This guide is targeted towards React and React-based frameworks. For Vue, see [Wagmi docs](https://wagmi.sh/vue/getting-started). +::: + +## Prerequisites + +- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later +- Install [Yarn](https://yarnpkg.com/), + [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager + +## Steps + +### 1. Install dependencies + +Install the [Smart Accounts Kit](https://www.npmjs.com/package/@metamask/smart-accounts-kit) and other dependencies in your project: + +```bash npm2yarn +npm install @metamask/smart-accounts-kit wagmi @tanstack/react-query viem +``` + +### 2. Create the App provider + +Once you've created the `AppProvider`, wrap it at the root of your application so +that the rest of your application has access to the Wagmi's and TanStack's context. +This will allow every component inside the provider to use the Wagmi hooks. + +For the advance configuration, see [Wagmi's createConfig API reference](https://wagmi.sh/react/api/createConfig). + + + + +```ts +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ReactNode } from "react"; +import { WagmiProvider } from 'wagmi' +import { config } from "./config.ts"; + +const queryClient = new QueryClient(); + +export function AppProvider({ children }: { children: ReactNode }) { + return ( + + + {children} + + + ); +} +``` + + + + + +```ts +import { createConfig, http } from "wagmi"; +import { sepolia } from "viem/chains"; + +export const config = createConfig({ + chains: [sepolia], + transports: { + [sepolia.id]: http(), + }, +}); +``` + + + + +### 3. Create a smart account + +Once the user has connected their wallet, use the [Wallet Client](https://viem.sh/docs/clients/wallet) from Wagmi as the signer to create a +MetaMask smart account. + +```ts +import { Implementation, toMetaMaskSmartAccount } from "@metamask/smart-accounts-kit"; +import { useAccount, usePublicClient, useWalletClient } from "wagmi"; + +const { address } = useAccount(); +const publicClient = usePublicClient(); +const { data: walletClient } = useWalletClient(); + +// Additional check to make sure the EOA wallet is connected +// and values are available. +if (!address || !walletClient || !publicClient ) { + // Handle the error case + } + +const smartAccount = await toMetaMaskSmartAccount({ + client: publicClient, + implementation: Implementation.Hybrid, + deployParams: [address, [], [], []], + deploySalt: "0x", + signer: { walletClient }, +}); +``` + +## Next steps + +- See how to use [MetaMask Embedded Wallets as a signer](./eoa-wallets.md) to make user onboarding journey easier. +- See how to [send a user operations](../send-user-operation.md). +- To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md). \ No newline at end of file diff --git a/smart-accounts-kit/guides/smart-accounts/signers/index.md b/smart-accounts-kit/guides/smart-accounts/signers/index.md index 56439a4cdb1..06a693ecb56 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/index.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/index.md @@ -35,6 +35,11 @@ Checkout the following guides to learn how to configure different signers: title: "Dynamic", description: "Learn how to use Dynamic with MetaMask Smart Accounts.", }, + { + href: "/smart-accounts-kit/development/guides/smart-accounts/signers/eoa-wallets", + title: "EOA (e.g. MetaMask)", + description: "Learn how to use EOAs like MetaMAsk with MetaMask Smart Accounts.", + }, { href: "/smart-accounts-kit/development/guides/smart-accounts/signers/privy", title: "Privy", From 6a2407b2ae8dd24706581ccd391692ad698481e7 Mon Sep 17 00:00:00 2001 From: Ayush Bherwani Date: Fri, 12 Dec 2025 17:47:26 +0400 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: m4sterbunny --- .../guides/smart-accounts/signers/eoa-wallets.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md b/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md index 6eb6ae230ec..a11d2e3f352 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md @@ -6,12 +6,12 @@ keywords: [metamask, smart account, signer, metamask smart account] # Use Externally Owned Account (EOA) with MetaMask Smart Accounts -Externally Owned Account (EOA) are one of the most widely used wallet (e.g. MetaMask, Phantom, and more) whcih consists of public +Externally Owned Accounts (EOAs) are one of the most widely used wallet (such as MetaMask, Phantom, and more). They consist of a public and private keypair where the private key is only known to the user. MetaMask Smart Accounts is a signer agnostic implementation that allows you -to use EOA as a signer for MetaMask Smart Accounts. +to use an EOA as a signer for MetaMask Smart Accounts. :::info -This guide is targeted towards React and React-based frameworks. For Vue, see [Wagmi docs](https://wagmi.sh/vue/getting-started). +This guide supports React and React-based frameworks. For Vue, see [Wagmi docs](https://wagmi.sh/vue/getting-started). ::: ## Prerequisites From 27b80e140c5a34c39704f5882b4e21d4ca288ec6 Mon Sep 17 00:00:00 2001 From: Ayush Bherwani Date: Mon, 15 Dec 2025 09:29:54 +0400 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Byron Gravenorst <50852695+bgravenorst@users.noreply.github.com> --- .../guides/smart-accounts/signers/eoa-wallets.md | 9 ++++----- .../guides/smart-accounts/signers/index.md | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md b/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md index a11d2e3f352..fcc24e6bb70 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets.md @@ -6,9 +6,8 @@ keywords: [metamask, smart account, signer, metamask smart account] # Use Externally Owned Account (EOA) with MetaMask Smart Accounts -Externally Owned Accounts (EOAs) are one of the most widely used wallet (such as MetaMask, Phantom, and more). They consist of a public and private -keypair where the private key is only known to the user. MetaMask Smart Accounts is a signer agnostic implementation that allows you -to use an EOA as a signer for MetaMask Smart Accounts. +Externally Owned Accounts (EOAs) are accounts controlled by a user’s private key (paired with a public address) and are typically accessed through wallet apps like MetaMask. MetaMask Smart Accounts is signer-agnostic, so +you can use an EOA as the signer. :::info This guide supports React and React-based frameworks. For Vue, see [Wagmi docs](https://wagmi.sh/vue/getting-started). @@ -109,6 +108,6 @@ const smartAccount = await toMetaMaskSmartAccount({ ## Next steps -- See how to use [MetaMask Embedded Wallets as a signer](./eoa-wallets.md) to make user onboarding journey easier. -- See how to [send a user operations](../send-user-operation.md). +- See how to use [MetaMask Embedded Wallets as a signer](./eoa-wallets.md) to make the user onboarding journey easier. +- See how to [send a user operation](../send-user-operation.md). - To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md). \ No newline at end of file diff --git a/smart-accounts-kit/guides/smart-accounts/signers/index.md b/smart-accounts-kit/guides/smart-accounts/signers/index.md index 06a693ecb56..debc459e1b7 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/index.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/index.md @@ -38,7 +38,7 @@ Checkout the following guides to learn how to configure different signers: { href: "/smart-accounts-kit/development/guides/smart-accounts/signers/eoa-wallets", title: "EOA (e.g. MetaMask)", - description: "Learn how to use EOAs like MetaMAsk with MetaMask Smart Accounts.", + description: "Learn how to use EOAs like MetaMask with MetaMask Smart Accounts.", }, { href: "/smart-accounts-kit/development/guides/smart-accounts/signers/privy",