Feat/set and integrate blockexplorer

packages/nextjs/components/Footer.tsx

@@ -1,19 +1,13 @@
 import React from "react";
-import Link from "next/link";
 
-import {
-  CurrencyDollarIcon,
-  MagnifyingGlassIcon,
-} from "@heroicons/react/24/outline";
-import { HeartIcon } from "@heroicons/react/24/outline";
-import { SwitchTheme } from "~~/components/SwitchTheme";
-import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
+import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
 import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
 import { useGlobalState } from "~~/services/store/store";
-import { devnet, sepolia } from "@starknet-react/chains";
+import { devnet, sepolia, mainnet } from "@starknet-react/chains";
 import { Faucet } from "~~/components/scaffold-stark/Faucet";
 import { FaucetSepolia } from "~~/components/scaffold-stark/FaucetSepolia";
-import { getBlockExplorerLink } from "~~/utils/scaffold-stark";
+import { BlockExplorerSepolia } from "./scaffold-stark/BlockExplorerSepolia";
+import { BlockExplorer } from "./scaffold-stark/BlockExplorer";
 
 /**
  * Site footer
@@ -25,6 +19,7 @@ export const Footer = () => {
   const { targetNetwork } = useTargetNetwork();
   const isLocalNetwork = targetNetwork.id === devnet.id;
   const isSepoliaNetwork = targetNetwork.id === sepolia.id;
+  const isMainnetNetwork = targetNetwork.id === mainnet.id;
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 bg-base-100">
@@ -42,21 +37,17 @@ export const Footer = () => {
             {isSepoliaNetwork && (
               <>
                 <FaucetSepolia />
+                <BlockExplorerSepolia />
               </>
             )}
             {isLocalNetwork && (
               <>
                 <Faucet />
-                <Link
-                  href={getBlockExplorerLink(targetNetwork)}
-                  target={"_blank"}
-                  rel={"noopener noreferrer"}
-                  passHref
-                  className="btn btn-sm font-normal gap-1 border border-[#32BAC4] shadow-none"
-                >
-                  <MagnifyingGlassIcon className="h-4 w-4 text-[#32BAC4]" />
-                  <span>Block Explorer</span>
-                </Link>
+              </>
+            )}
+            {isMainnetNetwork && (
+              <>
+                <BlockExplorer />
               </>
             )}
           </div>

packages/nextjs/components/scaffold-stark/BlockExplorer.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Address as AddressType, mainnet } from "@starknet-react/chains";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { useNetwork } from "@starknet-react/core";
+import Image from "next/image";
+
+export const BlockExplorer = () => {
+  const { chain: ConnectedChain } = useNetwork();
+
+  const blockExplorers = [
+    {
+      name: "Starkscan",
+      img: "/sn-symbol-gradient.png",
+      link: "https://starkscan.co/",
+    },
+    {
+      name: "Voyager",
+      img: "/voyager-icon.svg",
+      link: "https://voyager.online/",
+    },
+    {
+      name: "Stark Compass",
+      img: "/starkcompass-icon.svg",
+      link: "https://starkcompass.com/",
+    },
+  ];
+
+  // Render only on mainnet chain
+  if (ConnectedChain?.id !== mainnet.id) {
+    return null;
+  }
+
+  return (
+    <div>
+      <label
+        htmlFor="blockexplorer-modal"
+        className="btn btn-sm font-normal gap-1 border border-[#32BAC4] shadow-none"
+      >
+        <MagnifyingGlassIcon className="h-4 w-4 text-[#32BAC4]" />
+        <span>Block Explorer</span>
+      </label>
+      <input
+        type="checkbox"
+        id="blockexplorer-modal"
+        className="modal-toggle"
+      />
+      <label htmlFor="blockexplorer-modal" className="modal cursor-pointer">
+        <label className="modal-box relative">
+          {/* dummy input to capture event onclick on modal box */}
+          <input className="h-0 w-0 absolute top-0 left-0" />
+          <h3 className="text-xl font-bold mb-3">Mainnet Block Explorers</h3>
+          <label
+            htmlFor="blockexplorer-modal"
+            className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3"
+          >
+            ✕
+          </label>
+          <div className="mb-4 mt-6">
+            <div className="flex flex-col space-y-3">
+              {blockExplorers.length &&
+                blockExplorers.map((blockexplorer, id) => (
+                  <a
+                    href={blockexplorer.link}
+                    target="_blank"
+                    className="h-12 btn btn-primary flex justify-start btn-sm px-6 gap-4 rounded-full"
+                    key={id}
+                  >
+                    <div className="flex relative w-6 h-6">
+                      <Image
+                        alt="Starknet Developers Hub"
+                        className="cursor-pointer"
+                        fill
+                        src={blockexplorer.img}
+                      />
+                    </div>
+                    <p className="text-sm m-0">{blockexplorer.name}</p>
+                  </a>
+                ))}
+            </div>
+          </div>
+        </label>
+      </label>
+    </div>
+  );
+};

packages/nextjs/components/scaffold-stark/BlockExplorerSepolia.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Address as AddressType, sepolia } from "@starknet-react/chains";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { useNetwork } from "@starknet-react/core";
+import Image from "next/image";
+
+export const BlockExplorerSepolia = () => {
+  const { chain: ConnectedChain } = useNetwork();
+
+  const sepoliaBlockExplorers = [
+    {
+      name: "Starkscan",
+      img: "/sn-symbol-gradient.png",
+      link: "https://sepolia.starkscan.co/",
+    },
+    {
+      name: "Voyager",
+      img: "/voyager-icon.svg",
+      link: "https://sepolia.voyager.online/",
+    },
+    {
+      name: "Stark Compass",
+      img: "/starkcompass-icon.svg",
+      link: "https://starkcompass.com/sepolia/",
+    },
+  ];
+
+  // Render only on sepolia chain
+  if (ConnectedChain?.id !== sepolia.id) {
+    return null;
+  }
+
+  return (
+    <div>
+      <label
+        htmlFor="sepolia-blockexplorer-modal"
+        className="btn btn-sm font-normal gap-1 border border-[#32BAC4] shadow-none"
+      >
+        <MagnifyingGlassIcon className="h-4 w-4 text-[#32BAC4]" />
+        <span>Block Explorer</span>
+      </label>
+      <input
+        type="checkbox"
+        id="sepolia-blockexplorer-modal"
+        className="modal-toggle"
+      />
+      <label
+        htmlFor="sepolia-blockexplorer-modal"
+        className="modal cursor-pointer"
+      >
+        <label className="modal-box relative">
+          {/* dummy input to capture event onclick on modal box */}
+          <input className="h-0 w-0 absolute top-0 left-0" />
+          <h3 className="text-xl font-bold mb-3">Sepolia Block Explorers</h3>
+          <label
+            htmlFor="sepolia-blockexplorer-modal"
+            className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3"
+          >
+            ✕
+          </label>
+          <div className="mb-4 mt-6">
+            <div className="flex flex-col space-y-3">
+              {sepoliaBlockExplorers.length &&
+                sepoliaBlockExplorers.map((blockexplorer, id) => (
+                  <a
+                    href={blockexplorer.link}
+                    target="_blank"
+                    className="h-12 btn btn-primary flex justify-start btn-sm px-6 gap-4 rounded-full"
+                    key={id}
+                  >
+                    <div className="flex relative w-6 h-6">
+                      <Image
+                        alt="Starknet Developers Hub"
+                        className="cursor-pointer"
+                        fill
+                        src={blockexplorer.img}
+                      />
+                    </div>
+                    <p className="text-sm m-0">{blockexplorer.name}</p>
+                  </a>
+                ))}
+            </div>
+          </div>
+        </label>
+      </label>
+    </div>
+  );
+};

packages/nextjs/components/scaffold-stark/FaucetSepolia.tsx

@@ -10,7 +10,7 @@ import { notification } from "~~/utils/scaffold-stark";
 import Image from "next/image";
 
 /**
- * Faucet modal which lets you send ETH to any address.
+ * Faucet modal which displays external websites that lets you send small amounts of L2 Sepolia ETH/STRK to an account address on Starknet Sepolia..
  */
 export const FaucetSepolia = () => {
   const { chain: ConnectedChain } = useNetwork();