diff --git a/src/components/NftCard.tsx b/src/components/NftCard.tsx index 44257646d..ea53e0821 100644 --- a/src/components/NftCard.tsx +++ b/src/components/NftCard.tsx @@ -26,6 +26,7 @@ import { MoreVertical, RefreshCcw, SendIcon, + Tag, UserRoundPlus, } from 'lucide-react'; import { useEffect, useState } from 'react'; @@ -100,6 +101,7 @@ export function NftCard({ nft, updateNfts, selectionState }: NftCardProps) { const { addError } = useErrors(); const [thumbnail, setThumbnail] = useState(null); + const [activeOfferCount, setActiveOfferCount] = useState(null); const [transferOpen, setTransferOpen] = useState(false); const [assignOpen, setAssignOpen] = useState(false); const [addUrlOpen, setAddUrlOpen] = useState(false); @@ -169,6 +171,26 @@ export function NftCard({ nft, updateNfts, selectionState }: NftCardProps) { }; }, [nft.launcher_id]); + useEffect(() => { + let cancelled = false; + commands + .getOffersForAsset({ asset_id: nft.launcher_id }) + .then((response) => { + if (!cancelled) { + const count = response.offers.filter( + (o) => o.status === 'active' || o.status === 'pending', + ).length; + setActiveOfferCount(count); + } + }) + .catch(() => { + // non-blocking — silently ignore errors + }); + return () => { + cancelled = true; + }; + }, [nft.launcher_id]); + const toggleVisibility = () => { commands .updateNft({ nft_id: nft.launcher_id, visible: !nft.visible }) @@ -343,6 +365,26 @@ export function NftCard({ nft, updateNfts, selectionState }: NftCardProps) { /> )} + {activeOfferCount !== null && activeOfferCount > 0 && ( + + + +
+
+
+ +

+ {activeOfferCount === 1 + ? t`1 active offer` + : t`${activeOfferCount} active offers`} +

+
+
+
+ )} + {nft.special_use_type === 'theme' && (
Theme