Add confirm-add-suggested-token & confirm-add-token components to Storybook (#11175)

* add suggessted token

* lintfix

* lintfix

* silence use effect warning

* download token icons and use paths to avoid web urls

* lintifx

* Add confirm-add-token component to Storyboard (#11195)

* create story for add token

* change code

* add confirm add token story

* lintfix

* Update confirm-add-token.component.js

* Update confirm-add-token.component.js

* different token list for confirm add token

* lintfix

* Update confirm-add-suggested-token.component.js

* remove bnb png

* remove redundant images and fix storybook image path

.storybook/initial-states/approval-screens/add-suggested-token.js

@@ -0,0 +1,65 @@
+export const suggestedTokens = {
+    "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
+    },
+  }

.storybook/initial-states/approval-screens/add-token.js

@@ -0,0 +1,56 @@
+export const tokens = {
+    "0x33f90dee07c6e8b9682dd20f73e6c358b2ed0f03": {
+      "address": "0x33f90dee07c6e8b9682dd20f73e6c358b2ed0f03",
+      "symbol": "TRDT",
+      "decimals": 18,
+      "unlisted": false
+    },
+    "0x39013f961c378f02c2b82a6e1d31e9812786fd9d": {
+      "address": "0x39013f961c378f02c2b82a6e1d31e9812786fd9d",
+      "symbol": "SMS",
+      "decimals": 18,
+      "unlisted": false
+    },
+    "0x78b7fada55a64dd895d8c8c35779dd8b67fa8a05": {
+      "address": "0x78b7fada55a64dd895d8c8c35779dd8b67fa8a05",
+      "symbol": "ATL",
+      "decimals": 18,
+      "unlisted": false
+    },
+    "0xfd8971d5e8e1740ce2d0a84095fca4de729d0c16": {
+      "address": "0xfd8971d5e8e1740ce2d0a84095fca4de729d0c16",
+      "symbol": "ZLA",
+      "decimals": 18,
+      "unlisted": false
+    },
+    "0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1": {
+      "address": "0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1",
+      "symbol": "BTT",
+      "decimals": 18,
+      "unlisted": false
+    },
+    "0x7a07e1a0c2514d51132183ecfea2a880ec3b7648": {
+      "address": "0x7a07e1a0c2514d51132183ecfea2a880ec3b7648",
+      "symbol": "IXE",
+      "decimals": 18,
+      "unlisted": false
+    },
+    "0x467Bccd9d29f223BcE8043b84E8C8B282827790F": {
+      "address": "0x467Bccd9d29f223BcE8043b84E8C8B282827790F",
+      "symbol": "TEL",
+      "decimals": 18,
+      "unlisted": false
+    },
+    "0xff20817765cb7f73d4bde2e66e067e58d11095c2": {
+      "address": "0xff20817765cb7f73d4bde2e66e067e58d11095c2",
+      "symbol": "AMP",
+      "decimals": 18,
+      "unlisted": false
+    },
+    "0x15bda08c3afbf5955d6e9b235fd55a1fd0dbc829": {
+      "address": "0x15bda08c3afbf5955d6e9b235fd55a1fd0dbc829",
+      "symbol": "APC",
+      "decimals": 18,
+      "unlisted": false
+    },
+  }

package.json

@@ -60,8 +60,8 @@
     "devtools:redux": "remotedev --hostname=localhost --port=8000",
     "start:dev": "concurrently -k -n build,react,redux yarn:start yarn:devtools:react yarn:devtools:redux",
     "announce": "node development/announcer.js",
-    "storybook": "start-storybook -p 6006 -c .storybook --static-dir ./app ./storybook/images",
+    "storybook": "start-storybook -p 6006 -c .storybook -s ./app,./.storybook/images",
-    "storybook:build": "build-storybook -c .storybook -o storybook-build --static-dir ./app ./storybook/images",
+    "storybook:build": "build-storybook -c .storybook -o storybook-build -s ./app,./.storybook/images",
     "storybook:deploy": "storybook-to-ghpages --existing-output-dir storybook-build --remote storybook --branch master",
     "update-changelog": "auto-changelog update",
     "generate:migration": "./development/generate-migration.sh",

ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js

@@ -0,0 +1,47 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect } from 'react';
+import { text } from '@storybook/addon-knobs';
+import { store } from '../../../.storybook/preview';
+import { suggestedTokens } from '../../../.storybook/initial-states/approval-screens/add-suggested-token';
+import { updateMetamaskState } from '../../store/actions';
+import ConfirmAddSuggestedToken from '.';
+
+export default {
+  title: 'Confirmation Screens',
+};
+
+const PageSet = ({ children }) => {
+  const symbol = text('symbol', 'META');
+  const image = text('Icon URL', 'metamark.svg');
+
+  const state = store.getState();
+  const suggestedTokensState = state.metamask.suggestedTokens;
+
+  useEffect(() => {
+    suggestedTokensState[
+      '0x6b175474e89094c44da98b954eedeac495271d0f'
+    ].symbol = symbol;
+    store.dispatch(
+      updateMetamaskState({ suggestedTokens: suggestedTokensState }),
+    );
+  }, [symbol, suggestedTokensState]);
+  useEffect(() => {
+    suggestedTokensState[
+      '0x6b175474e89094c44da98b954eedeac495271d0f'
+    ].image = image;
+    store.dispatch(
+      updateMetamaskState({ suggestedTokens: suggestedTokensState }),
+    );
+  }, [image, suggestedTokensState]);
+
+  return children;
+};
+
+export const AddSuggestedToken = () => {
+  store.dispatch(updateMetamaskState({ suggestedTokens, pendingTokens: {} }));
+  return (
+    <PageSet>
+      <ConfirmAddSuggestedToken />
+    </PageSet>
+  );
+};

ui/pages/confirm-add-token/confirm-add-token.stories.js

@@ -0,0 +1,38 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect } from 'react';
+
+import { createBrowserHistory } from 'history';
+import { text } from '@storybook/addon-knobs';
+import { store } from '../../../.storybook/preview';
+import { tokens } from '../../../.storybook/initial-states/approval-screens/add-token';
+import { updateMetamaskState } from '../../store/actions';
+import ConfirmAddToken from '.';
+
+export default {
+  title: 'Confirmation Screens',
+};
+
+const history = createBrowserHistory();
+
+const PageSet = ({ children }) => {
+  const symbol = text('symbol', 'TRDT');
+  const state = store.getState();
+  const pendingTokensState = state.metamask.pendingTokens;
+  // only change the first token in the list
+  useEffect(() => {
+    const pendingTokens = { ...pendingTokensState };
+    pendingTokens['0x33f90dee07c6e8b9682dd20f73e6c358b2ed0f03'].symbol = symbol;
+    store.dispatch(updateMetamaskState({ pendingTokens }));
+  }, [symbol, pendingTokensState]);
+
+  return children;
+};
+
+export const AddToken = () => {
+  store.dispatch(updateMetamaskState({ pendingTokens: tokens }));
+  return (
+    <PageSet>
+      <ConfirmAddToken history={history} />
+    </PageSet>
+  );
+};

ui/pages/swaps/dropdown-search-list/dropdown-search-list.stories.js

@@ -5,7 +5,7 @@ const tokens = [
   {
     primaryLabel: 'MetaMark (META)',
     name: 'MetaMark',
-    iconUrl: '.storybook/images/metamark.svg',
+    iconUrl: 'metamark.svg',
     erc20: true,
     decimals: 18,
     symbol: 'META',
@@ -14,7 +14,7 @@ const tokens = [
   {
     primaryLabel: '0x (ZRX)',
     name: '0x',
-    iconUrl: '.storybook/images/0x.svg',
+    iconUrl: '0x.svg',
     erc20: true,
     symbol: 'ZRX',
     decimals: 18,
@@ -23,7 +23,7 @@ const tokens = [
   {
     primaryLabel: 'AirSwap Token (AST)',
     name: 'AirSwap Token',
-    iconUrl: '.storybook/images/AST.png',
+    iconUrl: 'AST.png',
     erc20: true,
     symbol: 'AST',
     decimals: 4,
@@ -32,7 +32,7 @@ const tokens = [
   {
     primaryLabel: 'Basic Attention Token (BAT)',
     name: 'Basic Attention Token',
-    iconUrl: '.storybook/images/BAT_icon.svg',
+    iconUrl: 'BAT_icon.svg',
     erc20: true,
     symbol: 'BAT',
     decimals: 18,
@@ -41,7 +41,7 @@ const tokens = [
   {
     primaryLabel: 'Civil Token (CVL)',
     name: 'Civil Token',
-    iconUrl: '.storybook/images/CVL_token.svg',
+    iconUrl: 'CVL_token.svg',
     erc20: true,
     symbol: 'CVL',
     decimals: 18,
@@ -50,7 +50,7 @@ const tokens = [
   {
     primaryLabel: 'Gladius (GLA)',
     name: 'Gladius',
-    iconUrl: '.storybook/images/gladius.svg',
+    iconUrl: 'gladius.svg',
     erc20: true,
     symbol: 'GLA',
     decimals: 8,
@@ -59,7 +59,7 @@ const tokens = [
   {
     primaryLabel: 'Gnosis Token (GNO)',
     name: 'Gnosis Token',
-    iconUrl: '.storybook/images/gnosis.svg',
+    iconUrl: 'gnosis.svg',
     erc20: true,
     symbol: 'GNO',
     decimals: 18,
@@ -68,7 +68,7 @@ const tokens = [
   {
     primaryLabel: 'OmiseGO (OMG)',
     name: 'OmiseGO',
-    iconUrl: '.storybook/images/omg.jpg',
+    iconUrl: 'omg.jpg',
     erc20: true,
     symbol: 'OMG',
     decimals: 18,
@@ -77,7 +77,7 @@ const tokens = [
   {
     primaryLabel: 'Sai Stablecoin v1.0 (SAI)',
     name: 'Sai Stablecoin v1.0',
-    iconUrl: '.storybook/images/sai.svg',
+    iconUrl: 'sai.svg',
     erc20: true,
     symbol: 'SAI',
     decimals: 18,
@@ -86,7 +86,7 @@ const tokens = [
   {
     primaryLabel: 'Tether USD (USDT)',
     name: 'Tether USD',
-    iconUrl: '.storybook/images/tether_usd.png',
+    iconUrl: 'tether_usd.png',
     erc20: true,
     symbol: 'USDT',
     decimals: 6,
@@ -95,7 +95,7 @@ const tokens = [
   {
     primaryLabel: 'WednesdayCoin (WED)',
     name: 'WednesdayCoin',
-    iconUrl: '.storybook/images/wed.png',
+    iconUrl: 'wed.png',
     erc20: true,
     symbol: 'WED',
     decimals: 18,
@@ -104,7 +104,7 @@ const tokens = [
   {
     primaryLabel: 'Wrapped BTC (WBTC)',
     name: 'Wrapped BTC',
-    iconUrl: '.storybook/images/wbtc.png',
+    iconUrl: 'wbtc.png',
     erc20: true,
     symbol: 'WBTC',
     decimals: 8,