@b3dotfun/sdk 0.0.65-test.1 → 0.0.65

package/src/global-account/react/components/AccountAssets/AccountAssets.tsx

@@ -1,35 +1,16 @@
-import { NFT, SimpleHashNFTResponse } from "@b3dotfun/sdk/global-account/types/simplehash.types";
-import { useState } from "react";
+import { SimpleHashNFTResponse } from "@b3dotfun/sdk/global-account/types/simplehash.types";
 
 interface AccountAssetsProps {
   nfts: SimpleHashNFTResponse;
   isLoading?: boolean;
 }
 
-interface GroupedNFTs {
-  collection_id: string;
-  collection_name: string;
-  collection_image: string;
-  nfts: NFT[];
-}
-
 export function AccountAssets({ nfts, isLoading }: AccountAssetsProps) {
-  // Initialize with all collections expanded
-  const [expandedCollections, setExpandedCollections] = useState<Set<string>>(
-    () => new Set(collections.map(c => c.collection_id)),
-  );
-
   if (isLoading) {
     return (
-      <div className="flex flex-col gap-3">
-        {[...Array(2)].map((_, i) => (
-          <div key={i} className="animate-pulse">
-            <div className="bg-b3-react-muted mb-3 h-6 w-48 rounded" />
-            <div className="flex gap-3">
-              <div className="bg-b3-react-muted h-[98px] w-[98px] shrink-0 rounded-lg" />
-              <div className="bg-b3-react-muted h-[98px] w-[98px] shrink-0 rounded-lg" />
-            </div>
-          </div>
+      <div className="grid animate-pulse grid-cols-2 gap-4">
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="bg-b3-react-muted aspect-square rounded-lg" />
         ))}
       </div>
     );
@@ -39,100 +20,29 @@ export function AccountAssets({ nfts, isLoading }: AccountAssetsProps) {
     return <div className="text-b3-react-muted-foreground py-8 text-center">No NFTs found</div>;
   }
 
-  // Group NFTs by collection
-  const groupedNFTs = nfts.nfts.reduce(
-    (acc, nft) => {
-      const collectionId = nft.collection?.collection_id || "unknown";
-      if (!acc[collectionId]) {
-        acc[collectionId] = {
-          collection_id: collectionId,
-          collection_name: nft.collection?.name || "Unknown Collection",
-          collection_image: nft.collection?.image_url || nft.previews?.image_small_url || "",
-          nfts: [],
-        };
-      }
-      acc[collectionId].nfts.push(nft);
-      return acc;
-    },
-    {} as Record<string, GroupedNFTs>,
-  );
-
-  const collections = Object.values(groupedNFTs);
-
-  const toggleCollection = (collectionId: string) => {
-    setExpandedCollections(prev => {
-      const next = new Set(prev);
-      if (next.has(collectionId)) {
-        next.delete(collectionId);
-      } else {
-        next.add(collectionId);
-      }
-      return next;
-    });
-  };
-
   return (
-    <div className="flex flex-col gap-3 px-4">
-      {collections.map(collection => {
-        const isExpanded = expandedCollections.has(collection.collection_id);
-
-        return (
-          <div key={collection.collection_id} className="flex flex-col gap-3">
-            {/* Collection Header */}
-            <button
-              onClick={() => toggleCollection(collection.collection_id)}
-              className="flex w-full items-center justify-between"
-            >
-              <div className="flex items-center gap-1">
-                {collection.collection_image && (
-                  <img
-                    src={collection.collection_image}
-                    alt={collection.collection_name}
-                    className="h-5 w-5 shrink-0 rounded object-cover"
-                  />
-                )}
-                <p className="font-neue-montreal-medium text-[14px] text-[#3f3f46]">
-                  {collection.collection_name} ({collection.nfts.length})
-                </p>
-              </div>
-              <svg
-                className={`h-[18px] w-[18px] shrink-0 transition-transform ${isExpanded ? "rotate-180" : ""}`}
-                viewBox="0 0 18 18"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M4.5 6.75L9 11.25L13.5 6.75"
-                  stroke="#51525C"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            </button>
-
-            {/* NFT Grid */}
-            {isExpanded && (
-              <div className="flex gap-3 overflow-x-auto">
-                {collection.nfts.map(nft => (
-                  <div key={nft.nft_id} className="relative h-[98px] w-[98px] shrink-0 overflow-hidden rounded-lg">
-                    <img
-                      src={
-                        nft.previews?.image_medium_url ||
-                        nft.extra_metadata?.image_original_url ||
-                        nft.collection?.image_url ||
-                        ""
-                      }
-                      alt={nft.name || "NFT"}
-                      className="h-full w-full object-cover"
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
+    <div className="grid grid-cols-2 gap-4">
+      {nfts.nfts.map(nft => (
+        <div key={nft.nft_id} className="group relative aspect-square overflow-hidden">
+          <div className="relative h-full w-full overflow-hidden rounded-xl">
+            <img
+              src={
+                nft.previews?.image_medium_url || nft.extra_metadata?.image_original_url || nft.collection?.image_url
+              }
+              alt={nft.name || "NFT"}
+              className="h-full w-full rounded-xl object-cover"
+            />
+            <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black from-35% via-black/70 to-transparent p-3 opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100">
+              <p className="font-neue-montreal-bold text-[16px] text-white drop-shadow-[0_1px_2px_rgba(0,0,0,1)]">
+                {nft.name || `#${nft.token_id}`}
+              </p>
+              <p className="font-neue-montreal-bold text-sm text-white/95 drop-shadow-[0_1px_2px_rgba(0,0,0,1)]">
+                {nft.collection?.name}
+              </p>
+            </div>
           </div>
-        );
-      })}
+        </div>
+      ))}
     </div>
   );
 }