Adds signer guide for Privy

* minor hot fix

* add privy as a signer guide

* update sidebar

* add index page for configuring signers

* Apply suggestions from code review

Co-authored-by: m4sterbunny <[email protected]>

---------

Co-authored-by: m4sterbunny <[email protected]>

Author: AyushBherwani1998

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',
               ],
             },
           ],

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:

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:

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

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 }) {
 <TabItem value = "config.ts">
 
 ```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: "<YOUR_WEB3AUTH_CLIENT_ID>",
+  web3AuthNetwork: "<YOUR_WEB3AUTH_NETWORK>",
 };
 
 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

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 
+
+<CardList items={[
+  {
+    href: "/smart-accounts-kit/development/guides/smart-accounts/signers/embedded-wallets/",
+    title: "MetaMask Embedded Wallets",
+    description: "Learn how to use MetaMask Embedded Wallets (Web3Auth) with MetaMask Smart Accounts.",
+  }
+]}/>
+
+## More
+
+<CardList items={[
+  {
+    href: "/smart-accounts-kit/development/guides/smart-accounts/signers/dynamic",
+    title: "Dynamic",
+    description: "Learn how to use Dynamic with MetaMask Smart Accounts.",
+  },
+  {
+    href: "/smart-accounts-kit/development/guides/smart-accounts/signers/privy",
+    title: "Privy",
+    description: "Learn how to use Privy with MetaMask Smart Accounts.",
+  }
+]}/>

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.
+
+<Tabs>
+<TabItem value = "provider.ts">
+
+```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 (
+    <PrivyProvider appId="<YOUR_PRIVY_APP_ID>" config={privyConfig}>
+      <QueryClientProvider client={queryClient}>
+        <WagmiProvider config={wagmiConfig}>
+          {children}
+        </WagmiProvider>
+      </QueryClientProvider>
+    </PrivyProvider>
+  );
+}
+```
+
+</TabItem>
+
+<TabItem value = "config.ts">
+
+```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
+  }
+};
+```
+
+</TabItem>
+</Tabs>
+
+### 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).