feat(ui): avoid token picker closing when a token list is picked (#420)

* feat(ui): avoid token picker closing when a token list is picked * chore: add changeset --------- Co-authored-by: luzzifoss <fedeluzzi00@gmail.com>
carrot-kpi · Oct 9, 2023 · 8b69377 · 8b69377
1 parent 0637ab9
commit 8b69377
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 11 deletions.
diff --git a/.changeset/wise-mangos-swim.md 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
@@ -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({
                 <ManageLists
                     onDismiss={onDismiss}
                     loading={loading}
-                    onSelectedListChange={onSelectedListChange}
+                    onSelectedListChange={handleSelectedListChange}
                     selectedList={selectedList}
                     lists={lists}
                     chainId={chainId}

diff --git a/packages/ui/src/components/erc20-token-picker/manage-lists/index.tsx b/packages/ui/src/components/erc20-token-picker/manage-lists/index.tsx
@@ -127,13 +127,10 @@ export const ManageLists = ({
             const index = (event.target as HTMLLIElement).dataset.index;
             if (index !== undefined) {
                 const parsedIndex = parseInt(index);
-                if (parsedIndex >= 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
@@ -67,10 +67,9 @@ const Component = (props: ERC20TokenPickerProps) => {
 
     const [open, setOpen] = useState(false);
     const [value, setValue] = useState<TokenInfoWithBalance | null>(null);
+    const [lists, setLists] = useState<TokenListWithBalance[]>([]);
     const [list, setList] = useState<TokenListWithBalance | null>(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: {