Use in-bundle asset list for to, from, and recommended assets (osmosi…

…s-labs#2924) (osmosis-labs#2927) * use in-bundle asset list for to, from, and recommended assets * just return pool ID from split * fix build * fix check * remove getasset --------- Co-authored-by: Jon Ator <[email protected]>
onezoomin · Mar 8, 2024 · 6686302 · 6686302
1 parent 6bd3da8
commit 6686302
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 127 deletions.
diff --git a/packages/utils/src/asset-utils.ts b/packages/utils/src/asset-utils.ts
@@ -2,25 +2,28 @@ import type { Asset, AssetList, Currency } from "@osmosis-labs/types";
 
 /** Find asset in asset list config given any of the available identifiers. */
 export function getAssetFromAssetList({
+  symbol,
   /** Denom as it exists on source chain. */
   sourceDenom,
   coinMinimalDenom,
   coinGeckoId,
   assetLists,
 }: {
+  symbol?: string;
   sourceDenom?: string;
   coinMinimalDenom?: string;
   coinGeckoId?: string;
   assetLists: AssetList[];
 }) {
-  if (!sourceDenom && !coinGeckoId && !coinMinimalDenom) {
+  if (!symbol && !sourceDenom && !coinGeckoId && !coinMinimalDenom) {
     return undefined;
   }
 
   const asset = assetLists
     .flatMap(({ assets }) => assets)
     .find(
       (asset) =>
+        (symbol && asset.symbol === symbol) ||
         (sourceDenom && asset.sourceDenom === sourceDenom) ||
         (asset.coingeckoId ? asset.coingeckoId === coinGeckoId : false) ||
         asset.coinMinimalDenom === coinMinimalDenom

diff --git a/packages/web/components/navbar-osmo-price.tsx b/packages/web/components/navbar-osmo-price.tsx
@@ -1,4 +1,5 @@
 import { WalletStatus } from "@cosmos-kit/core";
+import { makeMinimalAsset } from "@osmosis-labs/utils";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
@@ -10,6 +11,7 @@ import { Sparkline } from "~/components/chart/sparkline";
 import SkeletonLoader from "~/components/loaders/skeleton-loader";
 import { Button } from "~/components/ui/button";
 import { EventName } from "~/config";
+import { AssetLists } from "~/config/generated/asset-lists";
 import {
   useAmplitudeAnalytics,
   useDisclosure,
@@ -21,6 +23,11 @@ import { useStore } from "~/stores";
 import { theme } from "~/tailwind.config";
 import { api } from "~/utils/trpc";
 
+const osmoAsset = AssetLists.flatMap(({ assets }) => assets).find(
+  (asset) => asset.symbol === "OSMO"
+);
+const osmoCurrency = makeMinimalAsset(osmoAsset!);
+
 const NavbarOsmoPrice = observer(() => {
   const { accountStore, chainStore } = useStore();
   const { t } = useTranslation();
@@ -36,9 +43,6 @@ const NavbarOsmoPrice = observer(() => {
   const { chainId } = chainStore.osmosis;
   const wallet = accountStore.getWallet(chainId);
 
-  const { data: osmoCurrency } = api.edge.assets.getAsset.useQuery({
-    findMinDenomOrSymbol: "OSMO",
-  });
   const { data: osmoPrice } = api.edge.assets.getAssetPrice.useQuery(
     { coinMinimalDenom: osmoCurrency?.coinMinimalDenom ?? "" },
     { enabled: Boolean(osmoCurrency) }

diff --git a/packages/web/components/swap-tool/index.tsx b/packages/web/components/swap-tool/index.tsx
@@ -423,38 +423,29 @@ export const SwapTool: FunctionComponent<SwapToolProps> = observer(
                 </div>
               </div>
               <div className="mt-3 flex place-content-between items-center">
-                <SkeletonLoader
-                  className={
-                    swapState.isLoadingFromAsset
-                      ? "h-full w-full"
-                      : "h-fit w-fit"
-                  }
-                  isLoaded={!swapState.isLoadingFromAsset}
-                >
-                  <TokenSelectWithDrawer
-                    isFromSelect
-                    dropdownOpen={showFromTokenSelectDropdown}
-                    swapState={swapState}
-                    setDropdownState={useCallback(
-                      (isOpen) => {
-                        if (isOpen) {
-                          setOneTokenSelectOpen("from");
-                        } else {
-                          closeTokenSelectDropdowns();
-                        }
-                      },
-                      [setOneTokenSelectOpen, closeTokenSelectDropdowns]
-                    )}
-                    onSelect={useCallback(
-                      (tokenDenom: string) => {
-                        swapState.setFromAssetDenom(tokenDenom);
+                <TokenSelectWithDrawer
+                  isFromSelect
+                  dropdownOpen={showFromTokenSelectDropdown}
+                  swapState={swapState}
+                  setDropdownState={useCallback(
+                    (isOpen) => {
+                      if (isOpen) {
+                        setOneTokenSelectOpen("from");
+                      } else {
                         closeTokenSelectDropdowns();
-                        fromAmountInputEl.current?.focus();
-                      },
-                      [swapState, closeTokenSelectDropdowns]
-                    )}
-                  />
-                </SkeletonLoader>
+                      }
+                    },
+                    [setOneTokenSelectOpen, closeTokenSelectDropdowns]
+                  )}
+                  onSelect={useCallback(
+                    (tokenDenom: string) => {
+                      swapState.setFromAssetDenom(tokenDenom);
+                      closeTokenSelectDropdowns();
+                      fromAmountInputEl.current?.focus();
+                    },
+                    [swapState, closeTokenSelectDropdowns]
+                  )}
+                />
                 <div className="flex w-full flex-col items-end">
                   <input
                     ref={fromAmountInputEl}
@@ -556,35 +547,28 @@ export const SwapTool: FunctionComponent<SwapToolProps> = observer(
             </button>
             <div className="rounded-xl bg-osmoverse-900 px-4 py-[22px] transition-all md:rounded-xl md:px-3 md:py-2.5">
               <div className="flex place-content-between items-center transition-transform">
-                <SkeletonLoader
-                  className={
-                    swapState.isLoadingToAsset ? "h-full w-full" : "h-fit w-fit"
-                  }
-                  isLoaded={!swapState.isLoadingToAsset}
-                >
-                  <TokenSelectWithDrawer
-                    isFromSelect={false}
-                    dropdownOpen={showToTokenSelectDropdown}
-                    swapState={swapState}
-                    onSelect={useCallback(
-                      (tokenDenom: string) => {
-                        swapState.setToAssetDenom(tokenDenom);
+                <TokenSelectWithDrawer
+                  isFromSelect={false}
+                  dropdownOpen={showToTokenSelectDropdown}
+                  swapState={swapState}
+                  onSelect={useCallback(
+                    (tokenDenom: string) => {
+                      swapState.setToAssetDenom(tokenDenom);
+                      closeTokenSelectDropdowns();
+                    },
+                    [swapState, closeTokenSelectDropdowns]
+                  )}
+                  setDropdownState={useCallback(
+                    (isOpen) => {
+                      if (isOpen) {
+                        setOneTokenSelectOpen("to");
+                      } else {
                         closeTokenSelectDropdowns();
-                      },
-                      [swapState, closeTokenSelectDropdowns]
-                    )}
-                    setDropdownState={useCallback(
-                      (isOpen) => {
-                        if (isOpen) {
-                          setOneTokenSelectOpen("to");
-                        } else {
-                          closeTokenSelectDropdowns();
-                        }
-                      },
-                      [setOneTokenSelectOpen, closeTokenSelectDropdowns]
-                    )}
-                  />
-                </SkeletonLoader>
+                      }
+                    },
+                    [setOneTokenSelectOpen, closeTokenSelectDropdowns]
+                  )}
+                />
                 <div className="flex w-full flex-col items-end">
                   <h5
                     className={classNames(

diff --git a/packages/web/hooks/use-swap.ts b/packages/web/hooks/use-swap.ts
@@ -5,7 +5,7 @@ import {
   NotEnoughQuotedError,
 } from "@osmosis-labs/pools";
 import { Currency } from "@osmosis-labs/types";
-import { isNil } from "@osmosis-labs/utils";
+import { isNil, makeMinimalAsset } from "@osmosis-labs/utils";
 import { useQueryClient } from "@tanstack/react-query";
 import { createTRPCReact, TRPCClientError } from "@trpc/react-query";
 import { useRouter } from "next/router";
@@ -14,6 +14,8 @@ import { useMemo } from "react";
 import { useCallback } from "react";
 import { useEffect } from "react";
 
+import { RecommendedSwapDenoms } from "~/config";
+import { AssetLists } from "~/config/generated/asset-lists";
 import { useShowPreviewAssets } from "~/hooks/use-show-preview-assets";
 import type { RouterKey } from "~/server/api/edge-routers/swap-router";
 import type { AppRouter } from "~/server/api/root";
@@ -286,11 +288,7 @@ export function useSwap({
     isQuoteLoading,
     /** Spot price or user input quote. */
     isAnyQuoteLoading: isQuoteLoading || isSpotPriceQuoteLoading,
-    isLoading:
-      swapAssets.isLoadingFromAsset ||
-      swapAssets.isLoadingToAsset ||
-      isQuoteLoading ||
-      isSpotPriceQuoteLoading,
+    isLoading: isQuoteLoading || isSpotPriceQuoteLoading,
     sendTradeTokenInTx,
   };
 }
@@ -366,25 +364,15 @@ export function useSwapAssets({
     [selectableAssetPages?.pages]
   );
 
-  const { asset: fromAsset, isLoading: isLoadingFromAsset } = useSwapAsset(
+  const { asset: fromAsset } = useSwapAsset(
     fromAssetDenom,
     allSelectableAssets
   );
-  const { asset: toAsset, isLoading: isLoadingToAsset } = useSwapAsset(
-    toAssetDenom,
-    allSelectableAssets
-  );
+  const { asset: toAsset } = useSwapAsset(toAssetDenom, allSelectableAssets);
 
-  const { data: recommendedAssets_, isLoading: isLoadingRecommendedAssets } =
-    api.edge.assets.getRecommendedAssets.useQuery();
-  const recommendedAssets = useMemo(
-    () =>
-      recommendedAssets_?.filter(
-        (asset) =>
-          asset.coinMinimalDenom !== fromAsset?.coinMinimalDenom &&
-          asset.coinMinimalDenom !== toAsset?.coinMinimalDenom
-      ) ?? [],
-    [recommendedAssets_, fromAsset, toAsset]
+  const recommendedAssets = useRecommendedAssets(
+    fromAsset?.coinMinimalDenom,
+    toAsset?.coinMinimalDenom
   );
 
   /** Remove to and from assets from assets that can be selected. */
@@ -404,13 +392,10 @@ export function useSwapAssets({
     assetsQueryInput,
     selectableAssets: filteredSelectableAssets,
     isLoadingSelectAssets,
-    isLoadingFromAsset,
-    isLoadingToAsset,
     hasNextPageAssets: hasNextPage,
     isFetchingNextPageAssets: isFetchingNextPage,
     /** Recommended assets, with to and from tokens filtered. */
     recommendedAssets,
-    isLoadingRecommendedAssets,
     setAssetsQueryInput,
     setFromAssetDenom,
     setToAssetDenom,
@@ -501,29 +486,23 @@ function useSwapAsset<TAsset extends Asset>(
       asset.coinDenom === minDenomOrSymbol ||
       asset.coinMinimalDenom === minDenomOrSymbol
   );
-  const queryEnabled =
-    !isNil(minDenomOrSymbol) &&
-    typeof minDenomOrSymbol === "string" &&
-    !existingAsset;
-  const { data: asset, isLoading } = api.edge.assets.getAsset.useQuery(
-    {
-      findMinDenomOrSymbol: minDenomOrSymbol ?? "",
-    },
-    {
-      enabled: queryEnabled,
+  !existingAsset;
+  const asset = useMemo(() => {
+    if (existingAsset) return existingAsset;
+
+    const asset = AssetLists.flatMap(({ assets }) => assets).find(
+      (asset) =>
+        minDenomOrSymbol &&
+        (asset.symbol === minDenomOrSymbol ||
+          asset.coinMinimalDenom === minDenomOrSymbol)
+    );
+    if (!asset) return;
 
-      // since asset is often point of attention, don't block on other potentially expensive queries
-      trpc: {
-        context: {
-          skipBatch: true,
-        },
-      },
-    }
-  );
+    return makeMinimalAsset(asset);
+  }, [minDenomOrSymbol, existingAsset]);
 
   return {
     asset: existingAsset ?? (asset as TAsset),
-    isLoading: isLoading && !existingAsset,
   };
 }
 
@@ -677,3 +656,29 @@ function makeRouterErrorFromTrpcError(
     };
   }
 }
+
+/** Gets recommended assets directly from asset list. */
+function useRecommendedAssets(
+  fromCoinMinimalDenom?: string,
+  toCoinMinimalDenom?: string
+) {
+  return useMemo(
+    () =>
+      RecommendedSwapDenoms.map((denom) => {
+        const asset = AssetLists.flatMap(({ assets }) => assets).find(
+          (asset) => asset.symbol === denom
+        );
+        if (!asset) return;
+
+        return makeMinimalAsset(asset);
+      })
+        .filter((c): c is NonNullable<typeof c> => !!c)
+        .filter(
+          (currency) =>
+            currency &&
+            currency.coinMinimalDenom !== fromCoinMinimalDenom &&
+            currency.coinMinimalDenom !== toCoinMinimalDenom
+        ),
+    [fromCoinMinimalDenom, toCoinMinimalDenom]
+  );
+}
diff --git a/packages/web/server/api/edge-routers/assets-router.ts b/packages/web/server/api/edge-routers/assets-router.ts
@@ -1,10 +1,8 @@
 import { PricePretty } from "@keplr-wallet/unit";
 import { z } from "zod";
 
-import { RecommendedSwapDenoms } from "~/config/feature-flag";
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
 import {
-  Asset,
   AssetFilterSchema,
   getAsset,
   getAssetHistoricalPrice,
@@ -35,15 +33,6 @@ const GetInfiniteAssetsInputSchema = InfiniteQuerySchema.merge(
 ).merge(UserOsmoAddressSchema);
 
 export const assetsRouter = createTRPCRouter({
-  getAsset: publicProcedure
-    .input(
-      z.object({
-        findMinDenomOrSymbol: z.string(),
-      })
-    )
-    .query(async ({ input: { findMinDenomOrSymbol } }) =>
-      getAsset({ anyDenom: findMinDenomOrSymbol })
-    ),
   getUserAsset: publicProcedure
     .input(
       z
@@ -100,15 +89,6 @@ export const assetsRouter = createTRPCRouter({
 
       return new PricePretty(DEFAULT_VS_CURRENCY, price);
     }),
-  getRecommendedAssets: publicProcedure.query(async () => {
-    const assets = await Promise.all(
-      RecommendedSwapDenoms.map((denom) =>
-        getAsset({ anyDenom: denom }).catch(() => null)
-      )
-    );
-
-    return assets.filter((a): a is Asset => !!a);
-  }),
   getMarketAsset: publicProcedure
     .input(
       z

diff --git a/packages/web/server/api/edge-routers/swap-router.ts b/packages/web/server/api/edge-routers/swap-router.ts
@@ -165,7 +165,7 @@ async function makeDisplayableSplit(split: SplitTokenInQuote["split"]) {
           });
 
           return {
-            ...pool,
+            id: pool.id,
             spreadFactor: pool_?.spreadFactor,
             type: pool_?.type,
             inCurrency: inAsset,