diff --git a/gator-sidebar.js b/gator-sidebar.js index a50c8883661..9edec9b6c7b 100644 --- a/gator-sidebar.js +++ b/gator-sidebar.js @@ -61,10 +61,12 @@ const sidebar = { { type: 'category', label: 'Configure signers', + link: { type: "doc", id: "guides/smart-accounts/signers/index" }, collapsed: true, items: [ 'guides/smart-accounts/signers/dynamic', 'guides/smart-accounts/signers/embedded-wallets', + 'guides/smart-accounts/signers/privy', ], }, ], diff --git a/gator_versioned_docs/version-0.1.0/guides/delegation/use-delegation-scopes/index.md b/gator_versioned_docs/version-0.1.0/guides/delegation/use-delegation-scopes/index.md index f683412ef5f..b25ce838d27 100644 --- a/gator_versioned_docs/version-0.1.0/guides/delegation/use-delegation-scopes/index.md +++ b/gator_versioned_docs/version-0.1.0/guides/delegation/use-delegation-scopes/index.md @@ -5,7 +5,7 @@ keywords: [delegation scope, delegation, restrict, authority] # Use delegation scopes -When [creating a delegation](../execute-on-smart-accounts-behalf.md), you can configure a scope to define the delegation's initial authority and help prevent delegation misuse. +When [creating a delegation](../execute-on-smart-accounts-behalf.md), you must configure a scope to define the delegation's initial authority and help prevent delegation misuse. You can further constrain this initial authority by [adding caveats to a delegation](constrain-scope.md). The Smart Accounts Kit currently supports three categories of scopes: diff --git a/smart-accounts-kit/guides/delegation/use-delegation-scopes/index.md b/smart-accounts-kit/guides/delegation/use-delegation-scopes/index.md index f683412ef5f..b25ce838d27 100644 --- a/smart-accounts-kit/guides/delegation/use-delegation-scopes/index.md +++ b/smart-accounts-kit/guides/delegation/use-delegation-scopes/index.md @@ -5,7 +5,7 @@ keywords: [delegation scope, delegation, restrict, authority] # Use delegation scopes -When [creating a delegation](../execute-on-smart-accounts-behalf.md), you can configure a scope to define the delegation's initial authority and help prevent delegation misuse. +When [creating a delegation](../execute-on-smart-accounts-behalf.md), you must configure a scope to define the delegation's initial authority and help prevent delegation misuse. You can further constrain this initial authority by [adding caveats to a delegation](constrain-scope.md). The Smart Accounts Kit currently supports three categories of scopes: diff --git a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md index 10723a10b4b..417c0b7943f 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md @@ -35,12 +35,12 @@ npm install @dynamic-labs/ethereum @dynamic-labs/sdk-react-core @dynamic-labs/wa ### 2. Create the Dynamic provider -In this step, you'll configure the [`DynamicContextProvider`](https://www.dynamic.xyz/docs/react-sdk/providers/providers-introduction#dynamic-context-provider) component to provide the Dynamic context +In this step, you'll configure the [`DynamicContextProvider`](https://www.dynamic.xyz/docs/react-sdk/providers/providers-introduction#dynamic-context-provider) component to provide Dynamic's context to your application. You'll also use the [`DynamicWagmiConnector`](https://www.dynamic.xyz/docs/react-sdk/providers/providers-introduction#dynamic-wagmi-connector) to integrate Dynamic with Wagmi. This connector enables you to use Wagmi hooks with Dynamic. Once you have created the `DynamicProvider`, you must wrap it at the root of your application so -that the rest of your application has access to the Dynamic context. +that the rest of your application has access to the Dynamic's context. For the advance configuration, see how to [configure Dynamic & Wagmi](https://www.dynamic.xyz/docs/react-sdk/using-wagmi). @@ -113,7 +113,7 @@ const { address } = useAccount(); const publicClient = usePublicClient(); const { data: walletClient } = useWalletClient(); -// Additional check to make sure the Dyanmic wallet is connected +// Additional check to make sure the Dyanmic is connected // and values are available. if (!address || !walletClient || !publicClient ) { // Handle the error case 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 1a6ba8a6af4..a0fc27307f5 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md @@ -21,7 +21,7 @@ This guide is targeted towards React and React-based frameworks. - 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 -- A [Embedded Wallets (Web3Auth) Client ID](/embedded-wallets/dashboard) +- An [Embedded Wallets Client ID](/embedded-wallets/dashboard) ## Steps @@ -37,7 +37,7 @@ npm install @metamask/smart-accounts-kit @web3auth/modal wagmi @tanstack/react-q 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. +This provider 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 context. @@ -51,6 +51,7 @@ For the advance configuration, see [Embedded Wallets guide](https://docs.metamas import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactNode } from "react"; import { Web3AuthProvider } from "@web3auth/modal/react"; +// Make sure to import `WagmiProvider` from `@web3auth/modal/react/wagmi`, not `wagmi` import { WagmiProvider } from "@web3auth/modal/react/wagmi"; import { web3authConfig } from "./config.ts"; @@ -72,12 +73,11 @@ export function Web3AuthAppProvider({ children }: { children: ReactNode }) { ```ts -import { WEB3AUTH_NETWORK_TYPE, Web3AuthOptions } from "@web3auth/modal"; +import { 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, + clientId: "", + web3AuthNetwork: "", }; export const web3authConfig = { @@ -101,7 +101,7 @@ const { address } = useAccount(); const publicClient = usePublicClient(); const { data: walletClient } = useWalletClient(); -// Additional check to make sure the Dyanmic wallet is connected +// Additional check to make sure the Embedded Wallets is connected // and values are available. if (!address || !walletClient || !publicClient ) { // Handle the error case diff --git a/smart-accounts-kit/guides/smart-accounts/signers/index.md b/smart-accounts-kit/guides/smart-accounts/signers/index.md new file mode 100644 index 00000000000..56439a4cdb1 --- /dev/null +++ b/smart-accounts-kit/guides/smart-accounts/signers/index.md @@ -0,0 +1,43 @@ +--- +description: Learn how to configure signers for MetaMask Smart Accounts. +keywords: [signers, metamask smart accounts, smart account, embedded wallets, web3auth, dynamic, privy] +--- + +import CardList from "@site/src/components/CardList" + +# Configure a signer + +When [creating a smart account](../create-smart-account.md), you must specify a signer. The signer owns the smart account and is responsible for +generating the signatures required to submit user operations. MetaMask Smart Accounts is signer agnostic, allowing you +to use any signer you prefer such as Embedded Wallets, Passkeys, EOA wallets, or a custom signer. + +MetaMask Smart Accounts has native integration with [MetaMask Embedded Wallets](/embedded-wallets/), making it seamless to use smart +accounts with embedded wallets and make user onboarding easier. In addition to native native integration, you can also use +third-party wallet providers as Privy, Dynamic, or Para as the signer for your smart account. + +Checkout the following guides to learn how to configure different signers: + +## Recommended + + + +## More + + diff --git a/smart-accounts-kit/guides/smart-accounts/signers/privy.md b/smart-accounts-kit/guides/smart-accounts/signers/privy.md new file mode 100644 index 00000000000..a5640587101 --- /dev/null +++ b/smart-accounts-kit/guides/smart-accounts/signers/privy.md @@ -0,0 +1,135 @@ +--- +description: Learn how to use Privy signer with MetaMask Smart Accounts. +sidebar_label: Privy +keywords: [privy, smart account, signer, metamask smart account] +--- + +# Use Privy with MetaMask Smart Accounts + +[Privy](https://docs.privy.io/welcome) provides an embedded wallet solution that enables seamless social login for Web3 applications making user onboarding easier. MetaMask Smart Accounts is a signer agnostic implementation +that allows you to use Privy's EOA wallet 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 +- A [Privy App ID](https://docs.privy.io/basics/get-started/dashboard/create-new-app#get-api-credentials) + +## Steps + +### 1. Install dependencies + +Install the following dependencies: + +```bash npm2yarn +npm install @privy-io/react-auth @privy-io/wagmi @metamask/smart-accounts-kit @tanstack/react-query wagmi viem +``` + +### 2. Create the Privy provider + +In this step, you'll configure the `PrivyProvider` component to provide the Privy's context +to your application. You'll also use the Privy's `WagmiProvider` component to integrate Privy with Wagmi. This +provider enables you to use Wagmi hooks with Privy. + +Once you have created the `PrivyAppProvider`, you must wrap it at the root of your application so +that the rest of your application has access to the Privy's context. + +For the advance configuration, see Privy's [configuring appearance](https://docs.privy.io/basics/get-started/dashboard/configuring-appearance) and [configuring login methods](https://docs.privy.io/basics/get-started/dashboard/configure-login-methods) guide. + + + + +```ts +import { QueryClientProvider } from "@tanstack/react-query"; +import { ReactNode } from "react"; +import { PrivyProvider } from '@privy-io/react-auth'; +// Make sure to import `WagmiProvider` from `@privy-io/wagmi`, not `wagmi` +import { WagmiProvider } from '@privy-io/wagmi'; +import { QueryClientProvider } from '@tanstack/react-query'; +import { wagmiConfig, queryClient, privyConfig } from "./config.ts" + +export function PrivyAppProvider({ children }: { children: ReactNode }) { + return ( + + + + {children} + + + + ); +} +``` + + + + + +```ts +import type { PrivyClientConfig } from '@privy-io/react-auth'; +import { QueryClient } from "@tanstack/react-query"; +import { createConfig, http } from "wagmi"; +import { sepolia } from "viem/chains"; + +export const queryClient = new QueryClient(); + +export const wagmiConfig = createConfig({ + chains: [sepolia], + ssr: true, + transports: { + [sepolia.id]: http(), + }, +}); + +export const privyConfig: PrivyClientConfig = { + embeddedWallets: { + createOnLogin: 'users-without-wallets', + showWalletUIs: true + }, + loginMethods: ['wallet', 'email', 'sms'], + appearance: { + showWalletLoginFirst: 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 +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 Privy 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). \ No newline at end of file