1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
Ariella Vu fa15b32fab
ConfirmAddSuggestToken: replace mapDispatchToProps & mapStateToProps; Add Tests (#13526)
* 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
2022-03-10 23:40:06 -03:00

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',
},
],
};