From 519898d2257d208e7aab1703882f6104da848806 Mon Sep 17 00:00:00 2001
From: zenparsing <zenparsing@gmail.com>
Date: Wed, 18 Dec 2024 12:22:37 -0500
Subject: [PATCH] [Rewards 3.0] Provide a fallback thumbnail for explore cards

---
 .../components/explore/card_item_view.tsx     | 13 ++++++++-
 .../components/explore/explore_view.style.ts  | 29 +++++++++++++++----
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/components/brave_rewards/resources/rewards_page/components/explore/card_item_view.tsx b/components/brave_rewards/resources/rewards_page/components/explore/card_item_view.tsx
index 41785dcae45b..ba62a4e6e7b5 100644
--- a/components/brave_rewards/resources/rewards_page/components/explore/card_item_view.tsx
+++ b/components/brave_rewards/resources/rewards_page/components/explore/card_item_view.tsx
@@ -16,6 +16,10 @@ function sanitizeURL(url: string) {
   }
 }
 
+function faviconURL(item: UICardItem) {
+  return `chrome://favicon2/?size=64&pageUrl=${encodeURIComponent(item.url)}`
+}
+
 function thumbnailURL(url: string) {
   url = sanitizeURL(url)
   try {
@@ -34,9 +38,16 @@ interface Props {
 
 export function CardItemView(props: Props) {
   const { item } = props
+  const thumbnail = thumbnailURL(item.thumbnail)
   return (
     <NewTabLink href={sanitizeURL(item.url)}>
-      <img src={thumbnailURL(item.thumbnail)} />
+      <span className='thumbnail'>
+        {
+          thumbnail
+            ? <img src={thumbnail} />
+            : <img className='favicon' src={faviconURL(item)} />
+        }
+      </span>
       <span className='item-info'>
         <span className='title'>{item.title}</span>
         <span className='description'>{item.description}</span>
diff --git a/components/brave_rewards/resources/rewards_page/components/explore/explore_view.style.ts b/components/brave_rewards/resources/rewards_page/components/explore/explore_view.style.ts
index 34a3be1eafab..e91f497b3ed4 100644
--- a/components/brave_rewards/resources/rewards_page/components/explore/explore_view.style.ts
+++ b/components/brave_rewards/resources/rewards_page/components/explore/explore_view.style.ts
@@ -38,6 +38,10 @@ export const style = scoped.css`
       display: flex;
       flex-direction: column;
       gap: 8px;
+
+      &:empty {
+        display: none;
+      }
     }
   }
 
@@ -70,13 +74,28 @@ export const style = scoped.css`
     &:last-child {
       border-bottom: none;
     }
+  }
+
+  .thumbnail {
+    flex: 0 0 56px;
+    height: 56px;
+    width: 56px;
+    overflow: hidden;
+    border-radius: 12px;
+    border: solid 1px ${color.divider.subtle};
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     img {
-      flex: 0 0 56px;
-      height: 56px;
-      width: 56px;
-      border-radius: 12px;
-      border: solid 1px ${color.divider.subtle};
+      width: 100%;
+      height: auto;
+    }
+
+    .favicon {
+      width: 24px;
+      height: auto;
+      border-radius: 4px;
     }
   }