Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 4279 - Hide token images in AccountListItem #30556

Closed
wants to merge 2 commits into from
+53 −33
Closed

fix: 4279 - Hide token images in AccountListItem #30556

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4437faf
fix 4279 - Hide token images in AccountListItem
darkwing Feb 25, 2025
e010627
Fix code fences
darkwing Feb 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 53 additions & 33 deletions ui/components/multichain/account-list-item/account-list-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,17 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
import { getSnapName, shortenAddress } from '../../../helpers/utils/util';

import { AccountListItemMenu } from '../account-list-item-menu';
///: BEGIN:ONLY_INCLUDE_IF(build-main)
import { AvatarGroup } from '../avatar-group';
///: END:ONLY_INCLUDE_IF
import { ConnectedAccountsMenu } from '../connected-accounts-menu';
import {
AvatarAccount,
AvatarAccountVariant,
///: BEGIN:ONLY_INCLUDE_IF(build-main)
AvatarToken,
AvatarTokenSize,
///: END:ONLY_INCLUDE_IF
Box,
ButtonIcon,
Icon,
Expand All @@ -34,12 +38,19 @@ import {
JustifyContent,
Size,
TextAlign,
///: BEGIN:ONLY_INCLUDE_IF(build-main)
TextColor,
///: END:ONLY_INCLUDE_IF
TextVariant,
} from '../../../helpers/constants/design-system';
import { KeyringType } from '../../../../shared/constants/keyring';
import UserPreferencedCurrencyDisplay from '../../app/user-preferenced-currency-display/user-preferenced-currency-display.component';
import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
import {
PRIMARY,
///: BEGIN:ONLY_INCLUDE_IF(build-main)
SECONDARY,
///: END:ONLY_INCLUDE_IF
} from '../../../helpers/constants/common';
import Tooltip from '../../ui/tooltip/tooltip';
import {
MetaMetricsEventCategory,
Expand Down Expand Up @@ -141,12 +152,14 @@ const AccountListItem = ({
account,
formattedTokensWithBalancesPerChain,
);
///: BEGIN:ONLY_INCLUDE_IF(build-main)
// cross chain agg balance
const mappedOrderedTokenList = accountTotalFiatBalances.orderedTokenList.map(
(item) => ({
avatarValue: item.iconUrl,
}),
);
///: END:ONLY_INCLUDE_IF
let balanceToTranslate;
if (isEvmNetwork) {
balanceToTranslate =
Expand All @@ -167,6 +180,7 @@ const AccountListItem = ({
}, [itemRef, selected, shouldScrollToWhenSelected]);

const trackEvent = useContext(MetaMetricsContext);
///: BEGIN:ONLY_INCLUDE_IF(build-main)
const primaryTokenImage = useMultichainSelector(
getMultichainNativeCurrencyImage,
account,
Expand All @@ -175,6 +189,7 @@ const AccountListItem = ({
getMultichainNativeCurrency,
account,
);
///: END:ONLY_INCLUDE_IF
const currentTabIsConnectedToSelectedAddress = useSelector((state) =>
isAccountConnectedToCurrentTab(state, account.address),
);
Expand Down Expand Up @@ -338,40 +353,45 @@ const AccountListItem = ({
{shortenAddress(normalizeSafeAddress(account.address))}
</Text>
</Box>
{mappedOrderedTokenList.length > 1 ? (
<AvatarGroup members={mappedOrderedTokenList} limit={4} />
) : (
<Box
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
gap={1}
className="multichain-account-list-item__avatar-currency"
>
<AvatarToken
src={primaryTokenImage}
name={nativeCurrency}
size={AvatarTokenSize.Xs}
borderColor={BorderColor.borderDefault}
/>
<Text
variant={TextVariant.bodySm}
color={TextColor.textAlternative}
textAlign={TextAlign.End}
as="div"

{
///: BEGIN:ONLY_INCLUDE_IF(build-main)
mappedOrderedTokenList.length > 1 ? (
<AvatarGroup members={mappedOrderedTokenList} limit={4} />
) : (
<Box
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
gap={1}
className="multichain-account-list-item__avatar-currency"
>
<UserPreferencedCurrencyDisplay
account={account}
ethNumberOfDecimals={MAXIMUM_CURRENCY_DECIMALS}
value={isEvmNetwork ? account.balance : balanceToTranslate}
type={SECONDARY}
showNative
data-testid="second-currency-display"
privacyMode={privacyMode}
<AvatarToken
src={primaryTokenImage}
name={nativeCurrency}
size={AvatarTokenSize.Xs}
borderColor={BorderColor.borderDefault}
/>
</Text>
</Box>
)}
<Text
variant={TextVariant.bodySm}
color={TextColor.textAlternative}
textAlign={TextAlign.End}
as="div"
>
<UserPreferencedCurrencyDisplay
account={account}
ethNumberOfDecimals={MAXIMUM_CURRENCY_DECIMALS}
value={isEvmNetwork ? account.balance : balanceToTranslate}
type={SECONDARY}
showNative
data-testid="second-currency-display"
privacyMode={privacyMode}
/>
</Text>
</Box>
)
///: END:ONLY_INCLUDE_IF
}
</Box>
{accountLabel ? (
<Tag
Expand Down
Loading