fix: use built-in select menu

blocto · Jan 8, 2024 · 8c778e9 · 8c778e9
1 parent 3018efb
commit 8c778e9
Showing 1 changed file with 24 additions and 72 deletions.
diff --git a/src/components/EvmChainSelect.tsx b/src/components/EvmChainSelect.tsx
@@ -1,14 +1,5 @@
 import React, { useEffect, useState } from "react";
-import {
-  Button,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  MenuGroup,
-  MenuDivider,
-} from "@chakra-ui/react";
-import { ChevronDownIcon } from "@chakra-ui/icons";
+import { Select } from "@chakra-ui/react";
 import { ReactJSXElement } from "@emotion/react/types/jsx-namespace";
 import { supportedChains, bloctoSDK, useEthereum } from "../services/evm";
 
@@ -21,70 +12,31 @@ const supportedTestnetChains = supportedChains.filter(
 
 const EvmChainSelect: React.FC = ({}): ReactJSXElement => {
   const { chainId: currentChainId } = useEthereum();
-  const [chainName, setChainName] = useState(
-    supportedChains.find(({ chainId }) => chainId === currentChainId)?.name ||
-      "Ethereum Goerli"
-  );
-  useEffect(() => {
-    const chainName = supportedChains.find(
-      ({ chainId }) => chainId === currentChainId
-    )?.name;
-    if (chainName) {
-      setChainName(chainName);
-    }
-  }, [currentChainId]);
 
   return (
-    <Menu>
-      <MenuButton as={Button} rightIcon={<ChevronDownIcon />} width="200px">
-        {chainName}
-      </MenuButton>
-      <MenuList>
-        <MenuGroup title="Testnet">
-          {supportedTestnetChains.map(({ name, chainId }) => (
-            <MenuItem
-              key={chainId}
-              pl={5}
-              color="gray.700"
-              onClick={() => {
-                bloctoSDK.ethereum
-                  .request({
-                    method: "wallet_switchEthereumChain",
-                    params: [{ chainId }],
-                  })
-                  .then(() => {
-                    setChainName(name);
-                  });
-              }}
-            >
-              {name}
-            </MenuItem>
-          ))}
-        </MenuGroup>
-        <MenuDivider />
-        <MenuGroup title="Mainnet">
-          {supportedMainnetChains.map(({ name, chainId }) => (
-            <MenuItem
-              key={chainId}
-              pl={5}
-              color="gray.700"
-              onClick={() => {
-                bloctoSDK.ethereum
-                  .request({
-                    method: "wallet_switchEthereumChain",
-                    params: [{ chainId }],
-                  })
-                  .then(() => {
-                    setChainName(name);
-                  });
-              }}
-            >
-              {name}
-            </MenuItem>
-          ))}
-        </MenuGroup>
-      </MenuList>
-    </Menu>
+    <Select
+      width="200px"
+      value={currentChainId || ""}
+      onChange={(e) => {
+        bloctoSDK.ethereum.request({
+          method: "wallet_switchEthereumChain",
+          params: [{ chainId: e.target.value }],
+        });
+      }}
+    >
+      <option disabled>Testnet</option>
+      {supportedTestnetChains.map(({ name, chainId }) => (
+        <option key={chainId} value={chainId}>
+          {name}
+        </option>
+      ))}
+      <option disabled>Mainnet</option>
+      {supportedMainnetChains.map(({ name, chainId }) => (
+        <option key={chainId} value={chainId}>
+          {name}
+        </option>
+      ))}
+    </Select>
   );
 };