feat: split ConfirmPage storybook pages by transaction type (#25283)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

- Separate ConfirmPage stories by signature type
- Fix issue that caused 404 bug in storybook

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?

-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25283?quickstart=1)

## **Related issues**

Fixes: #25052
(continuation)
Related: #25054

## **Manual testing steps**

1. `yarn storybook`
2. Go to
http://localhost:6006/?path=/docs/pages-confirmation-confirmpage-signatures-permit--docs
3. View other stories in relevant signatures directory

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

![CleanShot 2024-06-18 at 22 38
56@2x](https://github.com/MetaMask/metamask-extension/assets/20778143/8e0224cf-141a-4d39-a5fd-7a9146feeab4)

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

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;

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;

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) => <Provider store={store}>{story()}</Provider>,

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;

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(
       <ConfirmInfoRowTypedSignDataV1
-        data={unapprovedTypedSignMsgV1.msgParams.data}
+        data={unapprovedTypedSignMsgV1.msgParams?.data as TypedSignDataV1Type}
       />,
     );
     expect(container).toMatchSnapshot();

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;

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();

ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.stories.tsx

@@ -30,7 +30,7 @@ const Story = {
 export const DefaultStory = (args) => {
   return (
     <ScrollToBottom {...args}>
-      <div style={{ minHeight: '420px;' }}>{args.children}</div>
+      <div style={{ minHeight: '420px' }}>{args.children}</div>
     </ScrollToBottom>
   );
 };

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 `<ConfirmPage>` 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 `<ConfirmPage>` 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 },
+};

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 `<ConfirmPage>` 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 `<ConfirmPage>` 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 `<ConfirmPage>` 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 `<ConfirmPage>` 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 },
+};

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 `<ConfirmPage>` 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';