recreated example apps content using new prompt

Author: darrenmelvison1

examples/checkout/sdk-connect-with-nextjs/features.json

@@ -0,0 +1,5 @@
+{
+    "features": [
+       "connect-with-metamask"
+    ]
+}

examples/checkout/sdk-connect-with-nextjs/metadata.json

@@ -1,8 +1,8 @@
 {
-  "title": "Connect with MetaMask in Next.js",
-  "description": "A Next.js example showing how to connect to MetaMask using the Immutable Checkout SDK with and without permission requests",
-  "keywords": ["Immutable", "SDK", "Checkout", "MetaMask", "Wallet Connect", "Next.js", "Web3"],
-  "tech_stack": ["Next.js", "TypeScript", "MetaMask", "Biome UI", "Ethers.js"],
+  "title": "Connect with MetaMask using the Checkout SDK",
+  "description": "Learn how to connect a MetaMask wallet to your application using Immutable's Checkout SDK, with options for connecting with or without permissions.",
+  "keywords": ["Immutable", "SDK", "Checkout", "Wallet", "MetaMask", "Connect", "Next.js"],
+  "tech_stack": ["Next.js", "TypeScript", "Ethers.js", "Biom3", "React"],
   "product": "Checkout",
   "programming_language": "TypeScript"
 } 

examples/checkout/sdk-connect-with-nextjs/tutorial.md

@@ -1,114 +1,119 @@
-# Connecting to MetaMask with Checkout SDK in Next.js
+# Connect with MetaMask using the Checkout SDK
 
 ## Introduction
-This example app demonstrates how to connect your Next.js application to MetaMask using the Immutable Checkout SDK. It showcases how to initialize the SDK, create a provider for MetaMask, and establish a wallet connection with or without requesting permissions.
+This example app demonstrates how to connect a MetaMask wallet to your application using Immutable's Checkout SDK. It shows two different connection approaches: connecting with permissions and connecting without permissions. This app serves as a practical guide for implementing wallet connections, a fundamental step in blockchain application development.
 
 [View app on Github](https://github.com/immutable/ts-immutable-sdk/tree/main/examples/checkout/sdk-connect-with-nextjs)
 
 ## Features Overview
-- Get list of supported wallets
-- Create a MetaMask provider using Checkout SDK
-- Connect to MetaMask with permission requests
-- Connect to MetaMask without permission requests
-- Validate provider and connection status
-- Get connection status
+- Connect to MetaMask wallet with wallet permissions
+- Connect to MetaMask wallet without wallet permissions
+- Retrieve the list of supported wallets
+- Check if a provider is valid
+- Verify wallet connection status
 
 ## SDK Integration Details
 
-### **Get Wallet Allow List**: [Retrieve supported wallets](https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-connect-with-nextjs/src/app/connect-with-metamask/page.tsx#L28-L31)
+### Connect with MetaMask
+**Feature Name**: Connect a wallet to the application using MetaMask.
+
+**Source Code**: [source code file](https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-connect-with-nextjs/src/app/connect-with-metamask/page.tsx)
+
+**Implementation**:
+
+1. Getting the list of supported wallets:
 ```typescript
 // Get the list of default supported providers
 const type = checkout.WalletFilterTypes.ALL;
 const allowListRes = await checkoutSDK.getWalletAllowList({ type });
 ```
-**Explanation**: This code retrieves a list of all wallets supported by the Checkout SDK. The `WalletFilterTypes.ALL` parameter ensures all available wallet providers are returned in the response.
 
-### **Create MetaMask Provider**: [Initialize wallet provider](https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-connect-with-nextjs/src/app/connect-with-metamask/page.tsx#L35-L38)
+2. Creating a MetaMask provider:
 ```typescript
 // Create a provider given one of the default wallet provider names
 const walletProviderName = checkout.WalletProviderName.METAMASK;
 const providerRes = await checkoutSDK.createProvider({ walletProviderName });
 ```
-**Explanation**: This code creates a provider specifically for MetaMask. The SDK handles the interaction with the browser extension and returns a provider object that can be used for subsequent operations.
 
-### **Validate Provider**: [Check provider validity](https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-connect-with-nextjs/src/app/connect-with-metamask/page.tsx#L43-L45)
+3. Validating the provider:
 ```typescript
-// Check if the provider if a BrowserProvider
+// Check if the provider is a BrowserProvider
 const isProviderRes = checkout.Checkout.isWrappedBrowserProvider(providerRes.provider);
 ```
-**Explanation**: This function validates that the provider returned by the SDK is a proper BrowserProvider that can be used for blockchain interactions. This validation is essential before attempting to connect to a network.
 
-### **Connect with Permissions**: [Connect with wallet permissions](https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-connect-with-nextjs/src/app/connect-with-metamask/page.tsx#L50-L55)
+4. Connecting to the wallet with permissions:
 ```typescript
-// Get the current network information
-// Pass through requestWalletPermissions to request the user's wallet permissions
+// Connect with permissions
 const connectRes = await checkoutSDK.connect({ 
   provider: providerRes.provider,
   requestWalletPermissions: true,
 });
 ```
-**Explanation**: This code establishes a connection to the wallet while explicitly requesting permissions from the user. This approach is useful when your application needs specific permissions to interact with the user's wallet.
 
-### **Connect without Permissions**: [Connect without additional permissions](https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-connect-with-nextjs/src/app/connect-with-metamask/page.tsx#L59-L63)
+5. Connecting to the wallet without permissions:
 ```typescript
-// Get the current network information
+// Connect without permissions
 const connectRes = await checkoutSDK.connect({
   provider: providerRes.provider
 });
 ```
-**Explanation**: This code connects to the wallet without explicitly requesting permissions. This is suitable for applications that only need basic wallet interactions.
 
-### **Check Connection Status**: [Verify connection status](https://github.com/immutable/ts-immutable-sdk/blob/main/examples/checkout/sdk-connect-with-nextjs/src/app/connect-with-metamask/page.tsx#L67-L70)
+6. Checking connection status:
 ```typescript
-// Check if the provider if a BrowserProvider
+// Check if the provider is connected
 const isConnectedRes = await checkoutSDK.checkIsWalletConnected({
   provider: providerRes.provider
 });
 ```
-**Explanation**: This function verifies if the wallet is connected and returns the connection status along with the wallet address. This is useful for displaying the user's wallet status in the UI.
+
+**Explanation**:
+The app first retrieves a list of supported wallet providers using the `getWalletAllowList` method. It then creates a MetaMask provider using the `createProvider` method with the MetaMask wallet provider name. 
+
+Before attempting to connect, it validates the provider using `isWrappedBrowserProvider`. The connection to the wallet is made through the `connect` method, which can be called with or without requesting permissions. The difference is that when requesting permissions, the wallet will explicitly prompt the user for permission to interact with their wallet.
+
+Finally, the app verifies if the wallet is connected using the `checkIsWalletConnected` method, which returns the connection status and wallet address.
 
 ## Running the App
 
 ### Prerequisites
-- Node.js 18.x or higher
-- PNPM package manager
+- Node.js and pnpm installed on your machine
 - MetaMask browser extension installed
-- [Immutable Hub](https://hub.immutable.com/) account for obtaining a publishable API key
+- [Set up your environment variables in Immutable Hub](https://hub.immutable.com)
+
+### Steps to Run Locally
 
-### Setup Instructions
 1. Clone the repository:
-   ```bash
-   git clone https://github.com/immutable/ts-immutable-sdk.git
-   cd ts-immutable-sdk/examples/checkout/sdk-connect-with-nextjs
-   ```
+```bash
+git clone https://github.com/immutable/ts-immutable-sdk.git
+cd ts-immutable-sdk
+```
 
 2. Install dependencies:
-   ```bash
-   pnpm install
-   ```
+```bash
+pnpm install
+```
+
+3. Navigate to the example app:
+```bash
+cd examples/checkout/sdk-connect-with-nextjs
+```
 
-3. Create environment file:
-   ```bash
-   cp .env.example .env
-   ```
+4. Create your environment file:
+```bash
+cp .env.example .env
+```
 
-4. Add your Immutable Hub publishable key to the `.env` file:
-   ```
-   NEXT_PUBLIC_PUBLISHABLE_KEY=your_publishable_key_here
-   ```
+5. Edit the `.env` file and add your publishable API key from Immutable Hub:
+```
+NEXT_PUBLIC_PUBLISHABLE_KEY=your-publishable-key
+```
 
-5. Run the development server:
-   ```bash
-   pnpm dev
-   ```
+6. Start the development server:
+```bash
+pnpm dev
+```
 
-6. Open [http://localhost:3000](http://localhost:3000) in your browser to view the app.
+7. Open your browser and navigate to http://localhost:3000 to see the application.
 
 ## Summary
-This example demonstrates how to integrate Immutable's Checkout SDK with a Next.js application to connect to MetaMask. The app showcases different connection methods (with and without permissions), provider validation, and retrieving wallet information. It provides a foundation for building more complex blockchain applications that require wallet connectivity.
-
-Key takeaways:
-- The Checkout SDK simplifies wallet connection in Next.js applications
-- You can choose different connection approaches based on your permission requirements
-- The SDK provides helpful utilities for validating connections and retrieving wallet information
-- The integration works seamlessly with React's state management for displaying connection status 
+This example demonstrates how to implement wallet connection functionality using Immutable's Checkout SDK. By following this guide, developers can easily integrate MetaMask wallet connectivity into their applications, with options for requesting different permission levels. The app showcases a straightforward implementation that can be extended to build more complex blockchain applications. 

examples/checkout/sdk-gas-estimation-with-nextjs/features.json

@@ -0,0 +1,5 @@
+{
+    "features": [
+       "gas-estimation-with-metamask"
+    ]
+}

examples/checkout/sdk-gas-estimation-with-nextjs/metadata.json

@@ -1,8 +1,8 @@
 {
   "title": "Gas Estimation with Next.js",
-  "description": "A Next.js application demonstrating how to use the Immutable Checkout SDK to estimate gas fees for swap and bridge-to-L2 transactions",
-  "keywords": ["Immutable", "SDK", "Gas Estimation", "MetaMask", "Checkout", "Next.js", "Swap", "Bridge"],
-  "tech_stack": ["Next.js", "React", "TypeScript", "ethers.js", "Biom3 Design System"],
+  "description": "A Next.js application demonstrating how to use the Immutable Checkout SDK to estimate gas fees for swap and bridge to L2 transactions on Immutable zkEVM",
+  "keywords": ["Immutable", "SDK", "Gas Estimation", "MetaMask", "Checkout", "Swap", "Bridge", "zkEVM"],
+  "tech_stack": ["Next.js", "React", "TypeScript", "MetaMask", "Biom3"],
   "product": "Checkout",
   "programming_language": "TypeScript"
 }