m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

knob to control (#18635)

Browse Source 
* 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:
sumit shinde ( Roni ) 2023-04-19 14:33:29 +05:30 committed by GitHub
parent 5892acab81
commit 52e91058a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 100 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,82 +2,82 @@ export const suggestedAssets = [
{ {
asset: { asset: {
address: '0x6b175474e89094c44da98b954eedeac495271d0f', address: '0x6b175474e89094c44da98b954eedeac495271d0f',
symbol: 'META', symbol: 'ETH',
decimals: 18, decimals: 18,
image: 'metamark.svg', image: './images/eth_logo.svg',
unlisted: false unlisted: false,
}, },
}, },
{ {
asset: { asset: {
'address': '0xB8c77482e45F1F44dE1745F52C74426C631bDD52', address: '0xB8c77482e45F1F44dE1745F52C74426C631bDD52',
'symbol': '0X', symbol: '0X',
'decimals': 18, decimals: 18,
'image': '0x.svg', image: '0x.svg',
'unlisted': false unlisted: false,
}, },
}, },
{ {
asset: { asset: {
'address': '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
'symbol': 'AST', symbol: 'AST',
'decimals': 18, decimals: 18,
'image': 'ast.png', image: 'ast.png',
'unlisted': false unlisted: false,
}, },
}, },
{ {
asset: { asset: {
'address': '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2', address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2',
'symbol': 'BAT', symbol: 'BAT',
'decimals': 18, decimals: 18,
'image': 'BAT_icon.svg', image: 'BAT_icon.svg',
'unlisted': false unlisted: false,
}, },
}, },
{ {
asset: { asset: {
'address': '0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1', address: '0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1',
'symbol': 'CVL', symbol: 'CVL',
'decimals': 18, decimals: 18,
'image': 'CVL_token.svg', image: 'CVL_token.svg',
'unlisted': false unlisted: false,
}, },
}, },
{ {
asset: { asset: {
'address': '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e', address: '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e',
'symbol': 'GLA', symbol: 'GLA',
'decimals': 18, decimals: 18,
'image': 'gladius.svg', image: 'gladius.svg',
'unlisted': false unlisted: false,
}, },
}, },
{ {
asset: { asset: {
'address': '0x467Bccd9d29f223BcE8043b84E8C8B282827790F', address: '0x467Bccd9d29f223BcE8043b84E8C8B282827790F',
'symbol': 'GNO', symbol: 'GNO',
'decimals': 18, decimals: 18,
'image': 'gnosis.svg', image: 'gnosis.svg',
'unlisted': false unlisted: false,
}, },
}, },
{ {
asset: { asset: {
'address': '0xff20817765cb7f73d4bde2e66e067e58d11095c2', address: '0xff20817765cb7f73d4bde2e66e067e58d11095c2',
'symbol': 'OMG', symbol: 'OMG',
'decimals': 18, decimals: 18,
'image': 'omg.jpg', image: 'omg.jpg',
'unlisted': false unlisted: false,
}, },
}, },
{ {
asset: { asset: {
'address': '0x8e870d67f660d95d5be530380d0ec0bd388289e1', address: '0x8e870d67f660d95d5be530380d0ec0bd388289e1',
'symbol': 'WED', symbol: 'WED',
'decimals': 18, decimals: 18,
'image': 'wed.png', image: 'wed.png',
'unlisted': false unlisted: false,
}, },
}, },
] ];

4
.storybook/test-data.js
View File

@ -172,9 +172,9 @@ const state = {
}, },
'0x6b175474e89094c44da98b954eedeac495271d0f': { '0x6b175474e89094c44da98b954eedeac495271d0f': {
address: '0x6b175474e89094c44da98b954eedeac495271d0f', address: '0x6b175474e89094c44da98b954eedeac495271d0f',
symbol: 'META', symbol: 'ETH',
decimals: 18, decimals: 18,
image: 'metamark.svg', image: './images/eth_logo.svg',
unlisted: false, unlisted: false,
}, },
'0xB8c77482e45F1F44dE1745F52C74426C631bDD52': { '0xB8c77482e45F1F44dE1745F52C74426C631bDD52': {

150
ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
View File

@ -1,107 +1,65 @@
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
import React, { useEffect } from 'react'; import React from 'react';
import { text } from '@storybook/addon-knobs'; import { Provider } from 'react-redux';
import { store, getNewState } from '../../../.storybook/preview';
import { suggestedAssets as mockSuggestedAssets } from '../../../.storybook/initial-states/approval-screens/add-suggested-token'; 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 '.'; import ConfirmAddSuggestedToken from '.';
const store = configureStore({
metamask: {
...mockState.metamask,
suggestedAssets: [...mockSuggestedAssets],
tokens: [],
},
});
export default { export default {
title: 'Pages/ConfirmAddSuggestedToken', title: 'Pages/ConfirmAddSuggestedToken',
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
argTypes: {
tokens: {
control: 'array',
table: { category: 'Data' },
},
suggestedAssets: {
control: 'array',
table: { category: 'Data' },
},
},
}; };
const { metamask: state } = store.getState(); export const DefaultStory = () => <ConfirmAddSuggestedToken />;
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>
);
};
DefaultStory.storyName = 'Default'; DefaultStory.storyName = 'Default';
DefaultStory.args = {
suggestedAssets: [...mockSuggestedAssets],
tokens: [],
};
export const WithDuplicateAddress = ({ suggestedAssets, tokens }) => { export const WithDuplicateAddress = () => <ConfirmAddSuggestedToken />;
return ( const WithDuplicateAddressStore = configureStore({
<PageSet suggestedAssets={suggestedAssets} tokens={tokens}> metamask: {
<ConfirmAddSuggestedToken /> ...mockState.metamask,
</PageSet> suggestedAssets: [...mockSuggestedAssets],
); tokens: [
}; {
WithDuplicateAddress.args = { ...mockSuggestedAssets[0].asset,
suggestedAssets: [...mockSuggestedAssets], },
tokens: [ ],
{ },
...mockSuggestedAssets[0].asset, });
}, WithDuplicateAddress.decorators = [
], (story) => <Provider store={WithDuplicateAddressStore}>{story()}</Provider>,
}; ];
export const WithDuplicateSymbolAndDifferentAddress = ({ export const WithDuplicateSymbolAndDifferentAddress = () => (
suggestedAssets, <ConfirmAddSuggestedToken />
tokens, );
}) => { const WithDuplicateSymbolAndDifferentAddressStore = configureStore({
return ( metamask: {
<PageSet suggestedAssets={suggestedAssets} tokens={tokens}> ...mockState.metamask,
<ConfirmAddSuggestedToken /> suggestedAssets: [...mockSuggestedAssets],
</PageSet> tokens: [
); {
}; ...mockSuggestedAssets[0].asset,
WithDuplicateSymbolAndDifferentAddress.args = { address: '0xNonSuggestedAddress',
suggestedAssets: [...mockSuggestedAssets], },
tokens: [ ],
{ },
...mockSuggestedAssets[0].asset, });
address: '0xNonSuggestedAddress', WithDuplicateSymbolAndDifferentAddress.decorators = [
}, (story) => (
], <Provider store={WithDuplicateSymbolAndDifferentAddressStore}>
}; {story()}
</Provider>
),
];