Merge pull request #1323 from decent-dao/feature/in-app-network-change

Add network switcher
decentdao · Jan 18, 2024 · 929a2db · 929a2db
2 parents c703419 + 77f1329
commit 929a2db
Showing 1 changed file with 45 additions and 20 deletions.
diff --git a/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx b/src/components/ui/menus/AccountDisplay/MenuItemNetwork.tsx
@@ -1,13 +1,23 @@
-import { Box, Flex, Text } from '@chakra-ui/react';
+import { Box, Flex, Select, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
+import { useSwitchNetwork } from 'wagmi';
+import {
+  supportedChains,
+  useNetworkConfig,
+} from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 
 /**
  * Network display for menu
  */
 export function MenuItemNetwork() {
-  const { name, color } = useNetworkConfig();
   const { t } = useTranslation('menu');
+  const { chainId } = useNetworkConfig();
+  const { switchNetwork } = useSwitchNetwork();
+
+  if (!switchNetwork) {
+    return null;
+  }
+
   return (
     <Box
       cursor="default"
@@ -23,24 +33,39 @@ export function MenuItemNetwork() {
         >
           {t('network')}
         </Text>
-        <Flex
-          padding={0}
-          alignItems="center"
-          gap="2"
+        <Select
+          mt={4}
+          width="100%"
+          bgColor="#2c2c2c"
+          borderColor="#4d4d4d"
+          rounded="sm"
+          cursor="pointer"
+          onChange={async e => {
+            e.preventDefault();
+            switchNetwork(Number(e.target.value));
+          }}
+          value={chainId}
         >
-          <Box
-            w="1rem"
-            h="1rem"
-            bg={color}
-            rounded="full"
-          />
-          <Text
-            data-testid="accountMenu-network"
-            textStyle="text-base-mono-medium"
-          >
-            {name}
-          </Text>
-        </Flex>
+          {supportedChains.map(chain => (
+            <option
+              key={chain.chainId}
+              value={chain.chainId}
+            >
+              <Box
+                w="1rem"
+                h="1rem"
+                bg={chain.color}
+                rounded="full"
+              />
+              <Text
+                data-testid="accountMenu-network"
+                textStyle="text-base-mono-medium"
+              >
+                {chain.name}
+              </Text>
+            </option>
+          ))}
+        </Select>
       </Flex>
     </Box>
   );