From d315f2b230105f3f508a5f00e9e1e3661c772014 Mon Sep 17 00:00:00 2001 From: AyushBherwani1998 Date: Mon, 8 Dec 2025 17:32:53 +0400 Subject: [PATCH 1/5] add embedded wallet guide --- gator-sidebar.js | 8 ++ .../signers/embedded-wallets.md | 118 ++++++++++++++++++ 2 files changed, 126 insertions(+) create mode 100644 smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md diff --git a/gator-sidebar.js b/gator-sidebar.js index 0d2bde0c3f3..779222d69f0 100644 --- a/gator-sidebar.js +++ b/gator-sidebar.js @@ -58,6 +58,14 @@ const sidebar = { 'guides/smart-accounts/send-user-operation', 'guides/smart-accounts/send-gasless-transaction', 'guides/smart-accounts/generate-multisig-signature', + { + type: 'category', + label: 'Configure signers', + collapsed: true, + items: [ + 'guides/smart-accounts/signers/web3auth', + ], + }, ], }, { diff --git a/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md b/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md new file mode 100644 index 00000000000..e230a626de7 --- /dev/null +++ b/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md @@ -0,0 +1,118 @@ +--- +description: Learn how to use MetaMask Embedded Wallets (Web3Auth) with MetaMask Smart Accounts. +sidebar_label: Embedded Wallets +keywords: [web3auth, smart account, signer, metamask samrt account] +--- + +# Use MetaMask Embdeded Wallets (Web3Auth) with MetaMask Smart Accounts + +[MetaMask Embedded Wallets (Web3Auth)](/embedded-wallets/) provides a pluggable embedded wallet +infrastructure to simplify Web3 wallet integration and user onboarding. It supports social logins allowing +users to access Web3 applications through familiar authentication methods in under a minute. + +MetaMask Smart Accounts is a signer agnostic implementation that allows you to use Embedded Wallets (Web3Auth) as a signer for MetaMask Smart Accounts. + +View the complete code for this guide at [gator-examples repository](https://github.com/MetaMask/gator-examples/tree/main/examples/smart-accounts/signers/dynamic). + +## Prerequisites + +- Install [Yarn](https://yarnpkg.com/), + [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager +- Get a [Client ID](/embedded-wallets/dashboard) from the Embedded Wallets (Web3Auth) dashboard. + +## 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 @web3auth/modal wagmi @tanstack/react-query viem +``` + +### 2. Create the Web3Auth provider + +In this step, you'll configure the `Web3AuthProvider` component to provide the Embedded Wallets (Web3Auth) +context to your application. You'll also use the `WagmiProvider` to integrate Embedded Wallets (Web3Auth) with Wagmi. +This connector enables you to use Wagmi hooks with Embedded Wallets (Web3Auth). + +Once you have created the `Web3AuthAppProvider`, you must wrap it at the root of your application so +that the rest of your application has access to the Embedded Wallets (Web3Auth) context. + +For the advance configuration, see [Embedded Wallets guide](https://docs.metamask.io/embedded-wallets/sdk/react/advanced/). + + + + +```ts +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ReactNode } from "react"; +import { Web3AuthProvider } from "@web3auth/modal/react"; +import { WagmiProvider } from "@web3auth/modal/react/wagmi"; +import { web3authConfig } from "./config.ts"; + +const queryClient = new QueryClient(); + +export function Web3AuthAppProvider({ children }: { children: ReactNode }) { + return ( + + + {children} + + + ); +} +``` + + + + + +```ts +import { WEB3AUTH_NETWORK_TYPE, Web3AuthOptions } from "@web3auth/modal"; + +const web3AuthOptions: Web3AuthOptions = { + clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string, + web3AuthNetwork: process.env + .NEXT_PUBLIC_WEB3AUTH_NETWORK as WEB3AUTH_NETWORK_TYPE, +}; + +export const web3authConfig = { + web3AuthOptions, +}; +``` + + + + +### 3. Create a smart account + +Once the user has connected their wallet, you can 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 Dyanmic 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 [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 From 40e38eeded04d14dd3325d6a06dbc0cd6920c7a3 Mon Sep 17 00:00:00 2001 From: AyushBherwani1998 Date: Mon, 8 Dec 2025 17:35:37 +0400 Subject: [PATCH 2/5] fix path --- gator-sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gator-sidebar.js b/gator-sidebar.js index 779222d69f0..2c40a303e0a 100644 --- a/gator-sidebar.js +++ b/gator-sidebar.js @@ -63,7 +63,7 @@ const sidebar = { label: 'Configure signers', collapsed: true, items: [ - 'guides/smart-accounts/signers/web3auth', + 'guides/smart-accounts/signers/embedded-wallets', ], }, ], From 4f14436a3928df3034786390495cc8046e4fd2e4 Mon Sep 17 00:00:00 2001 From: AyushBherwani1998 Date: Mon, 8 Dec 2025 17:37:45 +0400 Subject: [PATCH 3/5] remove example for now --- .../guides/smart-accounts/signers/embedded-wallets.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md b/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md index e230a626de7..21f7cecd01d 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md @@ -12,8 +12,6 @@ users to access Web3 applications through familiar authentication methods in und MetaMask Smart Accounts is a signer agnostic implementation that allows you to use Embedded Wallets (Web3Auth) as a signer for MetaMask Smart Accounts. -View the complete code for this guide at [gator-examples repository](https://github.com/MetaMask/gator-examples/tree/main/examples/smart-accounts/signers/dynamic). - ## Prerequisites - Install [Yarn](https://yarnpkg.com/), From 0c373d56d0285cfee711e4c4ea3eccebf9875db3 Mon Sep 17 00:00:00 2001 From: Ayush Bherwani Date: Tue, 9 Dec 2025 14:43:22 +0400 Subject: [PATCH 4/5] Apply suggestions from code review Co-authored-by: Byron Gravenorst <50852695+bgravenorst@users.noreply.github.com> --- .../guides/smart-accounts/signers/embedded-wallets.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md b/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md index 21f7cecd01d..44e5e3b2ca7 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md @@ -1,10 +1,10 @@ --- description: Learn how to use MetaMask Embedded Wallets (Web3Auth) with MetaMask Smart Accounts. sidebar_label: Embedded Wallets -keywords: [web3auth, smart account, signer, metamask samrt account] +keywords: [web3auth, smart account, signer, metamask smart account] --- -# Use MetaMask Embdeded Wallets (Web3Auth) with MetaMask Smart Accounts +# Use MetaMask Embedded Wallets (Web3Auth) with MetaMask Smart Accounts [MetaMask Embedded Wallets (Web3Auth)](/embedded-wallets/) provides a pluggable embedded wallet infrastructure to simplify Web3 wallet integration and user onboarding. It supports social logins allowing @@ -30,11 +30,11 @@ npm install @metamask/smart-accounts-kit @web3auth/modal wagmi @tanstack/react-q ### 2. Create the Web3Auth provider -In this step, you'll configure the `Web3AuthProvider` component to provide the Embedded Wallets (Web3Auth) +Configure the `Web3AuthProvider` component to provide the Embedded Wallets (Web3Auth) context to your application. You'll also use the `WagmiProvider` to integrate Embedded Wallets (Web3Auth) with Wagmi. This connector enables you to use Wagmi hooks with Embedded Wallets (Web3Auth). -Once you have created the `Web3AuthAppProvider`, you must wrap it at the root of your application so +Once you've created the `Web3AuthAppProvider`, wrap it at the root of your application so that the rest of your application has access to the Embedded Wallets (Web3Auth) context. For the advance configuration, see [Embedded Wallets guide](https://docs.metamask.io/embedded-wallets/sdk/react/advanced/). @@ -85,7 +85,7 @@ export const web3authConfig = { ### 3. Create a smart account -Once the user has connected their wallet, you can use the [Wallet Client](https://viem.sh/docs/clients/wallet) from Wagmi as the signer to create a +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 From fff27512cffa76e1dd4d78278a285489af6d58c1 Mon Sep 17 00:00:00 2001 From: AyushBherwani1998 Date: Tue, 9 Dec 2025 14:48:10 +0400 Subject: [PATCH 5/5] improve guide --- .../signers/embedded-wallets.md | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md b/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md index 44e5e3b2ca7..1a6ba8a6af4 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md @@ -1,6 +1,6 @@ --- description: Learn how to use MetaMask Embedded Wallets (Web3Auth) with MetaMask Smart Accounts. -sidebar_label: Embedded Wallets +sidebar_label: MetaMask Embedded Wallets keywords: [web3auth, smart account, signer, metamask smart account] --- @@ -10,13 +10,18 @@ keywords: [web3auth, smart account, signer, metamask smart account] infrastructure to simplify Web3 wallet integration and user onboarding. It supports social logins allowing users to access Web3 applications through familiar authentication methods in under a minute. -MetaMask Smart Accounts is a signer agnostic implementation that allows you to use Embedded Wallets (Web3Auth) as a signer for MetaMask Smart Accounts. +MetaMask Smart Accounts is a signer agnostic implementation that allows you to use Embedded Wallets as a signer for MetaMask Smart Accounts. + +:::info +This guide is targeted towards React and React-based frameworks. +::: ## 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 -- Get a [Client ID](/embedded-wallets/dashboard) from the Embedded Wallets (Web3Auth) dashboard. +- A [Embedded Wallets (Web3Auth) Client ID](/embedded-wallets/dashboard) ## Steps @@ -30,12 +35,12 @@ npm install @metamask/smart-accounts-kit @web3auth/modal wagmi @tanstack/react-q ### 2. Create the Web3Auth provider -Configure the `Web3AuthProvider` component to provide the Embedded Wallets (Web3Auth) -context to your application. You'll also use the `WagmiProvider` to integrate Embedded Wallets (Web3Auth) with Wagmi. -This connector enables you to use Wagmi hooks with Embedded Wallets (Web3Auth). +Configure the `Web3AuthProvider` component to provide the Embedded Wallets context to your application. +You'll also use the `WagmiProvider` to integrate Embedded Wallets with Wagmi. +This connector enables you to use Wagmi hooks with Embedded Wallets. Once you've created the `Web3AuthAppProvider`, wrap it at the root of your application so -that the rest of your application has access to the Embedded Wallets (Web3Auth) context. +that the rest of your application has access to the Embedded Wallets context. For the advance configuration, see [Embedded Wallets guide](https://docs.metamask.io/embedded-wallets/sdk/react/advanced/). @@ -112,5 +117,6 @@ const smartAccount = await toMetaMaskSmartAccount({ ``` ## Next steps + - 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