chore: refactor changeThresholdReview screen (#4212)

src/components/tx-flow/flows/ChangeThreshold/ReviewChangeThreshold.tsx

@@ -1,15 +1,13 @@
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { useContext, useEffect } from 'react'
-import { Box, Divider, Typography } from '@mui/material'
 
 import { createUpdateThresholdTx } from '@/services/tx/tx-sender'
 import { SETTINGS_EVENTS, trackEvent } from '@/services/analytics'
 import SignOrExecuteForm from '@/components/tx/SignOrExecuteForm'
 import { SafeTxContext } from '@/components/tx-flow/SafeTxProvider'
 import { ChangeThresholdFlowFieldNames } from '@/components/tx-flow/flows/ChangeThreshold'
 import type { ChangeThresholdFlowProps } from '@/components/tx-flow/flows/ChangeThreshold'
-
-import commonCss from '@/components/tx-flow/common/styles.module.css'
+import { ChangeThresholdReviewContext } from './context'
 
 const ReviewChangeThreshold = ({ params }: { params: ChangeThresholdFlowProps }) => {
   const { safe } = useSafeInfo()
@@ -27,20 +25,9 @@ const ReviewChangeThreshold = ({ params }: { params: ChangeThresholdFlowProps })
   }
 
   return (
-    <SignOrExecuteForm onSubmit={onChangeThreshold}>
-      <div>
-        <Typography variant="body2" color="text.secondary" mb={0.5}>
-          Any transaction will require the confirmation of:
-        </Typography>
-
-        <Typography>
-          <b>{newThreshold}</b> out of <b>{safe.owners.length} signer(s)</b>
-        </Typography>
-      </div>
-      <Box my={1}>
-        <Divider className={commonCss.nestedDivider} />
-      </Box>
-    </SignOrExecuteForm>
+    <ChangeThresholdReviewContext.Provider value={{ newThreshold }}>
+      <SignOrExecuteForm onSubmit={onChangeThreshold} />
+    </ChangeThresholdReviewContext.Provider>
   )
 }
 

src/components/tx-flow/flows/ChangeThreshold/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+export const ChangeThresholdReviewContext = createContext({
+  newThreshold: 0,
+})

src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Paper } from '@mui/material'
+import { StoreDecorator } from '@/stories/storeDecorator'
+import ChangeThreshold from './index'
+import { ChangeThresholdReviewContext } from '@/components/tx-flow/flows/ChangeThreshold/context'
+
+const meta = {
+  component: ChangeThreshold,
+  parameters: {
+    layout: 'centered',
+    newThreshold: 1,
+  },
+  decorators: [
+    (Story, { parameters }) => {
+      return (
+        <StoreDecorator initialState={{}}>
+          <ChangeThresholdReviewContext.Provider value={{ newThreshold: parameters.newThreshold }}>
+            <Paper sx={{ padding: 2 }}>
+              <Story />
+            </Paper>
+          </ChangeThresholdReviewContext.Provider>
+        </StoreDecorator>
+      )
+    },
+  ],
+
+  tags: ['autodocs'],
+} satisfies Meta<typeof ChangeThreshold>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.test.tsx

@@ -0,0 +1,31 @@
+import { render } from '@/tests/test-utils'
+import ChangeThreshold from '.'
+import { ChangeThresholdReviewContext } from '@/components/tx-flow/flows/ChangeThreshold/context'
+import * as useSafeInfo from '@/hooks/useSafeInfo'
+import { extendedSafeInfoBuilder } from '@/tests/builders/safe'
+
+const extendedSafeInfo = extendedSafeInfoBuilder().build()
+
+jest.spyOn(useSafeInfo, 'default').mockImplementation(() => ({
+  safeAddress: 'eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6',
+  safe: {
+    ...extendedSafeInfo,
+    owners: [extendedSafeInfo.owners[0]],
+  },
+  safeError: undefined,
+  safeLoading: false,
+  safeLoaded: true,
+}))
+
+describe('ChangeThreshold', () => {
+  it('should display the ChangeThreshold component with the new threshold range', () => {
+    const { container, getByLabelText } = render(
+      <ChangeThresholdReviewContext.Provider value={{ newThreshold: 3 }}>
+        <ChangeThreshold />
+      </ChangeThresholdReviewContext.Provider>,
+    )
+
+    expect(container).toMatchSnapshot()
+    expect(getByLabelText('threshold')).toHaveTextContent('3 out of 1 signer(s)')
+  })
+})

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChangeThreshold should display the ChangeThreshold component with the new threshold range 1`] = `
+<div>
+  <div>
+    <p
+      class="MuiTypography-root MuiTypography-body2 css-1bcmoup-MuiTypography-root"
+    >
+      Any transaction will require the confirmation of:
+    </p>
+    <p
+      aria-label="threshold"
+      class="MuiTypography-root MuiTypography-body1 css-1pqjor9-MuiTypography-root"
+    >
+      <b>
+        3
+      </b>
+       out of 
+      <b>
+        1
+         signer(s)
+      </b>
+    </p>
+  </div>
+  <div
+    class="MuiBox-root css-1xlzx9v"
+  >
+    <hr
+      class="MuiDivider-root MuiDivider-fullWidth nestedDivider css-da8pia-MuiDivider-root"
+    />
+  </div>
+</div>
+`;

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

@@ -0,0 +1,30 @@
+import { Box, Divider, Typography } from '@mui/material'
+import React, { useContext } from 'react'
+
+import commonCss from '@/components/tx-flow/common/styles.module.css'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import { ChangeThresholdReviewContext } from '@/components/tx-flow/flows/ChangeThreshold/context'
+
+function ChangeThreshold() {
+  const { safe } = useSafeInfo()
+  const { newThreshold } = useContext(ChangeThresholdReviewContext)
+
+  return (
+    <>
+      <div>
+        <Typography variant="body2" color="text.secondary" mb={0.5}>
+          Any transaction will require the confirmation of:
+        </Typography>
+
+        <Typography aria-label="threshold">
+          <b>{newThreshold}</b> out of <b>{safe.owners.length} signer(s)</b>
+        </Typography>
+      </div>
+      <Box my={1}>
+        <Divider className={commonCss.nestedDivider} />
+      </Box>
+    </>
+  )
+}
+
+export default ChangeThreshold

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

@@ -1,4 +1,8 @@
-import { TransactionInfoType, type TransactionDetails } from '@safe-global/safe-gateway-typescript-sdk'
+import {
+  SettingsInfoType,
+  TransactionInfoType,
+  type TransactionDetails,
+} from '@safe-global/safe-gateway-typescript-sdk'
 import DecodedTx from '../DecodedTx'
 import ConfirmationOrder from '../ConfirmationOrder'
 import useDecodeTx from '@/hooks/useDecodeTx'
@@ -8,6 +12,7 @@ import { useMemo } from 'react'
 import TxData from '@/components/transactions/TxDetails/TxData'
 import type { NarrowConfirmationViewProps } from './types'
 import SettingsChange from './SettingsChange'
+import ChangeThreshold from './ChangeThreshold'
 
 type ConfirmationViewProps = {
   txDetails?: TransactionDetails
@@ -19,9 +24,15 @@ type ConfirmationViewProps = {
   showMethodCall?: boolean
 }
 
-const getConfirmationViewComponent = (txType: TransactionInfoType, props: NarrowConfirmationViewProps) => {
-  if (txType === TransactionInfoType.SETTINGS_CHANGE)
-    return <SettingsChange txDetails={props.txDetails} txInfo={props.txInfo as SettingsChange} />
+const getConfirmationViewComponent = ({ txDetails, txInfo }: NarrowConfirmationViewProps) => {
+  const isChangeThresholdScreen =
+    txInfo.type === TransactionInfoType.SETTINGS_CHANGE &&
+    txInfo.settingsInfo?.type === SettingsInfoType.CHANGE_THRESHOLD
+
+  if (isChangeThresholdScreen) return <ChangeThreshold />
+
+  if (txInfo.type === TransactionInfoType.SETTINGS_CHANGE)
+    return <SettingsChange txDetails={txDetails} txInfo={txInfo as SettingsChange} />
 
   return null
 }
@@ -33,7 +44,7 @@ const ConfirmationView = (props: ConfirmationViewProps) => {
   const ConfirmationViewComponent = useMemo(
     () =>
       props.txDetails
-        ? getConfirmationViewComponent(props.txDetails.txInfo.type, {
+        ? getConfirmationViewComponent({
             txDetails: props.txDetails,
             txInfo: props.txDetails.txInfo,
           })