Add hide low TVL filter (#1815)

* Add low tvl filter

* Add title to input

* Reduce gap

* Fix mobile

* Change variable name

Author: ryangoree

apps/hyperdrive-trading/src/ui/base/components/MultiSelect.tsx

@@ -6,26 +6,42 @@ import {
 } from "@heroicons/react/20/solid";
 import classNames from "classnames";
 import Fuse from "fuse.js";
-import { ReactElement, ReactNode, useMemo, useRef, useState } from "react";
+import {
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { OneOf } from "viem";
 
-export interface MultiSelectProps<T extends OptionValue> {
+export type MultiSelectProps<T extends OptionValue> = {
   selected: T[];
-  /**
-   * The value to show inside the button, representing the selected value, e.g.,
-   * `"4 selected"`.
-   */
-  displayValue: ReactNode;
   options: MultiSelectOption<T>[];
   onChange: (selected: T[]) => void;
-  /**
-   * The value to use for the button's `title` attribute.
-   */
-  title?: string;
   className?: string;
   searchEnabled?: boolean;
-}
+} & OneOf<
+  | {
+      // The button that will open the dropdown
+      button: ReactNode;
+    }
+  | {
+      /**
+       * The value to show inside the button, representing the selected value, e.g.,
+       * `"4 selected"`.
+       */
+      displayValue: ReactNode;
+      /**
+       * The value to use for the button's `title` attribute.
+       */
+      title?: string;
+    }
+>;
 
 export function MultiSelect<T extends OptionValue>({
+  button,
   displayValue,
   selected,
   options,
@@ -54,15 +70,12 @@ export function MultiSelect<T extends OptionValue>({
 
   return (
     <div className={classNames("daisy-dropdown", className)}>
-      <div
-        tabIndex={0}
-        role="button"
-        title={title}
-        className="daisy-btn daisy-btn-outline daisy-btn-sm flex items-center justify-center border-gray-600"
-      >
-        {displayValue}
-        <ChevronDownIcon className="size-5" />
-      </div>
+      {button || (
+        <MultiSelectButton title={title}>
+          {displayValue}
+          <ChevronDownIcon className="hidden size-5 sm:block" />
+        </MultiSelectButton>
+      )}
       <div
         tabIndex={0}
         className="daisy-menu daisy-dropdown-content z-[1] mt-1 gap-2 rounded-lg border border-base-200 bg-base-100 p-2 shadow"
@@ -167,6 +180,29 @@ export function MultiSelect<T extends OptionValue>({
   );
 }
 
+export function MultiSelectButton({
+  title,
+  className,
+  children,
+}: PropsWithChildren<{
+  title?: string;
+  className?: string;
+}>): ReactNode {
+  return (
+    <div
+      tabIndex={0}
+      role="button"
+      title={title}
+      className={classNames(
+        "daisy-btn daisy-btn-outline daisy-btn-sm flex items-center justify-center border-gray-600 py-1",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
 export type MultiSelectOption<T extends OptionValue> = {
   value: T;
   /**

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

@@ -1,6 +1,8 @@
+import { parseFixed } from "@delvtech/fixed-point-wasm";
 import {
   AdjustmentsHorizontalIcon,
   BarsArrowDownIcon,
+  ChevronDownIcon,
 } from "@heroicons/react/20/solid";
 import { ArrowUpIcon } from "@heroicons/react/24/outline";
 import { useNavigate, useSearch } from "@tanstack/react-router";
@@ -9,19 +11,28 @@ import { ReactElement, ReactNode } from "react";
 import { Fade } from "react-awesome-reveal";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import LoadingState from "src/ui/base/components/LoadingState";
-import { MultiSelect } from "src/ui/base/components/MultiSelect";
+import {
+  MultiSelect,
+  MultiSelectButton,
+} 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 { sortOptions, usePoolsList } from "src/ui/markets/hooks/usePoolsList";
 import { useAccount } from "wagmi";
+
 export function PoolsList(): ReactElement {
   const { address: account } = useAccount();
   const appConfig = useAppConfigForConnectedChain();
-  const { chains: selectedChains, assets: selectedAssets } = useSearch({
+  const {
+    chains: selectedChains,
+    assets: selectedAssets,
+    hideLowTvl = true,
+  } = useSearch({
     from: LANDING_ROUTE,
   });
+  const lowTvlThreshold = parseFixed(10_000);
   const {
     filters,
     status,
@@ -32,6 +43,10 @@ export function PoolsList(): ReactElement {
   } = usePoolsList({
     selectedChains,
     selectedAssets,
+    hideLowTvl: {
+      enabled: hideLowTvl,
+      threshold: lowTvlThreshold,
+    },
   });
 
   const navigate = useNavigate({ from: LANDING_ROUTE });
@@ -60,14 +75,26 @@ export function PoolsList(): ReactElement {
         ) : pools ? (
           <>
             {/* List controls */}
-            <div className="relative z-20 flex items-center justify-between gap-10">
+            <div className="relative z-20 flex items-stretch justify-between gap-2">
               {/* Filters */}
-              <div className="flex items-center gap-2">
-                <AdjustmentsHorizontalIcon className="size-5 sm:mr-1" />
+              <div className="flex items-stretch gap-2">
+                <AdjustmentsHorizontalIcon className="hidden size-5 sm:mr-1 sm:block" />
                 {/* Chain filter */}
                 {filters && filters.chains.length > 1 && (
                   <MultiSelect
-                    title="Filter by chain"
+                    button={
+                      <MultiSelectButton
+                        title="Filter by chain"
+                        className="h-full py-2 sm:py-0"
+                      >
+                        {selectedChains?.length === 1
+                          ? appConfig.chains[selectedChains[0]].name
+                          : `${
+                              selectedChains?.length || filters?.chains.length
+                            } chains`}
+                        <ChevronDownIcon className="hidden size-5 sm:block" />
+                      </MultiSelectButton>
+                    }
                     selected={selectedChains || []}
                     onChange={(chains) => {
                       window.plausible("filterChange", {
@@ -86,13 +113,6 @@ export function PoolsList(): ReactElement {
                         },
                       });
                     }}
-                    displayValue={
-                      selectedChains?.length === 1
-                        ? appConfig.chains[selectedChains[0]].name
-                        : `${
-                            selectedChains?.length || filters?.chains.length
-                          } chains`
-                    }
                     searchEnabled
                     options={filters.chains.map(({ chain, count }) => {
                       return {
@@ -111,7 +131,19 @@ export function PoolsList(): ReactElement {
                 {/* Assets filter */}
                 {filters && filters.assets.length > 1 && (
                   <MultiSelect
-                    title="Filter by deposit asset"
+                    button={
+                      <MultiSelectButton
+                        title="Filter by deposit asset"
+                        className="h-full py-2 sm:py-0"
+                      >
+                        {selectedAssets?.length === 1
+                          ? selectedAssets[0]
+                          : `${
+                              selectedAssets?.length || filters.assets.length
+                            } assets`}
+                        <ChevronDownIcon className="hidden size-5 sm:block" />
+                      </MultiSelectButton>
+                    }
                     selected={selectedAssets || []}
                     onChange={(assets) => {
                       window.plausible("filterChange", {
@@ -130,13 +162,6 @@ export function PoolsList(): ReactElement {
                         },
                       });
                     }}
-                    displayValue={
-                      selectedAssets?.length === 1
-                        ? selectedAssets[0]
-                        : `${
-                            selectedAssets?.length || filters.assets.length
-                          } assets`
-                    }
                     searchEnabled
                     options={filters.assets.map(({ asset, count }) => {
                       return {
@@ -151,6 +176,39 @@ export function PoolsList(): ReactElement {
                   />
                 )}
 
+                {/* Hide low TVL filter */}
+                <span className="daisy-badge flex h-auto items-center self-stretch border-gray-600 py-2 sm:py-1">
+                  <label className="flex h-full cursor-pointer flex-col content-center items-center gap-2 sm:flex-row">
+                    <span className="daisy-label-text text-nowrap text-center">
+                      Hide low TVL
+                    </span>
+                    <input
+                      type="checkbox"
+                      title={`Hide pools with less than ${lowTvlThreshold.format()} in TVL`}
+                      className="daisy-toggle daisy-toggle-sm"
+                      defaultChecked={hideLowTvl}
+                      onChange={(e) => {
+                        window.plausible("filterChange", {
+                          props: {
+                            name: "Hide low TVL",
+                            value: String(e.target.checked),
+                            connectedWallet: account,
+                          },
+                        });
+                        navigate({
+                          search: (current) => {
+                            return {
+                              ...current,
+                              hideLowTvl: e.target.checked,
+                            };
+                          },
+                        });
+                      }}
+                    />
+                  </label>
+                </span>
+
+                {/* Matching pools count */}
                 <span className="daisy-badge hidden h-auto items-center self-stretch text-neutral-content sm:flex">
                   {pools.length}
                   {pools.length === 1 ? " pool" : " pools"}
@@ -164,7 +222,7 @@ export function PoolsList(): ReactElement {
                   role="button"
                   title="Sort by"
                   className={classNames(
-                    "daisy-btn daisy-btn-outline daisy-btn-sm flex items-center justify-center border-gray-600",
+                    "daisy-btn daisy-btn-outline daisy-btn-sm flex h-full items-center justify-center border-gray-600 py-2 sm:py-0",
                     {
                       "daisy-btn-disabled": !isSortingEnabled,
                     },

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

@@ -1,4 +1,4 @@
-import { fixed } from "@delvtech/fixed-point-wasm";
+import { fixed, FixedPoint } from "@delvtech/fixed-point-wasm";
 import {
   AnyReward,
   AppConfig,
@@ -48,9 +48,14 @@ type SortOption = (typeof sortOptions)[number];
 export function usePoolsList({
   selectedAssets,
   selectedChains,
+  hideLowTvl,
 }: {
   selectedAssets: string[] | undefined;
   selectedChains: number[] | undefined;
+  hideLowTvl?: {
+    enabled: boolean | undefined;
+    threshold: FixedPoint;
+  };
 }): {
   pools: (HyperdriveConfig & { rewardsAmount?: AnyReward[] })[] | undefined;
   filters: PoolListFilters | undefined;
@@ -76,10 +81,11 @@ export function usePoolsList({
   const chainId = useChainId();
   const isTestnet = isTestnetChain(chainId);
 
-  // Sorting is disabled any time we're fetching data. This is because sorting
-  // requires fetching a significant amount of data, and we want the List to load
-  // as fast as possible. Instead, the individual PoolRow components are
-  // responsible for fetching the specific data they need.
+  // Sorting and filtering based on async data is disabled any time we're
+  // fetching data. This is because sorting requires fetching a significant
+  // amount of data, and we want the List to load as fast as possible. Instead,
+  // the individual PoolRow components are responsible for fetching the specific
+  // data they need.
   const [sortOption, setSortOption] = useState<SortOption | undefined>();
   const isFetching = useIsFetching({
     // don't treat stale queries as fetching, since we have data we can show
@@ -90,6 +96,9 @@ export function usePoolsList({
     pools: selectedPools,
     enabled: isSortingEnabled,
     sortOption,
+    filters: {
+      tvl: hideLowTvl?.enabled ? hideLowTvl?.threshold : undefined,
+    },
   });
 
   return {
@@ -101,14 +110,19 @@ export function usePoolsList({
     isSortingEnabled,
   };
 }
+
 function useSortedPools({
   pools,
   enabled,
   sortOption,
+  filters,
 }: {
   pools: HyperdriveConfig[] | undefined;
   enabled: boolean;
   sortOption: SortOption | undefined;
+  filters: {
+    tvl?: FixedPoint;
+  };
 }) {
   const appConfig = useAppConfigForConnectedChain();
   const queryEnabled = !!pools && enabled;
@@ -161,7 +175,15 @@ function useSortedPools({
         }
       : undefined,
     select: (poolsWithData) => {
-      return poolsWithData
+      const filteredPools = !!filters.tvl
+        ? poolsWithData.filter((pool) => {
+            const tvl = pool.tvl.fiat
+              ? fixed(pool.tvl.fiat)
+              : fixed(pool.tvl.base, pool.hyperdrive.decimals);
+            return tvl.gte(filters.tvl!);
+          })
+        : poolsWithData;
+      return filteredPools
         .toSorted((a, b) => {
           switch (sortOption) {
             case "Chain":

apps/hyperdrive-trading/src/ui/routes/index.tsx

@@ -13,5 +13,6 @@ export const Route = createFileRoute(LANDING_ROUTE)({
   validateSearch: z.object({
     chains: z.array(z.number()).optional(),
     assets: z.array(z.string()).optional(),
+    hideLowTvl: z.boolean().optional(),
   }),
 });