From 793cd980039fe5dda1e19a1598eba143579ef5a4 Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Mon, 31 Jul 2023 15:54:53 +0100
Subject: [PATCH] fix: replacement nonce dropdown style (#2318)

* fix: replacement nonce dropdown style

* fix: tweak style

* fix: reduce padding
---
 .../tx-flow/common/TxNonce/index.tsx          | 50 +++++++++++++++----
 .../tx-flow/common/TxNonce/styles.module.css  | 22 ++++++++
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index 378afc43c5..c472641793 100644
--- 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
index 614c607033..ff263b0630 100644
--- 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;
 }