From f741712255b60462321ec99882fcb2cf8efcf723 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Mon, 4 Oct 2021 06:46:18 -0700
Subject: [PATCH] Fixing confirmation screen storybook views (#12271)

---
 .storybook/test-data.js                       | 65 +++++++++++++++++++
 .../confirm-import-token.stories.js           | 22 +++++--
 2 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/.storybook/test-data.js b/.storybook/test-data.js
index 045aa298c..a725361a0 100644
--- a/.storybook/test-data.js
+++ b/.storybook/test-data.js
@@ -14,6 +14,71 @@ const state = {
     url: 'https://metamask.github.io/test-dapp/',
   },
   metamask: {
+    tokenList: {
+      '0x6b175474e89094c44da98b954eedeac495271d0f': {
+        address: '0x6b175474e89094c44da98b954eedeac495271d0f',
+        symbol: 'META',
+        decimals: 18,
+        image: 'metamark.svg',
+        unlisted: false
+      },
+      '0xB8c77482e45F1F44dE1745F52C74426C631bDD52': {
+        address: '0xB8c77482e45F1F44dE1745F52C74426C631bDD52',
+        symbol: '0X',
+        decimals: 18,
+        image: '0x.svg',
+        unlisted: false
+      },
+      '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': {
+        address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
+        symbol: 'AST',
+        decimals: 18,
+        image: 'ast.png',
+        unlisted: false
+      },
+      '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2': {
+        address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2',
+        symbol: 'BAT',
+        decimals: 18,
+        image: 'BAT_icon.svg',
+        unlisted: false
+      },
+      '0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1': {
+        address: '0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1',
+        symbol: 'CVL',
+        decimals: 18,
+        image: 'CVL_token.svg',
+        unlisted: false
+      },
+      '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e': {
+        address: '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e',
+        symbol: 'GLA',
+        decimals: 18,
+        image: 'gladius.svg',
+        unlisted: false
+      },
+      '0x467Bccd9d29f223BcE8043b84E8C8B282827790F': {
+        address: '0x467Bccd9d29f223BcE8043b84E8C8B282827790F',
+        symbol: 'GNO',
+        decimals: 18,
+        image: 'gnosis.svg',
+        unlisted: false
+      },
+      '0xff20817765cb7f73d4bde2e66e067e58d11095c2': {
+        address: '0xff20817765cb7f73d4bde2e66e067e58d11095c2',
+        symbol: 'OMG',
+        decimals: 18,
+        image: 'omg.jpg',
+        unlisted: false
+      },
+      '0x8e870d67f660d95d5be530380d0ec0bd388289e1': {
+        address: '0x8e870d67f660d95d5be530380d0ec0bd388289e1',
+        symbol: 'WED',
+        decimals: 18,
+        image: 'wed.png',
+        unlisted: false
+      },
+    },
     networkDetails: {
       EIPS: {
         1559: true,
diff --git a/ui/pages/confirm-import-token/confirm-import-token.stories.js b/ui/pages/confirm-import-token/confirm-import-token.stories.js
index 87acd2f59..dcc1d1fcc 100644
--- a/ui/pages/confirm-import-token/confirm-import-token.stories.js
+++ b/ui/pages/confirm-import-token/confirm-import-token.stories.js
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 
 import { createBrowserHistory } from 'history';
 import { text } from '@storybook/addon-knobs';
-import { store } from '../../../.storybook/preview';
+import { store, getNewState } from '../../../.storybook/preview';
 import { tokens } from '../../../.storybook/initial-states/approval-screens/add-token';
 import { updateMetamaskState } from '../../store/actions';
 import ConfirmAddToken from '.';
@@ -23,14 +23,28 @@ const PageSet = ({ children }) => {
   useEffect(() => {
     const pendingTokens = { ...pendingTokensState };
     pendingTokens['0x33f90dee07c6e8b9682dd20f73e6c358b2ed0f03'].symbol = symbol;
-    store.dispatch(updateMetamaskState({ pendingTokens }));
-  }, [symbol, pendingTokensState]);
+    store.dispatch(
+      updateMetamaskState(
+        getNewState(state.metamask, {
+          pendingTokens,
+        }),
+      ),
+    );
+  }, [symbol, pendingTokensState, state.metamask]);
 
   return children;
 };
 
 export const AddToken = () => {
-  store.dispatch(updateMetamaskState({ pendingTokens: tokens }));
+  const { metamask: state } = store.getState();
+  store.dispatch(
+    updateMetamaskState(
+      getNewState(state, {
+        pendingTokens: tokens,
+      }),
+    ),
+  );
+
   return (
     <PageSet>
       <ConfirmAddToken history={history} />