Update tutorials

Author: yashovardhan

embedded-wallets/infrastructure/nodes-and-dkg.mdx

@@ -13,7 +13,7 @@ The architecture consists of four parts:‌
 - A private BFT network between nodes
 - A front-end client/SDK that interacts with nodes
 
-![Architecture](/guides/graph-6-final.png)
+![Architecture](/img/guides/graph-6-final.png)
 
 A smart contract is used for node discovery. Nodes are selected, operate for a fixed period, and generate a set of keys via DKG.‌
 
@@ -67,7 +67,7 @@ The keys are assigned to a combination of `verifier` \(e.g., Google, Reddit, Dis
 
 The fundamental flow for Torus sign-in is as follows:
 
-![Standard login with OAuth2 (Google, Facebook, Apple, Reddit, Discord, Twitch)](/guides/login-key-assignments.png)
+![Standard login with OAuth2 (Google, Facebook, Apple, Reddit, Discord, Twitch)](/img/guides/login-key-assignments.png)
 
 1. Your application gets the user to sign-in via their preferred method \(OAuth / email password / passwordless / verification code\).
 2. After the user gives consent/verifies his/her email, Torus SDK will receive an ID token and assign a key to the user depending on User Verifier ID from ID Token.

embedded-wallets/sdk/_common/_whitelabel_showcase.mdx

@@ -1,10 +1,10 @@
-import Image4 from "@site/static/guides/whitelabel-web3auth-openlogin-dark.png";
-import Image7 from "@site/static/guides/whitelabel-web3auth-openlogin-language.png";
-import Image3 from "@site/static/guides/whitelabel-web3auth-openlogin-light.png";
-import Image9 from "@site/static/guides/whitelabel-web3auth-openlogin-logo-dark.png";
-import Image8 from "@site/static/guides/whitelabel-web3auth-openlogin-logo-light.png";
-import DashboardImage from "@site/static/guides/whitelabel-web3auth-openlogin-theme1.png";
-import Image6 from "@site/static/guides/whitelabel-web3auth-openlogin-theme2.png";
+import Image4 from '@site/static/img/guides/whitelabel-web3auth-openlogin-dark.png'
+import Image7 from '@site/static/img/guides/whitelabel-web3auth-openlogin-language.png'
+import Image3 from '@site/static/img/guides/whitelabel-web3auth-openlogin-light.png'
+import Image9 from '@site/static/img/guides/whitelabel-web3auth-openlogin-logo-dark.png'
+import Image8 from '@site/static/img/guides/whitelabel-web3auth-openlogin-logo-light.png'
+import DashboardImage from '@site/static/img/guides/whitelabel-web3auth-openlogin-theme1.png'
+import Image6 from '@site/static/img/guides/whitelabel-web3auth-openlogin-theme2.png'
 
 ### `name`
 
@@ -16,7 +16,7 @@ The name of the application. This will be displayed in the key reconstruction pa
       Standard screen <strong>without</strong> any change
     </h4>
     <img
-      style={{ display: "block", maxHeight: "500px", alignSelf: "center" }}
+      style={{ display: 'block', maxHeight: '500px', alignSelf: 'center' }}
       src={DashboardImage}
       alt="Standard screen without any change"
     />
@@ -26,7 +26,7 @@ The name of the application. This will be displayed in the key reconstruction pa
       Name changed to <code>Formidable Duo</code>
     </h4>
     <img
-      style={{ display: "block", maxHeight: "500px", alignSelf: "center" }}
+      style={{ display: 'block', maxHeight: '500px', alignSelf: 'center' }}
       src={Image6}
       alt="Name changed to Formidable Duo"
     />
@@ -45,7 +45,7 @@ in the key reconstruction page.
       <code>logoLight</code> on dark mode
     </h4>
     <img
-      style={{ display: "block", maxHeight: "500px", alignSelf: "center" }}
+      style={{ display: 'block', maxHeight: '500px', alignSelf: 'center' }}
       src={Image8}
       alt="logoLight on dark mode"
     />
@@ -55,7 +55,7 @@ in the key reconstruction page.
       <code>logoDark</code> on light mode
     </h4>
     <img
-      style={{ display: "block", maxHeight: "500px", alignSelf: "center" }}
+      style={{ display: 'block', maxHeight: '500px', alignSelf: 'center' }}
       src={Image9}
       alt="logoDark on light mode"
     />
@@ -68,7 +68,7 @@ in the key reconstruction page.
 Default language will set the language used on all OpenLogin screens. The supported languages are:
 
 <div className="text-image-column">
-  <div style={{ flexGrow: "1", minWidth: "200px" }}>
+  <div style={{ flexGrow: '1', minWidth: '200px' }}>
     <ul>
       <li>
         <code>en</code> - English (default)
@@ -103,7 +103,7 @@ Default language will set the language used on all OpenLogin screens. The suppor
     </ul>
   </div>
   <div>
-    <img style={{ width: "100%", maxWidth: "500px" }} src={Image7} alt="default Language screen" />
+    <img style={{ width: '100%', maxWidth: '500px' }} src={Image7} alt="default Language screen" />
   </div>
 </div>
 <br />
@@ -120,7 +120,7 @@ Can be set to `true` or `false` with default set to `false`.
       For Light: <code>dark: false</code>
     </h4>
     <img
-      style={{ display: "block", maxHeight: "500px", alignSelf: "center" }}
+      style={{ display: 'block', maxHeight: '500px', alignSelf: 'center' }}
       src={Image3}
       alt="light theme"
     />
@@ -130,7 +130,7 @@ Can be set to `true` or `false` with default set to `false`.
       For Dark: <code>dark: true</code>
     </h4>
     <img
-      style={{ display: "block", maxHeight: "500px", alignSelf: "center" }}
+      style={{ display: 'block', maxHeight: '500px', alignSelf: 'center' }}
       src={Image4}
       alt="dark theme"
     />
@@ -151,7 +151,7 @@ Examples below.
       Standard color <code>#0364FF</code>
     </h4>
     <img
-      style={{ display: "block", maxHeight: "500px", alignSelf: "center" }}
+      style={{ display: 'block', maxHeight: '500px', alignSelf: 'center' }}
       src={DashboardImage}
       alt="Theme is a record of colors that can be configured."
     />
@@ -161,7 +161,7 @@ Examples below.
       Color changed to <code>#D72F7A</code>
     </h4>
     <img
-      style={{ display: "block", maxHeight: "500px", alignSelf: "center" }}
+      style={{ display: 'block', maxHeight: '500px', alignSelf: 'center' }}
       src={Image6}
       alt="Theme affects icons and links."
     />

sdk-sidebar.js

@@ -37,13 +37,13 @@ const sidebar = {
       ],
     },
     {
-      type:'category',
+      type: 'category',
       label: 'Tutorials',
       collapsible: false,
       collapsed: false,
       items: [
-        'tutorials/create-wallet-ai-agent',
-        'tutorials/upgrade-eoa-to-smart-account',
+        { type: "link", label: "Create a Wallet AI Agent", href: "/tutorials/create-wallet-ai-agent" },
+        { type: "link", label: "Upgrade an EOA to a Smart Account", href: "/tutorials/upgrade-eoa-to-smart-account" },
       ],
     },
     {

src/components/Badge/badge.module.scss

@@ -8,7 +8,7 @@
   --badge-error-bg-color: rgba(215, 56, 71, 0.1);
 }
 
-:root[data-theme="dark"] {
+:root[data-theme='dark'] {
   --badge-default-color: #bbc0c5;
   --badge-default-bg-color: #24272a;
   --badge-default-border-color: #bbc0c5;
@@ -30,7 +30,7 @@
   padding: 2px 8px;
   color: var(--badge-default-color);
   background-color: var(--badge-default-bg-color);
-  text-transform: capitalize;
+  text-transform: none;
 
   &.success {
     color: var(--badge-success-color);

src/components/GuidesPage/GuideCard.tsx

@@ -100,7 +100,7 @@ export default function GuideCard({
           {tags.map(tag => (
             <Badge
               key={tag}
-              label={tag}
+              label={tag.toLowerCase()}
               variant={activeTags.includes(tag) ? 'success' : 'default'}
             />
           ))}

src/components/SubNavBar/configs.ts

@@ -11,7 +11,7 @@ export const EMBEDDED_WALLETS_SUBNAV_CONFIG: SubNavBarConfig = {
     },
     {
       key: 'sdk',
-      label: 'SDK',
+      label: 'SDKs',
       path: '/embedded-wallets/sdk/',
     },
     {

src/pages/tutorials/android-wallet.mdx

@@ -5,7 +5,7 @@ description: Empower your Android app with a Ethereum Web3 wallet using the Web3
 type: guide
 tags: [embedded wallets, android, evm, kotlin, secp256k1, web3auth]
 date: May 27, 2024
-author: Web3Auth Team
+author: MetaMask Developer Relations
 ---
 
 import SEO from '@site/src/components/SEO'

sdk/tutorials/create-wallet-ai-agent.md renamed to src/pages/tutorials/create-wallet-ai-agent.md

@@ -1,13 +1,15 @@
 ---
+title: Create an AI agent using MetaMask SDK
+image: 'img/guides/guides-banners/mm-sdk-ai-agent.png'
 description: Create a wallet AI agent using MetaMask SDK and Vercel's AI SDK.
-keywords: [SDK, wallet, AI, agent, Vercel, Wagmi, Next.js, OpenAI, dapp]
+type: guide
+tags: [metamask sdk, wallet, AI, agent, Vercel, Wagmi, Next.js, OpenAI]
+date: May 2, 2025
 ---
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
-# Create a wallet AI agent
-
 This tutorial walks you through creating an AI agent dapp that can display your wallet balance and initiate transactions from your wallet, on the Linea Sepolia network.
 You will use a provided template, which sets up MetaMask SDK and [Vercel's AI SDK](https://sdk.vercel.ai/) with a [Next.js](https://nextjs.org/docs) and [Wagmi](https://wagmi.sh/) dapp.
 
@@ -24,36 +26,36 @@ You will use a provided template, which sets up MetaMask SDK and [Vercel's AI SD
 
 ### 1. Set up the project
 
-1. Clone the [`Consensys/wallet-agent`](https://github.com/Consensys/wallet-agent/tree/main) repository:
+1.  Clone the [`Consensys/wallet-agent`](https://github.com/Consensys/wallet-agent/tree/main) repository:
 
     ```bash
     git clone [email protected]:Consensys/wallet-agent.git
     ```
 
-2. Switch to the `initial-setup` branch:
+2.  Switch to the `initial-setup` branch:
 
     ```bash
     cd wallet-agent && git switch initial-setup
     ```
 
-3. Install dependencies:
+3.  Install dependencies:
 
     ```bash
     npm install
     ```
 
-4. Create a `.env.local` file:
+4.  Create a `.env.local` file:
 
     ```bash
     touch .env.local
     ```
 
-5. In `.env.local`, add an `OPENAI_API_KEY` environment variable, replacing `<YOUR-API-KEY>` with your [OpenAI](https://platform.openai.com/docs/overview) API key.
-Vercel's AI SDK will use this environment variable to authenticate your dapp with the OpenAI service.
+5.  In `.env.local`, add an `OPENAI_API_KEY` environment variable, replacing `<YOUR-API-KEY>` with your [OpenAI](https://platform.openai.com/docs/overview) API key.
+    Vercel's AI SDK will use this environment variable to authenticate your dapp with the OpenAI service.
 
-    ```text title=".env.local"
-    OPENAI_API_KEY=<YOUR-API-KEY>
-    ```
+        ```text title=".env.local"
+        OPENAI_API_KEY=<YOUR-API-KEY>
+        ```
 
 ### 2. Create the dapp interface
 
@@ -78,7 +80,7 @@ import Image from "next/image";
 +   const { connect } = useConnect();
 +   const { address, isConnected } = useAccount();
 +   const { disconnect } = useDisconnect();
-+ 
++
 +   return (
 +     <div className="mx-auto">
 +       {isConnected ? (
@@ -117,7 +119,7 @@ When connected, the AI agent chat interface displays with your connected wallet
 You can test the AI functionality by sending messages in the chat:
 
 <p align="center">
-  <img src={require("../_assets/sdk-ai-agent.png").default} alt="SDK AI agent initial setup" class="appScreen" />
+  <img src={require("@site/static/img/guides/sdk-ai-agent.png").default} alt="SDK AI agent initial setup" class="appScreen" />
 </p>
 
 ### 3. Create a Public Client
@@ -153,7 +155,7 @@ Use the [`getBalance`](https://viem.sh/docs/actions/public/getBalance) method of
 
 ```ts title="tools.ts"
 // add-start
-+ import { publicClient } from "@/wagmi.config"; 
++ import { publicClient } from "@/wagmi.config";
 + import { formatEther } from "viem";
 // add-end
 import { tool as createTool } from "ai";
@@ -196,7 +198,7 @@ export const tools = {
 In the development server, test that this tool works to get your current Linea Sepolia ETH balance:
 
 <p align="center">
-  <img src={require("../_assets/sdk-ai-agent-get-balance.png").default} alt="SDK AI agent get balance" class="appScreen" />
+  <img src={require("@site/static/img/guides/sdk-ai-agent-get-balance.png").default} alt="SDK AI agent get balance" class="appScreen" />
 </p>
 
 ### 5. Create a tool to send transactions
@@ -243,18 +245,15 @@ export const tools = {
 
 ```tsx
 // ...
-if (toolName === "sendTransaction") {
-  const {
-    result,
-  }: { result: { to: string; amount: string } } =
-    toolInvocation;
+if (toolName === 'sendTransaction') {
+  const { result }: { result: { to: string; amount: string } } = toolInvocation
 
   if (isLoading) {
     return (
       <div key={toolCallId}>
         <p>Loading...</p>
       </div>
-    );
+    )
   }
 
   return (
@@ -266,17 +265,12 @@ if (toolName === "sendTransaction") {
             to: result.to as `0x${string}`,
             value: parseEther(result.amount),
           })
-        }
-      >
+        }>
         Send Transaction
       </Button>
-      <p>
-        {hash
-          ? `Transaction sent: ${hash}`
-          : "Transaction not sent"}
-      </p>
+      <p>{hash ? `Transaction sent: ${hash}` : 'Transaction not sent'}</p>
     </div>
-  );
+  )
 }
 // ...
 ```
@@ -289,13 +283,13 @@ In the development server, test that this tool works to send Linea Sepolia ETH f
 When you request the agent to send a transaction, it will provide a button for you to send the transaction, but it will not send it for you:
 
 <p align="center">
-  <img src={require("../_assets/sdk-ai-agent-txn-not-sent.png").default} alt="NFT confirmation" class="appScreen" />
+  <img src={require("@site/static/img/guides/sdk-ai-agent-txn-not-sent.png").default} alt="NFT confirmation" class="appScreen" />
 </p>
 
 When you select the button and confirm the transaction in MetaMask, the transaction will be sent:
 
 <p align="center">
-  <img src={require("../_assets/sdk-ai-agent-txn-sent.png").default} alt="Multiple NFTs confirmation" class="appScreen" />
+  <img src={require("@site/static/img/guides/sdk-ai-agent-txn-sent.png").default} alt="Multiple NFTs confirmation" class="appScreen" />
 </p>
 
 You can check the status of the transaction in the [Linea Sepolia block explorer](https://sepolia.lineascan.build/).
@@ -307,4 +301,4 @@ You can configure the AI agent to directly send the transaction using a [Viem Wa
 ## Resources
 
 - View the main branch of the [`Consensys/wallet-agent`](https://github.com/Consensys/wallet-agent) template for the completed implementation of this tutorial.
-- Watch the [live coding session](https://www.youtube.com/watch?v=ZVuOaKuAhBQ) on YouTube, in which the MetaMask DevRel team walks through creating a wallet AI agent from the initial template.
+- Watch the [live coding session](https://www.youtube.com/watch?v=ZVuOaKuAhBQ) on YouTube, in which the MetaMask DevRel team walks through creating a wallet AI agent from the initial template.

src/pages/tutorials/erc20-paymaster.mdx

@@ -5,7 +5,7 @@ description: Learn how to use ERC-20 paymaster with Web3Auth Native Account Abst
 type: guide
 tags: [embedded wallets, account abstraction, web, paymaster, erc4337, web3auth]
 date: October 29, 2024
-author: Web3Auth Team
+author: MetaMask Developer Relations
 ---
 
 import SEO from '@site/src/components/SEO'

src/pages/tutorials/flutter-wallet.mdx

@@ -5,7 +5,7 @@ description: Empower your Flutter app with a Chain Agnostic Web3 wallet using th
 type: guide
 tags: [embedded wallets, flutter, andriod, ios, evm, solana, web3auth]
 date: April 22, 2024
-author: Web3Auth Team
+author: MetaMask Developer Relations
 ---
 
 import SEO from '@site/src/components/SEO'