From e4a5f7ad766b04282f074e3510b7f4cc65c334c1 Mon Sep 17 00:00:00 2001
From: katspaugh <381895+katspaugh@users.noreply.github.com>
Date: Tue, 17 Dec 2024 08:11:53 +0100
Subject: [PATCH] Fix: signer vs plural signers

---
 src/components/settings/RequiredConfirmations/index.tsx     | 3 ++-
 .../tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx         | 3 ++-
 .../__snapshots__/SettingsChange.test.tsx.snap              | 2 +-
 .../tx/confirmation-views/SettingsChange/index.tsx          | 6 +++++-
 .../__snapshots__/ConfirmationView.test.tsx.snap            | 2 +-
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/settings/RequiredConfirmations/index.tsx b/src/components/settings/RequiredConfirmations/index.tsx
index 3701aafa2f..88c17bb1a6 100644
--- a/src/components/settings/RequiredConfirmations/index.tsx
+++ b/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 && (
diff --git a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx b/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
index 4b15885928..101eed8bc8 100644
--- a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
+++ b/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} />
diff --git a/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap b/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap
index 68b2eb3519..36f9bd60e2 100644
--- a/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap
+++ b/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>
diff --git a/src/components/tx/confirmation-views/SettingsChange/index.tsx b/src/components/tx/confirmation-views/SettingsChange/index.tsx
index 425d27a8d8..11e1e70111 100644
--- a/src/components/tx/confirmation-views/SettingsChange/index.tsx
+++ b/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>
         </>
diff --git a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
index cdedd844a4..020fbf231e 100644
--- a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
+++ b/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>