feat: Update network select (#385)

Co-authored-by: Thibaut Sardan <[email protected]>
ChainSafe · Oct 9, 2023 · eac29c0 · eac29c0
1 parent fc3915f
commit eac29c0
Show file tree

Hide file tree

Showing 8 changed files with 293 additions and 70 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {