Feature / Drops

components/Countdown/Countdown.tsx

@@ -1,11 +1,16 @@
+import { Box, Flex, Text } from '@chakra-ui/react'
 import useTranslation from 'next-translate/useTranslation'
-import { FC, HTMLAttributes, useEffect, useMemo, useState } from 'react'
+import { FC, useEffect, useMemo, useState } from 'react'
 
 const refreshRate = 1000
 
-const Countdown: FC<
-  HTMLAttributes<any> & { date: Date; hideSeconds?: boolean }
-> = ({ date, hideSeconds = false, ...props }) => {
+type Props = {
+  date: Date
+  hideSeconds?: boolean
+  isStyled?: boolean
+}
+
+const Countdown: FC<Props> = ({ date, hideSeconds = false, isStyled }) => {
   const { t } = useTranslation('components')
   const [diff, setDiff] = useState(+new Date(date) - +new Date())
   const d = useMemo(() => Math.floor(diff / (1000 * 60 * 60 * 24)), [diff])
@@ -22,15 +27,49 @@ const Countdown: FC<
   }, [date])
 
   if (diff <= 0) return null
+
+  if (isStyled) {
+    const boxStyle = {
+      w: 10,
+      py: 0.5,
+      background: 'rgba(107, 114, 128, 0.5)',
+      color: 'white',
+      rounded: 'lg',
+      textAlign: 'center' as any,
+    }
+    return (
+      <Flex gap={2}>
+        {d > 0 && (
+          <Box {...boxStyle}>
+            <Text variant="subtitle2">{d}</Text>
+            <Text variant="caption">{t('countdown.day-long')}</Text>
+          </Box>
+        )}
+        <Box {...boxStyle}>
+          <Text variant="subtitle2">{`0${h}`.slice(-2)}</Text>
+          <Text variant="caption">{t('countdown.hour-long')}</Text>
+        </Box>
+        <Box {...boxStyle}>
+          <Text variant="subtitle2">{`0${m}`.slice(-2)}</Text>
+          <Text variant="caption">{t('countdown.min-long')}</Text>
+        </Box>
+        <Box {...boxStyle}>
+          <Text variant="subtitle2">{`0${s}`.slice(-2)}</Text>
+          <Text variant="caption">{t('countdown.sec-long')}</Text>
+        </Box>
+      </Flex>
+    )
+  }
+
   return (
-    <div {...props}>
+    <span>
       {d > 0 && <span>{t('countdown.day', { value: d })}</span>}{' '}
       <span>{t('countdown.hour', { value: `0${h}`.slice(-2) })}</span>{' '}
       <span>{t('countdown.min', { value: `0${m}`.slice(-2) })}</span>{' '}
       {!hideSeconds && (
         <span>{t('countdown.sec', { value: `0${s}`.slice(-2) })}</span>
       )}
-    </div>
+    </span>
   )
 }
 

components/Drop/DropCard.tsx

@@ -0,0 +1,171 @@
+import {
+  Badge,
+  Box,
+  Divider,
+  Flex,
+  Heading,
+  Icon,
+  IconButton,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+import { HiArrowNarrowRight } from '@react-icons/all-files/hi/HiArrowNarrowRight'
+import { HiBadgeCheck } from '@react-icons/all-files/hi/HiBadgeCheck'
+import Price from 'components/Price/Price'
+import { convertDropActive } from 'convert'
+import useTranslation from 'next-translate/useTranslation'
+import numbro from 'numbro'
+import { useMemo } from 'react'
+import { Timeline } from '../../hooks/useDropTimeline'
+import { formatAddress } from '../../utils'
+import Countdown from '../Countdown/Countdown'
+import Image from '../Image/Image'
+import Link from '../Link/Link'
+import TokenMedia from '../Token/Media'
+
+type Props = {
+  drop: ReturnType<typeof convertDropActive>
+  timeline: Timeline
+}
+
+export default function DropCard({ drop, timeline }: Props) {
+  const { t } = useTranslation('components')
+
+  const timelineText = useMemo(() => {
+    if (timeline === Timeline.UPCOMING) return t('drop.timeline.upcoming')
+    if (timeline === Timeline.INPROGRESS) return t('drop.timeline.in-progress')
+    return t('drop.timeline.ended')
+  }, [t, timeline])
+
+  return (
+    <Box
+      as={Link}
+      href={`/collection/${drop.collection.chainId}/${drop.collection.address}/drop`}
+      borderWidth="1px"
+      borderRadius="2xl"
+      w="full"
+      overflow="hidden"
+      position="relative"
+      p={4}
+    >
+      <Box
+        position="absolute"
+        inset={0}
+        _after={{
+          content: '""',
+          position: 'absolute',
+          inset: 0,
+          bg: 'rgba(0,0,0,0.7)',
+        }}
+        bg="gray.100"
+      >
+        {drop.collection.cover && (
+          <TokenMedia
+            imageUrl={drop.collection.cover}
+            defaultText={drop.collection.name}
+            animationUrl={undefined}
+            unlockedContent={null}
+            sizes="(min-width: 62em) 600px, 100vw"
+            fill
+          />
+        )}
+      </Box>
+
+      <Flex position="relative" w="full">
+        {timeline === Timeline.UPCOMING && (
+          <Countdown date={drop.startDate} isStyled />
+        )}
+        <Text as="span" variant="caption" verticalAlign="middle" ml="auto">
+          <Badge
+            background="rgba(107, 114, 128, 0.5)"
+            color="white"
+            px={2}
+            py={1}
+            borderRadius="2xl"
+          >
+            {timelineText}
+          </Badge>
+        </Text>
+      </Flex>
+
+      <Box
+        overflow="hidden"
+        rounded="2xl"
+        borderWidth="2px"
+        position="relative"
+        w={timeline === Timeline.ENDED ? 14 : '72px'}
+        h={timeline === Timeline.ENDED ? 14 : '72px'}
+        mt={timeline === Timeline.ENDED ? -3 : 14}
+        mb={4}
+        bg="gray.200"
+      >
+        {drop.collection.image && (
+          <Image
+            src={drop.collection.image}
+            alt={drop.collection.name}
+            fill
+            sizes="72px"
+            objectFit="cover"
+          />
+        )}
+      </Box>
+
+      <Flex position="relative" justifyContent="space-between" gap={4} w="full">
+        <Flex flexDir="column" gap={1}>
+          <Heading variant="heading2" color="white" isTruncated>
+            {drop.collection.name}
+          </Heading>
+
+          <Flex alignItems="center" gap={1.5}>
+            <Text variant="button2" color="white">
+              {t('drop.by', {
+                address:
+                  drop.collection.deployer.name ||
+                  formatAddress(drop.collection.deployer.address, 10),
+              })}
+            </Text>
+            {drop.collection.deployer?.verified && (
+              <Icon as={HiBadgeCheck} color="brand.500" h={4} w={4} />
+            )}
+          </Flex>
+
+          <Flex alignItems="center" gap={2}>
+            <Text variant="caption" color="white">
+              {drop.supply === Infinity
+                ? t('drop.supply.infinite')
+                : t('drop.supply.available', {
+                    count: numbro(drop.supply).format({
+                      thousandSeparated: true,
+                    }),
+                  })}
+            </Text>
+            <Divider orientation="vertical" h={4} />
+            <Stack alignItems="center" direction="row" spacing={1}>
+              <Flex flexShrink={0}>
+                <Image
+                  src={drop.currency.image}
+                  alt={drop.currency.symbol}
+                  width={16}
+                  height={16}
+                  w={4}
+                  h={4}
+                />
+              </Flex>
+              <Text variant="caption" color="white" isTruncated>
+                <Price amount={drop.unitPrice} currency={drop.currency} />
+              </Text>
+            </Stack>
+          </Flex>
+        </Flex>
+        <IconButton
+          variant="outline"
+          aria-label="Drop detail"
+          icon={<Icon as={HiArrowNarrowRight} boxSize={4} />}
+          placeSelf="flex-end"
+          color="white"
+          _hover={{ bg: 'whiteAlpha.200' }}
+        />
+      </Flex>
+    </Box>
+  )
+}

components/Drop/DropDetailSkeleton.tsx

@@ -0,0 +1,27 @@
+import { Flex, Progress, SimpleGrid, Skeleton } from '@chakra-ui/react'
+import { FC } from 'react'
+
+type Props = {
+  items?: number
+}
+
+const DropDetailSkeleton: FC<Props> = ({ items = 4 }) => {
+  return (
+    <>
+      <Flex flexDirection="column" py={8} gap={2} width="full">
+        <Flex justifyContent="space-between" py={2} w="full">
+          <Skeleton height="1em" width="100px" />
+          <Skeleton height="1em" width="100px" />
+        </Flex>
+        <Progress colorScheme="brand" rounded="full" size="xs" value={0} />
+      </Flex>
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} width="full">
+        {Array.from({ length: items }).map((_, i) => (
+          <Skeleton key={i} height={28} borderRadius="2xl" />
+        ))}
+      </SimpleGrid>
+    </>
+  )
+}
+
+export default DropDetailSkeleton