[APR] PoolTable Filter

apps/balancer-tools/package.json

@@ -45,6 +45,7 @@
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
     "copy-to-clipboard": "^3.3.3",
+    "downshift": "^8.1.0",
     "graphql-request": "5.1.0",
     "inputmask": "^5.0.8",
     "lodash": "^4.17.21",

apps/balancer-tools/src/app/apr/(components)/MultiSelectDropdown.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { Cross1Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import Downshift, { ControllerStateAndHelpers } from "downshift";
+import React, { useCallback, useState } from "react";
+
+import { Badge } from "#/components/Badge";
+import { BaseInput } from "#/components/Input";
+
+export const MultiSelectDropdown = ({
+  items,
+  placeholderText,
+  onSelectionItemsChange,
+  initialSelectedItems,
+  ...rest
+}: {
+  items: string[];
+  placeholderText: string;
+  onSelectionItemsChange: (items: string[]) => void;
+  initialSelectedItems: string[];
+}) => {
+  const [selectedItems, setSelectedItems] =
+    useState<string[]>(initialSelectedItems);
+
+  function handleOnKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    const inputElement = event.target as HTMLInputElement;
+    if (!inputElement.value.length) {
+      if (event.key === "Backspace") {
+        const copySelectedItems = [...selectedItems];
+        copySelectedItems.pop();
+        setSelectedItems(copySelectedItems);
+        onSelectionItemsChange(copySelectedItems);
+      }
+    }
+  }
+
+  const changeHandler = useCallback(
+    (
+      selectedItems: string[],
+      setSelectedItems: React.Dispatch<React.SetStateAction<string[]>>,
+      onSelectionItemsChange: (items: string[]) => void,
+    ) => {
+      return (
+        selectedItem: string | null,
+        downshift: ControllerStateAndHelpers<string>,
+      ) => {
+        if (!selectedItem) return;
+        const i = selectedItems.findIndex((item) => item === selectedItem);
+        if (i === -1) setSelectedItems([...selectedItems, selectedItem]);
+        onSelectionItemsChange([...selectedItems, selectedItem]);
+        downshift.clearSelection();
+      };
+    },
+    [selectedItems],
+  );
+
+  const removeSelectedItemByIndex = useCallback(
+    (
+      i: number,
+      selectedItems: string[],
+      setSelectedItems: (items: string[]) => void,
+      onSelectionItemsChange: (items: string[]) => void,
+    ) => {
+      const temp = [...selectedItems];
+      temp.splice(i, 1);
+      setSelectedItems(temp);
+      onSelectionItemsChange(temp);
+    },
+    [selectedItems],
+  );
+
+  const getFilteredItems = useCallback(
+    (inputValue: string | null) => {
+      return items.filter(
+        (item) =>
+          !selectedItems.find((selected) => selected === item) &&
+          item.includes(String(inputValue)),
+      );
+    },
+    [selectedItems],
+  );
+
+  return (
+    <div className="relative">
+      <Downshift
+        {...rest}
+        onChange={changeHandler(
+          selectedItems,
+          setSelectedItems,
+          onSelectionItemsChange,
+        )}
+      >
+        {({
+          getLabelProps,
+          getInputProps,
+          getItemProps,
+          highlightedIndex,
+          isOpen,
+          toggleMenu,
+          inputValue,
+        }) => {
+          return (
+            <div>
+              <div className="relative mt-1">
+                <div className="flex items-center bg-blue4 relative w-full cursor-default overflow-hidden rounded-lg text-left shadow-md focus:outline-none focus-within:ring-2 focus-within:ring-blue6 focus-within:ring-opacity/75 focus-within:ring-offset-2 focus-within:ring-offset-blue3 sm:text-sm">
+                  <label {...getLabelProps()} className="flex-1 mx-1">
+                    <MagnifyingGlassIcon />
+                  </label>
+                  <div className="flex gap-2">
+                    {selectedItems.map((value, idx) => {
+                      return (
+                        <Badge key={value + idx} color="blue">
+                          <div
+                            className="flex gap-2 items-center w-max"
+                            onClick={() =>
+                              removeSelectedItemByIndex(
+                                idx,
+                                selectedItems,
+                                setSelectedItems,
+                                onSelectionItemsChange,
+                              )
+                            }
+                          >
+                            <span>{value}</span>
+                            <span className="cursor-pointer">
+                              <Cross1Icon />
+                            </span>
+                          </div>
+                        </Badge>
+                      );
+                    })}
+                  </div>
+
+                  <BaseInput
+                    placeholder={placeholderText}
+                    {...getInputProps()}
+                    onFocus={() => {
+                      toggleMenu();
+                    }}
+                    onKeyDown={handleOnKeyDown}
+                    className="hover:shadow-[0] focus:shadow-[0] shadow-none"
+                  />
+                </div>
+              </div>
+
+              {isOpen && (
+                <div className="absolute z-50 my-2 flex max-h-52 flex-col overflow-y-scroll rounded border-[1px] border-blue6 bg-blue3 scrollbar-thin scrollbar-track-blue2 scrollbar-thumb-slate12 w-full">
+                  {getFilteredItems(inputValue).length > 0 ? (
+                    getFilteredItems(inputValue).map((item, idx) => {
+                      return (
+                        <div
+                          className={`flex w-full flex-col items-start cursor-pointer p-2 ${
+                            idx == highlightedIndex
+                              ? "bg-blue6"
+                              : "bg-transparent"
+                          }`}
+                          {...getItemProps({ item, key: item + idx })}
+                        >
+                          <span>{item}</span>
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div className="flex flex-col items-center text-center text-slate12 p-4">
+                      <span>Sorry, no token was found with the symbol</span>
+                    </div>
+                  )}
+                </div>
+              )}
+              <div></div>
+            </div>
+          );
+        }}
+      </Downshift>
+    </div>
+  );
+};

apps/balancer-tools/src/app/apr/(utils)/calculatePoolStats.ts

@@ -5,7 +5,7 @@ import * as balEmissions from "#/lib/balancer/emissions";
 import { Pool } from "#/lib/balancer/gauges";
 import { pools } from "#/lib/gql/server";
 
-import { PoolStatsData } from "../api/route";
+import { PoolStatsData, PoolTokens } from "../api/route";
 import { getBALPriceByRound } from "./getBALPriceByRound";
 import { getPoolRelativeWeight } from "./getRelativeWeight";
 import { Round } from "./rounds";
@@ -16,7 +16,7 @@ export enum PoolTypeEnum {
   WEIGHTED = "Weighted",
   GYROE = "GyroE",
   STABLE = "Stable",
-  MetaStable = "MetaStable",
+  META_STABLE = "MetaStable",
   UNKNOWN = "FX",
 }
 
@@ -113,6 +113,8 @@ export async function calculatePoolStats({
     votingShare,
     symbol,
     network,
+    tokens: pool.tokens as PoolTokens[],
+    type: pool.poolType as keyof typeof PoolTypeEnum,
   };
 }
 

apps/balancer-tools/src/app/apr/(utils)/getFilteredApiUrl.ts

@@ -0,0 +1,42 @@
+import { BASE_URL } from "../api/route";
+import { SearchParams } from "../round/[roundId]/page";
+
+export const INITIAL_MIN_TVL = 1000;
+export const INITIAL_LIMIT = 10;
+
+const convert = (key: string, value: string) => {
+  if (["sort", "order"].includes(key)) return value || undefined;
+  if (["minTVL", "maxTVL", "minAPR", "maxAPR", "limit"].includes(key))
+    return Number(value) || undefined;
+  if (["tokens", "type", "network"].includes(key))
+    return value ? value.split(",") : undefined;
+  return value;
+};
+function getFilterDataFromParams(searchParams: SearchParams) {
+  const result = Object.fromEntries(
+    Object.entries(searchParams).map(([key, value]) => [
+      key,
+      convert(key, value),
+    ]),
+  );
+
+  // Include minTVL and limit if they are not already present in searchParams
+  if (!("minTVL" in result)) {
+    result.minTVL = INITIAL_MIN_TVL;
+  }
+  if (!("limit" in result)) {
+    result.limit = INITIAL_LIMIT;
+  }
+
+  return result;
+}
+export default function getFilteredRoundApiUrl(
+  searchParams: SearchParams,
+  roundId: string,
+) {
+  const filteredData = getFilterDataFromParams(searchParams);
+  const params = Object.entries(filteredData)
+    .map(([key, value]) => (value !== undefined ? `${key}=${value}` : ""))
+    .join("&");
+  return `${BASE_URL}/apr/api/?roundId=${roundId}&${params}`;
+}

apps/balancer-tools/src/app/apr/api/route.ts

@@ -4,7 +4,10 @@ import { NextRequest, NextResponse } from "next/server";
 import { Pool, POOLS_WITH_LIVE_GAUGES } from "#/lib/balancer/gauges";
 import { fetcher } from "#/utils/fetcher";
 
-import { calculatePoolStats } from "../(utils)/calculatePoolStats";
+import {
+  calculatePoolStats,
+  PoolTypeEnum,
+} from "../(utils)/calculatePoolStats";
 import { Round } from "../(utils)/rounds";
 
 export const BASE_URL =
@@ -39,6 +42,8 @@ export interface PoolStatsData extends PoolStats {
   network: string;
   poolId: string;
   roundId: number;
+  tokens: PoolTokens[];
+  type: keyof typeof PoolTypeEnum;
 }
 
 export interface PoolStatsResults {
@@ -275,7 +280,8 @@ function filterPoolStats(
   const maxVotingShare = parseFloat(
     searchParams.get("maxVotingShare") ?? "Infinity",
   );
-  const tokenSymbol = searchParams.get("symbol");
+  const tokenSymbol = searchParams.get("tokens");
+  const poolTypes = searchParams.get("types");
   const minTvl = parseFloat(searchParams.get("minTvl") ?? "0");
   const maxTvl = parseFloat(searchParams.get("maxTvl") ?? "Infinity");
 
@@ -295,7 +301,16 @@ function filterPoolStats(
     );
   }
   if (tokenSymbol) {
-    filteredData = filteredData.filter((pool) => pool.symbol === tokenSymbol);
+    const decodedSymbols = tokenSymbol.split(",").map(decodeURIComponent);
+    filteredData = filteredData.filter((pool) =>
+      pool.tokens.some((token) => decodedSymbols.includes(token.symbol)),
+    );
+  }
+  if (poolTypes) {
+    const decodedSymbols = poolTypes.split(",").map(decodeURIComponent);
+    filteredData = filteredData.filter((pool) =>
+      decodedSymbols.includes(pool.type),
+    );
   }
   if (minTvl || maxTvl) {
     filteredData = filteredData.filter(