Merge pull request #4811 from thematters/feat/ad

.env.dev

@@ -30,8 +30,9 @@ NEXT_PUBLIC_TWITTER_CLIENT_ID=X3d6Szg5bnVCMm5wRWxSVmhXUTc6MTpjaQ
 NEXT_PUBLIC_FACEBOOK_CLIENT_ID=1072677713882819
 NEXT_PUBLIC_CF_TURNSTILE_SITE_KEY=0x4AAAAAAAKiedvR5qiLUhIs
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK=/@rsdyobw/22048-launching-the-nomad-matters-initiative
-NEXT_PUBLIC_BILLBOARD_ADDRESS=0x6a72820E1CCCba1B1FE02E37881cEa3F9Aa6375C
-NEXT_PUBLIC_BILLBOARD_TOKEN_ID=6
+NEXT_PUBLIC_BILLBOARD_OPERATOR_ADDRESS=0xBcEAD54De463C083F348b530305e2471652D59A3
+NEXT_PUBLIC_BILLBOARD_REGISTRY_ADDRESS=0xEb23327533aa993069D61b8E1d6001B1cce0E216
+NEXT_PUBLIC_BILLBOARD_TOKEN_ID=1
 NEXT_PUBLIC_BILLBOARD_IMAGE_URL=matters-billboard-ad-dev.s3.ap-southeast-1.amazonaws.com/
 PLAYWRIGHT_RUNTIME_ENV=ci
 PLAYWRIGHT_TEST_BASE_URL=https://web-develop.matters.town

.env.prod

@@ -31,6 +31,7 @@ NEXT_PUBLIC_TWITTER_CLIENT_ID=cmdKbUlyd1ZZZDZYa3dTampidGo6MTpjaQ
 NEXT_PUBLIC_FACEBOOK_CLIENT_ID=161556310354354
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK_EN=/@hi176/476405-a-guide-to-invite
 NEXT_PUBLIC_NOMAD_MATTERS_CAMPAIGN_LINK=/@hi176/476404
-NEXT_PUBLIC_BILLBOARD_ADDRESS=0x88EA16c2a69f50B9bc2E8f7684D425f33f29225F
+NEXT_PUBLIC_BILLBOARD_OPERATOR_ADDRESS=0x92a117aeA74963Cd0CEdF9C50f99435451a291F7
+NEXT_PUBLIC_BILLBOARD_REGISTRY_ADDRESS=0x95bEFe8E08a56dCEBBa8d40BE3e9c3cb2fF81806
 NEXT_PUBLIC_BILLBOARD_TOKEN_ID=1
 NEXT_PUBLIC_BILLBOARD_IMAGE_URL=matters-billboard-ad.s3.ap-southeast-1.amazonaws.com/

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/common/utils/abis/billboard.ts

@@ -1,53 +1,119 @@
-export const BillboardABI = [
+export const BillboardOperatorABI = [
   {
+    type: 'function',
+    name: 'getLatestEpoch',
     inputs: [
       {
+        name: 'tokenId_',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    outputs: [
+      {
+        name: 'epoch',
+        type: 'uint256',
         internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'getBid',
+    inputs: [
+      {
         name: 'tokenId_',
         type: 'uint256',
+        internalType: 'uint256',
+      },
+      {
+        name: 'epoch_',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+      {
+        name: 'bidder_',
+        type: 'address',
+        internalType: 'address',
       },
     ],
-    name: 'getBoard',
     outputs: [
       {
+        name: 'bid',
+        type: 'tuple',
+        internalType: 'struct IBillboardRegistry.Bid',
         components: [
           {
-            internalType: 'address',
-            name: 'creator',
-            type: 'address',
+            name: 'price',
+            type: 'uint256',
+            internalType: 'uint256',
           },
           {
-            internalType: 'string',
-            name: 'name',
-            type: 'string',
+            name: 'tax',
+            type: 'uint256',
+            internalType: 'uint256',
           },
           {
-            internalType: 'string',
-            name: 'description',
+            name: 'contentURI',
             type: 'string',
+            internalType: 'string',
           },
           {
-            internalType: 'string',
-            name: 'location',
+            name: 'redirectURI',
             type: 'string',
+            internalType: 'string',
           },
           {
-            internalType: 'string',
-            name: 'contentURI',
-            type: 'string',
+            name: 'placedAt',
+            type: 'uint256',
+            internalType: 'uint256',
           },
           {
-            internalType: 'string',
-            name: 'redirectURI',
-            type: 'string',
+            name: 'updatedAt',
+            type: 'uint256',
+            internalType: 'uint256',
+          },
+          {
+            name: 'isWon',
+            type: 'bool',
+            internalType: 'bool',
+          },
+          {
+            name: 'isWithdrawn',
+            type: 'bool',
+            internalType: 'bool',
           },
         ],
-        internalType: 'struct IBillboardRegistry.Board',
-        name: 'board',
-        type: 'tuple',
       },
     ],
     stateMutability: 'view',
+  },
+] as const
+
+export const BillboardRegistryABI = [
+  {
     type: 'function',
+    name: 'highestBidder',
+    inputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    outputs: [
+      {
+        name: '',
+        type: 'address',
+        internalType: 'address',
+      },
+    ],
+    stateMutability: 'view',
   },
 ] as const

src/components/Billboard/index.tsx

@@ -1,13 +1,13 @@
 import { FormattedMessage, useIntl } from 'react-intl'
-import { useContractRead } from 'wagmi'
 
 import { ReactComponent as IconInfo } from '@/public/static/icons/24px/information.svg'
-import { analytics, BillboardABI, featureSupportedChains } from '~/common/utils'
+import { analytics, featureSupportedChains } from '~/common/utils'
 import {
   BillboardDialog,
   BillboardExposureTracker,
   Icon,
   TextIcon,
+  useBillboard,
 } from '~/components'
 
 import styles from './styles.module.css'
@@ -20,17 +20,18 @@ type BillboardProps = {
 export const Billboard = ({ tokenId, type }: BillboardProps) => {
   // collect vars
   const id = !isNaN(Number(tokenId)) ? Number(tokenId) : 0
-  const address = process.env.NEXT_PUBLIC_BILLBOARD_ADDRESS as `0x${string}`
+  const operatorAddress = process.env
+    .NEXT_PUBLIC_BILLBOARD_OPERATOR_ADDRESS as `0x${string}`
+  const registryAddress = process.env
+    .NEXT_PUBLIC_BILLBOARD_REGISTRY_ADDRESS as `0x${string}`
   const network = featureSupportedChains.billboard[0]
 
   const intl = useIntl()
-  const { data, isError, isLoading } = useContractRead({
-    address,
-    abi: BillboardABI,
-    functionName: 'getBoard',
+  const { data, isError, isLoading } = useBillboard({
+    id,
     chainId: network.id,
-    args: [BigInt(id)],
-    cacheTime: 60_000,
+    operatorAddress,
+    registryAddress,
   })
 
   if (!id || isError || isLoading || !data || !data.contentURI) {
@@ -53,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/index.ts

@@ -1,3 +1,4 @@
+export * from './useBillboard'
 export * from './useCarousel'
 export * from './useColorThief'
 export * from './useCountdown'

src/components/Hook/useBillboard.ts

@@ -0,0 +1,111 @@
+import { readContract } from '@wagmi/core'
+import { useEffect, useState } from 'react'
+
+import { STORAGE_KEY_BILLBOARD } from '~/common/enums'
+import {
+  BillboardOperatorABI,
+  BillboardRegistryABI,
+  storage,
+} from '~/common/utils'
+
+// custom hook level enums
+enum QueryStatus {
+  IDLE = 'idle',
+  LOADING = 'loading',
+  LOADED = 'loaded',
+  ERROR = 'error',
+}
+
+type Props = {
+  id: number
+  chainId: number
+  operatorAddress: `0x${string}`
+  registryAddress: `0x${string}`
+}
+
+export const useBillboard = ({
+  id,
+  chainId,
+  operatorAddress,
+  registryAddress,
+}: Props) => {
+  const [status, setStatus] = useState<QueryStatus>(QueryStatus.IDLE)
+
+  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(QueryStatus.LOADING)
+
+        const tokenId = BigInt(id)
+        const currEpoch = await readContract({
+          abi: BillboardOperatorABI,
+          address: operatorAddress,
+          chainId,
+          functionName: 'getLatestEpoch',
+          args: [tokenId],
+        })
+
+        if (currEpoch < 2n) {
+          return
+        }
+
+        const epoch = currEpoch - 2n
+        const bidder = await readContract({
+          abi: BillboardRegistryABI,
+          address: registryAddress,
+          chainId,
+          functionName: 'highestBidder',
+          args: [tokenId, epoch],
+        })
+        const bid = await readContract({
+          abi: BillboardOperatorABI,
+          address: operatorAddress,
+          chainId,
+          functionName: 'getBid',
+          args: [tokenId, epoch, bidder],
+        })
+
+        if (bid && bid.isWon) {
+          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(QueryStatus.LOADED)
+      } catch (error) {
+        resetData()
+        setStatus(QueryStatus.ERROR)
+      }
+    })()
+  }, [])
+
+  return { data, isLoading, isError }
+}