mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
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
This commit is contained in:
Nidhi Kumari
GitHub
parent
6254fbb98d
commit
b8b94c2c1f
@ -24,6 +24,7 @@ import {
|
|||||||
DetectedTokensBanner,
|
DetectedTokensBanner,
|
||||||
TokenListItem,
|
TokenListItem,
|
||||||
ImportTokenLink,
|
ImportTokenLink,
|
||||||
|
BalanceOverview,
|
||||||
} from '../../multichain';
|
} from '../../multichain';
|
||||||
|
|
||||||
const AssetList = ({ onClickAsset }) => {
|
const AssetList = ({ onClickAsset }) => {
|
||||||
@ -67,6 +68,7 @@ const AssetList = ({ onClickAsset }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{process.env.MULTICHAIN ? <BalanceOverview /> : null}
|
||||||
<TokenListItem
|
<TokenListItem
|
||||||
onClick={() => onClickAsset(nativeCurrency)}
|
onClick={() => onClickAsset(nativeCurrency)}
|
||||||
title={nativeCurrency}
|
title={nativeCurrency}
|
||||||
|
|||||||
@ -72,4 +72,8 @@ UserPreferencedCurrencyDisplay.propTypes = {
|
|||||||
]),
|
]),
|
||||||
showFiat: PropTypes.bool,
|
showFiat: PropTypes.bool,
|
||||||
showCurrencySuffix: PropTypes.bool,
|
showCurrencySuffix: PropTypes.bool,
|
||||||
|
/**
|
||||||
|
* UserPreferencedCurrencyDisplay component should also accept all the props from Currency component
|
||||||
|
*/
|
||||||
|
...CurrencyDisplay.propTypes,
|
||||||
};
|
};
|
||||||
|
|||||||
@ -0,0 +1,294 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Balance Overview and Portfolio for Tokens should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="mm-box token-balance-overview mm-box--padding-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mm-box token-balance-overview__balance"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mm-box token-balance-overview__primary-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="spinner loading-overlay__spinner"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="lds-spinner"
|
||||||
|
height="100%"
|
||||||
|
preserveAspectRatio="xMidYMid"
|
||||||
|
style="background: none;"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
width="100%"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
transform="rotate(0 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.9166666666666666s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(30 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.8333333333333334s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(60 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.75s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(90 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.6666666666666666s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(120 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.5833333333333334s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(150 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.5s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(180 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.4166666666666667s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(210 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.3333333333333333s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(240 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.25s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(270 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.16666666666666666s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(300 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="-0.08333333333333333s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
transform="rotate(330 50 50)"
|
||||||
|
>
|
||||||
|
<rect
|
||||||
|
fill="var(--color-secondary-default)"
|
||||||
|
height="30"
|
||||||
|
rx="0"
|
||||||
|
ry="0"
|
||||||
|
width="10"
|
||||||
|
x="45"
|
||||||
|
y="0"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
begin="0s"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
values="1;0"
|
||||||
|
/>
|
||||||
|
</rect>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="mm-box mm-text mm-button-base mm-button-base--size-md token-balance-portfolio mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
|
||||||
|
>
|
||||||
|
Portfolio
|
||||||
|
<span
|
||||||
|
class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
|
||||||
|
style="mask-image: url('./images/icons/export.svg');"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
171
ui/components/multichain/balance-overview/balance-overview.js
Normal file
171
ui/components/multichain/balance-overview/balance-overview.js
Normal file
@ -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 ? (
|
||||||
|
<ButtonSecondary
|
||||||
|
className="token-balance-mmi-portfolio"
|
||||||
|
onClick={() => {
|
||||||
|
portfolioEvent();
|
||||||
|
window.open(mmiPortfolioUrl, '_blank');
|
||||||
|
}}
|
||||||
|
endIconName={IconName.Export}
|
||||||
|
>
|
||||||
|
{t('portfolio')}
|
||||||
|
</ButtonSecondary>
|
||||||
|
) : null;
|
||||||
|
};
|
||||||
|
|
||||||
|
///: END:ONLY_INCLUDE_IN
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
className="token-balance-overview"
|
||||||
|
display={Display.Flex}
|
||||||
|
justifyContent={JustifyContent.spaceBetween}
|
||||||
|
alignItems={AlignItems.center}
|
||||||
|
padding={4}
|
||||||
|
>
|
||||||
|
<Box className="token-balance-overview__balance">
|
||||||
|
{balance ? (
|
||||||
|
<UserPreferencedCurrencyDisplay
|
||||||
|
className={classnames({
|
||||||
|
'token-balance-overview__cached-secondary-balance':
|
||||||
|
balanceIsCached,
|
||||||
|
'token-balance-overview__secondary-balance': !balanceIsCached,
|
||||||
|
})}
|
||||||
|
data-testid="token-balance-overview__secondary-currency"
|
||||||
|
value={balance}
|
||||||
|
type={PRIMARY}
|
||||||
|
ethNumberOfDecimals={4}
|
||||||
|
textProps={{
|
||||||
|
variant: TextVariant.headingLg,
|
||||||
|
color: TextColor.textDefault,
|
||||||
|
}}
|
||||||
|
suffixProps={{
|
||||||
|
variant: TextVariant.headingLg,
|
||||||
|
color: TextColor.textDefault,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<Box className="token-balance-overview__primary-container">
|
||||||
|
{balance ? (
|
||||||
|
<UserPreferencedCurrencyDisplay
|
||||||
|
className={classnames('token-balance-overview__primary-balance', {
|
||||||
|
'token-balance-overview__cached-balance': balanceIsCached,
|
||||||
|
})}
|
||||||
|
data-testid="token-balance-overview__primary-currency"
|
||||||
|
value={balance}
|
||||||
|
type={SECONDARY}
|
||||||
|
ethNumberOfDecimals={4}
|
||||||
|
hideTitle
|
||||||
|
textProps={{
|
||||||
|
variant: TextVariant.bodyMd,
|
||||||
|
color: TextColor.textAlternative,
|
||||||
|
}}
|
||||||
|
suffixProps={{
|
||||||
|
variant: TextVariant.bodyMd,
|
||||||
|
color: TextColor.textAlternative,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Spinner
|
||||||
|
color="var(--color-secondary-default)"
|
||||||
|
className="loading-overlay__spinner"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{balanceIsCached ? (
|
||||||
|
<span className="token-balance-overview__cached-star">*</span>
|
||||||
|
) : null}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
{
|
||||||
|
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
|
||||||
|
renderInstitutionalButtons()
|
||||||
|
///: END:ONLY_INCLUDE_IN
|
||||||
|
}
|
||||||
|
{
|
||||||
|
///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
|
||||||
|
<ButtonSecondary
|
||||||
|
className="token-balance-portfolio"
|
||||||
|
endIconName={IconName.Export}
|
||||||
|
onClick={() => {
|
||||||
|
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')}
|
||||||
|
</ButtonSecondary>
|
||||||
|
///: END:ONLY_INCLUDE_IN
|
||||||
|
}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { BalanceOverview } from '.';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Components/Multichain/BalanceOverview',
|
||||||
|
component: BalanceOverview,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DefaultStory = () => <BalanceOverview />;
|
||||||
|
|
||||||
|
DefaultStory.storyName = 'Default';
|
||||||
@ -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(<BalanceOverview />, store);
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('Balance Overview and Portfolio for Tokens', () => {
|
||||||
|
it('should match snapshot', () => {
|
||||||
|
const { container } = render();
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
1
ui/components/multichain/balance-overview/index.js
Normal file
1
ui/components/multichain/balance-overview/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { BalanceOverview } from './balance-overview';
|
||||||
@ -5,6 +5,7 @@ export { AccountPicker } from './account-picker';
|
|||||||
export { ActivityListItem } from './activity-list-item';
|
export { ActivityListItem } from './activity-list-item';
|
||||||
export { AppHeader } from './app-header';
|
export { AppHeader } from './app-header';
|
||||||
export { AppFooter } from './app-footer';
|
export { AppFooter } from './app-footer';
|
||||||
|
export { BalanceOverview } from './balance-overview';
|
||||||
export { DetectedTokensBanner } from './detected-token-banner';
|
export { DetectedTokensBanner } from './detected-token-banner';
|
||||||
export { GlobalMenu } from './global-menu';
|
export { GlobalMenu } from './global-menu';
|
||||||
export { ImportTokenLink } from './import-token-link';
|
export { ImportTokenLink } from './import-token-link';
|
||||||
|
|||||||
@ -781,6 +781,7 @@ export default class Home extends PureComponent {
|
|||||||
} else if (this.state.notificationClosing || this.state.redirecting) {
|
} else if (this.state.notificationClosing || this.state.redirecting) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
const tabPadding = process.env.MULTICHAIN ? 4 : 0; // TODO: Remove tabPadding and add paddingTop={4} to parent container Box of Tabs
|
||||||
|
|
||||||
const showWhatsNew =
|
const showWhatsNew =
|
||||||
completedOnboarding &&
|
completedOnboarding &&
|
||||||
@ -848,23 +849,25 @@ export default class Home extends PureComponent {
|
|||||||
///: END:ONLY_INCLUDE_IN
|
///: END:ONLY_INCLUDE_IN
|
||||||
}
|
}
|
||||||
<div className="home__main-view">
|
<div className="home__main-view">
|
||||||
<div className="home__balance-wrapper">
|
{process.env.MULTICHAIN ? null : (
|
||||||
{
|
<div className="home__balance-wrapper">
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
|
{
|
||||||
<EthOverview showAddress />
|
///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask)
|
||||||
///: END:ONLY_INCLUDE_IN
|
<EthOverview showAddress />
|
||||||
}
|
///: END:ONLY_INCLUDE_IN
|
||||||
{
|
}
|
||||||
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
|
{
|
||||||
<EthOverview
|
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
|
||||||
showAddress
|
<EthOverview
|
||||||
mmiPortfolioEnabled={mmiPortfolioEnabled}
|
showAddress
|
||||||
mmiPortfolioUrl={mmiPortfolioUrl}
|
mmiPortfolioEnabled={mmiPortfolioEnabled}
|
||||||
/>
|
mmiPortfolioUrl={mmiPortfolioUrl}
|
||||||
///: END:ONLY_INCLUDE_IN
|
/>
|
||||||
}
|
///: END:ONLY_INCLUDE_IN
|
||||||
</div>
|
}
|
||||||
<Box style={{ flexGrow: '1' }}>
|
</div>
|
||||||
|
)}
|
||||||
|
<Box style={{ flexGrow: '1' }} paddingTop={tabPadding}>
|
||||||
<Tabs
|
<Tabs
|
||||||
t={this.context.t}
|
t={this.context.t}
|
||||||
defaultActiveTabKey={defaultHomeActiveTabName}
|
defaultActiveTabKey={defaultHomeActiveTabName}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user