1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 12:47:14 +01:00
metamask-extension/ui/pages/swaps/searchable-item-list/item-list/item-list.component.js
Daniel c3b79bb358
Show custom tokens in Swaps, add a custom token in Swaps (#11200)
* Show custom tokens in Swaps

* Add messages for adding a custom token in Swaps

* Add the first version of importing custom tokens in swaps

* Fix lint rules

* Create a new component: ImportToken

* Remove a pointer cursor from regular heading

* Fix a CSS issue for tokens with long names

* Update a comment

* Don’t return a custom token if it doesn’t have symbol or decimals

* Only search by contract address if nothing was found

* Track “Token Imported” event

* Fix unit tests

* Import tracking for “Token Imported”, increase token icon font size

* Disable token import for Source Token

* Update logic and content for notifications, update tests

* Do not hide a dropdown placeholder on click, so a user can click on a link

* Update a key name

* Update styling for the “danger” type notification in Swaps

* Show either a warning or danger notification based on token verification occurences

* Remove testnets from SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP

* Use the “shouldSearchForImports” prop

* Create a new function for handling token import: “onOpenImportTokenModalClick”

* Filter token duplicities before iterating over tokens

* Use “address” instead of “symbol” for checking uniqueness

* Trigger Build

* Use a new API (/token) to get token data for importing in Swaps

* Temporarily decrese Jest threshold for functions
2021-06-03 13:38:37 -02:30

208 lines
6.8 KiB
JavaScript

import React, { useContext } from 'react';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Identicon from '../../../../components/ui/identicon';
import UrlIcon from '../../../../components/ui/url-icon';
import Button from '../../../../components/ui/button';
import ActionableMessage from '../../actionable-message';
import { I18nContext } from '../../../../contexts/i18n';
import {
getCurrentChainId,
getRpcPrefsForCurrentProvider,
} from '../../../../selectors';
import { SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP } from '../../../../../shared/constants/swaps';
import { useNewMetricEvent } from '../../../../hooks/useMetricEvent';
export default function ItemList({
results = [],
onClickItem,
onOpenImportTokenModalClick,
Placeholder,
listTitle,
maxListItems = 6,
searchQuery = '',
containerRef,
hideRightLabels,
hideItemIf,
listContainerClassName,
}) {
const t = useContext(I18nContext);
const chainId = useSelector(getCurrentChainId);
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
const blockExplorerLink =
rpcPrefs.blockExplorerUrl ??
SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP[chainId] ??
null;
const blockExplorerLabel = rpcPrefs.blockExplorerUrl
? new URL(blockExplorerLink).hostname
: t('etherscan');
const blockExplorerLinkClickedEvent = useNewMetricEvent({
category: 'Swaps',
event: 'Clicked Block Explorer Link',
properties: {
link_type: 'Token Tracker',
action: 'Verify Contract Address',
block_explorer_domain: blockExplorerLink
? new URL(blockExplorerLink)?.hostname
: '',
},
});
// If there is a token for import based on a contract address, it's the only one in the list.
const hasTokenForImport = results.length === 1 && results[0].notImported;
return results.length === 0 ? (
Placeholder && <Placeholder searchQuery={searchQuery} />
) : (
<div className="searchable-item-list">
{listTitle && (
<div className="searchable-item-list__title">{listTitle}</div>
)}
<div
className={classnames(
'searchable-item-list__list-container',
listContainerClassName,
)}
ref={containerRef}
>
{results.slice(0, maxListItems).map((result, i) => {
if (hideItemIf?.(result)) {
return null;
}
const onClick = () => {
if (result.notImported) {
onOpenImportTokenModalClick(result);
} else {
onClickItem?.(result);
}
};
const {
iconUrl,
identiconAddress,
selected,
disabled,
primaryLabel,
secondaryLabel,
rightPrimaryLabel,
rightSecondaryLabel,
IconComponent,
} = result;
return (
<div
tabIndex="0"
className={classnames('searchable-item-list__item', {
'searchable-item-list__item--selected': selected,
'searchable-item-list__item--disabled': disabled,
})}
onClick={onClick}
onKeyUp={(e) => e.key === 'Enter' && onClick()}
key={`searchable-item-list-item-${i}`}
>
{(iconUrl || primaryLabel) && (
<UrlIcon url={iconUrl} name={primaryLabel} />
)}
{!(iconUrl || primaryLabel) && identiconAddress && (
<div className="searchable-item-list__identicon">
<Identicon address={identiconAddress} diameter={24} />
</div>
)}
{IconComponent && <IconComponent />}
<div className="searchable-item-list__labels">
<div className="searchable-item-list__item-labels">
{primaryLabel && (
<span className="searchable-item-list__primary-label">
{primaryLabel}
</span>
)}
{secondaryLabel && (
<span className="searchable-item-list__secondary-label">
{secondaryLabel}
</span>
)}
</div>
{!hideRightLabels &&
(rightPrimaryLabel || rightSecondaryLabel) && (
<div className="searchable-item-list__right-labels">
{rightPrimaryLabel && (
<span className="searchable-item-list__right-primary-label">
{rightPrimaryLabel}
</span>
)}
{rightSecondaryLabel && (
<span className="searchable-item-list__right-secondary-label">
{rightSecondaryLabel}
</span>
)}
</div>
)}
</div>
{result.notImported && (
<Button type="confirm" onClick={onClick} rounded>
{t('import')}
</Button>
)}
</div>
);
})}
{!hasTokenForImport && (
<div
tabIndex="0"
className="searchable-item-list__item searchable-item-list__item--add-token"
key="searchable-item-list-item-last"
>
<ActionableMessage
message={
blockExplorerLink &&
t('addCustomTokenByContractAddress', [
<a
key="searchable-item-list__etherscan-link"
onClick={() => {
blockExplorerLinkClickedEvent();
global.platform.openTab({
url: blockExplorerLink,
});
}}
target="_blank"
rel="noopener noreferrer"
>
{blockExplorerLabel}
</a>,
])
}
/>
</div>
)}
</div>
</div>
);
}
ItemList.propTypes = {
results: PropTypes.arrayOf(
PropTypes.shape({
iconUrl: PropTypes.string,
selected: PropTypes.bool,
disabled: PropTypes.bool,
primaryLabel: PropTypes.string,
secondaryLabel: PropTypes.string,
rightPrimaryLabel: PropTypes.string,
rightSecondaryLabel: PropTypes.string,
}),
),
onClickItem: PropTypes.func,
onOpenImportTokenModalClick: PropTypes.func,
Placeholder: PropTypes.func,
listTitle: PropTypes.string,
maxListItems: PropTypes.number,
searchQuery: PropTypes.string,
containerRef: PropTypes.shape({
current: PropTypes.instanceOf(window.Element),
}),
hideRightLabels: PropTypes.bool,
hideItemIf: PropTypes.func,
listContainerClassName: PropTypes.string,
};