feat: binding some data

DimensionDev · May 16, 2024 · 4298556 · 4298556
1 parent ee2bc42
commit 4298556
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 21 deletions.
diff --git a/src/components/StakeMaskStatusCard/ActivityStatusTag.tsx b/src/components/StakeMaskStatusCard/ActivityStatusTag.tsx
@@ -1,7 +1,12 @@
-import type { FC } from 'react'
-import { Box, type BoxProps } from '@chakra-ui/react'
+import { useMemo, type FC } from 'react'
+import { Box, Skeleton, type BoxProps } from '@chakra-ui/react'
+import { usePoolInfo } from '../../hooks/usePoolInfo'
+import dayjs from 'dayjs'
+import { t } from '@lingui/macro'
 
 export const ActivityStatusTag: FC<BoxProps> = ({ ...props }) => {
+  const { data: pool, isLoading } = usePoolInfo()
+  const isStarted = useMemo(() => (pool ? dayjs(pool.start_time * 1000).isBefore(Date.now()) : false), [pool])
   return (
     <Box
       bg="neutrals.9"
@@ -13,7 +18,7 @@ export const ActivityStatusTag: FC<BoxProps> = ({ ...props }) => {
       px="6px"
       {...props}
     >
-      Not started
+      {isLoading || !pool ? <Skeleton height="20px" width="60px" /> : isStarted ? t`On going` : t`Not started`}
     </Box>
   )
 }
diff --git a/src/components/StakeMaskStatusCard/index.tsx b/src/components/StakeMaskStatusCard/index.tsx
@@ -1,5 +1,19 @@
-import { Box, BoxProps, Button, Flex, Grid, HStack, Heading, Icon, Stack, Text, VStack } from '@chakra-ui/react'
-import { t } from '@lingui/macro'
+import {
+  Box,
+  BoxProps,
+  Button,
+  Flex,
+  Grid,
+  HStack,
+  Heading,
+  Icon,
+  Skeleton,
+  Stack,
+  Text,
+  Tooltip,
+  VStack,
+} from '@chakra-ui/react'
+import { Trans, t } from '@lingui/macro'
 import { FC } from 'react'
 import MaskLogoSVG from '../../assets/mask-logo.svg?react'
 import No1SVG from '../../assets/no-1.svg?react'
@@ -10,10 +24,17 @@ import Rss3EthSVG from '../../assets/rss3-eth.svg?react'
 import TonEthSVG from '../../assets/ton-eth.svg?react'
 import { stakeModal } from '../../modals/index.tsx'
 import { ActivityStatusTag } from './ActivityStatusTag.tsx'
+import { usePoolInfo } from '../../hooks/usePoolInfo.ts'
+import { formatNumber } from '../../helpers/formatNumber.ts'
+import { formatSeconds } from '../../helpers/formatSeconds.ts'
 
 export interface StakeMaskStatusCardProps extends BoxProps {}
 
 export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props }) => {
+  const { data: pool, isLoading } = usePoolInfo()
+  const rewardTokens = pool ? Object.values(pool.reward_pool) : []
+  const rss3 = rewardTokens.find((x) => x.name === 'rss3')
+  const ton = rewardTokens.find((x) => x.name === 'ton')
   return (
     <Box
       maxW="maxW"
@@ -65,7 +86,14 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
             lineHeight={{ base: 6, lg: '140%' }}
             align="center"
           >
-            Time 3.20 2024~8.20 2024
+            <Trans>
+              Time
+              {isLoading || !pool ? (
+                <Skeleton width="100px" height="16px" ml={1} />
+              ) : (
+                `${formatSeconds(pool?.start_time, 'M.DD YYYY')}~${formatSeconds(pool.end_time, 'M.DD YYYY')}`
+              )}
+            </Trans>
             <Icon as={QuestionSVG} w="6" h="6" ml="10px" />
           </Flex>
         </Flex>
@@ -94,9 +122,13 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
               <HStack spacing={1}>
                 <Icon as={Rss3EthSVG} w="12" h="12" />
                 <VStack spacing={0} color="neutrals.8" align="start">
-                  <Box fontSize="24px" lineHeight="32px" fontWeight={700}>
-                    700,000
-                  </Box>
+                  {rss3 ? (
+                    <Box fontSize="24px" lineHeight="32px" fontWeight={700}>
+                      {formatNumber(+rss3.amount)}
+                    </Box>
+                  ) : (
+                    <Skeleton height="24px" width="80px" my="4px" />
+                  )}
                   <Box fontSize="16px" lineHeight="24px" fontWeight={700}>
                     RSS3
                   </Box>
@@ -106,9 +138,14 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
               <HStack spacing={1}>
                 <Icon as={TonEthSVG} w="12" h="12" />
                 <VStack spacing={0} color="neutrals.8" align="start">
-                  <Box fontSize="24px" lineHeight="32px" fontWeight={700}>
-                    40,000
-                  </Box>
+                  {ton ? (
+                    <Box fontSize="24px" lineHeight="32px" fontWeight={700}>
+                      {formatNumber(+ton.amount)}
+                    </Box>
+                  ) : (
+                    <Skeleton height="24px" width="80px" my="4px" />
+                  )}
+
                   <Box fontSize="16px" lineHeight="24px" fontWeight={700}>
                     TON
                   </Box>
@@ -128,9 +165,22 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
             p={6}
             spacing={6}
           >
-            <Box h="56px" fontSize="32px" lineHeight="56px" fontWeight={600} color="neutrals.8" letterSpacing="-0.32px">
-              12.2%
-            </Box>
+            {pool?.apr ? (
+              <Tooltip label={formatNumber(+pool.apr * 100, 18)}>
+                <Box
+                  h="56px"
+                  fontSize="32px"
+                  lineHeight="56px"
+                  fontWeight={600}
+                  color="neutrals.8"
+                  letterSpacing="-0.32px"
+                >
+                  {formatNumber(+pool.apr * 110, 2)}%
+                </Box>
+              </Tooltip>
+            ) : (
+              <Skeleton h="56px" width="100px" fontSize="32px"></Skeleton>
+            )}
             <Box fontSize="16px" fontWeight={700} lineHeight="150%" color="neutrals.6">
               {t`APR`}
             </Box>
@@ -153,7 +203,13 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
               color="neutrals.8"
               letterSpacing="-0.32px"
             >
-              1,234,342
+              {pool?.amount ? (
+                <Tooltip label={formatNumber(+pool.amount)} hasArrow placement="top">
+                  <Text>{formatNumber(+pool.amount)}</Text>
+                </Tooltip>
+              ) : (
+                <Skeleton height="32px" width="100px" />
+              )}
               <Icon as={MaskLogoSVG} w="9" h="9" ml="1" />
             </Flex>
             <Box fontSize="16px" fontWeight={700} lineHeight="150%" color="neutrals.6">

diff --git a/src/helpers/formatSeconds.ts b/src/helpers/formatSeconds.ts
@@ -0,0 +1,5 @@
+import dayjs from 'dayjs'
+
+export function formatSeconds(seconds: number, pattern: string) {
+  return dayjs(seconds * 1000).format(pattern)
+}
diff --git a/src/modals/StakeModal.tsx b/src/modals/StakeModal.tsx
@@ -115,11 +115,16 @@ export function StakeModal(props: Props) {
                 <Text fontSize={16} color="neutrals.4" display="inline-flex" alignItems="center">
                   <Trans>
                     Balance:{' '}
-                    {balance.isPending ? (
-                      <Skeleton as="span" ml={2} display="inline-block" height="16px" width="20px" />
-                    ) : (
-                      balance.data?.value.toLocaleString()
-                    )}
+                    <Skeleton
+                      as="span"
+                      ml={2}
+                      display="inline-block"
+                      height="16px"
+                      width="20px"
+                      isLoaded={!balance.isPending}
+                    >
+                      {balance.isPending ? null : balance.data?.value.toLocaleString()}
+                    </Skeleton>
                   </Trans>
                 </Text>
                 <Button

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -19,6 +19,7 @@ body {
 }
 
 .gradient-border::after {
+  pointer-events: none;
   content: '';
   position: absolute;
   left: 0;