Merge pull request #26968 from brave/ksmith-rewards-3-cards-loading

[Rewards 3.0] Validate explore card links and thumbnails
brave · Dec 11, 2024 · 7e1ef51 · 7e1ef51
2 parents 117bda1 + 8aaf712
commit 7e1ef51
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 29 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
@@ -0,0 +1,46 @@
+/* Copyright (c) 2024 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+import { UICardItem } from '../../lib/app_state'
+import { NewTabLink } from '../../../shared/components/new_tab_link'
+
+function sanitizeURL(url: string) {
+  try {
+    return new URL(url).protocol === 'https:' ? url : ''
+  } catch {
+    return ''
+  }
+}
+
+function thumbnailURL(url: string) {
+  url = sanitizeURL(url)
+  try {
+    if (/(^|\.)brave\.com$/i.test(new URL(url).hostname)) {
+      return `chrome://rewards-image/${url}`
+    }
+    return ''
+  } catch {
+    return ''
+  }
+}
+
+interface Props {
+  item: UICardItem
+}
+
+export function CardItemView(props: Props) {
+  const { item } = props
+  return (
+    <NewTabLink href={sanitizeURL(item.url)}>
+      <img src={thumbnailURL(item.thumbnail)} />
+      <span className='item-info'>
+        <span className='title'>{item.title}</span>
+        <span className='description'>{item.description}</span>
+      </span>
+    </NewTabLink>
+  )
+}
diff --git a/components/brave_rewards/resources/rewards_page/components/explore/community_card.tsx b/components/brave_rewards/resources/rewards_page/components/explore/community_card.tsx
@@ -6,7 +6,7 @@
 import * as React from 'react'
 import { useLocaleContext } from '../../lib/locale_strings'
 import { useAppState } from '../../lib/app_model_context'
-import { UICardItem } from '../../lib/app_state'
+import { CardItemView } from './card_item_view'
 import { NewTabLink } from '../../../shared/components/new_tab_link'
 
 import * as urls from '../../../shared/lib/rewards_urls'
@@ -24,28 +24,16 @@ export function CommunityCard() {
     return null
   }
 
-  function renderItem(item: UICardItem) {
-    return (
-      <NewTabLink key={item.url} href={item.url}>
-        <img src={item.thumbnail} />
-        <span className='item-info'>
-          <span className='title'>{item.title}</span>
-          <span className='description'>{item.description}</span>
-        </span>
-      </NewTabLink>
-    )
-  }
-
   return (
     <div className='content-card'>
       <h4>
         {getString('communityTitle')}
         <NewTabLink href={urls.contactSupportURL}>
-        {getString('viewAllLink')}
+          {getString('viewAllLink')}
         </NewTabLink>
       </h4>
       <section>
-        {card.items.map(renderItem)}
+        {card.items.map((item, i) => <CardItemView key={i} item={item} />)}
       </section>
     </div>
   )

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
@@ -13,6 +13,22 @@ export const style = scoped.css`
     gap: 8px;
   }
 
+  .loading {
+    --leo-progressring-size: 32px;
+
+    padding-top: 33%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+
+    transition: opacity 500ms 1.5s ease-in-out;
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+
   .columns {
     display: flex;
     gap: 24px;

diff --git a/components/brave_rewards/resources/rewards_page/components/explore/explore_view.tsx b/components/brave_rewards/resources/rewards_page/components/explore/explore_view.tsx
@@ -4,7 +4,9 @@
  * You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
+import ProgressRing from '@brave/leo/react/progressRing'
 
+import { useAppState } from '../../lib/app_model_context'
 import { useBreakpoint } from '../../lib/breakpoint'
 import { CommunityCard } from './community_card'
 import { MerchStoreCard } from './merch_store_card'
@@ -13,6 +15,17 @@ import { style } from './explore_view.style'
 
 export function ExploreView() {
   const viewType = useBreakpoint()
+  const [cards] = useAppState((state) => [state.cards])
+
+  if (!cards) {
+    return (
+      <div {...style}>
+        <div className='loading'>
+          <ProgressRing />
+        </div>
+      </div>
+    )
+  }
 
   if (viewType === 'double') {
     return (

diff --git a/components/brave_rewards/resources/rewards_page/components/explore/merch_store_card.tsx b/components/brave_rewards/resources/rewards_page/components/explore/merch_store_card.tsx
@@ -8,8 +8,8 @@ import Icon from '@brave/leo/react/icon'
 
 import { useLocaleContext } from '../../lib/locale_strings'
 import { useAppState } from '../../lib/app_model_context'
-import { UICardItem } from '../../lib/app_state'
 import { NewTabLink } from '../../../shared/components/new_tab_link'
+import { CardItemView } from './card_item_view'
 
 import * as urls from '../../../shared/lib/rewards_urls'
 
@@ -26,18 +26,6 @@ export function MerchStoreCard() {
     return null
   }
 
-  function renderItem(item: UICardItem) {
-    return (
-      <NewTabLink key={item.url} href={item.url}>
-        <img src={`chrome://rewards-image/${item.thumbnail}`} />
-        <span className='item-info'>
-          <span className='title'>{item.title}</span>
-          <span className='description'>{item.description}</span>
-        </span>
-      </NewTabLink>
-    )
-  }
-
   return (
     <div className='content-card'>
       <h4>
@@ -48,7 +36,7 @@ export function MerchStoreCard() {
         </NewTabLink>
       </h4>
       <section>
-        {card.items.map(renderItem)}
+        {card.items.map((item, i) => <CardItemView key={i} item={item} />)}
       </section>
     </div>
   )