fix: Nonce form

src/components/tx-flow/common/TxNonce/index.tsx

@@ -1,29 +1,143 @@
-import { type ChangeEvent, useCallback, useContext } from 'react'
-import { Skeleton, Typography } from '@mui/material'
+import { memo, type ReactElement, type SyntheticEvent, useCallback, useContext, useMemo } from 'react'
+
+import {
+  Autocomplete,
+  Box,
+  IconButton,
+  InputAdornment,
+  Skeleton,
+  Tooltip,
+  Popper,
+  type PopperProps,
+  type AutocompleteValue,
+  type MenuItemProps,
+  MenuItem,
+} from '@mui/material'
 import { SafeTxContext } from '../../SafeTxProvider'
+import RotateLeftIcon from '@mui/icons-material/RotateLeft'
+import NumberField from '@/components/common/NumberField'
+import { isMultisigExecutionInfo, isTransactionListItem } from '@/utils/transaction-guards'
+import { uniqBy } from 'lodash'
+import useTxQueue, { useQueuedTxByNonce } from '@/hooks/useTxQueue'
+import useSafeInfo from '@/hooks/useSafeInfo'
 import css from './styles.module.css'
+import useAddressBook from '@/hooks/useAddressBook'
+import { getLatestTransactions } from '@/utils/tx-list'
+import { getTransactionType } from '@/hooks/useTransactionType'
+
+const CustomPopper = function (props: PopperProps) {
+  return <Popper {...props} sx={{ width: '300px !important' }} placement="bottom-start" />
+}
+
+const NonceFormOption = memo(function NonceFormOption({
+  nonce,
+  menuItemProps,
+}: {
+  nonce: number
+  menuItemProps: MenuItemProps
+}): ReactElement {
+  const addressBook = useAddressBook()
+  const transactions = useQueuedTxByNonce(nonce)
+
+  const label = useMemo(() => {
+    const [{ transaction }] = getLatestTransactions(transactions)
+    return getTransactionType(transaction, addressBook).text
+  }, [addressBook, transactions])
+
+  return (
+    <MenuItem key={nonce} {...menuItemProps}>
+      {nonce} ({label} transaction)
+    </MenuItem>
+  )
+})
 
 const TxNonce = () => {
-  const { nonce, setNonce, safeTx } = useContext(SafeTxContext)
+  const { page } = useTxQueue()
+  const { safe } = useSafeInfo()
+  const safeNonce = safe.nonce || 0
+  const { nonce, setNonce, safeTx, recommendedNonce } = useContext(SafeTxContext)
   const isEditable = !safeTx || safeTx?.signatures.size === 0
+  const readonly = !isEditable
+
+  const queuedTxs = useMemo(() => {
+    if (!page || page.results.length === 0) {
+      return []
+    }
+
+    const txs = page.results.filter(isTransactionListItem).map((item) => item.transaction)
+
+    return uniqBy(txs, (tx) => {
+      return isMultisigExecutionInfo(tx.executionInfo) ? tx.executionInfo.nonce : ''
+    })
+  }, [page])
+
+  const options = useMemo(() => {
+    return queuedTxs
+      .map((tx) => (isMultisigExecutionInfo(tx.executionInfo) ? tx.executionInfo.nonce : undefined))
+      .filter((nonce) => nonce !== undefined) as number[]
+  }, [queuedTxs])
+
+  // TODO: Add error/warning somewhere
+  const validateInput = (value: string) => {
+    if (!Number.isInteger(value)) {
+      return false
+    } else if (Number(value) < safeNonce) {
+      return false
+    }
+  }
 
-  const onChange = useCallback(
-    (e: ChangeEvent<HTMLElement>) => {
-      const newNonce = Number(e.target.textContent)
-      setNonce(newNonce)
+  const handleChange = useCallback(
+    (e: SyntheticEvent, value: string | AutocompleteValue<unknown, false, false, false>) => {
+      const nonce = Number(value)
+      if (isNaN(nonce)) return
+      setNonce(nonce)
     },
     [setNonce],
   )
 
   if (nonce === undefined) return <Skeleton variant="rounded" width={40} height={26} />
 
   return (
-    <Typography variant="h4" fontWeight={700}>
-      #
-      <span className={css.input} contentEditable={isEditable} onBlur={onChange} suppressContentEditableWarning>
-        {nonce}
-      </span>
-    </Typography>
+    <Box display="flex" alignItems="center" gap={1}>
+      Nonce
+      <Autocomplete
+        value={nonce}
+        inputValue={nonce.toString()}
+        freeSolo
+        onChange={handleChange}
+        onInputChange={handleChange}
+        options={options}
+        disabled={readonly}
+        getOptionLabel={(option) => option.toString()}
+        renderOption={(props, option: number) => <NonceFormOption menuItemProps={props} nonce={option} />}
+        disableClearable
+        componentsProps={{
+          paper: {
+            elevation: 2,
+          },
+        }}
+        renderInput={(params) => (
+          <NumberField
+            {...params}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: recommendedNonce !== undefined && recommendedNonce !== nonce && (
+                <InputAdornment position="end" className={css.adornment}>
+                  <Tooltip title="Reset to recommended nonce">
+                    <IconButton onClick={() => setNonce(recommendedNonce)} size="small" color="primary">
+                      <RotateLeftIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                </InputAdornment>
+              ),
+              readOnly: readonly,
+            }}
+            className={css.input}
+          />
+        )}
+        PopperComponent={CustomPopper}
+      />
+    </Box>
   )
 }
 

src/components/tx-flow/common/TxNonce/styles.module.css

@@ -1,14 +1,8 @@
-.input {
-  white-space: nowrap;
-  width: 200px;
-  overflow: hidden;
+.input :global .MuiOutlinedInput-root {
+  padding: 0;
 }
 
-.input br {
-  display: none;
-}
-
-.input * {
-  display: inline;
-  white-space: nowrap;
+.adornment {
+  margin-left: 0;
+  margin-right: 4px;
 }