feat(widget): multi-validator provider cards and validator selection fixes

package.json

@@ -27,8 +27,7 @@
   "pnpm": {
     "patchedDependencies": {
       "purify-ts": "patches/purify-ts.patch",
-      "@stakekit/rainbowkit@2.2.11": "patches/@stakekit__rainbowkit@2.2.11.patch",
-      "vite-plugin-node-polyfills@0.26.0": "patches/vite-plugin-node-polyfills@0.26.0.patch"
+      "@stakekit/rainbowkit@2.2.11": "patches/@stakekit__rainbowkit@2.2.11.patch"
     }
   }
 }

packages/widget/src/components/atoms/virtual-list/index.tsx

@@ -46,7 +46,7 @@ type VirtualGroupListProps = {
   estimateSize: VirtualizerOptions<Element, Element>["estimateSize"];
 } & InfiniteScrollProps;
 
-export const VirtualList = <ItemData = unknown>({
+export const VirtualList = <ItemData,>({
   data,
   itemContent,
   className,

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

@@ -67,14 +67,15 @@ export const SelectValidator = ({
     onClose?.();
   };
 
-  const viewMore = multiSelect || _viewMore || !!rest.searchValue;
+  const hasRequestedMoreValidators = _viewMore || !!rest.searchValue;
+  const showExpandedValidators = multiSelect || hasRequestedMoreValidators;
 
   const data = useMemo<{
     tableData: ValidatorDto[];
     groupedItems: GroupedItem[];
     groupCounts: number[];
   }>(() => {
-    if (!validators.length && hasMore && !viewMore) {
+    if (!validators.length && hasMore && !hasRequestedMoreValidators) {
       return {
         tableData: [],
         groupedItems: [{ items: [], label: "view_more" }],
@@ -97,7 +98,7 @@ export const SelectValidator = ({
       (acc, val) => {
         if (val.preferred) {
           acc.preferred.items.push(val);
-        } else if (viewMore) {
+        } else if (showExpandedValidators) {
           acc.other.items.push(val);
         }
 
@@ -117,21 +118,26 @@ export const SelectValidator = ({
 
     // If we do not have preferred validators, show all other
     if (!groupedItems.preferred.items.length && validators.length) {
+      const canViewMore = !hasRequestedMoreValidators && !!hasMore;
+
       return {
         tableData: validators,
         groupedItems: [
           {
             items: validators,
             label: t("details.validators_other"),
           },
+          ...(canViewMore ? [{ items: [], label: "view_more" }] : []),
         ],
-        groupCounts: [validators.length],
+        groupCounts: [validators.length, ...(canViewMore ? [1] : [])],
       };
     }
 
     const canViewMore =
-      !viewMore &&
-      (!!hasMore || groupedItems.preferred.items.length !== validators.length);
+      !hasRequestedMoreValidators &&
+      (!!hasMore ||
+        (!showExpandedValidators &&
+          groupedItems.preferred.items.length !== validators.length));
 
     const groupedItemsValues = Object.values(groupedItems);
 
@@ -148,7 +154,13 @@ export const SelectValidator = ({
         ...(canViewMore ? [1] : []),
       ],
     };
-  }, [hasMore, validators, t, viewMore]);
+  }, [
+    hasMore,
+    validators,
+    t,
+    hasRequestedMoreValidators,
+    showExpandedValidators,
+  ]);
 
   const searchProps = rest.onSearch
     ? {
@@ -157,7 +169,7 @@ export const SelectValidator = ({
       }
     : {};
   const infiniteScrollProps =
-    viewMore && onLoadMore
+    hasRequestedMoreValidators && onLoadMore
       ? {
           hasNextPage: !!hasMore,
           isFetchingNextPage: !!isLoadingMore,