Feat/more chains

packages/nextjs/components/NetworksDropdown.tsx

@@ -1,13 +1,15 @@
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import Image from "next/image";
+import * as chains from "@wagmi/core/chains";
 import { useTheme } from "next-themes";
-import Select, { OptionProps, components } from "react-select";
-import { getTargetNetworks } from "~~/utils/scaffold-eth";
+import Select, { MultiValue, OptionProps, SingleValue, components } from "react-select";
+import { EyeIcon, WrenchScrewdriverIcon } from "@heroicons/react/24/outline";
+import { getPopularTargetNetworks } from "~~/utils/scaffold-eth";
 
 type Options = {
-  value: number;
+  value: number | string;
   label: string;
-  icon?: string;
+  icon?: string | ReactNode;
 };
 type GroupedOptions = Record<
   "mainnet" | "testnet" | "localhost",
@@ -17,15 +19,25 @@ type GroupedOptions = Record<
   }
 >;
 
-const networks = getTargetNetworks();
+const getIconComponent = (iconName: string | undefined) => {
+  switch (iconName) {
+    case "EyeIcon":
+      return <EyeIcon className="h-6 w-6 mr-2 text-gray-500" />;
+    case "localhost":
+      return <WrenchScrewdriverIcon className="h-6 w-6 mr-2 text-gray-500" />;
+    default:
+      return <Image src={iconName || "/mainnet.svg"} alt="default icon" width={24} height={24} className="mr-2" />;
+  }
+};
+
+const networks = getPopularTargetNetworks();
 const groupedOptions = networks.reduce<GroupedOptions>(
   (groups, network) => {
-    // Handle the case for localhost
     if (network.id === 31337) {
       groups.localhost.options.push({
         value: network.id,
-        label: network.name,
-        icon: network.icon,
+        label: "31337 - Localhost",
+        icon: getIconComponent("localhost"),
       });
       return groups;
     }
@@ -47,11 +59,23 @@ const groupedOptions = networks.reduce<GroupedOptions>(
   },
 );
 
+groupedOptions.mainnet.options.push({
+  value: "see-all",
+  label: "See All Chains",
+  icon: "EyeIcon",
+});
+
+const allChains = Object.values(chains).map(chain => ({
+  value: chain.id,
+  label: chain.name,
+  icon: "",
+}));
+
 const { Option } = components;
 const IconOption = (props: OptionProps<Options>) => (
   <Option {...props}>
     <div className="flex items-center">
-      <Image src={props.data.icon || "/mainnet.svg"} alt={props.data.label} width={24} height={24} className="mr-2" />
+      {typeof props.data.icon === "string" ? getIconComponent(props.data.icon) : props.data.icon}
       {props.data.label}
     </div>
   </Option>
@@ -60,6 +84,9 @@ const IconOption = (props: OptionProps<Options>) => (
 export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any }) => {
   const [isMobile, setIsMobile] = useState(false);
   const { resolvedTheme } = useTheme();
+  const [selectedOption, setSelectedOption] = useState<SingleValue<Options>>(groupedOptions.mainnet.options[0]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   const isDarkMode = resolvedTheme === "dark";
 
@@ -80,36 +107,97 @@ export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any
     }
   }, []);
 
+  const handleSelectChange = (newValue: SingleValue<Options> | MultiValue<Options>) => {
+    const selected = newValue as SingleValue<Options>;
+    if (selected?.value === "see-all") {
+      const modal = document.getElementById("see-all-modal") as HTMLDialogElement;
+      modal.showModal();
+      if (searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
+    } else {
+      setSelectedOption(selected);
+      onChange(selected);
+    }
+  };
+
+  const filteredChains = allChains.filter(chain => chain.label.toLowerCase().includes(searchTerm.toLowerCase()));
+
   if (!mounted) return null;
   return (
-    <Select
-      defaultValue={groupedOptions["mainnet"].options[0]}
-      instanceId="network-select"
-      options={Object.values(groupedOptions)}
-      onChange={onChange}
-      components={{ Option: IconOption }}
-      isSearchable={!isMobile}
-      className="max-w-xs relative text-sm w-44"
-      theme={theme => ({
-        ...theme,
-        colors: {
-          ...theme.colors,
-          primary25: isDarkMode ? "#401574" : "#efeaff",
-          primary50: isDarkMode ? "#551d98" : "#c1aeff",
-          primary: isDarkMode ? "#BA8DE8" : "#551d98",
-          neutral0: isDarkMode ? "#130C25" : theme.colors.neutral0,
-          neutral80: isDarkMode ? "#ffffff" : theme.colors.neutral80,
-        },
-      })}
-      styles={{
-        menuList: provided => ({ ...provided, maxHeight: 280, overflow: "auto" }),
-        control: provided => ({ ...provided, borderRadius: 12 }),
-        indicatorSeparator: provided => ({ ...provided, display: "none" }),
-        menu: provided => ({
-          ...provided,
-          border: `1px solid ${isDarkMode ? "#555555" : "#a3a3a3"}`,
-        }),
-      }}
-    />
+    <>
+      <Select
+        value={selectedOption}
+        defaultValue={groupedOptions["mainnet"].options[0]}
+        instanceId="network-select"
+        options={Object.values(groupedOptions)}
+        onChange={handleSelectChange}
+        components={{ Option: IconOption }}
+        isSearchable={!isMobile}
+        className="max-w-xs relative text-sm w-44"
+        theme={theme => ({
+          ...theme,
+          colors: {
+            ...theme.colors,
+            primary25: isDarkMode ? "#401574" : "#efeaff",
+            primary50: isDarkMode ? "#551d98" : "#c1aeff",
+            primary: isDarkMode ? "#BA8DE8" : "#551d98",
+            neutral0: isDarkMode ? "#130C25" : theme.colors.neutral0,
+            neutral80: isDarkMode ? "#ffffff" : theme.colors.neutral80,
+          },
+        })}
+        styles={{
+          menuList: provided => ({ ...provided, maxHeight: 280, overflow: "auto" }),
+          control: provided => ({ ...provided, borderRadius: 12 }),
+          indicatorSeparator: provided => ({ ...provided, display: "none" }),
+          menu: provided => ({
+            ...provided,
+            border: `1px solid ${isDarkMode ? "#555555" : "#a3a3a3"}`,
+          }),
+        }}
+      />
+      <dialog id="see-all-modal" className="modal">
+        <div className="flex flex-col modal-box justify-center px-12 h-3/4 sm:w-1/2 max-w-5xl bg-base-200">
+          <div className="flex justify-between items-center mb-6">
+            <h3 className="font-bold text-xl">All Chains</h3>
+            <div className="modal-action mt-0">
+              <button
+                className="btn btn-error"
+                onClick={() => (document.getElementById("see-all-modal") as HTMLDialogElement)?.close()}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+          <input
+            type="text"
+            placeholder="Search chains..."
+            className="input input-bordered w-full mb-4 bg-neutral"
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+            ref={searchInputRef}
+          />
+
+          <div className="flex flex-wrap content-start justify-center gap-4 overflow-y-auto h-5/6 p-2">
+            {filteredChains.map(option => (
+              <div
+                key={`${option.label}-${option.value}`}
+                className="card shadow-md bg-base-100 cursor-pointer h-28 w-60 text-center"
+                onClick={() => {
+                  setSelectedOption(option);
+                  onChange(option);
+                  (document.getElementById("see-all-modal") as HTMLDialogElement)?.close();
+                }}
+              >
+                <div className="card-body flex flex-col justify-center items-center p-4">
+                  <span className="text-sm font-semibold">Chain Id: {option.value}</span>
+                  <span className="text-sm">{option.label}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </dialog>
+    </>
   );
 };

packages/nextjs/components/scaffold-eth/Address.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import Link from "next/link";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Address as AddressType, isAddress } from "viem";
 import { hardhat } from "viem/chains";
@@ -87,12 +86,8 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
           size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
         />
       </div>
-      {disableAddressLink ? (
+      {disableAddressLink || targetNetwork.id === hardhat.id ? (
         <span className={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>
-      ) : targetNetwork.id === hardhat.id ? (
-        <span className={`ml-1.5 text-${size} font-normal`}>
-          <Link href={blockExplorerAddressLink}>{displayAddress}</Link>
-        </span>
       ) : (
         <a
           className={`ml-1.5 text-${size} font-normal`}

packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx

@@ -215,7 +215,9 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
                 {mainNetwork && (
                   <p className="my-0 text-sm">
                     <span className="font-bold">Network</span>:{" "}
-                    <span style={{ color: networkColor }}>{mainNetwork.name}</span>
+                    <span style={{ color: networkColor }}>
+                      {mainNetwork.id == 31337 ? "Localhost" : mainNetwork.name}
+                    </span>
                   </p>
                 )}
               </div>

packages/nextjs/pages/index.tsx

@@ -95,6 +95,7 @@ const Home: NextPage = () => {
     if (isAddress(verifiedContractAddress)) {
       if (network === "31337") {
         setActiveTab(TabName.addressAbi);
+        setLocalAbiContractAddress(verifiedContractAddress);
         return;
       }
       fetchContractAbi();

packages/nextjs/scaffold.config.ts

@@ -25,6 +25,7 @@ const scaffoldConfig = {
     chains.zkSyncTestnet,
     chains.scroll,
     chains.scrollSepolia,
+    chains.hardhat,
   ],
 
   // The interval at which your front-end polls the RPC servers for new data

packages/nextjs/utils/scaffold-eth/networks.ts

@@ -157,6 +157,16 @@ export function getBlockExplorerAddressLink(network: chains.Chain, address: stri
  * @returns targetNetworks array containing networks configured in scaffold.config including extra network metadata
  */
 export function getTargetNetworks(): ChainWithAttributes[] {
+  // Get all chains from viem/chains
+  const allChains: ChainWithAttributes[] = Object.values(chains).map(chain => ({
+    ...chain,
+    ...NETWORKS_EXTRA_DATA[chain.id],
+  }));
+
+  return allChains;
+}
+
+export function getPopularTargetNetworks(): ChainWithAttributes[] {
   return scaffoldConfig.targetNetworks.map(targetNetwork => ({
     ...targetNetwork,
     ...NETWORKS_EXTRA_DATA[targetNetwork.id],