@b3dotfun/sdk 0.0.73-test.3 → 0.0.74-alpha.0

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 px-5 pt-5">
           {[...orderHistory]
             .sort((a, b) => b.createdAt - a.createdAt)
             .map(order => (

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

@@ -1,11 +1,11 @@
 import { ALL_CHAINS, getChainName, getStatusDisplay } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { Badge, useIsMobile } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { getVendorDisplayName } from "@b3dotfun/sdk/shared/utils/payment.utils";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Coins, Image } from "lucide-react";
 import TimeAgo from "react-timeago";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 interface OrderHistoryItemProps {
   order: components["schemas"]["Order"];
@@ -39,8 +39,8 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
     <div
       key={`anyspend-${order.id}`}
       className={cn(
-        "bg-as-surface-secondary hover:bg-as-surface-tertiary rounded-xl p-4 transition-all",
-        onSelectOrder && "cursor-pointer",
+        "font-inter border-as-border-secondary border-b py-5 font-medium transition-all last:border-b-0",
+        onSelectOrder && "hover:bg-as-surface-secondary/50 cursor-pointer",
       )}
       onClick={() => onSelectOrder?.(order.id)}
     >
@@ -49,7 +49,7 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
         <div className="flex items-center gap-2">
           <div
             className={cn(
-              "text-xs font-semibold",
+              "text-xs",
               orderDisplayStatus === "processing" && "text-yellow-600",
               orderDisplayStatus === "success" && "text-green-600",
               orderDisplayStatus === "failure" && "text-red-600",
@@ -72,11 +72,22 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
       <div className={cn("flex items-center", isSmallView ? "gap-2" : "gap-4")}>
         {/* From Section */}
         <div className={cn("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2")}>
-          <img
-            src={order.metadata.srcToken.metadata.logoURI}
-            alt={order.metadata.srcToken.symbol}
-            className={cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8")}
-          />
+          {order.metadata.srcToken.metadata.logoURI ? (
+            <img
+              src={order.metadata.srcToken.metadata.logoURI}
+              alt={order.metadata.srcToken.symbol}
+              className={cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8")}
+            />
+          ) : (
+            <div
+              className={cn(
+                "flex shrink-0 items-center justify-center rounded-full bg-gray-200",
+                isSmallView ? "h-7 w-7" : "h-8 w-8",
+              )}
+            >
+              <Coins className={cn("text-gray-400", isSmallView ? "h-3.5 w-3.5" : "h-4 w-4")} />
+            </div>
+          )}
           <div className="min-w-0 flex-1">
             <div className={cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm")}>
               {formatTokenAmount(BigInt(order.srcAmount), order.metadata.srcToken.decimals)}{" "}
@@ -96,11 +107,22 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
         <div className={cn("flex min-w-0 flex-1 items-center", isSmallView ? "gap-1.5" : "gap-2")}>
           {nft ? (
             <>
-              <img
-                src={nft.imageUrl}
-                alt={nft.name}
-                className={cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8")}
-              />
+              {nft.imageUrl ? (
+                <img
+                  src={nft.imageUrl}
+                  alt={nft.name}
+                  className={cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8")}
+                />
+              ) : (
+                <div
+                  className={cn(
+                    "flex shrink-0 items-center justify-center rounded-full bg-gray-200",
+                    isSmallView ? "h-7 w-7" : "h-8 w-8",
+                  )}
+                >
+                  <Image className={cn("text-gray-400", isSmallView ? "h-3.5 w-3.5" : "h-4 w-4")} />
+                </div>
+              )}
               <div className="min-w-0 flex-1">
                 <div className={cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm")}>
                   {nft.name}
@@ -119,11 +141,22 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
             </>
           ) : tournament ? (
             <>
-              <img
-                src={tournament.imageUrl}
-                alt={tournament.name}
-                className={cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8")}
-              />
+              {tournament.imageUrl ? (
+                <img
+                  src={tournament.imageUrl}
+                  alt={tournament.name}
+                  className={cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8")}
+                />
+              ) : (
+                <div
+                  className={cn(
+                    "flex shrink-0 items-center justify-center rounded-full bg-gray-200",
+                    isSmallView ? "h-7 w-7" : "h-8 w-8",
+                  )}
+                >
+                  <Image className={cn("text-gray-400", isSmallView ? "h-3.5 w-3.5" : "h-4 w-4")} />
+                </div>
+              )}
               <div className="min-w-0 flex-1">
                 <div className={cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm")}>
                   {tournament.name}
@@ -142,11 +175,22 @@ export function OrderHistoryItem({ order, onSelectOrder, mode }: OrderHistoryIte
             </>
           ) : (
             <>
-              <img
-                src={dstToken.metadata.logoURI}
-                alt={dstToken.symbol}
-                className={cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8")}
-              />
+              {dstToken.metadata.logoURI ? (
+                <img
+                  src={dstToken.metadata.logoURI}
+                  alt={dstToken.symbol}
+                  className={cn("shrink-0 rounded-full", isSmallView ? "h-7 w-7" : "h-8 w-8")}
+                />
+              ) : (
+                <div
+                  className={cn(
+                    "flex shrink-0 items-center justify-center rounded-full bg-gray-200",
+                    isSmallView ? "h-7 w-7" : "h-8 w-8",
+                  )}
+                >
+                  <Coins className={cn("text-gray-400", isSmallView ? "h-3.5 w-3.5" : "h-4 w-4")} />
+                </div>
+              )}
               <div className="min-w-0 flex-1">
                 <div className={cn("text-as-primary truncate font-bold", isSmallView ? "text-xs" : "text-sm")}>
                   {formatTokenAmount(

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

@@ -2,17 +2,19 @@ import { useCoinbaseOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import { ALL_CHAINS } from "@b3dotfun/sdk/anyspend/utils/chain";
-import { Input, useGetGeo, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { Input, toast, useGetGeo, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { cn, formatUsername } from "@b3dotfun/sdk/shared/utils";
 import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { ChevronRight, Info, Wallet } from "lucide-react";
 import { useRef } from "react";
-import { toast } from "sonner";
+
 import { useFeatureFlags } from "../../contexts/FeatureFlagsContext";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
 import { PointsBadge } from "./PointsBadge";
 
+const ONE_CHAR_WIDTH = 30;
+
 export function PanelOnramp({
   srcAmountOnRamp,
   setSrcAmountOnRamp,
@@ -176,9 +178,9 @@ export function PanelOnramp({
               value={srcAmountOnRamp}
               onChange={handleAmountChange}
               placeholder="5"
-              className="text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0"
+              className="text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0"
               style={{
-                width: `${Math.max(50, srcAmountOnRamp.length * 34)}px`,
+                width: `${Math.max(ONE_CHAR_WIDTH, srcAmountOnRamp.length * ONE_CHAR_WIDTH)}px`,
               }}
             />
           </div>

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

@@ -1,12 +1,12 @@
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
-import { Button } from "@b3dotfun/sdk/global-account/react";
+import { Button, toast } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import invariant from "invariant";
 import { ChevronLeft, ChevronRight, Landmark, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
-import { toast } from "sonner";
+
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
 
 interface PanelOnrampPaymentProps {
@@ -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 pt-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 p-5">
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className="flex justify-around">

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

@@ -2,14 +2,14 @@
 
 import { ALL_CHAINS, getChainName, getPaymentUrl, RELAY_ETH_ADDRESS } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
-import { CopyToClipboard, ShinyButton, TextLoop } from "@b3dotfun/sdk/global-account/react";
+import { CopyToClipboard, ShinyButton, TextLoop, toast } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils";
 import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletTrust } from "@web3icons/react";
 import { ChevronLeft, Copy } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 import { memo, useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
+
 import { b3 } from "viem/chains";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";

package/src/anyspend/react/components/webview/WebviewOnrampOrderStatus.tsx

@@ -1,10 +1,10 @@
 import { getChainName } from "@b3dotfun/sdk/anyspend";
-import { Badge, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { Badge, toast, useTokenData } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { CheckIcon, Copy, ExternalLink, Loader2 } from "lucide-react";
-import { toast } from "sonner";
-import { formatUnits } from "viem";
+
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { formatUnits } from "viem";
 
 interface WebviewOnrampOrderStatusProps {
   order: components["schemas"]["Order"];

package/src/anyspend/react/components/webview/WebviewOnrampPayment.tsx

@@ -2,13 +2,14 @@ import { getChainName, STRIPE_CONFIG } from "@b3dotfun/sdk/anyspend";
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
+import { toast } from "@b3dotfun/sdk/global-account/react";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
 import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
+
 import { formatUnits } from "viem";
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
 

package/src/anyspend/react/hooks/useAnyspendFlow.ts

@@ -8,6 +8,7 @@ import {
 } from "@b3dotfun/sdk/anyspend/react";
 import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
 import {
+  toast,
   useAccountWallet,
   useProfile,
   useRouter,
@@ -16,7 +17,7 @@ import {
 } from "@b3dotfun/sdk/global-account/react";
 import { formatTokenAmount, formatUnits } from "@b3dotfun/sdk/shared/utils/number";
 import { useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
+
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
 import { components } from "../../types/api";

package/src/anyspend/react/hooks/useConnectedWalletDisplay.ts

@@ -18,7 +18,7 @@ export function useConnectedWalletDisplay(
   selectedCryptoPaymentMethod?: CryptoPaymentMethodType,
 ): UseConnectedWalletDisplayResult {
   const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
-  const { address: wagmiAddress, isConnected: wagmiWalletIsConnected } = useAccount();
+  const { address: wagmiAddress } = useAccount();
 
   const globalWalletAddress = connectedSmartWallet?.getAccount()?.address;
 
@@ -35,7 +35,8 @@ export function useConnectedWalletDisplay(
 
   // Determine which wallet to show (prefer connectedEOAWallet if both exist and are the same)
   const shouldShowConnectedEOA = !!connectedEOAWallet;
-  const shouldShowWagmiWallet = wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
+  // this is disabled because we don't want to display In-App Wallet as a payment method
+  const shouldShowWagmiWallet = false; // wagmiWalletIsConnected && (!isWalletDuplicated || !connectedEOAWallet);
 
   // Determine which address to use based on payment method
   let walletAddress: string | undefined;

package/src/anyspend/react/hooks/usePhantomTransfer.ts

@@ -1,3 +1,4 @@
+import { toast } from "@b3dotfun/sdk/global-account/react";
 import {
   createAssociatedTokenAccountInstruction,
   createTransferCheckedInstruction,
@@ -5,7 +6,6 @@ import {
 } from "@solana/spl-token";
 import { ComputeBudgetProgram, Connection, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
 import { useCallback, useMemo } from "react";
-import { toast } from "sonner";
 
 interface UsePhantomTransferParams {
   /** RPC endpoint URL for Solana network */

package/src/anyspend/react/utils/toast.ts

@@ -0,0 +1,6 @@
+/**
+ * Re-export toast from global-account for consistency
+ * This allows anyspend components to continue using the same toast API
+ */
+export { toast } from "@b3dotfun/sdk/global-account/react/components/Toast/toastApi";
+export type { ToastItem, ToastType } from "@b3dotfun/sdk/global-account/react/components/Toast/ToastContext";

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

@@ -1,16 +1,55 @@
-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
+  // 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 [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 +59,80 @@ export function AccountAssets({ nfts, isLoading }: AccountAssetsProps) {
     return <div className="text-b3-react-muted-foreground py-8 text-center">No NFTs found</div>;
   }
 
+  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>
   );
 }

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useProfile } from "@b3dotfun/sdk/global-account/react";
+import { toast, useProfile } from "@b3dotfun/sdk/global-account/react";
 import { useRPMToken } from "@b3dotfun/sdk/global-account/react/hooks/useRPMToken";
 import { updateAvatar } from "@b3dotfun/sdk/global-account/react/utils/updateAvatar";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
@@ -11,7 +11,7 @@ import {
   AvatarExportedEvent,
 } from "@readyplayerme/react-avatar-creator";
 import { useState } from "react";
-import { toast } from "sonner";
+
 import { useActiveAccount } from "thirdweb/react";
 
 const debug = debugB3React("AvatarCreator");