@b3dotfun/sdk 0.0.65-test.5 → 0.0.66

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

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

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

@@ -53,8 +53,6 @@ export function OrderTokenAmount({
 }) {
   // Track previous token to detect changes
   const prevTokenRef = useRef<string>(token.address);
-  // Track if initial balance has been set
-  const initialBalanceSetRef = useRef(false);
 
   // Only get token balance when context is "from" (for setting max amount)
   const { rawBalance } = useTokenBalance({
@@ -62,23 +60,15 @@ export function OrderTokenAmount({
     address: context === "from" && walletAddress ? walletAddress : undefined,
   });
 
-  // Reset balance ref when token address or chain changes
-  useEffect(() => {
-    initialBalanceSetRef.current = false;
-  }, [token.address, token.chainId]);
-
   useEffect(() => {
     // Only handle "from" context
     if (context !== "from") return;
 
     // Check if token changed or if this is the initial load with balance
     const isTokenChanged = prevTokenRef.current !== token.address;
-    const isInitialLoad = !initialBalanceSetRef.current && rawBalance;
 
-    if ((isTokenChanged || isInitialLoad) && rawBalance) {
-      console.log(
-        `Setting max balance - Token: ${token.address}, Changed: ${isTokenChanged}, Initial: ${isInitialLoad}`,
-      );
+    if (isTokenChanged && rawBalance) {
+      console.log(`Setting max balance - Token: ${token.address}, Changed: ${isTokenChanged}`);
 
       // Calculate max amount with gas reserve for native tokens
       let maxAmount: bigint;
@@ -97,7 +87,6 @@ export function OrderTokenAmount({
 
       // Update refs
       prevTokenRef.current = token.address;
-      initialBalanceSetRef.current = true;
     }
   }, [token.address, token.chainId, token.decimals, chainId, context, onChangeInput, rawBalance]);
 

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 px-5 pt-5">
+    <div className="mx-auto flex w-full max-w-[460px] flex-col gap-6">
       {/* 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 px-5">
+    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-4">
       <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 px-5">
+    <div className="recipient-selection mx-auto w-[460px] max-w-full">
       <div className="flex flex-col gap-6">
         {/* Header */}
         <div className="flex justify-around">

package/src/anyspend/react/components/index.ts

@@ -4,6 +4,7 @@ export { AnySpendBondKit } from "./AnySpendBondKit";
 export { AnySpendBuySpin } from "./AnySpendBuySpin";
 export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
+export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";
 export { AnyspendSignatureMint } from "./AnyspendSignatureMint";

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

@@ -19,12 +19,13 @@ import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { parseUnits } from "viem";
 import { base, mainnet } from "viem/chains";
-import { useAccount } from "wagmi";
 import { components } from "../../types/api";
 import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
 import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod";
 import { useAutoSelectCryptoPaymentMethod } from "./useAutoSelectCryptoPaymentMethod";
 import { useAutoSetActiveWalletFromWagmi } from "./useAutoSetActiveWalletFromWagmi";
+import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
+import { useCryptoPaymentMethodState } from "./useCryptoPaymentMethodState";
 
 export enum PanelView {
   MAIN,
@@ -85,22 +86,28 @@ export function useAnyspendFlow({
   const defaultDstToken = B3_TOKEN; // Default destination token
   const [selectedSrcToken, setSelectedSrcToken] = useState<components["schemas"]["Token"]>(defaultSrcToken);
   const [selectedDstToken, setSelectedDstToken] = useState<components["schemas"]["Token"]>(defaultDstToken);
-  const [srcAmount, setSrcAmount] = useState<string>(paymentType === "fiat" ? "5" : "0.1");
+  const [srcAmount, setSrcAmount] = useState<string>(paymentType === "fiat" ? "5" : "0");
   const [dstAmount, setDstAmount] = useState<string>("");
   const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
 
   // Derive destination chain ID from token or prop (cannot change)
   const selectedDstChainId = destinationTokenChainId || selectedDstToken.chainId;
 
-  // Payment method state
-  const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(
-    CryptoPaymentMethodType.NONE,
-  );
+  // Payment method state with dual-state system (auto + explicit user selection)
+  const {
+    cryptoPaymentMethod,
+    setCryptoPaymentMethod,
+    selectedCryptoPaymentMethod,
+    setSelectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
+    resetPaymentMethods,
+  } = useCryptoPaymentMethodState();
+
   const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState<FiatPaymentMethod>(FiatPaymentMethod.NONE);
 
   // Recipient state
   const { address: globalAddress } = useAccountWallet();
-  const { address: wagmiAddress } = useAccount();
+  const { walletAddress } = useConnectedWalletDisplay(effectiveCryptoPaymentMethod);
   const [selectedRecipientAddress, setSelectedRecipientAddress] = useState<string | undefined>(recipientAddress);
   const recipientProfile = useProfile({ address: selectedRecipientAddress, fresh: true });
   const recipientName = recipientProfile.data?.name;
@@ -118,7 +125,7 @@ export function useAnyspendFlow({
   // Check token balance for crypto payments
   const { rawBalance, isLoading: isBalanceLoading } = useTokenBalance({
     token: selectedSrcToken,
-    address: wagmiAddress,
+    address: walletAddress,
   });
 
   // Check if user has enough balance
@@ -135,8 +142,9 @@ export function useAnyspendFlow({
   // Auto-select crypto payment method based on available wallets and balance
   useAutoSelectCryptoPaymentMethod({
     paymentType,
+    cryptoPaymentMethod,
+    setCryptoPaymentMethod,
     selectedCryptoPaymentMethod,
-    setSelectedCryptoPaymentMethod,
     hasEnoughBalance,
     isBalanceLoading,
   });
@@ -248,9 +256,9 @@ export function useAnyspendFlow({
       if (!disableUrlParamManagement) {
         const params = new URLSearchParams(searchParams.toString()); // Preserve existing params
         params.set("orderId", newOrderId);
-        if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
-          console.log("Setting cryptoPaymentMethod in URL:", selectedCryptoPaymentMethod);
-          params.set("cryptoPaymentMethod", selectedCryptoPaymentMethod);
+        if (effectiveCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+          console.log("Setting cryptoPaymentMethod in URL:", effectiveCryptoPaymentMethod);
+          params.set("cryptoPaymentMethod", effectiveCryptoPaymentMethod);
         } else {
           console.log("Payment method is NONE, not setting in URL");
         }
@@ -316,8 +324,12 @@ export function useAnyspendFlow({
     isSrcInputDirty,
     setIsSrcInputDirty,
     // Payment methods
+    cryptoPaymentMethod,
+    setCryptoPaymentMethod,
     selectedCryptoPaymentMethod,
     setSelectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
+    resetPaymentMethods,
     selectedFiatPaymentMethod,
     setSelectedFiatPaymentMethod,
     // Recipient

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

@@ -5,10 +5,12 @@ import { useConnectedWalletDisplay } from "./useConnectedWalletDisplay";
 interface UseAutoSelectCryptoPaymentMethodParams {
   /** Current payment type (crypto or fiat) */
   paymentType?: "crypto" | "fiat";
-  /** Currently selected payment method */
+  /** Auto-selected payment method based on balance (not used in hook logic, but part of state management) */
+  cryptoPaymentMethod: CryptoPaymentMethodType;
+  /** Function to update the auto-selected payment method */
+  setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+  /** User explicitly selected payment method (NONE means no explicit selection) */
   selectedCryptoPaymentMethod: CryptoPaymentMethodType;
-  /** Function to update the selected payment method */
-  setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
   /** Whether user has enough balance to pay */
   hasEnoughBalance: boolean;
   /** Whether balance is still loading */
@@ -20,7 +22,7 @@ interface UseAutoSelectCryptoPaymentMethodParams {
  * based on available wallets and balance.
  *
  * Auto-selection logic:
- * - Only auto-selects when payment method is NONE (doesn't override user choices)
+ * - Only auto-selects when selectedCryptoPaymentMethod is NONE (user hasn't explicitly chosen)
  * - If EOA/Wagmi wallet connected + has balance → CONNECT_WALLET
  * - If EOA/Wagmi wallet connected + insufficient balance → TRANSFER_CRYPTO
  * - If only Global wallet available → GLOBAL_WALLET
@@ -28,8 +30,9 @@ interface UseAutoSelectCryptoPaymentMethodParams {
  */
 export function useAutoSelectCryptoPaymentMethod({
   paymentType = "crypto",
+  cryptoPaymentMethod: _cryptoPaymentMethod,
+  setCryptoPaymentMethod,
   selectedCryptoPaymentMethod,
-  setSelectedCryptoPaymentMethod,
   hasEnoughBalance,
   isBalanceLoading,
 }: UseAutoSelectCryptoPaymentMethodParams) {
@@ -37,8 +40,13 @@ export function useAutoSelectCryptoPaymentMethod({
   const { suggestedPaymentMethod } = useConnectedWalletDisplay(selectedCryptoPaymentMethod);
 
   useEffect(() => {
-    // Only auto-select when on crypto payment type and payment method is NONE
-    if (paymentType !== "crypto" || selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
+    // Only auto-select when on crypto payment type
+    if (paymentType !== "crypto") {
+      return;
+    }
+
+    // Only auto-switch if user hasn't explicitly selected a payment method
+    if (selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE) {
       return;
     }
 
@@ -48,25 +56,25 @@ export function useAutoSelectCryptoPaymentMethod({
       // Otherwise, default to TRANSFER_CRYPTO if balance is insufficient
       if (!isBalanceLoading) {
         if (hasEnoughBalance && suggestedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
-          setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
+          setCryptoPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
         } else if (!hasEnoughBalance && suggestedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
           // Wallet connected but insufficient balance - suggest transfer
-          setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
+          setCryptoPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
         } else {
           // Use suggested method (e.g., GLOBAL_WALLET)
-          setSelectedCryptoPaymentMethod(suggestedPaymentMethod);
+          setCryptoPaymentMethod(suggestedPaymentMethod);
         }
       } else {
         // Balance still loading, use suggested method
-        setSelectedCryptoPaymentMethod(suggestedPaymentMethod);
+        setCryptoPaymentMethod(suggestedPaymentMethod);
       }
     }
   }, [
     paymentType,
+    setCryptoPaymentMethod,
     selectedCryptoPaymentMethod,
     suggestedPaymentMethod,
     hasEnoughBalance,
     isBalanceLoading,
-    setSelectedCryptoPaymentMethod,
   ]);
 }

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

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+
+interface UseCryptoPaymentMethodStateResult {
+  /** Auto-selected payment method based on balance */
+  cryptoPaymentMethod: CryptoPaymentMethodType;
+  /** Function to update the auto-selected payment method */
+  setCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+  /** User explicitly selected payment method (NONE means no explicit selection) */
+  selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+  /** Function to update the user-selected payment method */
+  setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+  /** Effective payment method (user selection takes priority over auto-selection) */
+  effectiveCryptoPaymentMethod: CryptoPaymentMethodType;
+  /** Reset both payment method states to NONE */
+  resetPaymentMethods: () => void;
+}
+
+/**
+ * Custom hook to manage crypto payment method state with dual-state system:
+ *
+ * - `cryptoPaymentMethod`: Auto-selected based on wallet availability and balance
+ * - `selectedCryptoPaymentMethod`: Explicitly selected by user
+ * - `effectiveCryptoPaymentMethod`: User selection takes priority over auto-selection
+ *
+ * This allows automatic payment method suggestions while respecting explicit user choices.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   cryptoPaymentMethod,
+ *   setCryptoPaymentMethod,
+ *   selectedCryptoPaymentMethod,
+ *   setSelectedCryptoPaymentMethod,
+ *   effectiveCryptoPaymentMethod,
+ *   resetPaymentMethods
+ * } = useCryptoPaymentMethodState();
+ *
+ * // Use effectiveCryptoPaymentMethod for display
+ * // Use setSelectedCryptoPaymentMethod when user explicitly selects
+ * // Call resetPaymentMethods when switching tabs or going back
+ * ```
+ */
+export function useCryptoPaymentMethodState(): UseCryptoPaymentMethodStateResult {
+  // cryptoPaymentMethod: auto-selected based on balance
+  const [cryptoPaymentMethod, setCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(CryptoPaymentMethodType.NONE);
+
+  // selectedCryptoPaymentMethod: explicitly selected by user (NONE means no explicit selection)
+  const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(
+    CryptoPaymentMethodType.NONE,
+  );
+
+  // The effective payment method (user selection takes priority over auto-selection)
+  const effectiveCryptoPaymentMethod =
+    selectedCryptoPaymentMethod !== CryptoPaymentMethodType.NONE ? selectedCryptoPaymentMethod : cryptoPaymentMethod;
+
+  // Helper function to reset both states
+  const resetPaymentMethods = () => {
+    setCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+    setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+  };
+
+  return {
+    cryptoPaymentMethod,
+    setCryptoPaymentMethod,
+    selectedCryptoPaymentMethod,
+    setSelectedCryptoPaymentMethod,
+    effectiveCryptoPaymentMethod,
+    resetPaymentMethods,
+  };
+}

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>
   );
 }