From b8b94c2c1fb20338e4430722381ca33f12b78ad0 Mon Sep 17 00:00:00 2001 From: Nidhi Kumari Date: Tue, 29 Aug 2023 22:07:23 +0530 Subject: [PATCH] UX Multichain: Added balance-overview component (#20528) * added balance-overview component * updated balance overview component to use Currency utility props * added MULTICHAIN feature flag * lint fix * lint fix * lint fix * updated ternary operators --- ui/components/app/asset-list/asset-list.js | 2 + ...-preferenced-currency-display.component.js | 4 + .../balance-overview.test.js.snap | 294 ++++++++++++++++++ .../balance-overview/balance-overview.js | 171 ++++++++++ .../balance-overview.stories.js | 11 + .../balance-overview/balance-overview.test.js | 21 ++ .../multichain/balance-overview/index.js | 1 + ui/components/multichain/index.js | 1 + ui/pages/home/home.component.js | 37 ++- 9 files changed, 525 insertions(+), 17 deletions(-) create mode 100644 ui/components/multichain/balance-overview/__snapshots__/balance-overview.test.js.snap create mode 100644 ui/components/multichain/balance-overview/balance-overview.js create mode 100644 ui/components/multichain/balance-overview/balance-overview.stories.js create mode 100644 ui/components/multichain/balance-overview/balance-overview.test.js create mode 100644 ui/components/multichain/balance-overview/index.js diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index c74079364..0cb8e636c 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -24,6 +24,7 @@ import { DetectedTokensBanner, TokenListItem, ImportTokenLink, + BalanceOverview, } from '../../multichain'; const AssetList = ({ onClickAsset }) => { @@ -67,6 +68,7 @@ const AssetList = ({ onClickAsset }) => { return ( <> + {process.env.MULTICHAIN ? : null} onClickAsset(nativeCurrency)} title={nativeCurrency} diff --git a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js index 0206d811f..3f3999601 100644 --- a/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js +++ b/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js @@ -72,4 +72,8 @@ UserPreferencedCurrencyDisplay.propTypes = { ]), showFiat: PropTypes.bool, showCurrencySuffix: PropTypes.bool, + /** + * UserPreferencedCurrencyDisplay component should also accept all the props from Currency component + */ + ...CurrencyDisplay.propTypes, }; diff --git a/ui/components/multichain/balance-overview/__snapshots__/balance-overview.test.js.snap b/ui/components/multichain/balance-overview/__snapshots__/balance-overview.test.js.snap new file mode 100644 index 000000000..5a78485c8 --- /dev/null +++ b/ui/components/multichain/balance-overview/__snapshots__/balance-overview.test.js.snap @@ -0,0 +1,294 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Balance Overview and Portfolio for Tokens should match snapshot 1`] = ` +
+
+
+
+ +
+
+ +
+
+`; diff --git a/ui/components/multichain/balance-overview/balance-overview.js b/ui/components/multichain/balance-overview/balance-overview.js new file mode 100644 index 000000000..ef5181d03 --- /dev/null +++ b/ui/components/multichain/balance-overview/balance-overview.js @@ -0,0 +1,171 @@ +import React, { useContext } from 'react'; +import { useSelector } from 'react-redux'; +import classnames from 'classnames'; +import { useI18nContext } from '../../../hooks/useI18nContext'; +import { MetaMetricsContext } from '../../../contexts/metametrics'; +import { + MetaMetricsEventCategory, + MetaMetricsEventName, +} from '../../../../shared/constants/metametrics'; +import { Box, ButtonSecondary, IconName } from '../../component-library'; +///: BEGIN:ONLY_INCLUDE_IN(build-mmi) +import { + getMmiPortfolioEnabled, + getMmiPortfolioUrl, +} from '../../../selectors/institutional/selectors'; +///: END:ONLY_INCLUDE_IN +///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) +import { getPortfolioUrl } from '../../../helpers/utils/portfolio'; +///: END:ONLY_INCLUDE_IN +import { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + getCurrentChainId, + getMetaMetricsId, + ///: END:ONLY_INCLUDE_IN + getSelectedAccountCachedBalance, + isBalanceCached, +} from '../../../selectors'; +import Spinner from '../../ui/spinner'; +import UserPreferencedCurrencyDisplay from '../../app/user-preferenced-currency-display'; +import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'; +import { + AlignItems, + Display, + JustifyContent, + TextColor, + TextVariant, +} from '../../../helpers/constants/design-system'; + +export const BalanceOverview = () => { + const trackEvent = useContext(MetaMetricsContext); + const t = useI18nContext(); + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + const metaMetricsId = useSelector(getMetaMetricsId); + const chainId = useSelector(getCurrentChainId); + ///: END:ONLY_INCLUDE_IN + const balanceIsCached = useSelector(isBalanceCached); + const balance = useSelector(getSelectedAccountCachedBalance); + + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + const mmiPortfolioEnabled = useSelector(getMmiPortfolioEnabled); + const mmiPortfolioUrl = useSelector(getMmiPortfolioUrl); + + const portfolioEvent = () => { + trackEvent({ + category: MetaMetricsEventCategory.Navigation, + event: MetaMetricsEventName.MMIPortfolioButtonClicked, + }); + }; + const renderInstitutionalButtons = () => { + return mmiPortfolioEnabled ? ( + { + portfolioEvent(); + window.open(mmiPortfolioUrl, '_blank'); + }} + endIconName={IconName.Export} + > + {t('portfolio')} + + ) : null; + }; + + ///: END:ONLY_INCLUDE_IN + return ( + + + {balance ? ( + + ) : null} + + {balance ? ( + + ) : ( + + )} + {balanceIsCached ? ( + * + ) : null} + + + { + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + renderInstitutionalButtons() + ///: END:ONLY_INCLUDE_IN + } + { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + { + const url = getPortfolioUrl( + '', + 'ext_portfolio_button', + metaMetricsId, + ); + global.platform.openTab({ url }); + trackEvent({ + category: MetaMetricsEventCategory.Navigation, + event: MetaMetricsEventName.PortfolioLinkClicked, + properties: { + location: 'Home', + text: 'Portfolio', + chain_id: chainId, + token_symbol: 'ETH', + }, + }); + }} + > + {t('portfolio')} + + ///: END:ONLY_INCLUDE_IN + } + + ); +}; diff --git a/ui/components/multichain/balance-overview/balance-overview.stories.js b/ui/components/multichain/balance-overview/balance-overview.stories.js new file mode 100644 index 000000000..3032bc218 --- /dev/null +++ b/ui/components/multichain/balance-overview/balance-overview.stories.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { BalanceOverview } from '.'; + +export default { + title: 'Components/Multichain/BalanceOverview', + component: BalanceOverview, +}; + +export const DefaultStory = () => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/multichain/balance-overview/balance-overview.test.js b/ui/components/multichain/balance-overview/balance-overview.test.js new file mode 100644 index 000000000..c67926a73 --- /dev/null +++ b/ui/components/multichain/balance-overview/balance-overview.test.js @@ -0,0 +1,21 @@ +import React from 'react'; +import configureStore from '../../../store/store'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import mockState from '../../../../test/data/mock-state.json'; +import { BalanceOverview } from '.'; + +const render = () => { + const store = configureStore({ + metamask: { + ...mockState.metamask, + }, + }); + return renderWithProvider(, store); +}; + +describe('Balance Overview and Portfolio for Tokens', () => { + it('should match snapshot', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/ui/components/multichain/balance-overview/index.js b/ui/components/multichain/balance-overview/index.js new file mode 100644 index 000000000..08baf1b10 --- /dev/null +++ b/ui/components/multichain/balance-overview/index.js @@ -0,0 +1 @@ +export { BalanceOverview } from './balance-overview'; diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js index 47c28e310..45926e4c7 100644 --- a/ui/components/multichain/index.js +++ b/ui/components/multichain/index.js @@ -5,6 +5,7 @@ export { AccountPicker } from './account-picker'; export { ActivityListItem } from './activity-list-item'; export { AppHeader } from './app-header'; export { AppFooter } from './app-footer'; +export { BalanceOverview } from './balance-overview'; export { DetectedTokensBanner } from './detected-token-banner'; export { GlobalMenu } from './global-menu'; export { ImportTokenLink } from './import-token-link'; diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index e200027f1..c4aeb8d00 100644 --- a/ui/pages/home/home.component.js +++ b/ui/pages/home/home.component.js @@ -781,6 +781,7 @@ export default class Home extends PureComponent { } else if (this.state.notificationClosing || this.state.redirecting) { return null; } + const tabPadding = process.env.MULTICHAIN ? 4 : 0; // TODO: Remove tabPadding and add paddingTop={4} to parent container Box of Tabs const showWhatsNew = completedOnboarding && @@ -848,23 +849,25 @@ export default class Home extends PureComponent { ///: END:ONLY_INCLUDE_IN }
-
- { - ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) - - ///: END:ONLY_INCLUDE_IN - } - { - ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) - - ///: END:ONLY_INCLUDE_IN - } -
- + {process.env.MULTICHAIN ? null : ( +
+ { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + + ///: END:ONLY_INCLUDE_IN + } + { + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) + + ///: END:ONLY_INCLUDE_IN + } +
+ )} +