frame images

packages/frontend/package.json

@@ -27,7 +27,7 @@
     "@web3modal/wagmi": "^4.1.9",
     "copy-to-clipboard": "^3.3.3",
     "expiry-set": "^1.0.0",
-    "frames.js": "^0.16.4",
+    "frames.js": "^0.16.6",
     "jose": "^5.2.4",
     "lru-cache": "^10.2.1",
     "moment": "^2.29.1",

packages/frontend/src/pages/api/frames/index.tsx

@@ -1,20 +1,46 @@
 /* eslint-disable react/jsx-key */
 import { createFrames, Button } from 'frames.js/next/pages-router/server'
 import moment from 'moment'
-import { frameConfig } from './utils'
+import { frameConfig, getBids } from './utils'
+import { DotsIcon } from '@/components/icons'
+import { formatTimeLeft } from '@/utils/formatters/formatTimeLeft'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { formatDate } from '@/utils/formatters/formatDate'
 
 const frames = createFrames({
   basePath: '/api/frames',
 })
 
 const handleRequest = frames(async (req) => {
+  const svg = encodeURIComponent(renderToStaticMarkup(<DotsIcon />))
+  const start = moment.utc(frameConfig.startDate)
+  const end = moment.utc(frameConfig.endDate)
+  const withdraw = moment.utc(frameConfig.withdrawDate)
+  const timer = moment().isBefore(start)
+    ? `Till start ${formatTimeLeft(BigInt(start.unix()))}`
+    : `Time left ${formatTimeLeft(BigInt(end.unix()))}`
+
+  const bids = await getBids()
+
+  const totalNrOfParticipants = bids.length
+  const numberOfWinners = frameConfig.maxTickets
+  const probability =
+    bids.length < frameConfig.maxTickets
+      ? 100
+      : ((totalNrOfParticipants - numberOfWinners) / totalNrOfParticipants) * 100
+
   // Withdrawal period ended
-  if (moment().isAfter(frameConfig.withdrawDate)) {
+  if (moment().isAfter(withdraw)) {
     return {
-      image: `/images?status=ended`,
+      image: (
+        <div tw="flex flex-col justify-between w-full h-full justify-center items-center text-center bg-[#FADAFA]">
+          <p tw="text-8xl">Devcon Raffle</p>
+          <p tw="text-6xl">has ended ⌛️</p>
+        </div>
+      ),
       imageOptions: {
         headers: {
-          'Cache-Control': 'public, max-age=0',
+          'Cache-Control': 'public, max-age=60',
         },
       },
       buttons: [
@@ -29,12 +55,37 @@ const handleRequest = frames(async (req) => {
   }
 
   // Bidding ended
-  if (moment().isAfter(frameConfig.endDate)) {
+  if (moment().isAfter(end)) {
     return {
-      image: `/images?status=withdrawal`,
+      image: (
+        <div
+          tw="flex flex-col justify-between w-full h-full p-12 bg-center bg-no-repeat"
+          style={{ backgroundImage: `url("data:image/svg+xml,${svg}")`, backgroundSize: '100% 100%' }}
+        >
+          <div tw="flex flex-col">
+            <p tw="p-0 m-0">
+              <h1 tw="bg-white text-9xl m-0 p-4">{frameConfig.title}</h1>
+            </p>
+            <p tw="p-0 m-0">
+              <h2 tw="bg-white text-6xl m-0 px-4 pt-0 pb-4">{frameConfig.description}</h2>
+            </p>
+          </div>
+
+          <div tw="flex flex-col text-4xl">
+            <p tw="p-0 m-0">
+              <span tw="bg-white m-0 p-4">Raffle has ended ⌛️</span>
+            </p>
+            <p tw="p-0 m-0">
+              <span tw="bg-white m-0 p-2">
+                Claim ticket before {formatDate(BigInt(moment.utc(frameConfig.withdrawDate).unix()))}
+              </span>
+            </p>
+          </div>
+        </div>
+      ),
       imageOptions: {
         headers: {
-          'Cache-Control': 'public, max-age=0',
+          'Cache-Control': 'public, max-age=60',
         },
       },
       buttons: [
@@ -49,10 +100,47 @@ const handleRequest = frames(async (req) => {
   }
 
   return {
-    image: `/images?status=active`,
+    image: (
+      <div
+        tw="flex flex-col bg-white justify-between w-full h-full p-12"
+        style={{ backgroundImage: `url("data:image/svg+xml,${svg}")`, backgroundSize: '100% 100%' }}
+      >
+        <div tw="flex flex-col">
+          <p tw="p-0 m-0">
+            <h1 tw="bg-white text-9xl m-0 p-4">{frameConfig.title}</h1>
+          </p>
+          <p tw="p-0 m-0">
+            <h2 tw="bg-white text-6xl m-0 px-4 pt-0 pb-4">{frameConfig.description}</h2>
+          </p>
+        </div>
+
+        <div tw="flex flex-row justify-between text-4xl">
+          <div tw="flex flex-col">
+            <p tw="p-0 m-0">
+              <span tw="bg-white m-0 p-2">{timer}</span>
+            </p>
+            <p tw="p-0 m-0">
+              <span tw="bg-white m-0 p-2">Ends on {formatDate(BigInt(moment.utc(frameConfig.endDate).unix()))}</span>
+            </p>
+          </div>
+          {moment().isAfter(start) && (
+            <div tw="flex flex-col">
+              <p tw="p-0 m-0 justify-end text-right">
+                <span tw="bg-white m-0 p-2">
+                  {bids.length} Bids / {frameConfig.maxTickets} tickets
+                </span>
+              </p>
+              <p tw="p-0 m-0 justify-end text-right">
+                <span tw="bg-white  m-0 p-2">Current win chance {probability}%</span>
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    ),
     imageOptions: {
       headers: {
-        'Cache-Control': 'public, max-age=0',
+        'Cache-Control': 'public, max-age=60',
       },
     },
     buttons: [