Chain selection feature added

Author: isaozler

toolkit/theme/globalCss.ts

@@ -1,6 +1,7 @@
 import type { SystemConfig } from '@chakra-ui/react';
 
 import addressEntity from './globals/address-entity';
+import networkMenu from './globals/network-menu';
 import recaptcha from './globals/recaptcha';
 import scrollbar from './globals/scrollbar';
 
@@ -52,6 +53,7 @@ const globalCss: SystemConfig['globalCss'] = {
   ...recaptcha,
   ...scrollbar,
   ...addressEntity,
+  ...networkMenu,
 };
 
 export default globalCss;

toolkit/theme/globals/network-menu.ts

@@ -0,0 +1,43 @@
+const styles = {
+  '.network-title': {
+    paddingBlock: 2,
+    paddingInline: 3,
+    fontWeight: 'bold',
+    backgroundColor: 'var(--chakra-colors-blue-50)',
+    marginBlockEnd: 4,
+    borderRadius: 'var(--chakra-radii-base)',
+  },
+  '.network-menu': {
+    display: 'grid !important',
+    gridTemplateColumns: 'repeat(5, 1fr)',
+    gap: '12px !important',
+    padding: 0,
+    listStyle: 'none',
+
+    '& .network-menu-li': {
+      aspectRatio: '1 / 1',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '1.2rem',
+      fontWeight: 'bold',
+      background: '#f0f0f0',
+      borderRadius: '8px',
+      boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
+      flexDirection: 'column',
+
+      '& span': {
+        display: 'block',
+      },
+      '& .network-menu-link': {
+        fontWeight: 'bold',
+
+        '& .network-menu-li-icon': {
+          display: 'none !important',
+        },
+      },
+    },
+  },
+};
+
+export default styles;

ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx

@@ -15,10 +15,11 @@ interface Props {
 }
 
 const NetworkMenuPopup = ({ items, tabs }: Props) => {
+  const [ defaultTab ] = tabs ?? [ 'Mainnets' ];
   const selectedNetwork = items?.find(({ isActive }) => isActive);
-  const defaultTab = tabs.find((tab) => selectedNetwork?.group === tab);
+  const selectedTab = tabs.find((tab) => selectedNetwork?.group === tab) ?? defaultTab;
 
-  const [ value, setValue ] = React.useState<NetworkGroup>(defaultTab ?? 'Mainnets');
+  const [ value, setValue ] = React.useState<NetworkGroup>(selectedTab);
 
   const handleTabChange = React.useCallback(({ value }: { value: string }) => {
     setValue(value as NetworkGroup);
@@ -72,7 +73,8 @@ const NetworkMenuPopup = ({ items, tabs }: Props) => {
       <Box>
         { tabs.map((tab) => (
           <TabsContent key={ tab } value={ tab } p={ 0 }>
-            <VStack as="ul" gap={ 1 } alignItems="stretch" maxH="516px" overflowY="scroll">
+            { defaultTab ? <h6 className="network-title">"{ defaultTab }" Chains</h6> : null }
+            <VStack as="ul" gap={ 1 } alignItems="stretch" maxH="516px" overflowY="scroll" className="network-menu">
               { items
                 .filter((network) => network.group === tab)
                 .map((network) => (

ui/snippets/networkMenu/NetworkMenuContentMobile.tsx

@@ -15,14 +15,15 @@ interface Props {
 }
 
 const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
+  const [ defaultTab ] = tabs ?? [ 'Mainnets' ];
   const selectedNetwork = items?.find(({ isActive }) => isActive);
-  const [ selectedTab, setSelectedTab ] = React.useState<NetworkGroup>('Mainnets');
+  const [ selectedTab, setSelectedTab ] = React.useState<NetworkGroup>(defaultTab);
 
   React.useEffect(() => {
     if (items) {
-      setSelectedTab(tabs.find((tab) => selectedNetwork?.group === tab) || 'Mainnets');
+      setSelectedTab(tabs.find((tab) => selectedNetwork?.group === tab) ?? defaultTab);
     }
-  }, [ items, selectedNetwork?.group, tabs ]);
+  }, [ defaultTab, items, selectedNetwork?.group, tabs ]);
 
   const handleSelectChange = React.useCallback(({ value }: { value: Array<string> }) => {
     setSelectedTab(value[0] as NetworkGroup);
@@ -61,7 +62,8 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
           contentProps={{ zIndex: 'modal' }}
         />
       ) }
-      <VStack as="ul" gap={ 2 } alignItems="stretch">
+      { selectedTab ? <h6 className="network-title">"{ selectedTab }" Chains</h6> : null }
+      <VStack as="ul" gap={ 2 } alignItems="stretch" className="network-menu">
         { items
           .filter(({ group }) => group === selectedTab)
           .map((network) => (

ui/snippets/networkMenu/NetworkMenuLink.tsx

@@ -42,8 +42,9 @@ const NetworkMenuLink = ({ title, icon, isActive: isActiveProp, isMobile, url, i
   })();
 
   return (
-    <Box as="li" listStyleType="none">
+    <Box as="li" listStyleType="none" className="network-menu-li">
       <chakra.a
+        className="network-menu-link"
         display="flex"
         href={ url }
         px={ 3 }
@@ -56,10 +57,8 @@ const NetworkMenuLink = ({ title, icon, isActive: isActiveProp, isMobile, url, i
         bgColor={ isActive ? { base: 'blue.50', _dark: 'whiteAlpha.100' } : 'transparent' }
         _hover={{ color: isActive ? { base: 'blackAlpha.900', _dark: 'whiteAlpha.900' } : 'link.primary.hover' }}
       >
-        { iconEl }
+        <div className="network-menu-li-icon">{ iconEl }</div>
         <Text
-          marginLeft={ 3 }
-          fontWeight="500"
           color="inherit"
           fontSize={ isMobile ? 'sm' : 'md' }
           lineHeight={ isMobile ? '20px' : '24px' }