fix: highlight confirmed status when signer confirms

package.json

@@ -3,7 +3,7 @@
   "homepage": "https://github.com/safe-global/safe-wallet-web",
   "license": "GPL-3.0",
   "type": "module",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "scripts": {
     "dev": "next dev",
     "start": "next dev",

src/components/transactions/TxSigners/index.tsx

@@ -125,6 +125,7 @@ export const TxSigners = ({ txDetails, txSummary }: TxSignersProps): ReactElemen
 
   const { confirmations, confirmationsRequired, executor } = detailedExecutionInfo
 
+  // TODO: Refactor to use `isConfirmableBy`
   const confirmationsCount = confirmations.length
   const canExecute = wallet?.address ? isExecutable(txSummary, wallet.address, safe) : false
   const confirmationsNeeded = confirmationsRequired - confirmations.length

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

@@ -3,7 +3,7 @@ import CreatedIcon from '@/public/images/messages/created.svg'
 import SignedIcon from '@/public/images/messages/signed.svg'
 import { type TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
 import useSafeInfo from '@/hooks/useSafeInfo'
-import { isMultisigExecutionInfo, isSignableBy } from '@/utils/transaction-guards'
+import { isMultisigExecutionInfo, isSignableBy, isConfirmableBy } from '@/utils/transaction-guards'
 import classnames from 'classnames'
 import css from './styles.module.css'
 import CloseIcon from '@mui/icons-material/Close'
@@ -41,7 +41,7 @@ const TxStatusWidget = ({
   const { executionInfo = undefined } = txSummary || {}
   const { confirmationsSubmitted = 0 } = isMultisigExecutionInfo(executionInfo) ? executionInfo : {}
 
-  const isConfirmedStepIncomplete = step < 1 && !confirmationsSubmitted
+  const canConfirm = txSummary ? isConfirmableBy(txSummary, wallet?.address || '') : safe.threshold === 1
   const canSign = txSummary ? isSignableBy(txSummary, wallet?.address || '') : true
 
   return (
@@ -69,7 +69,7 @@ const TxStatusWidget = ({
             </ListItemText>
           </ListItem>
 
-          <ListItem className={classnames({ [css.incomplete]: isConfirmedStepIncomplete && !isBatch })}>
+          <ListItem className={classnames({ [css.incomplete]: !canConfirm && !isBatch })}>
             <ListItemIcon>
               <SignedIcon />
             </ListItemIcon>

src/utils/transaction-guards.ts

@@ -127,6 +127,17 @@ export const isSignableBy = (txSummary: TransactionSummary, walletAddress: strin
   return !!executionInfo?.missingSigners?.some((address) => address.value === walletAddress)
 }
 
+export const isConfirmableBy = (txSummary: TransactionSummary, walletAddress: string): boolean => {
+  if (!txSummary.executionInfo || !isMultisigExecutionInfo(txSummary.executionInfo)) {
+    return false
+  }
+  const { confirmationsRequired, confirmationsSubmitted } = txSummary.executionInfo
+  return (
+    confirmationsSubmitted >= confirmationsRequired ||
+    (confirmationsSubmitted === confirmationsRequired - 1 && isSignableBy(txSummary, walletAddress))
+  )
+}
+
 export const isExecutable = (txSummary: TransactionSummary, walletAddress: string, safe: SafeInfo): boolean => {
   if (
     !txSummary.executionInfo ||
@@ -135,11 +146,7 @@ export const isExecutable = (txSummary: TransactionSummary, walletAddress: strin
   ) {
     return false
   }
-  const { confirmationsRequired, confirmationsSubmitted } = txSummary.executionInfo
-  return (
-    confirmationsSubmitted >= confirmationsRequired ||
-    (confirmationsSubmitted === confirmationsRequired - 1 && isSignableBy(txSummary, walletAddress))
-  )
+  return isConfirmableBy(txSummary, walletAddress)
 }
 
 // Spending limits