m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Remove ETH badge from NetworkAccountBalanceHeader when on non-ETH net… (#16102)

Browse Source 
* 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:
ryanml 2022-10-25 08:03:45 -07:00 committed by GitHub
parent 68642ee47a
commit c88efadf1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 121 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/components/app/confirm-page-container/confirm-page-container.component.js
View File

@ -217,6 +217,7 @@ export default class ConfirmPageContainer extends Component {
tokenName={nativeCurrency}
accountAddress={fromAddress}
networkName={networkName}
chainId={currentTransaction.chainId}
/>
) : (
<ConfirmPageContainerHeader

19
ui/components/app/network-account-balance-header/index.scss
View File

@ -3,10 +3,25 @@
border-bottom: 1px solid var(--color-border-muted);
&__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-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);
}
}
}

21
ui/components/app/network-account-balance-header/network-account-balance-header.js
View File

@ -1,5 +1,6 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import IconWithFallback from '../../ui/icon-with-fallback';
import Identicon from '../../ui/identicon';
import {
DISPLAY,
@ -14,15 +15,21 @@ import {
import Box from '../../ui/box/box';
import { I18nContext } from '../../../contexts/i18n';
import Typography from '../../ui/typography';
import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network';
export default function NetworkAccountBalanceHeader({
networkName,
accountName,
accountBalance,
tokenName,
tokenName, // Derived from nativeCurrency
accountAddress,
chainId,
}) {
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 (
<Box
@ -45,12 +52,11 @@ export default function NetworkAccountBalanceHeader({
alignItems={ALIGN_ITEMS.CENTER}
>
<Identicon address={accountAddress} diameter={32} />
<Identicon
address={accountAddress}
diameter={16}
imageBorder
image="./images/eth_badge.svg"
className="network-account-balance-header__network-account__ident-icon-ethereum"
<IconWithFallback
name={networkName}
size={16}
icon={networkIcon}
wrapperClassName={networkIconWrapperClass}
/>
</Box>
<Box
@ -109,4 +115,5 @@ NetworkAccountBalanceHeader.propTypes = {
accountBalance: PropTypes.string,
tokenName: PropTypes.string,
accountAddress: PropTypes.string,
chainId: PropTypes.string,
};

42
ui/components/ui/icon-with-fallback/icon-with-fallback.component.js
View File

@ -8,6 +8,7 @@ const IconWithFallback = ({
size,
className,
fallbackClassName,
wrapperClassName,
...props
}) => {
const [iconError, setIconError] = useState(false);
@ -17,21 +18,28 @@ const IconWithFallback = ({
setIconError(true);
};
return !iconError && icon ? (
<img
onError={handleOnError}
src={icon}
style={style}
className={className}
alt={name || 'icon'}
{...props}
/>
) : (
<span
className={classnames('icon-with-fallback__fallback', fallbackClassName)}
>
{name && name.length ? name.charAt(0).toUpperCase() : ''}
</span>
return (
<div className={classnames(wrapperClassName)}>
{!iconError && icon ? (
<img
onError={handleOnError}
src={icon}
style={style}
className={className}
alt={name || 'icon'}
{...props}
/>
) : (
<span
className={classnames(
'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: PropTypes.string,
/**
* className to apply to the div that wraps the icon
*/
wrapperClassName: PropTypes.string,
/**
* Additional className to apply to the fallback span tag
*/

14
ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap
View File

@ -13,11 +13,15 @@ exports[`DropdownSearchList renders the component with initial props 1`] = `
<div
class="dropdown-search-list__selector-closed"
>
<img
alt="symbol"
class="url-icon dropdown-search-list__selector-closed-icon"
src="iconUrl"
/>
<div
class=""
>
<img
alt="symbol"
class="url-icon dropdown-search-list__selector-closed-icon"
src="iconUrl"
/>
</div>
<div
class="dropdown-search-list__labels"
>

24
ui/pages/swaps/main-quote-summary/__snapshots__/main-quote-summary.test.js.snap
View File

@ -11,11 +11,15 @@ exports[`MainQuoteSummary renders the component with initial props 1`] = `
>
2
</span>
<span
class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
<div
class=""
>
E
</span>
<span
class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
>
E
</span>
</div>
<span
class="main-quote-summary__source-row-symbol"
title="ETH"
@ -29,11 +33,15 @@ exports[`MainQuoteSummary renders the component with initial props 2`] = `
<div
class="main-quote-summary__destination-row"
>
<span
class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
<div
class=""
>
B
</span>
<span
class="icon-with-fallback__fallback url-icon__fallback main-quote-summary__icon-fallback"
>
B
</span>
</div>
<span
class="main-quote-summary__destination-row-symbol"
>

14
ui/pages/swaps/searchable-item-list/__snapshots__/searchable-item-list.test.js.snap
View File

@ -42,11 +42,15 @@ exports[`SearchableItemList renders the component with initial props 2`] = `
data-testid="searchable-item-list__item"
tabindex="0"
>
<img
alt="primaryLabel"
class="url-icon"
src="iconUrl"
/>
<div
class=""
>
<img
alt="primaryLabel"
class="url-icon"
src="iconUrl"
/>
</div>
<div
class="searchable-item-list__labels"
>

14
ui/pages/swaps/searchable-item-list/item-list/__snapshots__/item-list.component.test.js.snap
View File

@ -6,11 +6,15 @@ exports[`ItemList renders the component with initial props 1`] = `
data-testid="searchable-item-list__item"
tabindex="0"
>
<img
alt="primaryLabel"
class="url-icon"
src="iconUrl"
/>
<div
class=""
>
<img
alt="primaryLabel"
class="url-icon"
src="iconUrl"
/>
</div>
<div
class="searchable-item-list__labels"
>

28
ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap
View File

@ -11,11 +11,15 @@ exports[`ViewQuote renders the component with EIP-1559 enabled 1`] = `
>
10
</span>
<img
alt="DAI"
class="url-icon main-quote-summary__icon"
src="https://foo.bar/logo.png"
/>
<div
class=""
>
<img
alt="DAI"
class="url-icon main-quote-summary__icon"
src="https://foo.bar/logo.png"
/>
</div>
<span
class="main-quote-summary__source-row-symbol"
title="DAI"
@ -85,11 +89,15 @@ exports[`ViewQuote renders the component with initial props 1`] = `
>
10
</span>
<img
alt="DAI"
class="url-icon main-quote-summary__icon"
src="https://foo.bar/logo.png"
/>
<div
class=""
>
<img
alt="DAI"
class="url-icon main-quote-summary__icon"
src="https://foo.bar/logo.png"
/>
</div>
<span
class="main-quote-summary__source-row-symbol"
title="DAI"

1
ui/pages/token-allowance/token-allowance.js
View File

@ -178,6 +178,7 @@ export default function TokenAllowance({
accountBalance={currentTokenBalance}
tokenName={tokenSymbol}
accountAddress={userAddress}
chainId={fullTxData.chainId}
/>
<Box
display={DISPLAY.FLEX}