5
diff --git a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
index cab80e399a43..020adaa0c952 100644
--- a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
+++ b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap
@@ -75,7 +75,7 @@ exports[`Customize Nonce should match snapshot 1`] = `
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
>
+$0.00
(+0.00%)
diff --git a/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx b/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx
index adbdf5c3c800..ef8e92989dda 100644
--- a/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx
+++ b/ui/components/app/wallet-overview/aggregated-percentage-overview.tsx
@@ -17,7 +17,6 @@ import {
Display,
TextColor,
TextVariant,
- FontWeight,
} from '../../../helpers/constants/design-system';
import { Box, Text } from '../../component-library';
import { getCalculatedTokenAmount1dAgo } from '../../../helpers/utils/util';
@@ -107,8 +106,7 @@ export const AggregatedPercentageOverview = () => {
return (
{
{formattedAmountChange}
;
+
+export const Default = Template.bind({});
diff --git a/ui/components/app/wallet-overview/coin-buttons.tsx b/ui/components/app/wallet-overview/coin-buttons.tsx
index 5a8f1a1dea6f..42ddd4373fc3 100644
--- a/ui/components/app/wallet-overview/coin-buttons.tsx
+++ b/ui/components/app/wallet-overview/coin-buttons.tsx
@@ -60,7 +60,7 @@ import {
IconColor,
JustifyContent,
} from '../../../helpers/constants/design-system';
-import { Box, Icon, IconName } from '../../component-library';
+import { Box, Icon, IconName, IconSize } from '../../component-library';
import IconButton from '../../ui/icon-button';
///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
import useRamps from '../../../hooks/ramps/useRamps/useRamps';
@@ -79,6 +79,7 @@ const CoinButtons = ({
defaultSwapsToken,
///: END:ONLY_INCLUDE_IF
classPrefix = 'coin',
+ iconButtonClassName = '',
}: {
chainId: `0x${string}` | CaipChainId | number;
trackingLocation: string;
@@ -90,6 +91,7 @@ const CoinButtons = ({
defaultSwapsToken?: SwapsEthToken;
///: END:ONLY_INCLUDE_IF
classPrefix?: string;
+ iconButtonClassName?: string;
}) => {
const t = useContext(I18nContext);
const dispatch = useDispatch();
@@ -191,15 +193,27 @@ const CoinButtons = ({
<>
}
+ iconButtonClassName={iconButtonClassName}
+ Icon={
+
+ }
label={t('stake')}
onClick={handleMmiStakingOnClick}
/>
{mmiPortfolioEnabled && (
+
}
label={t('portfolio')}
onClick={handleMmiPortfolioOnClick}
@@ -308,8 +322,13 @@ const CoinButtons = ({
///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+
}
disabled={!isBuyableChain}
data-testid={`${classPrefix}-overview-buy`}
@@ -327,9 +346,9 @@ const CoinButtons = ({
renderInstitutionalButtons()
///: END:ONLY_INCLUDE_IF
}
-
}
onClick={handleSwapOnClick}
@@ -350,10 +370,15 @@ const CoinButtons = ({
///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+
}
label={t('bridge')}
onClick={handleBridgeOnClick}
@@ -365,11 +390,13 @@ const CoinButtons = ({
}
}
disabled={!isSigningEnabled}
@@ -389,11 +416,13 @@ const CoinButtons = ({
)}
}
label={t('receive')}
diff --git a/ui/components/app/wallet-overview/coin-overview.tsx b/ui/components/app/wallet-overview/coin-overview.tsx
index aed0fde5eeea..b67311403309 100644
--- a/ui/components/app/wallet-overview/coin-overview.tsx
+++ b/ui/components/app/wallet-overview/coin-overview.tsx
@@ -1,11 +1,28 @@
-import React, { useContext, useCallback } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useContext, useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
import classnames from 'classnames';
import { zeroAddress } from 'ethereumjs-util';
import { CaipChainId } from '@metamask/utils';
import type { Hex } from '@metamask/utils';
-import { Icon, IconName, IconSize } from '../../component-library';
-import { IconColor } from '../../../helpers/constants/design-system';
+import {
+ Box,
+ ButtonIcon,
+ ButtonIconSize,
+ ButtonLink,
+ ButtonLinkSize,
+ IconName,
+ Popover,
+ PopoverPosition,
+ Text,
+} from '../../component-library';
+import {
+ AlignItems,
+ BlockSize,
+ Display,
+ JustifyContent,
+ TextAlign,
+ TextVariant,
+} from '../../../helpers/constants/design-system';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {
MetaMetricsEventCategory,
@@ -18,12 +35,14 @@ import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display
import { PRIMARY } from '../../../helpers/constants/common';
import {
getDataCollectionForMarketing,
+ getShouldShowAggregatedBalancePopover,
getMetaMetricsId,
getParticipateInMetaMetrics,
getPreferences,
getSelectedAccount,
getShouldHideZeroBalanceTokens,
getTokensMarketData,
+ getIsTestnet,
///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
SwapsEthToken,
///: END:ONLY_INCLUDE_IF
@@ -33,6 +52,9 @@ import Spinner from '../../ui/spinner';
import { PercentageAndAmountChange } from '../../multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change';
import { getMultichainIsEvm } from '../../../selectors/multichain';
import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
+import { setAggregatedBalancePopover } from '../../../store/actions';
+import { useTheme } from '../../../hooks/useTheme';
+import { getSpecificSettingsRoute } from '../../../helpers/utils/settings-search';
import WalletOverview from './wallet-overview';
import CoinButtons from './coin-buttons';
import { AggregatedPercentageOverview } from './aggregated-percentage-overview';
@@ -75,11 +97,22 @@ export const CoinOverview = ({
///: END:ONLY_INCLUDE_IF
const t = useContext(I18nContext);
+ const dispatch = useDispatch();
const trackEvent = useContext(MetaMetricsContext);
+ const showNativeTokenAsMainBalanceRoute = getSpecificSettingsRoute(
+ t,
+ t('general'),
+ t('showNativeTokenAsMainBalance'),
+ );
+
const metaMetricsId = useSelector(getMetaMetricsId);
const isMetaMetricsEnabled = useSelector(getParticipateInMetaMetrics);
const isMarketingEnabled = useSelector(getDataCollectionForMarketing);
+ const theme = useTheme();
+
+ const shouldShowPopover = useSelector(getShouldShowAggregatedBalancePopover);
+ const isTestnet = useSelector(getIsTestnet);
const selectedAccount = useSelector(getSelectedAccount);
const shouldHideZeroBalanceTokens = useSelector(
@@ -94,9 +127,28 @@ export const CoinOverview = ({
const isEvm = useSelector(getMultichainIsEvm);
const balanceToDisplay =
- showNativeTokenAsMainBalance || !isEvm ? balance : totalFiatBalance;
+ showNativeTokenAsMainBalance || isTestnet || !isEvm
+ ? balance
+ : totalFiatBalance;
const tokensMarketData = useSelector(getTokensMarketData);
+ const [isOpen, setIsOpen] = useState(true);
+
+ const handleMouseEnter = () => {
+ setIsOpen(true);
+ };
+
+ const handleClick = () => {
+ setIsOpen(!isOpen);
+ dispatch(setAggregatedBalancePopover());
+ };
+
+ const [referenceElement, setReferenceElement] = useState();
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const setBoxRef = (ref: any) => {
+ setReferenceElement(ref);
+ };
const handlePortfolioOnClick = useCallback(() => {
const url = getPortfolioUrl(
@@ -121,12 +173,37 @@ export const CoinOverview = ({
if (isEvm) {
if (showNativeTokenAsMainBalance) {
return (
-
+
+
+
+
+ {t('portfolio')}
+
+
);
}
- return ;
+ return (
+
+
+
+ {t('portfolio')}
+
+
+ );
}
return null;
};
@@ -142,25 +219,91 @@ export const CoinOverview = ({
{balanceToDisplay ? (
-
+ <>
+
+
+
+ {shouldShowPopover &&
+ !isTestnet &&
+ !showNativeTokenAsMainBalance ? (
+
+
+
+
+ {t('yourBalanceIsAggregated')}
+
+
+
+
+
+ {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore: Expected 0-1 arguments, but got 2.
+ t('aggregatedBalancePopover', [
+
+ {t('settings')}
+ ,
+ ])
+ }
+
+
+
+ ) : null}
+
) : (
)}
@@ -170,20 +313,6 @@ export const CoinOverview = ({
)}
-
-
- {t('portfolio')}
-
-
-
{renderPercentageAndAmountChange()}
@@ -201,6 +330,7 @@ export const CoinOverview = ({
defaultSwapsToken,
///: END:ONLY_INCLUDE_IF
classPrefix,
+ iconButtonClassName: `${classPrefix}-overview__icon-button`,
}}
/>
}
diff --git a/ui/components/app/wallet-overview/index.scss b/ui/components/app/wallet-overview/index.scss
index bbbf57075c24..32135fac6fda 100644
--- a/ui/components/app/wallet-overview/index.scss
+++ b/ui/components/app/wallet-overview/index.scss
@@ -3,11 +3,9 @@
.wallet-overview {
display: flex;
justify-content: space-between;
- align-items: center;
+ align-items: start;
flex: 1;
- min-height: 209px;
min-width: 0;
- padding-top: 10px;
flex-direction: column;
width: 100%;
@@ -16,30 +14,26 @@
display: flex;
gap: 4px;
flex-direction: column;
- align-items: center;
+ align-items: start;
width: 100%;
}
- &__buttons {
- display: flex;
- flex-direction: row;
- height: 68px;
- margin-bottom: 24px;
+ &__icon_button {
+ margin-top: 0 !important;
}
- &__portfolio_button {
+ &__buttons {
display: flex;
flex-direction: row;
- gap: 6px;
- cursor: pointer;
- align-items: center;
- color: var(--color-primary-default);
+ height: 100%;
+ margin-bottom: 16px;
+ padding: 0 16px;
}
&__currency-wrapper {
display: flex;
flex-direction: row;
- gap: 10px;
+ gap: 8px;
}
}
@@ -61,14 +55,17 @@
display: flex;
flex-direction: column;
min-width: 0;
- gap: 4px;
position: relative;
- align-items: center;
+ align-items: start;
margin: 16px 0;
padding: 0 16px;
max-width: 326px;
}
+ &__icon-button {
+ margin-top: 0 !important;
+ }
+
&__primary-container {
display: flex;
max-width: inherit;
@@ -80,17 +77,13 @@
@include design-system.H2;
color: var(--color-text-default);
+ font-weight: 700;
}
&__cached-star {
margin-left: 4px;
}
- &__portfolio-button {
- height: inherit;
- padding-inline-start: 16px;
- }
-
&__cached-balance,
&__cached-star {
color: var(--color-warning-default);
@@ -158,12 +151,13 @@
color: var(--color-text-alternative);
}
- &__portfolio-button {
- height: inherit;
- padding-inline-start: 16px;
- }
-
&__button:last-of-type {
margin-right: 0;
}
}
+
+.balance-popover {
+ &__container {
+ z-index: design-system.$modal-z-index;
+ }
+}
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap
index 5c75df62eef1..1330a1490244 100644
--- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap
+++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`TokenListItem should render correctly 1`] = `
data-testid="multichain-token-list-item-secondary-value"
/>
diff --git a/ui/components/multichain/token-list-item/price/percentage-and-amount-change/__snapshots__/percentage-and-amount-change.test.tsx.snap b/ui/components/multichain/token-list-item/price/percentage-and-amount-change/__snapshots__/percentage-and-amount-change.test.tsx.snap
index e8ca2345490f..7f88ca5456ec 100644
--- a/ui/components/multichain/token-list-item/price/percentage-and-amount-change/__snapshots__/percentage-and-amount-change.test.tsx.snap
+++ b/ui/components/multichain/token-list-item/price/percentage-and-amount-change/__snapshots__/percentage-and-amount-change.test.tsx.snap
@@ -6,14 +6,14 @@ exports[`PercentageChange Component render renders correctly 1`] = `
class="mm-box mm-box--display-flex"
>
+$12.21
(+5.12%)
diff --git a/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.tsx b/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.tsx
index 2d4a7341cad4..daff27d6cddf 100644
--- a/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.tsx
+++ b/ui/components/multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change.tsx
@@ -5,7 +5,6 @@ import { isHexString, zeroAddress } from 'ethereumjs-util';
import { Text, Box } from '../../../../component-library';
import {
Display,
- FontWeight,
TextColor,
TextVariant,
} from '../../../../../helpers/constants/design-system';
@@ -34,8 +33,7 @@ export const renderPercentageWithNumber = (
return (
+5.12%
diff --git a/ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx b/ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx
index bec1857012b1..e540db80a8f1 100644
--- a/ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx
+++ b/ui/components/multichain/token-list-item/price/percentage-change/percentage-change.tsx
@@ -2,7 +2,6 @@ import React from 'react';
import { Box, Text } from '../../../../component-library';
import {
Display,
- FontWeight,
TextColor,
TextVariant,
} from '../../../../../helpers/constants/design-system';
@@ -35,8 +34,7 @@ export const PercentageChange = ({
return (
{primary} {isNativeCurrency ? '' : tokenSymbol}
diff --git a/ui/components/ui/dropdown/dropdown.scss b/ui/components/ui/dropdown/dropdown.scss
index 53e06559b541..395a61b68eee 100644
--- a/ui/components/ui/dropdown/dropdown.scss
+++ b/ui/components/ui/dropdown/dropdown.scss
@@ -3,7 +3,7 @@
.dropdown {
position: relative;
display: inline-block;
- height: 36px;
+ height: 48px;
&__select {
appearance: none;
diff --git a/ui/components/ui/icon-button/icon-button.js b/ui/components/ui/icon-button/icon-button.js
index 69830128ebcd..30b14c0aa205 100644
--- a/ui/components/ui/icon-button/icon-button.js
+++ b/ui/components/ui/icon-button/icon-button.js
@@ -16,6 +16,7 @@ export default function IconButton(props) {
label,
tooltipRender,
className,
+ iconButtonClassName = '',
...otherProps
} = props;
const renderWrapper = tooltipRender ?? defaultRender;
@@ -31,7 +32,10 @@ export default function IconButton(props) {
>
{renderWrapper(
<>
-
+
{Icon}
{label.length > 10 ? (
@@ -66,5 +70,6 @@ IconButton.propTypes = {
label: PropTypes.string.isRequired,
tooltipRender: PropTypes.func,
className: PropTypes.string,
+ iconButtonClassName: PropTypes.string,
'data-testid': PropTypes.string,
};
diff --git a/ui/components/ui/icon-button/icon-button.scss b/ui/components/ui/icon-button/icon-button.scss
index 97529366befa..e09373b23744 100644
--- a/ui/components/ui/icon-button/icon-button.scss
+++ b/ui/components/ui/icon-button/icon-button.scss
@@ -6,11 +6,11 @@
align-items: center;
background-color: unset;
text-align: center;
- width: 60px;
+ width: 64px;
@include design-system.H7;
- font-size: 13px;
+ font-size: 12px;
cursor: pointer;
color: var(--color-primary-default);
@@ -21,9 +21,9 @@
height: 36px;
width: 36px;
background: var(--color-primary-default);
- border-radius: 18px;
+ border-radius: 99px;
margin-top: 6px;
- margin-bottom: 5px;
+ margin-bottom: 4px;
margin-inline: auto;
}
diff --git a/ui/components/ui/text-field/text-field.component.js b/ui/components/ui/text-field/text-field.component.js
index a7637e76a729..e80d5e43fc73 100644
--- a/ui/components/ui/text-field/text-field.component.js
+++ b/ui/components/ui/text-field/text-field.component.js
@@ -77,13 +77,15 @@ const styles = {
border: '1px solid var(--color-border-default)',
color: 'var(--color-text-default)',
height: '48px',
- borderRadius: '6px',
padding: '0 16px',
display: 'flex',
alignItems: 'center',
'&$inputFocused': {
border: '1px solid var(--color-primary-default)',
},
+ borderRadius: '8px',
+ fontSize: '0.875rem',
+ fontFamily: 'Euclid Circular B, Roboto, Helvetica, Arial, sans-serif',
},
largeInputLabel: {
...inputLabelBase,
@@ -203,6 +205,7 @@ const getBorderedThemeInputProps = ({
max,
autoComplete,
},
+ disableUnderline: 'true',
},
});
diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js
index f4529ed1d6ad..569999f8900e 100644
--- a/ui/helpers/constants/settings.js
+++ b/ui/helpers/constants/settings.js
@@ -34,9 +34,9 @@ const SETTINGS_CONSTANTS = [
},
{
tabMessage: (t) => t('general'),
- sectionMessage: (t) => t('primaryCurrencySetting'),
- descriptionMessage: (t) => t('primaryCurrencySettingDescription'),
- route: `${GENERAL_ROUTE}#primary-currency`,
+ sectionMessage: (t) => t('showNativeTokenAsMainBalance'),
+ descriptionMessage: (t) => t('showNativeTokenAsMainBalance'),
+ route: `${GENERAL_ROUTE}#show-native-token-as-main-balance`,
iconName: IconName.Setting,
},
{
diff --git a/ui/helpers/utils/settings-search.js b/ui/helpers/utils/settings-search.js
index 447a39901059..af13e1d71c65 100644
--- a/ui/helpers/utils/settings-search.js
+++ b/ui/helpers/utils/settings-search.js
@@ -25,6 +25,15 @@ function getFilteredSettingsRoutes(t, tabMessage) {
});
}
+export function getSpecificSettingsRoute(t, tabMessage, sectionMessage) {
+ return getSettingsRoutes().find((routeObject) => {
+ return (
+ routeObject.tabMessage(t) === tabMessage &&
+ routeObject.sectionMessage(t) === sectionMessage
+ );
+ });
+}
+
/**
* @param {Function} t - context.t function
* @param {string} tabMessage
diff --git a/ui/helpers/utils/settings-search.test.js b/ui/helpers/utils/settings-search.test.js
index 709b0354a4e7..1e440b8f0aff 100644
--- a/ui/helpers/utils/settings-search.test.js
+++ b/ui/helpers/utils/settings-search.test.js
@@ -4,6 +4,7 @@ import {
getSettingsRoutes,
getNumberOfSettingRoutesInTab,
handleSettingsRefs,
+ getSpecificSettingsRoute,
} from './settings-search';
const t = (key) => {
@@ -209,4 +210,17 @@ describe('Settings Search Utils', () => {
expect(handleSettingsRefs(t, t('general'), settingsRefs)).toBeUndefined();
});
});
+
+ describe('getSpecificSettingsRoute', () => {
+ it('should return show native token as main balance route', () => {
+ const result = getSpecificSettingsRoute(
+ t,
+ t('general'),
+ t('showNativeTokenAsMainBalance'),
+ );
+ expect(result.route).toBe(
+ '/settings/general#show-native-token-as-main-balance',
+ );
+ });
+ });
});
diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
index ef6e6331d2ba..95828e3e250e 100644
--- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
+++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`AssetPage should render a native asset 1`] = `
data-theme="light"
>
@@ -79,7 +79,7 @@ exports[`AssetPage should render a native asset 1`] = `
data-theme="light"
>
0 TEST
@@ -352,7 +352,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
data-theme="light"
>
@@ -371,7 +371,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
data-theme="light"
>
@@ -390,7 +390,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
data-theme="light"
>
@@ -409,7 +409,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
data-theme="light"
>
@@ -427,7 +427,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
data-theme="light"
>
@@ -446,7 +446,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
data-theme="light"
>
@@ -515,7 +515,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
class="mm-box mm-box--display-flex"
>
0
@@ -835,7 +835,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
data-theme="light"
>
@@ -854,7 +854,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
data-theme="light"
>
@@ -873,7 +873,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
data-theme="light"
>
@@ -892,7 +892,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
data-theme="light"
>
@@ -910,7 +910,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
data-theme="light"
>
@@ -929,7 +929,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
data-theme="light"
>
@@ -998,7 +998,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
class="mm-box mm-box--display-flex"
>
0
diff --git a/ui/pages/asset/components/token-buttons.tsx b/ui/pages/asset/components/token-buttons.tsx
index a07cdaca2d48..bb3f129bade8 100644
--- a/ui/pages/asset/components/token-buttons.tsx
+++ b/ui/pages/asset/components/token-buttons.tsx
@@ -48,7 +48,12 @@ import {
JustifyContent,
} from '../../../helpers/constants/design-system';
import IconButton from '../../../components/ui/icon-button/icon-button';
-import { Box, Icon, IconName } from '../../../components/component-library';
+import {
+ Box,
+ Icon,
+ IconName,
+ IconSize,
+} from '../../../components/component-library';
///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
import { getIsNativeTokenBuyable } from '../../../ducks/ramps';
///: END:ONLY_INCLUDE_IF
@@ -115,7 +120,11 @@ const TokenButtons = ({
+
}
label={t('buyAndSell')}
data-testid="token-overview-buy"
@@ -144,7 +153,11 @@ const TokenButtons = ({
+
}
label={t('stake')}
data-testid="token-overview-mmi-stake"
@@ -163,6 +176,7 @@ const TokenButtons = ({
}
label={t('portfolio')}
@@ -215,6 +229,7 @@ const TokenButtons = ({
}
label={t('send')}
@@ -229,6 +244,7 @@ const TokenButtons = ({
}
onClick={() => {
@@ -281,7 +297,11 @@ const TokenButtons = ({
className="token-overview__button"
data-testid="token-overview-bridge"
Icon={
-
+
}
label={t('bridge')}
onClick={() => {
diff --git a/ui/pages/home/index.scss b/ui/pages/home/index.scss
index 03b4cd5d7cf9..5a85a3eb5d3c 100644
--- a/ui/pages/home/index.scss
+++ b/ui/pages/home/index.scss
@@ -20,6 +20,7 @@
min-width: 0;
display: flex;
flex-direction: column;
+ padding-top: 8px;
}
&__connect-status-text {
diff --git a/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap b/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
index fcc11ec8336b..6318abd37570 100644
--- a/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
+++ b/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
@@ -501,7 +501,7 @@ exports[`AdvancedTab Component should match snapshot 1`] = `
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
>