@b3dotfun/sdk 0.0.64-alpha.2 → 0.0.65-test.1

package/src/anyspend/react/components/common/OrderHistory.tsx

@@ -2,12 +2,13 @@
 
 import { useAnyspendOrderHistory } from "@b3dotfun/sdk/anyspend/react";
 import { Button, Skeleton, useAccountWallet } from "@b3dotfun/sdk/global-account/react";
-import { ArrowLeft, RefreshCcw } from "lucide-react";
+import ModalHeader from "@b3dotfun/sdk/global-account/react/components/ModalHeader/ModalHeader";
+import { RefreshCcw } from "lucide-react";
 import { OrderHistoryItem } from "./OrderHistoryItem";
 
 interface OrderHistoryProps {
   mode: "modal" | "page";
-  onBack: () => void;
+  onBack?: () => void;
   onSelectOrder?: (orderId: string) => void;
 }
 
@@ -17,13 +18,7 @@ export function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps)
 
   return (
     <>
-      <div className="mb-8 flex w-full items-center gap-3">
-        <Button onClick={onBack} variant="ghost" size="icon" className="hover:bg-as-surface-secondary">
-          <ArrowLeft className="h-5 w-5" />
-        </Button>
-        <div className="flex-1">
-          <h3 className="text-as-primary text-2xl font-bold">Order History</h3>
-        </div>
+      <ModalHeader title="Order History" showCloseButton={false} handleBack={onBack} className="w-full">
         <Button
           variant="ghost"
           size="icon"
@@ -34,20 +29,20 @@ export function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps)
         >
           <RefreshCcw className="text-as-secondary hover:text-as-primary h-5 w-5 cursor-pointer transition-all hover:rotate-180" />
         </Button>
-      </div>
+      </ModalHeader>
 
       {isLoadingOrderHistory ? (
-        <div className="w-full space-y-3">
+        <div className="w-full space-y-3 px-5">
           {[1, 2, 3].map(i => (
             <Skeleton key={i} className="h-[180px] w-full rounded-2xl" />
           ))}
         </div>
       ) : !orderHistory?.length ? (
-        <div className="bg-as-surface-secondary w-full rounded-2xl p-12 text-center">
+        <div className="bg-as-surface-secondary w-full rounded-2xl p-12 px-5 text-center">
           <p className="text-as-secondary text-sm">No order history found</p>
         </div>
       ) : (
-        <div className="mb-12 w-full space-y-3">
+        <div className="mb-12 w-full space-y-3 px-5 pt-5">
           {[...orderHistory]
             .sort((a, b) => b.createdAt - a.createdAt)
             .map(order => (

package/src/anyspend/react/components/common/PanelOnrampPayment.tsx

@@ -150,7 +150,7 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
   };
 
   return (
-    <div className="mx-auto flex w-full max-w-[460px] flex-col gap-6">
+    <div className="mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5">
       {/* Order Summary Section */}
       <>
         <h2 className="-mb-3 text-lg font-semibold">Order summary</h2>

package/src/anyspend/react/components/common/PointsDetailPanel.tsx

@@ -9,7 +9,7 @@ interface PointsDetailPanelProps {
 
 export function PointsDetailPanel({ pointsAmount = 0, onBack }: PointsDetailPanelProps) {
   return (
-    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-4">
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5">
       <div className="flex flex-col items-center gap-4 text-center">
         <h3 className="text-as-primary text-xl font-bold">Earn Points with Every Swap</h3>
         <p className="text-as-primary/70 text-balance text-sm leading-relaxed">

package/src/anyspend/react/components/common/RecipientSelection.tsx

@@ -88,7 +88,7 @@ export function RecipientSelection({
   const canConfirm = recipientAddress && isAddressValid;
 
   return (
-    <div className="recipient-selection mx-auto w-[460px] max-w-full">
+    <div className="recipient-selection mx-auto w-[460px] max-w-full px-5">
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className="flex justify-around">

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

@@ -1,16 +1,35 @@
-import { SimpleHashNFTResponse } from "@b3dotfun/sdk/global-account/types/simplehash.types";
+import { NFT, SimpleHashNFTResponse } from "@b3dotfun/sdk/global-account/types/simplehash.types";
+import { useState } from "react";
 
 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="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 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>
     );
@@ -20,29 +39,100 @@ 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="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 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>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 }