refactor: validators query cache and search handling

packages/widget/src/components/molecules/select-validator/index.tsx

@@ -3,16 +3,25 @@ import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { ValidatorDto } from "../../../domain/types/validators";
 import type { Yield } from "../../../domain/types/yields";
+import { Box } from "../../atoms/box";
 import type { SelectModalProps } from "../../atoms/select-modal";
 import { SelectModal } from "../../atoms/select-modal";
+import { Text } from "../../atoms/typography/text";
 import type { GroupedItem } from "./select-validator-list";
 import { SelectValidatorList } from "./select-validator-list";
+import { emptyState } from "./styles.css";
 
 type SelectValidatorProps = PropsWithChildren<
-  Pick<SelectModalProps, "onClose" | "onOpen" | "state" | "trigger"> & {
+  Pick<
+    SelectModalProps,
+    "isLoading" | "onClose" | "onOpen" | "state" | "trigger"
+  > & {
     selectedValidators: Set<ValidatorDto["address"]>;
     onItemClick: (item: ValidatorDto) => void;
     onViewMoreClick?: () => void;
+    onLoadMore?: () => void;
+    hasMore?: boolean;
+    isLoadingMore?: boolean;
     validators: ValidatorDto[];
     selectedStake: Yield;
     multiSelect: boolean;
@@ -27,12 +36,16 @@ type SelectValidatorProps = PropsWithChildren<
 
 export const SelectValidator = ({
   state,
+  isLoading,
   onClose,
   onOpen,
   trigger,
   selectedValidators,
   onItemClick,
   onViewMoreClick,
+  onLoadMore,
+  hasMore,
+  isLoadingMore,
   validators,
   multiSelect,
   selectedStake,
@@ -45,6 +58,7 @@ export const SelectValidator = ({
 
   const _onViewMoreClick = () => {
     onViewMoreClick?.();
+    onLoadMore?.();
     setViewMore(true);
   };
 
@@ -53,13 +67,21 @@ export const SelectValidator = ({
     onClose?.();
   };
 
-  const viewMore = !!multiSelect || _viewMore || rest.searchValue;
+  const viewMore = multiSelect || _viewMore || !!rest.searchValue;
 
   const data = useMemo<{
     tableData: ValidatorDto[];
     groupedItems: GroupedItem[];
     groupCounts: number[];
   }>(() => {
+    if (!validators.length && hasMore && !viewMore) {
+      return {
+        tableData: [],
+        groupedItems: [{ items: [], label: "view_more" }],
+        groupCounts: [1],
+      };
+    }
+
     if (!validators.length) {
       return {
         tableData: [],
@@ -108,7 +130,8 @@ export const SelectValidator = ({
     }
 
     const canViewMore =
-      !viewMore && groupedItems.preferred.items.length !== validators.length;
+      !viewMore &&
+      (!!hasMore || groupedItems.preferred.items.length !== validators.length);
 
     const groupedItemsValues = Object.values(groupedItems);
 
@@ -125,14 +148,25 @@ export const SelectValidator = ({
         ...(canViewMore ? [1] : []),
       ],
     };
-  }, [validators, t, viewMore]);
+  }, [hasMore, validators, t, viewMore]);
 
   const searchProps = rest.onSearch
     ? {
         onSearch: rest.onSearch,
         searchValue: rest.searchValue,
       }
     : {};
+  const infiniteScrollProps =
+    viewMore && onLoadMore
+      ? {
+          hasNextPage: !!hasMore,
+          isFetchingNextPage: !!isLoadingMore,
+          fetchNextPage: onLoadMore,
+        }
+      : {};
+  const emptyMessage = rest.searchValue?.trim().length
+    ? t("details.validators_no_results")
+    : t("details.validators_empty");
 
   return (
     <SelectModal
@@ -143,16 +177,24 @@ export const SelectValidator = ({
       onOpen={onOpen}
       trigger={trigger}
       state={state}
+      isLoading={isLoading}
       {...searchProps}
     >
-      <SelectValidatorList
-        {...data}
-        selectedValidators={selectedValidators}
-        multiSelect={multiSelect}
-        onItemClick={onItemClick}
-        onViewMoreClick={_onViewMoreClick}
-        selectedStake={selectedStake}
-      />
+      {data.groupCounts.length ? (
+        <SelectValidatorList
+          {...data}
+          selectedValidators={selectedValidators}
+          multiSelect={multiSelect}
+          onItemClick={onItemClick}
+          onViewMoreClick={_onViewMoreClick}
+          selectedStake={selectedStake}
+          {...infiniteScrollProps}
+        />
+      ) : isLoading ? null : (
+        <Box className={emptyState}>
+          <Text variant={{ type: "muted" }}>{emptyMessage}</Text>
+        </Box>
+      )}
 
       {children}
     </SelectModal>

packages/widget/src/components/molecules/select-validator/styles.css.ts

@@ -4,6 +4,18 @@ import { vars } from "../../../styles/theme/contract.css";
 
 export const validatorVirtuosoContainer = style([atoms({ marginTop: "2" })]);
 
+export const emptyState = style([
+  atoms({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    px: "4",
+  }),
+  {
+    minHeight: "180px",
+  },
+]);
+
 const breakWord = style({ wordBreak: "break-all" });
 
 export const modalItemNameContainer = style([

packages/widget/src/domain/types/action.ts

@@ -6,7 +6,7 @@ import type {
   TransactionDto as YieldTransactionDtoGenerated,
 } from "../../generated/api/yield";
 import type { TokenDto } from "./tokens";
-import { getYieldMetadataTokens, type Yield } from "./yields";
+import type { Yield } from "./yields";
 
 export type ActionDto = YieldActionDtoGenerated;
 export type TransactionDto = YieldTransactionDtoGenerated;
@@ -107,11 +107,7 @@ export const getActionInputToken = ({
   const needle = toLower(inputTokenValue);
 
   return (
-    [
-      yieldDto.token,
-      ...(yieldDto.tokens ?? []),
-      ...getYieldMetadataTokens(yieldDto),
-    ].find((token) => {
+    [yieldDto.token, ...(yieldDto.tokens ?? [])].find((token) => {
       const address = token.address ? toLower(token.address) : null;
 
       return (

packages/widget/src/domain/types/positions.ts

@@ -38,7 +38,7 @@ export type PositionsData = Map<
     balanceData: Map<
       BalanceDataKey,
       { balances: YieldBalanceDto[] } & (
-        | { type: "validators"; validatorsAddresses: string[] }
+        | { type: "validators"; validators: ReadonlyArray<ValidatorDto> }
         | { type: "default" }
       )
     >;

packages/widget/src/domain/types/yields.ts

@@ -284,10 +284,6 @@ export const getYieldTVL = (yieldDto: Yield) =>
 export const getYieldLockupPeriod = (yieldDto: Yield) =>
   yieldDto.__fallback__.metadata.lockupPeriod;
 
-export const getYieldMetadataTokens = (yieldDto: Yield) => [
-  ...(yieldDto.__fallback__.metadata.tokens ?? []),
-];
-
 export const hasYieldExitSignatureVerification = (yieldDto: Yield) =>
   !!yieldDto.__fallback__.args.exit?.args?.signatureVerification?.required;
 

packages/widget/src/hooks/api/use-activity-actions.ts

@@ -1,24 +1,73 @@
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { type QueryClient, useInfiniteQuery } from "@tanstack/react-query";
 import { EitherAsync } from "purify-ts";
 import { useMemo } from "react";
-import { type ActionDto, getActionInputToken } from "../../domain/types/action";
+import {
+  type ActionDto,
+  getActionInputToken,
+  getActionValidatorAddresses,
+} from "../../domain/types/action";
+import type { ValidatorDto } from "../../domain/types/validators";
 import type { Yield } from "../../domain/types/yields";
 import { useApiClient } from "../../providers/api/api-client-provider";
 import { useSKQueryClient } from "../../providers/query-client";
 import { useSKWallet } from "../../providers/sk-wallet";
 import { getYieldOpportunity } from "./use-yield-opportunity/get-yield-opportunity";
+import { getYieldValidatorsByAddresses } from "./use-yield-validators";
 
 const PAGE_SIZE = 50;
+const ACTIVITY_VALIDATOR_ENRICHMENT_CONCURRENCY = 5;
 
 type ActivityActionItem = {
   actionData: ActionDto;
   yieldData: Yield;
+  validatorsData: ValidatorDto[];
 };
 
+type ActivityActionBaseItem = Omit<ActivityActionItem, "validatorsData">;
+
 type UseActivityActionsResult = ReturnType<typeof useInfiniteQuery> & {
   allItems: ActivityActionItem[] | undefined;
 };
 
+const getItemsWithValidators = async ({
+  items,
+  apiClient,
+  queryClient,
+}: {
+  items: ActivityActionBaseItem[];
+  apiClient: ReturnType<typeof useApiClient>;
+  queryClient: QueryClient;
+}) => {
+  const data: ActivityActionItem[] = [];
+
+  for (
+    let index = 0;
+    index < items.length;
+    index += ACTIVITY_VALIDATOR_ENRICHMENT_CONCURRENCY
+  ) {
+    const chunk = items.slice(
+      index,
+      index + ACTIVITY_VALIDATOR_ENRICHMENT_CONCURRENCY
+    );
+
+    data.push(
+      ...(await Promise.all(
+        chunk.map(async (item) => ({
+          ...item,
+          validatorsData: await getYieldValidatorsByAddresses({
+            apiClient,
+            queryClient,
+            yieldId: item.yieldData.id,
+            addresses: getActionValidatorAddresses(item.actionData) ?? [],
+          }),
+        }))
+      ))
+    );
+  }
+
+  return data;
+};
+
 export const useActivityActions = (): UseActivityActionsResult => {
   const { address, isLedgerLive, network } = useSKWallet();
   const queryClient = useSKQueryClient();
@@ -74,6 +123,15 @@ export const useActivityActions = (): UseActivityActionsResult => {
                     })
                 )
               )
+              .chain((items) =>
+                EitherAsync(() =>
+                  getItemsWithValidators({
+                    items,
+                    apiClient,
+                    queryClient,
+                  })
+                )
+              )
               .map((data) => ({ ...actionList, data }))
           )
       ).unsafeCoerce();