Merge pull request #610 from liteflow-labs/dev

Release 3.6.0

components/Drop/DropCard.tsx

@@ -40,7 +40,7 @@ type Props = {
       }
     }
     startDate: Date
-    endDate: Date
+    endDate: Date | null
     unitPrice: string
     currency: {
       decimals: number
@@ -96,7 +96,7 @@ export default function DropCard({ drop, onCountdownEnd }: Props) {
       </Box>
 
       <Flex position="relative" w="full">
-        {status === Status.INPROGRESS && (
+        {status === Status.INPROGRESS && !!drop.endDate && (
           // Hidden countdown to trigger refetch when countdown ends
           <DropCountdown
             date={new Date(drop.endDate)}

components/Drop/DropMintSchedule.tsx

@@ -7,7 +7,7 @@ type Props = StyleProps & {
     id: string
     name: string
     startDate: Date
-    endDate: Date
+    endDate: Date | null
     unitPrice: string
     isAllowed: boolean
     currency: {

components/Drop/ListItem.tsx

@@ -22,7 +22,7 @@ type Props = {
     id: string
     name: string
     startDate: Date
-    endDate: Date
+    endDate: Date | null
     unitPrice: string
     isAllowed: boolean
     currency: {
@@ -109,11 +109,13 @@ const DropListItem: FC<Props> = ({ drop, isOpen }) => {
                   </Text>
                   {isExpanded && (
                     <>
-                      <Text variant="text-sm" color="gray.500">
-                        {t('drop.listItem.endDate', {
-                          endDate: formatDate(drop.endDate),
-                        })}
-                      </Text>
+                      {!!drop.endDate && (
+                        <Text variant="text-sm" color="gray.500">
+                          {t('drop.listItem.endDate', {
+                            endDate: formatDate(drop.endDate),
+                          })}
+                        </Text>
+                      )}
                       {drop.supply && (
                         <Text variant="text-sm" color="gray.500">
                           {t('drop.listItem.supply', {

components/Drop/MintForm/Inprogress.tsx

@@ -14,6 +14,7 @@ import { BigNumber } from '@ethersproject/bignumber'
 import { useMintDrop } from '@liteflow/react'
 import ConnectButtonWithNetworkSwitch from 'components/Button/ConnectWithNetworkSwitch'
 import useAccount from 'hooks/useAccount'
+import useApproveCurrency from 'hooks/useApproveCurrency'
 import useBlockExplorer from 'hooks/useBlockExplorer'
 import Trans from 'next-translate/Trans'
 import useTranslation from 'next-translate/useTranslation'
@@ -41,14 +42,16 @@ type Props = {
   drop: {
     id: string
     name: string
-    endDate: Date
+    endDate: Date | null
     unitPrice: string
     minted: string
     supply: string | null
     maxQuantityPerWallet: string | null
     isAllowed: boolean
     maxQuantity: string | null
     currency: {
+      chainId: number
+      address: string | null
       decimals: number
       symbol: string
       image: string
@@ -75,6 +78,11 @@ const MintFormInprogress: FC<Props> = ({ collection, drop }): JSX.Element => {
   const [mintDrop, { activeStep, transactionHash }] = useMintDrop(signer)
 
   const quantity = watch('quantity')
+  const approve = useApproveCurrency(
+    drop.currency,
+    collection.address as `0x${string}`,
+  )
+
   const { isOpen, onOpen, onClose } = useDisclosure()
   const blockExplorer = useBlockExplorer(collection.chainId)
 
@@ -86,6 +94,7 @@ const MintFormInprogress: FC<Props> = ({ collection, drop }): JSX.Element => {
   const onSubmit = handleSubmit(async (data) => {
     try {
       onOpen()
+      await approve.mutateAsync(BigInt(drop.unitPrice) * BigInt(data.quantity))
       const mintedDrops = await mintDrop(drop.id, data.quantity)
       invariant(mintedDrops[0], 'Error minting drop')
       mintedDrops.length === 1
@@ -231,8 +240,18 @@ const MintFormInprogress: FC<Props> = ({ collection, drop }): JSX.Element => {
           <Text variant="subtitle2">
             <Trans
               ns="components"
-              i18nKey="drop.form.in-progress.endsIn"
-              components={[<Countdown date={drop.endDate} key="countdown" />]}
+              i18nKey={
+                drop.endDate
+                  ? 'drop.form.in-progress.endsIn'
+                  : 'drop.form.in-progress.untilSoldOut'
+              }
+              components={[
+                drop.endDate ? (
+                  <Countdown date={drop.endDate} key="countdown" />
+                ) : (
+                  <></>
+                ),
+              ]}
             />
           </Text>
         </Flex>

components/Drop/MintForm/index.tsx

@@ -1,6 +1,6 @@
 import { StyleProps, VStack } from '@chakra-ui/react'
 import { FC, useEffect, useMemo, useState } from 'react'
-import { dateIsBefore, dateIsBetween } from '../../../utils'
+import { dateIsAfter, dateIsBefore, dateIsBetween } from '../../../utils'
 import MintFormEnded from './Ended'
 import MintFormInprogress from './Inprogress'
 import MintFormUpcoming from './Upcoming'
@@ -13,7 +13,7 @@ type Props = StyleProps & {
   drops: {
     id: string
     name: string
-    endDate: Date
+    endDate: Date | null
     startDate: Date
     unitPrice: string
     minted: string
@@ -22,6 +22,8 @@ type Props = StyleProps & {
     isAllowed: boolean
     maxQuantity: string | null
     currency: {
+      chainId: number
+      address: string | null
       decimals: number
       symbol: string
       image: string
@@ -40,7 +42,9 @@ const DropMintForm: FC<Props> = ({ collection, drops, ...props }) => {
   const inprogressDrops = useMemo(
     () =>
       drops.filter((drop) =>
-        dateIsBetween(date, drop.startDate, drop.endDate),
+        drop.endDate
+          ? dateIsBetween(date, drop.startDate, drop.endDate)
+          : dateIsAfter(date, drop.startDate),
       ) || [],
     [date, drops],
   )
@@ -51,14 +55,12 @@ const DropMintForm: FC<Props> = ({ collection, drops, ...props }) => {
   )
 
   const dropsToRender = useMemo(() => {
-    if (inprogressDrops.length > 0)
-      return inprogressDrops.map((drop) => (
-        <MintFormInprogress key={drop.id} collection={collection} drop={drop} />
-      ))
-    if (upcomingDrops.length > 0)
-      return upcomingDrops.map((drop) => (
-        <MintFormUpcoming key={drop.id} drop={drop} />
-      ))
+    if (inprogressDrops.length > 0 && inprogressDrops[0])
+      return (
+        <MintFormInprogress collection={collection} drop={inprogressDrops[0]} />
+      )
+    if (upcomingDrops.length > 0 && upcomingDrops[0])
+      return <MintFormUpcoming drop={upcomingDrops[0]} />
     return <MintFormEnded collection={collection} drops={drops} />
   }, [drops, inprogressDrops, upcomingDrops, collection])
 

hooks/useApproveCurrency.ts

@@ -0,0 +1,39 @@
+import { BigNumberish } from '@ethersproject/bignumber'
+import { erc20ABI, useAccount, useContractWrite, useMutation } from 'wagmi'
+import { readContract } from 'wagmi/actions'
+
+export default function useApproveCurrency(
+  currency: {
+    chainId: number
+    address: string | null
+    decimals: number
+  },
+  spender: `0x${string}`,
+) {
+  const { address } = useAccount()
+  const approve = useContractWrite({
+    abi: erc20ABI,
+    chainId: currency.chainId,
+    address: currency.address as `0x${string}`,
+    functionName: 'approve',
+  })
+  return useMutation({
+    mutationFn: async (amount: BigNumberish) => {
+      if (!currency.address) return
+      const allowance = await readContract({
+        chainId: currency.chainId,
+        address: currency.address as `0x${string}`,
+        abi: erc20ABI,
+        functionName: 'allowance',
+        args: [
+          address as `0x${string}`, // owner
+          spender, // spender
+        ],
+      })
+      if (allowance > BigInt(amount.toString())) return
+      return approve.writeAsync({
+        args: [spender, BigInt(amount.toString())],
+      })
+    },
+  })
+}

hooks/useTimeStatus.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { dateIsBefore, dateIsBetween } from '../utils'
+import { dateIsAfter, dateIsBefore } from '../utils'
 
 export enum Status {
   UPCOMING = 'upcoming',
@@ -9,7 +9,7 @@ export enum Status {
 
 type HookArgs = {
   startDate: Date
-  endDate: Date
+  endDate: Date | null
 }
 
 export default function useTimeStatus({
@@ -25,7 +25,7 @@ export default function useTimeStatus({
 
   return useMemo(() => {
     if (dateIsBefore(date, startDate)) return Status.UPCOMING
-    if (dateIsBetween(date, startDate, endDate)) return Status.INPROGRESS
-    return Status.ENDED
+    if (endDate && dateIsAfter(date, endDate)) return Status.ENDED
+    return Status.INPROGRESS
   }, [date, endDate, startDate])
 }

locales/en/components.json

@@ -176,7 +176,8 @@
         "mintedOut": "Minted out",
         "mint": "Mint",
         "notEligible": "You're not eligible for this mint stage",
-        "endsIn": "Ends in <0/>"
+        "endsIn": "Ends in <0/>",
+        "untilSoldOut": "Until sold out"
       },
       "upcoming": {
         "price": "Price:",

locales/es-mx/components.json

@@ -176,7 +176,8 @@
         "mintedOut": "Minted out",
         "mint": "Mint",
         "notEligible": "You're not eligible for this mint stage",
-        "endsIn": "Ends in <0/>"
+        "endsIn": "Ends in <0/>",
+        "untilSoldOut": "Until sold out"
       },
       "upcoming": {
         "price": "Price:",

locales/ja/components.json

@@ -176,7 +176,8 @@
         "mintedOut": "Minted out",
         "mint": "Mint",
         "notEligible": "You're not eligible for this mint stage",
-        "endsIn": "Ends in <0/>"
+        "endsIn": "Ends in <0/>",
+        "untilSoldOut": "Until sold out"
       },
       "upcoming": {
         "price": "Price:",

locales/zh-cn/components.json

@@ -176,7 +176,8 @@
         "mintedOut": "Minted out",
         "mint": "Mint",
         "notEligible": "You're not eligible for this mint stage",
-        "endsIn": "Ends in <0/>"
+        "endsIn": "Ends in <0/>",
+        "untilSoldOut": "Until sold out"
       },
       "upcoming": {
         "price": "Price:",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "starter-kit",
-  "version": "2.1.1",
+  "version": "3.6.0",
   "private": true,
   "scripts": {
     "clean": "rimraf .next",
@@ -61,7 +61,7 @@
     "@graphql-codegen/typescript-react-apollo": "^4.1.0",
     "@graphql-eslint/eslint-plugin": "^3.20.1",
     "@next/bundle-analyzer": "^14.0.4",
-    "@nft/api-graphql": "^1.0.0-beta.52",
+    "@nft/api-graphql": "^1.0.0-beta.60",
     "@types/nodemailer": "^6.4.14",
     "@types/nprogress": "^0.2.3",
     "@types/react": "^18.2.48",

pages/collection/[chainId]/[id]/drop.gql

@@ -42,6 +42,8 @@ query FetchCollectionDrops(
       maxQuantity(minter: $minter)
       currency {
         id
+        chainId
+        address
         decimals
         symbol
         image

utils.ts

@@ -50,6 +50,10 @@ export const dateIsBefore = (now: Date, startDate: Date): boolean => {
   return dayjs(now).isBefore(dayjs(startDate))
 }
 
+export const dateIsAfter = (now: Date, endDate: Date): boolean => {
+  return dayjs(now).isAfter(dayjs(endDate))
+}
+
 export const dateIsBetween = (
   now: Date,
   startDate: Date,