diff --git a/test/data/confirmations/personal_sign.ts b/test/data/confirmations/personal_sign.ts
index c6f7907eccc4..bac5b3f9838a 100644
--- a/test/data/confirmations/personal_sign.ts
+++ b/test/data/confirmations/personal_sign.ts
@@ -1,3 +1,5 @@
+import { SignatureRequestType } from '../../../ui/pages/confirmations/types/confirm';
+
export const PERSONAL_SIGN_SENDER_ADDRESS =
'0x8eeee1781fd885ff5ddef7789486676961873d12';
@@ -13,7 +15,7 @@ export const unapprovedPersonalSignMsg = {
origin: 'https://metamask.github.io',
siwe: { isSIWEMessage: false, parsedMessage: null },
},
-};
+} as SignatureRequestType;
export const signatureRequestSIWE = {
id: '210ca3b0-1ccb-11ef-b096-89c4d726ebb5',
@@ -45,7 +47,7 @@ export const signatureRequestSIWE = {
},
},
},
-};
+} as SignatureRequestType;
export const SignatureRequestSIWEWithResources = {
id: '210ca3b0-1ccb-11ef-b096-89c4d726ebb5',
@@ -83,4 +85,4 @@ export const SignatureRequestSIWEWithResources = {
},
},
},
-};
+} as SignatureRequestType;
diff --git a/test/data/confirmations/typed_sign.ts b/test/data/confirmations/typed_sign.ts
index e368d74234f1..61e6fa68713d 100644
--- a/test/data/confirmations/typed_sign.ts
+++ b/test/data/confirmations/typed_sign.ts
@@ -1,3 +1,5 @@
+import { SignatureRequestType } from '../../../ui/pages/confirmations/types/confirm';
+
export const unapprovedTypedSignMsgV1 = {
id: '82ab2400-e2c6-11ee-9627-73cc88f00492',
securityAlertResponse: {
@@ -19,7 +21,7 @@ export const unapprovedTypedSignMsgV1 = {
version: 'V1',
origin: 'https://metamask.github.io',
},
-};
+} as SignatureRequestType;
const rawMessageV3 = {
types: {
@@ -71,7 +73,7 @@ export const unapprovedTypedSignMsgV3 = {
signatureMethod: 'eth_signTypedData_v3',
origin: 'https://metamask.github.io',
},
-};
+} as SignatureRequestType;
export const rawMessageV4 = {
domain: {
@@ -132,7 +134,7 @@ export const unapprovedTypedSignMsgV4 = {
data: JSON.stringify(rawMessageV4),
origin: 'https://metamask.github.io',
},
-};
+} as SignatureRequestType;
export const permitSignatureMsg = {
id: '0b1787a0-1c44-11ef-b70d-e7064bd7b659',
@@ -151,4 +153,4 @@ export const permitSignatureMsg = {
signatureMethod: 'eth_signTypedData_v4',
origin: 'https://metamask.github.io',
},
-};
+} as SignatureRequestType;
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.stories.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.stories.tsx
index b1eaa95424d2..6d8f83a02658 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.stories.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/typed-sign-v1.stories.tsx
@@ -18,7 +18,7 @@ const store = configureStore({
});
const Story = {
- title: 'Components/App/Confirm/info/TypedSignInfoV1',
+ title: 'Components/App/Confirm/Info/TypedSignInfoV1',
component: TypedSignInfoV1,
decorators: [
(story: () => any) => {story()},
diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.stories.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.stories.tsx
index 94f9487c510f..b6a7fb5183a1 100644
--- a/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.stories.tsx
+++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.stories.tsx
@@ -31,7 +31,7 @@ export const DefaultStory = ({ variant, data }) => (
DefaultStory.storyName = 'Default';
DefaultStory.args = {
- data: unapprovedTypedSignMsgV1.msgParams.data,
+ data: unapprovedTypedSignMsgV1.msgParams?.data,
};
export default ConfirmInfoRowTypedSignDataStory;
diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.test.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.test.tsx
index 293df91810bd..9563b5523f39 100644
--- a/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.test.tsx
+++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data-v1/typedSignDataV1.test.tsx
@@ -1,14 +1,14 @@
import React from 'react';
import { render } from '@testing-library/react';
-
import { unapprovedTypedSignMsgV1 } from '../../../../../../../test/data/confirmations/typed_sign';
+import { TypedSignDataV1Type } from '../../../../types/confirm';
import { ConfirmInfoRowTypedSignDataV1 } from './typedSignDataV1';
describe('ConfirmInfoRowTypedSignData', () => {
it('should match snapshot', () => {
const { container } = render(
,
);
expect(container).toMatchSnapshot();
diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.stories.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.stories.tsx
index 4db4f6c38fbc..1e7977ee6ab9 100644
--- a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.stories.tsx
+++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.stories.tsx
@@ -28,7 +28,7 @@ export const DefaultStory = ({ variant, data }) => (
DefaultStory.storyName = 'Default';
DefaultStory.args = {
- data: unapprovedTypedSignMsgV4.msgParams.data,
+ data: unapprovedTypedSignMsgV4.msgParams?.data,
};
export default ConfirmInfoRowTypedSignDataStory;
diff --git a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.test.tsx b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.test.tsx
index fbe31564d19e..436edbecd3e0 100644
--- a/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.test.tsx
+++ b/ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.test.tsx
@@ -10,7 +10,7 @@ import { ConfirmInfoRowTypedSignData } from './typedSignData';
describe('ConfirmInfoRowTypedSignData', () => {
const renderWithComponentData = (
- data: string = unapprovedTypedSignMsgV4.msgParams.data,
+ data = unapprovedTypedSignMsgV4.msgParams?.data as string,
) => {
const store = configureStore(mockState);
@@ -22,7 +22,7 @@ describe('ConfirmInfoRowTypedSignData', () => {
it('should match snapshot', () => {
const { container } = renderWithComponentData(
- unapprovedTypedSignMsgV4.msgParams.data,
+ unapprovedTypedSignMsgV4.msgParams?.data as string,
);
expect(container).toMatchSnapshot();
});
@@ -35,16 +35,15 @@ describe('ConfirmInfoRowTypedSignData', () => {
it('should not render data whose type is not defined', () => {
// TODO: Replace `any` with type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- (rawMessageV4.message as any).do_not_display = 'one';
- // TODO: Replace `any` with type
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (rawMessageV4.message as any).do_not_display_2 = {
+ const mockRawMessageV4 = { ...rawMessageV4 } as any;
+
+ mockRawMessageV4.message.do_not_display = 'one';
+ mockRawMessageV4.message.do_not_display_2 = {
do_not_display: 'two',
};
- unapprovedTypedSignMsgV4.msgParams.data = JSON.stringify(rawMessageV4);
- const { queryByText } = renderWithComponentData(
- unapprovedTypedSignMsgV4.msgParams.data,
- );
+
+ const mockV4MsgParamsData = JSON.stringify(mockRawMessageV4);
+ const { queryByText } = renderWithComponentData(mockV4MsgParamsData);
expect(queryByText('do_not_display')).not.toBeInTheDocument();
expect(queryByText('one')).not.toBeInTheDocument();
diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.stories.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.stories.tsx
index 86e4a3fcf917..44da5f9d5044 100644
--- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.stories.tsx
+++ b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.stories.tsx
@@ -30,7 +30,7 @@ const Story = {
export const DefaultStory = (args) => {
return (
- {args.children}
+ {args.children}
);
};
diff --git a/ui/pages/confirmations/confirm/confirm.stories.tsx b/ui/pages/confirmations/confirm/confirm.stories.tsx
deleted file mode 100644
index 3e428eba997f..000000000000
--- a/ui/pages/confirmations/confirm/confirm.stories.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import { cloneDeep } from 'lodash';
-import { unapprovedPersonalSignMsg, signatureRequestSIWE } from '../../../../test/data/confirmations/personal_sign';
-import { unapprovedTypedSignMsgV1, unapprovedTypedSignMsgV4, permitSignatureMsg } from '../../../../test/data/confirmations/typed_sign';
-import mockState from '../../../../test/data/mock-state.json';
-import configureStore from '../../../store/store';
-import ConfirmPage from './confirm';
-
-/**
- * @note When we extend this storybook page to support more confirmation types,
- * consider creating a new storybook pages.
- */
-const ConfirmPageStory = {
- title: 'Pages/Confirm/ConfirmPage',
- decorators: [(story) =>
{story()}
],
-}
-
-const ARGS_SIGNATURE = {
- msgParams: { ...unapprovedPersonalSignMsg.msgParams },
-}
-
-const ARG_TYPES_SIGNATURE = {
- msgParams: {
- control: 'object',
- description: '(non-param) overrides currentConfirmation.msgParams',
- },
-}
-
-function SignatureStoryTemplate(args, confirmation) {
- const mockConfirmation = cloneDeep(confirmation);
- mockConfirmation.msgParams = args.msgParams;
-
- const store = configureStore({
- confirm: {
- currentConfirmation: mockConfirmation,
- },
- metamask: { ...mockState.metamask },
- });
-
- return ;
-}
-
-export const PersonalSignStory = (args) => {
- return SignatureStoryTemplate(args, unapprovedPersonalSignMsg);
-};
-
-PersonalSignStory.storyName = 'Personal Sign';
-PersonalSignStory.argTypes = ARG_TYPES_SIGNATURE;
-PersonalSignStory.args = ARGS_SIGNATURE;
-
-export const SignInWithEthereumSIWEStory = (args) => {
- return SignatureStoryTemplate(args, signatureRequestSIWE);
-};
-
-SignInWithEthereumSIWEStory.storyName = 'Sign-in With Ethereum (SIWE)';
-SignInWithEthereumSIWEStory.argTypes = ARG_TYPES_SIGNATURE;
-SignInWithEthereumSIWEStory.args = {
- ...ARGS_SIGNATURE,
- msgParams: signatureRequestSIWE.msgParams,
-};
-
-export const SignTypedDataStory = (args) => {
- return SignatureStoryTemplate(args, unapprovedTypedSignMsgV1);
-};
-
-SignTypedDataStory.storyName = 'SignTypedData';
-SignTypedDataStory.argTypes = ARG_TYPES_SIGNATURE;
-SignTypedDataStory.args = {
- ...ARGS_SIGNATURE,
- msgParams: unapprovedTypedSignMsgV1.msgParams,
-};
-
-export const PermitStory = (args) => {
- return SignatureStoryTemplate(args, permitSignatureMsg);
-};
-
-PermitStory.storyName = 'SignTypedData Permit';
-PermitStory.argTypes = ARG_TYPES_SIGNATURE;
-PermitStory.args = {
- ...ARGS_SIGNATURE,
- msgParams: permitSignatureMsg.msgParams,
-};
-
-export const SignTypedDataV4Story = (args) => {
- return SignatureStoryTemplate(args, unapprovedTypedSignMsgV4);
-};
-
-SignTypedDataV4Story.storyName = 'SignTypedData V4';
-SignTypedDataV4Story.argTypes = ARG_TYPES_SIGNATURE;
-SignTypedDataV4Story.args = {
- ...ARGS_SIGNATURE,
- msgParams: unapprovedTypedSignMsgV4.msgParams,
-};
-
-export default ConfirmPageStory;
diff --git a/ui/pages/confirmations/confirm/stories/signatures/personal-sign.stories.tsx b/ui/pages/confirmations/confirm/stories/signatures/personal-sign.stories.tsx
new file mode 100644
index 000000000000..c43a54c5baee
--- /dev/null
+++ b/ui/pages/confirmations/confirm/stories/signatures/personal-sign.stories.tsx
@@ -0,0 +1,37 @@
+import ConfirmPage from '../../confirm'
+import {
+ ARG_TYPES_SIGNATURE,
+ CONFIRM_PAGE_DECORATOR,
+ SignatureStoryTemplate
+} from './utils';
+import { signatureRequestSIWE, unapprovedPersonalSignMsg } from '../../../../../../test/data/confirmations/personal_sign';
+
+/**
+ * The `` that's displayed when the current confirmation is a `personal_sign` signature.
+ */
+export default {
+ title: 'Pages/Confirmations/Confirm/Signatures/PersonalSign',
+ component: ConfirmPage,
+ decorators: CONFIRM_PAGE_DECORATOR,
+ argTypes: ARG_TYPES_SIGNATURE,
+};
+
+export const DefaultStory = (args) => {
+ return SignatureStoryTemplate(args, unapprovedPersonalSignMsg);
+}
+DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+ msgParams: { ...unapprovedPersonalSignMsg.msgParams },
+};
+
+/**
+ * The `` that's displayed when the current confirmation is a `personal_sign` signature
+ * that parses as a valid Sign-in-With-Ethereum (SIWE)(EIP-4361) signature.
+ */
+export const SignInWithEthereumStory = (args) => {
+ return SignatureStoryTemplate(args, signatureRequestSIWE);
+}
+SignInWithEthereumStory.storyName = 'Sign-in With Ethereum (SIWE)';
+SignInWithEthereumStory.args = {
+ msgParams: { ...signatureRequestSIWE.msgParams },
+};
\ No newline at end of file
diff --git a/ui/pages/confirmations/confirm/stories/signatures/sign-typed-data-v3-or-v4.stories.tsx b/ui/pages/confirmations/confirm/stories/signatures/sign-typed-data-v3-or-v4.stories.tsx
new file mode 100644
index 000000000000..1c8fe17d9c46
--- /dev/null
+++ b/ui/pages/confirmations/confirm/stories/signatures/sign-typed-data-v3-or-v4.stories.tsx
@@ -0,0 +1,52 @@
+import ConfirmPage from '../../confirm'
+import {
+ ARG_TYPES_SIGNATURE,
+ CONFIRM_PAGE_DECORATOR,
+ SignatureStoryTemplate
+} from './utils';
+import { permitSignatureMsg, unapprovedTypedSignMsgV3, unapprovedTypedSignMsgV4 } from '../../../../../../test/data/confirmations/typed_sign';
+
+/**
+ * The `` that's displayed when the current confirmation is either a version
+ * "V3" or "V4" `eth_signTypedData` signature. The default example is version "V4".
+ */
+export default {
+ title: 'Pages/Confirmations/Confirm/Signatures/SignedTypedDataV3orV4',
+ component: ConfirmPage,
+ decorators: CONFIRM_PAGE_DECORATOR,
+ argTypes: ARG_TYPES_SIGNATURE,
+};
+
+/**
+ * The `` that's displayed when the current confirmation is either a
+ * "V3" or "V4" `eth_signTypedData` signature that parses as a valid permit signature.
+ */
+export const PermitStory = (args) => {
+ return SignatureStoryTemplate(args, permitSignatureMsg);
+};
+PermitStory.storyName = 'Permit';
+PermitStory.args = {
+ msgParams: { ...permitSignatureMsg.msgParams },
+};
+
+/**
+ * The `` that's displayed when the current confirmation is a "V3" `eth_signTypedData` signature.
+ */
+export const V3Story = (args) => {
+ return SignatureStoryTemplate(args, unapprovedTypedSignMsgV4);
+}
+V3Story.storyName = 'V3';
+V3Story.args = {
+ msgParams: { ...unapprovedTypedSignMsgV3.msgParams },
+};
+
+/**
+ * The `` that's displayed when the current confirmation is a "V4" `eth_signTypedData` signature.
+ */
+export const DefaultStory = (args) => {
+ return SignatureStoryTemplate(args, unapprovedTypedSignMsgV4);
+}
+DefaultStory.storyName = 'V4';
+DefaultStory.args = {
+ msgParams: { ...unapprovedTypedSignMsgV4.msgParams },
+};
diff --git a/ui/pages/confirmations/confirm/stories/signatures/sign-typed-data.stories.tsx b/ui/pages/confirmations/confirm/stories/signatures/sign-typed-data.stories.tsx
new file mode 100644
index 000000000000..3268fcde5a8b
--- /dev/null
+++ b/ui/pages/confirmations/confirm/stories/signatures/sign-typed-data.stories.tsx
@@ -0,0 +1,25 @@
+import ConfirmPage from '../../confirm'
+import {
+ ARG_TYPES_SIGNATURE,
+ CONFIRM_PAGE_DECORATOR,
+ SignatureStoryTemplate
+} from './utils';
+import { unapprovedTypedSignMsgV1 } from '../../../../../../test/data/confirmations/typed_sign';
+
+/**
+ * The `` that's displayed when the current confirmation is a version "V1" `eth_signTypedData` signature.
+ */
+export default {
+ title: 'Pages/Confirmations/Confirm/Signatures/SignTypedDataV1',
+ component: ConfirmPage,
+ decorators: CONFIRM_PAGE_DECORATOR,
+ argTypes: ARG_TYPES_SIGNATURE,
+ args: {
+ msgParams: { ...unapprovedTypedSignMsgV1.msgParams },
+ },
+};
+
+export const DefaultStory = (args) => {
+ return SignatureStoryTemplate(args, unapprovedTypedSignMsgV1);
+}
+DefaultStory.storyName = 'Default';
\ No newline at end of file
diff --git a/ui/pages/confirmations/confirm/stories/signatures/utils.tsx b/ui/pages/confirmations/confirm/stories/signatures/utils.tsx
new file mode 100644
index 000000000000..918f30820abb
--- /dev/null
+++ b/ui/pages/confirmations/confirm/stories/signatures/utils.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { cloneDeep } from 'lodash';
+import mockState from '../../../../../../test/data/mock-state.json';
+import configureStore from '../../../../../store/store';
+import ConfirmPage from '../../confirm';
+import { SignatureRequestType } from '../../../types/confirm';
+
+export const ARG_TYPES_SIGNATURE = {
+ msgParams: {
+ control: 'object',
+ description: '(non-param) overrides currentConfirmation.msgParams',
+ },
+};
+
+export const CONFIRM_PAGE_DECORATOR = [
+ (story: () => React.ReactFragment) => {
+ return {story()}
;
+ },
+];
+
+export function SignatureStoryTemplate(
+ args: { msgParams: SignatureRequestType['msgParams'] },
+ confirmation: SignatureRequestType,
+): JSX.Element {
+ const mockConfirmation = cloneDeep(confirmation) as SignatureRequestType;
+ mockConfirmation.msgParams = args.msgParams;
+
+ const store = configureStore({
+ confirm: {
+ currentConfirmation: mockConfirmation,
+ },
+ metamask: { ...mockState.metamask },
+ });
+
+ return (
+
+ {/* Adding the MemoryRouter and Route is a workaround to bypass a 404 error in storybook that
+ is caused when the 'ui/pages/confirmations/hooks/syncConfirmPath.ts' hook calls
+ history.replace. To avoid history.replace, we can provide a param id. */}
+
+ } />
+
+
+ );
+}
diff --git a/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js b/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js
index a9975ad71f18..372b715f7fb5 100644
--- a/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js
+++ b/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
import ConfirmationNetworkSwitch from '.';
export default {
- title: 'Pages/Confirmation/Components/ConfirmationNetworkSwitch',
+ title: 'Pages/Confirmations/Components/ConfirmationNetworkSwitch',
argTypes: {
toNetwork: {
controls: 'object',