mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Remove ETH badge from NetworkAccountBalanceHeader when on non-ETH net… (#16102)
* Remove ETH badge from NetworkAccountBalanceHeader when on non-ETH networks * Network specific icons, or fallback, in the network-account-balance-header * Update snapshots * Code cleanup Co-authored-by: Dan Miller <danjm.com@gmail.com>
This commit is contained in:
parent
68642ee47a
commit
c88efadf1e
@ -217,6 +217,7 @@ export default class ConfirmPageContainer extends Component {
|
|||||||
tokenName={nativeCurrency}
|
tokenName={nativeCurrency}
|
||||||
accountAddress={fromAddress}
|
accountAddress={fromAddress}
|
||||||
networkName={networkName}
|
networkName={networkName}
|
||||||
|
chainId={currentTransaction.chainId}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<ConfirmPageContainerHeader
|
<ConfirmPageContainerHeader
|
||||||
|
@ -3,10 +3,25 @@
|
|||||||
border-bottom: 1px solid var(--color-border-muted);
|
border-bottom: 1px solid var(--color-border-muted);
|
||||||
|
|
||||||
&__network-account {
|
&__network-account {
|
||||||
&__ident-icon-ethereum {
|
&__ident-icon-ethereum,
|
||||||
|
&__ident-icon-ethereum--gray {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid var(--color-background-default);
|
||||||
|
background: var(--color-background-default);
|
||||||
margin-inline-start: -10px;
|
margin-inline-start: -10px;
|
||||||
margin-top: -20px;
|
margin-top: -20px;
|
||||||
border: none !important;
|
|
||||||
|
> span {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ident-icon-ethereum--gray {
|
||||||
|
border: 1px solid var(--color-border-default);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import React, { useContext } from 'react';
|
import React, { useContext } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import IconWithFallback from '../../ui/icon-with-fallback';
|
||||||
import Identicon from '../../ui/identicon';
|
import Identicon from '../../ui/identicon';
|
||||||
import {
|
import {
|
||||||
DISPLAY,
|
DISPLAY,
|
||||||
@ -14,15 +15,21 @@ import {
|
|||||||
import Box from '../../ui/box/box';
|
import Box from '../../ui/box/box';
|
||||||
import { I18nContext } from '../../../contexts/i18n';
|
import { I18nContext } from '../../../contexts/i18n';
|
||||||
import Typography from '../../ui/typography';
|
import Typography from '../../ui/typography';
|
||||||
|
import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network';
|
||||||
|
|
||||||
export default function NetworkAccountBalanceHeader({
|
export default function NetworkAccountBalanceHeader({
|
||||||
networkName,
|
networkName,
|
||||||
accountName,
|
accountName,
|
||||||
accountBalance,
|
accountBalance,
|
||||||
tokenName,
|
tokenName, // Derived from nativeCurrency
|
||||||
accountAddress,
|
accountAddress,
|
||||||
|
chainId,
|
||||||
}) {
|
}) {
|
||||||
const t = useContext(I18nContext);
|
const t = useContext(I18nContext);
|
||||||
|
const networkIcon = CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId];
|
||||||
|
const networkIconWrapperClass = networkIcon
|
||||||
|
? 'network-account-balance-header__network-account__ident-icon-ethereum'
|
||||||
|
: 'network-account-balance-header__network-account__ident-icon-ethereum--gray';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
@ -45,12 +52,11 @@ export default function NetworkAccountBalanceHeader({
|
|||||||
alignItems={ALIGN_ITEMS.CENTER}
|
alignItems={ALIGN_ITEMS.CENTER}
|
||||||
>
|
>
|
||||||
<Identicon address={accountAddress} diameter={32} />
|
<Identicon address={accountAddress} diameter={32} />
|
||||||
<Identicon
|
<IconWithFallback
|
||||||
address={accountAddress}
|
name={networkName}
|
||||||
diameter={16}
|
size={16}
|
||||||
imageBorder
|
icon={networkIcon}
|
||||||
image="./images/eth_badge.svg"
|
wrapperClassName={networkIconWrapperClass}
|
||||||
className="network-account-balance-header__network-account__ident-icon-ethereum"
|
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
<Box
|
<Box
|
||||||
@ -109,4 +115,5 @@ NetworkAccountBalanceHeader.propTypes = {
|
|||||||
accountBalance: PropTypes.string,
|
accountBalance: PropTypes.string,
|
||||||
tokenName: PropTypes.string,
|
tokenName: PropTypes.string,
|
||||||
accountAddress: PropTypes.string,
|
accountAddress: PropTypes.string,
|
||||||
|
chainId: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
@ -8,6 +8,7 @@ const IconWithFallback = ({
|
|||||||
size,
|
size,
|
||||||
className,
|
className,
|
||||||
fallbackClassName,
|
fallbackClassName,
|
||||||
|
wrapperClassName,
|
||||||
...props
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
const [iconError, setIconError] = useState(false);
|
const [iconError, setIconError] = useState(false);
|
||||||
@ -17,21 +18,28 @@ const IconWithFallback = ({
|
|||||||
setIconError(true);
|
setIconError(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
return !iconError && icon ? (
|
return (
|
||||||
<img
|
<div className={classnames(wrapperClassName)}>
|
||||||
onError={handleOnError}
|
{!iconError && icon ? (
|
||||||
src={icon}
|
<img
|
||||||
style={style}
|
onError={handleOnError}
|
||||||
className={className}
|
src={icon}
|
||||||
alt={name || 'icon'}
|
style={style}
|
||||||
{...props}
|
className={className}
|
||||||
/>
|
alt={name || 'icon'}
|
||||||
) : (
|
{...props}
|
||||||
<span
|
/>
|
||||||
className={classnames('icon-with-fallback__fallback', fallbackClassName)}
|
) : (
|
||||||
>
|
<span
|
||||||
{name && name.length ? name.charAt(0).toUpperCase() : ''}
|
className={classnames(
|
||||||
</span>
|
'icon-with-fallback__fallback',
|
||||||
|
fallbackClassName,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{name?.charAt(0).toUpperCase() || ''}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -52,6 +60,10 @@ IconWithFallback.propTypes = {
|
|||||||
* className to apply to the image tag
|
* className to apply to the image tag
|
||||||
*/
|
*/
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
|
/**
|
||||||
|
* className to apply to the div that wraps the icon
|
||||||
|
*/
|
||||||
|
wrapperClassName: PropTypes.string,
|
||||||
/**
|
/**
|
||||||
* Additional className to apply to the fallback span tag
|
* Additional className to apply to the fallback span tag
|
||||||
*/
|
*/
|
||||||
|
@ -13,11 +13,15 @@ exports[`DropdownSearchList renders the component with initial props 1`] = `
|
|||||||
<div
|
<div
|
||||||
class="dropdown-search-list__selector-closed"
|
class="dropdown-search-list__selector-closed"
|
||||||
>
|
>
|
||||||
<img
|
<div
|
||||||
alt="symbol"
|
class=""
|
||||||
class="url-icon dropdown-search-list__selector-closed-icon"
|
>
|
||||||
src="iconUrl"
|
<img
|
||||||
/>
|
alt="symbol"
|
||||||
|
class="url-icon dropdown-search-list__selector-closed-icon"
|
||||||
|
src="iconUrl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="dropdown-search-list__labels"
|
class="dropdown-search-list__labels"
|
||||||
>
|
>
|
||||||
|
@ -11,11 +11,15 @@ exports[`MainQuoteSummary renders the component with initial props 1`] = `
|
|||||||
>
|
>
|
||||||
2
|
2
|
||||||
</span>
|
</span>
|
||||||
<span
|
<div
|
||||||
class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
|
class=""
|
||||||
>
|
>
|
||||||
E
|
<span
|
||||||
</span>
|
class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
|
||||||
|
>
|
||||||
|
E
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<span
|
<span
|
||||||
class="main-quote-summary__source-row-symbol"
|
class="main-quote-summary__source-row-symbol"
|
||||||
title="ETH"
|
title="ETH"
|
||||||
@ -29,11 +33,15 @@ exports[`MainQuoteSummary renders the component with initial props 2`] = `
|
|||||||
<div
|
<div
|
||||||
class="main-quote-summary__destination-row"
|
class="main-quote-summary__destination-row"
|
||||||
>
|
>
|
||||||
<span
|
<div
|
||||||
class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
|
class=""
|
||||||
>
|
>
|
||||||
B
|
<span
|
||||||
</span>
|
class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
|
||||||
|
>
|
||||||
|
B
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<span
|
<span
|
||||||
class="main-quote-summary__destination-row-symbol"
|
class="main-quote-summary__destination-row-symbol"
|
||||||
>
|
>
|
||||||
|
@ -42,11 +42,15 @@ exports[`SearchableItemList renders the component with initial props 2`] = `
|
|||||||
data-testid="searchable-item-list__item"
|
data-testid="searchable-item-list__item"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
<img
|
<div
|
||||||
alt="primaryLabel"
|
class=""
|
||||||
class="url-icon"
|
>
|
||||||
src="iconUrl"
|
<img
|
||||||
/>
|
alt="primaryLabel"
|
||||||
|
class="url-icon"
|
||||||
|
src="iconUrl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="searchable-item-list__labels"
|
class="searchable-item-list__labels"
|
||||||
>
|
>
|
||||||
|
@ -6,11 +6,15 @@ exports[`ItemList renders the component with initial props 1`] = `
|
|||||||
data-testid="searchable-item-list__item"
|
data-testid="searchable-item-list__item"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
<img
|
<div
|
||||||
alt="primaryLabel"
|
class=""
|
||||||
class="url-icon"
|
>
|
||||||
src="iconUrl"
|
<img
|
||||||
/>
|
alt="primaryLabel"
|
||||||
|
class="url-icon"
|
||||||
|
src="iconUrl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
class="searchable-item-list__labels"
|
class="searchable-item-list__labels"
|
||||||
>
|
>
|
||||||
|
@ -11,11 +11,15 @@ exports[`ViewQuote renders the component with EIP-1559 enabled 1`] = `
|
|||||||
>
|
>
|
||||||
10
|
10
|
||||||
</span>
|
</span>
|
||||||
<img
|
<div
|
||||||
alt="DAI"
|
class=""
|
||||||
class="url-icon main-quote-summary__icon"
|
>
|
||||||
src="https://foo.bar/logo.png"
|
<img
|
||||||
/>
|
alt="DAI"
|
||||||
|
class="url-icon main-quote-summary__icon"
|
||||||
|
src="https://foo.bar/logo.png"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<span
|
<span
|
||||||
class="main-quote-summary__source-row-symbol"
|
class="main-quote-summary__source-row-symbol"
|
||||||
title="DAI"
|
title="DAI"
|
||||||
@ -85,11 +89,15 @@ exports[`ViewQuote renders the component with initial props 1`] = `
|
|||||||
>
|
>
|
||||||
10
|
10
|
||||||
</span>
|
</span>
|
||||||
<img
|
<div
|
||||||
alt="DAI"
|
class=""
|
||||||
class="url-icon main-quote-summary__icon"
|
>
|
||||||
src="https://foo.bar/logo.png"
|
<img
|
||||||
/>
|
alt="DAI"
|
||||||
|
class="url-icon main-quote-summary__icon"
|
||||||
|
src="https://foo.bar/logo.png"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<span
|
<span
|
||||||
class="main-quote-summary__source-row-symbol"
|
class="main-quote-summary__source-row-symbol"
|
||||||
title="DAI"
|
title="DAI"
|
||||||
|
@ -178,6 +178,7 @@ export default function TokenAllowance({
|
|||||||
accountBalance={currentTokenBalance}
|
accountBalance={currentTokenBalance}
|
||||||
tokenName={tokenSymbol}
|
tokenName={tokenSymbol}
|
||||||
accountAddress={userAddress}
|
accountAddress={userAddress}
|
||||||
|
chainId={fullTxData.chainId}
|
||||||
/>
|
/>
|
||||||
<Box
|
<Box
|
||||||
display={DISPLAY.FLEX}
|
display={DISPLAY.FLEX}
|
||||||
|
Loading…
Reference in New Issue
Block a user