From eac29c0b55c704a88ace236e5ad98af02f1cea34 Mon Sep 17 00:00:00 2001
From: Anton Lykhoyda <lykhoyda@gmail.com>
Date: Mon, 9 Oct 2023 11:51:15 +0200
Subject: [PATCH] feat: Update network select (#385)

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
---
 packages/ui/src/components/ConnectOrWatch.tsx |  30 ++-
 .../ui/src/components/Drawer/DrawerMenu.tsx   |  18 +-
 packages/ui/src/components/Header/Header.tsx  |  16 +-
 packages/ui/src/components/library/Select.tsx |  56 ++---
 packages/ui/src/components/modals/Send.tsx    |  18 +-
 .../components/select/MultiProxySelection.tsx |  16 +-
 .../components/select/NetworkSelection.tsx    | 195 ++++++++++++++++--
 packages/ui/src/constants.ts                  |  14 ++
 8 files changed, 293 insertions(+), 70 deletions(-)

diff --git a/packages/ui/src/components/ConnectOrWatch.tsx b/packages/ui/src/components/ConnectOrWatch.tsx
index 1c755114..90605a8d 100644
--- a/packages/ui/src/components/ConnectOrWatch.tsx
+++ b/packages/ui/src/components/ConnectOrWatch.tsx
@@ -10,14 +10,16 @@ export const ConnectOrWatch = () => {
 
   return (
     <ConnectButtonWrapperStyled>
-      No multisig found for your accounts or watched accounts.{' '}
-      {isAllowedToConnectToExtension ? (
-        <Button onClick={() => navigate('/create')}>Create one</Button>
-      ) : (
-        <Button onClick={allowConnectionToExtension}>Connect Wallet</Button>
-      )}
-      or
-      <Button onClick={() => navigate(`/settings${WATCH_ACCOUNT_ANCHOR}`)}>Watch one</Button>
+      <div>No multisig found for your accounts or watched accounts.</div>
+      <ButtonWrapperStyled>
+        {isAllowedToConnectToExtension ? (
+          <Button onClick={() => navigate('/create')}>Create one</Button>
+        ) : (
+          <Button onClick={allowConnectionToExtension}>Connect Wallet</Button>
+        )}
+        or
+        <Button onClick={() => navigate(`/settings${WATCH_ACCOUNT_ANCHOR}`)}>Watch one</Button>
+      </ButtonWrapperStyled>
     </ConnectButtonWrapperStyled>
   )
 }
@@ -26,8 +28,16 @@ const ConnectButtonWrapperStyled = styled('div')`
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
+`
+
+const ButtonWrapperStyled = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 0;
 
-  & > button {
-    margin: 0 1rem;
+  button {
+    margin: 0 0.5rem;
   }
 `
diff --git a/packages/ui/src/components/Drawer/DrawerMenu.tsx b/packages/ui/src/components/Drawer/DrawerMenu.tsx
index 668e50cf..99038a6c 100644
--- a/packages/ui/src/components/Drawer/DrawerMenu.tsx
+++ b/packages/ui/src/components/Drawer/DrawerMenu.tsx
@@ -28,7 +28,7 @@ function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) {
           <ChevronRightIcon size={20} />
         </IconButton>
       </DrawerHeader>
-      <List>
+      <List disablePadding={true}>
         {!isAllowedToConnectToExtension && (
           <ListItemStyled disablePadding>
             <ButtonStyled
@@ -65,7 +65,21 @@ function DrawerMenu({ handleDrawerClose }: DrawerMenuProps) {
   )
 }
 const ListItemStyled = styled(ListItem)`
-  justify-content: flex-end;
+  justify-content: center;
+  width: 100%;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    justify-content: flex-end;
+  }
+
+  a {
+    width: 100%;
+    text-align: center;
+
+    @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+      width: auto;
+    }
+  }
 `
 
 const ButtonStyled = styled(Button)`
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index 56c3f535..ccaff8ce 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -97,20 +97,28 @@ const RightButtonsWrapperStyled = styled(Box)`
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  flex: 1;
 `
 
 const MenuWrapperStyled = styled(Box)`
   width: 100%;
+  display: flex;
+  align-items: center;
 `
 
 const DesktopMenuStyled = styled(Box)`
   display: none;
 
   @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    flex-grow: 1;
+    width: 100%;
+    flex-grow: 0;
     display: flex;
     align-items: center;
   }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.lg}px) {
+    flex-grow: 1;
+  }
 `
 
 const LogoWrapperStyled = styled(Box)`
@@ -119,8 +127,12 @@ const LogoWrapperStyled = styled(Box)`
   flex: 1;
 
   @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    margin-right: 1rem;
     flex: 0;
+    margin-right: 0.5rem;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.lg}px) {
+    margin-right: 1rem;
   }
 `
 
diff --git a/packages/ui/src/components/library/Select.tsx b/packages/ui/src/components/library/Select.tsx
index 3211096e..219c7bb8 100644
--- a/packages/ui/src/components/library/Select.tsx
+++ b/packages/ui/src/components/library/Select.tsx
@@ -15,11 +15,11 @@ import { theme } from '../../styles/theme'
 interface SelectProps {
   value: string
   menuItems?: { value: string; logo?: string }[]
-  onChange: (event: SelectChangeEvent<string>) => void
+  onChange: (event: SelectChangeEvent<unknown>) => void
   minified?: boolean
   inputSize?: 'medium' | 'large'
   fullWidth?: boolean
-  children?: React.ReactNode[]
+  children?: React.ReactNode[] | React.ReactNode
   sx?: SxProps<Theme>
 }
 
@@ -43,30 +43,8 @@ const Select = ({
       value={value}
       fullWidth={fullWidth}
       IconComponent={HiOutlineChevronDown}
-      MenuProps={{
-        sx: {
-          marginTop: '.75rem',
-          '.MuiPaper-root': {
-            boxShadow: 'none'
-          },
-
-          '.MuiList-root': {
-            padding: 0,
-            border: `1px solid ${theme.custom.text.borderColor}`,
-            borderRadius: '0.5rem'
-          },
-
-          '.MuiMenuItem-root': {
-            maxWidth: '100%',
-            padding: '0.75rem',
-            borderBottom: `1px solid ${theme.custom.text.borderColor}`,
-            '&:last-child': {
-              borderBottom: 'none'
-            }
-          }
-        }
-      }}
-      onChange={(event) => onChange(event as SelectChangeEvent<string>)}
+      MenuProps={MenuPropsStyles}
+      onChange={onChange}
     >
       {menuItems
         ? menuItems.map(({ value, logo }) => (
@@ -81,7 +59,7 @@ const Select = ({
                   src={logo}
                 />
               )}
-              {<ItemNameStyled>{value}</ItemNameStyled>}
+              <ItemNameStyled>{value}</ItemNameStyled>
             </MenuItemStyled>
           ))
         : children}
@@ -94,6 +72,30 @@ Select.defaultProps = {
   inputSize: 'medium'
 }
 
+const MenuPropsStyles = {
+  sx: {
+    marginTop: '.75rem',
+    '.MuiPaper-root': {
+      boxShadow: 'none'
+    },
+
+    '.MuiList-root': {
+      padding: 0,
+      border: `1px solid ${theme.custom.text.borderColor}`,
+      borderRadius: '0.5rem'
+    },
+
+    '.MuiMenuItem-root': {
+      maxWidth: '100%',
+      padding: '0.75rem',
+      borderBottom: `1px solid ${theme.custom.text.borderColor}`,
+      '&:last-child': {
+        borderBottom: 'none'
+      }
+    }
+  }
+}
+
 const SelectMuiStyled = styled(SelectMui)<
   SelectMuiProps & { slotProps: { minifiedVersion: boolean; inputSize?: string } }
 >`
diff --git a/packages/ui/src/components/modals/Send.tsx b/packages/ui/src/components/modals/Send.tsx
index 4d3ef223..6a3bf7c5 100644
--- a/packages/ui/src/components/modals/Send.tsx
+++ b/packages/ui/src/components/modals/Send.tsx
@@ -218,11 +218,19 @@ const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
     getSubscanExtrinsicLink
   ])
 
-  const onChangeEasySetupOption = useCallback((event: SelectChangeEvent<string>) => {
-    setErrorMessage('')
-    setEasyOptionErrorMessage('')
-    setSelectedEasyOption(event.target.value)
-  }, [])
+  const onChangeEasySetupOption = useCallback(
+    ({ target: { value } }: SelectChangeEvent<unknown>) => {
+      if (typeof value !== 'string') {
+        console.error('Unexpected network value, expect string but received', value)
+        return
+      }
+
+      setErrorMessage('')
+      setEasyOptionErrorMessage('')
+      setSelectedEasyOption(value)
+    },
+    []
+  )
 
   if (!possibleOrigin) {
     return null
diff --git a/packages/ui/src/components/select/MultiProxySelection.tsx b/packages/ui/src/components/select/MultiProxySelection.tsx
index 1cccdd79..65631fef 100644
--- a/packages/ui/src/components/select/MultiProxySelection.tsx
+++ b/packages/ui/src/components/select/MultiProxySelection.tsx
@@ -155,16 +155,18 @@ const BoxStyled = styled(Box)`
 `
 
 export default styled(MultiProxySelection)`
-  min-width: 200px;
-
-  @media (min-width: ${(props) => props.theme.breakpoints.values.md}px) {
-    min-width: 260px;
-  }
-
+  min-width: 12.5rem;
   text-align: right;
+  width: 100%;
 
   .MuiTextField-root {
-    max-width: 18.875rem;
+    @media (min-width: ${(props) => props.theme.breakpoints.values.md}px) {
+      min-width: 13.6875rem;
+    }
+
+    @media (min-width: ${(props) => props.theme.breakpoints.values.lg}px) {
+      min-width: 18.6875rem;
+    }
   }
 
   .MuiAutocomplete-endAdornment {
diff --git a/packages/ui/src/components/select/NetworkSelection.tsx b/packages/ui/src/components/select/NetworkSelection.tsx
index 628e9f8b..2a7ce9a5 100644
--- a/packages/ui/src/components/select/NetworkSelection.tsx
+++ b/packages/ui/src/components/select/NetworkSelection.tsx
@@ -1,8 +1,15 @@
-import { SelectChangeEvent } from '@mui/material'
+import React, { useCallback, useMemo } from 'react'
+import { ListSubheader, MenuItem, Select as SelectMui, SelectChangeEvent } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { HiOutlineChevronDown } from 'react-icons/hi2'
 import { useNetwork } from '../../contexts/NetworkContext'
-import { useCallback, useMemo } from 'react'
-import { networkList } from '../../constants'
-import { Select } from '../library'
+import {
+  kusamaNetworksAndParachains,
+  networkList,
+  polkadotNetworksAndParachains,
+  testChains
+} from '../../constants'
+import { theme } from '../../styles/theme'
 
 const NetworkSelection = () => {
   const { selectedNetwork, selectNetwork } = useNetwork()
@@ -14,31 +21,185 @@ const NetworkSelection = () => {
   }, [])
 
   const handleNetworkSelection = useCallback(
-    (event: SelectChangeEvent<string>) => {
-      selectNetwork(event.target.value)
+    ({ target: { value } }: SelectChangeEvent<unknown>) => {
+      if (typeof value !== 'string') {
+        console.error('Unexpected network value, expect string but received', value)
+        return
+      }
+
+      selectNetwork(value)
     },
     [selectNetwork]
   )
 
+  const renderNetworks = useCallback(
+    (allowedNetworks: string[]) =>
+      networksToShow
+        .filter(([networkName]) => allowedNetworks.includes(networkName))
+        .map(([networkName, { logo }]) => (
+          <MenuItemStyled
+            key={networkName}
+            value={networkName}
+          >
+            <ImgStyled
+              alt={`network-logo-${networkName}`}
+              src={logo}
+            />
+            <ItemNameStyled>{networkName}</ItemNameStyled>
+          </MenuItemStyled>
+        )),
+    [networksToShow]
+  )
+
   if (!selectedNetwork) {
     return null
   }
 
   return (
-    <Select
-      sx={{
-        maxWidth: '9.875rem',
-        marginLeft: '1rem'
-      }}
-      inputSize="large"
+    <SelectStyled
+      IconComponent={HiOutlineChevronDown}
       value={selectedNetwork}
+      autoWidth={true}
       onChange={handleNetworkSelection}
-      menuItems={networksToShow.map(([name, { logo }]) => ({
-        value: name,
-        logo
-      }))}
-    />
+      MenuProps={MenuPropsStyles}
+    >
+      <ListSubheader>Polkadot & Parachains</ListSubheader>
+      {renderNetworks(polkadotNetworksAndParachains)}
+      <ListSubheader>Kusama & Parachains</ListSubheader>
+      {renderNetworks(kusamaNetworksAndParachains)}
+      <ListSubheader>Testnets</ListSubheader>
+      {renderNetworks(testChains)}
+    </SelectStyled>
   )
 }
 
+const MenuPropsStyles = {
+  sx: {
+    marginTop: '.75rem',
+
+    '.MuiPaper-root': {
+      marginTop: '2px',
+      boxShadow: 'none',
+      border: 'none',
+      outline: `1px solid ${theme.custom.text.borderColor}`,
+
+      ul: {
+        border: 'none'
+      }
+    },
+
+    '.MuiMenuItem-root': {
+      maxWidth: '100%',
+      padding: '0.75rem'
+    },
+
+    '.MuiList-root': {
+      columnFill: 'balance',
+      padding: 0,
+      border: `1px solid ${theme.custom.text.borderColor}`,
+      borderRadius: '0.5rem'
+    },
+
+    '.MuiListSubheader-root': {
+      columnSpan: 'all'
+    },
+
+    [theme.breakpoints.up('xs')]: {
+      '.MuiList-root': {
+        columns: '160px 2'
+      }
+    },
+
+    [theme.breakpoints.up('sm')]: {
+      '.MuiList-root': {
+        columns: '180px 2'
+      }
+    },
+
+    [theme.breakpoints.up('md')]: {
+      '.MuiList-root': {
+        columns: '200px 2'
+      }
+    }
+  }
+}
+
+const SelectStyled = styled(SelectMui)`
+  display: inline-flex;
+  width: 100%;
+  background: ${({ theme }) => theme.palette.primary.white};
+  outline: 1.5px solid ${({ theme }) => theme.custom.text.borderColor};
+  text-transform: capitalize;
+  border-radius: ${({ theme }) => theme.custom.borderRadius};
+  cursor: pointer;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    margin-left: 1rem;
+    max-width: fit-content;
+  }
+
+  .MuiSelect-select {
+    display: flex;
+    padding-right: 2.5rem !important;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+
+    @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+      padding-right: 2rem !important;
+    }
+
+    div:last-child {
+      @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+        display: none;
+      }
+    }
+  }
+
+  .MuiList-root {
+    columns: 100vw 3;
+    column-fill: balance;
+
+    @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+      columns: 100px 2;
+      column-fill: auto;
+    }
+  }
+
+  svg {
+    color: ${({ theme }) => theme.custom.text.black};
+    width: 1.25rem;
+    height: 1.25rem;
+    top: calc(50% - 0.65em);
+  }
+
+  .MuiSelect-icon {
+    right: 9px;
+  }
+
+  .MuiOutlinedInput-notchedOutline {
+    border: none;
+  }
+`
+
+const MenuItemStyled = styled(MenuItem)`
+  text-transform: capitalize;
+  padding: 0.75rem;
+  max-width: 9.1875rem;
+  box-sizing: content-box;
+`
+
+const ImgStyled = styled('img')`
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-right: 0.5rem;
+  border-radius: 50%;
+`
+
+const ItemNameStyled = styled('div')`
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  color: ${({ theme }) => theme.custom.text.black};
+`
+
 export default NetworkSelection
diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
index 36f77244..95763b5e 100644
--- a/packages/ui/src/constants.ts
+++ b/packages/ui/src/constants.ts
@@ -189,6 +189,20 @@ export const networkList = {
   }
 }
 
+export const polkadotNetworksAndParachains = [
+  'polkadot',
+  'assethub-dot',
+  'acala',
+  'astar',
+  'bifrost-dot',
+  'hydradx',
+  'interlay',
+  'moonbeam',
+  'phala'
+]
+export const kusamaNetworksAndParachains = ['kusama', 'assethub-ksm', 'khala', 'moonriver']
+export const testChains = ['rococo', 'rhala testnet', 'local']
+
 export type SupportedNetworks = keyof typeof networkList
 
 /**