feat: Add Human readable descriptions

cypress/e2e/smoke/batch_tx.cy.js

@@ -14,7 +14,7 @@ describe('Create batch transaction', () => {
     cy.visit(`/home?safe=${SAFE}`)
     cy.contains('Accept selection').click()
 
-    cy.contains(/E2E Wallet @ G(ö|oe)rli/)
+    cy.contains(/E2E Wallet @ G(ö|oe)rli/, { timeout: 10000 })
   })
 
   it('Should open an empty batch list', () => {

src/components/common/Notifications/index.tsx

@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from '@/store'
 import type { Notification } from '@/store/notificationsSlice'
 import { closeNotification, readNotification, selectNotifications } from '@/store/notificationsSlice'
 import type { AlertColor, SnackbarCloseReason } from '@mui/material'
-import { Alert, Link, Snackbar } from '@mui/material'
+import { Alert, Link, Snackbar, Typography } from '@mui/material'
 import css from './styles.module.css'
 import NextLink from 'next/link'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
@@ -45,6 +45,7 @@ export const NotificationLink = ({
 }
 
 const Toast = ({
+  title,
   message,
   detailedMessage,
   variant,
@@ -73,6 +74,12 @@ const Toast = ({
   return (
     <Snackbar open onClose={handleClose} sx={toastStyle} autoHideDuration={autoHideDuration}>
       <Alert severity={variant} onClose={handleClose} elevation={3} sx={{ width: '340px' }}>
+        {title && (
+          <Typography variant="body2" fontWeight="700">
+            {title}
+          </Typography>
+        )}
+
         {message}
 
         {detailedMessage && (

src/components/notification-center/NotificationCenterItem/index.tsx

@@ -16,6 +16,7 @@ import { formatTimeInWords } from '@/utils/date'
 import css from './styles.module.css'
 import classnames from 'classnames'
 import SvgIcon from '@mui/material/SvgIcon'
+import { Typography } from '@mui/material'
 
 const VARIANT_ICONS = {
   error: ErrorIcon,
@@ -35,6 +36,7 @@ const NotificationCenterItem = ({
   timestamp,
   link,
   handleClose,
+  title,
 }: Notification & { handleClose: () => void }): ReactElement => {
   const requiresAction = !isRead && !!link
 
@@ -45,6 +47,13 @@ const NotificationCenterItem = ({
     </span>
   )
 
+  const primaryText = (
+    <>
+      {title && <Typography fontWeight="700">{title}</Typography>}
+      <Typography>{message}</Typography>
+    </>
+  )
+
   return (
     <ListItem className={classnames(css.item, { [css.requiresAction]: requiresAction })}>
       <ListItemAvatar className={css.avatar}>
@@ -58,7 +67,7 @@ const NotificationCenterItem = ({
           {getNotificationIcon(variant)}
         </UnreadBadge>
       </ListItemAvatar>
-      <ListItemText primary={message} secondary={secondaryText} />
+      <ListItemText primary={primaryText} secondary={secondaryText} />
     </ListItem>
   )
 }

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

@@ -59,21 +59,23 @@ const NonceFormOption = memo(function NonceFormOption({
   const addressBook = useAddressBook()
   const transactions = useQueuedTxByNonce(Number(nonce))
 
-  const label = useMemo(() => {
+  const txLabel = useMemo(() => {
     const latestTransactions = getLatestTransactions(transactions)
 
     if (latestTransactions.length === 0) {
       return
     }
 
     const [{ transaction }] = latestTransactions
-    return getTransactionType(transaction, addressBook).text
+    return transaction.txInfo.humanDescription || `${getTransactionType(transaction, addressBook).text} transaction`
   }, [addressBook, transactions])
 
+  const label = txLabel || 'New transaction'
+
   return (
     <MenuItem {...menuItemProps}>
       <Typography variant="body2">
-        <b>{nonce}</b>&nbsp;- {`${label || 'New'} transaction`}
+        <b>{nonce}</b>&nbsp;- {label}
       </Typography>
     </MenuItem>
   )
@@ -168,7 +170,7 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
               return (
                 <>
                   {isRecommendedNonce && <NonceFormHeader>Recommended nonce</NonceFormHeader>}
-                  {isInitialPreviousNonce && <NonceFormHeader sx={{ pt: 3 }}>Already in queue</NonceFormHeader>}
+                  {isInitialPreviousNonce && <NonceFormHeader sx={{ pt: 3 }}>Replace existing</NonceFormHeader>}
                   <NonceFormOption key={option} menuItemProps={props} nonce={option} />
                 </>
               )

src/components/tx/SignOrExecuteForm/ExecuteForm.tsx

@@ -26,6 +26,8 @@ import commonCss from '@/components/tx-flow/common/styles.module.css'
 import { TxSecurityContext } from '../security/shared/TxSecurityContext'
 import useIsSafeOwner from '@/hooks/useIsSafeOwner'
 import NonOwnerError from '@/components/tx/SignOrExecuteForm/NonOwnerError'
+import { useAppSelector } from '@/store'
+import { selectQueuedTransactionById } from '@/store/txQueueSlice'
 
 const ExecuteForm = ({
   safeTx,
@@ -50,6 +52,8 @@ const ExecuteForm = ({
   const { setTxFlow } = useContext(TxModalContext)
   const { needsRiskConfirmation, isRiskConfirmed, setIsRiskIgnored } = useContext(TxSecurityContext)
 
+  const tx = useAppSelector((state) => selectQueuedTransactionById(state, txId))
+
   // Check that the transaction is executable
   const isExecutionLoop = useIsExecutionLoop()
 
@@ -85,7 +89,7 @@ const ExecuteForm = ({
     const txOptions = getTxOptions(advancedParams, currentChain)
 
     try {
-      const executedTxId = await executeTx(txOptions, safeTx, txId, origin, willRelay)
+      const executedTxId = await executeTx(txOptions, safeTx, txId, origin, willRelay, tx)
       setTxFlow(<SuccessScreen txId={executedTxId} />, undefined, false)
     } catch (_err) {
       const err = asError(_err)

src/components/tx/SignOrExecuteForm/SignForm.tsx

@@ -14,6 +14,8 @@ import commonCss from '@/components/tx-flow/common/styles.module.css'
 import { TxSecurityContext } from '../security/shared/TxSecurityContext'
 import NonOwnerError from '@/components/tx/SignOrExecuteForm/NonOwnerError'
 import BatchButton from './BatchButton'
+import { useAppSelector } from '@/store'
+import { selectQueuedTransactionById } from '@/store/txQueueSlice'
 
 const SignForm = ({
   safeTx,
@@ -38,6 +40,8 @@ const SignForm = ({
   const { needsRiskConfirmation, isRiskConfirmed, setIsRiskIgnored } = useContext(TxSecurityContext)
   const hasSigned = useAlreadySigned(safeTx)
 
+  const tx = useAppSelector((state) => selectQueuedTransactionById(state, txId))
+
   // On modal submit
   const handleSubmit = async (e: SyntheticEvent, isAddingToBatch = false) => {
     e.preventDefault()
@@ -53,7 +57,7 @@ const SignForm = ({
     setSubmitError(undefined)
 
     try {
-      await (isAddingToBatch ? addToBatch(safeTx, origin) : signTx(safeTx, txId, origin))
+      await (isAddingToBatch ? addToBatch(safeTx, origin) : signTx(safeTx, txId, origin, tx))
     } catch (_err) {
       const err = asError(_err)
       logError(Errors._804, err)

src/components/tx/SignOrExecuteForm/hooks.ts

@@ -18,16 +18,18 @@ import type { OnboardAPI } from '@web3-onboard/core'
 import { getSafeTxGas, getRecommendedNonce } from '@/services/tx/tx-sender/recommendedNonce'
 import useAsync from '@/hooks/useAsync'
 import { useUpdateBatch } from '@/hooks/useDraftBatch'
+import { type Transaction, type TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
 
 type TxActions = {
   addToBatch: (safeTx?: SafeTransaction, origin?: string) => Promise<string>
-  signTx: (safeTx?: SafeTransaction, txId?: string, origin?: string) => Promise<string>
+  signTx: (safeTx?: SafeTransaction, txId?: string, origin?: string, transaction?: Transaction) => Promise<string>
   executeTx: (
     txOptions: TransactionOptions,
     safeTx?: SafeTransaction,
     txId?: string,
     origin?: string,
     isRelayed?: boolean,
+    transaction?: Transaction,
   ) => Promise<string>
 }
 
@@ -83,50 +85,55 @@ export const useTxActions = (): TxActions => {
       return await dispatchTxSigning(safeTx, version, onboard, chainId, txId)
     }
 
-    const signTx: TxActions['signTx'] = async (safeTx, txId, origin) => {
+    const signTx: TxActions['signTx'] = async (safeTx, txId, origin, transaction) => {
       assertTx(safeTx)
       assertWallet(wallet)
       assertOnboard(onboard)
 
+      const humanDescription = transaction?.transaction?.txInfo?.humanDescription
+
       // Smart contract wallets must sign via an on-chain tx
       if (await isSmartContractWallet(wallet)) {
         // If the first signature is a smart contract wallet, we have to propose w/o signatures
         // Otherwise the backend won't pick up the tx
         // The signature will be added once the on-chain signature is indexed
         const id = txId || (await proposeTx(wallet.address, safeTx, txId, origin)).txId
-        await dispatchOnChainSigning(safeTx, id, onboard, chainId)
+        await dispatchOnChainSigning(safeTx, id, onboard, chainId, humanDescription)
         return id
       }
 
       // Otherwise, sign off-chain
-      const signedTx = await dispatchTxSigning(safeTx, version, onboard, chainId, txId)
+      const signedTx = await dispatchTxSigning(safeTx, version, onboard, chainId, txId, humanDescription)
       const tx = await proposeTx(wallet.address, signedTx, txId, origin)
       return tx.txId
     }
 
-    const executeTx: TxActions['executeTx'] = async (txOptions, safeTx, txId, origin, isRelayed) => {
+    const executeTx: TxActions['executeTx'] = async (txOptions, safeTx, txId, origin, isRelayed, transaction) => {
       assertTx(safeTx)
       assertWallet(wallet)
       assertOnboard(onboard)
 
+      let tx: TransactionDetails | undefined
       // Relayed transactions must be fully signed, so request a final signature if needed
       if (isRelayed && safeTx.signatures.size < safe.threshold) {
         safeTx = await signRelayedTx(safeTx)
-        const tx = await proposeTx(wallet.address, safeTx, txId, origin)
+        tx = await proposeTx(wallet.address, safeTx, txId, origin)
         txId = tx.txId
       }
 
       // Propose the tx if there's no id yet ("immediate execution")
       if (!txId) {
-        const tx = await proposeTx(wallet.address, safeTx, txId, origin)
+        tx = await proposeTx(wallet.address, safeTx, txId, origin)
         txId = tx.txId
       }
 
+      const humanDescription = tx?.txInfo?.humanDescription || transaction?.transaction?.txInfo?.humanDescription
+
       // Relay or execute the tx via connected wallet
       if (isRelayed) {
-        await dispatchTxRelay(safeTx, safe, txId, txOptions.gasLimit)
+        await dispatchTxRelay(safeTx, safe, txId, txOptions.gasLimit, humanDescription)
       } else {
-        await dispatchTxExecution(safeTx, txOptions, txId, onboard, chainId, safeAddress)
+        await dispatchTxExecution(safeTx, txOptions, txId, onboard, chainId, safeAddress, humanDescription)
       }
 
       return txId

src/hooks/useTxNotifications.ts

@@ -16,23 +16,20 @@ import useSafeAddress from './useSafeAddress'
 import { getExplorerLink } from '@/utils/gateway'
 
 const TxNotifications = {
-  [TxEvent.SIGN_FAILED]: 'Signature failed. Please try again.',
-  [TxEvent.PROPOSED]: 'Your transaction was successfully proposed.',
-  [TxEvent.PROPOSE_FAILED]: 'Failed proposing the transaction. Please try again.',
-  [TxEvent.SIGNATURE_PROPOSED]: 'You successfully signed the transaction.',
-  [TxEvent.SIGNATURE_PROPOSE_FAILED]: 'Failed to send the signature. Please try again.',
-  [TxEvent.EXECUTING]: 'Please confirm the execution in your wallet.',
-  [TxEvent.PROCESSING]: 'Your transaction is being processed.',
-  [TxEvent.PROCESSING_MODULE]:
-    'Your transaction has been submitted and will appear in the interface only after it has been successfully processed and indexed.',
-  [TxEvent.ONCHAIN_SIGNATURE_REQUESTED]:
-    'An on-chain signature is required. Please confirm the transaction in your wallet.',
-  [TxEvent.ONCHAIN_SIGNATURE_SUCCESS]:
-    "The on-chain signature request was confirmed. Once it's on chain, the transaction will be signed.",
-  [TxEvent.PROCESSED]: 'Your transaction was successfully processed and is now being indexed.',
-  [TxEvent.REVERTED]: 'Transaction reverted. Please check your gas settings.',
-  [TxEvent.SUCCESS]: 'Your transaction was successfully executed.',
-  [TxEvent.FAILED]: 'Your transaction was unsuccessful.',
+  [TxEvent.SIGN_FAILED]: 'Failed to sign. Please try again.',
+  [TxEvent.PROPOSED]: 'Successfully added to queue.',
+  [TxEvent.PROPOSE_FAILED]: 'Failed to add to queue. Please try again.',
+  [TxEvent.SIGNATURE_PROPOSED]: 'Successfully signed.',
+  [TxEvent.SIGNATURE_PROPOSE_FAILED]: 'Failed to send signature. Please try again.',
+  [TxEvent.EXECUTING]: 'Confirm the execution in your wallet.',
+  [TxEvent.PROCESSING]: 'Validating...',
+  [TxEvent.PROCESSING_MODULE]: 'Validating module interaction...',
+  [TxEvent.ONCHAIN_SIGNATURE_REQUESTED]: 'Confirm on-chain signature in your wallet.',
+  [TxEvent.ONCHAIN_SIGNATURE_SUCCESS]: 'On-chain signature request confirmed.',
+  [TxEvent.PROCESSED]: 'Successfully validated. Indexing...',
+  [TxEvent.REVERTED]: 'Reverted. Please check your gas settings.',
+  [TxEvent.SUCCESS]: 'Successfully executed.',
+  [TxEvent.FAILED]: 'Failed.',
 }
 
 enum Variant {
@@ -79,9 +76,12 @@ const useTxNotifications = (): void => {
         const txId = 'txId' in detail ? detail.txId : undefined
         const txHash = 'txHash' in detail ? detail.txHash : undefined
         const groupKey = 'groupKey' in detail && detail.groupKey ? detail.groupKey : txId || ''
+        const humanDescription =
+          'humanDescription' in detail && detail.humanDescription ? detail.humanDescription : 'Transaction'
 
         dispatch(
           showNotification({
+            title: humanDescription,
             message,
             detailedMessage: isError ? detail.error.message : undefined,
             groupKey,

src/services/tx/tx-sender/__tests__/ts-sender.test.ts

@@ -107,6 +107,9 @@ const mockSafeSDK = {
   createTransaction: jest.fn(() => ({
     signatures: new Map(),
     addSignature: jest.fn(),
+    data: {
+      nonce: '1',
+    },
   })),
   createRejectionTransaction: jest.fn(() => ({
     addSignature: jest.fn(),
@@ -399,7 +402,10 @@ describe('txSender', () => {
 
         expect((error as Error).message).toBe('rejected')
 
-        expect(txEvents.txDispatch).toHaveBeenCalledWith('SIGN_FAILED', { txId: '0x345', error })
+        expect(txEvents.txDispatch).toHaveBeenCalledWith('SIGN_FAILED', {
+          txId: '0x345',
+          error,
+        })
         expect(txEvents.txDispatch).not.toHaveBeenCalledWith('SIGNED', { txId: '0x345' })
       }
     })
@@ -430,7 +436,10 @@ describe('txSender', () => {
 
         expect((error as Error).message).toBe('failure-specific error')
 
-        expect(txEvents.txDispatch).toHaveBeenCalledWith('SIGN_FAILED', { txId: '0x345', error })
+        expect(txEvents.txDispatch).toHaveBeenCalledWith('SIGN_FAILED', {
+          txId: '0x345',
+          error,
+        })
         expect(txEvents.txDispatch).not.toHaveBeenCalledWith('SIGNED', { txId: '0x345' })
       }
     })