1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/token-cell/token-cell.js
Nidhi Kumari fcfb8a8938
UX: Multichain: Added TokenList Component (#17859)
* added redesign storybook

* updated token list

* updated css

* fixed lint error

* updated the new token list component

* fixed redesign folder error

* reverted changes in settings.json

* updated redesign to multichain

* added feature flag

* reverted settings.json

* added detect token banner

* added button componeny

* fixed lint errors

* removed settings

* fixed lint errors

* added stories for multichain

* updated no token found string

* updated lint error

* updated padding values

* updated padding values

* updated tabs with role button

* updated hover state

* updated components with multichain

* fixed lint errors

* updated multichain import token link

* updated a tag

* updated fixes

* updated onClick to handleClick

* updated setShowDetectedTokens proptype

* updated multichain tokenlist with item suffix

* updated tests

* updated tests

* updated token list css

* updated snapshot

* updated text

* reverted story

* added story for multichain token list

* updated story

* updated tooltip

* updated the new token list component

* fixed redesign folder error

* added feature flag

* reverted unused setting change

* removed token list

* fixed lint error

* updated status

* updated tooltip

* updated token-list-item changes

* updated actionbutton click for detect token banner

* updated snapshot

* updated symbol

* updated styles

* updated eth decimal and token url

* updated snapshot

* updated scripts

* updated snapshots
2023-03-23 15:38:33 +05:30

94 lines
2.6 KiB
JavaScript

import classnames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { useSelector } from 'react-redux';
import AssetListItem from '../asset-list-item';
import { getSelectedAddress, getTokenList } from '../../../selectors';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount';
import { MultichainTokenListItem } from '../../multichain';
import { ButtonLink, Text } from '../../component-library';
import { TextColor } from '../../../helpers/constants/design-system';
export default function TokenCell({
address,
decimals,
balanceError,
image,
symbol,
string,
onClick,
isERC721,
}) {
const userAddress = useSelector(getSelectedAddress);
const t = useI18nContext();
const tokenList = useSelector(getTokenList);
const tokenData = Object.values(tokenList).find(
(token) => token.symbol === symbol,
);
const title = tokenData?.name || symbol;
const tokenImage = tokenData?.iconUrl || image;
const formattedFiat = useTokenFiatAmount(address, string, symbol);
const warning = balanceError ? (
<Text as="span">
{t('troubleTokenBalances')}
<ButtonLink
href={`https://ethplorer.io/address/${userAddress}`}
externalLink
onClick={(event) => event.stopPropagation()}
textProps={{
color: TextColor.warningDefault,
}}
>
{t('here')}
</ButtonLink>
</Text>
) : null;
return (
<>
{process.env.MULTICHAIN ? (
<MultichainTokenListItem
onClick={() => onClick(address)}
tokenSymbol={symbol}
tokenImage={tokenImage}
primary={`${string || 0}`}
secondary={formattedFiat}
title={title}
/>
) : (
<AssetListItem
className={classnames('token-cell', {
'token-cell--outdated': Boolean(balanceError),
})}
iconClassName="token-cell__icon"
onClick={() => onClick(address)}
tokenAddress={address}
tokenSymbol={symbol}
tokenDecimals={decimals}
tokenImage={image}
warning={warning}
primary={`${string || 0}`}
secondary={formattedFiat}
isERC721={isERC721}
/>
)}
</>
);
}
TokenCell.propTypes = {
address: PropTypes.string,
balanceError: PropTypes.object,
symbol: PropTypes.string,
decimals: PropTypes.number,
string: PropTypes.string,
onClick: PropTypes.func.isRequired,
isERC721: PropTypes.bool,
image: PropTypes.string,
};
TokenCell.defaultProps = {
balanceError: null,
};