diff --git a/app/components/UI/Tokens/TokenList/PortfolioBalance/index.test.tsx b/app/components/UI/Tokens/TokenList/PortfolioBalance/index.test.tsx new file mode 100644 index 00000000000..e1e1f694376 --- /dev/null +++ b/app/components/UI/Tokens/TokenList/PortfolioBalance/index.test.tsx @@ -0,0 +1,141 @@ +import React from 'react'; +import { fireEvent } from '@testing-library/react-native'; +import { BN } from 'ethereumjs-util'; +import renderWithProvider from '../../../../../util/test/renderWithProvider'; +import { backgroundState } from '../../../../../util/test/initial-root-state'; +import AppConstants from '../../../../../../app/core/AppConstants'; +import Routes from '../../../../../../app/constants/navigation/Routes'; +import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors'; +import { PortfolioBalance } from '.'; + +jest.mock('../../../../../core/Engine', () => ({ + getTotalFiatAccountBalance: jest.fn(), + context: { + TokensController: { + ignoreTokens: jest.fn(() => Promise.resolve()), + }, + }, +})); + +const initialState = { + engine: { + backgroundState: { + ...backgroundState, + TokensController: { + tokens: [ + { + name: 'Ethereum', + symbol: 'ETH', + address: '0x0', + decimals: 18, + isETH: true, + + balanceFiat: '< $0.01', + iconUrl: '', + }, + { + name: 'Bat', + symbol: 'BAT', + address: '0x01', + decimals: 18, + balanceFiat: '$0', + iconUrl: '', + }, + { + name: 'Link', + symbol: 'LINK', + address: '0x02', + decimals: 18, + balanceFiat: '$0', + iconUrl: '', + }, + ], + }, + TokenRatesController: { + marketData: { + '0x1': { + '0x0': { price: 0.005 }, + '0x01': { price: 0.005 }, + '0x02': { price: 0.005 }, + }, + }, + }, + CurrencyRateController: { + currentCurrency: 'USD', + currencyRates: { + ETH: { + conversionRate: 1, + }, + }, + }, + TokenBalancesController: { + contractBalances: { + '0x00': new BN(2), + '0x01': new BN(2), + '0x02': new BN(0), + }, + }, + }, + }, + settings: { + primaryCurrency: 'usd', + hideZeroBalanceTokens: true, + }, + security: { + dataCollectionForMarketing: true, + }, +}; + +const mockNavigate = jest.fn(); +const mockPush = jest.fn(); + +jest.mock('@react-navigation/native', () => { + const actualReactNavigation = jest.requireActual('@react-navigation/native'); + return { + ...actualReactNavigation, + useNavigation: () => ({ + navigate: mockNavigate, + push: mockPush, + }), + }; +}); + +// TODO: Replace "any" with type +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const renderPortfolioBalance = (state: any = {}) => + renderWithProvider(, { state }); + +describe('PortfolioBalance', () => { + afterEach(() => { + mockNavigate.mockClear(); + mockPush.mockClear(); + }); + + it('fiat balance must be defined', () => { + const { getByTestId } = renderPortfolioBalance(initialState); + expect( + getByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT), + ).toBeDefined(); + }); + + it('portfolio button should render correctly', () => { + const { getByTestId } = renderPortfolioBalance(initialState); + + expect(getByTestId(WalletViewSelectorsIDs.PORTFOLIO_BUTTON)).toBeDefined(); + }); + + it('navigates to Portfolio url when portfolio button is pressed', () => { + const { getByTestId } = renderPortfolioBalance(initialState); + + const expectedUrl = `${AppConstants.PORTFOLIO.URL}/?metamaskEntry=mobile&metricsEnabled=false&marketingEnabled=${initialState.security.dataCollectionForMarketing}`; + + fireEvent.press(getByTestId(WalletViewSelectorsIDs.PORTFOLIO_BUTTON)); + expect(mockNavigate).toHaveBeenCalledWith(Routes.BROWSER.HOME, { + params: { + newTabUrl: expectedUrl, + timestamp: 123, + }, + screen: Routes.BROWSER.VIEW, + }); + }); +}); diff --git a/app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx b/app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx index f18648f6054..06729279ac3 100644 --- a/app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx +++ b/app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx @@ -25,7 +25,9 @@ import Button, { ButtonSize, ButtonWidthTypes, } from '../../../../../component-library/components/Buttons/Button'; -import Text from '../../../../../component-library/components/Texts/Text'; +import Text, { + TextVariant, +} from '../../../../../component-library/components/Texts/Text'; import AggregatedPercentage from '../../../../../component-library/components-temp/Price/AggregatedPercentage'; import { IconName } from '../../../../../component-library/components/Icons/Icon'; import { BrowserTab } from '../../types'; @@ -110,8 +112,8 @@ export const PortfolioBalance = () => { {fiatBalance} diff --git a/app/components/UI/Tokens/TokenList/index.tsx b/app/components/UI/Tokens/TokenList/index.tsx index 47b88c8e8b9..f5460d51281 100644 --- a/app/components/UI/Tokens/TokenList/index.tsx +++ b/app/components/UI/Tokens/TokenList/index.tsx @@ -16,7 +16,6 @@ import createStyles from '../styles'; import Text from '../../../../component-library/components/Texts/Text'; import { TokenI } from '../types'; import { strings } from '../../../../../locales/i18n'; -import { PortfolioBalance } from './PortfolioBalance'; import { TokenListFooter } from './TokenListFooter'; import { TokenListItem } from './TokenListItem'; @@ -77,7 +76,6 @@ export const TokenList = ({ return tokens?.length ? ( } data={tokens} renderItem={({ item }) => ( } - ListHeaderComponent={} data={ [ { @@ -392,131 +391,6 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = ` > - - - - - 0 USD - - - - - (+0.00%) - - - - - - Portfolio - - - - - } - ListHeaderComponent={} data={ [ { @@ -1641,131 +1514,6 @@ exports[`Tokens should render correctly 1`] = ` > - - - - - 0 USD - - - - - (+0.00%) - - - - - - Portfolio - - - - - } - ListHeaderComponent={} data={ [ { @@ -2906,131 +2653,6 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin > - - - - - 0 USD - - - - - (+0.00%) - - - - - - Portfolio - - - - - { expect(getByTestId(WalletViewSelectorsIDs.TOKENS_CONTAINER)).toBeDefined(); }); - it('fiat balance must be defined', () => { - const { getByTestId } = renderComponent(initialState); - - expect( - getByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT), - ).toBeDefined(); - }); - it('portfolio button should render correctly', () => { - const { getByTestId } = renderComponent(initialState); - - expect(getByTestId(WalletViewSelectorsIDs.PORTFOLIO_BUTTON)).toBeDefined(); - }); - it('navigates to Portfolio url when portfolio button is pressed', () => { - const { getByTestId } = renderComponent(initialState); - - const expectedUrl = `${AppConstants.PORTFOLIO.URL}/?metamaskEntry=mobile&metricsEnabled=false&marketingEnabled=${initialState.security.dataCollectionForMarketing}`; - - fireEvent.press(getByTestId(WalletViewSelectorsIDs.PORTFOLIO_BUTTON)); - expect(mockNavigate).toHaveBeenCalledWith(Routes.BROWSER.HOME, { - params: { - newTabUrl: expectedUrl, - timestamp: 123, - }, - screen: Routes.BROWSER.VIEW, - }); - }); it('should display unable to find conversion rate', async () => { const state = { engine: { diff --git a/app/components/UI/Tokens/styles.ts b/app/components/UI/Tokens/styles.ts index 9292733d50e..2e7b7ccf575 100644 --- a/app/components/UI/Tokens/styles.ts +++ b/app/components/UI/Tokens/styles.ts @@ -99,13 +99,7 @@ const createStyles = (colors: Colors) => alignItems: 'center', marginHorizontal: 16, justifyContent: 'space-between', - marginVertical: 24, - }, - fiatBalance: { - ...fontStyles.normal, - fontSize: 32, - lineHeight: 40, - fontWeight: '500', + paddingTop: 24, }, portfolioLink: { marginLeft: 8 }, bottomModal: { diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx index e8513940f7e..218840f944c 100644 --- a/app/components/Views/Wallet/index.tsx +++ b/app/components/Views/Wallet/index.tsx @@ -103,6 +103,7 @@ import { } from '../../../selectors/notifications'; import { ButtonVariants } from '../../../component-library/components/Buttons/Button'; import { useListNotifications } from '../../../util/notifications/hooks/useNotifications'; +import { PortfolioBalance } from '../../UI/Tokens/TokenList/PortfolioBalance'; import { isObject } from 'lodash'; const createStyles = ({ colors, typography }: Theme) => @@ -120,12 +121,12 @@ const createStyles = ({ colors, typography }: Theme) => backgroundColor: colors.primary.default, }, tabStyle: { - paddingBottom: 0, + paddingBottom: 8, paddingVertical: 8, }, tabBar: { borderColor: colors.background.default, - marginTop: 16, + marginBottom: 8, }, textStyle: { ...(typography.sBodyMD as TextStyle), @@ -593,29 +594,32 @@ const Wallet = ({ {selectedAddress ? ( ) : null} - - - - + <> + {accountBalanceByChainId && } + + + + + ); }, [