update after review

ChainSafe · Sep 22, 2023 · d13b7b5 · d13b7b5
1 parent 76da7dc
commit d13b7b5
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 30 deletions.
diff --git a/packages/ui/src/components/WalletConnect/WalletConnectSession.tsx b/packages/ui/src/components/WalletConnect/WalletConnectSession.tsx
@@ -1,6 +1,6 @@
 import { Alert, CircularProgress, Grid, styled } from '@mui/material'
 import { Button, TextFieldStyled } from '../library'
-import { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useWalletConnect } from '../../contexts/WalletConnectContext'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 

diff --git a/packages/ui/src/components/select/AccountSelection.tsx b/packages/ui/src/components/select/AccountSelection.tsx
@@ -18,6 +18,8 @@ interface Props {
   addAccount?: (address: string) => void
   value?: string
   label?: string
+  actionButtonLabel?: string
+  actionButtonVariant?: 'primary' | 'secondary'
   currentSelection?: string[]
   withName?: boolean
   withAddButton?: boolean
@@ -31,6 +33,8 @@ const AccountSelection = ({
   nameDisabled = false,
   value,
   label = 'Address',
+  actionButtonLabel = 'Add',
+  actionButtonVariant = 'secondary',
   currentSelection = [],
   withName = false,
   withAddButton = false,
@@ -179,11 +183,11 @@ const AccountSelection = ({
           {withAddButton && (
             <ButtonStyled
               onClick={onAdd}
-              variant="primary"
+              variant={actionButtonVariant}
               disabled={!selected || !!errorMessage}
               data-cy="button-add-watched-account"
             >
-              Watch
+              {actionButtonLabel}
             </ButtonStyled>
           )}
         </BoxStyled>

diff --git a/packages/ui/src/pages/Settings/Settings.tsx b/packages/ui/src/pages/Settings/Settings.tsx
@@ -5,24 +5,32 @@ import { WalletConnectSession } from '../../components/WalletConnect/WalletConne
 import { WalletConnectActiveSessions } from '../../components/WalletConnect/WalletConnectActiveSessions'
 import { HiOutlineChevronDown as ExpandMoreIcon, HiOutlineEye } from 'react-icons/hi2'
 import { theme } from '../../styles/theme'
-import { SyntheticEvent, useEffect, useState } from 'react'
+import { SyntheticEvent, useCallback, useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 
+const ACCORDION_WATCHED_ACCOUNTS = 'panel-watched-accounts'
+const ACCORDION_WALLET_CONNECT = 'panel-wallet-connect'
+
+type AccordionNames = typeof ACCORDION_WATCHED_ACCOUNTS | typeof ACCORDION_WALLET_CONNECT
+
 const Settings = () => {
-  const location = useLocation()
-  const [expanded, setExpanded] = useState<string | false>(false)
-  const handleChange = (panel: string) => (event: SyntheticEvent | null, isExpanded: boolean) => {
-    console.log('handleChange', panel)
-    setExpanded(isExpanded ? panel : false)
-  }
+  const { hash } = useLocation()
+  const [expanded, setExpanded] = useState<AccordionNames | false>(false)
+
+  const handleChange = useCallback(
+    (panel: AccordionNames) => (_event: SyntheticEvent | null, isExpanded: boolean) => {
+      setExpanded(isExpanded ? panel : false)
+    },
+    []
+  )
 
   useEffect(() => {
-    if (location.hash === '#watched-acccounts') {
+    if (hash === '#watched-acccounts') {
       handleChange('panel-watched-accounts')(null, true)
-    } else if (location.hash === '#wallet-connect') {
+    } else if (hash === '#wallet-connect') {
       handleChange('panel-wallet-connect')(null, true)
     }
-  }, [location.hash])
+  }, [handleChange, hash])
 
   return (
     <>
@@ -66,11 +74,11 @@ const SettingsHeaderStyled = styled('h1')`
 const AccordionStyled = styled(Accordion)`
   max-width: 42.5625rem;
   box-shadow: none;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid ${({ theme }) => theme.custom.neutral[200]};
 
   &.Mui-expanded {
     margin: 0;
-    background: #fafafa;
+    background: ${({ theme }) => theme.custom.neutral[50]};
 
     .MuiAccordionSummary-root {
       margin: 0;

diff --git a/packages/ui/src/pages/Settings/WatchedAccounts.tsx b/packages/ui/src/pages/Settings/WatchedAccounts.tsx
@@ -4,36 +4,34 @@ import { useWatchedAddresses } from '../../contexts/WatchedAddressesContext'
 import AccountDisplay from '../../components/AccountDisplay'
 import { HiOutlineXMark } from 'react-icons/hi2'
 import AccountSelection from '../../components/select/AccountSelection'
+import { useCallback } from 'react'
 
-interface Props {
-  className?: string
-}
-
-const WatchedAccounts = ({ className }: Props) => {
+const WatchedAccounts = () => {
   const { watchedAddresses, removeWatchedAccount, addWatchedAccount } = useWatchedAddresses()
+  const hasWatchedAddresses = useCallback(() => watchedAddresses.length > 0, [watchedAddresses])
 
   return (
     <>
-      <WatchAccountsHeaderStyled>Currently watched accounts:</WatchAccountsHeaderStyled>
+      {hasWatchedAddresses() && (
+        <WatchAccountsHeaderStyled>Currently watched accounts:</WatchAccountsHeaderStyled>
+      )}
       <Grid
-        className={className}
         container
         spacing={2}
       >
-        {watchedAddresses.length > 0 && (
+        {hasWatchedAddresses() && (
           <Grid
             item
             xs={12}
             md={8}
           >
             <PaperStyled>
-              {watchedAddresses.map((address, index) => {
+              {watchedAddresses.map((address) => {
                 return (
                   <AccountItemWrapperStyled
                     key={address}
                     data-cy="container-account-details"
                   >
-                    <AccountCountStyled>{index + 1}</AccountCountStyled>
                     <AccountDisplayStyled address={address} />
                     <IconButtonDeleteStyled
                       aria-label="delete"
@@ -53,12 +51,13 @@ const WatchedAccounts = ({ className }: Props) => {
           xs={12}
           md={8}
         >
-          <WatchAccountsHeaderStyled>Watch an account</WatchAccountsHeaderStyled>
           <AccountSelectionWrapperStyled>
             <AccountSelection
               className="accountDropdown"
               currentSelection={watchedAddresses}
               addAccount={addWatchedAccount}
+              actionButtonLabel="Watch"
+              actionButtonVariant="primary"
               withName
               withAddButton
               withPreselection={false}
@@ -95,10 +94,6 @@ const IconButtonDeleteStyled = styled(IconButton)`
   align-self: center;
 `
 
-const AccountCountStyled = styled(Box)`
-  margin-right: 1rem;
-`
-
 const AccountDisplayStyled = styled(AccountDisplay)`
   flex: 1;
 `

diff --git a/packages/ui/src/styles/theme.ts b/packages/ui/src/styles/theme.ts
@@ -35,6 +35,10 @@ declare module '@mui/material/styles' {
         800: string
         900: string
       }
+      neutral: {
+        50: string
+        200: string
+      }
       button: {
         primaryDisabledColor: string
         primaryDisabledBackground: string
@@ -79,6 +83,10 @@ declare module '@mui/material/styles' {
         800: string
         900: string
       }
+      neutral: {
+        50: string
+        200: string
+      }
       button: {
         primaryDisabledColor: string
         primaryDisabledBackground: string
@@ -140,6 +148,10 @@ export const theme = createTheme({
       800: '#485568',
       900: '#020617'
     },
+    neutral: {
+      50: '#FAFAFA',
+      200: '#e5e5e5'
+    },
     button: {
       primaryDisabledColor: '#A8B3DC',
       primaryDisabledBackground: '#E3E9FF',