From 9e13d6b82a8d220abd5c76cca6fb556c9a2d5adb Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 22 Feb 2023 19:51:49 +0530 Subject: [PATCH 01/56] added redesign storybook --- ui/components/redesign/index.js | 1 + ui/components/redesign/redesign-components.scss | 0 ui/components/redesign/token-list/README.mdx | 0 ui/components/redesign/token-list/index.js | 1 + ui/components/redesign/token-list/token-list.js | 13 +++++++++++++ .../redesign/token-list/token-list.stories.js | 17 +++++++++++++++++ ui/css/index.scss | 1 + 7 files changed, 33 insertions(+) create mode 100644 ui/components/redesign/index.js create mode 100644 ui/components/redesign/redesign-components.scss create mode 100644 ui/components/redesign/token-list/README.mdx create mode 100644 ui/components/redesign/token-list/index.js create mode 100644 ui/components/redesign/token-list/token-list.js create mode 100644 ui/components/redesign/token-list/token-list.stories.js diff --git a/ui/components/redesign/index.js b/ui/components/redesign/index.js new file mode 100644 index 000000000000..472132ad257d --- /dev/null +++ b/ui/components/redesign/index.js @@ -0,0 +1 @@ +export { TokenList } from './token-list'; diff --git a/ui/components/redesign/redesign-components.scss b/ui/components/redesign/redesign-components.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/ui/components/redesign/token-list/README.mdx b/ui/components/redesign/token-list/README.mdx new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/ui/components/redesign/token-list/index.js b/ui/components/redesign/token-list/index.js new file mode 100644 index 000000000000..472132ad257d --- /dev/null +++ b/ui/components/redesign/token-list/index.js @@ -0,0 +1 @@ +export { TokenList } from './token-list'; diff --git a/ui/components/redesign/token-list/token-list.js b/ui/components/redesign/token-list/token-list.js new file mode 100644 index 000000000000..826a137531be --- /dev/null +++ b/ui/components/redesign/token-list/token-list.js @@ -0,0 +1,13 @@ +import React from 'react'; +import Box from '../../ui/box/box'; + +export const TokenList = () => { + return Token List; +}; + +TokenList.propTypes = { + /** + * TokenList also accepts all props from Box + */ + ...Box.propTypes, +}; diff --git a/ui/components/redesign/token-list/token-list.stories.js b/ui/components/redesign/token-list/token-list.stories.js new file mode 100644 index 000000000000..fff339962f94 --- /dev/null +++ b/ui/components/redesign/token-list/token-list.stories.js @@ -0,0 +1,17 @@ +import React from 'react'; +import README from './README.mdx'; +import { TokenList } from './token-list'; + +export default { + title: 'Components/Redesign/TokenList', + component: TokenList, + parameters: { + docs: { + page: README, + }, + }, +}; + +export const DefaultStory = () => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/css/index.scss b/ui/css/index.scss index 46e1e7f2b095..1310fb4bad8d 100644 --- a/ui/css/index.scss +++ b/ui/css/index.scss @@ -9,6 +9,7 @@ @import './utilities/colors.scss'; @import './base-styles.scss'; @import '../components/component-library/component-library-components.scss'; +@import '../components/redesign/redesign-components.scss'; @import '../components/app/app-components'; @import '../components/multichain/index.scss'; @import '../components/ui/ui-components'; From a32400da5b3a03168634ed57ec4a17e7b25cf568 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 28 Feb 2023 00:03:42 +0530 Subject: [PATCH 02/56] updated token list --- .../redesign/redesign-components.scss | 1 + .../redesign/token-list/token-list.js | 153 +++++++++++++++++- .../redesign/token-list/token-list.scss | 9 ++ 3 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 ui/components/redesign/token-list/token-list.scss diff --git a/ui/components/redesign/redesign-components.scss b/ui/components/redesign/redesign-components.scss index e69de29bb2d1..febd152e823b 100644 --- a/ui/components/redesign/redesign-components.scss +++ b/ui/components/redesign/redesign-components.scss @@ -0,0 +1 @@ +@import 'token-list/token-list'; diff --git a/ui/components/redesign/token-list/token-list.js b/ui/components/redesign/token-list/token-list.js index 826a137531be..9946515cf03a 100644 --- a/ui/components/redesign/token-list/token-list.js +++ b/ui/components/redesign/token-list/token-list.js @@ -1,8 +1,159 @@ import React from 'react'; +import { + AlignItems, + BLOCK_SIZES, + DISPLAY, + FLEX_DIRECTION, + FONT_WEIGHT, + IconColor, + JustifyContent, + Size, + TextColor, + TextVariant, + TEXT_ALIGN, +} from '../../../helpers/constants/design-system'; +import { + AvatarNetwork, + AvatarToken, + AvatarWithBadge, + AVATAR_WITH_BADGE_POSTIONS, + ButtonLink, + Icon, + ICON_NAMES, + Text, +} from '../../component-library'; import Box from '../../ui/box/box'; export const TokenList = () => { - return Token List; + return ( + + + + + } + marginRight={3} + > + + + + + + Ethereum + + + $1,230.13 + + + 1.234 ETH + + + + + + + } + marginRight={3} + > + + + + + + Ethereum + + + $1,230.13 + + + 1.234 ETH + + + + + + + Import Token + + + + Refresh + + + + + Need help? Contact MetaMask Support{' '} + + + + ); }; TokenList.propTypes = { diff --git a/ui/components/redesign/token-list/token-list.scss b/ui/components/redesign/token-list/token-list.scss new file mode 100644 index 000000000000..7b62442fea49 --- /dev/null +++ b/ui/components/redesign/token-list/token-list.scss @@ -0,0 +1,9 @@ +.token-list{ + &__container{ + &--cell{ + &--text-container{ + width: 100%; + } + } + } +} \ No newline at end of file From 44fa929cb6ad6b6829c327c373ff73135694e278 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 28 Feb 2023 01:38:30 +0530 Subject: [PATCH 03/56] updated css --- ui/components/redesign/token-list/README.mdx | 0 ui/components/redesign/token-list/token-list.js | 2 -- ui/components/redesign/token-list/token-list.stories.js | 6 ------ 3 files changed, 8 deletions(-) delete mode 100644 ui/components/redesign/token-list/README.mdx diff --git a/ui/components/redesign/token-list/README.mdx b/ui/components/redesign/token-list/README.mdx deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/ui/components/redesign/token-list/token-list.js b/ui/components/redesign/token-list/token-list.js index 9946515cf03a..e3d0daac53e2 100644 --- a/ui/components/redesign/token-list/token-list.js +++ b/ui/components/redesign/token-list/token-list.js @@ -1,7 +1,6 @@ import React from 'react'; import { AlignItems, - BLOCK_SIZES, DISPLAY, FLEX_DIRECTION, FONT_WEIGHT, @@ -31,7 +30,6 @@ export const TokenList = () => { display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4} - width={BLOCK_SIZES.ONE_THIRD} > ; From 9a536feba251498a5528fce49743f837ab7982e5 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 28 Feb 2023 01:47:41 +0530 Subject: [PATCH 04/56] fixed lint error --- ui/components/redesign/token-list/token-list.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/components/redesign/token-list/token-list.scss b/ui/components/redesign/token-list/token-list.scss index 7b62442fea49..a5db9d867425 100644 --- a/ui/components/redesign/token-list/token-list.scss +++ b/ui/components/redesign/token-list/token-list.scss @@ -1,9 +1,9 @@ -.token-list{ - &__container{ - &--cell{ - &--text-container{ +.token-list { + &__container { + &--cell { + &--text-container { width: 100%; } } } -} \ No newline at end of file +} From c6ac4a2df327dc879995794c33bc364cf8c0512b Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 1 Mar 2023 19:32:27 +0530 Subject: [PATCH 05/56] updated the new token list component --- .vscode/settings.json | 5 +- ui/components/app/asset-list/asset-list.js | 17 ++- ui/components/app/token-cell/token-cell.js | 47 ++++--- .../component-library/token-list/index.js | 1 + .../token-list/token-list.js | 120 ++++++++++++++++++ .../token-list/token-list.scss | 3 + .../token-list/token-list.stories.js | 31 +++++ 7 files changed, 207 insertions(+), 17 deletions(-) create mode 100644 ui/components/component-library/token-list/index.js create mode 100644 ui/components/component-library/token-list/token-list.js create mode 100644 ui/components/component-library/token-list/token-list.scss create mode 100644 ui/components/component-library/token-list/token-list.stories.js diff --git a/.vscode/settings.json b/.vscode/settings.json index b1f9efcae8f1..62c0f5b9950a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,5 +2,8 @@ "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", "editor.tabSize": 2, "files.trimTrailingWhitespace": true, - "javascript.preferences.importModuleSpecifier": "relative" + "javascript.preferences.importModuleSpecifier": "relative", + "[javascript]": { + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + } } diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index 427e60690984..a458e0cf4694 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -27,6 +27,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import DetectedToken from '../detected-token/detected-token'; +import { NewTokenList } from '../../component-library'; import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link'; const AssetList = ({ onClickAsset }) => { @@ -72,7 +73,20 @@ const AssetList = ({ onClickAsset }) => { return ( <> - + onClickAsset(nativeCurrency)} + data-testid="wallet-balance" + primary={ + primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value + } + tokenSymbol={primaryCurrencyProperties.suffix} + secondary={showFiat ? secondaryCurrencyDisplay : undefined} + tokenImage={balanceIsLoading ? null : primaryTokenImage} + identiconBorder + /> + + onClickAsset(nativeCurrency)} data-testid="wallet-balance" primary={ @@ -83,6 +97,7 @@ const AssetList = ({ onClickAsset }) => { tokenImage={balanceIsLoading ? null : primaryTokenImage} identiconBorder /> + { onClickAsset(tokenAddress); diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index 1a18f9c838c7..e39abf111da3 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -6,6 +6,7 @@ import AssetListItem from '../asset-list-item'; import { getSelectedAddress } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'; +import { NewTokenList } from '../../component-library'; export default function TokenCell({ address, @@ -37,21 +38,37 @@ export default function TokenCell({ ) : null; return ( - + <> +
+ +
+ + ); } diff --git a/ui/components/component-library/token-list/index.js b/ui/components/component-library/token-list/index.js new file mode 100644 index 000000000000..3c91d349edf1 --- /dev/null +++ b/ui/components/component-library/token-list/index.js @@ -0,0 +1 @@ +export { NewTokenList } from './token-list'; diff --git a/ui/components/component-library/token-list/token-list.js b/ui/components/component-library/token-list/token-list.js new file mode 100644 index 000000000000..52d6733056fd --- /dev/null +++ b/ui/components/component-library/token-list/token-list.js @@ -0,0 +1,120 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { useSelector } from 'react-redux' +import classnames from 'classnames' +import { + DISPLAY, + FLEX_DIRECTION, + FONT_WEIGHT, + JustifyContent, + Size, + TextColor, + TextVariant, +} from '../../../helpers/constants/design-system' +import { + AvatarNetwork, + AvatarToken, + AvatarWithBadge, + AVATAR_WITH_BADGE_POSTIONS, + Text, +} from '..' +import Box from '../../ui/box/box' +import { getNativeCurrencyImage } from '../../../selectors' + +export const NewTokenList = ({ + className, + onClick, + tokenSymbol, + tokenImage, + primary, + secondary, +}) => { + const primaryTokenImage = useSelector(getNativeCurrencyImage) + return ( + + + + } + marginRight={3} + > + + + + + + {tokenSymbol} + + + {secondary} + + + + {primary} {tokenSymbol} + + + + + ) +} + +NewTokenList.propTypes = { + /** + * An additional className to apply to the TokenList. + */ + + className: PropTypes.string, + /** + * The onClick handler to be passed to the NewTokenList component + */ + onClick: PropTypes.func, + /** + * tokenSymbol represents the symbol of the Token + */ + tokenSymbol: PropTypes.string, + /** + * tokenImage represnts the image of the token icon + */ + tokenImage: PropTypes.string, + /** + * primary represents the balance + */ + primary: PropTypes.string, + /** + * secondary represents the balance in dollars + */ + secondary: PropTypes.string, + /** + * NewTokenList also accepts all props from Box + */ + ...Box.propTypes, +} + +NewTokenList.defaultProps = { + className: undefined, + tokenImage: undefined, +} diff --git a/ui/components/component-library/token-list/token-list.scss b/ui/components/component-library/token-list/token-list.scss new file mode 100644 index 000000000000..a2fa588c7ddb --- /dev/null +++ b/ui/components/component-library/token-list/token-list.scss @@ -0,0 +1,3 @@ +.token-list { + cursor: pointer; +} diff --git a/ui/components/component-library/token-list/token-list.stories.js b/ui/components/component-library/token-list/token-list.stories.js new file mode 100644 index 000000000000..caa4d2b13157 --- /dev/null +++ b/ui/components/component-library/token-list/token-list.stories.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { NewTokenList } from './token-list'; + +export default { + title: 'Components/ComponentLibrary/NewTokenList', + component: NewTokenList, + argTypes: { + tokenSymbol: { + control: 'text', + }, + tokenImage: { + control: 'text', + }, + primary: { + control: 'text', + }, + secondary: { + control: 'text', + }, + }, + args: { + secondary: '$9.80 USD', + primary: '0.006', + tokenImage: './images/eth_logo.svg', + tokenSymbol: 'ETH', + }, +}; + +export const DefaultStory = (args) => + +DefaultStory.storyName = 'Default'; From 94d47cbfdeb140eba2570608ddaaafd091cd8fed Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 1 Mar 2023 23:26:39 +0530 Subject: [PATCH 06/56] fixed redesign folder error --- ui/components/app/asset-list/asset-list.js | 2 +- ui/components/app/token-cell/token-cell.js | 2 +- .../token-list/token-list.scss | 3 - ui/components/multichain/index.js | 1 + .../redesign-components.scss | 0 .../token-list/index.js | 0 .../token-list/token-list.js | 35 ++-- .../token-list/token-list.scss | 0 .../token-list/token-list.stories.js | 4 +- ui/components/redesign/index.js | 1 - ui/components/redesign/token-list/index.js | 1 - .../redesign/token-list/token-list.js | 162 ------------------ .../redesign/token-list/token-list.stories.js | 11 -- ui/css/index.scss | 2 +- 14 files changed, 21 insertions(+), 203 deletions(-) delete mode 100644 ui/components/component-library/token-list/token-list.scss rename ui/components/{redesign => multichain}/redesign-components.scss (100%) rename ui/components/{component-library => multichain}/token-list/index.js (100%) rename ui/components/{component-library => multichain}/token-list/token-list.js (79%) rename ui/components/{redesign => multichain}/token-list/token-list.scss (100%) rename ui/components/{component-library => multichain}/token-list/token-list.stories.js (91%) delete mode 100644 ui/components/redesign/index.js delete mode 100644 ui/components/redesign/token-list/index.js delete mode 100644 ui/components/redesign/token-list/token-list.js delete mode 100644 ui/components/redesign/token-list/token-list.stories.js diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index a458e0cf4694..c4adcaa9306c 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -27,7 +27,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import DetectedToken from '../detected-token/detected-token'; -import { NewTokenList } from '../../component-library'; +import { NewTokenList } from '../../multichain'; import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link'; const AssetList = ({ onClickAsset }) => { diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index e39abf111da3..e86d84cc2752 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -6,7 +6,7 @@ import AssetListItem from '../asset-list-item'; import { getSelectedAddress } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'; -import { NewTokenList } from '../../component-library'; +import { NewTokenList } from '../../multichain'; export default function TokenCell({ address, diff --git a/ui/components/component-library/token-list/token-list.scss b/ui/components/component-library/token-list/token-list.scss deleted file mode 100644 index a2fa588c7ddb..000000000000 --- a/ui/components/component-library/token-list/token-list.scss +++ /dev/null @@ -1,3 +0,0 @@ -.token-list { - cursor: pointer; -} diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js index 49c3563e4e24..89bb1a9ccc90 100644 --- a/ui/components/multichain/index.js +++ b/ui/components/multichain/index.js @@ -1,3 +1,4 @@ export { AccountListItem } from './account-list-item'; export { AccountListItemMenu } from './account-list-item-menu'; export { AccountListMenu } from './account-list-menu'; +export { NewTokenList } from './token-list'; diff --git a/ui/components/redesign/redesign-components.scss b/ui/components/multichain/redesign-components.scss similarity index 100% rename from ui/components/redesign/redesign-components.scss rename to ui/components/multichain/redesign-components.scss diff --git a/ui/components/component-library/token-list/index.js b/ui/components/multichain/token-list/index.js similarity index 100% rename from ui/components/component-library/token-list/index.js rename to ui/components/multichain/token-list/index.js diff --git a/ui/components/component-library/token-list/token-list.js b/ui/components/multichain/token-list/token-list.js similarity index 79% rename from ui/components/component-library/token-list/token-list.js rename to ui/components/multichain/token-list/token-list.js index 52d6733056fd..21499b76e07c 100644 --- a/ui/components/component-library/token-list/token-list.js +++ b/ui/components/multichain/token-list/token-list.js @@ -1,7 +1,7 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { useSelector } from 'react-redux' -import classnames from 'classnames' +import React from 'react'; +import PropTypes from 'prop-types'; +import { useSelector } from 'react-redux'; +import classnames from 'classnames'; import { DISPLAY, FLEX_DIRECTION, @@ -10,16 +10,16 @@ import { Size, TextColor, TextVariant, -} from '../../../helpers/constants/design-system' +} from '../../../helpers/constants/design-system'; import { AvatarNetwork, AvatarToken, AvatarWithBadge, AVATAR_WITH_BADGE_POSTIONS, Text, -} from '..' -import Box from '../../ui/box/box' -import { getNativeCurrencyImage } from '../../../selectors' +} from '../../component-library'; +import Box from '../../ui/box/box'; +import { getNativeCurrencyImage } from '../../../selectors'; export const NewTokenList = ({ className, @@ -29,7 +29,7 @@ export const NewTokenList = ({ primary, secondary, }) => { - const primaryTokenImage = useSelector(getNativeCurrencyImage) + const primaryTokenImage = useSelector(getNativeCurrencyImage); return ( } @@ -58,7 +58,7 @@ export const NewTokenList = ({ @@ -79,8 +79,8 @@ export const NewTokenList = ({ - ) -} + ); +}; NewTokenList.propTypes = { /** @@ -112,9 +112,4 @@ NewTokenList.propTypes = { * NewTokenList also accepts all props from Box */ ...Box.propTypes, -} - -NewTokenList.defaultProps = { - className: undefined, - tokenImage: undefined, -} +}; diff --git a/ui/components/redesign/token-list/token-list.scss b/ui/components/multichain/token-list/token-list.scss similarity index 100% rename from ui/components/redesign/token-list/token-list.scss rename to ui/components/multichain/token-list/token-list.scss diff --git a/ui/components/component-library/token-list/token-list.stories.js b/ui/components/multichain/token-list/token-list.stories.js similarity index 91% rename from ui/components/component-library/token-list/token-list.stories.js rename to ui/components/multichain/token-list/token-list.stories.js index caa4d2b13157..a7964d1d15d3 100644 --- a/ui/components/component-library/token-list/token-list.stories.js +++ b/ui/components/multichain/token-list/token-list.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { NewTokenList } from './token-list'; export default { - title: 'Components/ComponentLibrary/NewTokenList', + title: 'Components/Redesign/NewTokenList', component: NewTokenList, argTypes: { tokenSymbol: { @@ -26,6 +26,6 @@ export default { }, }; -export const DefaultStory = (args) => +export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; diff --git a/ui/components/redesign/index.js b/ui/components/redesign/index.js deleted file mode 100644 index 472132ad257d..000000000000 --- a/ui/components/redesign/index.js +++ /dev/null @@ -1 +0,0 @@ -export { TokenList } from './token-list'; diff --git a/ui/components/redesign/token-list/index.js b/ui/components/redesign/token-list/index.js deleted file mode 100644 index 472132ad257d..000000000000 --- a/ui/components/redesign/token-list/index.js +++ /dev/null @@ -1 +0,0 @@ -export { TokenList } from './token-list'; diff --git a/ui/components/redesign/token-list/token-list.js b/ui/components/redesign/token-list/token-list.js deleted file mode 100644 index e3d0daac53e2..000000000000 --- a/ui/components/redesign/token-list/token-list.js +++ /dev/null @@ -1,162 +0,0 @@ -import React from 'react'; -import { - AlignItems, - DISPLAY, - FLEX_DIRECTION, - FONT_WEIGHT, - IconColor, - JustifyContent, - Size, - TextColor, - TextVariant, - TEXT_ALIGN, -} from '../../../helpers/constants/design-system'; -import { - AvatarNetwork, - AvatarToken, - AvatarWithBadge, - AVATAR_WITH_BADGE_POSTIONS, - ButtonLink, - Icon, - ICON_NAMES, - Text, -} from '../../component-library'; -import Box from '../../ui/box/box'; - -export const TokenList = () => { - return ( - - - - - } - marginRight={3} - > - - - - - - Ethereum - - - $1,230.13 - - - 1.234 ETH - - - - - - - } - marginRight={3} - > - - - - - - Ethereum - - - $1,230.13 - - - 1.234 ETH - - - - - - - Import Token - - - - Refresh - - - - - Need help? Contact MetaMask Support{' '} - - - - ); -}; - -TokenList.propTypes = { - /** - * TokenList also accepts all props from Box - */ - ...Box.propTypes, -}; diff --git a/ui/components/redesign/token-list/token-list.stories.js b/ui/components/redesign/token-list/token-list.stories.js deleted file mode 100644 index fecc811979ea..000000000000 --- a/ui/components/redesign/token-list/token-list.stories.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { TokenList } from './token-list'; - -export default { - title: 'Components/Redesign/TokenList', - component: TokenList, -}; - -export const DefaultStory = () => ; - -DefaultStory.storyName = 'Default'; diff --git a/ui/css/index.scss b/ui/css/index.scss index 1310fb4bad8d..e1b4fa702140 100644 --- a/ui/css/index.scss +++ b/ui/css/index.scss @@ -9,7 +9,7 @@ @import './utilities/colors.scss'; @import './base-styles.scss'; @import '../components/component-library/component-library-components.scss'; -@import '../components/redesign/redesign-components.scss'; +@import '../components/multichain/multichain-components.scss'; @import '../components/app/app-components'; @import '../components/multichain/index.scss'; @import '../components/ui/ui-components'; From 507f0dc6629747b4ebd787a38454f8878e0006f1 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 1 Mar 2023 23:28:25 +0530 Subject: [PATCH 07/56] reverted changes in settings.json --- .vscode/settings.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 62c0f5b9950a..b1f9efcae8f1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,8 +2,5 @@ "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", "editor.tabSize": 2, "files.trimTrailingWhitespace": true, - "javascript.preferences.importModuleSpecifier": "relative", - "[javascript]": { - "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" - } + "javascript.preferences.importModuleSpecifier": "relative" } From 4580cdd8fc16bea9bb5d199b6b97cb06e35e1c0e Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 1 Mar 2023 23:35:20 +0530 Subject: [PATCH 08/56] updated redesign to multichain --- ui/components/multichain/token-list/token-list.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/multichain/token-list/token-list.stories.js b/ui/components/multichain/token-list/token-list.stories.js index a7964d1d15d3..a8e73af4e21f 100644 --- a/ui/components/multichain/token-list/token-list.stories.js +++ b/ui/components/multichain/token-list/token-list.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { NewTokenList } from './token-list'; export default { - title: 'Components/Redesign/NewTokenList', + title: 'Components/Multichain/NewTokenList', component: NewTokenList, argTypes: { tokenSymbol: { From a7b0a6e943e7429ab77d8dabe0582c79d4883c84 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 00:03:15 +0530 Subject: [PATCH 09/56] added feature flag --- .vscode/settings.json | 5 +++- ui/components/app/asset-list/asset-list.js | 27 ++++++++--------- ui/components/app/token-cell/token-cell.js | 29 ++++++++++--------- ...onents.scss => multichain-components.scss} | 0 4 files changed, 33 insertions(+), 28 deletions(-) rename ui/components/multichain/{redesign-components.scss => multichain-components.scss} (100%) diff --git a/.vscode/settings.json b/.vscode/settings.json index b1f9efcae8f1..62c0f5b9950a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,5 +2,8 @@ "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", "editor.tabSize": 2, "files.trimTrailingWhitespace": true, - "javascript.preferences.importModuleSpecifier": "relative" + "javascript.preferences.importModuleSpecifier": "relative", + "[javascript]": { + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + } } diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index c4adcaa9306c..0727c63729a2 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -73,7 +73,19 @@ const AssetList = ({ onClickAsset }) => { return ( <> -
+ {process.env.MULTICHAIN ? ( + onClickAsset(nativeCurrency)} + data-testid="wallet-balance" + primary={ + primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value + } + tokenSymbol={primaryCurrencyProperties.suffix} + secondary={showFiat ? secondaryCurrencyDisplay : undefined} + tokenImage={balanceIsLoading ? null : primaryTokenImage} + identiconBorder + /> + ) : ( onClickAsset(nativeCurrency)} data-testid="wallet-balance" @@ -85,18 +97,7 @@ const AssetList = ({ onClickAsset }) => { tokenImage={balanceIsLoading ? null : primaryTokenImage} identiconBorder /> -
- onClickAsset(nativeCurrency)} - data-testid="wallet-balance" - primary={ - primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value - } - tokenSymbol={primaryCurrencyProperties.suffix} - secondary={showFiat ? secondaryCurrencyDisplay : undefined} - tokenImage={balanceIsLoading ? null : primaryTokenImage} - identiconBorder - /> + )} { diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index e86d84cc2752..ba30877c8fe6 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -39,7 +39,20 @@ export default function TokenCell({ return ( <> -
+ {process.env.MULTICHAIN ? ( + + ) : ( -
- + )} ); } diff --git a/ui/components/multichain/redesign-components.scss b/ui/components/multichain/multichain-components.scss similarity index 100% rename from ui/components/multichain/redesign-components.scss rename to ui/components/multichain/multichain-components.scss From 70c0e33a1ef4960c82959ae87a58321048f0a958 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 00:07:55 +0530 Subject: [PATCH 10/56] reverted settings.json --- .vscode/settings.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 62c0f5b9950a..b1f9efcae8f1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,8 +2,5 @@ "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", "editor.tabSize": 2, "files.trimTrailingWhitespace": true, - "javascript.preferences.importModuleSpecifier": "relative", - "[javascript]": { - "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" - } + "javascript.preferences.importModuleSpecifier": "relative" } From 657c5853c293011c5b13b3b0a4f8d32dc7ef772e Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 15:31:44 +0530 Subject: [PATCH 11/56] added detect token banner --- .vscode/settings.json | 5 ++- .../detected-tokens-link.js | 43 +++++++++++++------ .../multichain/token-list/token-list.scss | 1 + 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index b1f9efcae8f1..62c0f5b9950a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,5 +2,8 @@ "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", "editor.tabSize": 2, "files.trimTrailingWhitespace": true, - "javascript.preferences.importModuleSpecifier": "relative" + "javascript.preferences.importModuleSpecifier": "relative", + "[javascript]": { + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + } } diff --git a/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js b/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js index adad64e95c2a..f8b907d48995 100644 --- a/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js +++ b/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js @@ -12,6 +12,7 @@ import { EVENT, EVENT_NAMES, } from '../../../../../shared/constants/metametrics'; +import { BannerAlert } from '../../../component-library'; const DetectedTokensLink = ({ className = '', setShowDetectedTokens }) => { const t = useI18nContext(); @@ -34,20 +35,34 @@ const DetectedTokensLink = ({ className = '', setShowDetectedTokens }) => { }); }; return ( - - - + <> + {process.env.MULTICHAIN ? ( + + {detectedTokens.length === 1 + ? t('numberOfNewTokensDetectedSingular') + : t('numberOfNewTokensDetectedPlural', [detectedTokens.length])} + + ) : ( + + + + )} + ); }; diff --git a/ui/components/multichain/token-list/token-list.scss b/ui/components/multichain/token-list/token-list.scss index a5db9d867425..6ecba454e8bd 100644 --- a/ui/components/multichain/token-list/token-list.scss +++ b/ui/components/multichain/token-list/token-list.scss @@ -1,5 +1,6 @@ .token-list { &__container { + cursor: pointer; &--cell { &--text-container { width: 100%; From f7d36109a3a2493aedbe98b67dc9f7ab593b96c7 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 17:50:01 +0530 Subject: [PATCH 12/56] added button componeny --- ui/components/app/asset-list/asset-list.js | 4 +- .../import-token-link/import-token-link.js | 80 +++++++++++++++++++ .../import-token-link/import-token-link.scss | 0 .../import-token-link.stories.js | 11 +++ .../multichain/import-token-link/index.js | 1 + ui/components/multichain/index.js | 1 + .../multichain/multichain-components.scss | 1 + 7 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 ui/components/multichain/import-token-link/import-token-link.js create mode 100644 ui/components/multichain/import-token-link/import-token-link.scss create mode 100644 ui/components/multichain/import-token-link/import-token-link.stories.js create mode 100644 ui/components/multichain/import-token-link/index.js diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index 0727c63729a2..a8dbfaeadd56 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -27,7 +27,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import DetectedToken from '../detected-token/detected-token'; -import { NewTokenList } from '../../multichain'; +import { NewImportTokenLink, NewTokenList } from '../../multichain'; import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link'; const AssetList = ({ onClickAsset }) => { @@ -126,7 +126,7 @@ const AssetList = ({ onClickAsset }) => { {t('missingToken')} - + {process.env.MULTICHAIN ? : } {showDetectedTokens && ( diff --git a/ui/components/multichain/import-token-link/import-token-link.js b/ui/components/multichain/import-token-link/import-token-link.js new file mode 100644 index 000000000000..3721ece7581a --- /dev/null +++ b/ui/components/multichain/import-token-link/import-token-link.js @@ -0,0 +1,80 @@ +import React, { useContext } from 'react'; +import { useSelector } from 'react-redux'; +import { useHistory } from 'react-router-dom'; +import Box from '../../ui/box/box'; +import { ButtonLink, Icon, ICON_NAMES } from '../../component-library'; +import { + AlignItems, + DISPLAY, + IconColor, +} from '../../../helpers/constants/design-system'; +import { useI18nContext } from '../../../hooks/useI18nContext'; +import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes'; +import { detectNewTokens } from '../../../store/actions'; +import { MetaMetricsContext } from '../../../contexts/metametrics'; +import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; +import { + getIsTokenDetectionSupported, + getIsTokenDetectionInactiveOnMainnet, +} from '../../../selectors'; + +export const NewImportTokenLink = () => { + const trackEvent = useContext(MetaMetricsContext); + const t = useI18nContext(); + const history = useHistory(); + + const isTokenDetectionSupported = useSelector(getIsTokenDetectionSupported); + const isTokenDetectionInactiveOnMainnet = useSelector( + getIsTokenDetectionInactiveOnMainnet, + ); + + const isTokenDetectionAvailable = + isTokenDetectionSupported || + isTokenDetectionInactiveOnMainnet || + Boolean(process.env.IN_TEST); + return ( + + + + { + history.push(IMPORT_TOKEN_ROUTE); + trackEvent({ + event: EVENT_NAMES.TOKEN_IMPORT_BUTTON_CLICKED, + category: EVENT.CATEGORIES.NAVIGATION, + properties: { + location: 'Home', + }, + }); + }} + > + {isTokenDetectionAvailable + ? t('importTokens') + : t('importTokens').charAt(0).toUpperCase() + + t('importTokens').slice(1)} + + + + + detectNewTokens()}> + {t('refreshList')} + + + + ); +}; + +NewImportTokenLink.propTypes = { + /** + * NewTokenList also accepts all props from Box + */ + ...Box.propTypes, +}; diff --git a/ui/components/multichain/import-token-link/import-token-link.scss b/ui/components/multichain/import-token-link/import-token-link.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/ui/components/multichain/import-token-link/import-token-link.stories.js b/ui/components/multichain/import-token-link/import-token-link.stories.js new file mode 100644 index 000000000000..e600b37ffbe3 --- /dev/null +++ b/ui/components/multichain/import-token-link/import-token-link.stories.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { NewImportTokenLink } from './import-token-link'; + +export default { + title: 'Components/Multichain/NewImportTokenLink;', + component: NewImportTokenLink, +}; + +export const DefaultStory = () => + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/multichain/import-token-link/index.js b/ui/components/multichain/import-token-link/index.js new file mode 100644 index 000000000000..60f7323c1e06 --- /dev/null +++ b/ui/components/multichain/import-token-link/index.js @@ -0,0 +1 @@ +export { NewImportTokenLink } from './import-token-link'; diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js index 89bb1a9ccc90..0be50e74cd3a 100644 --- a/ui/components/multichain/index.js +++ b/ui/components/multichain/index.js @@ -2,3 +2,4 @@ export { AccountListItem } from './account-list-item'; export { AccountListItemMenu } from './account-list-item-menu'; export { AccountListMenu } from './account-list-menu'; export { NewTokenList } from './token-list'; +export { NewImportTokenLink } from './import-token-link'; diff --git a/ui/components/multichain/multichain-components.scss b/ui/components/multichain/multichain-components.scss index febd152e823b..6cfd009388b4 100644 --- a/ui/components/multichain/multichain-components.scss +++ b/ui/components/multichain/multichain-components.scss @@ -1 +1,2 @@ +@import 'import-token-link/import-token-link'; @import 'token-list/token-list'; From cc9ef629be4cfedeec11d61f98644c9185af5b01 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 18:54:27 +0530 Subject: [PATCH 13/56] fixed lint errors --- .../asset-list/detetcted-tokens-link/detected-tokens-link.js | 1 + .../multichain/import-token-link/import-token-link.stories.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js b/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js index f8b907d48995..45331c4d5e3c 100644 --- a/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js +++ b/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js @@ -38,6 +38,7 @@ const DetectedTokensLink = ({ className = '', setShowDetectedTokens }) => { <> {process.env.MULTICHAIN ? ( +export const DefaultStory = () => ; DefaultStory.storyName = 'Default'; From 49e1dca11e441acaa23aa4d050088bafc348c4be Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 18:55:41 +0530 Subject: [PATCH 14/56] removed settings --- .vscode/settings.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 62c0f5b9950a..b1f9efcae8f1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,8 +2,5 @@ "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", "editor.tabSize": 2, "files.trimTrailingWhitespace": true, - "javascript.preferences.importModuleSpecifier": "relative", - "[javascript]": { - "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" - } + "javascript.preferences.importModuleSpecifier": "relative" } From 6d3f40896894ac9bb90a73eca3572d5c250f94dd Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 19:02:34 +0530 Subject: [PATCH 15/56] fixed lint errors --- ui/components/multichain/token-list/token-list.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/components/multichain/token-list/token-list.scss b/ui/components/multichain/token-list/token-list.scss index 6ecba454e8bd..ff0a3dedde0a 100644 --- a/ui/components/multichain/token-list/token-list.scss +++ b/ui/components/multichain/token-list/token-list.scss @@ -1,6 +1,7 @@ .token-list { &__container { cursor: pointer; + &--cell { &--text-container { width: 100%; From 822f589140a88716bb1a410805d7cefaad2fb266 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 19:32:27 +0530 Subject: [PATCH 16/56] added stories for multichain --- ui/components/app/asset-list/asset-list.js | 18 ++++++- .../detected-tokens-link.js | 44 +++++----------- .../detected-token-banner.js | 52 +++++++++++++++++++ .../detected-token-banner.stories.js | 25 +++++++++ .../multichain/detected-token-banner/index.js | 1 + .../import-token-link/import-token-link.js | 15 ++++-- ui/components/multichain/index.js | 3 +- .../multichain/token-list/token-list.js | 4 -- 8 files changed, 121 insertions(+), 41 deletions(-) create mode 100644 ui/components/multichain/detected-token-banner/detected-token-banner.js create mode 100644 ui/components/multichain/detected-token-banner/detected-token-banner.stories.js create mode 100644 ui/components/multichain/detected-token-banner/index.js diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index a8dbfaeadd56..faeaee265b48 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -27,7 +27,11 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import DetectedToken from '../detected-token/detected-token'; -import { NewImportTokenLink, NewTokenList } from '../../multichain'; +import { + DetectedTokensBanner, + NewImportTokenLink, + NewTokenList, +} from '../../multichain'; import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link'; const AssetList = ({ onClickAsset }) => { @@ -114,7 +118,17 @@ const AssetList = ({ onClickAsset }) => { /> {detectedTokens.length > 0 && !istokenDetectionInactiveOnNonMainnetSupportedNetwork && ( - + <> + {process.env.MULTICHAIN ? ( + + ) : ( + + )} + )} 0 ? 0 : 4}> diff --git a/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js b/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js index 45331c4d5e3c..adad64e95c2a 100644 --- a/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js +++ b/ui/components/app/asset-list/detetcted-tokens-link/detected-tokens-link.js @@ -12,7 +12,6 @@ import { EVENT, EVENT_NAMES, } from '../../../../../shared/constants/metametrics'; -import { BannerAlert } from '../../../component-library'; const DetectedTokensLink = ({ className = '', setShowDetectedTokens }) => { const t = useI18nContext(); @@ -35,35 +34,20 @@ const DetectedTokensLink = ({ className = '', setShowDetectedTokens }) => { }); }; return ( - <> - {process.env.MULTICHAIN ? ( - - {detectedTokens.length === 1 - ? t('numberOfNewTokensDetectedSingular') - : t('numberOfNewTokensDetectedPlural', [detectedTokens.length])} - - ) : ( - - - - )} - + + + ); }; diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.js b/ui/components/multichain/detected-token-banner/detected-token-banner.js new file mode 100644 index 000000000000..e4a2bc0162da --- /dev/null +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.js @@ -0,0 +1,52 @@ +import React, { useContext } from 'react'; +import { useSelector } from 'react-redux'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { useI18nContext } from '../../../hooks/useI18nContext'; +import { getDetectedTokensInCurrentNetwork } from '../../../selectors'; +import { MetaMetricsContext } from '../../../contexts/metametrics'; +import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; +import { BannerAlert } from '../../component-library'; + +export const DetectedTokensBanner = ({ + className = '', + setShowDetectedTokens, +}) => { + const t = useI18nContext(); + const trackEvent = useContext(MetaMetricsContext); + + const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork); + const detectedTokensDetails = detectedTokens.map( + ({ address, symbol }) => `${symbol} - ${address}`, + ); + + const onClick = () => { + setShowDetectedTokens(true); + trackEvent({ + event: EVENT_NAMES.TOKEN_IMPORT_CLICKED, + category: EVENT.CATEGORIES.WALLET, + properties: { + source: EVENT.SOURCE.TOKEN.DETECTED, + tokens: detectedTokensDetails, + }, + }); + }; + return ( + + {detectedTokens.length === 1 + ? t('numberOfNewTokensDetectedSingular') + : t('numberOfNewTokensDetectedPlural', [detectedTokens.length])} + + ); +}; + +DetectedTokensBanner.propTypes = { + setShowDetectedTokens: PropTypes.func.isRequired, + className: PropTypes.string, +}; diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js b/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js new file mode 100644 index 000000000000..bb2d9ffb4da8 --- /dev/null +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { Provider } from 'react-redux'; + +import testData from '../../../../.storybook/test-data'; +import configureStore from '../../../store/store'; +import { DetectedTokensBanner } from './detected-token-banner'; + +const store = configureStore(testData); + +export default { + title: 'Components/Multichain/DetectedTokensBanner', + component: DetectedTokensBanner, + decorators: [(story) => {story()}], + + argTypes: { + setShowDetectedTokens: { control: 'func' }, + }, + args: { + setShowDetectedTokens: 'setShowDetectedTokensSpy', + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/multichain/detected-token-banner/index.js b/ui/components/multichain/detected-token-banner/index.js new file mode 100644 index 000000000000..0fe2b61deaa6 --- /dev/null +++ b/ui/components/multichain/detected-token-banner/index.js @@ -0,0 +1 @@ +export { DetectedTokensBanner } from './detected-token-banner'; diff --git a/ui/components/multichain/import-token-link/import-token-link.js b/ui/components/multichain/import-token-link/import-token-link.js index 3721ece7581a..1fef4a11eb52 100644 --- a/ui/components/multichain/import-token-link/import-token-link.js +++ b/ui/components/multichain/import-token-link/import-token-link.js @@ -1,6 +1,8 @@ import React, { useContext } from 'react'; import { useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; import Box from '../../ui/box/box'; import { ButtonLink, Icon, ICON_NAMES } from '../../component-library'; import { @@ -18,7 +20,7 @@ import { getIsTokenDetectionInactiveOnMainnet, } from '../../../selectors'; -export const NewImportTokenLink = () => { +export const NewImportTokenLink = ({ className = '' }) => { const trackEvent = useContext(MetaMetricsContext); const t = useI18nContext(); const history = useHistory(); @@ -33,7 +35,11 @@ export const NewImportTokenLink = () => { isTokenDetectionInactiveOnMainnet || Boolean(process.env.IN_TEST); return ( - + { NewImportTokenLink.propTypes = { /** - * NewTokenList also accepts all props from Box + * An additional className to apply to the TokenList. */ - ...Box.propTypes, + + className: PropTypes.string, }; diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js index 0be50e74cd3a..d45840da679f 100644 --- a/ui/components/multichain/index.js +++ b/ui/components/multichain/index.js @@ -1,5 +1,6 @@ export { AccountListItem } from './account-list-item'; export { AccountListItemMenu } from './account-list-item-menu'; export { AccountListMenu } from './account-list-menu'; -export { NewTokenList } from './token-list'; +export { DetectedTokensBanner } from './detected-token-banner'; export { NewImportTokenLink } from './import-token-link'; +export { NewTokenList } from './token-list'; diff --git a/ui/components/multichain/token-list/token-list.js b/ui/components/multichain/token-list/token-list.js index 21499b76e07c..10cac7988291 100644 --- a/ui/components/multichain/token-list/token-list.js +++ b/ui/components/multichain/token-list/token-list.js @@ -108,8 +108,4 @@ NewTokenList.propTypes = { * secondary represents the balance in dollars */ secondary: PropTypes.string, - /** - * NewTokenList also accepts all props from Box - */ - ...Box.propTypes, }; From f7aa42966247e525b3e054fadd3f68c907ca2f43 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 19:44:34 +0530 Subject: [PATCH 17/56] updated no token found string --- ui/components/app/asset-list/asset-list.js | 33 ++++++++++--------- .../import-token-link.stories.js | 2 +- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index faeaee265b48..677f396a1ba2 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -27,11 +27,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import DetectedToken from '../detected-token/detected-token'; -import { - DetectedTokensBanner, - NewImportTokenLink, - NewTokenList, -} from '../../multichain'; +import { DetectedTokensBanner, NewImportTokenLink, NewTokenList } from '../../multichain'; import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link'; const AssetList = ({ onClickAsset }) => { @@ -131,16 +127,23 @@ const AssetList = ({ onClickAsset }) => { )} 0 ? 0 : 4}> - - - {t('missingToken')} - - - {process.env.MULTICHAIN ? : } + {process.env.MULTICHAIN ? ( + + ) : ( + <> + + + {t('missingToken')} + + + + + + )} {showDetectedTokens && ( diff --git a/ui/components/multichain/import-token-link/import-token-link.stories.js b/ui/components/multichain/import-token-link/import-token-link.stories.js index 421f9929d0e1..c4f567a7254e 100644 --- a/ui/components/multichain/import-token-link/import-token-link.stories.js +++ b/ui/components/multichain/import-token-link/import-token-link.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { NewImportTokenLink } from './import-token-link'; export default { - title: 'Components/Multichain/NewImportTokenLink;', + title: 'Components/Multichain/NewImportTokenLink', component: NewImportTokenLink, }; From 1d89851cddf35b509968e756f87b2cc1890cdc5a Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 19:51:50 +0530 Subject: [PATCH 18/56] updated lint error --- ui/components/app/asset-list/asset-list.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index 677f396a1ba2..c93cbbf80fd1 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -27,7 +27,11 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import DetectedToken from '../detected-token/detected-token'; -import { DetectedTokensBanner, NewImportTokenLink, NewTokenList } from '../../multichain'; +import { + DetectedTokensBanner, + NewImportTokenLink, + NewTokenList, +} from '../../multichain'; import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link'; const AssetList = ({ onClickAsset }) => { From ae75f7a4b5ecc7556e3b060fc99bd1ab4aec9562 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 23:28:24 +0530 Subject: [PATCH 19/56] updated padding values --- .../import-token-link/import-token-link.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/ui/components/multichain/import-token-link/import-token-link.js b/ui/components/multichain/import-token-link/import-token-link.js index 1fef4a11eb52..3cf7fa2c9c31 100644 --- a/ui/components/multichain/import-token-link/import-token-link.js +++ b/ui/components/multichain/import-token-link/import-token-link.js @@ -40,7 +40,12 @@ export const NewImportTokenLink = ({ className = '' }) => { marginRight={4} marginLeft={4} > - + { t('importTokens').slice(1)} - + Date: Thu, 2 Mar 2023 23:28:45 +0530 Subject: [PATCH 20/56] updated padding values --- .../import-token-link/import-token-link.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/ui/components/multichain/import-token-link/import-token-link.js b/ui/components/multichain/import-token-link/import-token-link.js index 3cf7fa2c9c31..73d5a68e6db3 100644 --- a/ui/components/multichain/import-token-link/import-token-link.js +++ b/ui/components/multichain/import-token-link/import-token-link.js @@ -35,16 +35,12 @@ export const NewImportTokenLink = ({ className = '' }) => { isTokenDetectionInactiveOnMainnet || Boolean(process.env.IN_TEST); return ( - + { Date: Sat, 4 Mar 2023 00:18:37 +0530 Subject: [PATCH 21/56] updated tabs with role button --- ui/components/multichain/token-list/token-list.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/ui/components/multichain/token-list/token-list.js b/ui/components/multichain/token-list/token-list.js index 10cac7988291..87e6932520e5 100644 --- a/ui/components/multichain/token-list/token-list.js +++ b/ui/components/multichain/token-list/token-list.js @@ -36,13 +36,20 @@ export const NewTokenList = ({ display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4} - margin={4} > { + if (event.key === 'Enter') { + onClick(); + } + }} > Date: Mon, 6 Mar 2023 22:43:37 +0530 Subject: [PATCH 22/56] updated hover state --- ui/components/multichain/token-list/token-list.js | 4 ++-- .../multichain/token-list/token-list.scss | 14 +++++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/ui/components/multichain/token-list/token-list.js b/ui/components/multichain/token-list/token-list.js index 87e6932520e5..0ab44ade2fa0 100644 --- a/ui/components/multichain/token-list/token-list.js +++ b/ui/components/multichain/token-list/token-list.js @@ -38,7 +38,7 @@ export const NewTokenList = ({ gap={4} > diff --git a/ui/components/multichain/token-list/token-list.scss b/ui/components/multichain/token-list/token-list.scss index ff0a3dedde0a..11925283c267 100644 --- a/ui/components/multichain/token-list/token-list.scss +++ b/ui/components/multichain/token-list/token-list.scss @@ -1,11 +1,15 @@ .token-list { - &__container { + &__container-cell { cursor: pointer; - &--cell { - &--text-container { - width: 100%; - } + &:hover, + &:focus-within { + background-color: var(--color-background-default-hover); + } + + &--text-container { + width: 100%; + cursor: pointer; } } } From 00a5581f468b318b204f929316fc6d916234f38b Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 7 Mar 2023 21:58:26 +0530 Subject: [PATCH 23/56] updated components with multichain --- ui/components/app/asset-list/asset-list.js | 3 ++- ui/components/app/token-cell/token-cell.js | 4 ++-- .../detected-token-banner.js | 2 +- .../import-token-link/import-token-link.js | 14 +++++++------- .../import-token-link/import-token-link.scss | 0 ui/components/multichain/index.js | 2 +- .../multichain/multichain-components.scss | 3 +-- .../multichain/multichain-token-list/index.js | 1 + .../multichain-token-list.js} | 16 +++++++++------- .../multichain-token-list.scss} | 2 +- .../multichain-token-list.stories.js} | 8 ++++---- ui/components/multichain/token-list/index.js | 1 - 12 files changed, 29 insertions(+), 27 deletions(-) delete mode 100644 ui/components/multichain/import-token-link/import-token-link.scss create mode 100644 ui/components/multichain/multichain-token-list/index.js rename ui/components/multichain/{token-list/token-list.js => multichain-token-list/multichain-token-list.js} (84%) rename ui/components/multichain/{token-list/token-list.scss => multichain-token-list/multichain-token-list.scss} (90%) rename ui/components/multichain/{token-list/token-list.stories.js => multichain-token-list/multichain-token-list.stories.js} (65%) delete mode 100644 ui/components/multichain/token-list/index.js diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index c93cbbf80fd1..c680fc4a7e5a 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -29,6 +29,7 @@ import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import DetectedToken from '../detected-token/detected-token'; import { DetectedTokensBanner, + MultichainTokenList, NewImportTokenLink, NewTokenList, } from '../../multichain'; @@ -78,7 +79,7 @@ const AssetList = ({ onClickAsset }) => { return ( <> {process.env.MULTICHAIN ? ( - onClickAsset(nativeCurrency)} data-testid="wallet-balance" primary={ diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index ba30877c8fe6..aeab59d77b97 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -6,7 +6,7 @@ import AssetListItem from '../asset-list-item'; import { getSelectedAddress } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'; -import { NewTokenList } from '../../multichain'; +import { MultichainTokenList, NewTokenList } from '../../multichain'; export default function TokenCell({ address, @@ -40,7 +40,7 @@ export default function TokenCell({ return ( <> {process.env.MULTICHAIN ? ( - { isTokenDetectionInactiveOnMainnet || Boolean(process.env.IN_TEST); return ( - - + + { history.push(IMPORT_TOKEN_ROUTE); trackEvent({ diff --git a/ui/components/multichain/import-token-link/import-token-link.scss b/ui/components/multichain/import-token-link/import-token-link.scss deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js index d45840da679f..2bd1193ab0dd 100644 --- a/ui/components/multichain/index.js +++ b/ui/components/multichain/index.js @@ -3,4 +3,4 @@ export { AccountListItemMenu } from './account-list-item-menu'; export { AccountListMenu } from './account-list-menu'; export { DetectedTokensBanner } from './detected-token-banner'; export { NewImportTokenLink } from './import-token-link'; -export { NewTokenList } from './token-list'; +export { MultichainTokenList } from './multichain-token-list'; diff --git a/ui/components/multichain/multichain-components.scss b/ui/components/multichain/multichain-components.scss index 6cfd009388b4..51d994e7141c 100644 --- a/ui/components/multichain/multichain-components.scss +++ b/ui/components/multichain/multichain-components.scss @@ -1,2 +1 @@ -@import 'import-token-link/import-token-link'; -@import 'token-list/token-list'; +@import 'multichain-token-list/multichain-token-list'; diff --git a/ui/components/multichain/multichain-token-list/index.js b/ui/components/multichain/multichain-token-list/index.js new file mode 100644 index 000000000000..49bab386104e --- /dev/null +++ b/ui/components/multichain/multichain-token-list/index.js @@ -0,0 +1 @@ +export { MultichainTokenList } from './multichain-token-list'; diff --git a/ui/components/multichain/token-list/token-list.js b/ui/components/multichain/multichain-token-list/multichain-token-list.js similarity index 84% rename from ui/components/multichain/token-list/token-list.js rename to ui/components/multichain/multichain-token-list/multichain-token-list.js index 0ab44ade2fa0..40bb753b0040 100644 --- a/ui/components/multichain/token-list/token-list.js +++ b/ui/components/multichain/multichain-token-list/multichain-token-list.js @@ -20,8 +20,9 @@ import { } from '../../component-library'; import Box from '../../ui/box/box'; import { getNativeCurrencyImage } from '../../../selectors'; +import { useI18nContext } from '../../../hooks/useI18nContext'; -export const NewTokenList = ({ +export const MultichainTokenList = ({ className, onClick, tokenSymbol, @@ -30,15 +31,16 @@ export const NewTokenList = ({ secondary, }) => { const primaryTokenImage = useSelector(getNativeCurrencyImage); + const t = useI18nContext(); return ( } @@ -65,7 +67,7 @@ export const NewTokenList = ({ @@ -89,14 +91,14 @@ export const NewTokenList = ({ ); }; -NewTokenList.propTypes = { +MultichainTokenList.propTypes = { /** * An additional className to apply to the TokenList. */ className: PropTypes.string, /** - * The onClick handler to be passed to the NewTokenList component + * The onClick handler to be passed to the MultichainTokenList component */ onClick: PropTypes.func, /** diff --git a/ui/components/multichain/token-list/token-list.scss b/ui/components/multichain/multichain-token-list/multichain-token-list.scss similarity index 90% rename from ui/components/multichain/token-list/token-list.scss rename to ui/components/multichain/multichain-token-list/multichain-token-list.scss index 11925283c267..946a8aeb7dc0 100644 --- a/ui/components/multichain/token-list/token-list.scss +++ b/ui/components/multichain/multichain-token-list/multichain-token-list.scss @@ -1,4 +1,4 @@ -.token-list { +.multichain-token-list { &__container-cell { cursor: pointer; diff --git a/ui/components/multichain/token-list/token-list.stories.js b/ui/components/multichain/multichain-token-list/multichain-token-list.stories.js similarity index 65% rename from ui/components/multichain/token-list/token-list.stories.js rename to ui/components/multichain/multichain-token-list/multichain-token-list.stories.js index a8e73af4e21f..db937600aca5 100644 --- a/ui/components/multichain/token-list/token-list.stories.js +++ b/ui/components/multichain/multichain-token-list/multichain-token-list.stories.js @@ -1,9 +1,9 @@ import React from 'react'; -import { NewTokenList } from './token-list'; +import { MultichainTokenList } from './multichain-token-list'; export default { - title: 'Components/Multichain/NewTokenList', - component: NewTokenList, + title: 'Components/Multichain/MultichainTokenList', + component: MultichainTokenList, argTypes: { tokenSymbol: { control: 'text', @@ -26,6 +26,6 @@ export default { }, }; -export const DefaultStory = (args) => ; +export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; diff --git a/ui/components/multichain/token-list/index.js b/ui/components/multichain/token-list/index.js deleted file mode 100644 index 3c91d349edf1..000000000000 --- a/ui/components/multichain/token-list/index.js +++ /dev/null @@ -1 +0,0 @@ -export { NewTokenList } from './token-list'; From a2fef4d6f03a774b6a90e538acb84f8e8dab7ffa Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 7 Mar 2023 22:02:57 +0530 Subject: [PATCH 24/56] fixed lint errors --- ui/components/app/asset-list/asset-list.js | 1 - ui/components/app/token-cell/token-cell.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index c680fc4a7e5a..4a295177cb20 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -31,7 +31,6 @@ import { DetectedTokensBanner, MultichainTokenList, NewImportTokenLink, - NewTokenList, } from '../../multichain'; import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link'; diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index aeab59d77b97..097d0cc163db 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -6,7 +6,7 @@ import AssetListItem from '../asset-list-item'; import { getSelectedAddress } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'; -import { MultichainTokenList, NewTokenList } from '../../multichain'; +import { MultichainTokenList } from '../../multichain'; export default function TokenCell({ address, From 776f01c0962bbaa5fb92a36bf860be0fc41fa587 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 7 Mar 2023 22:15:58 +0530 Subject: [PATCH 25/56] updated multichain import token link --- ui/components/app/asset-list/asset-list.js | 4 ++-- .../import-token-link/import-token-link.stories.js | 11 ----------- ui/components/multichain/import-token-link/index.js | 1 - ui/components/multichain/index.js | 2 +- .../multichain/multichain-import-token-link/index.js | 1 + .../multichain-import-token-link.js} | 4 ++-- .../multichain-import-token-link.stories.js | 11 +++++++++++ 7 files changed, 17 insertions(+), 17 deletions(-) delete mode 100644 ui/components/multichain/import-token-link/import-token-link.stories.js delete mode 100644 ui/components/multichain/import-token-link/index.js create mode 100644 ui/components/multichain/multichain-import-token-link/index.js rename ui/components/multichain/{import-token-link/import-token-link.js => multichain-import-token-link/multichain-import-token-link.js} (96%) create mode 100644 ui/components/multichain/multichain-import-token-link/multichain-import-token-link.stories.js diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index 4a295177cb20..b94c70fb1187 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -30,7 +30,7 @@ import DetectedToken from '../detected-token/detected-token'; import { DetectedTokensBanner, MultichainTokenList, - NewImportTokenLink, + MultichainImportTokenLink, } from '../../multichain'; import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link'; @@ -132,7 +132,7 @@ const AssetList = ({ onClickAsset }) => { )} 0 ? 0 : 4}> {process.env.MULTICHAIN ? ( - + ) : ( <> diff --git a/ui/components/multichain/import-token-link/import-token-link.stories.js b/ui/components/multichain/import-token-link/import-token-link.stories.js deleted file mode 100644 index c4f567a7254e..000000000000 --- a/ui/components/multichain/import-token-link/import-token-link.stories.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { NewImportTokenLink } from './import-token-link'; - -export default { - title: 'Components/Multichain/NewImportTokenLink', - component: NewImportTokenLink, -}; - -export const DefaultStory = () => ; - -DefaultStory.storyName = 'Default'; diff --git a/ui/components/multichain/import-token-link/index.js b/ui/components/multichain/import-token-link/index.js deleted file mode 100644 index 60f7323c1e06..000000000000 --- a/ui/components/multichain/import-token-link/index.js +++ /dev/null @@ -1 +0,0 @@ -export { NewImportTokenLink } from './import-token-link'; diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js index 2bd1193ab0dd..02bf9b0ef3fd 100644 --- a/ui/components/multichain/index.js +++ b/ui/components/multichain/index.js @@ -2,5 +2,5 @@ export { AccountListItem } from './account-list-item'; export { AccountListItemMenu } from './account-list-item-menu'; export { AccountListMenu } from './account-list-menu'; export { DetectedTokensBanner } from './detected-token-banner'; -export { NewImportTokenLink } from './import-token-link'; +export { MultichainImportTokenLink } from './multichain-import-token-link'; export { MultichainTokenList } from './multichain-token-list'; diff --git a/ui/components/multichain/multichain-import-token-link/index.js b/ui/components/multichain/multichain-import-token-link/index.js new file mode 100644 index 000000000000..c9899d1191b9 --- /dev/null +++ b/ui/components/multichain/multichain-import-token-link/index.js @@ -0,0 +1 @@ +export { MultichainImportTokenLink } from './multichain-import-token-link'; diff --git a/ui/components/multichain/import-token-link/import-token-link.js b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js similarity index 96% rename from ui/components/multichain/import-token-link/import-token-link.js rename to ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js index aa39845f43f7..594e6f0493e8 100644 --- a/ui/components/multichain/import-token-link/import-token-link.js +++ b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js @@ -21,7 +21,7 @@ import { getIsTokenDetectionInactiveOnMainnet, } from '../../../selectors'; -export const NewImportTokenLink = ({ className = '' }) => { +export const MultichainImportTokenLink = ({ className = '' }) => { const trackEvent = useContext(MetaMetricsContext); const t = useI18nContext(); const history = useHistory(); @@ -84,7 +84,7 @@ export const NewImportTokenLink = ({ className = '' }) => { ); }; -NewImportTokenLink.propTypes = { +MultichainImportTokenLink.propTypes = { /** * An additional className to apply to the TokenList. */ diff --git a/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.stories.js b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.stories.js new file mode 100644 index 000000000000..1cb7b4395148 --- /dev/null +++ b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.stories.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { MultichainImportTokenLink } from './multichain-import-token-link'; + +export default { + title: 'Components/Multichain/MultichainImportTokenLink', + component: MultichainImportTokenLink, +}; + +export const DefaultStory = () => ; + +DefaultStory.storyName = 'Default'; From e69894bbe22dcf4e253280ecd9d5523cc4743d30 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 8 Mar 2023 23:49:25 +0530 Subject: [PATCH 26/56] updated a tag --- .../multichain-import-token-link.js | 2 +- .../multichain-token-list/multichain-token-list.js | 9 ++------- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js index 594e6f0493e8..2262fc699a0a 100644 --- a/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js +++ b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js @@ -42,7 +42,7 @@ export const MultichainImportTokenLink = ({ className = '' }) => { > diff --git a/ui/components/multichain/multichain-token-list/multichain-token-list.js b/ui/components/multichain/multichain-token-list/multichain-token-list.js index 40bb753b0040..b3dd60d6564a 100644 --- a/ui/components/multichain/multichain-token-list/multichain-token-list.js +++ b/ui/components/multichain/multichain-token-list/multichain-token-list.js @@ -44,14 +44,9 @@ export const MultichainTokenList = ({ display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} padding={4} + as="a" + href="#" onClick={onClick} - role="button" - tabIndex={0} - onKeyPress={(event) => { - if (event.key === 'Enter') { - onClick(); - } - }} > Date: Thu, 9 Mar 2023 13:05:47 +0530 Subject: [PATCH 27/56] updated fixes --- ui/components/app/asset-list/asset-list.js | 3 ++- .../detected-token-banner.js | 7 +++--- .../detected-token-banner.stories.js | 8 ------- .../multichain-import-token-link.js | 24 +++++++------------ .../multichain-token-list.js | 2 +- .../multichain-token-list.scss | 1 - ui/css/index.scss | 2 +- 7 files changed, 16 insertions(+), 31 deletions(-) diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index b94c70fb1187..d03dbb32a0f7 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -122,6 +122,7 @@ const AssetList = ({ onClickAsset }) => { {process.env.MULTICHAIN ? ( ) : ( { )} 0 ? 0 : 4}> {process.env.MULTICHAIN ? ( - + ) : ( <> diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.js b/ui/components/multichain/detected-token-banner/detected-token-banner.js index a3419f974344..aecdb84a2bd8 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.js @@ -10,8 +10,9 @@ import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import { BannerAlert } from '../../component-library'; export const DetectedTokensBanner = ({ - className = '', + className, setShowDetectedTokens, + ...props }) => { const t = useI18nContext(); const trackEvent = useContext(MetaMetricsContext); @@ -37,7 +38,7 @@ export const DetectedTokensBanner = ({ className={classNames('multichain-detected-token-banner', className)} actionButtonLabel={t('importTokensCamelCase')} actionButtonOnClick={onClick} - margin={4} + {...props} > {detectedTokens.length === 1 ? t('numberOfNewTokensDetectedSingular') @@ -47,6 +48,6 @@ export const DetectedTokensBanner = ({ }; DetectedTokensBanner.propTypes = { - setShowDetectedTokens: PropTypes.func.isRequired, + setShowDetectedTokens: PropTypes.string.isRequired, className: PropTypes.string, }; diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js b/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js index bb2d9ffb4da8..4310b09808b3 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js @@ -1,17 +1,9 @@ import React from 'react'; -import { Provider } from 'react-redux'; - -import testData from '../../../../.storybook/test-data'; -import configureStore from '../../../store/store'; import { DetectedTokensBanner } from './detected-token-banner'; -const store = configureStore(testData); - export default { title: 'Components/Multichain/DetectedTokensBanner', component: DetectedTokensBanner, - decorators: [(story) => {story()}], - argTypes: { setShowDetectedTokens: { control: 'func' }, }, diff --git a/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js index 2262fc699a0a..d50e5dd4c02c 100644 --- a/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js +++ b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js @@ -4,11 +4,10 @@ import { useHistory } from 'react-router-dom'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import Box from '../../ui/box/box'; -import { ButtonLink, Icon, ICON_NAMES } from '../../component-library'; +import { ButtonLink, ICON_NAMES } from '../../component-library'; import { AlignItems, DISPLAY, - IconColor, Size, } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; @@ -21,7 +20,7 @@ import { getIsTokenDetectionInactiveOnMainnet, } from '../../../selectors'; -export const MultichainImportTokenLink = ({ className = '' }) => { +export const MultichainImportTokenLink = ({ className, ...props }) => { const trackEvent = useContext(MetaMetricsContext); const t = useI18nContext(); const history = useHistory(); @@ -38,16 +37,12 @@ export const MultichainImportTokenLink = ({ className = '' }) => { return ( - { history.push(IMPORT_TOKEN_ROUTE); trackEvent({ @@ -71,12 +66,10 @@ export const MultichainImportTokenLink = ({ className = '' }) => { paddingBottom={4} paddingTop={4} > - - detectNewTokens()}> + detectNewTokens()} + > {t('refreshList')} @@ -88,6 +81,5 @@ MultichainImportTokenLink.propTypes = { /** * An additional className to apply to the TokenList. */ - className: PropTypes.string, }; diff --git a/ui/components/multichain/multichain-token-list/multichain-token-list.js b/ui/components/multichain/multichain-token-list/multichain-token-list.js index b3dd60d6564a..5bb85e1a41c7 100644 --- a/ui/components/multichain/multichain-token-list/multichain-token-list.js +++ b/ui/components/multichain/multichain-token-list/multichain-token-list.js @@ -59,7 +59,7 @@ export const MultichainTokenList = ({ } marginRight={3} > - + Date: Thu, 9 Mar 2023 13:08:36 +0530 Subject: [PATCH 28/56] updated onClick to handleClick --- .../multichain/detected-token-banner/detected-token-banner.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.js b/ui/components/multichain/detected-token-banner/detected-token-banner.js index aecdb84a2bd8..9d950aa2e000 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.js @@ -22,7 +22,7 @@ export const DetectedTokensBanner = ({ ({ address, symbol }) => `${symbol} - ${address}`, ); - const onClick = () => { + const handleOnClick = () => { setShowDetectedTokens(true); trackEvent({ event: EVENT_NAMES.TOKEN_IMPORT_CLICKED, @@ -37,7 +37,7 @@ export const DetectedTokensBanner = ({ {detectedTokens.length === 1 From 7ac8e63b76536da40991433eac0c785053631776 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 9 Mar 2023 19:40:15 +0530 Subject: [PATCH 29/56] updated setShowDetectedTokens proptype --- .../detected-token-banner/detected-token-banner.js | 2 +- .../detected-token-banner/detected-token-banner.stories.js | 2 +- .../multichain-token-list/multichain-token-list.js | 5 ++++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.js b/ui/components/multichain/detected-token-banner/detected-token-banner.js index 9d950aa2e000..581a0616fd98 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.js @@ -48,6 +48,6 @@ export const DetectedTokensBanner = ({ }; DetectedTokensBanner.propTypes = { - setShowDetectedTokens: PropTypes.string.isRequired, + setShowDetectedTokens: PropTypes.func.isRequired, className: PropTypes.string, }; diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js b/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js index 4310b09808b3..772eafe63873 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js @@ -8,7 +8,7 @@ export default { setShowDetectedTokens: { control: 'func' }, }, args: { - setShowDetectedTokens: 'setShowDetectedTokensSpy', + setShowDetectedTokens: () => console.log('Test'), }, }; diff --git a/ui/components/multichain/multichain-token-list/multichain-token-list.js b/ui/components/multichain/multichain-token-list/multichain-token-list.js index 5bb85e1a41c7..2b6691300054 100644 --- a/ui/components/multichain/multichain-token-list/multichain-token-list.js +++ b/ui/components/multichain/multichain-token-list/multichain-token-list.js @@ -46,7 +46,10 @@ export const MultichainTokenList = ({ padding={4} as="a" href="#" - onClick={onClick} + onClick={(e) => { + e.preventDefault(); + onClick(); + }} > Date: Thu, 9 Mar 2023 19:54:01 +0530 Subject: [PATCH 30/56] updated multichain tokenlist with item suffix --- ui/components/app/asset-list/asset-list.js | 4 ++-- ui/components/app/token-cell/token-cell.js | 4 ++-- ui/components/multichain/index.js | 2 +- ui/components/multichain/multichain-components.scss | 2 +- .../multichain/multichain-token-list-item/index.js | 1 + .../multichain-token-list-item.js} | 12 ++++++------ .../multichain-token-list-item.scss} | 3 +-- .../multichain-token-list-item.stories.js} | 8 ++++---- .../multichain/multichain-token-list/index.js | 1 - 9 files changed, 18 insertions(+), 19 deletions(-) create mode 100644 ui/components/multichain/multichain-token-list-item/index.js rename ui/components/multichain/{multichain-token-list/multichain-token-list.js => multichain-token-list-item/multichain-token-list-item.js} (89%) rename ui/components/multichain/{multichain-token-list/multichain-token-list.scss => multichain-token-list-item/multichain-token-list-item.scss} (87%) rename ui/components/multichain/{multichain-token-list/multichain-token-list.stories.js => multichain-token-list-item/multichain-token-list-item.stories.js} (63%) delete mode 100644 ui/components/multichain/multichain-token-list/index.js diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index d03dbb32a0f7..d2c8c1a4850e 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -29,7 +29,7 @@ import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import DetectedToken from '../detected-token/detected-token'; import { DetectedTokensBanner, - MultichainTokenList, + MultichainTokenListItem, MultichainImportTokenLink, } from '../../multichain'; import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link'; @@ -78,7 +78,7 @@ const AssetList = ({ onClickAsset }) => { return ( <> {process.env.MULTICHAIN ? ( - onClickAsset(nativeCurrency)} data-testid="wallet-balance" primary={ diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index 097d0cc163db..c34d908cd410 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -6,7 +6,7 @@ import AssetListItem from '../asset-list-item'; import { getSelectedAddress } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'; -import { MultichainTokenList } from '../../multichain'; +import { MultichainTokenListItem } from '../../multichain'; export default function TokenCell({ address, @@ -40,7 +40,7 @@ export default function TokenCell({ return ( <> {process.env.MULTICHAIN ? ( - @@ -89,14 +89,14 @@ export const MultichainTokenList = ({ ); }; -MultichainTokenList.propTypes = { +MultichainTokenListItem.propTypes = { /** * An additional className to apply to the TokenList. */ className: PropTypes.string, /** - * The onClick handler to be passed to the MultichainTokenList component + * The onClick handler to be passed to the MultichainTokenListItem component */ onClick: PropTypes.func, /** diff --git a/ui/components/multichain/multichain-token-list/multichain-token-list.scss b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss similarity index 87% rename from ui/components/multichain/multichain-token-list/multichain-token-list.scss rename to ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss index 418c0c345162..498ca1db2da5 100644 --- a/ui/components/multichain/multichain-token-list/multichain-token-list.scss +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss @@ -1,6 +1,5 @@ -.multichain-token-list { +.multichain-token-list-item { &__container-cell { - &:hover, &:focus-within { background-color: var(--color-background-default-hover); diff --git a/ui/components/multichain/multichain-token-list/multichain-token-list.stories.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js similarity index 63% rename from ui/components/multichain/multichain-token-list/multichain-token-list.stories.js rename to ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js index db937600aca5..3b9e278065b6 100644 --- a/ui/components/multichain/multichain-token-list/multichain-token-list.stories.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js @@ -1,9 +1,9 @@ import React from 'react'; -import { MultichainTokenList } from './multichain-token-list'; +import { MultichainTokenListItem } from './multichain-token-list-item'; export default { - title: 'Components/Multichain/MultichainTokenList', - component: MultichainTokenList, + title: 'Components/Multichain/MultichainTokenListItem', + component: MultichainTokenListItem, argTypes: { tokenSymbol: { control: 'text', @@ -26,6 +26,6 @@ export default { }, }; -export const DefaultStory = (args) => ; +export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; diff --git a/ui/components/multichain/multichain-token-list/index.js b/ui/components/multichain/multichain-token-list/index.js deleted file mode 100644 index 49bab386104e..000000000000 --- a/ui/components/multichain/multichain-token-list/index.js +++ /dev/null @@ -1 +0,0 @@ -export { MultichainTokenList } from './multichain-token-list'; From f94fdcee8e43e2d3e2e6edfff9d08e2117b32832 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 9 Mar 2023 23:48:09 +0530 Subject: [PATCH 31/56] updated tests --- .../detected-token-banner.test.js.snap | 31 ++++++ .../detected-token-banner.js | 1 + .../detected-token-banner.test.js | 38 +++++++ .../multichain-import-token-link.test.js.snap | 91 ++++++++++++++++ .../multichain-import-token-link.js | 8 +- .../multichain-import-token-link.test.js | 101 ++++++++++++++++++ .../multichain-token-list-item.test.js.snap | 58 ++++++++++ .../multichain-token-list-item.js | 2 + .../multichain-token-list-item.test.js | 57 ++++++++++ 9 files changed, 384 insertions(+), 3 deletions(-) create mode 100644 ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap create mode 100644 ui/components/multichain/detected-token-banner/detected-token-banner.test.js create mode 100644 ui/components/multichain/multichain-import-token-link/__snapshots__/multichain-import-token-link.test.js.snap create mode 100644 ui/components/multichain/multichain-import-token-link/multichain-import-token-link.test.js create mode 100644 ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap create mode 100644 ui/components/multichain/multichain-token-list-item/multichain-token-list-item.test.js diff --git a/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap b/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap new file mode 100644 index 000000000000..399d52d719e8 --- /dev/null +++ b/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DetectedTokensBanner should render correctly 1`] = ` +
+
+ +
+

+ 3 new tokens found in this account +

+ +
+
+
+`; diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.js b/ui/components/multichain/detected-token-banner/detected-token-banner.js index 581a0616fd98..bd324fa451eb 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.js @@ -38,6 +38,7 @@ export const DetectedTokensBanner = ({ className={classNames('multichain-detected-token-banner', className)} actionButtonLabel={t('importTokensCamelCase')} actionButtonOnClick={handleOnClick} + data-testid="detected-token-banner" {...props} > {detectedTokens.length === 1 diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.test.js b/ui/components/multichain/detected-token-banner/detected-token-banner.test.js new file mode 100644 index 000000000000..d603227305e5 --- /dev/null +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.test.js @@ -0,0 +1,38 @@ +import * as React from 'react'; +import { renderWithProvider, screen, fireEvent } from '../../../../test/jest'; +import configureStore from '../../../store/store'; +import testData from '../../../../.storybook/test-data'; + +import { DetectedTokensBanner } from './detected-token-banner'; + +describe('DetectedTokensBanner', () => { + let setShowDetectedTokensSpy; + const args = {}; + + beforeEach(() => { + setShowDetectedTokensSpy = jest.fn(); + args.setShowDetectedTokens = setShowDetectedTokensSpy; + }); + + it('should render correctly', () => { + const store = configureStore(testData); + const { getByTestId, container } = renderWithProvider( + , + store, + ); + + expect(getByTestId('detected-token-banner')).toBeDefined(); + expect(container).toMatchSnapshot(); + }); + it('should render number of tokens detected link', () => { + const store = configureStore(testData); + renderWithProvider(, store); + + expect( + screen.getByText('3 new tokens found in this account'), + ).toBeInTheDocument(); + + fireEvent.click(screen.getByText('Import tokens')); + expect(setShowDetectedTokensSpy).toHaveBeenCalled(); + }); +}); diff --git a/ui/components/multichain/multichain-import-token-link/__snapshots__/multichain-import-token-link.test.js.snap b/ui/components/multichain/multichain-import-token-link/__snapshots__/multichain-import-token-link.test.js.snap new file mode 100644 index 000000000000..7388ba004073 --- /dev/null +++ b/ui/components/multichain/multichain-import-token-link/__snapshots__/multichain-import-token-link.test.js.snap @@ -0,0 +1,91 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Import Token Link should match snapshot for goerli chainId 1`] = ` +
+
+
+ +
+
+ +
+
+
+`; + +exports[`Import Token Link should match snapshot for mainnet chainId 1`] = ` +
+
+
+ +
+
+ +
+
+
+`; diff --git a/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js index d50e5dd4c02c..fc6dae84a9c6 100644 --- a/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js +++ b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.js @@ -42,6 +42,7 @@ export const MultichainImportTokenLink = ({ className, ...props }) => { { history.push(IMPORT_TOKEN_ROUTE); @@ -55,9 +56,9 @@ export const MultichainImportTokenLink = ({ className, ...props }) => { }} > {isTokenDetectionAvailable - ? t('importTokens') - : t('importTokens').charAt(0).toUpperCase() + - t('importTokens').slice(1)} + ? t('importTokensCamelCase') + : t('importTokensCamelCase').charAt(0).toUpperCase() + + t('importTokensCamelCase').slice(1)} { > detectNewTokens()} > {t('refreshList')} diff --git a/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.test.js b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.test.js new file mode 100644 index 000000000000..dd376c52ba0c --- /dev/null +++ b/ui/components/multichain/multichain-import-token-link/multichain-import-token-link.test.js @@ -0,0 +1,101 @@ +import React from 'react'; +import configureMockStore from 'redux-mock-store'; +import { fireEvent, screen } from '@testing-library/react'; +import { detectNewTokens } from '../../../store/actions'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import { MultichainImportTokenLink } from './multichain-import-token-link'; + +const mockPushHistory = jest.fn(); + +jest.mock('react-router-dom', () => { + const original = jest.requireActual('react-router-dom'); + return { + ...original, + useLocation: jest.fn(() => ({ search: '' })), + useHistory: () => ({ + push: mockPushHistory, + }), + }; +}); + +jest.mock('../../../store/actions.ts', () => ({ + detectNewTokens: jest.fn(), +})); + +describe('Import Token Link', () => { + it('should match snapshot for goerli chainId', () => { + const mockState = { + metamask: { + provider: { + chainId: '0x5', + }, + }, + }; + + const store = configureMockStore()(mockState); + + const { container } = renderWithProvider( + , + store, + ); + + expect(container).toMatchSnapshot(); + }); + + it('should match snapshot for mainnet chainId', () => { + const mockState = { + metamask: { + provider: { + chainId: '0x1', + }, + }, + }; + + const store = configureMockStore()(mockState); + + const { container } = renderWithProvider( + , + store, + ); + + expect(container).toMatchSnapshot(); + }); + + it('should detectNewTokens when clicking refresh', () => { + const mockState = { + metamask: { + provider: { + chainId: '0x5', + }, + }, + }; + + const store = configureMockStore()(mockState); + + renderWithProvider(, store); + + const refreshList = screen.getByTestId('refresh-list-button'); + fireEvent.click(refreshList); + + expect(detectNewTokens).toHaveBeenCalled(); + }); + + it('should push import token route', () => { + const mockState = { + metamask: { + provider: { + chainId: '0x5', + }, + }, + }; + + const store = configureMockStore()(mockState); + + renderWithProvider(, store); + + const importToken = screen.getByTestId('import-token-button'); + fireEvent.click(importToken); + + expect(mockPushHistory).toHaveBeenCalledWith('/import-token'); + }); +}); diff --git a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap new file mode 100644 index 000000000000..1df40bb8e1f6 --- /dev/null +++ b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap @@ -0,0 +1,58 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MultichainTokenListItem should render correctly 1`] = ` + +`; diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index afbd5deeeb8b..5e9ddab2bf19 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -38,6 +38,7 @@ export const MultichainTokenListItem = ({ display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4} + data-testid="multichain-token-list-item" > { e.preventDefault(); diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.test.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.test.js new file mode 100644 index 000000000000..6f04982984ae --- /dev/null +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.test.js @@ -0,0 +1,57 @@ +import React from 'react'; +import configureMockStore from 'redux-mock-store'; + +import { fireEvent } from '@testing-library/react'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import { MultichainTokenListItem } from './multichain-token-list-item'; + +const state = { + metamask: { + provider: { + ticker: 'ETH', + nickname: '', + chainId: '0x1', + type: 'mainnet', + }, + useTokenDetection: false, + nativeCurrency: 'ETH', + }, +}; + +describe('MultichainTokenListItem', () => { + const props = { + onClick: jest.fn(), + }; + it('should render correctly', () => { + const store = configureMockStore()(state); + const { getByTestId, container } = renderWithProvider( + , + store, + ); + expect(getByTestId('multichain-token-list-item')).toBeDefined(); + expect(container).toMatchSnapshot(); + }); + + it('should render with custom className', () => { + const store = configureMockStore()(state); + const { getByTestId } = renderWithProvider( + , + store, + ); + expect(getByTestId('multichain-token-list-item')).toHaveClass( + 'multichain-token-list-item-test', + ); + }); + + it('handles click action and fires onClick', () => { + const store = configureMockStore()(state); + const { queryByTestId } = renderWithProvider( + , + store, + ); + + fireEvent.click(queryByTestId('multichain-token-list-button')); + + expect(props.onClick).toHaveBeenCalled(); + }); +}); From 0f3c600b80d54d457e7da93accfa60f8f6d6e616 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Fri, 10 Mar 2023 00:12:41 +0530 Subject: [PATCH 32/56] updated tests --- .../detected-token-banner/detected-token-banner.test.js | 2 +- .../multichain-token-list-item.js | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.test.js b/ui/components/multichain/detected-token-banner/detected-token-banner.test.js index d603227305e5..1b02d6b7c07c 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.test.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.test.js @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { renderWithProvider, screen, fireEvent } from '../../../../test/jest'; import configureStore from '../../../store/store'; import testData from '../../../../.storybook/test-data'; diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index 5e9ddab2bf19..c7595389435f 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import classnames from 'classnames'; import { + BLOCK_SIZES, DISPLAY, FLEX_DIRECTION, FONT_WEIGHT, @@ -39,6 +40,11 @@ export const MultichainTokenListItem = ({ flexDirection={FLEX_DIRECTION.COLUMN} gap={4} data-testid="multichain-token-list-item" + width={[ + BLOCK_SIZES.ONE_FIFTH, + BLOCK_SIZES.HALF, + BLOCK_SIZES.ONE_THIRD, + ]} > Date: Fri, 10 Mar 2023 15:58:51 +0530 Subject: [PATCH 33/56] updated token list css --- .../multichain-token-list-item.js | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index c7595389435f..468d756d1a7e 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -23,6 +23,7 @@ import Box from '../../ui/box/box'; import { getNativeCurrencyImage } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; + export const MultichainTokenListItem = ({ className, onClick, @@ -40,11 +41,6 @@ export const MultichainTokenListItem = ({ flexDirection={FLEX_DIRECTION.COLUMN} gap={4} data-testid="multichain-token-list-item" - width={[ - BLOCK_SIZES.ONE_FIFTH, - BLOCK_SIZES.HALF, - BLOCK_SIZES.ONE_THIRD, - ]} > - + {tokenSymbol} - + {secondary} From 8806e552d3eddee5e888555ba102fcc8ba3f0b28 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Fri, 10 Mar 2023 16:12:08 +0530 Subject: [PATCH 34/56] updated snapshot --- .../multichain-token-list-item.test.js.snap | 9 +++++---- .../multichain-token-list-item.js | 10 ++++------ 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap index 1df40bb8e1f6..3fe8c787cf37 100644 --- a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap +++ b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap @@ -12,7 +12,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = ` href="#" >

- - + {secondary} From 68a758f76d1f3f11e30e8fad00963be7e25663ec Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Mon, 13 Mar 2023 17:25:11 +0530 Subject: [PATCH 35/56] updated text --- ui/components/app/asset-list/asset-list.js | 8 ++++- ui/components/app/token-cell/token-cell.js | 9 ++++-- .../detected-token-banner.stories.js | 5 +-- .../multichain-token-list-item.js | 7 ++++- .../multichain-token-list-item.stories.js | 31 ------------------- 5 files changed, 21 insertions(+), 39 deletions(-) delete mode 100644 ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index d2c8c1a4850e..650e412e0b91 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -12,6 +12,7 @@ import { getNativeCurrencyImage, getDetectedTokensInCurrentNetwork, getIstokenDetectionInactiveOnNonMainnetSupportedNetwork, + getTokenList, } from '../../../selectors'; import { getNativeCurrency } from '../../../ducks/metamask/metamask'; import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay'; @@ -74,12 +75,17 @@ const AssetList = ({ onClickAsset }) => { const istokenDetectionInactiveOnNonMainnetSupportedNetwork = useSelector( getIstokenDetectionInactiveOnNonMainnetSupportedNetwork, ); - + const tokenList = useSelector(getTokenList); + const tokenData = Object.values(tokenList).find( + (token) => token.symbol === primaryCurrencyProperties.suffix, + ); + const title = tokenData?.name || primaryCurrencyProperties.suffix; return ( <> {process.env.MULTICHAIN ? ( onClickAsset(nativeCurrency)} + title={title} data-testid="wallet-balance" primary={ primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index c34d908cd410..de4b64066cde 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { useSelector } from 'react-redux'; import AssetListItem from '../asset-list-item'; -import { getSelectedAddress } from '../../../selectors'; +import { getSelectedAddress, getTokenList } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'; import { MultichainTokenListItem } from '../../multichain'; @@ -20,7 +20,11 @@ export default function TokenCell({ }) { const userAddress = useSelector(getSelectedAddress); const t = useI18nContext(); - + const tokenList = useSelector(getTokenList); + const tokenData = Object.values(tokenList).find( + (token) => token.symbol === symbol, + ); + const title = tokenData?.name || symbol; const formattedFiat = useTokenFiatAmount(address, string, symbol); const warning = balanceError ? ( @@ -51,6 +55,7 @@ export default function TokenCell({ primary={`${string || 0}`} secondary={formattedFiat} isERC721={isERC721} + title={title} /> ) : ( console.log('Test'), + setShowDetectedTokens: { action: 'setShowDetectedTokens' }, }, }; diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index 63d47d934bcc..cd3dbec54c50 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -29,6 +29,7 @@ export const MultichainTokenListItem = ({ tokenImage, primary, secondary, + title, }) => { const primaryTokenImage = useSelector(getNativeCurrencyImage); const t = useI18nContext(); @@ -81,7 +82,7 @@ export const MultichainTokenListItem = ({ ellipsis width={[BLOCK_SIZES.HALF]} > - {tokenSymbol} + {title} ; - -DefaultStory.storyName = 'Default'; From ec5f4e62cab94fa56d57b85c9b1b5ce4c1379ef4 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Mon, 13 Mar 2023 20:43:42 +0530 Subject: [PATCH 36/56] reverted story --- .../multichain-token-list-item.stories.js | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js new file mode 100644 index 000000000000..3b9e278065b6 --- /dev/null +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { MultichainTokenListItem } from './multichain-token-list-item'; + +export default { + title: 'Components/Multichain/MultichainTokenListItem', + component: MultichainTokenListItem, + argTypes: { + tokenSymbol: { + control: 'text', + }, + tokenImage: { + control: 'text', + }, + primary: { + control: 'text', + }, + secondary: { + control: 'text', + }, + }, + args: { + secondary: '$9.80 USD', + primary: '0.006', + tokenImage: './images/eth_logo.svg', + tokenSymbol: 'ETH', + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; From a4f45c91170a91dff0b1808c0af9c03ae9ae6e38 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 14 Mar 2023 00:00:27 +0530 Subject: [PATCH 37/56] added story for multichain token list --- .../multichain-token-list-item.js | 4 +++- .../multichain-token-list-item.stories.js | 24 +++++++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index cd3dbec54c50..2758087bf3e8 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -11,6 +11,7 @@ import { Size, TextColor, TextVariant, + TEXT_ALIGN, } from '../../../helpers/constants/design-system'; import { AvatarNetwork, @@ -75,6 +76,7 @@ export const MultichainTokenListItem = ({ {secondary} diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js index 3b9e278065b6..eb5ade2e098d 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js @@ -17,15 +17,35 @@ export default { secondary: { control: 'text', }, + title: { + control: 'text', + }, }, args: { secondary: '$9.80 USD', primary: '0.006', tokenImage: './images/eth_logo.svg', tokenSymbol: 'ETH', + title: 'Ethereum' }, }; +const Template = (args) => { + return ; +}; -export const DefaultStory = (args) => ; +export const DefaultStory = Template.bind({}); -DefaultStory.storyName = 'Default'; +export const ChaosStory = (args) => ( +

+ +
+); +ChaosStory.storyName = 'ChaosStory'; + +ChaosStory.args = { + title: 'Ethereum Ethereum Ethereum Ethereum Ethereum Ethereum', + secondary: '$945656666.80 USD', + primary: '34449765768526.00', +}; From d106c30a871744ce1085210ac0554cf106a4031d Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 14 Mar 2023 15:51:11 +0530 Subject: [PATCH 38/56] updated story --- .../multichain-token-list-item.js | 37 ++++++++++++++----- .../multichain-token-list-item.scss | 2 + .../multichain-token-list-item.stories.js | 6 +-- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index 2758087bf3e8..90997818c9f1 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -22,6 +22,7 @@ import { import Box from '../../ui/box/box'; import { getNativeCurrencyImage } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; +import Tooltip from '../../ui/tooltip'; export const MultichainTokenListItem = ({ className, @@ -34,6 +35,8 @@ export const MultichainTokenListItem = ({ }) => { const primaryTokenImage = useSelector(getNativeCurrencyImage); const t = useI18nContext(); + const dataTheme = document.documentElement.getAttribute('data-theme'); + console.log(dataTheme, "them") return ( + + + + {title} + + + - {title} - - {secondary} diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss index 498ca1db2da5..6b8c07106460 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss @@ -1,4 +1,6 @@ .multichain-token-list-item { + $self: &; + &__container-cell { &:hover, &:focus-within { diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js index eb5ade2e098d..972c0ff25320 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js @@ -37,7 +37,7 @@ export const DefaultStory = Template.bind({}); export const ChaosStory = (args) => (
@@ -45,7 +45,7 @@ export const ChaosStory = (args) => ( ChaosStory.storyName = 'ChaosStory'; ChaosStory.args = { - title: 'Ethereum Ethereum Ethereum Ethereum Ethereum Ethereum', - secondary: '$945656666.80 USD', + title: 'long Long Nameeeee', + secondary: '$94556756776.80 USD', primary: '34449765768526.00', }; From 0b435f34409ec1e84e9bb4e96d973ed055fe5765 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 14 Mar 2023 16:40:49 +0530 Subject: [PATCH 39/56] updated tooltip --- .../multichain-token-list-item.js | 7 +-- ui/components/ui/tooltip/index.scss | 44 ------------------- ui/components/ui/tooltip/tooltip.js | 2 +- 3 files changed, 3 insertions(+), 50 deletions(-) diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index 90997818c9f1..84576132403b 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -87,12 +87,9 @@ export const MultichainTokenListItem = ({ interactive html={title} containerClassName="multichain-token-list-item__tooltip" + disabled={title.length < 12} tooltipInnerClassName="multichain-token-list-item__tooltip" - theme={ - dataTheme === 'light' - ? 'multichain-dark' - : 'multichain-light' - } + theme={dataTheme === 'light' ? 'dark' : 'light'} > From b298141e711a77c142f07f4a7a02b12d89ab2924 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 1 Mar 2023 19:32:27 +0530 Subject: [PATCH 40/56] updated the new token list component --- .vscode/settings.json | 5 +- .../component-library/token-list/index.js | 1 + .../token-list/token-list.js | 120 ++++++++++++++++++ .../token-list/token-list.scss | 3 + .../token-list/token-list.stories.js | 31 +++++ 5 files changed, 159 insertions(+), 1 deletion(-) create mode 100644 ui/components/component-library/token-list/index.js create mode 100644 ui/components/component-library/token-list/token-list.js create mode 100644 ui/components/component-library/token-list/token-list.scss create mode 100644 ui/components/component-library/token-list/token-list.stories.js diff --git a/.vscode/settings.json b/.vscode/settings.json index b1f9efcae8f1..62c0f5b9950a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,5 +2,8 @@ "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", "editor.tabSize": 2, "files.trimTrailingWhitespace": true, - "javascript.preferences.importModuleSpecifier": "relative" + "javascript.preferences.importModuleSpecifier": "relative", + "[javascript]": { + "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + } } diff --git a/ui/components/component-library/token-list/index.js b/ui/components/component-library/token-list/index.js new file mode 100644 index 000000000000..3c91d349edf1 --- /dev/null +++ b/ui/components/component-library/token-list/index.js @@ -0,0 +1 @@ +export { NewTokenList } from './token-list'; diff --git a/ui/components/component-library/token-list/token-list.js b/ui/components/component-library/token-list/token-list.js new file mode 100644 index 000000000000..52d6733056fd --- /dev/null +++ b/ui/components/component-library/token-list/token-list.js @@ -0,0 +1,120 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { useSelector } from 'react-redux' +import classnames from 'classnames' +import { + DISPLAY, + FLEX_DIRECTION, + FONT_WEIGHT, + JustifyContent, + Size, + TextColor, + TextVariant, +} from '../../../helpers/constants/design-system' +import { + AvatarNetwork, + AvatarToken, + AvatarWithBadge, + AVATAR_WITH_BADGE_POSTIONS, + Text, +} from '..' +import Box from '../../ui/box/box' +import { getNativeCurrencyImage } from '../../../selectors' + +export const NewTokenList = ({ + className, + onClick, + tokenSymbol, + tokenImage, + primary, + secondary, +}) => { + const primaryTokenImage = useSelector(getNativeCurrencyImage) + return ( + + + + } + marginRight={3} + > + + + + + + {tokenSymbol} + + + {secondary} + + + + {primary} {tokenSymbol} + + + + + ) +} + +NewTokenList.propTypes = { + /** + * An additional className to apply to the TokenList. + */ + + className: PropTypes.string, + /** + * The onClick handler to be passed to the NewTokenList component + */ + onClick: PropTypes.func, + /** + * tokenSymbol represents the symbol of the Token + */ + tokenSymbol: PropTypes.string, + /** + * tokenImage represnts the image of the token icon + */ + tokenImage: PropTypes.string, + /** + * primary represents the balance + */ + primary: PropTypes.string, + /** + * secondary represents the balance in dollars + */ + secondary: PropTypes.string, + /** + * NewTokenList also accepts all props from Box + */ + ...Box.propTypes, +} + +NewTokenList.defaultProps = { + className: undefined, + tokenImage: undefined, +} diff --git a/ui/components/component-library/token-list/token-list.scss b/ui/components/component-library/token-list/token-list.scss new file mode 100644 index 000000000000..a2fa588c7ddb --- /dev/null +++ b/ui/components/component-library/token-list/token-list.scss @@ -0,0 +1,3 @@ +.token-list { + cursor: pointer; +} diff --git a/ui/components/component-library/token-list/token-list.stories.js b/ui/components/component-library/token-list/token-list.stories.js new file mode 100644 index 000000000000..caa4d2b13157 --- /dev/null +++ b/ui/components/component-library/token-list/token-list.stories.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { NewTokenList } from './token-list'; + +export default { + title: 'Components/ComponentLibrary/NewTokenList', + component: NewTokenList, + argTypes: { + tokenSymbol: { + control: 'text', + }, + tokenImage: { + control: 'text', + }, + primary: { + control: 'text', + }, + secondary: { + control: 'text', + }, + }, + args: { + secondary: '$9.80 USD', + primary: '0.006', + tokenImage: './images/eth_logo.svg', + tokenSymbol: 'ETH', + }, +}; + +export const DefaultStory = (args) => + +DefaultStory.storyName = 'Default'; From cf0b5bc0f13c0e9308ebb57d4b7cce1067e8d6e7 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 1 Mar 2023 23:26:39 +0530 Subject: [PATCH 41/56] fixed redesign folder error --- .../token-list/token-list.scss | 3 -- .../multichain/redesign-components.scss | 1 + .../token-list/index.js | 0 .../token-list/token-list.js | 35 ++++++++----------- .../multichain/token-list/token-list.scss | 9 +++++ .../token-list/token-list.stories.js | 4 +-- 6 files changed, 27 insertions(+), 25 deletions(-) delete mode 100644 ui/components/component-library/token-list/token-list.scss create mode 100644 ui/components/multichain/redesign-components.scss rename ui/components/{component-library => multichain}/token-list/index.js (100%) rename ui/components/{component-library => multichain}/token-list/token-list.js (79%) create mode 100644 ui/components/multichain/token-list/token-list.scss rename ui/components/{component-library => multichain}/token-list/token-list.stories.js (91%) diff --git a/ui/components/component-library/token-list/token-list.scss b/ui/components/component-library/token-list/token-list.scss deleted file mode 100644 index a2fa588c7ddb..000000000000 --- a/ui/components/component-library/token-list/token-list.scss +++ /dev/null @@ -1,3 +0,0 @@ -.token-list { - cursor: pointer; -} diff --git a/ui/components/multichain/redesign-components.scss b/ui/components/multichain/redesign-components.scss new file mode 100644 index 000000000000..febd152e823b --- /dev/null +++ b/ui/components/multichain/redesign-components.scss @@ -0,0 +1 @@ +@import 'token-list/token-list'; diff --git a/ui/components/component-library/token-list/index.js b/ui/components/multichain/token-list/index.js similarity index 100% rename from ui/components/component-library/token-list/index.js rename to ui/components/multichain/token-list/index.js diff --git a/ui/components/component-library/token-list/token-list.js b/ui/components/multichain/token-list/token-list.js similarity index 79% rename from ui/components/component-library/token-list/token-list.js rename to ui/components/multichain/token-list/token-list.js index 52d6733056fd..21499b76e07c 100644 --- a/ui/components/component-library/token-list/token-list.js +++ b/ui/components/multichain/token-list/token-list.js @@ -1,7 +1,7 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { useSelector } from 'react-redux' -import classnames from 'classnames' +import React from 'react'; +import PropTypes from 'prop-types'; +import { useSelector } from 'react-redux'; +import classnames from 'classnames'; import { DISPLAY, FLEX_DIRECTION, @@ -10,16 +10,16 @@ import { Size, TextColor, TextVariant, -} from '../../../helpers/constants/design-system' +} from '../../../helpers/constants/design-system'; import { AvatarNetwork, AvatarToken, AvatarWithBadge, AVATAR_WITH_BADGE_POSTIONS, Text, -} from '..' -import Box from '../../ui/box/box' -import { getNativeCurrencyImage } from '../../../selectors' +} from '../../component-library'; +import Box from '../../ui/box/box'; +import { getNativeCurrencyImage } from '../../../selectors'; export const NewTokenList = ({ className, @@ -29,7 +29,7 @@ export const NewTokenList = ({ primary, secondary, }) => { - const primaryTokenImage = useSelector(getNativeCurrencyImage) + const primaryTokenImage = useSelector(getNativeCurrencyImage); return ( } @@ -58,7 +58,7 @@ export const NewTokenList = ({ @@ -79,8 +79,8 @@ export const NewTokenList = ({ - ) -} + ); +}; NewTokenList.propTypes = { /** @@ -112,9 +112,4 @@ NewTokenList.propTypes = { * NewTokenList also accepts all props from Box */ ...Box.propTypes, -} - -NewTokenList.defaultProps = { - className: undefined, - tokenImage: undefined, -} +}; diff --git a/ui/components/multichain/token-list/token-list.scss b/ui/components/multichain/token-list/token-list.scss new file mode 100644 index 000000000000..a5db9d867425 --- /dev/null +++ b/ui/components/multichain/token-list/token-list.scss @@ -0,0 +1,9 @@ +.token-list { + &__container { + &--cell { + &--text-container { + width: 100%; + } + } + } +} diff --git a/ui/components/component-library/token-list/token-list.stories.js b/ui/components/multichain/token-list/token-list.stories.js similarity index 91% rename from ui/components/component-library/token-list/token-list.stories.js rename to ui/components/multichain/token-list/token-list.stories.js index caa4d2b13157..a7964d1d15d3 100644 --- a/ui/components/component-library/token-list/token-list.stories.js +++ b/ui/components/multichain/token-list/token-list.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { NewTokenList } from './token-list'; export default { - title: 'Components/ComponentLibrary/NewTokenList', + title: 'Components/Redesign/NewTokenList', component: NewTokenList, argTypes: { tokenSymbol: { @@ -26,6 +26,6 @@ export default { }, }; -export const DefaultStory = (args) => +export const DefaultStory = (args) => ; DefaultStory.storyName = 'Default'; From 6bd40b16355c55c160f359966f34237a0db61d42 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 2 Mar 2023 00:03:15 +0530 Subject: [PATCH 42/56] added feature flag --- .metamaskrc.dist | 1 + development/build/scripts.js | 1 + ui/components/multichain/redesign-components.scss | 1 - 3 files changed, 2 insertions(+), 1 deletion(-) delete mode 100644 ui/components/multichain/redesign-components.scss diff --git a/.metamaskrc.dist b/.metamaskrc.dist index 17350a99aaf5..692954aacebc 100644 --- a/.metamaskrc.dist +++ b/.metamaskrc.dist @@ -3,6 +3,7 @@ PASSWORD=METAMASK PASSWORD INFURA_PROJECT_ID=00000000000 SEGMENT_WRITE_KEY= SWAPS_USE_DEV_APIS= +MULTICHAIN= PUBNUB_PUB_KEY= PUBNUB_SUB_KEY= PORTFOLIO_URL= diff --git a/development/build/scripts.js b/development/build/scripts.js index 7d66260504c2..b9665d22e9ce 100644 --- a/development/build/scripts.js +++ b/development/build/scripts.js @@ -1111,6 +1111,7 @@ async function getEnvironmentVariables({ buildTarget, buildType, version }) { ICON_NAMES: iconNames, MULTICHAIN: config.MULTICHAIN === '1', CONF: devMode ? config : {}, + MULTICHAIN: config.MULTICHAIN === '1', IN_TEST: testing, INFURA_PROJECT_ID: getInfuraProjectId({ buildType, diff --git a/ui/components/multichain/redesign-components.scss b/ui/components/multichain/redesign-components.scss deleted file mode 100644 index febd152e823b..000000000000 --- a/ui/components/multichain/redesign-components.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'token-list/token-list'; From 5539d3eb7a34425444089a77b1d67299a75f68bc Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 14 Mar 2023 16:53:34 +0530 Subject: [PATCH 43/56] reverted unused setting change --- .vscode/settings.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 62c0f5b9950a..b1f9efcae8f1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,8 +2,5 @@ "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", "editor.tabSize": 2, "files.trimTrailingWhitespace": true, - "javascript.preferences.importModuleSpecifier": "relative", - "[javascript]": { - "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" - } + "javascript.preferences.importModuleSpecifier": "relative" } From 64764c0908f1e2938b919c7b2ea29ee1b791693f Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 14 Mar 2023 17:54:59 +0530 Subject: [PATCH 44/56] removed token list --- .../multichain-token-list-item.stories.js | 2 +- ui/components/multichain/token-list/index.js | 1 - .../multichain/token-list/token-list.js | 115 ------------------ .../multichain/token-list/token-list.scss | 9 -- .../token-list/token-list.stories.js | 31 ----- 5 files changed, 1 insertion(+), 157 deletions(-) delete mode 100644 ui/components/multichain/token-list/index.js delete mode 100644 ui/components/multichain/token-list/token-list.js delete mode 100644 ui/components/multichain/token-list/token-list.scss delete mode 100644 ui/components/multichain/token-list/token-list.stories.js diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js index 972c0ff25320..8313bc7f0d3a 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js @@ -26,7 +26,7 @@ export default { primary: '0.006', tokenImage: './images/eth_logo.svg', tokenSymbol: 'ETH', - title: 'Ethereum' + title: 'Ethereum', }, }; const Template = (args) => { diff --git a/ui/components/multichain/token-list/index.js b/ui/components/multichain/token-list/index.js deleted file mode 100644 index 3c91d349edf1..000000000000 --- a/ui/components/multichain/token-list/index.js +++ /dev/null @@ -1 +0,0 @@ -export { NewTokenList } from './token-list'; diff --git a/ui/components/multichain/token-list/token-list.js b/ui/components/multichain/token-list/token-list.js deleted file mode 100644 index 21499b76e07c..000000000000 --- a/ui/components/multichain/token-list/token-list.js +++ /dev/null @@ -1,115 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { useSelector } from 'react-redux'; -import classnames from 'classnames'; -import { - DISPLAY, - FLEX_DIRECTION, - FONT_WEIGHT, - JustifyContent, - Size, - TextColor, - TextVariant, -} from '../../../helpers/constants/design-system'; -import { - AvatarNetwork, - AvatarToken, - AvatarWithBadge, - AVATAR_WITH_BADGE_POSTIONS, - Text, -} from '../../component-library'; -import Box from '../../ui/box/box'; -import { getNativeCurrencyImage } from '../../../selectors'; - -export const NewTokenList = ({ - className, - onClick, - tokenSymbol, - tokenImage, - primary, - secondary, -}) => { - const primaryTokenImage = useSelector(getNativeCurrencyImage); - return ( - - - - } - marginRight={3} - > - - - - - - {tokenSymbol} - - - {secondary} - - - - {primary} {tokenSymbol} - - - - - ); -}; - -NewTokenList.propTypes = { - /** - * An additional className to apply to the TokenList. - */ - - className: PropTypes.string, - /** - * The onClick handler to be passed to the NewTokenList component - */ - onClick: PropTypes.func, - /** - * tokenSymbol represents the symbol of the Token - */ - tokenSymbol: PropTypes.string, - /** - * tokenImage represnts the image of the token icon - */ - tokenImage: PropTypes.string, - /** - * primary represents the balance - */ - primary: PropTypes.string, - /** - * secondary represents the balance in dollars - */ - secondary: PropTypes.string, - /** - * NewTokenList also accepts all props from Box - */ - ...Box.propTypes, -}; diff --git a/ui/components/multichain/token-list/token-list.scss b/ui/components/multichain/token-list/token-list.scss deleted file mode 100644 index a5db9d867425..000000000000 --- a/ui/components/multichain/token-list/token-list.scss +++ /dev/null @@ -1,9 +0,0 @@ -.token-list { - &__container { - &--cell { - &--text-container { - width: 100%; - } - } - } -} diff --git a/ui/components/multichain/token-list/token-list.stories.js b/ui/components/multichain/token-list/token-list.stories.js deleted file mode 100644 index a7964d1d15d3..000000000000 --- a/ui/components/multichain/token-list/token-list.stories.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { NewTokenList } from './token-list'; - -export default { - title: 'Components/Redesign/NewTokenList', - component: NewTokenList, - argTypes: { - tokenSymbol: { - control: 'text', - }, - tokenImage: { - control: 'text', - }, - primary: { - control: 'text', - }, - secondary: { - control: 'text', - }, - }, - args: { - secondary: '$9.80 USD', - primary: '0.006', - tokenImage: './images/eth_logo.svg', - tokenSymbol: 'ETH', - }, -}; - -export const DefaultStory = (args) => ; - -DefaultStory.storyName = 'Default'; From 0057e47074dd9a60c53ff1610bf15fbff18b9e8c Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 15 Mar 2023 13:49:31 +0530 Subject: [PATCH 45/56] fixed lint error --- .../multichain-token-list-item/multichain-token-list-item.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index 84576132403b..2632ad6c6fae 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -36,7 +36,6 @@ export const MultichainTokenListItem = ({ const primaryTokenImage = useSelector(getNativeCurrencyImage); const t = useI18nContext(); const dataTheme = document.documentElement.getAttribute('data-theme'); - console.log(dataTheme, "them") return ( Date: Wed, 15 Mar 2023 13:53:37 +0530 Subject: [PATCH 46/56] updated status --- .../multichain-token-list-item/multichain-token-list-item.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss index 6b8c07106460..3814875edcfc 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.scss @@ -1,5 +1,4 @@ .multichain-token-list-item { - $self: &; &__container-cell { &:hover, @@ -9,7 +8,6 @@ &--text-container { width: 100%; - cursor: pointer; } } } From f4cb5e157223d3f6fb34c982ae5d11a4fc31d3ef Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 15 Mar 2023 21:37:54 +0530 Subject: [PATCH 47/56] updated tooltip --- .../multichain-token-list-item.test.js.snap | 16 ++++-- .../multichain-token-list-item.js | 3 +- ui/components/ui/tooltip/index.scss | 52 +++++++++++++++++++ ui/components/ui/tooltip/tooltip.js | 2 +- 4 files changed, 65 insertions(+), 8 deletions(-) diff --git a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap index 3fe8c787cf37..09371ef8e35d 100644 --- a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap +++ b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap @@ -38,13 +38,19 @@ exports[`MultichainTokenListItem should render correctly 1`] = ` style="flex-grow: 1; overflow: hidden;" >
+
+
+

+

+

-

diff --git a/ui/components/ui/tooltip/index.scss b/ui/components/ui/tooltip/index.scss index e69de29bb2d1..a394ce8c622c 100644 --- a/ui/components/ui/tooltip/index.scss +++ b/ui/components/ui/tooltip/index.scss @@ -0,0 +1,52 @@ +.tippy-popper { + .tippy-tooltip.tippy-tooltip--mm-custom-theme { + background: var(--color-background-default); + color: var(--color-text-default); + box-shadow: var(--shadow-size-md) var(--color-shadow-default); + padding: 12px 16px; + padding-bottom: 11px; + + .tippy-tooltip-content { + @include H7; + + text-align: left; + color: var(--color-text-alternative); + + a { + color: var(--color-primary-default); + } + + p { + margin-bottom: 16px; + + &:last-child { + margin-bottom: 0; + } + } + } + } + + &[x-placement^='top'] + .tippy-tooltip.tippy-tooltip--mm-custom-theme + [x-arrow] { + border-top-color: var(--color-background-default); + } + + &[x-placement^='right'] + .tippy-tooltip.tippy-tooltip--mm-custom-theme + [x-arrow] { + border-right-color: var(--color-background-default); + } + + &[x-placement^='left'] + .tippy-tooltip.tippy-tooltip--mm-custom-theme + [x-arrow] { + border-left-color: var(--color-background-default); + } + + &[x-placement^='bottom'] + .tippy-tooltip.tippy-tooltip--mm-custom-theme + [x-arrow] { + border-bottom-color: var(--color-background-default); + } +} diff --git a/ui/components/ui/tooltip/tooltip.js b/ui/components/ui/tooltip/tooltip.js index 7a02b4dfbe57..b819f6b9ece4 100644 --- a/ui/components/ui/tooltip/tooltip.js +++ b/ui/components/ui/tooltip/tooltip.js @@ -86,7 +86,7 @@ export default class Tooltip extends PureComponent { title={disabled ? '' : title} trigger={trigger} open={open} - theme={theme} // Required for correct theming + theme={`tippy-tooltip--mm-custom ${theme}`} // Required for correct theming tabIndex={tabIndex || 0} tag={tag} > From 0b66049febd2dec7570bde2a481b0424ec911ffd Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 16 Mar 2023 14:55:37 +0530 Subject: [PATCH 48/56] updated token-list-item changes --- ui/components/app/asset-list/asset-list.js | 13 ++++----- ui/components/app/token-cell/token-cell.js | 26 ++++++++--------- .../multichain-token-list-item.test.js.snap | 4 +-- .../multichain-token-list-item.js | 16 ++++++++-- .../multichain-token-list-item.scss | 1 - .../multichain-token-list-item.stories.js | 29 ++++++++++++++++++- ui/components/ui/tooltip/index.scss | 16 +++------- 7 files changed, 66 insertions(+), 39 deletions(-) diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index 650e412e0b91..1cdba2422cb8 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -16,13 +16,11 @@ import { } from '../../../selectors'; import { getNativeCurrency } from '../../../ducks/metamask/metamask'; import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay'; -import Typography from '../../ui/typography/typography'; import Box from '../../ui/box/box'; import { Color, - TypographyVariant, - FONT_WEIGHT, JustifyContent, + TextVariant, } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../../contexts/metametrics'; @@ -33,6 +31,7 @@ import { MultichainTokenListItem, MultichainImportTokenLink, } from '../../multichain'; +import { Text } from '../../component-library'; import DetectedTokensLink from './detetcted-tokens-link/detected-tokens-link'; const AssetList = ({ onClickAsset }) => { @@ -143,13 +142,13 @@ const AssetList = ({ onClickAsset }) => { ) : ( <> - {t('missingToken')} - + diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index de4b64066cde..58b7b24b569c 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -7,6 +7,8 @@ import { getSelectedAddress, getTokenList } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'; import { MultichainTokenListItem } from '../../multichain'; +import { ButtonLink, Text } from '../../component-library'; +import { TextColor } from '../../../helpers/constants/design-system'; export default function TokenCell({ address, @@ -27,34 +29,30 @@ export default function TokenCell({ const title = tokenData?.name || symbol; const formattedFiat = useTokenFiatAmount(address, string, symbol); const warning = balanceError ? ( - + {t('troubleTokenBalances')} - event.stopPropagation()} - style={{ color: 'var(--color-warning-default)' }} + textProps={{ + color: TextColor.warningDefault, + }} > {t('here')} - - + + ) : null; return ( <> {process.env.MULTICHAIN ? ( onClick(address)} tokenSymbol={symbol} - tokenDecimals={decimals} tokenImage={image} - warning={warning} primary={`${string || 0}`} secondary={formattedFiat} - isERC721={isERC721} title={title} /> ) : ( @@ -63,7 +61,7 @@ export default function TokenCell({ 'token-cell--outdated': Boolean(balanceError), })} iconClassName="token-cell__icon" - onClick={onClick.bind(null, address)} + onClick={() => onClick(address)} tokenAddress={address} tokenSymbol={symbol} tokenDecimals={decimals} diff --git a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap index 09371ef8e35d..2daaf8a44458 100644 --- a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap +++ b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap @@ -15,7 +15,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = ` class="box mm-badge-wrapper box--margin-right-3 box--display-inline-block box--flex-direction-row" >

?
@@ -23,7 +23,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = ` class="box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right box--flex-direction-row" >
Ethereum logo } marginRight={3} > - + { return ; }; @@ -45,7 +58,21 @@ export const ChaosStory = (args) => ( ChaosStory.storyName = 'ChaosStory'; ChaosStory.args = { - title: 'long Long Nameeeee', + title: 'Really long, long name', secondary: '$94556756776.80 USD', primary: '34449765768526.00', }; + +export const NoImagesStory = Template.bind({}); + +NoImagesStory.decorators = [ + (Story) => ( + + + + ), +]; + +NoImagesStory.args = { + tokenImage: '', +}; diff --git a/ui/components/ui/tooltip/index.scss b/ui/components/ui/tooltip/index.scss index a394ce8c622c..3bc86f9102b2 100644 --- a/ui/components/ui/tooltip/index.scss +++ b/ui/components/ui/tooltip/index.scss @@ -26,27 +26,19 @@ } } - &[x-placement^='top'] - .tippy-tooltip.tippy-tooltip--mm-custom-theme - [x-arrow] { + &[x-placement^='top'] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] { border-top-color: var(--color-background-default); } - &[x-placement^='right'] - .tippy-tooltip.tippy-tooltip--mm-custom-theme - [x-arrow] { + &[x-placement^='right'] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] { border-right-color: var(--color-background-default); } - &[x-placement^='left'] - .tippy-tooltip.tippy-tooltip--mm-custom-theme - [x-arrow] { + &[x-placement^='left'] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] { border-left-color: var(--color-background-default); } - &[x-placement^='bottom'] - .tippy-tooltip.tippy-tooltip--mm-custom-theme - [x-arrow] { + &[x-placement^='bottom'] .tippy-tooltip.tippy-tooltip--mm-custom-theme [x-arrow] { border-bottom-color: var(--color-background-default); } } From cd32aa1c334074d756b92963b987f40910d950e2 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 16 Mar 2023 22:40:34 +0530 Subject: [PATCH 49/56] updated actionbutton click for detect token banner --- ui/components/app/asset-list/asset-list.js | 2 +- .../detected-token-banner/detected-token-banner.js | 6 +++--- .../detected-token-banner/detected-token-banner.stories.js | 2 +- .../detected-token-banner/detected-token-banner.test.js | 3 ++- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index 1cdba2422cb8..1ec5e40f112d 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -126,7 +126,7 @@ const AssetList = ({ onClickAsset }) => { <> {process.env.MULTICHAIN ? ( setShowDetectedTokens(true)} margin={4} /> ) : ( diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.js b/ui/components/multichain/detected-token-banner/detected-token-banner.js index bd324fa451eb..d9eb587bda7b 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.js @@ -11,7 +11,7 @@ import { BannerAlert } from '../../component-library'; export const DetectedTokensBanner = ({ className, - setShowDetectedTokens, + actionButtonOnClick, ...props }) => { const t = useI18nContext(); @@ -23,7 +23,7 @@ export const DetectedTokensBanner = ({ ); const handleOnClick = () => { - setShowDetectedTokens(true); + actionButtonOnClick(); trackEvent({ event: EVENT_NAMES.TOKEN_IMPORT_CLICKED, category: EVENT.CATEGORIES.WALLET, @@ -49,6 +49,6 @@ export const DetectedTokensBanner = ({ }; DetectedTokensBanner.propTypes = { - setShowDetectedTokens: PropTypes.func.isRequired, + actionButtonOnClick: PropTypes.func.isRequired, className: PropTypes.string, }; diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js b/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js index 2ee1fa214ad0..080b476effd3 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.stories.js @@ -5,7 +5,7 @@ export default { title: 'Components/Multichain/DetectedTokensBanner', component: DetectedTokensBanner, argTypes: { - setShowDetectedTokens: { action: 'setShowDetectedTokens' }, + actionButtonOnClick: { action: 'setShowDetectedTokens' }, }, }; diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.test.js b/ui/components/multichain/detected-token-banner/detected-token-banner.test.js index 1b02d6b7c07c..e7c78b47b3b6 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.test.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.test.js @@ -7,11 +7,12 @@ import { DetectedTokensBanner } from './detected-token-banner'; describe('DetectedTokensBanner', () => { let setShowDetectedTokensSpy; + const args = {}; beforeEach(() => { setShowDetectedTokensSpy = jest.fn(); - args.setShowDetectedTokens = setShowDetectedTokensSpy; + args.actionButtonOnClick = setShowDetectedTokensSpy; }); it('should render correctly', () => { From 14b5a0974e4ea1f9e767e30df51d65240945ef9c Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 16 Mar 2023 23:02:59 +0530 Subject: [PATCH 50/56] updated snapshot --- .../__snapshots__/multichain-token-list-item.test.js.snap | 2 +- .../multichain-token-list-item/multichain-token-list-item.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap index 2daaf8a44458..bf4effea172c 100644 --- a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap +++ b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap @@ -26,7 +26,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = ` class="box mm-avatar-base mm-avatar-base--size-xs mm-avatar-network box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--border-color-border-muted box--border-style-solid box--border-width-1" > Ethereum logo diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index 7fc0e7358611..01512a99ebe2 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -62,7 +62,7 @@ export const MultichainTokenListItem = ({ badge={ Date: Thu, 16 Mar 2023 23:03:40 +0530 Subject: [PATCH 51/56] updated symbol --- .../multichain-token-list-item/multichain-token-list-item.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index 01512a99ebe2..c8c488ac1fb4 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -22,7 +22,6 @@ import { } from '../../component-library'; import Box from '../../ui/box/box'; import { getNativeCurrencyImage } from '../../../selectors'; -import { useI18nContext } from '../../../hooks/useI18nContext'; import Tooltip from '../../ui/tooltip'; export const MultichainTokenListItem = ({ @@ -35,7 +34,6 @@ export const MultichainTokenListItem = ({ title, }) => { const primaryTokenImage = useSelector(getNativeCurrencyImage); - const t = useI18nContext(); const dataTheme = document.documentElement.getAttribute('data-theme'); return ( Date: Mon, 20 Mar 2023 12:29:17 +0530 Subject: [PATCH 52/56] updated styles --- ui/components/app/asset-list/asset-list.js | 21 ++++++++----------- .../multichain-token-list-item.js | 1 + .../multichain-token-list-item.scss | 4 ---- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index 1ec5e40f112d..e83606e8bfe7 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -19,8 +19,8 @@ import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay'; import Box from '../../ui/box/box'; import { Color, - JustifyContent, TextVariant, + TEXT_ALIGN, } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { MetaMetricsContext } from '../../../contexts/metametrics'; @@ -85,14 +85,12 @@ const AssetList = ({ onClickAsset }) => { onClickAsset(nativeCurrency)} title={title} - data-testid="wallet-balance" primary={ primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value } tokenSymbol={primaryCurrencyProperties.suffix} secondary={showFiat ? secondaryCurrencyDisplay : undefined} tokenImage={balanceIsLoading ? null : primaryTokenImage} - identiconBorder /> ) : ( { ) : ( <> - - - {t('missingToken')} - - + + {t('missingToken')} + diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index c8c488ac1fb4..0e0586f68c95 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -84,6 +84,7 @@ export const MultichainTokenListItem = ({ className="multichain-token-list-item__container-cell--text-container" display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} + width={BLOCK_SIZES.FULL} style={{ flexGrow: 1, overflow: 'hidden' }} > Date: Mon, 20 Mar 2023 13:57:25 +0530 Subject: [PATCH 53/56] updated eth decimal and token url --- ui/components/app/token-cell/token-cell.js | 3 ++- .../detected-token-banner/detected-token-banner.js | 6 ++++++ .../__snapshots__/multichain-token-list-item.test.js.snap | 4 +++- .../multichain-token-list-item.js | 6 ++++-- .../multichain-token-list-item.stories.js | 2 +- 5 files changed, 16 insertions(+), 5 deletions(-) diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index 58b7b24b569c..60d8f304a879 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -27,6 +27,7 @@ export default function TokenCell({ (token) => token.symbol === symbol, ); const title = tokenData?.name || symbol; + const tokenImage = tokenData?.iconUrl || image; const formattedFiat = useTokenFiatAmount(address, string, symbol); const warning = balanceError ? ( @@ -50,7 +51,7 @@ export default function TokenCell({ onClick(address)} tokenSymbol={symbol} - tokenImage={image} + tokenImage={tokenImage} primary={`${string || 0}`} secondary={formattedFiat} title={title} diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.js b/ui/components/multichain/detected-token-banner/detected-token-banner.js index d9eb587bda7b..790630ef71d2 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.js @@ -49,6 +49,12 @@ export const DetectedTokensBanner = ({ }; DetectedTokensBanner.propTypes = { + /** + * Handler to be passed to the DetectedTokenBanner component + */ actionButtonOnClick: PropTypes.func.isRequired, + /** + * An additional className to the DetectedTokenBanner component + */ className: PropTypes.string, }; diff --git a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap index bf4effea172c..e28076d6b45a 100644 --- a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap +++ b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap @@ -34,7 +34,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
+ NaN +

diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js index 0e0586f68c95..82ed7752403a 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js @@ -23,6 +23,7 @@ import { import Box from '../../ui/box/box'; import { getNativeCurrencyImage } from '../../../selectors'; import Tooltip from '../../ui/tooltip'; +import { useI18nContext } from '../../../hooks/useI18nContext'; export const MultichainTokenListItem = ({ className, @@ -33,6 +34,7 @@ export const MultichainTokenListItem = ({ secondary, title, }) => { + const t = useI18nContext(); const primaryTokenImage = useSelector(getNativeCurrencyImage); const dataTheme = document.documentElement.getAttribute('data-theme'); return ( @@ -106,7 +108,7 @@ export const MultichainTokenListItem = ({ variant={TextVariant.bodyMd} ellipsis > - {title} + {title === 'ETH' ? t('networkNameEthereum') : title} @@ -120,7 +122,7 @@ export const MultichainTokenListItem = ({ - {primary} {tokenSymbol} + {Number(primary).toFixed(3)} {tokenSymbol}{' '} diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js index 36d74b02b2d7..168e6ed1aa0f 100644 --- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js +++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.stories.js @@ -29,7 +29,7 @@ export default { }, args: { secondary: '$9.80 USD', - primary: '0.006', + primary: '88.00687889', tokenImage: './images/eth_logo.svg', tokenSymbol: 'ETH', title: 'Ethereum', From 407f92f35b1537164298757015c184652aea92d2 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Mon, 20 Mar 2023 14:53:31 +0530 Subject: [PATCH 54/56] updated snapshot --- .../__snapshots__/multichain-token-list-item.test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap index e28076d6b45a..b4af82ccb0a6 100644 --- a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap +++ b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap @@ -15,7 +15,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = ` class="box mm-badge-wrapper box--margin-right-3 box--display-inline-block box--flex-direction-row" >
?
@@ -23,7 +23,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = ` class="box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right box--flex-direction-row" >
undefined logo Date: Wed, 22 Mar 2023 16:52:08 +0530 Subject: [PATCH 55/56] updated scripts --- .metamaskrc.dist | 1 - development/build/scripts.js | 1 - ui/components/multichain/index.scss | 2 -- ui/components/multichain/multichain-components.scss | 8 ++++++++ ui/css/index.scss | 1 - 5 files changed, 8 insertions(+), 5 deletions(-) delete mode 100644 ui/components/multichain/index.scss diff --git a/.metamaskrc.dist b/.metamaskrc.dist index 692954aacebc..17350a99aaf5 100644 --- a/.metamaskrc.dist +++ b/.metamaskrc.dist @@ -3,7 +3,6 @@ PASSWORD=METAMASK PASSWORD INFURA_PROJECT_ID=00000000000 SEGMENT_WRITE_KEY= SWAPS_USE_DEV_APIS= -MULTICHAIN= PUBNUB_PUB_KEY= PUBNUB_SUB_KEY= PORTFOLIO_URL= diff --git a/development/build/scripts.js b/development/build/scripts.js index b9665d22e9ce..7d66260504c2 100644 --- a/development/build/scripts.js +++ b/development/build/scripts.js @@ -1111,7 +1111,6 @@ async function getEnvironmentVariables({ buildTarget, buildType, version }) { ICON_NAMES: iconNames, MULTICHAIN: config.MULTICHAIN === '1', CONF: devMode ? config : {}, - MULTICHAIN: config.MULTICHAIN === '1', IN_TEST: testing, INFURA_PROJECT_ID: getInfuraProjectId({ buildType, diff --git a/ui/components/multichain/index.scss b/ui/components/multichain/index.scss deleted file mode 100644 index bef86b1dde89..000000000000 --- a/ui/components/multichain/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'account-list-item/index'; -@import 'account-list-menu/index'; diff --git a/ui/components/multichain/multichain-components.scss b/ui/components/multichain/multichain-components.scss index 73541efde799..e8ee40ffa49e 100644 --- a/ui/components/multichain/multichain-components.scss +++ b/ui/components/multichain/multichain-components.scss @@ -1 +1,9 @@ +/** +* Please import your styles in order of atomicity. +* The most atomic styles should be imported first. +* This will help improve specificity and reduce the chance of +* unintended overrides. +**/ +@import 'account-list-item/index'; +@import 'account-list-menu/index'; @import 'multichain-token-list-item/multichain-token-list-item'; diff --git a/ui/css/index.scss b/ui/css/index.scss index c02d07a29d09..a26c7ae09cf6 100644 --- a/ui/css/index.scss +++ b/ui/css/index.scss @@ -10,7 +10,6 @@ @import './base-styles.scss'; @import '../components/component-library/component-library-components.scss'; @import '../components/app/app-components'; -@import '../components/multichain/index.scss'; @import '../components/ui/ui-components'; @import '../components/multichain/multichain-components.scss'; @import '../pages/pages'; From 79102f132c29e87a7cd9f71b90245426330e7ea0 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 22 Mar 2023 17:00:21 +0530 Subject: [PATCH 56/56] updated snapshots --- .../detected-token-banner.test.js.snap | 8 +-- .../multichain-import-token-link.test.js.snap | 56 +++++++------------ 2 files changed, 22 insertions(+), 42 deletions(-) diff --git a/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap b/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap index 399d52d719e8..cbf587cb2064 100644 --- a/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap +++ b/ui/components/multichain/detected-token-banner/__snapshots__/detected-token-banner.test.js.snap @@ -17,13 +17,9 @@ exports[`DetectedTokensBanner should render correctly 1`] = ` 3 new tokens found in this account

diff --git a/ui/components/multichain/multichain-import-token-link/__snapshots__/multichain-import-token-link.test.js.snap b/ui/components/multichain/multichain-import-token-link/__snapshots__/multichain-import-token-link.test.js.snap index 7388ba004073..925788efa313 100644 --- a/ui/components/multichain/multichain-import-token-link/__snapshots__/multichain-import-token-link.test.js.snap +++ b/ui/components/multichain/multichain-import-token-link/__snapshots__/multichain-import-token-link.test.js.snap @@ -9,36 +9,28 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = ` class="box box--display-flex box--flex-direction-row box--align-items-center" >
@@ -54,36 +46,28 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = ` class="box box--display-flex box--flex-direction-row box--align-items-center" >