sporkwhale-farcaster-frame-3/src/pages/index.tsx at 077646eaa3e5c5fd6165c00cf752f459301b0871 · liquality/sporkwhale-farcaster-frame-3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import LeaderboardDesktop from '@/components/leaderboard-desktop'
import { ClashDataMap } from '@/types'
import { SERVER_URL } from '@/utils/generate-frames'
import { IMAGES } from '@/utils/image-paths'
import Head from 'next/head'
import { useEffect, useState } from 'react'
import { isMobile } from 'react-device-detect'
import LeaderboardMobile from '../components/leaderboard-mobile'
export default function Home() {

  const [isMobileState, setIsMobileState] = useState(false)
  const [questionId, setQuestionId] = useState(5)
  const [leaderboard, setLeaderboard] = useState<null | ClashDataMap[]>(null)
  const [loading, setLoading] = useState(false)
  const [expandedDay, setExpandedDay] = useState<number | null>(null)

  useEffect(() => {
    setIsMobileState(isMobile)
  }, [isMobile])
  useEffect(() => {
    if (!leaderboard) {
      const fetchData = async () => {
        try {
          const response = await fetch('/api/getLeaderboardData')
          const data = await response.json()
          setLeaderboard(data.leaderboard)
        } catch (error) {
          console.error('Error fetching data:', error)
        }
      }
      fetchData()
    }
  }, [leaderboard])

  let image = ''
  let postUrl = ''
  let text = ''
  if (questionId === 5) {
    image = IMAGES.start_mint
    postUrl = '/api/mint?data=start-mint'
    text = '🔆 Mint your sporkwhale!'
  } else {
    image = IMAGES.welcome
    postUrl = '/api/post?data=start'
    text = '🔆 Play Clash of Channels!'
  }
  return (
    <>
      <Head>
        <meta property="og:title" content="Frame" />
        <meta property="og:image" content={`${SERVER_URL}/${image}`} />
        <meta property="fc:frame" content="vNext" />
        <meta property="fc:frame:image" content={`${SERVER_URL}/${image}`} />
        <meta property="fc:frame:button:1" content={text} />
        <meta
          property="fc:frame:post_url"
          content={`${SERVER_URL}${postUrl}`}
        />
      </Head>
      {leaderboard ? (
        <>
          {' '}
          {isMobileState ? (
            <LeaderboardMobile leaderboard={leaderboard} currentDay={questionId}/>
          ) : (
            <LeaderboardDesktop leaderboard={leaderboard} currentDay={questionId}/>
          )}
        </>
      ) : null}
    </>
  )
}