Fix infinite loop due to missing fiat values (#1692)

* Revert "Temporarily disable sorting (#1691)"

This reverts commit 799271f.

* Fallback to presentValue in base when fiat value doesnt exist

Author: DannyDelott

.vscode/settings.json

@@ -8,7 +8,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "ms-vsliveshare.vsliveshare"
   },
   "[javascriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

apps/hyperdrive-trading/src/ui/hyperdrive/hooks/usePresentValue.ts

@@ -92,8 +92,9 @@ export function getPresentValue({
         chainId: baseToken.chainId,
         publicClient,
         tokenAddress: baseToken.address,
-      })
+      }).catch(() => undefined)
     : Promise.resolve(undefined);
+
   return Promise.all([readHyperdrive.getPresentValue(), fiatPricePromise]).then(
     ([presentValue, fiatPrice]) => {
       const presentValueFiat = fiatPrice

apps/hyperdrive-trading/src/ui/hyperdrive/hooks/useUnpausedPools.ts

@@ -4,7 +4,7 @@ import {
   HyperdriveConfig,
 } from "@delvtech/hyperdrive-appconfig";
 import { getHyperdrive } from "@delvtech/hyperdrive-js";
-import { QueryStatus, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { getPublicClient } from "@wagmi/core";
 import { makeQueryKey2 } from "src/base/makeQueryKey";
 import { getDrift } from "src/drift/getDrift";
@@ -24,7 +24,6 @@ const HIDDEN_POOLS = [
  */
 export function useUnpausedPools(): {
   unpausedPools: HyperdriveConfig[] | undefined;
-  status: QueryStatus;
 } {
   // Only show testnet and fork pools if the user is connected to a testnet
   // chain
@@ -33,7 +32,7 @@ export function useUnpausedPools(): {
   // Use the chain id in the query key to make sure the pools list updates when
   // you switch chains
   const connectedChainId = useChainId();
-  const { data: unpausedPools, status } = useQuery({
+  const { data: unpausedPools } = useQuery({
     queryKey: makeQueryKey2({
       namespace: "hyperdrive",
       queryId: "unpausedPools",
@@ -77,5 +76,5 @@ export function useUnpausedPools(): {
       return unpausedPools;
     },
   });
-  return { unpausedPools, status };
+  return { unpausedPools };
 }

apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolRow.tsx

@@ -46,7 +46,7 @@ export function PoolRow({ hyperdrive }: PoolRowProps): ReactElement {
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
   });
-  const isFiatSupported = !isTestnetChain(chainInfo.id);
+  const isFiatSupported = !isTestnetChain(chainInfo.id) && presentValue?.fiat;
   let tvlLabel = `${formatCompact({
     value: presentValue?.base || 0n,
     decimals: hyperdrive.decimals,

apps/hyperdrive-trading/src/ui/markets/PoolsList/PoolsList.tsx

@@ -1,15 +1,19 @@
 import { appConfig } from "@delvtech/hyperdrive-appconfig";
-import { AdjustmentsHorizontalIcon } from "@heroicons/react/20/solid";
+import {
+  AdjustmentsHorizontalIcon,
+  BarsArrowDownIcon,
+} from "@heroicons/react/20/solid";
 import { ArrowUpIcon } from "@heroicons/react/24/outline";
 import { useNavigate, useSearch } from "@tanstack/react-router";
+import classNames from "classnames";
 import { ReactElement, ReactNode } from "react";
 import LoadingState from "src/ui/base/components/LoadingState";
 import { MultiSelect } from "src/ui/base/components/MultiSelect";
 import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { Well } from "src/ui/base/components/Well/Well";
 import { LANDING_ROUTE } from "src/ui/landing/routes";
 import { PoolRow } from "src/ui/markets/PoolRow/PoolRow";
-import { usePoolsList } from "src/ui/markets/hooks/usePoolsList";
+import { sortOptions, usePoolsList } from "src/ui/markets/hooks/usePoolsList";
 import { useAccount } from "wagmi";
 
 export function PoolsList(): ReactElement {
@@ -150,7 +154,7 @@ export function PoolsList(): ReactElement {
               </div>
 
               {/* Sorting */}
-              {/* <div className="daisy-dropdown daisy-dropdown-end">
+              <div className="daisy-dropdown daisy-dropdown-end">
                 <div
                   tabIndex={0}
                   role="button"
@@ -187,7 +191,7 @@ export function PoolsList(): ReactElement {
                     </li>
                   ))}
                 </ul>
-              </div> */}
+              </div>
             </div>
 
             {!pools.length ? (

apps/hyperdrive-trading/src/ui/markets/hooks/usePoolsList.ts

@@ -57,7 +57,7 @@ export function usePoolsList({
   sortOption: SortOption | undefined;
   setSortOption: (option: SortOption | undefined) => void;
 } {
-  const { unpausedPools, status } = useUnpausedPools();
+  const { unpausedPools } = useUnpausedPools();
 
   const filters = usePoolListFilters({ hyperdrives: unpausedPools });
 
@@ -73,18 +73,15 @@ export function usePoolsList({
   // responsible for fetching the specific data they need.
   const [sortOption, setSortOption] = useState<SortOption | undefined>();
   const isFetching = useIsFetching({ stale: true });
-  // const isSortingEnabled = !isFetching;
-  const isSortingEnabled = false; // TODO: Figure out why this puts us into infinite loops
-
-  // const { sortedPools, status } = useSortedPools({
-  //   pools: selectedPools,
-  //   enabled: isSortingEnabled,
-  //   sortOption,
-  // });
+  const isSortingEnabled = !isFetching;
+  const { sortedPools, status } = useSortedPools({
+    pools: selectedPools,
+    enabled: isSortingEnabled,
+    sortOption,
+  });
 
   return {
-    // pools: isSortingEnabled ? sortedPools : selectedPools,
-    pools: selectedPools,
+    pools: isSortingEnabled ? sortedPools : selectedPools,
     filters,
     status,
     sortOption,
@@ -172,9 +169,15 @@ function useSortedPools({
                   calculateMarketYieldMultiplier(a.longPrice).bigint,
               );
             case "TVL":
-              return fixed(b.tvl.fiat ?? 0)
-                .sub(a.tvl.fiat ?? 0)
-                .toNumber();
+              const tvlA =
+                b.tvl.fiat ??
+                fixed(b.tvl.base).div(b.hyperdrive.decimals, 0) ??
+                0;
+              const tvlB =
+                a.tvl.fiat ??
+                fixed(a.tvl.base).div(a.hyperdrive.decimals, 0) ??
+                0;
+              return fixed(tvlA).sub(tvlB).toNumber();
             default:
               return 0;
           }