diff --git a/test/data/confirmations/contract-interaction.ts b/test/data/confirmations/contract-interaction.ts index 935a95f849db..f6ad5a8633ea 100644 --- a/test/data/confirmations/contract-interaction.ts +++ b/test/data/confirmations/contract-interaction.ts @@ -3,7 +3,10 @@ import { TransactionType, } from '@metamask/transaction-controller'; import { Hex } from '@metamask/utils'; -import { Confirmation } from '../../../ui/pages/confirmations/types/confirm'; +import { + Confirmation, + SignatureRequestType, +} from '../../../ui/pages/confirmations/types/confirm'; export const PAYMASTER_AND_DATA = '0x9d6ac51b972544251fcc0f2902e633e3f9bd3f2900000000000000000000000000000000000000000000000000000000666bfd410000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000003498a76eb88b702e5e52b00fbc16a36baf89ebe3e0dd23170949cffc0a623011383cced660ff67930308c22e5aa746a2d586629ddbd87046a146225bf80e9d6f1b'; @@ -13,153 +16,160 @@ export const CONTRACT_INTERACTION_SENDER_ADDRESS = export const DEPOSIT_METHOD_DATA = '0xd0e30db0'; +export const CHAIN_ID = '0xaa36a7'; + export const genUnapprovedContractInteractionConfirmation = ({ address = CONTRACT_INTERACTION_SENDER_ADDRESS, txData = DEPOSIT_METHOD_DATA, + chainId = CHAIN_ID, }: { address?: Hex; txData?: Hex; -} = {}): Confirmation => ({ - actionId: String(400855682), - chainId: '0xaa36a7', - dappSuggestedGasFees: { - gas: '0xab77', - }, - defaultGasEstimates: { - estimateType: 'medium', - gas: '0xab77', - maxFeePerGas: '0xaa350353', - maxPriorityFeePerGas: '0x59682f00', - }, - gasFeeEstimatesLoaded: true, - history: [ - { - actionId: String(400855682), - chainId: '0xaa36a7', - dappSuggestedGasFees: { - gas: '0xab77', - }, - defaultGasEstimates: { - estimateType: 'medium', - gas: '0xab77', - maxFeePerGas: '0xaa350353', - maxPriorityFeePerGas: '0x59682f00', - }, - id: '1d7c08c0-fe54-11ee-9243-91b1e533746a', - origin: 'https://metamask.github.io', - securityAlertResponse: { - reason: 'loading', - result_type: 'validation_in_progress', - }, - sendFlowHistory: [], - status: TransactionStatus.unapproved, - time: 1713534772044, - txParams: { - data: txData, - from: address, - gas: '0xab77', - maxFeePerGas: '0xaa350353', - maxPriorityFeePerGas: '0x59682f00', - to: '0x88aa6343307ec9a652ccddda3646e62b2f1a5125', - value: '0x3782dace9d900000', - }, - type: TransactionType.contractInteraction, - userEditedGasLimit: false, - userFeeLevel: 'medium', - verifiedOnBlockchain: false, + chainId?: string; +} = {}): Confirmation => + ({ + actionId: String(400855682), + chainId, + dappSuggestedGasFees: { + gas: '0xab77', }, - [ + defaultGasEstimates: { + estimateType: 'medium', + gas: '0xab77', + maxFeePerGas: '0xaa350353', + maxPriorityFeePerGas: '0x59682f00', + }, + gasFeeEstimatesLoaded: true, + history: [ { - note: 'TransactionController#updateSimulationData - Update simulation data', - op: 'add', - path: '/simulationData', - timestamp: 1713534772417, - value: { - nativeBalanceChange: { - difference: '0x3782dace9d900000', - isDecrease: true, - newBalance: '0xcc0ea4fb7ffa87d', - previousBalance: '0x4443c51e558fa87d', - }, - tokenBalanceChanges: [], + actionId: String(400855682), + chainId, + dappSuggestedGasFees: { + gas: '0xab77', }, + defaultGasEstimates: { + estimateType: 'medium', + gas: '0xab77', + maxFeePerGas: '0xaa350353', + maxPriorityFeePerGas: '0x59682f00', + }, + id: '1d7c08c0-fe54-11ee-9243-91b1e533746a', + origin: 'https://metamask.github.io', + securityAlertResponse: { + reason: 'loading', + result_type: 'validation_in_progress', + }, + sendFlowHistory: [], + status: TransactionStatus.unapproved, + time: 1713534772044, + txParams: { + data: txData, + from: address, + gas: '0xab77', + maxFeePerGas: '0xaa350353', + maxPriorityFeePerGas: '0x59682f00', + to: '0x88aa6343307ec9a652ccddda3646e62b2f1a5125', + value: '0x3782dace9d900000', + }, + type: TransactionType.contractInteraction, + userEditedGasLimit: false, + userFeeLevel: 'medium', + verifiedOnBlockchain: false, }, - { - op: 'add', - path: '/gasFeeEstimatesLoaded', - value: true, - }, + [ + { + note: 'TransactionController#updateSimulationData - Update simulation data', + op: 'add', + path: '/simulationData', + timestamp: 1713534772417, + value: { + nativeBalanceChange: { + difference: '0x3782dace9d900000', + isDecrease: true, + newBalance: '0xcc0ea4fb7ffa87d', + previousBalance: '0x4443c51e558fa87d', + }, + tokenBalanceChanges: [], + }, + }, + { + op: 'add', + path: '/gasFeeEstimatesLoaded', + value: true, + }, + ], + [ + { + note: 'TransactionController:updatesecurityAlertResponse - securityAlertResponse updated', + op: 'replace', + path: '/securityAlertResponse/result_type', + timestamp: 1713534773213, + value: 'Benign', + }, + { + op: 'replace', + path: '/securityAlertResponse/reason', + value: '', + }, + { + op: 'add', + path: '/securityAlertResponse/description', + value: '', + }, + { + op: 'add', + path: '/securityAlertResponse/features', + value: [], + }, + { + op: 'add', + path: '/securityAlertResponse/block', + value: 5732063, + }, + ], ], - [ - { - note: 'TransactionController:updatesecurityAlertResponse - securityAlertResponse updated', - op: 'replace', - path: '/securityAlertResponse/result_type', - timestamp: 1713534773213, - value: 'Benign', - }, - { - op: 'replace', - path: '/securityAlertResponse/reason', - value: '', - }, - { - op: 'add', - path: '/securityAlertResponse/description', - value: '', - }, - { - op: 'add', - path: '/securityAlertResponse/features', - value: [], - }, - { - op: 'add', - path: '/securityAlertResponse/block', - value: 5732063, + id: '1d7c08c0-fe54-11ee-9243-91b1e533746a', + origin: 'https://metamask.github.io', + securityAlertResponse: { + features: [], + reason: '', + result_type: 'Benign', + }, + sendFlowHistory: [], + simulationData: { + nativeBalanceChange: { + difference: '0x3782dace9d900000', + isDecrease: true, + newBalance: '0xcc0ea4fb7ffa87d', + previousBalance: '0x4443c51e558fa87d', }, - ], - ], - id: '1d7c08c0-fe54-11ee-9243-91b1e533746a', - origin: 'https://metamask.github.io', - securityAlertResponse: { - features: [], - reason: '', - result_type: 'Benign', - }, - sendFlowHistory: [], - simulationData: { - nativeBalanceChange: { - difference: '0x3782dace9d900000', - isDecrease: true, - newBalance: '0xcc0ea4fb7ffa87d', - previousBalance: '0x4443c51e558fa87d', + tokenBalanceChanges: [], }, - tokenBalanceChanges: [], - }, - status: TransactionStatus.unapproved, - time: 1713534772044, - txParams: { - data: txData, - from: address, - gas: '0xab77', - maxFeePerGas: '0xaa350353', - maxPriorityFeePerGas: '0x59682f00', - to: '0x88aa6343307ec9a652ccddda3646e62b2f1a5125', - value: '0x3782dace9d900000', - }, - type: TransactionType.contractInteraction, - userEditedGasLimit: false, - userFeeLevel: 'medium', - verifiedOnBlockchain: false, -}); + status: TransactionStatus.unapproved, + time: 1713534772044, + txParams: { + data: txData, + from: address, + gas: '0xab77', + maxFeePerGas: '0xaa350353', + maxPriorityFeePerGas: '0x59682f00', + to: '0x88aa6343307ec9a652ccddda3646e62b2f1a5125', + value: '0x3782dace9d900000', + }, + type: TransactionType.contractInteraction, + userEditedGasLimit: false, + userFeeLevel: 'medium', + verifiedOnBlockchain: false, + } as SignatureRequestType); export const genUnapprovedApproveConfirmation = ({ address = CONTRACT_INTERACTION_SENDER_ADDRESS, + chainId = CHAIN_ID, }: { address?: Hex; + chainId?: string; } = {}) => ({ - ...genUnapprovedContractInteractionConfirmation(), + ...genUnapprovedContractInteractionConfirmation({ chainId }), txParams: { from: address, data: '0x095ea7b30000000000000000000000002e0d7e8c45221fca00d74a3609a0f7097035d09b0000000000000000000000000000000000000000000000000000000000000001', diff --git a/test/data/confirmations/helper.ts b/test/data/confirmations/helper.ts index 4144764d3cdf..aab810fb0415 100644 --- a/test/data/confirmations/helper.ts +++ b/test/data/confirmations/helper.ts @@ -1,10 +1,13 @@ import { ApprovalType } from '@metamask/controller-utils'; -import { - TransactionStatus, - TransactionType, -} from '@metamask/transaction-controller'; +import { Confirmation } from '../../../ui/pages/confirmations/types/confirm'; import mockState from '../mock-state.json'; +import { + genUnapprovedApproveConfirmation, + genUnapprovedContractInteractionConfirmation, +} from './contract-interaction'; +import { unapprovedPersonalSignMsg } from './personal_sign'; +import { unapprovedTypedSignMsgV4 } from './typed_sign'; type RootState = { metamask: Record } & Record< string, @@ -18,61 +21,48 @@ export const getMockTypedSignConfirmState = ( ...args, metamask: { ...mockState.metamask, + ...args.metamask, preferences: { + ...mockState.metamask.preferences, redesignedTransactionsEnabled: true, redesignedConfirmationsEnabled: true, isRedesignedConfirmationsDeveloperEnabled: true, }, pendingApprovals: { - '123': { - id: '123', + [unapprovedTypedSignMsgV4.id]: { + id: unapprovedTypedSignMsgV4.id, type: ApprovalType.EthSignTypedData, }, }, unapprovedTypedMessages: { - '123': { - id: '123', - chainId: mockState.metamask.networkConfigurations.goerli.chainId, - type: TransactionType.signTypedData, - status: TransactionStatus.unapproved, - txParams: { from: Object.keys(mockState.metamask.identities)[0] }, - msgParams: { - signatureMethod: 'eth_signTypedData_v4', - }, - }, + [unapprovedTypedSignMsgV4.id]: unapprovedTypedSignMsgV4, }, - ...args.metamask, }, }); -export const getMockContractInteractionConfirmState = ( +export const getMockPersonalSignConfirmState = ( args: RootState = { metamask: {} }, ) => ({ ...mockState, ...args, metamask: { ...mockState.metamask, + ...args.metamask, preferences: { + ...mockState.metamask.preferences, redesignedTransactionsEnabled: true, redesignedConfirmationsEnabled: true, isRedesignedConfirmationsDeveloperEnabled: true, }, pendingApprovals: { - '123': { - id: '123', - type: ApprovalType.Transaction, + [unapprovedPersonalSignMsg.id]: { + id: unapprovedPersonalSignMsg.id, + type: ApprovalType.PersonalSign, }, }, - transactions: [ - { - id: '123', - type: TransactionType.contractInteraction, - chainId: mockState.metamask.networkConfigurations.goerli.chainId, - status: TransactionStatus.unapproved, - txParams: { from: Object.keys(mockState.metamask.identities)[0] }, - }, - ], - ...args.metamask, + unapprovedPersonalMsgs: { + [unapprovedPersonalSignMsg.id]: unapprovedPersonalSignMsg, + }, }, }); @@ -81,11 +71,44 @@ export const getMockConfirmState = (args: RootState = { metamask: {} }) => ({ ...args, metamask: { ...mockState.metamask, + ...args.metamask, preferences: { + ...mockState.metamask.preferences, redesignedTransactionsEnabled: true, redesignedConfirmationsEnabled: true, isRedesignedConfirmationsDeveloperEnabled: true, }, - ...args.metamask, }, }); + +export const getMockConfirmStateForTransaction = ( + transaction: Confirmation, + args: RootState = { metamask: {} }, +) => + getMockConfirmState({ + ...args, + metamask: { + ...args.metamask, + pendingApprovals: { + [transaction.id]: { + id: transaction.id, + type: ApprovalType.Transaction, + }, + }, + transactions: [transaction], + }, + confirm: { + currentConfirmation: transaction, + }, + }); + +export const getMockContractInteractionConfirmState = () => { + const contractInteraction = genUnapprovedContractInteractionConfirmation({ + chainId: mockState.metamask.networkConfigurations.goerli.chainId, + }); + return getMockConfirmStateForTransaction(contractInteraction); +}; + +export const getMockApproveConfirmState = () => { + return getMockConfirmStateForTransaction(genUnapprovedApproveConfirmation()); +}; diff --git a/test/data/confirmations/personal_sign.ts b/test/data/confirmations/personal_sign.ts index 825538c47b09..b0f135efa53d 100644 --- a/test/data/confirmations/personal_sign.ts +++ b/test/data/confirmations/personal_sign.ts @@ -1,7 +1,7 @@ import { SignatureRequestType } from '../../../ui/pages/confirmations/types/confirm'; export const PERSONAL_SIGN_SENDER_ADDRESS = - '0x8eeee1781fd885ff5ddef7789486676961873d12'; + '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'; export const unapprovedPersonalSignMsg = { id: '0050d5b0-c023-11ee-a0cb-3390a510a0ab', diff --git a/test/data/confirmations/typed_sign.ts b/test/data/confirmations/typed_sign.ts index fa0a8b44f417..86067ef1f117 100644 --- a/test/data/confirmations/typed_sign.ts +++ b/test/data/confirmations/typed_sign.ts @@ -1,3 +1,4 @@ +import { MESSAGE_TYPE } from '../../../shared/constants/app'; import { SignatureRequestType } from '../../../ui/pages/confirmations/types/confirm'; export const unapprovedTypedSignMsgV1 = { @@ -131,9 +132,10 @@ export const unapprovedTypedSignMsgV4 = { type: 'eth_signTypedData', securityProviderResponse: null, msgParams: { - from: '0x8eeee1781fd885ff5ddef7789486676961873d12', + from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', data: JSON.stringify(rawMessageV4), origin: 'https://metamask.github.io', + signatureMethod: MESSAGE_TYPE.ETH_SIGN_TYPED_DATA_V4, }, } as SignatureRequestType; @@ -148,7 +150,7 @@ export const orderSignatureMsg = { time: 1722011224974, type: 'eth_signTypedData', msgParams: { - data: '{"types":{"Order":[{"type":"uint8","name":"direction"},{"type":"address","name":"maker"},{"type":"address","name":"taker"},{"type":"uint256","name":"expiry"},{"type":"uint256","name":"nonce"},{"type":"address","name":"erc20Token"},{"type":"uint256","name":"erc20TokenAmount"},{"type":"Fee[]","name":"fees"},{"type":"address","name":"erc721Token"},{"type":"uint256","name":"erc721TokenId"},{"type":"Property[]","name":"erc721TokenProperties"}],"Fee":[{"type":"address","name":"recipient"},{"type":"uint256","name":"amount"},{"type":"bytes","name":"feeData"}],"Property":[{"type":"address","name":"propertyValidator"},{"type":"bytes","name":"propertyData"}],"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}]},"domain":{"name":"ZeroEx","version":"1.0.0","chainId":"0x1","verifyingContract":"0xdef1c0ded9bec7f1a1670819833240f027b25eff"},"primaryType":"Order","message":{"direction":"0","maker":"0x8eeee1781fd885ff5ddef7789486676961873d12","taker":"0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826","expiry":"2524604400","nonce":"100131415900000000000000000000000000000083840314483690155566137712510085002484","erc20Token":"0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2","erc20TokenAmount":"42000000000000","fees":[],"erc721Token":"0x8a90CAb2b38dba80c64b7734e58Ee1dB38B8992e","erc721TokenId":"2516","erc721TokenProperties":[]}}', + data: '{"types":{"Order":[{"type":"uint8","name":"direction"},{"type":"address","name":"maker"},{"type":"address","name":"taker"},{"type":"uint256","name":"expiry"},{"type":"uint256","name":"nonce"},{"type":"address","name":"erc20Token"},{"type":"uint256","name":"erc20TokenAmount"},{"type":"Fee[]","name":"fees"},{"type":"address","name":"erc721Token"},{"type":"uint256","name":"erc721TokenId"},{"type":"Property[]","name":"erc721TokenProperties"}],"Fee":[{"type":"address","name":"recipient"},{"type":"uint256","name":"amount"},{"type":"bytes","name":"feeData"}],"Property":[{"type":"address","name":"propertyValidator"},{"type":"bytes","name":"propertyData"}],"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}]},"domain":{"name":"ZeroEx","version":"1.0.0","chainId":"0x1","verifyingContract":"0xdef1c0ded9bec7f1a1670819833240f027b25eff"},"primaryType":"Order","message":{"direction":"0","maker":"0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc","taker":"0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826","expiry":"2524604400","nonce":"100131415900000000000000000000000000000083840314483690155566137712510085002484","erc20Token":"0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2","erc20TokenAmount":"42000000000000","fees":[],"erc721Token":"0x8a90CAb2b38dba80c64b7734e58Ee1dB38B8992e","erc721TokenId":"2516","erc721TokenProperties":[]}}', from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477', version: 'V4', signatureMethod: 'eth_signTypedData_v4', diff --git a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap index 27ca193ffa81..5c627c06c972 100644 --- a/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/header/__snapshots__/header.test.tsx.snap @@ -133,7 +133,7 @@ exports[`Header should match snapshot with transaction confirmation 1`] = ` style="height: 32px; width: 32px; border-radius: 16px;" >
- Test Account -

+ />

{ }; const { currentConfirmation } = useConfirmContext(); + const { senderAddress: fromAddress, senderName: fromName } = useConfirmationRecipientInfo(); diff --git a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap index fba63e5ab114..b9a49ded127c 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap @@ -280,158 +280,3 @@ exports[` renders component for approve request 1`] = `

`; - -exports[` renders component for approve request 2`] = ` -
-
-
-
-

- Request from -

-
-
- -
-
-
-
-

- metamask.github.io -

-
-
-
-
-
-
-

- Estimated fee -

-
-
- -
-
-
-
-

- 0.004 ETH -

-

- $2.20 -

- -
-
-
-
-

- Speed -

-
-
-
-

- 🦊 Market -

-

- - ~ - 0 sec - -

-
-
-
-
-
-`; - -exports[` renders component for approve request 3`] = `
`; diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.stories.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.stories.tsx index 965207360d3c..13e380350cb4 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.stories.tsx +++ b/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.stories.tsx @@ -1,37 +1,21 @@ import { Meta } from '@storybook/react'; import React from 'react'; import { Provider } from 'react-redux'; -import { - DEPOSIT_METHOD_DATA, - genUnapprovedApproveConfirmation, -} from '../../../../../../../../test/data/confirmations/contract-interaction'; -import mockState from '../../../../../../../../test/data/mock-state.json'; +import { getMockApproveConfirmState } from '../../../../../../../../test/data/confirmations/helper'; import configureStore from '../../../../../../../store/store'; import { ApproveDetails } from './approve-details'; +import { ConfirmContextProvider } from '../../../../../context/confirm'; -const store = configureStore({ - ...mockState, - metamask: { - ...mockState.metamask, - use4ByteResolution: true, - knownMethodData: { - [DEPOSIT_METHOD_DATA]: { - name: 'Deposit', - params: [], - }, - }, - }, - confirm: { - currentConfirmation: genUnapprovedApproveConfirmation(), - }, -}); +const store = configureStore(getMockApproveConfirmState()); const Story = { title: 'Pages/Confirmations/Components/Confirm/Info/Shared/ApproveDetails', component: ApproveDetails, decorators: [ (story: () => Meta) => ( - {story()} + + {story()} + ), ], }; diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.test.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.test.tsx index 146fccb77b2d..72c4f62d4adb 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/approve/approve-details/approve-details.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import mockState from '../../../../../../../../test/data/mock-state.json'; -import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers'; +import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers'; import { ApproveDetails } from './approve-details'; describe('', () => { @@ -11,8 +11,10 @@ describe('', () => { it('renders component for approve details', () => { const state = mockState; const mockStore = configureMockStore(middleware)(state); - const { container } = renderWithProvider(, mockStore); - + const { container } = renderWithConfirmContextProvider( + , + mockStore, + ); expect(container).toMatchSnapshot(); }); }); diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve.stories.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve.stories.tsx index ba46eb6c8f47..7cb7f32af210 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/approve.stories.tsx +++ b/ui/pages/confirmations/components/confirm/info/approve/approve.stories.tsx @@ -1,27 +1,21 @@ import { Meta } from '@storybook/react'; import React from 'react'; import { Provider } from 'react-redux'; -import { genUnapprovedApproveConfirmation } from '../../../../../../../test/data/confirmations/contract-interaction'; -import mockState from '../../../../../../../test/data/mock-state.json'; +import { getMockApproveConfirmState } from '../../../../../../../test/data/confirmations/helper'; import configureStore from '../../../../../../store/store'; +import { ConfirmContextProvider } from '../../../../context/confirm'; import ApproveInfo from './approve'; -const store = configureStore({ - ...mockState, - metamask: { - ...mockState.metamask, - }, - confirm: { - currentConfirmation: genUnapprovedApproveConfirmation(), - }, -}); +const store = configureStore(getMockApproveConfirmState()); const Story = { title: 'Components/App/Confirm/info/ApproveInfo', component: ApproveInfo, decorators: [ (story: () => Meta) => ( - {story()} + + {story()} + ), ], }; diff --git a/ui/pages/confirmations/components/confirm/info/approve/approve.test.tsx b/ui/pages/confirmations/components/confirm/info/approve/approve.test.tsx index 2886e59690c5..75026ecea138 100644 --- a/ui/pages/confirmations/components/confirm/info/approve/approve.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/approve/approve.test.tsx @@ -1,10 +1,10 @@ -import { waitFor } from '@testing-library/react'; import React from 'react'; import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; -import { genUnapprovedApproveConfirmation } from '../../../../../../../test/data/confirmations/contract-interaction'; + +import { getMockApproveConfirmState } from '../../../../../../../test/data/confirmations/helper'; import mockState from '../../../../../../../test/data/mock-state.json'; -import { renderWithProvider } from '../../../../../../../test/lib/render-helpers'; +import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers'; import ApproveInfo from './approve'; jest.mock('../../../../../../store/actions', () => ({ @@ -28,19 +28,15 @@ describe('', () => { const middleware = [thunk]; it('renders component for approve request', async () => { - const state = { - ...mockState, - confirm: { - currentConfirmation: genUnapprovedApproveConfirmation(), - }, - }; + const state = getMockApproveConfirmState(); const mockStore = configureMockStore(middleware)(state); - const { container } = renderWithProvider(, mockStore); + const { container } = renderWithConfirmContextProvider( + , + mockStore, + ); - await waitFor(() => { - expect(container).toMatchSnapshot(); - }); + expect(container).toMatchSnapshot(); }); it('does not render if required data is not present in the transaction', () => { @@ -56,7 +52,10 @@ describe('', () => { }, }; const mockStore = configureMockStore(middleware)(state); - const { container } = renderWithProvider(, mockStore); + const { container } = renderWithConfirmContextProvider( + , + mockStore, + ); expect(container).toMatchSnapshot(); }); }); diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.test.ts index 5c185d98c282..19ccc1ac1976 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.test.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.test.ts @@ -1,15 +1,17 @@ import { act } from 'react-dom/test-utils'; import { - TransactionMeta, TransactionParams, + TransactionStatus, + TransactionType, } from '@metamask/transaction-controller'; + import { TRANSACTION_DATA_UNISWAP, TRANSACTION_DECODE_SOURCIFY, } from '../../../../../../../test/data/confirmations/transaction-decode'; import { decodeTransactionData } from '../../../../../../store/actions'; -import { renderHookWithProvider } from '../../../../../../../test/lib/render-helpers'; -import mockState from '../../../../../../../test/data/mock-state.json'; +import { getMockConfirmStateForTransaction } from '../../../../../../../test/data/confirmations/helper'; +import { renderHookWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers'; import { useDecodedTransactionData } from './useDecodedTransactionData'; jest.mock('../../../../../../store/actions', () => ({ @@ -18,24 +20,13 @@ jest.mock('../../../../../../store/actions', () => ({ })); const CONTRACT_ADDRESS_MOCK = '0x123'; -const CHAIN_ID_MOCK = '0x1'; - -function buildState({ - currentConfirmation, -}: { - currentConfirmation?: Partial; -} = {}) { - return { - ...mockState, - confirm: { - currentConfirmation, - }, - }; -} +const CHAIN_ID_MOCK = '0x5'; -async function runHook(stateOptions?: Parameters[0]) { - const state = buildState(stateOptions); - const response = renderHookWithProvider(useDecodedTransactionData, state); +async function runHook(state: Record) { + const response = renderHookWithConfirmContextProvider( + useDecodedTransactionData, + state, + ); await act(() => { // Ignore @@ -48,15 +39,18 @@ describe('useDecodedTransactionData', () => { const decodeTransactionDataMock = jest.mocked(decodeTransactionData); it('returns undefined if no transaction data', async () => { - const result = await runHook({ - currentConfirmation: { + const result = await runHook( + getMockConfirmStateForTransaction({ + id: '123', chainId: CHAIN_ID_MOCK, + type: TransactionType.contractInteraction, + status: TransactionStatus.unapproved, txParams: { data: '', to: CONTRACT_ADDRESS_MOCK, } as TransactionParams, - }, - }); + }), + ); expect(result).toStrictEqual({ pending: false, value: undefined }); }); @@ -64,15 +58,18 @@ describe('useDecodedTransactionData', () => { it('returns the decoded data', async () => { decodeTransactionDataMock.mockResolvedValue(TRANSACTION_DECODE_SOURCIFY); - const result = await runHook({ - currentConfirmation: { + const result = await runHook( + getMockConfirmStateForTransaction({ + id: '123', chainId: CHAIN_ID_MOCK, + type: TransactionType.contractInteraction, + status: TransactionStatus.unapproved, txParams: { data: TRANSACTION_DATA_UNISWAP, to: CONTRACT_ADDRESS_MOCK, } as TransactionParams, - }, - }); + }), + ); expect(result).toMatchInlineSnapshot(` { diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.ts b/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.ts index 56b5ec0cb283..139826d626a1 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/useDecodedTransactionData.ts @@ -1,20 +1,20 @@ import { Hex } from '@metamask/utils'; -import { useSelector } from 'react-redux'; import { TransactionMeta } from '@metamask/transaction-controller'; + import { AsyncResult, useAsyncResult, } from '../../../../../../hooks/useAsyncResult'; import { decodeTransactionData } from '../../../../../../store/actions'; import { DecodedTransactionDataResponse } from '../../../../../../../shared/types/transaction-decode'; -import { currentConfirmationSelector } from '../../../../selectors'; +import { useConfirmContext } from '../../../../context/confirm'; export function useDecodedTransactionData(): AsyncResult< DecodedTransactionDataResponse | undefined > { - const currentConfirmation = useSelector(currentConfirmationSelector) as - | TransactionMeta - | undefined; + const { currentConfirmation } = useConfirmContext() as unknown as { + currentConfirmation: TransactionMeta | undefined; + }; const chainId = currentConfirmation?.chainId as Hex; const contractAddress = currentConfirmation?.txParams?.to as Hex; diff --git a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.stories.tsx b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.stories.tsx index 59a317f1623d..8654400a0bfa 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.stories.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.stories.tsx @@ -1,37 +1,21 @@ import { Meta } from '@storybook/react'; import React from 'react'; import { Provider } from 'react-redux'; -import { - DEPOSIT_METHOD_DATA, - genUnapprovedContractInteractionConfirmation, -} from '../../../../../../../../test/data/confirmations/contract-interaction'; -import mockState from '../../../../../../../../test/data/mock-state.json'; +import { getMockContractInteractionConfirmState } from '../../../../../../../../test/data/confirmations/helper'; import configureStore from '../../../../../../../store/store'; +import { ConfirmContextProvider } from '../../../../../context/confirm'; import { AdvancedDetails } from './advanced-details'; -const store = configureStore({ - ...mockState, - metamask: { - ...mockState.metamask, - use4ByteResolution: true, - knownMethodData: { - [DEPOSIT_METHOD_DATA]: { - name: 'Deposit', - params: [], - }, - }, - }, - confirm: { - currentConfirmation: genUnapprovedContractInteractionConfirmation(), - }, -}); +const store = configureStore(getMockContractInteractionConfirmState()); const Story = { title: 'Pages/Confirmations/Components/Confirm/Info/Shared/AdvancedDetails', component: AdvancedDetails, decorators: [ (story: () => Meta) => ( - {story()} + + {story()} + ), ], }; diff --git a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.test.tsx b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.test.tsx index 3a39bbadb9d9..a63954e156fd 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/advanced-details/advanced-details.test.tsx @@ -3,7 +3,7 @@ import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../../test/data/confirmations/contract-interaction'; import mockState from '../../../../../../../../test/data/mock-state.json'; -import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers'; +import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers'; import { AdvancedDetails } from './advanced-details'; describe('', () => { @@ -12,7 +12,10 @@ describe('', () => { it('does not render component for advanced transaction details', () => { const state = { ...mockState, confirm: { currentConfirmation: null } }; const mockStore = configureMockStore(middleware)(state); - const { container } = renderWithProvider(, mockStore); + const { container } = renderWithConfirmContextProvider( + , + mockStore, + ); expect(container).toMatchSnapshot(); }); @@ -31,7 +34,10 @@ describe('', () => { }, }; const mockStore = configureMockStore(middleware)(state); - const { container } = renderWithProvider(, mockStore); + const { container } = renderWithConfirmContextProvider( + , + mockStore, + ); expect(container).toMatchSnapshot(); }); diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.stories.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.stories.tsx index b037ac0a4d83..091185ae23f3 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.stories.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.stories.tsx @@ -1,7 +1,8 @@ import { Meta } from '@storybook/react'; import React from 'react'; import { Provider } from 'react-redux'; -import { TransactionData } from './transaction-data'; +import { TransactionMeta } from '@metamask/transaction-controller'; + import { genUnapprovedContractInteractionConfirmation } from '../../../../../../../../test/data/confirmations/contract-interaction'; import { CONTRACT_ADDRESS_FOUR_BYTE, @@ -9,8 +10,10 @@ import { CONTRACT_ADDRESS_UNISWAP, } from '../../../../../../../../test/data/confirmations/transaction-decode'; import configureStore from '../../../../../../../store/store'; -import mockState from '../../../../../../../../test/data/mock-state.json'; -import { TransactionMeta } from '@metamask/transaction-controller'; +import { getMockConfirmStateForTransaction } from '../../../../../../../../test/data/confirmations/helper'; +import { Confirmation } from '../../../../../types/confirm'; +import { TransactionData } from './transaction-data'; +import { ConfirmContextProvider } from '../../../../../context/confirm'; const DATA_RAW_MOCK = '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef'; @@ -29,18 +32,15 @@ function getStore(transactionData?: string, to?: string) { }, }; - return configureStore({ - metamask: { - ...mockState.metamask, - preferences: { - ...mockState.metamask.preferences, - petnamesEnabled: true, + return configureStore( + getMockConfirmStateForTransaction(confirmation as Confirmation, { + metamask: { + preferences: { + petnamesEnabled: true, + }, }, - }, - confirm: { - currentConfirmation: confirmation, - }, - }); + }), + ); } function Template({ @@ -58,7 +58,9 @@ function Template({ padding: 30, }} > - + + +
); @@ -70,18 +72,15 @@ export default { decorators: [(story: () => Meta) => story()], }; -export const UniswapStory = () => - Template({ to: CONTRACT_ADDRESS_UNISWAP }); +export const UniswapStory = () => Template({ to: CONTRACT_ADDRESS_UNISWAP }); UniswapStory.storyName = 'Uniswap'; -export const SourcifyStory = () => - Template({ to: CONTRACT_ADDRESS_SOURCIFY }); +export const SourcifyStory = () => Template({ to: CONTRACT_ADDRESS_SOURCIFY }); SourcifyStory.storyName = 'Sourcify'; -export const FourByteStory = () => - Template({ to: CONTRACT_ADDRESS_FOUR_BYTE }); +export const FourByteStory = () => Template({ to: CONTRACT_ADDRESS_FOUR_BYTE }); FourByteStory.storyName = 'Four Byte'; diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.test.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.test.tsx index 704d16eae7f8..5a793508c744 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.test.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.test.tsx @@ -1,14 +1,20 @@ import React from 'react'; import configureMockStore from 'redux-mock-store'; +import { + TransactionStatus, + TransactionType, +} from '@metamask/transaction-controller'; import { act } from '@testing-library/react'; -import mockState from '../../../../../../../../test/data/mock-state.json'; -import { renderWithProvider } from '../../../../../../../../test/lib/render-helpers'; + +import { getMockConfirmStateForTransaction } from '../../../../../../../../test/data/confirmations/helper'; +import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers'; import { decodeTransactionData } from '../../../../../../../store/actions'; import { TRANSACTION_DECODE_FOUR_BYTE, TRANSACTION_DECODE_NESTED, TRANSACTION_DECODE_UNISWAP, } from '../../../../../../../../test/data/confirmations/transaction-decode'; +import { Confirmation } from '../../../../../types/confirm'; import { TransactionData } from './transaction-data'; const DATA_MOCK = '0x123456'; @@ -19,19 +25,21 @@ jest.mock('../../../../../../../store/actions', () => ({ })); async function renderTransactionData(transactionData: string) { - const state = { - ...mockState, - confirm: { - currentConfirmation: { - txParams: { - data: transactionData, - }, - }, + const state = getMockConfirmStateForTransaction({ + id: '123', + chainId: '0x5', + type: TransactionType.contractInteraction, + status: TransactionStatus.unapproved, + txParams: { + data: transactionData, }, - }; + } as Confirmation); const mockStore = configureMockStore()(state); - const { container } = renderWithProvider(, mockStore); + const { container } = renderWithConfirmContextProvider( + , + mockStore, + ); await act(() => { // Ignore diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.tsx b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.tsx index dd020b389482..fb6018c86c56 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/transaction-data.tsx @@ -1,11 +1,9 @@ import React from 'react'; -import { useSelector } from 'react-redux'; import { TransactionMeta } from '@metamask/transaction-controller'; import { hexStripZeros } from '@ethersproject/bytes'; import _ from 'lodash'; import { Hex } from '@metamask/utils'; import { useDecodedTransactionData } from '../../hooks/useDecodedTransactionData'; -import { currentConfirmationSelector } from '../../../../../selectors'; import { ConfirmInfoSection } from '../../../../../../../components/app/confirm/info/row/section'; import { ConfirmInfoRow, @@ -28,11 +26,12 @@ import { DecodedTransactionDataSource, } from '../../../../../../../../shared/types/transaction-decode'; import { UniswapPathPool } from '../../../../../../../../app/scripts/lib/transaction/decode/uniswap'; +import { useConfirmContext } from '../../../../../context/confirm'; export const TransactionData = () => { - const currentConfirmation = useSelector(currentConfirmationSelector) as - | TransactionMeta - | undefined; + const { currentConfirmation } = useConfirmContext() as unknown as { + currentConfirmation: TransactionMeta | undefined; + }; const transactionData = currentConfirmation?.txParams?.data as Hex; const decodeResponse = useDecodedTransactionData(); diff --git a/ui/pages/confirmations/components/confirm/nav/__snapshots__/nav.test.tsx.snap b/ui/pages/confirmations/components/confirm/nav/__snapshots__/nav.test.tsx.snap index 15d081f80047..48cafff5e80a 100644 --- a/ui/pages/confirmations/components/confirm/nav/__snapshots__/nav.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/nav/__snapshots__/nav.test.tsx.snap @@ -11,8 +11,9 @@ exports[`ConfirmNav should match snapshot 1`] = ` >