mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
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
This commit is contained in:
Etienne Dusseault
GitHub
parent
71a9fe2ed1
commit
46c4cc1966
@ -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
|
||||
},
|
||||
}
|
||||
56
.storybook/initial-states/approval-screens/add-token.js
Normal file
56
.storybook/initial-states/approval-screens/add-token.js
Normal file
@ -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
|
||||
},
|
||||
}
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
38
ui/pages/confirm-add-token/confirm-add-token.stories.js
Normal file
38
ui/pages/confirm-add-token/confirm-add-token.stories.js
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user