From 5105742e12ef6a60d1e318e4f36d0b7e12fd3161 Mon Sep 17 00:00:00 2001
From: Jose Felix <jfelx@outlook.com>
Date: Tue, 17 Dec 2024 11:29:19 -0400
Subject: [PATCH] (Navbar) Use token info api endpoint to get navbar OSMO price
 (#4015)

* feat: use token info url to get osmo price

* improvement: use formatPretty for navbar osmo price
---
 .../src/queries/complex/assets/market.ts      |  7 ++---
 packages/trpc/src/assets.ts                   |  2 +-
 packages/web/components/navbar-osmo-price.tsx | 31 +++++++++----------
 3 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/server/src/queries/complex/assets/market.ts b/packages/server/src/queries/complex/assets/market.ts
index 7f54da58a5..a1336a0eb4 100644
--- a/packages/server/src/queries/complex/assets/market.ts
+++ b/packages/server/src/queries/complex/assets/market.ts
@@ -31,14 +31,13 @@ const marketInfoCache = new LRUCache<string, CacheEntry>(DEFAULT_LRU_OPTIONS);
 /** Cached function that returns an asset with market info included. */
 export async function getMarketAsset<TAsset extends MinimalAsset>({
   asset,
-  extended = false,
+  includeTotalSupply = false,
   ...params
 }: {
   assetLists: AssetList[];
   chainList: Chain[];
   asset: TAsset;
-  /** Include total supply. */
-  extended?: boolean;
+  includeTotalSupply?: boolean;
 }): Promise<TAsset & AssetMarketInfo> {
   const assetMarket = await cachified({
     cache: marketInfoCache,
@@ -49,7 +48,7 @@ export async function getMarketAsset<TAsset extends MinimalAsset>({
         getAssetMarketActivity(asset).catch((e) =>
           captureErrorAndReturn(e, undefined)
         ),
-        extended
+        includeTotalSupply
           ? querySupplyTotal({
               ...params,
               denom: asset.coinMinimalDenom,
diff --git a/packages/trpc/src/assets.ts b/packages/trpc/src/assets.ts
index 9be03650cd..58da91f0ab 100644
--- a/packages/trpc/src/assets.ts
+++ b/packages/trpc/src/assets.ts
@@ -213,7 +213,7 @@ export const assetsRouter = createTRPCRouter({
       });
       const userMarketAsset = await getMarketAsset({
         ...ctx,
-        extended: true,
+        includeTotalSupply: true,
         asset: userAsset,
       });
 
diff --git a/packages/web/components/navbar-osmo-price.tsx b/packages/web/components/navbar-osmo-price.tsx
index 786e6e7647..ae3084e1ce 100644
--- a/packages/web/components/navbar-osmo-price.tsx
+++ b/packages/web/components/navbar-osmo-price.tsx
@@ -1,4 +1,3 @@
-import { makeMinimalAsset } from "@osmosis-labs/utils";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
@@ -9,18 +8,13 @@ import { CreditCardIcon } from "~/components/assets/credit-card-icon";
 import { Sparkline } from "~/components/chart/sparkline";
 import { SkeletonLoader } from "~/components/loaders/skeleton-loader";
 import { Button } from "~/components/ui/button";
-import { AssetLists } from "~/config/generated/asset-lists";
 import { useFeatureFlags, useTranslation } from "~/hooks";
 import { useBridgeStore } from "~/hooks/bridge";
 import { useStore } from "~/stores";
 import { theme } from "~/tailwind.config";
+import { formatPretty } from "~/utils/formatter";
 import { api } from "~/utils/trpc";
 
-const osmoAsset = AssetLists.flatMap(({ assets }) => assets).find(
-  (asset) => asset.symbol === "OSMO"
-);
-const osmoCurrency = makeMinimalAsset(osmoAsset!);
-
 export const NavbarOsmoPrice = observer(() => {
   const { accountStore, chainStore } = useStore();
   const { t } = useTranslation();
@@ -29,21 +23,23 @@ export const NavbarOsmoPrice = observer(() => {
   const { chainId } = chainStore.osmosis;
   const wallet = accountStore.getWallet(chainId);
 
-  const { data: osmoPrice } = api.edge.assets.getAssetPrice.useQuery(
-    { coinMinimalDenom: osmoCurrency?.coinMinimalDenom ?? "" },
-    { enabled: Boolean(osmoCurrency) }
-  );
+  const { data: osmo } = api.edge.assets.getMarketAsset.useQuery({
+    findMinDenomOrSymbol: "OSMO",
+  });
 
-  if (!osmoPrice || !osmoCurrency) return null;
+  if (!osmo || !osmo.currentPrice) return null;
 
   return (
     <div className="flex flex-col gap-6 px-2">
       <div className="flex items-center justify-between px-2">
-        <SkeletonLoader isLoaded={osmoPrice.isReady} className="min-w-[70px]">
+        <SkeletonLoader
+          isLoaded={osmo.currentPrice.isReady}
+          className="min-w-[70px]"
+        >
           <div className="flex items-center gap-1">
             <div className="h-[20px] w-[20px]">
               <Image
-                src={osmoCurrency.coinImageUrl!}
+                src={osmo.coinImageUrl!}
                 alt="Osmo icon"
                 width={20}
                 height={20}
@@ -51,8 +47,9 @@ export const NavbarOsmoPrice = observer(() => {
             </div>
 
             <p className="mt-[3px]">
-              {osmoPrice.fiatCurrency.symbol}
-              {Number(osmoPrice.toDec().toString()).toFixed(2)}
+              {formatPretty(osmo.currentPrice, {
+                maxDecimals: 2,
+              })}
             </p>
           </div>
         </SkeletonLoader>
@@ -61,7 +58,7 @@ export const NavbarOsmoPrice = observer(() => {
       </div>
 
       {wallet?.isWalletConnected && (
-        <SkeletonLoader isLoaded={osmoPrice.isReady}>
+        <SkeletonLoader isLoaded={osmo.currentPrice.isReady}>
           <Button
             variant="outline"
             className="button group relative flex w-full items-center justify-center gap-2 overflow-hidden !rounded-full border-osmoverse-700 font-bold text-osmoverse-100 transition-all duration-300 ease-in-out hover:border-none hover:bg-gradient-positive hover:text-osmoverse-1000"