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
2024-12-22 17:33:23 +01:00 · 2021-08-17 00:33:46 -05:00 · 2021-08-17 00:33:46 -05:00 · 46c4cc1966
commit 46c4cc1966
parent 71a9fe2ed1
6 changed files with 220 additions and 14 deletions
--- a/.storybook/initial-states/approval-screens/add-suggested-token.js
+++ b/.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
+    },
+  }
--- a/.storybook/initial-states/approval-screens/add-token.js
+++ b/.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
+    },
+  }
--- a/package.json
+++ b/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:build": "build-storybook -c .storybook -o storybook-build --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 -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",
--- a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
+++ b/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>
+  );
+};
--- a/ui/pages/confirm-add-token/confirm-add-token.stories.js
+++ b/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>
+  );
+};
--- a/ui/pages/swaps/dropdown-search-list/dropdown-search-list.stories.js
+++ b/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,