From c3884435cecae8e7674283db67df980dbce37953 Mon Sep 17 00:00:00 2001
From: Nathanael Liu <supernathanliu@gmail.com>
Date: Wed, 24 Apr 2024 00:53:47 -0700
Subject: [PATCH] relay chain icon in network selector (#82)

---
 .../Elements/NetworkSelect/index.tsx          | 45 +++++++++++++++++--
 .../Selectors/AssetSelector/index.module.scss |  2 +-
 .../Selectors/AssetSelector/index.tsx         | 38 ++++++++++------
 src/utils/muiTheme.ts                         |  7 +++
 4 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/src/components/Elements/NetworkSelect/index.tsx b/src/components/Elements/NetworkSelect/index.tsx
index 1cbbf169..e5907c82 100644
--- a/src/components/Elements/NetworkSelect/index.tsx
+++ b/src/components/Elements/NetworkSelect/index.tsx
@@ -1,6 +1,16 @@
-import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import {
+  Box,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Typography,
+} from '@mui/material';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 
+import KusamaIcon from '@/assets/networks/relay/kusama.png';
+import RococoIcon from '@/assets/networks/relay/rococo.png';
 import { useNetwork } from '@/contexts/network';
 import { NetworkType } from '@/models';
 
@@ -19,6 +29,19 @@ const RelaySelect = () => {
     );
   };
 
+  const menuItems = [
+    {
+      value: NetworkType.ROCOCO,
+      label: 'Rococo',
+      icon: RococoIcon,
+    },
+    {
+      value: NetworkType.KUSAMA,
+      label: 'Kusama',
+      icon: KusamaIcon,
+    },
+  ];
+
   return network !== NetworkType.NONE ? (
     <FormControl sx={{ m: 2, minWidth: 150 }} fullWidth>
       <InputLabel>Network</InputLabel>
@@ -28,8 +51,24 @@ const RelaySelect = () => {
         label='Relay chain'
         onChange={handleChange}
       >
-        <MenuItem value={NetworkType.ROCOCO}>Rococo</MenuItem>
-        <MenuItem value={NetworkType.KUSAMA}>Kusama</MenuItem>
+        {menuItems.map(({ value, label, icon }, index) => (
+          <MenuItem value={value} key={index}>
+            <Box sx={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+              <Image
+                src={icon}
+                alt={label.toLowerCase()}
+                style={{
+                  width: '1.5rem',
+                  height: '1.5rem',
+                  borderRadius: '100%',
+                }}
+              />
+              <Typography sx={{ lineHeight: 1.5, fontSize: '1rem' }}>
+                {label}
+              </Typography>
+            </Box>
+          </MenuItem>
+        ))}
       </Select>
     </FormControl>
   ) : (
diff --git a/src/components/Elements/Selectors/AssetSelector/index.module.scss b/src/components/Elements/Selectors/AssetSelector/index.module.scss
index 91eb8bb9..521136b4 100644
--- a/src/components/Elements/Selectors/AssetSelector/index.module.scss
+++ b/src/components/Elements/Selectors/AssetSelector/index.module.scss
@@ -6,4 +6,4 @@
 .option {
   min-width: 250px;
   margin: 1em 5em;
-}
\ No newline at end of file
+}
diff --git a/src/components/Elements/Selectors/AssetSelector/index.tsx b/src/components/Elements/Selectors/AssetSelector/index.tsx
index 9c4d95c0..aeabfadd 100644
--- a/src/components/Elements/Selectors/AssetSelector/index.tsx
+++ b/src/components/Elements/Selectors/AssetSelector/index.tsx
@@ -17,6 +17,17 @@ export default function AssetSelector({
   symbol,
 }: AssetSelectorProps) {
   const theme = useTheme();
+  const items = [
+    {
+      value: AssetType.TOKEN,
+      label: symbol,
+    },
+    {
+      value: AssetType.REGION,
+      label: 'Region',
+    },
+  ];
+
   return (
     <FormControl>
       <ToggleButtonGroup
@@ -25,20 +36,19 @@ export default function AssetSelector({
         onChange={(e: any) => setAsset(parseInt(e.target.value) as AssetType)}
         className={styles.options}
       >
-        <ToggleButton
-          className={styles.option}
-          sx={{ color: theme.palette.text.primary }}
-          value={AssetType.TOKEN}
-        >
-          {symbol}
-        </ToggleButton>
-        <ToggleButton
-          className={styles.option}
-          sx={{ color: theme.palette.text.primary }}
-          value={AssetType.REGION}
-        >
-          Region
-        </ToggleButton>
+        {items.map(({ label, value }, index) => (
+          <ToggleButton
+            className={styles.option}
+            sx={{
+              color: theme.palette.text.primary,
+              border: `1px solid ${theme.palette.grey['200']}`,
+            }}
+            value={value}
+            key={index}
+          >
+            {label}
+          </ToggleButton>
+        ))}
       </ToggleButtonGroup>
     </FormControl>
   );
diff --git a/src/utils/muiTheme.ts b/src/utils/muiTheme.ts
index 912cffc4..7fc5bce0 100644
--- a/src/utils/muiTheme.ts
+++ b/src/utils/muiTheme.ts
@@ -90,6 +90,13 @@ let theme = createTheme({
         },
       },
     },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        lastButton: {
+          borderLeft: '1px solid',
+        },
+      },
+    },
   },
 });