From 80e820c3a419f65ec1574a67ee730e305651c6cc Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Thu, 27 Jul 2023 16:03:48 +0200
Subject: [PATCH 1/3] fix: replacement nonce dropdown style

---
 .../tx-flow/common/TxNonce/index.tsx          | 46 +++++++++++++++----
 .../tx-flow/common/TxNonce/styles.module.css  | 13 ++++++
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index 378afc43c5..50f0c395a8 100644
--- a/src/components/tx-flow/common/TxNonce/index.tsx
+++ b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -11,6 +11,7 @@ import {
   type MenuItemProps,
   MenuItem,
   Typography,
+  ListSubheader,
 } from '@mui/material'
 import { Controller, useForm } from 'react-hook-form'
 
@@ -28,8 +29,16 @@ 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 ({ className, ...props }: PopperProps) {
+  return (
+    <Popper
+      {...props}
+      // Doesn't display correctly on mobile if in CSS module
+      sx={{ minWidth: '300px !important' }}
+      className={classNames(className, css.popper)}
+      placement="bottom-start"
+    />
+  )
 }
 
 const NonceFormOption = memo(function NonceFormOption({
@@ -43,13 +52,19 @@ 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)
+      <b>{nonce}</b>&nbsp;- {`${label || 'New'} transaction`}
     </MenuItem>
   )
 })
@@ -137,12 +152,23 @@ 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 && (
+                    <ListSubheader>
+                      <b>Recommended nonce</b>
+                    </ListSubheader>
+                  )}
+                  {isInitialPreviousNonce && (
+                    <ListSubheader sx={{ pt: 3 }}>
+                      <b>Already in queue</b>
+                    </ListSubheader>
+                  )}
+                  <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..ea74f1dcbf 100644
--- a/src/components/tx-flow/common/TxNonce/styles.module.css
+++ b/src/components/tx-flow/common/TxNonce/styles.module.css
@@ -1,3 +1,16 @@
+.popper :global .MuiAutocomplete-paper {
+  margin-top: calc(var(--space-1) / 2);
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+  border: 1px solid var(--color-border-light);
+}
+
+.popper :global .MuiAutocomplete-option,
+.popper :global .MuiListSubheader-root {
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+}
+
 .input :global .MuiOutlinedInput-root {
   padding: 0;
 }

From 713557eb0ca10c33fe0af66c00ffbcfde56aa58b Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Thu, 27 Jul 2023 19:28:30 +0200
Subject: [PATCH 2/3] fix: tweak style

---
 .../tx-flow/common/TxNonce/index.tsx          | 44 ++++++++++---------
 .../tx-flow/common/TxNonce/styles.module.css  | 13 +++++-
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index 50f0c395a8..c472641793 100644
--- a/src/components/tx-flow/common/TxNonce/index.tsx
+++ b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -12,6 +12,7 @@ import {
   MenuItem,
   Typography,
   ListSubheader,
+  type ListSubheaderProps,
 } from '@mui/material'
 import { Controller, useForm } from 'react-hook-form'
 
@@ -29,17 +30,24 @@ import { isRejectionTx } from '@/utils/transactions'
 import css from './styles.module.css'
 import classNames from 'classnames'
 
-const CustomPopper = function ({ className, ...props }: PopperProps) {
+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 (
-    <Popper
-      {...props}
-      // Doesn't display correctly on mobile if in CSS module
-      sx={{ minWidth: '300px !important' }}
-      className={classNames(className, css.popper)}
-      placement="bottom-start"
-    />
+    <ListSubheader {...props} disableSticky>
+      <Typography variant="caption" fontWeight={700} color="text.secondary">
+        {children}
+      </Typography>
+    </ListSubheader>
   )
-}
+})
 
 const NonceFormOption = memo(function NonceFormOption({
   nonce,
@@ -64,7 +72,9 @@ const NonceFormOption = memo(function NonceFormOption({
 
   return (
     <MenuItem {...menuItemProps}>
-      <b>{nonce}</b>&nbsp;- {`${label || 'New'} transaction`}
+      <Typography variant="body2">
+        <b>{nonce}</b>&nbsp;- {`${label || 'New'} transaction`}
+      </Typography>
     </MenuItem>
   )
 })
@@ -128,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>
           )
@@ -157,16 +167,8 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
 
               return (
                 <>
-                  {isRecommendedNonce && (
-                    <ListSubheader>
-                      <b>Recommended nonce</b>
-                    </ListSubheader>
-                  )}
-                  {isInitialPreviousNonce && (
-                    <ListSubheader sx={{ pt: 3 }}>
-                      <b>Already in queue</b>
-                    </ListSubheader>
-                  )}
+                  {isRecommendedNonce && <NonceFormHeader>Recommended nonce</NonceFormHeader>}
+                  {isInitialPreviousNonce && <NonceFormHeader sx={{ pt: 3 }}>Already in queue</NonceFormHeader>}
                   <NonceFormOption key={option} menuItemProps={props} nonce={option} />
                 </>
               )
diff --git a/src/components/tx-flow/common/TxNonce/styles.module.css b/src/components/tx-flow/common/TxNonce/styles.module.css
index ea74f1dcbf..8b1333ddcc 100644
--- a/src/components/tx-flow/common/TxNonce/styles.module.css
+++ b/src/components/tx-flow/common/TxNonce/styles.module.css
@@ -5,10 +5,19 @@
   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-4);
-  padding-right: var(--space-4);
+  padding-left: var(--space-3);
+  padding-right: var(--space-3);
 }
 
 .input :global .MuiOutlinedInput-root {

From 65dd39fdd8409ebef07a4294a950a72c8fbeb882 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Mon, 31 Jul 2023 08:57:10 +0100
Subject: [PATCH 3/3] fix: reduce padding

---
 src/components/tx-flow/common/TxNonce/styles.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/tx-flow/common/TxNonce/styles.module.css b/src/components/tx-flow/common/TxNonce/styles.module.css
index 8b1333ddcc..ff263b0630 100644
--- a/src/components/tx-flow/common/TxNonce/styles.module.css
+++ b/src/components/tx-flow/common/TxNonce/styles.module.css
@@ -1,7 +1,7 @@
 .popper :global .MuiAutocomplete-paper {
   margin-top: calc(var(--space-1) / 2);
-  padding-top: var(--space-2);
-  padding-bottom: var(--space-2);
+  padding-top: var(--space-1);
+  padding-bottom: var(--space-1);
   border: 1px solid var(--color-border-light);
 }