Add Scaffold-ETH page (#2457)

* Add Scaffold-ETH page

* minor edits

* update scaffold eth section

* fix the broken links

* minor edits

---------

Co-authored-by: AyushBherwani1998 <ayush.bherwani@consensys.net>
Co-authored-by: Ayush Bherwani <ayush.bherwani1998@gmail.com>

Author: alexandratran

gator-sidebar.js

@@ -25,6 +25,15 @@ const sidebar = {
           ],
         },
         'get-started/use-the-cli',
+        {
+          type: 'category',
+          label: 'Use Scaffold-ETH 2',
+          collapsed: true,
+          items: [
+            'get-started/use-scaffold-eth/smart-accounts',
+            'get-started/use-scaffold-eth/advanced-permissions',
+          ],
+        },
         'get-started/supported-networks',
       ],
     },

smart-accounts-kit/assets/scaffold-eth-7715.png

@@ -0,0 +1,60 @@
+---
+description: Get started with the Advanced Permissions (ERC-7715) using Scaffold-ETH 2.
+sidebar_label: Advanced Permissions (ERC-7715)
+keywords: [scaffold-eth, delegation, advanced permissions, erc7715, 7715, template]
+---
+
+# Use Advanced Permissions with Scaffold-ETH 2
+
+Use the [Advanced Permissions (ERC-7715) extension](https://github.com/MetaMask/erc-7715-extension) for [Scaffold-ETH 2](https://docs.scaffoldeth.io/) to bootstrap a project in 
+under two minutes. This extension helps you quickly generate the boilerplate code to request fine-grained permissions 
+from a MetaMask user, and execute transactions on their behalf.
+
+## Prerequisites
+
+- Install [Node.js](https://nodejs.org/en/blog/release/v20.18.3) v20.18.3 or later.
+- Install [Yarn](https://yarnpkg.com/) package manager.
+- Install [Git](https://git-scm.com/install/).
+- [Create a Pimlico API key](https://docs.pimlico.io/guides/create-api-key#create-api-key).
+
+### 1. Install the extension
+
+Run the following command to install the Smart Accounts Kit extension:
+
+```bash
+npx create-eth@latest -e metamask/erc-7715-extension your-project-name
+```
+
+### 2. Set up enviroment variables
+
+Navigate into the project's `nextjs` package, and create a `.env.local` file. Once created, update the
+`NEXT_PUBLIC_PIMLICO_API_KEY` environment variable with your Pimlico API Key.
+
+```bash
+cd your-project-name/packages/nextjs
+cp .env.example .env.local
+```
+
+### 3. Start the frontend
+
+In the project's root directory start the development server.
+
+```bash
+yarn start
+```
+
+### 4. Complete the Advanced Permissions lifecycle
+
+Navigate to the **Advanced Permissions (ERC-7715)** page in your Scaffold-ETH
+frontend at http://localhost:3000/erc-7715-permissions, and follow the steps to request an advanced
+permission, and execute a transaction on the user's behalf.
+
+You can view the completed transaction on Etherscan.
+
+<p align="center">
+    <img src={require("../../assets/scaffold-eth-7715.png").default} alt="Scaffold-ETH 2 Advanced Permissions Page" />
+</p>
+
+## Next steps
+
+Learn more about [Advanced Permissions (ERC-7715)](../../concepts/advanced-permissions.md).

smart-accounts-kit/assets/scaffold-eth-smart-accounts.png

@@ -0,0 +1,62 @@
+---
+description: Get started with the MetaMask Smart Accounts using Scaffold-ETH 2.
+sidebar_label: MetaMask Smart Accounts
+keywords: [scaffold-eth, delegation, smart accounts, template]
+---
+
+# Use MetaMask Smart Accounts with Scaffold-ETH 2
+
+Use the [MetaMask Smart Accounts extension](https://github.com/metamask/gator-extension) for [Scaffold-ETH 2](https://docs.scaffoldeth.io/) to bootstrap a project in 
+under two minutes. This extension helps you quickly generate the boilerplate code to create an embedded smart account, and complete
+the delegation lifecycle (create, sign, and redeem a delegation).
+
+## Prerequisites
+
+- Install [Node.js](https://nodejs.org/en/blog/release/v20.18.3) v20.18.3 or later.
+- Install [Yarn](https://yarnpkg.com/) package manager.
+- Install [Git](https://git-scm.com/install/).
+- [Create a Pimlico API key](https://docs.pimlico.io/guides/create-api-key#create-api-key).
+
+## Steps
+
+### 1. Install the extension
+
+Run the following command to install the Smart Accounts Kit extension:
+
+```bash
+npx create-eth@latest -e metamask/gator-extension your-project-name
+```
+
+### 2. Set up enviroment variables
+
+Navigate into the project's `nextjs` package, and create a `.env.local` file. Once created, update the
+`NEXT_PUBLIC_PIMLICO_API_KEY` environment variable with your Pimlico API Key.
+
+```bash
+cd your-project-name/packages/nextjs
+cp .env.example .env.local
+```
+
+### 3. Start the frontend
+
+In the project's root directory start the development server.
+
+```bash
+yarn start
+```
+
+### 4. Complete the delegation lifecycle
+
+Navigate to the **MetaMask Smart Accounts & Delegation** page in your Scaffold-ETH
+frontend at http://localhost:3000/delegations, and follow the steps to deploy a delegator
+account, create a delegate wallet, create a delegation, and redeem a delegation. 
+
+You can view the completed transaction on Etherscan.
+
+<p align="center">
+    <img src={require("../../assets/scaffold-eth-smart-accounts.png").default} alt="Scaffold-ETH 2 Smart Accounts & Delegation Page" />
+</p>
+
+## Next steps
+
+Learn more about [MetaMask Smart Accounts](../../concepts/smart-accounts.md) and [delegation](../../concepts/delegation/index.md).

smart-accounts-kit/get-started/use-scaffold-eth/advanced-permissions.md

@@ -54,10 +54,14 @@ Check out the following documentation from these partners:
 <CardList
   items={[
     {
-      href: "https://scaffoldeth.io/extensions",
-      title: "Scaffold-ETH 2",
-      description: "Install the MetaMask Delegation Toolkit extension for Scaffold-ETH 2.",
-      buttonIcon: "external-arrow",
+      href: "get-started/use-scaffold-eth/smart-accounts",
+      title: "Smart Accounts with Scaffold-ETH 2",
+      description: "Install the MetaMask Smart Accounts extension for Scaffold-ETH 2.",
+    },
+    {
+      href: "get-started/use-scaffold-eth/advanced-permissions",
+      title: "Advanced Permissions with Scaffold-ETH 2",
+      description: "Install the MetaMask Advanced Permissions (ERC-7715) extension for Scaffold-ETH 2.",
     },
     {
       href: "https://viem.sh/account-abstraction/accounts/smart/toMetaMaskSmartAccount",