feat(ad): add local storage for fetching billboard content

src/common/enums/storage.ts

@@ -2,6 +2,8 @@ export const STORAGE_KEY_PUSH = '__PUSH'
 
 export const STORAGE_KEY_AGENT_HASH = '__AGENT_HASH'
 
+export const STORAGE_KEY_BILLBOARD = '__BILLBOARD'
+
 export const STORAGE_KEY_CIRCLE_BANNER = '__CIRCLE_BANNER'
 
 export const STORAGE_KEY_SEARCH_HISTORY = '__SEARCH_HISTORY'

src/components/Billboard/index.tsx

@@ -54,7 +54,7 @@ export const Billboard = ({ tokenId, type }: BillboardProps) => {
                 })
               }
             >
-              <img src={data.contentURI} alt="ad" />
+              <img src={data.contentURI} alt="ad" loading="lazy" />
             </a>
 
             <button

src/components/Hook/useBillboard.ts

@@ -1,10 +1,15 @@
 import { readContract } from '@wagmi/core'
 import { useEffect, useState } from 'react'
 
-import { BillboardOperatorABI, BillboardRegistryABI } from '~/common/utils'
+import { STORAGE_KEY_BILLBOARD } from '~/common/enums'
+import {
+  BillboardOperatorABI,
+  BillboardRegistryABI,
+  storage,
+} from '~/common/utils'
 
 // custom hook level enums
-enum BillboardQueryStatus {
+enum QueryStatus {
   IDLE = 'idle',
   LOADING = 'loading',
   LOADED = 'loaded',
@@ -24,22 +29,35 @@ export const useBillboard = ({
   operatorAddress,
   registryAddress,
 }: Props) => {
-  const [status, setStatus] = useState<BillboardQueryStatus>(
-    BillboardQueryStatus.IDLE
-  )
-  const [data, setData] = useState<Record<string, any>>({})
+  const [status, setStatus] = useState<QueryStatus>(QueryStatus.IDLE)
 
-  const isLoading = status === BillboardQueryStatus.LOADING
-  const isError = status === BillboardQueryStatus.ERROR
+  const data = storage.get(STORAGE_KEY_BILLBOARD) as Record<string, any>
+  const ttl = 3 * 60 * 1000
 
+  const isLoading = status === QueryStatus.LOADING
+  const isError = status === QueryStatus.ERROR
+
+  const resetData = () => {
+    storage.set(STORAGE_KEY_BILLBOARD, {
+      contentURI: '',
+      redirectURI: '',
+      expired: Date.now() + ttl,
+    })
+  }
+
+  // fetch board cotent if data is expired
   useEffect(() => {
     if (isLoading) {
       return
     }
 
+    if (data?.expired >= Date.now()) {
+      return
+    }
+
     ;(async () => {
       try {
-        setStatus(BillboardQueryStatus.LOADING)
+        setStatus(QueryStatus.LOADING)
 
         const tokenId = BigInt(id)
         const currEpoch = await readContract({
@@ -71,15 +89,20 @@ export const useBillboard = ({
         })
 
         if (bid && bid.isWon) {
-          setData({
-            ...(bid.contentURI ? { contentURI: bid.contentURI } : {}),
-            ...(bid.redirectURI ? { redirectURI: bid.redirectURI } : {}),
+          storage.set(STORAGE_KEY_BILLBOARD, {
+            contentURI: bid.contentURI,
+            redirectURI: bid.redirectURI,
+            expired: Date.now() + ttl,
           })
+        } else {
+          // if no running ad or it hasn't been cleared yet
+          resetData()
         }
 
-        setStatus(BillboardQueryStatus.LOADED)
+        setStatus(QueryStatus.LOADED)
       } catch (error) {
-        setStatus(BillboardQueryStatus.ERROR)
+        resetData()
+        setStatus(QueryStatus.ERROR)
       }
     })()
   }, [])