fix: replacement nonce dropdown style (#2318)

* fix: replacement nonce dropdown style * fix: tweak style * fix: reduce padding
safe-global · Jul 31, 2023 · 793cd98 · 793cd98
1 parent c031735
commit 793cd98
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 11 deletions.
diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -11,6 +11,8 @@ import {
   type MenuItemProps,
   MenuItem,
   Typography,
+  ListSubheader,
+  type ListSubheaderProps,
 } from '@mui/material'
 import { Controller, useForm } from 'react-hook-form'
 
@@ -28,10 +30,25 @@ import { isRejectionTx } from '@/utils/transactions'
 import css from './styles.module.css'
 import classNames from 'classnames'
 
-const CustomPopper = function (props: PopperProps) {
-  return <Popper {...props} sx={{ width: '300px !important' }} placement="bottom-start" />
+const CustomPopper = function ({
+  // Don't set width of Popper to that of the field
+  style: _,
+  className,
+  ...props
+}: PopperProps) {
+  return <Popper {...props} className={classNames(className, css.popper)} placement="bottom-start" />
 }
 
+const NonceFormHeader = memo(function NonceFormSubheader({ children, ...props }: ListSubheaderProps) {
+  return (
+    <ListSubheader {...props} disableSticky>
+      <Typography variant="caption" fontWeight={700} color="text.secondary">
+        {children}
+      </Typography>
+    </ListSubheader>
+  )
+})
+
 const NonceFormOption = memo(function NonceFormOption({
   nonce,
   menuItemProps,
@@ -43,13 +60,21 @@ const NonceFormOption = memo(function NonceFormOption({
   const transactions = useQueuedTxByNonce(Number(nonce))
 
   const label = useMemo(() => {
-    const [{ transaction }] = getLatestTransactions(transactions)
+    const latestTransactions = getLatestTransactions(transactions)
+
+    if (latestTransactions.length === 0) {
+      return
+    }
+
+    const [{ transaction }] = latestTransactions
     return getTransactionType(transaction, addressBook).text
   }, [addressBook, transactions])
 
   return (
     <MenuItem {...menuItemProps}>
-      {nonce} ({label} transaction)
+      <Typography variant="body2">
+        <b>{nonce}</b>&nbsp;- {`${label || 'New'} transaction`}
+      </Typography>
     </MenuItem>
   )
 })
@@ -113,7 +138,7 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
       render={({ field, fieldState }) => {
         if (readOnly) {
           return (
-            <Typography fontWeight={700} ml={-1}>
+            <Typography variant="body2" fontWeight={700} ml={-1}>
               {nonce}
             </Typography>
           )
@@ -137,12 +162,15 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
             options={[recommendedNonce, ...previousNonces]}
             getOptionLabel={(option) => option.toString()}
             renderOption={(props, option) => {
-              return option === recommendedNonce ? (
-                <MenuItem key={option} {...props}>
-                  {option} (recommended nonce)
-                </MenuItem>
-              ) : (
-                <NonceFormOption key={option} menuItemProps={props} nonce={option} />
+              const isRecommendedNonce = option === recommendedNonce
+              const isInitialPreviousNonce = option === previousNonces[0]
+
+              return (
+                <>
+                  {isRecommendedNonce && <NonceFormHeader>Recommended nonce</NonceFormHeader>}
+                  {isInitialPreviousNonce && <NonceFormHeader sx={{ pt: 3 }}>Already in queue</NonceFormHeader>}
+                  <NonceFormOption key={option} menuItemProps={props} nonce={option} />
+                </>
               )
             }}
             disableClearable

diff --git a/src/components/tx-flow/common/TxNonce/styles.module.css b/src/components/tx-flow/common/TxNonce/styles.module.css
@@ -1,3 +1,25 @@
+.popper :global .MuiAutocomplete-paper {
+  margin-top: calc(var(--space-1) / 2);
+  padding-top: var(--space-1);
+  padding-bottom: var(--space-1);
+  border: 1px solid var(--color-border-light);
+}
+
+.popper :global .MuiAutocomplete-listbox {
+  max-height: unset;
+}
+
+.popper :global .MuiListSubheader-root {
+  line-height: 22px;
+  margin-bottom: var(--space-1);
+}
+
+.popper :global .MuiAutocomplete-option,
+.popper :global .MuiListSubheader-root {
+  padding-left: var(--space-3);
+  padding-right: var(--space-3);
+}
+
 .input :global .MuiOutlinedInput-root {
   padding: 0;
 }