chore: DVR187 Wallet Balances Sample App (#2224)

Co-authored-by: Craig M. <[email protected]>

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

@@ -1,21 +1,27 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Checkout SDK Connect Example App
+
+This example app is designed to show you how to connect a wallet either with or without asking for permissions to interact with the wallet.
+
+This example app runs on Immutable Testnet. To use this code on Immutable zkEVM Mainnet make sure you instantiate the SDK with the Mainnet configuration.
 
 ## Getting Started
 
-First, run the development server:
+Install your dependencies:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+yarn install
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Copy over the `.env.example` file to `.env` and fill in the required environment variables.
 
 ## Required Environment Variables
 
 - NEXT_PUBLIC_PUBLISHABLE_KEY // replace with your publishable API key from Hub
+
+Run the app locally:
+
+```bash
+yarn dev
+```
+
+Then open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

examples/checkout/sdk-connect-with-nextjs/tests/base.spec.ts

@@ -11,3 +11,18 @@ test.describe("home page", () => {
     await expect(page.getByRole("link", { name: "Connect with Metamask" })).toBeVisible();
   });
 });
+
+test.describe("Connect with Metamask", () => {
+  test("has heading, login button and initial account status set correctly", async ({ page }) => {
+    await page.click("text=Connect with Metamask");
+    await expect(page.getByRole("heading", { name: "Connect with Metamask" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Connect Metamask with Permissions" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Connect Metamask without Permissions" })).toBeVisible();
+    await expect(page.getByText("(not fetched)")).toHaveCount(1);
+    await expect(page.getByText("(not created)")).toHaveCount(1);
+    await expect(page.getByText("(not validated)")).toHaveCount(1);
+    await expect(page.getByText("(not connected)")).toHaveCount(3);
+    await expect(page.getByRole("link", { name: "Return to Examples" })).toBeVisible();
+  });
+});
+

examples/checkout/sdk-switch-network-with-nextjs/README.md

@@ -1,21 +1,27 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Checkout SDK Switch Network Example App
+
+This example app is designed to show you how to switch a connected wallet between Sepolia Testnet and Immutable zkEVM Testnet networks.
+
+This example app runs on Immutable Testnet. To use this code on Immutable zkEVM Mainnet make sure you instantiate the SDK with the Mainnet configuration.
 
 ## Getting Started
 
-First, run the development server:
+Install your dependencies:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+yarn install
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Copy over the `.env.example` file to `.env` and fill in the required environment variables.
 
 ## Required Environment Variables
 
 - NEXT_PUBLIC_PUBLISHABLE_KEY // replace with your publishable API key from Hub
+
+Run the app locally:
+
+```bash
+yarn dev
+```
+
+Then open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

examples/checkout/sdk-switch-network-with-nextjs/src/app/switch-with-metamask/page.tsx

@@ -5,7 +5,6 @@ import { useState } from "react";
 import { Web3Provider } from "@ethersproject/providers";
 import { Button, Heading, Body, Link, Table } from "@biom3/react";
 import NextLink from "next/link";
-import { NetworkInfo } from "@imtbl/sdk/checkout";
 
 export default function ConnectWithMetamask() {
   const [isConnected, setIsConnected] = useState<boolean>();
@@ -17,22 +16,19 @@ export default function ConnectWithMetamask() {
   const [connectedProvider, setConnectedProvider] = useState<Web3Provider>();
   const [supportedNetworks, setSupportedNetworks] = useState<string[]>();
   const [switchNetworkLoading, setSwitchNetworkLoading] = useState<boolean>(false);
-  const [networkInfo, setNetworkInfo] = useState<NetworkInfo | null>(null);
 
   const updateNetworkInfo = async (provider: Web3Provider) => {
     try {
       // #doc get-network-details
       // Get the network details
       const info = await checkoutSDK.getNetworkInfo({ provider });
       // #enddoc get-network-details
-      setNetworkInfo(info);
       setChainName(info.name);
       setChainId(info.chainId.toString());
       setNativeCurrency(info.nativeCurrency?.symbol || 'N/A');
       setIsConnected(true);
     } catch (error) {
       console.error("Failed to update network info:", error);
-      setNetworkInfo(null);
       setChainName(undefined);
       setChainId(undefined);
       setNativeCurrency(undefined);

examples/checkout/sdk-switch-network-with-nextjs/tests/base.spec.ts

@@ -11,3 +11,15 @@ test.describe("home page", () => {
     await expect(page.getByRole("link", { name: "Switch Network with MetaMask" })).toBeVisible();
   });
 });
+
+test.describe("switch network with metamask", () => {
+  test("has heading, login button and initial account status set correctly", async ({ page }) => {
+    await page.click("text=Switch Network with MetaMask");
+    await expect(page.getByRole("heading", { name: "Switch Network" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Connect MetaMask" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Switch to Sepolia Testnet" })).toBeVisible();
+    await expect(page.getByRole("button", { name: " Switch to Immutable zkEVM Testnet" })).toBeVisible();
+    await expect(page.getByText("(not connected)")).toHaveCount(5);
+    await expect(page.getByRole("link", { name: "Return to Examples" })).toBeVisible();
+  });
+});

examples/checkout/sdk-wallet-balance-with-nextjs/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_PUBLISHABLE_KEY=

examples/checkout/sdk-wallet-balance-with-nextjs/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["next/core-web-vitals", "next"]
+}

examples/checkout/sdk-wallet-balance-with-nextjs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/checkout/sdk-wallet-balance-with-nextjs/README.md

@@ -0,0 +1,27 @@
+# Checkout SDK Wallet Balance Example App
+
+This example app is designed to show you how to retrieve the wallet balance of the connected provider. It will also show you how to fetch the token's details like Name, Symbol and Decimals.
+
+This example app runs on Immutable zkEVM Testnet. To use this code on Immutable zkEVM Mainnet make sure you instantiate the SDK with the Mainnet configuration.
+
+## Getting Started
+
+Install your dependencies:
+
+```bash
+yarn install
+```
+
+Copy over the `.env.example` file to `.env` and fill in the required environment variables.
+
+## Required Environment Variables
+
+- NEXT_PUBLIC_PUBLISHABLE_KEY // replace with your publishable API key from Hub
+
+Run the app locally:
+
+```bash
+yarn dev
+```
+
+Then open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

examples/checkout/sdk-wallet-balance-with-nextjs/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

examples/checkout/sdk-wallet-balance-with-nextjs/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "sdk-wallet-balance-with-nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+    "test": "playwright test"
+  },
+  "dependencies": {
+    "@biom3/react": "^0.25.21",
+    "@ethersproject/providers": "^5.7.2",
+    "@imtbl/sdk": "latest",
+    "next": "14.2.7",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.3",
+    "@types/node": "^20",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.7",
+    "typescript": "^5.6.2"
+  }
+}

examples/checkout/sdk-wallet-balance-with-nextjs/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: "80%",
+  reporter: "html",
+
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+  },
+
+  projects: [
+    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
+    { name: "webkit", use: { ...devices["Desktop Safari"] } },
+
+    { name: "Mobile Chrome", use: { ...devices["Pixel 5"] } },
+    { name: "Mobile Safari", use: { ...devices["iPhone 12"] } },
+  ],
+
+  webServer: {
+    command: "yarn start",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+});

examples/checkout/sdk-wallet-balance-with-nextjs/src/app/globals.css

@@ -0,0 +1,23 @@
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 1rem;
+}
+
+body {
+  margin: 0;
+}
+
+.flex-container {
+  min-height: 100%;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.mb-1 {
+  margin-bottom: 1rem;
+}

examples/checkout/sdk-wallet-balance-with-nextjs/src/app/layout.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import AppWrapper from "./utils/wrapper";
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Checkout SDK - Wallet Balance with NextJS",
+  description: "Examples of how to check wallet balance using the Checkout SDK with NextJS",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <AppWrapper>
+          {children}
+        </AppWrapper>
+        </body>
+    </html>
+  );
+}