From 52e91058a0a91954eac07e893073b99d97041565 Mon Sep 17 00:00:00 2001 From: "sumit shinde ( Roni )" <110285294+sumitshinde-84@users.noreply.github.com> Date: Wed, 19 Apr 2023 14:33:29 +0530 Subject: [PATCH] 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 * Update ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js Co-authored-by: George Marshall * Update ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js Co-authored-by: George Marshall * Update ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js Co-authored-by: George Marshall * Update confirm-add-suggested-token.stories.js * updaes * Updating to use redux provider * lint fix --------- Co-authored-by: George Marshall Co-authored-by: georgewrmarshall --- .../approval-screens/add-suggested-token.js | 88 +++++----- .storybook/test-data.js | 4 +- .../confirm-add-suggested-token.stories.js | 150 +++++++----------- 3 files changed, 100 insertions(+), 142 deletions(-) diff --git a/.storybook/initial-states/approval-screens/add-suggested-token.js b/.storybook/initial-states/approval-screens/add-suggested-token.js index 5cd10451c..d8218a2ce 100644 --- a/.storybook/initial-states/approval-screens/add-suggested-token.js +++ b/.storybook/initial-states/approval-screens/add-suggested-token.js @@ -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, }, }, -] +]; diff --git a/.storybook/test-data.js b/.storybook/test-data.js index 23c88c485..22ec45e2a 100644 --- a/.storybook/test-data.js +++ b/.storybook/test-data.js @@ -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': { diff --git a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js b/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js index c1f7d9558..ea1947804 100644 --- a/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js +++ b/ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js @@ -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) => {story()}], }; -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 ( - - - - ); -}; +export const DefaultStory = () => ; DefaultStory.storyName = 'Default'; -DefaultStory.args = { - suggestedAssets: [...mockSuggestedAssets], - tokens: [], -}; -export const WithDuplicateAddress = ({ suggestedAssets, tokens }) => { - return ( - - - - ); -}; -WithDuplicateAddress.args = { - suggestedAssets: [...mockSuggestedAssets], - tokens: [ - { - ...mockSuggestedAssets[0].asset, - }, - ], -}; +export const WithDuplicateAddress = () => ; +const WithDuplicateAddressStore = configureStore({ + metamask: { + ...mockState.metamask, + suggestedAssets: [...mockSuggestedAssets], + tokens: [ + { + ...mockSuggestedAssets[0].asset, + }, + ], + }, +}); +WithDuplicateAddress.decorators = [ + (story) => {story()}, +]; -export const WithDuplicateSymbolAndDifferentAddress = ({ - suggestedAssets, - tokens, -}) => { - return ( - - - - ); -}; -WithDuplicateSymbolAndDifferentAddress.args = { - suggestedAssets: [...mockSuggestedAssets], - tokens: [ - { - ...mockSuggestedAssets[0].asset, - address: '0xNonSuggestedAddress', - }, - ], -}; +export const WithDuplicateSymbolAndDifferentAddress = () => ( + +); +const WithDuplicateSymbolAndDifferentAddressStore = configureStore({ + metamask: { + ...mockState.metamask, + suggestedAssets: [...mockSuggestedAssets], + tokens: [ + { + ...mockSuggestedAssets[0].asset, + address: '0xNonSuggestedAddress', + }, + ], + }, +}); +WithDuplicateSymbolAndDifferentAddress.decorators = [ + (story) => ( + + {story()} + + ), +];