1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/pages/swaps/searchable-item-list/searchable-item-list.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

84 lines
2.3 KiB
JavaScript

import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import ItemList from './item-list';
import ListItemSearch from './list-item-search';
export default function SearchableItemList({
className,
defaultToAll,
fuseSearchKeys,
itemSelectorError,
itemsToSearch = [],
listTitle,
maxListItems,
onClickItem,
onOpenImportTokenModalClick,
Placeholder,
searchPlaceholderText,
hideRightLabels,
hideItemIf,
listContainerClassName,
shouldSearchForImports,
}) {
const itemListRef = useRef();
const [results, setResults] = useState(defaultToAll ? itemsToSearch : []);
const [searchQuery, setSearchQuery] = useState('');
return (
<div className={className}>
<ListItemSearch
listToSearch={itemsToSearch}
fuseSearchKeys={fuseSearchKeys}
onSearch={({
searchQuery: newSearchQuery = '',
results: newResults = [],
}) => {
setSearchQuery(newSearchQuery);
setResults(newResults);
}}
error={itemSelectorError}
searchPlaceholderText={searchPlaceholderText}
defaultToAll={defaultToAll}
shouldSearchForImports={shouldSearchForImports}
/>
<ItemList
searchQuery={searchQuery}
results={results}
onClickItem={onClickItem}
onOpenImportTokenModalClick={onOpenImportTokenModalClick}
Placeholder={Placeholder}
listTitle={listTitle}
maxListItems={maxListItems}
containerRef={itemListRef}
hideRightLabels={hideRightLabels}
hideItemIf={hideItemIf}
listContainerClassName={listContainerClassName}
/>
</div>
);
}
SearchableItemList.propTypes = {
itemSelectorError: PropTypes.string,
itemsToSearch: PropTypes.array,
onClickItem: PropTypes.func,
onOpenImportTokenModalClick: PropTypes.func,
Placeholder: PropTypes.func,
className: PropTypes.string,
searchPlaceholderText: PropTypes.string,
fuseSearchKeys: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string,
weight: PropTypes.number,
}),
),
listTitle: PropTypes.string,
defaultToAll: PropTypes.bool,
maxListItems: PropTypes.number,
hideRightLabels: PropTypes.bool,
hideItemIf: PropTypes.func,
listContainerClassName: PropTypes.string,
shouldSearchForImports: PropTypes.bool,
};