feat: move to nextjs

components/Body/NetworkInput.tsx

@@ -0,0 +1,72 @@
+import { Box } from "@chakra-ui/react";
+import { Select as RSelect, SingleValue } from "chakra-react-select";
+import { SelectedNetworkOption } from "../../types";
+
+interface NetworkOption {
+  name: string;
+  rpcs: string[];
+  chainId: number;
+}
+
+interface NetworkInputParams {
+  primaryNetworkOptions: NetworkOption[];
+  secondaryNetworkOptions: NetworkOption[];
+  selectedNetworkOption: SingleValue<SelectedNetworkOption>;
+  setSelectedNetworkOption: (value: SingleValue<SelectedNetworkOption>) => void;
+}
+
+function NetworkInput({
+  primaryNetworkOptions,
+  secondaryNetworkOptions,
+  selectedNetworkOption,
+  setSelectedNetworkOption,
+}: NetworkInputParams) {
+  return (
+    <Box mt={4} cursor="pointer">
+      <RSelect
+        options={[
+          {
+            label: "",
+            options: primaryNetworkOptions.map((network) => ({
+              label: network.name,
+              value: network.chainId,
+            })),
+          },
+          {
+            label: "",
+            options: secondaryNetworkOptions.map((network) => ({
+              label: network.name,
+              value: network.chainId,
+            })),
+          },
+        ]}
+        value={selectedNetworkOption}
+        onChange={setSelectedNetworkOption}
+        placeholder="Select chain..."
+        size="md"
+        tagVariant="solid"
+        chakraStyles={{
+          menuList: (provided) => ({
+            ...provided,
+            bg: "brand.black",
+          }),
+          option: (provided, state) => ({
+            ...provided,
+            color: "white",
+            bg: state.isFocused ? "whiteAlpha500" : "brand.lightBlack",
+          }),
+          groupHeading: (provided, state) => ({
+            ...provided,
+            h: "1px",
+            borderTop: "1px solid white",
+            bg: "brand.black",
+          }),
+        }}
+        closeMenuOnSelect
+        useBasicStyles
+      />
+    </Box>
+  );
+}
+
+export default NetworkInput;