mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
fa15b32fab
* ConfirmAddSuggestedToken: component.js -> .js * replace mapStateToProps w/ useSelector ConfirmAddSuggestedToken * replace mapDispatchToProps w/ useDispatch ConfirmAddSuggestedToken * ConfirmAddSuggestedToken: useHistory * ConfirmAddSuggestedToken: revert scss reuse ConfirmImportToken styles for now * ConfirmAddSuggestToken: add tests * ConfirmAddSuggestedToken: rm unused controls * ConfirmAddSuggestedToken: rm snapshot * use `metamark.svg` instead of `metamask.svg` * ConfirmAddSuggestedToken: update useSelectors * Revert "ConfirmAddSuggestedToken: revert scss" This reverts commit 07aed4576caaf247cb38ad481d79a339ba3d3947. * ConfirmAddSuggestedToken: === undefined w/ strict mode * ConfirmAddSuggestedToken: use useNewMetricEvent * ConfirmAddSuggestedToken: run useEffect once * ConfirmAddSuggestedToken: rm unused async * ConfirmAddSuggestedToken: rm mock redux store * ConfirmAddSuggestedToken: duplicate ConfirmImportToken styles * ConfirmAddSuggestedToken: update metrics logic * ConfirmAddSuggestedToken: metricEvent-> trackEvent * ConfirmAddSuggestedToken:clean useEffect w/ new fn - PR suggestion: https://github.com/MetaMask/metamask-extension/pull/13526#discussion_r818007393 * ConfirmAddSuggestedToken: rm unused .token-balance styles
108 lines
2.5 KiB
JavaScript
108 lines
2.5 KiB
JavaScript
/* eslint-disable react/prop-types */
|
|
import React, { useEffect } from 'react';
|
|
import { text } from '@storybook/addon-knobs';
|
|
import { store, getNewState } from '../../../.storybook/preview';
|
|
import { suggestedAssets as mockSuggestedAssets } from '../../../.storybook/initial-states/approval-screens/add-suggested-token';
|
|
import { updateMetamaskState } from '../../store/actions';
|
|
import ConfirmAddSuggestedToken from '.';
|
|
|
|
export default {
|
|
title: 'Pages/ConfirmAddSuggestedToken',
|
|
id: __filename,
|
|
argTypes: {
|
|
tokens: {
|
|
control: 'array',
|
|
table: { category: 'Data' },
|
|
},
|
|
suggestedAssets: {
|
|
control: 'array',
|
|
table: { category: 'Data' },
|
|
},
|
|
},
|
|
};
|
|
|
|
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>
|
|
);
|
|
};
|
|
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 WithDuplicateSymbolAndDifferentAddress = ({
|
|
suggestedAssets,
|
|
tokens,
|
|
}) => {
|
|
return (
|
|
<PageSet suggestedAssets={suggestedAssets} tokens={tokens}>
|
|
<ConfirmAddSuggestedToken />
|
|
</PageSet>
|
|
);
|
|
};
|
|
WithDuplicateSymbolAndDifferentAddress.args = {
|
|
suggestedAssets: [...mockSuggestedAssets],
|
|
tokens: [
|
|
{
|
|
...mockSuggestedAssets[0].asset,
|
|
address: '0xNonSuggestedAddress',
|
|
},
|
|
],
|
|
};
|