From 9ba890487098c11d31ef0bf2427d160f0124381e Mon Sep 17 00:00:00 2001
From: orveth <orveth@proton.me>
Date: Fri, 5 Jun 2026 15:05:06 -0700
Subject: [PATCH] fix(gift-cards): show mint name when card has no image

Both OfferItem and the selected-state GiftCardItem now render the
mint name centered over a blank card when no image is available.
Previously OfferItem used text-card-foreground (invisible on the
blank card's foreground background) and the selected GiftCardItem
overlay's opacity:0 + transparent background left the card fully
blank.
---
 .../app/features/gift-cards/gift-card-item.tsx        | 11 +++++++++++
 .../web-wallet/app/features/gift-cards/offer-item.tsx |  2 +-
 .../app/features/gift-cards/offers-section.tsx        |  2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/web-wallet/app/features/gift-cards/gift-card-item.tsx b/apps/web-wallet/app/features/gift-cards/gift-card-item.tsx
index 050b8f6d9..6dfb73b94 100644
--- a/apps/web-wallet/app/features/gift-cards/gift-card-item.tsx
+++ b/apps/web-wallet/app/features/gift-cards/gift-card-item.tsx
@@ -31,6 +31,17 @@ export function GiftCardItem({
   const balance = getAccountBalance(account);
   const name = account.name;
 
+  if (!image && hideOverlayContent) {
+    return (
+      <WalletCard size={size} className={className}>
+        <WalletCardBlank />
+        <WalletCardOverlay className="flex items-center justify-center px-4">
+          <span className="truncate text-foreground text-lg">{name}</span>
+        </WalletCardOverlay>
+      </WalletCard>
+    );
+  }
+
   return (
     <WalletCard size={size} className={className}>
       {image ? (
diff --git a/apps/web-wallet/app/features/gift-cards/offer-item.tsx b/apps/web-wallet/app/features/gift-cards/offer-item.tsx
index 75fdfe5b2..fa15dcea6 100644
--- a/apps/web-wallet/app/features/gift-cards/offer-item.tsx
+++ b/apps/web-wallet/app/features/gift-cards/offer-item.tsx
@@ -20,7 +20,7 @@ export function OfferItem({ account, image }: OfferItemProps) {
         <>
           <WalletCardBlank />
           <WalletCardOverlay className="flex items-center justify-center px-4">
-            <span className="truncate text-card-foreground text-lg">
+            <span className="truncate text-foreground text-lg">
               {account.name}
             </span>
           </WalletCardOverlay>
diff --git a/apps/web-wallet/app/features/gift-cards/offers-section.tsx b/apps/web-wallet/app/features/gift-cards/offers-section.tsx
index 8ebfd64f0..44cde9919 100644
--- a/apps/web-wallet/app/features/gift-cards/offers-section.tsx
+++ b/apps/web-wallet/app/features/gift-cards/offers-section.tsx
@@ -50,7 +50,7 @@ function OfferCardButton({
           <>
             <WalletCardBlank />
             <WalletCardOverlay className="flex items-center justify-center px-4">
-              <span className="truncate text-card-foreground text-lg">
+              <span className="truncate text-foreground text-lg">
                 {account.name}
               </span>
             </WalletCardOverlay>