diff --git a/.storybook/initial-states/approval-screens/add-suggested-token.js b/.storybook/initial-states/approval-screens/add-suggested-token.js new file mode 100644 index 000000000..0b623e3f7 --- /dev/null +++ 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 + }, + } \ No newline at end of file diff --git a/.storybook/initial-states/approval-screens/add-token.js b/.storybook/initial-states/approval-screens/add-token.js new file mode 100644 index 000000000..c5a7699f1 --- /dev/null +++ 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 + }, + } \ No newline at end of file diff --git a/package.json b/package.json index 916483197..fa516b1d0 100644 --- 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", diff --git 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 new file mode 100644 index 000000000..ce7979472 --- /dev/null +++ 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 ( + + + + ); +}; diff --git a/ui/pages/confirm-add-token/confirm-add-token.stories.js b/ui/pages/confirm-add-token/confirm-add-token.stories.js new file mode 100644 index 000000000..e46e3ab37 --- /dev/null +++ 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 ( + + + + ); +}; diff --git a/ui/pages/swaps/dropdown-search-list/dropdown-search-list.stories.js b/ui/pages/swaps/dropdown-search-list/dropdown-search-list.stories.js index dacbc21a6..0dd6ac3b9 100644 --- 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,