Merge pull request #99 from thematters/develop

update main for copies

app/component/Layout/Header/index.tsx

@@ -74,10 +74,10 @@ const Header = ({
                 <SvgLink css="ml-1" />
               </NavLink>
               <NavLink className={navBtnCss} to="/showcase">
-                SHOWCASE
+                BID
               </NavLink>
               <NavLink className={navBtnCss} to="/claim">
-                CLAIM
+                CREATOR REWARDS
               </NavLink>
             </section>
           </section>

app/component/Menu/Main/index.tsx

@@ -39,12 +39,12 @@ const MainMenu = ({ css, isActive }: Props) => {
             </li>
             <li className={liCss}>
               <NavLink className={itemCss} to="/showcase">
-                SHOWCASE
+                BID
               </NavLink>
             </li>
             <li className={liCss}>
               <NavLink className={itemCss} to="/claim">
-                CLAIM
+                CREATOR REWARDS
               </NavLink>
             </li>
             <li className={liCss}>

app/routes/_index/Funds/index.tsx

@@ -19,7 +19,11 @@ const Funds = () => {
     <Crate>
       <Crate.Inner css={innerCss} hasDots hasXBorder hasTopBorder>
         <section className="max-limit">
-          <h1 className="section-title">FUNDING DISTRIBUTION HISTORY</h1>
+          <h1 className="section-title">
+            CREATOR REWARDS
+            <br />
+            DISTRIBUTION HISTORY
+          </h1>
           {(isLoading || isError) && (
             <>
               <SvgLoaderFundsSM css="skeleton-sm" />

app/routes/_index/Hero/Mission/Buttons/index.tsx

@@ -0,0 +1,30 @@
+import LinkButton from '@component/Button/Link'
+
+const MissionButtons = () => {
+  const baseCss = 'mt-10 sm:mb-14 sm:f-center-start'
+  const bidBtnCss = 'block w-full mr-0 sm:mr-6 sm:w-auto'
+  const rewardBtnCss = 'block w-full mt-4 sm:mt-0 sm:w-auto'
+
+  return (
+    <div className={baseCss}>
+      <LinkButton
+        linkCss="w-full sm:w-fit"
+        css={bidBtnCss}
+        color="grass"
+        to="/showcase"
+      >
+        BID ADS
+      </LinkButton>
+      <LinkButton
+        linkCss="w-full sm:w-fit"
+        css={rewardBtnCss}
+        color="dim"
+        to="/claim"
+      >
+        GET CREATOR REWARDS
+      </LinkButton>
+    </div>
+  )
+}
+
+export default MissionButtons

app/routes/_index/Hero/Mission/index.tsx

@@ -5,11 +5,12 @@ import LinkButton from '@component/Button/Link'
 import png from '@asset/bot.png'
 import webp from '@asset/bot.webp'
 
+import MissionButtons from './Buttons'
+
 const Mission = () => {
   const baseCss = 'mt-10 lg:mt-32 max-limit cols-1 lg:cols-5 lg:gap-10'
   const leftCss = 'col-span-1 lg:col-span-2 lg:mb-32'
   const descCss = 't-14 lg:t-20 font-normal'
-  const btnsCss = 'mt-10 mb-14 f-center-start'
   const rightCss =
     'relative col-span-1 lg:col-span-3 mt-8 lg:mt-0 mb-8 lg:mb-0 f-center'
   const imgContainerCss = 'lg:absolute lg:-top-[160px] lg:z-1'
@@ -23,14 +24,7 @@ const Mission = () => {
           and establishes a transparent, efficient, and accountable attention
           economy ecosystem.
         </div>
-        <div className={btnsCss}>
-          <LinkButton css="mr-6" color="dim" to="/showcase">
-            SHOWCASE
-          </LinkButton>
-          <LinkButton color="grass" to="/claim">
-            CLAIM
-          </LinkButton>
-        </div>
+        <MissionButtons />
       </div>
 
       <div className={rightCss}>

app/routes/api.bids.ts

@@ -1,7 +1,7 @@
 import type { LoaderFunctionArgs } from '@remix-run/node'
 
 import { json } from '@remix-run/node'
-import { maxBy, range } from 'lodash-es'
+import { groupBy, orderBy } from 'lodash-es'
 
 import { BLOCK_TIME, ERROR, STATE } from '@constant'
 import alchemy from '@service/alchemy.server'
@@ -71,8 +71,6 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       Number(board.epochInterval)
     )
 
-    const highestBidder = await registry.read.highestBidder([id, epoch])
-
     // get current epoch all bids
     const total = Number(await registry.read.getBidCount([id, epoch]))
 
@@ -86,42 +84,46 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     }
 
     const bids = []
-    for (const num of range(total)) {
-      const bidder = await registry.read.bidders([id, epoch, BigInt(num)])
-      const bid = await operator.read.getBid([id, epoch, bidder])
-      if (!bid) {
-        continue
+    // gather all bid updated events
+    const allEvents = (
+      (await getBidUpdatedEvents(
+        client,
+        addressRegistry,
+        id,
+        epoch,
+        currBlock
+      )) || []
+    ).map((d) => ({
+      ...d.args,
+      blockNumber: d.blockNumber,
+      txHash: d.transactionHash || '',
+    }))
+    const grouppedEvents = groupBy(allEvents, 'price')
+    const filteredEvents = Object.entries(grouppedEvents).map(
+      ([price, events]) => {
+        return orderBy(events, ['blockNumber'], ['asc'])[0]
       }
-
-      const [updatedAtTime, events] = await Promise.all([
-        alchemy.core.getBlock(Number(bid.updatedAt)),
-        getBidUpdatedEvents(
-          client,
-          addressRegistry,
-          id,
-          epoch,
-          bidder,
-          currBlock
-        ),
-      ])
+    )
+    for (const event of filteredEvents) {
+      const updatedAtTime = await alchemy.core.getBlock(
+        Number(event.blockNumber)
+      )
       const updatedAt = genUTC8Date(updatedAtTime.timestamp * 1000)
-      const tx = maxBy(events, (d) => Number(d.args.price))
-      const txHash = tx?.transactionHash || ''
-
       bids.push({
-        bidder,
-        price: Number(bid.price).toFixed(0),
+        bidder: event.bidder,
+        price: Number(event.price).toFixed(0),
         updatedAt,
         updatedAtTime: updatedAtTime.timestamp,
-        txHash,
+        txHash: event.txHash,
       })
     }
+
     return json({
       state: STATE.successful,
       epoch: Number(epoch),
       epochRange,
       bids,
-      highestBidder,
+      bidderCount: total,
     })
   } catch (error) {
     const errorMessage = handleError(error)

app/routes/api.board.ts

@@ -97,7 +97,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       },
       epoch: Number(epoch),
       epochRange,
-      bidCount: Number(bidCount),
+      bidderCount: Number(bidCount),
       highestBid: {
         bidder: highestBidder,
         price: Number(highestBid?.price || 0).toFixed(0),

app/routes/claim/Claimed/index.tsx

@@ -22,8 +22,8 @@ const Claimed = ({ click }: Props) => {
     <section className={baseCss}>
       <h1 className="section-title">ClAIM SUCCESSFULLY</h1>
       <div className={contentCss}>
-        You have successfully claimed the distributed funding. To get more
-        details about the transaction, you can check your wallet and&nbsp;
+        You have successfully claimed the creator rewards. To get more details
+        about the transaction, you can check your wallet and&nbsp;
         <NavLink
           className="text-grass"
           to={`${envs.urlOpExplorer}/address/${address}`}

app/routes/claim/Empty/index.tsx

@@ -13,9 +13,9 @@ const Empty = ({ click }: Props) => {
 
   return (
     <section className={baseCss}>
-      <h1 className="section-title">CLAIM FUNDING</h1>
+      <h1 className="section-title">CREATOR REWARDS</h1>
       <p className={contentCss}>
-        There appears to be no new funding available to claim. Consider changing
+        There appear to be no new rewards available to claim. Consider changing
         your wallet address and try again. The upcoming distribution round will
         commence shortly, so we invite you to come back later.
       </p>

app/routes/claim/Greet/index.tsx

@@ -1,3 +1,5 @@
+import { NavLink } from '@remix-run/react'
+
 import BaseButton from '@component/Button/Base'
 import SvgClaim from '@svg/Claim'
 
@@ -13,11 +15,20 @@ const Greet = ({ open }: Props) => {
 
   return (
     <section className={baseCss}>
-      <h1 className="section-title">CLAIM FUNDING</h1>
+      <h1 className="section-title">CREATOR REWARDS</h1>
       <p className={contentCss}>
         The tax revenue from billboards is periodically distributed to creators
         through the quadratic funding mechanism. Connect your wallet to check
-        your eligibility for claiming funding.
+        your eligibility for claiming rewards. If you're claiming rewards for
+        the first time, please follow our
+        <NavLink
+          className="text-grass"
+          to="https://matters.town/a/bnrzg4x1iren"
+          target="_blank"
+        >
+          &nbsp;step-by-step guide&nbsp;
+        </NavLink>
+        to get started.
       </p>
       <SvgClaim css={svgCss} />
       <BaseButton css={btnCss} color="dim" click={open}>

app/routes/claim/Loader/index.tsx

@@ -8,7 +8,7 @@ const Loader = () => {
 
   return (
     <section className={baseCss}>
-      <h1 className="section-title">CLAIM FUNDING</h1>
+      <h1 className="section-title">CREATOR REWARDS</h1>
       <SvgLoaderClaimSM css={loaderSMCss} />
       <SvgLoaderClaimMD css={loaderMDCss} />
     </section>

app/routes/claim/Records/index.tsx

@@ -89,7 +89,7 @@ const Records = ({ data, callback }: Props) => {
 
   return (
     <section className={baseCss}>
-      <h1 className="section-title">CLAIM FUNDING</h1>
+      <h1 className="section-title">CREATOR REWARDS</h1>
       <div className={listCss}>
         {base.items.map((item: Record<string, any>, index: number) => (
           <Record key={index} data={item} />

app/routes/showcase/Bids/Records/index.tsx

@@ -14,7 +14,7 @@ type Props = {
 
 const Records = ({ data }: Props) => {
   const envs = useEnvs()
-  const { epoch, epochRange, bids: rawBids, highestBidder } = data
+  const { epoch, epochRange, bids: rawBids } = data
   const bidsData = (rawBids || []).reduce(
     (r: Record<string, any>, d: Record<string, any>) => {
       const bid = {
@@ -24,14 +24,10 @@ const Records = ({ data }: Props) => {
         txHash: formatAddress(d.txHash),
         link: `${envs.urlOpExplorer}/tx/${d.txHash}`,
       }
-      if (d.bidder === highestBidder) {
-        r.highestBid.push(bid)
-      } else {
-        r.bids.push(bid)
-      }
+      r.bids.push(bid)
       return r
     },
-    { bids: [], highestBid: [] }
+    { bids: [] }
   )
   const orderedBids = orderBy(bidsData.bids, ['updatedAtTime'], ['desc'])
 
@@ -73,11 +69,8 @@ const Records = ({ data }: Props) => {
         </div>
 
         <div className={rowsCss}>
-          {bidsData.highestBid.map((bid: Record<string, any>) => (
-            <Record key={bid.txHash} bid={bid} isHighest />
-          ))}
-          {orderedBids.map((bid: Record<string, any>) => (
-            <Record key={bid.txHash} bid={bid} />
+          {orderedBids.map((bid: Record<string, any>, index) => (
+            <Record key={bid.txHash} bid={bid} isHighest={index === 0} />
           ))}
         </div>
 

app/routes/showcase/Board/Meta/Auction/index.tsx

@@ -17,7 +17,7 @@ const Auction = ({ data }: Props) => {
   const envs = useEnvs()
   const navigate = useNavigate()
   const { address, isConnected } = useAccount()
-  const { board, currBid, epoch, epochRange, bidCount, highestBid } = data
+  const { board, currBid, epoch, epochRange, bidderCount, highestBid } = data
 
   const price = toFloatUSDT(Number(highestBid?.price || 0), 2)
   const currPrice = toFloatUSDT(Number(currBid?.price || 0), 2)
@@ -68,7 +68,7 @@ const Auction = ({ data }: Props) => {
       <div className={epochCss}>
         <p>Auction No. {formatRoundId(`${epoch}`)}</p>
         <p className={timeCss}>
-          {bidCount} bids
+          {bidderCount} bidders
           <span className="mx-2">·</span>
           Ends on {epochRange.end} (UTC+8)
         </p>

app/routes/showcase/Funds/index.tsx

@@ -19,7 +19,11 @@ const Funds = () => {
     <Crate>
       <Crate.Inner css={innerCss} hasDots hasXBorder hasBottomBorder>
         <section className="max-limit">
-          <h1 className="section-title">FUNDING DISTRIBUTION HISTORY</h1>
+          <h1 className="section-title">
+            CREATOR REWARDS
+            <br />
+            DISTRIBUTION HISTORY
+          </h1>
           {(isLoading || isError) && (
             <>
               <SvgLoaderFundsSM css="skeleton-sm" />

app/util/viem.ts

@@ -67,7 +67,6 @@ export const getBidUpdatedEvents = async (
   address: string,
   tokenId: bigint,
   epoch: bigint,
-  bidder: string,
   toBlock: bigint
 ) => {
   return await client.getLogs({
@@ -78,7 +77,6 @@ export const getBidUpdatedEvents = async (
     args: {
       tokenId,
       epoch,
-      bidder: bidder as `0x${string}`,
     },
     fromBlock: 0n,
     toBlock,