Enhance collections tree with show all/show less, #7547

packages/next-common/components/profile/nfts/index.jsx

@@ -29,7 +29,7 @@ export default function ProfileNfts() {
   return (
     <>
       <TitleContainer className="justify-start gap-x-1">
-        NFTs
+        NFT
         <span className="text16Medium text-textTertiary">{totalItems}</span>
       </TitleContainer>
       <SecondaryCard>

packages/next-common/components/profile/nfts/nftCollectionsTree.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "next-common/utils";
 import Link from "next-common/components/link";
 import Caret from "next-common/components/icons/caret";
@@ -158,8 +158,22 @@ function NftCollection({ collection, expanded, onToggle }) {
   );
 }
 
+const COLLAPSED_MAX_HEIGHT = 320;
+
 export default function NftCollectionsTree({ collections }) {
   const [expandedKeys, setExpandedKeys] = useState(() => new Set());
+  const [showAll, setShowAll] = useState(false);
+  const [overflow, setOverflow] = useState(false);
+  const contentRef = useRef(null);
+
+  useEffect(() => {
+    const el = contentRef.current;
+    if (el) {
+      setOverflow(el.scrollHeight > COLLAPSED_MAX_HEIGHT);
+    }
+  }, [collections, expandedKeys]);
+
+  const collapsed = overflow && !showAll;
 
   const toggle = (key) => {
     setExpandedKeys((prev) => {
@@ -175,14 +189,29 @@ export default function NftCollectionsTree({ collections }) {
 
   return (
     <div className="flex flex-col">
-      {collections.map((collection) => (
-        <NftCollection
-          key={collection.collectionId}
-          collection={collection}
-          expanded={expandedKeys.has(collection.collectionId)}
-          onToggle={() => toggle(collection.collectionId)}
-        />
-      ))}
+      <div
+        ref={contentRef}
+        className={cn("flex flex-col", collapsed && "overflow-hidden")}
+        style={collapsed ? { maxHeight: COLLAPSED_MAX_HEIGHT } : undefined}
+      >
+        {collections.map((collection) => (
+          <NftCollection
+            key={collection.collectionId}
+            collection={collection}
+            expanded={expandedKeys.has(collection.collectionId)}
+            onToggle={() => toggle(collection.collectionId)}
+          />
+        ))}
+      </div>
+      {overflow && (
+        <button
+          type="button"
+          className="self-center mt-3 text14Medium text-theme500 cursor-pointer"
+          onClick={() => setShowAll((prev) => !prev)}
+        >
+          {showAll ? "Show less" : "Show all"}
+        </button>
+      )}
     </div>
   );
 }

packages/next-common/components/profile/tabs/content.js

@@ -60,8 +60,8 @@ export default function useProfileTabContent() {
     return (
       <div className="flex flex-col gap-[16px]">
         <ProfileAssets />
-        <ProfileNfts />
         <ProfileForeignAssets />
+        <ProfileNfts />
         <ProfileHydrationAssets />
       </div>
     );