Fix: signer vs plural signers (#4675)

Author: katspaugh

src/components/settings/RequiredConfirmations/index.tsx

@@ -5,6 +5,7 @@ import { ChangeThresholdFlow } from '@/components/tx-flow/flows'
 import CheckWallet from '@/components/common/CheckWallet'
 import { useContext } from 'react'
 import { TxModalContext } from '@/components/tx-flow'
+import { maybePlural } from '@/utils/formatters'
 
 export const RequiredConfirmation = ({ threshold, owners }: { threshold: number; owners: number }) => {
   const { setTxFlow } = useContext(TxModalContext)
@@ -43,7 +44,7 @@ export const RequiredConfirmation = ({ threshold, owners }: { threshold: number;
               pr: 2,
             }}
           >
-            <b>{threshold}</b> out of <b>{owners}</b> signers.
+            <b>{threshold}</b> out of <b>{owners}</b> signer{maybePlural(owners)}.
           </Typography>
 
           {owners > 1 && (

src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx

@@ -14,6 +14,7 @@ import EthHashInfo from '@/components/common/EthHashInfo'
 
 import commonCss from '@/components/tx-flow/common/styles.module.css'
 import { ChangeSignerSetupWarning } from '@/features/multichain/components/SignerSetupWarning/ChangeSignerSetupWarning'
+import { maybePlural } from '@/utils/formatters'
 
 export const ReviewRemoveOwner = ({ params }: { params: RemoveOwnerFlowProps }): ReactElement => {
   const addressBook = useAddressBook()
@@ -55,7 +56,7 @@ export const ReviewRemoveOwner = ({ params }: { params: RemoveOwnerFlowProps }):
           Any transaction requires the confirmation of:
         </Typography>
         <Typography>
-          <b>{threshold}</b> out of <b>{newOwnerLength}</b> signers
+          <b>{threshold}</b> out of <b>{newOwnerLength}</b> signer{maybePlural(newOwnerLength)}
         </Typography>
       </Box>
       <Divider className={commonCss.nestedDivider} />

src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap

@@ -331,7 +331,7 @@ exports[`SettingsChange should display the SettingsChange component with owner d
        
       <b>
         1
-         signers
+         signer
       </b>
     </p>
   </div>

src/components/tx/confirmation-views/SettingsChange/index.tsx

@@ -9,6 +9,7 @@ import { SettingsInfoType, type SettingsChange } from '@safe-global/safe-gateway
 import { ChangeSignerSetupWarning } from '@/features/multichain/components/SignerSetupWarning/ChangeSignerSetupWarning'
 import { useContext } from 'react'
 import { SettingsChangeContext } from '@/components/tx-flow/flows/AddOwner/context'
+import { maybePlural } from '@/utils/formatters'
 
 export interface SettingsChangeProps extends NarrowConfirmationViewProps {
   txInfo: SettingsChange
@@ -22,6 +23,7 @@ const SettingsChange: React.FC<SettingsChangeProps> = ({ txInfo: { settingsInfo
 
   const shouldShowChangeSigner = 'owner' in settingsInfo || 'newOwner' in params
   const hasNewOwner = 'newOwner' in params
+  const newSignersLength = safe.owners.length + ('removedOwner' in settingsInfo ? 0 : 1)
 
   return (
     <>
@@ -54,7 +56,9 @@ const SettingsChange: React.FC<SettingsChangeProps> = ({ txInfo: { settingsInfo
             <Typography variant="body2">Any transaction requires the confirmation of:</Typography>
             <Typography>
               <b>{settingsInfo.threshold}</b> out of{' '}
-              <b>{safe.owners.length + ('removedOwner' in settingsInfo ? 0 : 1)} signers</b>
+              <b>
+                {newSignersLength} signer{maybePlural(newSignersLength)}
+              </b>
             </Typography>
           </Box>
         </>

src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap

@@ -123,7 +123,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
        
       <b>
         1
-         signers
+         signer
       </b>
     </p>
   </div>