add basic relic card

apps/beets-frontend-v3/lib/modules/reliquary/Reliquary.tsx

@@ -1,38 +1,19 @@
 'use client'
 
-import { Box, VStack, CardBody, Card } from '@chakra-ui/react'
+import { VStack } from '@chakra-ui/react'
 import { useGetRelicPositionsOfOwner } from './hooks/useGetRelicPositionsOfOwner'
 import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
-import { useGetPositionForId } from './hooks/useGetPositionForId'
-import { useGetLevelOnUpdate } from './hooks/useGetLevelOnUpdate'
-import { useGetLevelInfo } from './hooks/useGetLevelInfo'
-import { useGetDepositImpact } from './hooks/useGetDepositImpact'
-import { useGetReliquaryFarmSnapshots } from './hooks/useGetReliquaryFarmSnapshots'
+import { Relic } from './components/Relic'
 
 const CHAIN = GqlChain.Sonic
 
 export function Reliquary() {
   // onchain
-  const { positions } = useGetRelicPositionsOfOwner(CHAIN)
-  const { position } = useGetPositionForId(CHAIN, '16')
-  const { levelOnUpdate } = useGetLevelOnUpdate(CHAIN, '16')
-  const { maturityThresholds } = useGetLevelInfo(CHAIN, '0')
-  const depositImpact = useGetDepositImpact(CHAIN, '1', '16')
-
-  // api
-  const { query } = useGetReliquaryFarmSnapshots()
-
-  console.log({ positions, position, levelOnUpdate, maturityThresholds, depositImpact, query })
+  const { relics } = useGetRelicPositionsOfOwner(CHAIN)
 
   return (
-    <Card rounded="xl" w="full">
-      <VStack h="full" w="full">
-        <CardBody align="start" as={VStack} h="full" w="full">
-          <Box h="full" w="full">
-            TEST
-          </Box>
-        </CardBody>
-      </VStack>
-    </Card>
+    <VStack align="start" h="full" w="full">
+      {relics?.map(relic => <Relic chain={CHAIN} key={relic.relicId} relic={relic} />)}
+    </VStack>
   )
 }

apps/beets-frontend-v3/lib/modules/reliquary/components/Relic.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  VStack,
+  HStack,
+  Text,
+  Heading,
+  CardFooter,
+  Button,
+} from '@chakra-ui/react'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
+import { fNum } from '@repo/lib/shared/utils/numbers'
+import { formatUnits } from 'viem'
+import { useGetPendingReward } from '../hooks/useGetPendingReward'
+import Countdown from 'react-countdown'
+import { ReliquaryFarmPosition } from '../reliquary.types'
+import { useGetLevelInfo } from '../hooks/useGetLevelInfo'
+import { relicGetMaturityProgress } from '../reliquary.helpers'
+
+const RELIC_LEVEL_NAMES = [
+  'The Initiate',
+  'The Neophyte',
+  'The Wanderer',
+  'The Rebel',
+  'The Skeptic',
+  'The Apprentice',
+  'The Journeyman',
+  'The Savant',
+  'The Creator',
+  'The Scholar',
+  'The Awakened',
+]
+
+type RelicProps = {
+  chain: GqlChain
+  relic: ReliquaryFarmPosition
+}
+
+export function Relic({ chain, relic }: RelicProps) {
+  const { amount: pendingReward } = useGetPendingReward(chain, relic.relicId)
+  const { maturityThresholds } = useGetLevelInfo(chain, relic.relicId)
+
+  const { levelUpDate } = relicGetMaturityProgress(relic, maturityThresholds || [])
+
+  return (
+    <Card
+      bg="beets.base.800"
+      border="1px solid"
+      borderColor="beets.base.600"
+      minH="400px"
+      rounded="xl"
+      w="33%"
+    >
+      <CardHeader>
+        <HStack justify="space-between" w="full">
+          <Heading size="md">
+            Level {relic.level + 1} - {RELIC_LEVEL_NAMES[relic.level]}
+          </Heading>
+          <Heading size="md">Relic #{relic.relicId}</Heading>
+        </HStack>
+      </CardHeader>
+      <CardBody>
+        <VStack align="start">
+          <HStack justify="space-between" w="full">
+            <Text>Amount:</Text>
+            <Text>{`${fNum('token', relic.amount)} fBEETS`}</Text>
+          </HStack>
+          <HStack justify="space-between" w="full">
+            <Text>Pending rewards:</Text>
+            <Text>{`${fNum('token', formatUnits(pendingReward || 0n, 18))} BEETS`}</Text>
+          </HStack>
+          <HStack justify="space-between" w="full">
+            <Text>Time to next level:</Text>
+            <Text>
+              <Countdown date={levelUpDate} />
+            </Text>
+          </HStack>
+        </VStack>
+      </CardBody>
+      <CardFooter>
+        <HStack justify="space-between" w="full">
+          <Button>Claim</Button>
+          <Button>Level up</Button>
+          <Button>Deposit</Button>
+          <Button>Withdraw</Button>
+        </HStack>
+      </CardFooter>
+    </Card>
+  )
+}