From 35f6206aa16c90d9bdaf1619d6229403f3ceb045 Mon Sep 17 00:00:00 2001
From: ink-victor <171172553+ink-victor@users.noreply.github.com>
Date: Thu, 26 Dec 2024 06:18:49 -0500
Subject: [PATCH] feat: ink-701 add ink network buttons

---
 global-env.d.ts                      |   3 +
 src/components/AddNetworkButton.tsx  | 125 ++++++++++++++++-----------
 src/components/Button.tsx            |   9 +-
 src/icons/Check.tsx                  |  19 ++++
 src/icons/ConnectedPulse.tsx         |  12 +++
 src/pages/general/connect-wallet.mdx |  25 +++---
 src/utils/add-network.ts             |  55 ------------
 src/utils/networks.ts                | 122 ++++++++++++++++++++++++++
 8 files changed, 247 insertions(+), 123 deletions(-)
 create mode 100644 global-env.d.ts
 create mode 100644 src/icons/Check.tsx
 create mode 100644 src/icons/ConnectedPulse.tsx
 delete mode 100644 src/utils/add-network.ts
 create mode 100644 src/utils/networks.ts

diff --git a/global-env.d.ts b/global-env.d.ts
new file mode 100644
index 00000000..d1994071
--- /dev/null
+++ b/global-env.d.ts
@@ -0,0 +1,3 @@
+interface Window {
+  ethereum: any;
+}
diff --git a/src/components/AddNetworkButton.tsx b/src/components/AddNetworkButton.tsx
index 68ca89d3..dd8cac80 100644
--- a/src/components/AddNetworkButton.tsx
+++ b/src/components/AddNetworkButton.tsx
@@ -1,65 +1,88 @@
-import { useEffect, useState } from "react";
-
-import { addNetwork, isNetworkAdded, NetworkType } from "@/utils/add-network";
+import { CheckIcon } from "@/icons/Check";
+import { ConnectedPulse } from "@/icons/ConnectedPulse";
+import {
+  networkParams,
+  NetworkType,
+  useNetwork,
+  UseNetworkResponse,
+} from "@/utils/networks";
 
 import { Button } from "./Button";
 
 interface AddNetworkButtonProps {
   network: NetworkType;
+  heading: string;
 }
 
-export const AddNetworkButton = ({ network }: AddNetworkButtonProps) => {
-  const [isAdded, setIsAdded] = useState<boolean>(false);
-
-  useEffect(() => {
-    const checkNetwork = async () => {
-      if ((window as any).ethereum) {
-        const added = await isNetworkAdded(network);
-        setIsAdded(added);
-      }
-    };
+export const AddNetworkButton = ({
+  network,
+  heading,
+}: AddNetworkButtonProps) => {
+  const { isWalletInstalled, isAdded, isSelected, addNetwork, selectNetwork } =
+    useNetwork(network);
 
-    checkNetwork();
-
-    if ((window as any).ethereum) {
-      (window as any).ethereum.on("chainChanged", checkNetwork);
-    }
+  return (
+    <div className="h-36">
+      <div className="flex flex-col gap-2">
+        <h3 className="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl relative flex gap-2 items-center">
+          <span>{heading}</span>
+          {isSelected && <ConnectedPulse className="size-6" />}
+          <a
+            href="#mainnet"
+            id="mainnet"
+            className="subheading-anchor"
+            aria-label="Permalink for this section"
+          ></a>
+        </h3>
+        <AddNetworkButtonContent
+          isWalletInstalled={isWalletInstalled}
+          isAdded={isAdded}
+          isSelected={isSelected}
+          addNetwork={addNetwork}
+          selectNetwork={selectNetwork}
+          network={network}
+        />
+      </div>
+    </div>
+  );
+};
+const AddNetworkButtonContent = ({
+  isWalletInstalled,
+  isAdded,
+  isSelected,
+  addNetwork,
+  selectNetwork,
+  network,
+}: UseNetworkResponse & { network: NetworkType }) => {
+  if (!isWalletInstalled) {
+    return <p>No wallet connected</p>;
+  }
 
-    return () => {
-      if ((window as any).ethereum) {
-        (window as any).ethereum.removeListener("chainChanged", checkNetwork);
-      }
-    };
-  }, [network]);
+  if (isAdded && isSelected) {
+    return (
+      <span className="text-green-500 font-bold flex gap-1 items-center">
+        <span>Network added & selected.</span>
+      </span>
+    );
+  }
 
-  const networkName = network === "mainnet" ? "Ink Mainnet" : "Ink Sepolia";
+  if (isAdded) {
+    return (
+      <span className="text-green-500 font-bold flex flex-col gap-1">
+        <p>Network added.</p>
+        <p
+          onClick={selectNetwork}
+          className="underline hover:cursor-pointer hover:opacity-90"
+        >
+          Click here to select it.
+        </p>
+      </span>
+    );
+  }
 
   return (
-    <div className="space-y-2 mt-4">
-      {isAdded ? (
-        <div className="flex items-center text-green-600 dark:text-green-400 font-semibold">
-          <svg
-            className="w-5 h-5 mr-2"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M5 13l4 4L19 7"
-            />
-          </svg>
-          {networkName} Network Added
-        </div>
-      ) : (
-        <div className="space-y-4">
-          <Button variant="primary" onClick={() => addNetwork(network)}>
-            Add {networkName} Network
-          </Button>
-        </div>
-      )}
-    </div>
+    <Button variant="primary" onClick={addNetwork} className="w-60 mt-2">
+      Add {networkParams[network].chainName}
+    </Button>
   );
 };
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 173a482e..4d4d7b01 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -4,23 +4,26 @@ import clsx from "clsx";
 interface ButtonProps {
   variant: "primary" | "secondary";
   onClick?: () => void;
+  className?: string;
 }
 
 export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
   children,
   variant,
   onClick,
+  className,
 }) => {
   return (
     <button
       className={clsx(
-        "font-bold py-5 px-8 inline-flex items-center transition-all rounded-full text-xl backdrop-blur-[32px]",
+        "font-bold py-5 px-8 inline-flex items-center justify-center transition-all rounded-full text-xl backdrop-blur-[32px]",
         {
-          "text-magic-white bg-magic-purple shadow-[0px_3px_84px_-10px_rgba(63,107,175,0.5)]":
+          "text-magic-white bg-magic-purple hover:opacity-90 shadow-[0px_3px_84px_-10px_rgba(63,107,175,0.5)]":
             variant === "primary",
           "text-magic-purple bg-magic-semi-deep-purple/15 shadow-[0px_3px_84px_-10px_rgba(63,107,175,0.5)]":
             variant === "secondary",
-        }
+        },
+        className
       )}
       onClick={onClick}
     >
diff --git a/src/icons/Check.tsx b/src/icons/Check.tsx
new file mode 100644
index 00000000..ac7cf0a8
--- /dev/null
+++ b/src/icons/Check.tsx
@@ -0,0 +1,19 @@
+export const CheckIcon: React.FC<{ className?: string }> = ({
+  className = "size-6",
+}) => {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M5 13l4 4L19 7"
+      />
+    </svg>
+  );
+};
diff --git a/src/icons/ConnectedPulse.tsx b/src/icons/ConnectedPulse.tsx
new file mode 100644
index 00000000..bda27aa0
--- /dev/null
+++ b/src/icons/ConnectedPulse.tsx
@@ -0,0 +1,12 @@
+import clsx from "clsx";
+
+export const ConnectedPulse: React.FC<{ className?: string }> = ({
+  className,
+}) => {
+  return (
+    <span className={clsx("relative flex h-3 w-3", className)}>
+      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+      <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+    </span>
+  );
+};
diff --git a/src/pages/general/connect-wallet.mdx b/src/pages/general/connect-wallet.mdx
index 6d54825d..0e6c0622 100644
--- a/src/pages/general/connect-wallet.mdx
+++ b/src/pages/general/connect-wallet.mdx
@@ -4,13 +4,9 @@ import { AddNetworkButton } from "../../components/AddNetworkButton";
 
 ## Connect Wallet
 
-### Mainnet
-<AddNetworkButton network="mainnet" />
+<AddNetworkButton network="mainnet" heading="Mainnet" />
 
-### Testnet (Sepolia)
-<AddNetworkButton network="sepolia" />
-
----
+<AddNetworkButton network="sepolia" heading="Testnet (Sepolia)" />
 
 ## Kraken Wallet
 
@@ -34,16 +30,17 @@ To manually add **Ink Mainnet** as a custom network, follow these steps:
 4. In the new window, click **"Add a network manually"** at the bottom of the list.
 5. Enter the details provided in the dialog that appears.
 
-| Field                            | Information                                              |
-| -------------------------------- | -------------------------------------------------------- |
-| Network Name                     | Ink                                                      |
-| RPC Endpoint (HTTPS) (primary)   | <CopyableCode code="https://rpc-gel.inkonchain.com" />   |
-| Chain ID                         | 57073                                                    |
-| Currency Symbol                  | ETH                                                      |
-| Block Explorer                   | <CopyableCode code="https://explorer.inkonchain.com" />  |
+| Field                          | Information                                             |
+| ------------------------------ | ------------------------------------------------------- |
+| Network Name                   | Ink                                                     |
+| RPC Endpoint (HTTPS) (primary) | <CopyableCode code="https://rpc-gel.inkonchain.com" />  |
+| Chain ID                       | 57073                                                   |
+| Currency Symbol                | ETH                                                     |
+| Block Explorer                 | <CopyableCode code="https://explorer.inkonchain.com" /> |
 
 6. Click **"Save"**.
 7. Ink Mainnet will now be available in the network selection dropdown.
+
 ---
 
-*For a more detailed walkthrough, please refer to the [official MetaMask tutorial](https://support.metamask.io/networks-and-sidechains/managing-networks/how-to-add-a-custom-network-rpc/).*
+_For a more detailed walkthrough, please refer to the [official MetaMask tutorial](https://support.metamask.io/networks-and-sidechains/managing-networks/how-to-add-a-custom-network-rpc/)._
diff --git a/src/utils/add-network.ts b/src/utils/add-network.ts
deleted file mode 100644
index 68708a25..00000000
--- a/src/utils/add-network.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-export type NetworkType = "mainnet" | "sepolia";
-
-const networkParams = {
-  mainnet: {
-    chainId: "0xdef1", // 57073 in hexadecimal
-    chainName: "Ink Mainnet",
-    nativeCurrency: {
-      name: "Ether",
-      symbol: "ETH",
-      decimals: 18,
-    },
-    rpcUrls: ["https://rpc-gel.inkonchain.com"],
-    blockExplorerUrls: ["https://explorer.inkonchain.com/"],
-  },
-  sepolia: {
-    chainId: "0xba5ed", // 763373
-    chainName: "Ink Sepolia",
-    nativeCurrency: {
-      name: "Ether",
-      symbol: "ETH",
-      decimals: 18,
-    },
-    rpcUrls: ["https://rpc-gel-sepolia.inkonchain.com"],
-    blockExplorerUrls: ["https://explorer-sepolia.inkonchain.com"],
-  },
-};
-
-export async function isNetworkAdded(network: NetworkType): Promise<boolean> {
-  if (!(window as any).ethereum) return false;
-
-  try {
-    const chainId = await (window as any).ethereum.request({
-      method: "eth_chainId",
-    });
-    return (
-      chainId.toLowerCase() === networkParams[network].chainId.toLowerCase()
-    );
-  } catch (error) {
-    console.error("Error checking network:", error);
-    return false;
-  }
-}
-
-export async function addNetwork(network: NetworkType) {
-  if (!(window as any).ethereum) return;
-
-  try {
-    await (window as any).ethereum.request({
-      method: "wallet_addEthereumChain",
-      params: [networkParams[network]],
-    });
-  } catch (error) {
-    console.error("Error adding network:", error);
-  }
-}
diff --git a/src/utils/networks.ts b/src/utils/networks.ts
new file mode 100644
index 00000000..06946c9e
--- /dev/null
+++ b/src/utils/networks.ts
@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+
+export type NetworkType = "mainnet" | "sepolia";
+
+export const networkParams = {
+  mainnet: {
+    chainId: "0xdef1", // 57073 in hexadecimal
+    chainName: "Ink Mainnet",
+    nativeCurrency: {
+      name: "Ether",
+      symbol: "ETH",
+      decimals: 18,
+    },
+    rpcUrls: ["https://rpc-gel.inkonchain.com"],
+    blockExplorerUrls: ["https://explorer.inkonchain.com/"],
+  },
+  sepolia: {
+    chainId: "0xba5ed", // 763373
+    chainName: "Ink Sepolia",
+    nativeCurrency: {
+      name: "Ether",
+      symbol: "ETH",
+      decimals: 18,
+    },
+    rpcUrls: ["https://rpc-gel-sepolia.inkonchain.com"],
+    blockExplorerUrls: ["https://explorer-sepolia.inkonchain.com"],
+  },
+};
+
+export async function isNetworkAdded(network: NetworkType): Promise<boolean> {
+  if (!(window as any as any).ethereum) return false;
+
+  try {
+    const chainId = await (window as any as any).ethereum.request({
+      method: "eth_chainId",
+    });
+    return (
+      chainId.toLowerCase() === networkParams[network].chainId.toLowerCase()
+    );
+  } catch (error) {
+    console.error("Error checking network:", error);
+    return false;
+  }
+}
+
+export type UseNetworkResponse = {
+  isWalletInstalled: boolean;
+  isAdded: boolean;
+  isSelected: boolean;
+  addNetwork: () => Promise<void>;
+  selectNetwork: () => Promise<void>;
+};
+
+export function useNetwork(network: NetworkType): UseNetworkResponse {
+  const [isWalletInstalled, setIsWalletInstalled] = useState<boolean>(false);
+  const [isAdded, setIsAdded] = useState<boolean>(false);
+  const [isSelected, setIsSelected] = useState<boolean>(false);
+
+  console.log(`${network} is added: ${isAdded}`);
+
+  // Check if network is added and selected on mount and when network changes
+  useEffect(() => {
+    const checkNetwork = async () => {
+      if (window.ethereum) {
+        try {
+          const chainId = await window.ethereum.request({
+            method: "eth_chainId",
+          });
+          const isCurrentNetwork =
+            chainId.toLowerCase() ===
+            networkParams[network].chainId.toLowerCase();
+          setIsSelected(isCurrentNetwork);
+          setIsAdded(isCurrentNetwork || isAdded); // If we're on the network, it must be added
+        } catch (error) {
+          console.error("Error checking network:", error);
+        }
+      }
+      setIsWalletInstalled(window.ethereum !== undefined);
+    };
+
+    checkNetwork();
+
+    // Listen for chain changes
+    if (window.ethereum) {
+      window.ethereum.on("chainChanged", checkNetwork);
+      return () => {
+        window.ethereum.removeListener("chainChanged", checkNetwork);
+      };
+    }
+  }, [network, isAdded]);
+
+  async function addNetwork(): Promise<void> {
+    if (!window.ethereum) return;
+
+    try {
+      await window.ethereum.request({
+        method: "wallet_addEthereumChain",
+        params: [networkParams[network]],
+      });
+      setIsAdded(true);
+      await selectNetwork(); // Automatically switch to the network after adding
+    } catch (error) {
+      console.error("Error adding network:", error);
+    }
+  }
+
+  async function selectNetwork(): Promise<void> {
+    if (!window.ethereum) return;
+
+    try {
+      await window.ethereum.request({
+        method: "wallet_switchEthereumChain",
+        params: [{ chainId: networkParams[network].chainId }],
+      });
+      setIsSelected(true);
+    } catch (error) {
+      console.error("Error switching network:", error);
+    }
+  }
+
+  return { isWalletInstalled, isAdded, isSelected, addNetwork, selectNetwork };
+}