Update signature stories

MetaMask · Oct 30, 2024 · 5eae3ec · 5eae3ec
1 parent ac15f81
commit 5eae3ec
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 3 deletions.
diff --git a/...ges/confirmations/components/signature-request-header/signature-request-header.stories.js b/...ges/confirmations/components/signature-request-header/signature-request-header.stories.js
@@ -1,13 +1,30 @@
 import React from 'react';
+import { CHAIN_IDS } from '@metamask/transaction-controller';
+import { Provider } from 'react-redux';
+import configureStore from '../../../../store/store';
+import testData from '../../../../../.storybook/test-data';
+import { mockNetworkState } from '../../../../../test/stub/networks';
 import SignatureRequestHeader from './signature-request-header';
 
+const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET;
+
+const store = configureStore({
+  ...testData,
+  metamask: {
+    ...testData.metamask,
+    ...mockNetworkState({ chainId: CHAIN_ID_MOCK }),
+  },
+});
+
 export default {
   title: 'Confirmations/Components/SignatureRequestHeader',
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
   argTypes: {
     txData: { control: 'object' },
   },
   args: {
     txData: {
+      chainId: CHAIN_ID_MOCK,
       msgParams: {
         from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
         data: JSON.stringify({

diff --git a/...confirmations/components/signature-request-original/signature-request-original.stories.js b/...confirmations/components/signature-request-original/signature-request-original.stories.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
+import { CHAIN_IDS } from '@metamask/transaction-controller';
+import { Provider } from 'react-redux';
 import { MESSAGE_TYPE } from '../../../../../shared/constants/app';
 import testData from '../../../../../.storybook/test-data';
+import configureStore from '../../../../store/store';
+import { mockNetworkState } from '../../../../../test/stub/networks';
 import README from './README.mdx';
 import SignatureRequestOriginal from './signature-request-original.component';
 
+const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET;
+
 const [MOCK_PRIMARY_ACCOUNT, MOCK_SECONDARY_ACCOUNT] = Object.values(
   testData.metamask.internalAccounts.accounts,
 );
@@ -41,9 +47,17 @@ const MOCK_SIGN_DATA = JSON.stringify({
   },
 });
 
+const store = configureStore({
+  ...testData,
+  metamask: {
+    ...testData.metamask,
+    ...mockNetworkState({ chainId: CHAIN_ID_MOCK }),
+  },
+});
+
 export default {
   title: 'Confirmations/Components/SignatureRequestOriginal',
-
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
   component: SignatureRequestOriginal,
   parameters: {
     docs: {
@@ -87,6 +101,7 @@ DefaultStory.storyName = 'personal_sign Type';
 
 DefaultStory.args = {
   txData: {
+    chainId: CHAIN_ID_MOCK,
     msgParams: {
       from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
       data: MOCK_SIGN_DATA,
@@ -102,6 +117,7 @@ ETHSignTypedStory.storyName = 'eth_signTypedData Type';
 
 ETHSignTypedStory.args = {
   txData: {
+    chainId: CHAIN_ID_MOCK,
     msgParams: {
       from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
       data: [
@@ -128,6 +144,7 @@ AccountMismatchStory.storyName = 'Account Mismatch warning';
 
 AccountMismatchStory.args = {
   txData: {
+    chainId: CHAIN_ID_MOCK,
     msgParams: {
       from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',
       data: MOCK_SIGN_DATA,

diff --git a/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.stories.js b/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.stories.js
@@ -1,18 +1,37 @@
 import React from 'react';
+import { CHAIN_IDS } from '@metamask/transaction-controller';
+import { Provider } from 'react-redux';
 import testData from '../../../../../.storybook/test-data';
+import configureStore from '../../../../store/store';
+import { mockNetworkState } from '../../../../../test/stub/networks';
 import README from './README.mdx';
 import SignatureRequestSIWE from './signature-request-siwe';
 
+const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET;
+
+const TRANSACTION_DATA_MOCK = {
+  chainId: CHAIN_ID_MOCK,
+};
+
 const {
   internalAccounts: { accounts, selectedAccount },
 } = testData.metamask;
+
 const otherAccount = Object.values(accounts)[1];
 
 const { address: selectedAddress } = accounts[selectedAccount];
 
+const store = configureStore({
+  ...testData,
+  metamask: {
+    ...testData.metamask,
+    ...mockNetworkState({ chainId: CHAIN_ID_MOCK }),
+  },
+});
+
 export default {
   title: 'Confirmations/Components/SignatureRequestSIWE',
-
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
   component: SignatureRequestSIWE,
   parameters: {
     docs: {
@@ -134,6 +153,7 @@ DefaultStory.storyName = 'Default';
 
 DefaultStory.args = {
   txData: {
+    ...TRANSACTION_DATA_MOCK,
     msgParams,
   },
 };
@@ -144,6 +164,7 @@ export const BadDomainStory = (args) => {
 
 BadDomainStory.args = {
   txData: {
+    ...TRANSACTION_DATA_MOCK,
     msgParams: badDomainParams,
   },
 };
@@ -154,6 +175,7 @@ export const BadAddressStory = (args) => {
 
 BadAddressStory.args = {
   txData: {
+    ...TRANSACTION_DATA_MOCK,
     msgParams: badAddressParams,
   },
 };
@@ -164,6 +186,7 @@ export const BadDomainAndAddressStory = (args) => {
 
 BadDomainAndAddressStory.args = {
   txData: {
+    ...TRANSACTION_DATA_MOCK,
     msgParams: badDomainAndAddressParams,
   },
 };
diff --git a/ui/pages/confirmations/components/signature-request/signature-request.stories.js b/ui/pages/confirmations/components/signature-request/signature-request.stories.js
@@ -1,21 +1,25 @@
 import React from 'react';
 import { Provider } from 'react-redux';
+import { CHAIN_IDS } from '@metamask/transaction-controller';
 import configureStore from '../../../../store/store';
 import testData from '../../../../../.storybook/test-data';
+import { mockNetworkState } from '../../../../../test/stub/networks';
 import README from './README.mdx';
 import SignatureRequest from './signature-request';
 
+const CHAIN_ID_MOCK = CHAIN_IDS.MAINNET;
+
 const store = configureStore({
   ...testData,
   metamask: {
     ...testData.metamask,
+    ...mockNetworkState({ chainId: CHAIN_ID_MOCK }),
   },
 });
 
 export default {
   title: 'Confirmations/Components/SignatureRequest',
   decorators: [(story) => <Provider store={store}>{story()}</Provider>],
-
   component: SignatureRequest,
   parameters: {
     docs: {
@@ -35,6 +39,7 @@ DefaultStory.storyName = 'Default';
 
 DefaultStory.args = {
   txData: {
+    chainId: CHAIN_ID_MOCK,
     msgParams: {
       from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e',
       data: JSON.stringify({
@@ -82,6 +87,7 @@ AccountMismatchStory.storyName = 'AccountMismatch';
 AccountMismatchStory.args = {
   ...DefaultStory.args,
   txData: {
+    chainId: CHAIN_ID_MOCK,
     msgParams: {
       ...DefaultStory.args.txData.msgParams,
       from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4',