[ SW-467 ] fix(threshold-info): Display right info in the change thre…

…shold confirmation screen (#4465) * fix(threshold-info): remove 0 information from the threshold confirmation screen * fix(threshold-info): use isChangeThresholdView guard
safe-global · Nov 15, 2024 · 35decc8 · 35decc8
1 parent a7f6ac2
commit 35decc8
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/src/components/tx-flow/flows/ChangeThreshold/context.tsx b/src/components/tx-flow/flows/ChangeThreshold/context.tsx
@@ -1,5 +1,3 @@
 import { createContext } from 'react'
 
-export const ChangeThresholdReviewContext = createContext({
-  newThreshold: 0,
-})
+export const ChangeThresholdReviewContext = createContext<{ newThreshold?: number }>({})
diff --git a/src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.stories.tsx b/src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.stories.tsx
@@ -30,4 +30,6 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {}
+export const Default: Story = {
+  args: {},
+}
diff --git a/src/components/tx/confirmation-views/ChangeThreshold/index.tsx b/src/components/tx/confirmation-views/ChangeThreshold/index.tsx
@@ -5,10 +5,17 @@ import commonCss from '@/components/tx-flow/common/styles.module.css'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { ChangeThresholdReviewContext } from '@/components/tx-flow/flows/ChangeThreshold/context'
 import { ChangeSignerSetupWarning } from '@/features/multichain/components/SignerSetupWarning/ChangeSignerSetupWarning'
+import { type TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
+import { isChangeThresholdView } from '../utils'
 
-function ChangeThreshold() {
+interface ChangeThresholdProps {
+  txDetails?: TransactionDetails
+}
+
+function ChangeThreshold({ txDetails }: ChangeThresholdProps) {
   const { safe } = useSafeInfo()
   const { newThreshold } = useContext(ChangeThresholdReviewContext)
+  const threshold = txDetails && isChangeThresholdView(txDetails.txInfo) && txDetails.txInfo.settingsInfo?.threshold
 
   return (
     <>
@@ -20,7 +27,7 @@ function ChangeThreshold() {
         </Typography>
 
         <Typography aria-label="threshold">
-          <b>{newThreshold}</b> out of <b>{safe.owners.length} signer(s)</b>
+          <b>{newThreshold || threshold}</b> out of <b>{safe.owners.length} signer(s)</b>
         </Typography>
       </div>
       <Box my={1}>

diff --git a/src/components/tx/confirmation-views/index.tsx b/src/components/tx/confirmation-views/index.tsx
@@ -39,7 +39,7 @@ const getConfirmationViewComponent = ({
   txInfo,
   txFlow,
 }: NarrowConfirmationViewProps & { txFlow?: JSX.Element }) => {
-  if (isChangeThresholdView(txInfo)) return <ChangeThreshold />
+  if (isChangeThresholdView(txInfo)) return <ChangeThreshold txDetails={txDetails} />
 
   if (isConfirmBatchView(txFlow)) return <BatchTransactions />
 

diff --git a/src/components/tx/confirmation-views/utils.ts b/src/components/tx/confirmation-views/utils.ts
@@ -1,10 +1,12 @@
-import type { TransactionInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { ChangeThreshold, SettingsChange, TransactionInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { SettingsInfoType, TransactionInfoType } from '@safe-global/safe-gateway-typescript-sdk'
 import { ConfirmBatchFlow } from '@/components/tx-flow/flows'
 
 export const isSettingsChangeView = (txInfo: TransactionInfo) => txInfo.type === TransactionInfoType.SETTINGS_CHANGE
 
 export const isConfirmBatchView = (txFlow?: JSX.Element) => txFlow?.type === ConfirmBatchFlow
 
-export const isChangeThresholdView = (txInfo: TransactionInfo) =>
+export const isChangeThresholdView = (
+  txInfo: TransactionInfo,
+): txInfo is SettingsChange & { settingsInfo: ChangeThreshold } =>
   txInfo.type === TransactionInfoType.SETTINGS_CHANGE && txInfo.settingsInfo?.type === SettingsInfoType.CHANGE_THRESHOLD