diff --git a/.changeset/wise-mangos-swim.md b/.changeset/wise-mangos-swim.md new file mode 100644 index 000000000..88b4ef052 --- /dev/null +++ b/.changeset/wise-mangos-swim.md @@ -0,0 +1,5 @@ +--- +"@carrot-kpi/ui": minor +--- + +Avoid token picker closing when a token list is selected diff --git a/packages/ui/src/components/erc20-token-picker/index.tsx b/packages/ui/src/components/erc20-token-picker/index.tsx index 46d507f60..be2e67c66 100644 --- a/packages/ui/src/components/erc20-token-picker/index.tsx +++ b/packages/ui/src/components/erc20-token-picker/index.tsx @@ -96,6 +96,16 @@ export function ERC20TokenPicker({ [onSelectedTokenChange], ); + const handleSelectedListChange = useCallback( + (list: TokenListWithBalance) => { + if (onSelectedListChange) { + setCurrentView("search"); + onSelectedListChange(list); + } + }, + [onSelectedListChange], + ); + const handleManageListsClick = useCallback(() => { setCurrentView("manage-lists"); }, []); @@ -131,7 +141,7 @@ export function ERC20TokenPicker({ = 0) { - onSelectedListChange(lists[parsedIndex]); - if (!!onDismiss) onDismiss(); - } + if (parsedIndex >= 0) onSelectedListChange(lists[parsedIndex]); } }, - [lists, onDismiss, onSelectedListChange], + [lists, onSelectedListChange], ); return ( diff --git a/packages/ui/stories/erc20-token-picker.stories.tsx b/packages/ui/stories/erc20-token-picker.stories.tsx index 325f1fdc4..74f64c855 100644 --- a/packages/ui/stories/erc20-token-picker.stories.tsx +++ b/packages/ui/stories/erc20-token-picker.stories.tsx @@ -67,10 +67,9 @@ const Component = (props: ERC20TokenPickerProps) => { const [open, setOpen] = useState(false); const [value, setValue] = useState(null); + const [lists, setLists] = useState([]); const [list, setList] = useState(null); - const lists = useMemo(() => (list ? [list] : []), [list]); - const { data: rawBalances, isLoading: loadingBalances, @@ -113,15 +112,29 @@ const Component = (props: ERC20TokenPickerProps) => { useEffect(() => { let cancelled = false; const fetchData = async () => { - const response = await fetch( + let response = await fetch( `${getServiceURL(Service.STATIC_CDN, false)}/token-list.json`, ); if (!response.ok) { console.warn("could not fetch carrot token list"); return; } - if (!cancelled) - setList((await response.json()) as TokenListWithBalance); + const carrotList = (await response.json()) as TokenListWithBalance; + + response = await fetch( + "https://tokens.coingecko.com/uniswap/all.json", + ); + if (!response.ok) { + console.warn("could not fetch coingecko token list"); + return; + } + const coingeckoList = + (await response.json()) as TokenListWithBalance; + + if (!cancelled) { + setLists([carrotList, coingeckoList]); + setList(carrotList); + } }; void fetchData(); return () => { @@ -176,6 +189,7 @@ const Component = (props: ERC20TokenPickerProps) => { onDismiss={handleDismiss} lists={lists} selectedList={selectedListWithBalances} + onSelectedListChange={setList} chainId={CHAIN_ID} messages={{ search: {