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 && }
+
+
+
+
+ >
);
}, [