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">