From 76b6611966d8ef8d0d3f21f49593bb362edbe477 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=B3vis=20Neto?= Date: Thu, 19 Sep 2024 16:53:58 +0200 Subject: [PATCH] chore: refactor changeThresholdReview screen --- .../ChangeThreshold/ReviewChangeThreshold.tsx | 21 +++--------- .../tx-flow/flows/ChangeThreshold/context.tsx | 5 +++ .../ChangeThreshold.stories.tsx | 33 +++++++++++++++++++ .../ChangeThreshold/ChangeThreshold.test.tsx | 31 +++++++++++++++++ .../ChangeThreshold.test.tsx.snap | 33 +++++++++++++++++++ .../ChangeThreshold/index.tsx | 30 +++++++++++++++++ .../tx/confirmation-views/index.tsx | 21 +++++++++--- 7 files changed, 152 insertions(+), 22 deletions(-) create mode 100644 src/components/tx-flow/flows/ChangeThreshold/context.tsx create mode 100644 src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.stories.tsx create mode 100644 src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.test.tsx create mode 100644 src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap create mode 100644 src/components/tx/confirmation-views/ChangeThreshold/index.tsx diff --git a/src/components/tx-flow/flows/ChangeThreshold/ReviewChangeThreshold.tsx b/src/components/tx-flow/flows/ChangeThreshold/ReviewChangeThreshold.tsx index 78d8958f5f..219ab3ae5c 100644 --- a/src/components/tx-flow/flows/ChangeThreshold/ReviewChangeThreshold.tsx +++ b/src/components/tx-flow/flows/ChangeThreshold/ReviewChangeThreshold.tsx @@ -1,6 +1,5 @@ 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' @@ -8,8 +7,7 @@ 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 ( - -
- - Any transaction will require the confirmation of: - - - - {newThreshold} out of {safe.owners.length} signer(s) - -
- - - - + + + ) } diff --git a/src/components/tx-flow/flows/ChangeThreshold/context.tsx b/src/components/tx-flow/flows/ChangeThreshold/context.tsx new file mode 100644 index 0000000000..037a1fe6b7 --- /dev/null +++ b/src/components/tx-flow/flows/ChangeThreshold/context.tsx @@ -0,0 +1,5 @@ +import { createContext } from 'react' + +export const ChangeThresholdReviewContext = createContext({ + newThreshold: 0, +}) diff --git a/src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.stories.tsx b/src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.stories.tsx new file mode 100644 index 0000000000..694b4a720c --- /dev/null +++ b/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 ( + + + + + + + + ) + }, + ], + + tags: ['autodocs'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = {} diff --git a/src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.test.tsx b/src/components/tx/confirmation-views/ChangeThreshold/ChangeThreshold.test.tsx new file mode 100644 index 0000000000..2ec8500f3a --- /dev/null +++ b/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( + + + , + ) + + expect(container).toMatchSnapshot() + expect(getByLabelText('threshold')).toHaveTextContent('3 out of 1 signer(s)') + }) +}) diff --git a/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap b/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap new file mode 100644 index 0000000000..34ba41b75c --- /dev/null +++ b/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`] = ` +
+
+

+ Any transaction will require the confirmation of: +

+

+ + 3 + + out of + + 1 + signer(s) + +

+
+
+
+
+
+`; diff --git a/src/components/tx/confirmation-views/ChangeThreshold/index.tsx b/src/components/tx/confirmation-views/ChangeThreshold/index.tsx new file mode 100644 index 0000000000..07f25fffcf --- /dev/null +++ b/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 ( + <> +
+ + Any transaction will require the confirmation of: + + + + {newThreshold} out of {safe.owners.length} signer(s) + +
+ + + + + ) +} + +export default ChangeThreshold diff --git a/src/components/tx/confirmation-views/index.tsx b/src/components/tx/confirmation-views/index.tsx index 84fe082b8f..12a46e8cc4 100644 --- a/src/components/tx/confirmation-views/index.tsx +++ b/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 +const getConfirmationViewComponent = ({ txDetails, txInfo }: NarrowConfirmationViewProps) => { + const isChangeThresholdScreen = + txInfo.type === TransactionInfoType.SETTINGS_CHANGE && + txInfo.settingsInfo?.type === SettingsInfoType.CHANGE_THRESHOLD + + if (isChangeThresholdScreen) return + + if (txInfo.type === TransactionInfoType.SETTINGS_CHANGE) + return 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, })