mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +01:00
knob to control (#18635)
* knob to control * Update confirm-add-suggested-token.stories.js * fix eslint * Update ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update confirm-add-suggested-token.stories.js * updaes * Updating to use redux provider * lint fix --------- Co-authored-by: George Marshall <georgewrmarshall@gmail.com> Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
parent
5892acab81
commit
52e91058a0
@ -2,82 +2,82 @@ export const suggestedAssets = [
|
||||
{
|
||||
asset: {
|
||||
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
|
||||
symbol: 'META',
|
||||
symbol: 'ETH',
|
||||
decimals: 18,
|
||||
image: 'metamark.svg',
|
||||
unlisted: false
|
||||
image: './images/eth_logo.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
asset: {
|
||||
'address': '0xB8c77482e45F1F44dE1745F52C74426C631bDD52',
|
||||
'symbol': '0X',
|
||||
'decimals': 18,
|
||||
'image': '0x.svg',
|
||||
'unlisted': false
|
||||
address: '0xB8c77482e45F1F44dE1745F52C74426C631bDD52',
|
||||
symbol: '0X',
|
||||
decimals: 18,
|
||||
image: '0x.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
asset: {
|
||||
'address': '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
|
||||
'symbol': 'AST',
|
||||
'decimals': 18,
|
||||
'image': 'ast.png',
|
||||
'unlisted': false
|
||||
address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
|
||||
symbol: 'AST',
|
||||
decimals: 18,
|
||||
image: 'ast.png',
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
asset: {
|
||||
'address': '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2',
|
||||
'symbol': 'BAT',
|
||||
'decimals': 18,
|
||||
'image': 'BAT_icon.svg',
|
||||
'unlisted': false
|
||||
address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2',
|
||||
symbol: 'BAT',
|
||||
decimals: 18,
|
||||
image: 'BAT_icon.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
asset: {
|
||||
'address': '0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1',
|
||||
'symbol': 'CVL',
|
||||
'decimals': 18,
|
||||
'image': 'CVL_token.svg',
|
||||
'unlisted': false
|
||||
address: '0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1',
|
||||
symbol: 'CVL',
|
||||
decimals: 18,
|
||||
image: 'CVL_token.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
asset: {
|
||||
'address': '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e',
|
||||
'symbol': 'GLA',
|
||||
'decimals': 18,
|
||||
'image': 'gladius.svg',
|
||||
'unlisted': false
|
||||
address: '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e',
|
||||
symbol: 'GLA',
|
||||
decimals: 18,
|
||||
image: 'gladius.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
asset: {
|
||||
'address': '0x467Bccd9d29f223BcE8043b84E8C8B282827790F',
|
||||
'symbol': 'GNO',
|
||||
'decimals': 18,
|
||||
'image': 'gnosis.svg',
|
||||
'unlisted': false
|
||||
address: '0x467Bccd9d29f223BcE8043b84E8C8B282827790F',
|
||||
symbol: 'GNO',
|
||||
decimals: 18,
|
||||
image: 'gnosis.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
asset: {
|
||||
'address': '0xff20817765cb7f73d4bde2e66e067e58d11095c2',
|
||||
'symbol': 'OMG',
|
||||
'decimals': 18,
|
||||
'image': 'omg.jpg',
|
||||
'unlisted': false
|
||||
address: '0xff20817765cb7f73d4bde2e66e067e58d11095c2',
|
||||
symbol: 'OMG',
|
||||
decimals: 18,
|
||||
image: 'omg.jpg',
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
asset: {
|
||||
'address': '0x8e870d67f660d95d5be530380d0ec0bd388289e1',
|
||||
'symbol': 'WED',
|
||||
'decimals': 18,
|
||||
'image': 'wed.png',
|
||||
'unlisted': false
|
||||
address: '0x8e870d67f660d95d5be530380d0ec0bd388289e1',
|
||||
symbol: 'WED',
|
||||
decimals: 18,
|
||||
image: 'wed.png',
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
]
|
||||
];
|
||||
|
@ -172,9 +172,9 @@ const state = {
|
||||
},
|
||||
'0x6b175474e89094c44da98b954eedeac495271d0f': {
|
||||
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
|
||||
symbol: 'META',
|
||||
symbol: 'ETH',
|
||||
decimals: 18,
|
||||
image: 'metamark.svg',
|
||||
image: './images/eth_logo.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
'0xB8c77482e45F1F44dE1745F52C74426C631bDD52': {
|
||||
|
@ -1,107 +1,65 @@
|
||||
/* eslint-disable react/prop-types */
|
||||
import React, { useEffect } from 'react';
|
||||
import { text } from '@storybook/addon-knobs';
|
||||
import { store, getNewState } from '../../../.storybook/preview';
|
||||
import React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { suggestedAssets as mockSuggestedAssets } from '../../../.storybook/initial-states/approval-screens/add-suggested-token';
|
||||
import { updateMetamaskState } from '../../store/actions';
|
||||
|
||||
import configureStore from '../../store/store';
|
||||
|
||||
import mockState from '../../../.storybook/test-data';
|
||||
|
||||
import ConfirmAddSuggestedToken from '.';
|
||||
|
||||
const store = configureStore({
|
||||
metamask: {
|
||||
...mockState.metamask,
|
||||
suggestedAssets: [...mockSuggestedAssets],
|
||||
tokens: [],
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
title: 'Pages/ConfirmAddSuggestedToken',
|
||||
|
||||
argTypes: {
|
||||
tokens: {
|
||||
control: 'array',
|
||||
table: { category: 'Data' },
|
||||
},
|
||||
suggestedAssets: {
|
||||
control: 'array',
|
||||
table: { category: 'Data' },
|
||||
},
|
||||
},
|
||||
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
|
||||
};
|
||||
|
||||
const { metamask: state } = store.getState();
|
||||
|
||||
const PageSet = ({ children, suggestedAssets, tokens }) => {
|
||||
const symbol = text('symbol', 'META');
|
||||
const image = text('Icon URL', 'metamark.svg');
|
||||
|
||||
useEffect(() => {
|
||||
if (!suggestedAssets?.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
suggestedAssets[0].asset.image = image;
|
||||
suggestedAssets[0].asset.symbol = symbol;
|
||||
|
||||
store.dispatch(
|
||||
updateMetamaskState(
|
||||
getNewState(state, {
|
||||
suggestedAssets,
|
||||
}),
|
||||
),
|
||||
);
|
||||
}, [image, suggestedAssets, symbol]);
|
||||
|
||||
useEffect(() => {
|
||||
store.dispatch(
|
||||
updateMetamaskState(
|
||||
getNewState(state, {
|
||||
tokens,
|
||||
}),
|
||||
),
|
||||
);
|
||||
}, [tokens]);
|
||||
|
||||
return children;
|
||||
};
|
||||
|
||||
export const DefaultStory = ({ suggestedAssets, tokens }) => {
|
||||
return (
|
||||
<PageSet suggestedAssets={suggestedAssets} tokens={tokens}>
|
||||
<ConfirmAddSuggestedToken />
|
||||
</PageSet>
|
||||
);
|
||||
};
|
||||
export const DefaultStory = () => <ConfirmAddSuggestedToken />;
|
||||
DefaultStory.storyName = 'Default';
|
||||
DefaultStory.args = {
|
||||
suggestedAssets: [...mockSuggestedAssets],
|
||||
tokens: [],
|
||||
};
|
||||
|
||||
export const WithDuplicateAddress = ({ suggestedAssets, tokens }) => {
|
||||
return (
|
||||
<PageSet suggestedAssets={suggestedAssets} tokens={tokens}>
|
||||
<ConfirmAddSuggestedToken />
|
||||
</PageSet>
|
||||
);
|
||||
};
|
||||
WithDuplicateAddress.args = {
|
||||
suggestedAssets: [...mockSuggestedAssets],
|
||||
tokens: [
|
||||
{
|
||||
...mockSuggestedAssets[0].asset,
|
||||
},
|
||||
],
|
||||
};
|
||||
export const WithDuplicateAddress = () => <ConfirmAddSuggestedToken />;
|
||||
const WithDuplicateAddressStore = configureStore({
|
||||
metamask: {
|
||||
...mockState.metamask,
|
||||
suggestedAssets: [...mockSuggestedAssets],
|
||||
tokens: [
|
||||
{
|
||||
...mockSuggestedAssets[0].asset,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
WithDuplicateAddress.decorators = [
|
||||
(story) => <Provider store={WithDuplicateAddressStore}>{story()}</Provider>,
|
||||
];
|
||||
|
||||
export const WithDuplicateSymbolAndDifferentAddress = ({
|
||||
suggestedAssets,
|
||||
tokens,
|
||||
}) => {
|
||||
return (
|
||||
<PageSet suggestedAssets={suggestedAssets} tokens={tokens}>
|
||||
<ConfirmAddSuggestedToken />
|
||||
</PageSet>
|
||||
);
|
||||
};
|
||||
WithDuplicateSymbolAndDifferentAddress.args = {
|
||||
suggestedAssets: [...mockSuggestedAssets],
|
||||
tokens: [
|
||||
{
|
||||
...mockSuggestedAssets[0].asset,
|
||||
address: '0xNonSuggestedAddress',
|
||||
},
|
||||
],
|
||||
};
|
||||
export const WithDuplicateSymbolAndDifferentAddress = () => (
|
||||
<ConfirmAddSuggestedToken />
|
||||
);
|
||||
const WithDuplicateSymbolAndDifferentAddressStore = configureStore({
|
||||
metamask: {
|
||||
...mockState.metamask,
|
||||
suggestedAssets: [...mockSuggestedAssets],
|
||||
tokens: [
|
||||
{
|
||||
...mockSuggestedAssets[0].asset,
|
||||
address: '0xNonSuggestedAddress',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
WithDuplicateSymbolAndDifferentAddress.decorators = [
|
||||
(story) => (
|
||||
<Provider store={WithDuplicateSymbolAndDifferentAddressStore}>
|
||||
{story()}
|
||||
</Provider>
|
||||
),
|
||||
];
|
||||
|
Loading…
Reference in New Issue
Block a user