From 1eeeafd23356177db3fcfa4861fc8beb5dbdc300 Mon Sep 17 00:00:00 2001 From: joalavedra <62625514+joalavedra@users.noreply.github.com> Date: Wed, 10 Jun 2026 19:19:04 +0200 Subject: [PATCH] Add Openfort signer guide for Smart Accounts Kit Adds a Configure signers guide for using Openfort embedded wallets (EOA account type) as a MetaMask smart account signer, mirroring the existing Privy and Dynamic guides. Updates the signers index card list and sidebar in both the development docs and version 1.6.0. Fixes #2955 Co-Authored-By: Claude Fable 5 --- gator-sidebar.js | 1 + .../guides/smart-accounts/signers/index.mdx | 16 +- .../guides/smart-accounts/signers/openfort.md | 140 ++++++++++++++++++ .../version-1.6.0-sidebars.json | 1 + .../guides/smart-accounts/signers/index.mdx | 16 +- .../guides/smart-accounts/signers/openfort.md | 140 ++++++++++++++++++ 6 files changed, 312 insertions(+), 2 deletions(-) create mode 100644 gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/openfort.md create mode 100644 smart-accounts-kit/guides/smart-accounts/signers/openfort.md diff --git a/gator-sidebar.js b/gator-sidebar.js index ff39956a4cd..cef8a1467ea 100644 --- a/gator-sidebar.js +++ b/gator-sidebar.js @@ -62,6 +62,7 @@ const sidebar = { 'guides/smart-accounts/signers/embedded-wallets', 'guides/smart-accounts/signers/dynamic', 'guides/smart-accounts/signers/eoa-wallets', + 'guides/smart-accounts/signers/openfort', 'guides/smart-accounts/signers/passkey', 'guides/smart-accounts/signers/privy', ], diff --git a/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/index.mdx b/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/index.mdx index b481519ded2..2e489111f38 100644 --- a/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/index.mdx +++ b/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/index.mdx @@ -1,7 +1,16 @@ --- description: Learn how to configure signers for MetaMask Smart Accounts. keywords: - [signers, metamask smart accounts, smart account, embedded wallets, web3auth, dynamic, privy] + [ + signers, + metamask smart accounts, + smart account, + embedded wallets, + web3auth, + dynamic, + privy, + openfort, + ] --- import CardList from '@site/src/components/CardList' @@ -45,6 +54,11 @@ See the following guides to learn how to configure different signers: 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/openfort', + title: 'Openfort', + description: 'Learn how to use Openfort with MetaMask Smart Accounts.', + }, { href: '/smart-accounts-kit/development/guides/smart-accounts/signers/passkey', title: 'Passkey', diff --git a/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/openfort.md b/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/openfort.md new file mode 100644 index 00000000000..778b62717c6 --- /dev/null +++ b/gator_versioned_docs/version-1.6.0/guides/smart-accounts/signers/openfort.md @@ -0,0 +1,140 @@ +--- +description: Learn how to use Openfort signer with MetaMask Smart Accounts. +sidebar_label: Openfort +keywords: [openfort, smart account, signer, metamask smart account] +--- + +import GlossaryTerm from '@theme/GlossaryTerm'; + +# Use Openfort with MetaMask Smart Accounts + +[Openfort](https://www.openfort.io/docs) provides an embedded wallet solution that enables seamless social, email, and passkey sign-in for Web3 applications, making user onboarding easier. MetaMask Smart Accounts is a signer-agnostic implementation +that allows you to use Openfort's EOA wallet as a signer for smart accounts. + +:::info +This guide supports 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. +- Create an [Openfort project](https://dashboard.openfort.io) and note your **Publishable key** and **Shield publishable key**. + +## Steps + +### 1. Install dependencies + +Install the following dependencies: + +```bash npm2yarn +npm install @openfort/react @metamask/smart-accounts-kit @tanstack/react-query wagmi viem +``` + +### 2. Create the Openfort provider + +In this step, you'll configure the `OpenfortProvider` component to provide Openfort's context +to your application. You'll also use Openfort's `OpenfortWagmiBridge` component and `getDefaultConfig` helper to integrate Openfort with Wagmi. This +bridge enables you to use Wagmi hooks with Openfort. + +Once you have created the `OpenfortAppProvider`, you must wrap it at the root of your application so +that the rest of your application has access to Openfort's context. + +Set `accountType` to `AccountTypeEnum.EOA` so that the embedded wallet is created as an EOA, which +acts as the signer for the smart account. + +For an advanced configuration, see Openfort's [documentation](https://www.openfort.io/docs) for configuring appearance, login methods, and wallet recovery. + + + + +```ts +import { QueryClientProvider } from "@tanstack/react-query"; +import { ReactNode } from "react"; +import { WagmiProvider } from "wagmi"; +import { AccountTypeEnum, OpenfortProvider } from "@openfort/react"; +import { OpenfortWagmiBridge } from "@openfort/react/wagmi"; +import { wagmiConfig, queryClient } from "./config.ts" + +export function OpenfortAppProvider({ children }: { children: ReactNode }) { + return ( + + + + ", + ethereum: { + // Create the embedded wallet as an EOA, which acts as + // the signer for the smart account. + accountType: AccountTypeEnum.EOA, + }, + }} + > + {children} + + + + + ); +} +``` + + + + + +```ts +import { QueryClient } from '@tanstack/react-query' +import { createConfig } from 'wagmi' +import { getDefaultConfig } from '@openfort/react/wagmi' +import { sepolia } from 'viem/chains' + +export const queryClient = new QueryClient() + +export const wagmiConfig = createConfig( + getDefaultConfig({ + appName: 'MetaMask Smart Accounts demo', + chains: [sepolia], + ssr: true, + }) +) +``` + + + + +### 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 +. + +```ts +import { Implementation, toMetaMaskSmartAccount } from '@metamask/smart-accounts-kit' +import { useConnection, usePublicClient, useWalletClient } from 'wagmi' + +const { address } = useConnection() +const publicClient = usePublicClient() +const { data: walletClient } = useWalletClient() + +// Additional check to make sure Openfort 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 operation](../send-user-operation.md). +- To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md). diff --git a/gator_versioned_sidebars/version-1.6.0-sidebars.json b/gator_versioned_sidebars/version-1.6.0-sidebars.json index 187fc4591d4..186f59874ce 100644 --- a/gator_versioned_sidebars/version-1.6.0-sidebars.json +++ b/gator_versioned_sidebars/version-1.6.0-sidebars.json @@ -64,6 +64,7 @@ "guides/smart-accounts/signers/embedded-wallets", "guides/smart-accounts/signers/dynamic", "guides/smart-accounts/signers/eoa-wallets", + "guides/smart-accounts/signers/openfort", "guides/smart-accounts/signers/passkey", "guides/smart-accounts/signers/privy" ] diff --git a/smart-accounts-kit/guides/smart-accounts/signers/index.mdx b/smart-accounts-kit/guides/smart-accounts/signers/index.mdx index b481519ded2..2e489111f38 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/index.mdx +++ b/smart-accounts-kit/guides/smart-accounts/signers/index.mdx @@ -1,7 +1,16 @@ --- description: Learn how to configure signers for MetaMask Smart Accounts. keywords: - [signers, metamask smart accounts, smart account, embedded wallets, web3auth, dynamic, privy] + [ + signers, + metamask smart accounts, + smart account, + embedded wallets, + web3auth, + dynamic, + privy, + openfort, + ] --- import CardList from '@site/src/components/CardList' @@ -45,6 +54,11 @@ See the following guides to learn how to configure different signers: 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/openfort', + title: 'Openfort', + description: 'Learn how to use Openfort with MetaMask Smart Accounts.', + }, { href: '/smart-accounts-kit/development/guides/smart-accounts/signers/passkey', title: 'Passkey', diff --git a/smart-accounts-kit/guides/smart-accounts/signers/openfort.md b/smart-accounts-kit/guides/smart-accounts/signers/openfort.md new file mode 100644 index 00000000000..778b62717c6 --- /dev/null +++ b/smart-accounts-kit/guides/smart-accounts/signers/openfort.md @@ -0,0 +1,140 @@ +--- +description: Learn how to use Openfort signer with MetaMask Smart Accounts. +sidebar_label: Openfort +keywords: [openfort, smart account, signer, metamask smart account] +--- + +import GlossaryTerm from '@theme/GlossaryTerm'; + +# Use Openfort with MetaMask Smart Accounts + +[Openfort](https://www.openfort.io/docs) provides an embedded wallet solution that enables seamless social, email, and passkey sign-in for Web3 applications, making user onboarding easier. MetaMask Smart Accounts is a signer-agnostic implementation +that allows you to use Openfort's EOA wallet as a signer for smart accounts. + +:::info +This guide supports 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. +- Create an [Openfort project](https://dashboard.openfort.io) and note your **Publishable key** and **Shield publishable key**. + +## Steps + +### 1. Install dependencies + +Install the following dependencies: + +```bash npm2yarn +npm install @openfort/react @metamask/smart-accounts-kit @tanstack/react-query wagmi viem +``` + +### 2. Create the Openfort provider + +In this step, you'll configure the `OpenfortProvider` component to provide Openfort's context +to your application. You'll also use Openfort's `OpenfortWagmiBridge` component and `getDefaultConfig` helper to integrate Openfort with Wagmi. This +bridge enables you to use Wagmi hooks with Openfort. + +Once you have created the `OpenfortAppProvider`, you must wrap it at the root of your application so +that the rest of your application has access to Openfort's context. + +Set `accountType` to `AccountTypeEnum.EOA` so that the embedded wallet is created as an EOA, which +acts as the signer for the smart account. + +For an advanced configuration, see Openfort's [documentation](https://www.openfort.io/docs) for configuring appearance, login methods, and wallet recovery. + + + + +```ts +import { QueryClientProvider } from "@tanstack/react-query"; +import { ReactNode } from "react"; +import { WagmiProvider } from "wagmi"; +import { AccountTypeEnum, OpenfortProvider } from "@openfort/react"; +import { OpenfortWagmiBridge } from "@openfort/react/wagmi"; +import { wagmiConfig, queryClient } from "./config.ts" + +export function OpenfortAppProvider({ children }: { children: ReactNode }) { + return ( + + + + ", + ethereum: { + // Create the embedded wallet as an EOA, which acts as + // the signer for the smart account. + accountType: AccountTypeEnum.EOA, + }, + }} + > + {children} + + + + + ); +} +``` + + + + + +```ts +import { QueryClient } from '@tanstack/react-query' +import { createConfig } from 'wagmi' +import { getDefaultConfig } from '@openfort/react/wagmi' +import { sepolia } from 'viem/chains' + +export const queryClient = new QueryClient() + +export const wagmiConfig = createConfig( + getDefaultConfig({ + appName: 'MetaMask Smart Accounts demo', + chains: [sepolia], + ssr: true, + }) +) +``` + + + + +### 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 +. + +```ts +import { Implementation, toMetaMaskSmartAccount } from '@metamask/smart-accounts-kit' +import { useConnection, usePublicClient, useWalletClient } from 'wagmi' + +const { address } = useConnection() +const publicClient = usePublicClient() +const { data: walletClient } = useWalletClient() + +// Additional check to make sure Openfort 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 operation](../send-user-operation.md). +- To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md).