Update network selector (#62)

packages/nextjs/components/NetworksDropdown.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Select, { OptionProps, components } from "react-select";
+import { getTargetNetworks } from "~~/utils/scaffold-eth";
+
+type Options = {
+  value: number;
+  label: string;
+  icon?: string;
+};
+type GroupedOptions = Record<
+  "mainnet" | "testnet" | "localhost",
+  {
+    label: string;
+    options: Options[];
+  }
+>;
+
+const networks = getTargetNetworks();
+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,
+      });
+      return groups;
+    }
+
+    const groupName = network.testnet ? "testnet" : "mainnet";
+
+    groups[groupName].options.push({
+      value: network.id,
+      label: network.name,
+      icon: network.icon,
+    });
+
+    return groups;
+  },
+  {
+    mainnet: { label: "mainnet", options: [] },
+    testnet: { label: "testnet", options: [] },
+    localhost: { label: "localhost", options: [] },
+  },
+);
+
+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" />
+      {props.data.label}
+    </div>
+  </Option>
+);
+
+export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any }) => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const mediaQuery = window.matchMedia("(max-width: 640px)");
+      setIsMobile(mediaQuery.matches);
+
+      const handleResize = () => setIsMobile(mediaQuery.matches);
+      mediaQuery.addEventListener("change", handleResize);
+      return () => mediaQuery.removeEventListener("change", handleResize);
+    }
+  }, []);
+
+  return (
+    <Select
+      defaultValue={groupedOptions["mainnet"].options[0]}
+      instanceId="network-select"
+      options={Object.values(groupedOptions)}
+      onChange={onChange}
+      components={{ Option: IconOption }}
+      isSearchable={!isMobile}
+      className="text-sm w-44 max-w-xs bg-white relative"
+      theme={theme => ({
+        ...theme,
+        colors: {
+          ...theme.colors,
+          primary25: "#efeaff",
+          primary50: "#c1aeff",
+          primary: "#551d98",
+        },
+      })}
+    />
+  );
+};

packages/nextjs/package.json

@@ -29,6 +29,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",
+    "react-select": "^5.8.0",
     "use-debounce": "^8.0.4",
     "usehooks-ts": "^2.7.2",
     "viem": "1.19.9",

packages/nextjs/pages/index.tsx

@@ -7,6 +7,7 @@ import { Address, isAddress } from "viem";
 import { usePublicClient } from "wagmi";
 import { MetaHeader } from "~~/components/MetaHeader";
 import { MiniFooter } from "~~/components/MiniFooter";
+import { NetworksDropdown } from "~~/components/NetworksDropdown";
 import { AddressInput, InputBase } from "~~/components/scaffold-eth";
 import { useAbiNinjaState } from "~~/services/store/store";
 import { fetchContractABIFromAnyABI, fetchContractABIFromEtherscan, parseAndCorrectJSON } from "~~/utils/abi";
@@ -141,17 +142,7 @@ const Home: NextPage = () => {
             <h2 className="mb-0 text-5xl font-bold">ABI Ninja</h2>
             <p className="">Interact with any contract on Ethereum</p>
             <div className="my-4">
-              <select
-                className="select select-sm w-36 max-w-xs bg-slate-50"
-                value={network}
-                onChange={e => setNetwork(e.target.value)}
-              >
-                {networks.map(network => (
-                  <option key={network.id} value={network.id}>
-                    {network.name}
-                  </option>
-                ))}
-              </select>
+              <NetworksDropdown onChange={option => setNetwork(option ? option.value.toString() : "")} />
             </div>
 
             <div role="tablist" className="flex w-full border-b">