mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-12 20:57:12 +01:00
c3b79bb358
* 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
84 lines
2.3 KiB
JavaScript
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,
|
|
};
|