diff --git a/docs/pages/sdk/signers/openfort.mdx b/docs/pages/sdk/signers/openfort.mdx new file mode 100644 index 0000000..e208bb0 --- /dev/null +++ b/docs/pages/sdk/signers/openfort.mdx @@ -0,0 +1,181 @@ +# Use Openfort with ZeroDev + +[Openfort](https://www.openfort.io/) is a wallet infrastructure platform that provides embedded wallets with built-in account abstraction support. It offers passkey authentication, social login, and seamless onboarding experiences for both web and mobile applications. Openfort's embedded wallets are non-custodial by design and support ERC-4337 smart accounts with features like gas sponsorship, transaction batching, and session keys. + +## Set up + +To use Openfort with ZeroDev, first create an application that integrates with Openfort. + +- Refer to the [Openfort documentation site](https://www.openfort.io/docs) for instructions on setting up an application. +- For a quick start, Openfort provides a demo application, available [here](https://demo.openfort.io/). + +## Integration + +Integrating ZeroDev with Openfort is straightforward after setting up your project. Openfort's React SDK integrates with Wagmi, providing easy access to wallet clients that can be used as signers with Kernel. + +### Install dependencies + +```bash +npm install @openfort/react @zerodev/ecdsa-validator @zerodev/sdk wagmi viem @tanstack/react-query +``` + +### Set up providers + +First, configure the Openfort and Wagmi providers in your app: + +```tsx +import React from "react"; +import { + OpenfortProvider, + getDefaultConfig, + AuthProvider, + RecoveryMethod, +} from "@openfort/react"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { WagmiProvider, createConfig } from "wagmi"; +import { polygonAmoy } from "viem/chains"; + +const config = createConfig( + getDefaultConfig({ + appName: "Your App Name", + chains: [polygonAmoy], + }) +); + +const queryClient = new QueryClient(); + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + + + {children} + + + + ); +} +``` + +### Use with ZeroDev + +Once a user is authenticated with Openfort, use Wagmi's `useConnectorClient` hook to get the wallet client, which can be passed to ZeroDev's validator: + +```tsx +import { useConnectorClient } from "wagmi"; +import { signerToEcdsaValidator } from "@zerodev/ecdsa-validator"; +import { KERNEL_V3_1, getEntryPoint } from "@zerodev/sdk/constants"; +import { createPublicClient, http } from "viem"; +import { polygonAmoy } from "viem/chains"; + +function ZeroDevAccount() { + const { data: walletClient } = useConnectorClient(); + + const createKernelAccount = async () => { + if (!walletClient) { + throw new Error("Wallet not connected"); + } + + const publicClient = createPublicClient({ + transport: http("https://rpc-amoy.polygon.technology"), + chain: polygonAmoy, + }); + + // Pass the Openfort wallet client to the validator + const ecdsaValidator = await signerToEcdsaValidator(publicClient, { + signer: walletClient, + entryPoint: getEntryPoint("0.7"), + kernelVersion: KERNEL_V3_1, + }); + + // You can now use this ECDSA Validator to create a Kernel account + return ecdsaValidator; + }; + + return ( + + ); +} +``` + +### Full example with authentication + +Here's a complete example showing the Openfort authentication flow with ZeroDev integration: + +```tsx +import { OpenfortButton, useOpenfortAuth } from "@openfort/react"; +import { useConnectorClient } from "wagmi"; +import { signerToEcdsaValidator } from "@zerodev/ecdsa-validator"; +import { KERNEL_V3_1, getEntryPoint } from "@zerodev/sdk/constants"; +import { createKernelAccount } from "@zerodev/sdk"; +import { createPublicClient, http } from "viem"; +import { polygonAmoy } from "viem/chains"; + +function App() { + const { isAuthenticated } = useOpenfortAuth(); + const { data: walletClient } = useConnectorClient(); + + const setupZeroDev = async () => { + if (!walletClient) return; + + const publicClient = createPublicClient({ + transport: http("https://rpc-amoy.polygon.technology"), + chain: polygonAmoy, + }); + + const ecdsaValidator = await signerToEcdsaValidator(publicClient, { + signer: walletClient, + entryPoint: getEntryPoint("0.7"), + kernelVersion: KERNEL_V3_1, + }); + + const kernelAccount = await createKernelAccount(publicClient, { + plugins: { + sudo: ecdsaValidator, + }, + entryPoint: getEntryPoint("0.7"), + kernelVersion: KERNEL_V3_1, + }); + + console.log("Kernel account address:", kernelAccount.address); + }; + + return ( +
+ {/* OpenfortButton handles authentication UI */} + + + {isAuthenticated && walletClient && ( + + )} +
+ ); +} +``` + +## Additional Resources + +- [Openfort Documentation](https://www.openfort.io/docs) +- [Openfort React SDK Guide](https://www.openfort.io/docs/products/embedded-wallet/react) +- [Openfort Demo](https://demo.openfort.io/) +- [Openfort GitHub](https://github.com/openfort-xyz) diff --git a/docs/pages/sdk/v5_3_x/signers/openfort.mdx b/docs/pages/sdk/v5_3_x/signers/openfort.mdx new file mode 100644 index 0000000..2920a68 --- /dev/null +++ b/docs/pages/sdk/v5_3_x/signers/openfort.mdx @@ -0,0 +1,192 @@ +import VersionWarning from "../VersionWarning" + + + +# Use Openfort with ZeroDev + +[Openfort](https://www.openfort.io/) is a wallet infrastructure platform that provides embedded wallets with built-in account abstraction support. It offers passkey authentication, social login, and seamless onboarding experiences for both web and mobile applications. Openfort's embedded wallets are non-custodial by design and support ERC-4337 smart accounts with features like gas sponsorship, transaction batching, and session keys. + +## Set up + +To use Openfort with ZeroDev, first create an application that integrates with Openfort. + +- Refer to the [Openfort documentation site](https://www.openfort.io/docs) for instructions on setting up an application. +- For a quick start, Openfort provides a demo application, available [here](https://demo.openfort.io/). + +## Integration + +Integrating ZeroDev with Openfort is straightforward after setting up your project. Openfort's React SDK integrates with Wagmi, providing easy access to wallet clients that can be used as signers with Kernel. + +### Install dependencies + +```bash +npm install @openfort/react @zerodev/ecdsa-validator @zerodev/sdk wagmi viem @tanstack/react-query permissionless +``` + +### Set up providers + +First, configure the Openfort and Wagmi providers in your app: + +```tsx +import React from "react"; +import { + OpenfortProvider, + getDefaultConfig, + AuthProvider, + RecoveryMethod, +} from "@openfort/react"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { WagmiProvider, createConfig } from "wagmi"; +import { polygonAmoy } from "viem/chains"; + +const config = createConfig( + getDefaultConfig({ + appName: "Your App Name", + chains: [polygonAmoy], + }) +); + +const queryClient = new QueryClient(); + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + + + {children} + + + + ); +} +``` + +### Use with ZeroDev + +Once a user is authenticated with Openfort, use Wagmi's `useConnectorClient` hook to get the wallet client. For v5.3.x, convert it to a SmartAccountSigner using permissionless: + +```tsx +import { useConnectorClient } from "wagmi"; +import { signerToEcdsaValidator } from "@zerodev/ecdsa-validator"; +import { KERNEL_V3_1 } from "@zerodev/sdk/constants"; +import { walletClientToSmartAccountSigner, ENTRYPOINT_ADDRESS_V07 } from "permissionless"; +import { createPublicClient, http } from "viem"; +import { polygonAmoy } from "viem/chains"; + +function ZeroDevAccount() { + const { data: walletClient } = useConnectorClient(); + + const createKernelAccount = async () => { + if (!walletClient) { + throw new Error("Wallet not connected"); + } + + const publicClient = createPublicClient({ + transport: http("https://rpc-amoy.polygon.technology"), + chain: polygonAmoy, + }); + + // Convert the wallet client to a SmartAccountSigner + const smartAccountSigner = walletClientToSmartAccountSigner(walletClient); + + // Pass the signer to the validator + const ecdsaValidator = await signerToEcdsaValidator(publicClient, { + signer: smartAccountSigner, + entryPoint: ENTRYPOINT_ADDRESS_V07, + kernelVersion: KERNEL_V3_1, + }); + + // You can now use this ECDSA Validator to create a Kernel account + return ecdsaValidator; + }; + + return ( + + ); +} +``` + +### Full example with authentication + +Here's a complete example showing the Openfort authentication flow with ZeroDev integration: + +```tsx +import { OpenfortButton, useOpenfortAuth } from "@openfort/react"; +import { useConnectorClient } from "wagmi"; +import { signerToEcdsaValidator } from "@zerodev/ecdsa-validator"; +import { KERNEL_V3_1 } from "@zerodev/sdk/constants"; +import { createKernelAccount } from "@zerodev/sdk"; +import { walletClientToSmartAccountSigner, ENTRYPOINT_ADDRESS_V07 } from "permissionless"; +import { createPublicClient, http } from "viem"; +import { polygonAmoy } from "viem/chains"; + +function App() { + const { isAuthenticated } = useOpenfortAuth(); + const { data: walletClient } = useConnectorClient(); + + const setupZeroDev = async () => { + if (!walletClient) return; + + const publicClient = createPublicClient({ + transport: http("https://rpc-amoy.polygon.technology"), + chain: polygonAmoy, + }); + + const smartAccountSigner = walletClientToSmartAccountSigner(walletClient); + + const ecdsaValidator = await signerToEcdsaValidator(publicClient, { + signer: smartAccountSigner, + entryPoint: ENTRYPOINT_ADDRESS_V07, + kernelVersion: KERNEL_V3_1, + }); + + const kernelAccount = await createKernelAccount(publicClient, { + plugins: { + sudo: ecdsaValidator, + }, + entryPoint: ENTRYPOINT_ADDRESS_V07, + kernelVersion: KERNEL_V3_1, + }); + + console.log("Kernel account address:", kernelAccount.address); + }; + + return ( +
+ {/* OpenfortButton handles authentication UI */} + + + {isAuthenticated && walletClient && ( + + )} +
+ ); +} +``` + +## Additional Resources + +- [Openfort Documentation](https://www.openfort.io/docs) +- [Openfort React SDK Guide](https://www.openfort.io/docs/products/embedded-wallet/react) +- [Openfort Demo](https://demo.openfort.io/) +- [Openfort GitHub](https://github.com/openfort-xyz) diff --git a/vocs.config.tsx b/vocs.config.tsx index fa7ff51..d27c805 100644 --- a/vocs.config.tsx +++ b/vocs.config.tsx @@ -356,6 +356,10 @@ export default defineConfig({ link: "/sdk/signers/magic", text: "Magic", }, + { + link: "/sdk/signers/openfort", + text: "Openfort", + }, { link: "/sdk/signers/web3auth", text: "Web3Auth", @@ -690,6 +694,10 @@ export default defineConfig({ link: "/sdk/v5_3_x/signers/magic", text: "Magic", }, + { + link: "/sdk/v5_3_x/signers/openfort", + text: "Openfort", + }, { link: "/sdk/v5_3_x/signers/web3auth", text: "Web3Auth",