feat: add claim n mint button to fxparams, allow to claim the chepeast ticket and mint in one batch

src/components/Tables/TableMintTickets/MintTicketRow.tsx

@@ -1,14 +1,7 @@
 import { memo, useContext, useEffect, useRef } from "react"
 import Link from "next/link"
 import cs from "classnames"
-import {
-  addDays,
-  differenceInSeconds,
-  format,
-  formatDistanceToNow,
-  isBefore,
-  subSeconds,
-} from "date-fns"
+import { format, formatDistanceToNow, isBefore } from "date-fns"
 import { Image } from "components/Image"
 import { UserContext } from "containers/UserProvider"
 import { MintTicket } from "types/entities/MintTicket"
@@ -19,25 +12,8 @@ import { Button } from "components/Button"
 import { ButtonUpdatePriceMintTicket } from "components/MintTicket/ButtonUpdatePriceMintTicket"
 import { ButtonClaimMintTicket } from "components/MintTicket/ButtonClaimMintTicket"
 import { ApolloCache, useApolloClient } from "@apollo/client"
-import { Qu_genTokenMintTickets } from "queries/generative-token"
 import { GenerativeToken } from "types/entities/GenerativeToken"
-import { Frag_MintTicketFull } from "queries/fragments/mint-ticket"
-
-const getDAPrice = (dateNow: Date, dateEnd: Date, price: number) => {
-  const dateNowOffset = subSeconds(dateNow, 60)
-  const dateEndDayLater = addDays(dateEnd, 1)
-  // end of auction
-  if (dateEndDayLater < dateNowOffset) {
-    return 100000
-  }
-  // start of auction
-  if (dateNowOffset < dateEnd) {
-    return price
-  }
-  const elapsedTimeInSeconds = differenceInSeconds(dateNowOffset, dateEnd)
-  const daProgressMultiplier = (elapsedTimeInSeconds * 100) / 86400 / 100
-  return 100000 + (price - 100000) * (1 - daProgressMultiplier)
-}
+import { getMintTicketDAPrice } from "../../../utils/mint-ticket"
 
 const moveMintTicketToUnderAuction = (
   cache: ApolloCache<any>,
@@ -92,7 +68,7 @@ const _MintTicketRow = ({
 
   const price = !isUnderAuction
     ? mintTicket.price
-    : getDAPrice(now, dateTaxPaidUntil, mintTicket.price)
+    : getMintTicketDAPrice(now, dateTaxPaidUntil, mintTicket.price)
 
   useEffect(() => {
     if (!updateCacheOnForeclosure) return

src/components/Tables/TableMintTickets/index.tsx

@@ -1,10 +1,11 @@
-import React, { memo, useEffect, useState } from "react"
+import React, { memo } from "react"
 import cs from "classnames"
 import { GenTokFlag } from "types/entities/GenerativeToken"
 import { MintTicket } from "types/entities/MintTicket"
 import Skeleton from "../../Skeleton"
 import style from "../TableUser.module.scss"
 import { MintTicketRow } from "./MintTicketRow"
+import useNow from "../../../hooks/useNow"
 
 interface TableMintTicketsProps {
   firstColName?: string
@@ -23,16 +24,7 @@ const _TableMintTickets = ({
   refreshEveryMs = 15000,
   updateCacheOnForeclosure = false,
 }: TableMintTicketsProps) => {
-  const [now, setNow] = useState(new Date())
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setNow(new Date())
-    }, refreshEveryMs)
-    return () => {
-      clearInterval(interval)
-    }
-  }, [refreshEveryMs])
+  const now = useNow(refreshEveryMs)
 
   const isInForeclosure = (mintTicket: MintTicket) => {
     const dateTaxPaidUntil = new Date(mintTicket.taxationPaidUntil)

src/containers/Generative/Display/ButtonExploreParams.tsx

@@ -0,0 +1,55 @@
+import React, { memo, useContext } from "react"
+import { GenerativeToken } from "../../../types/entities/GenerativeToken"
+import Link from "next/link"
+import { getGenerativeTokenUrl } from "../../../utils/generative-token"
+import { Button } from "../../../components/Button"
+import { UserContext } from "../../UserProvider"
+import { useQuery } from "@apollo/client"
+import { Qu_mintTickets } from "../../../queries/mint-ticket"
+import style from "./GenerativeDisplay.module.scss"
+
+interface ButtonExploreParamsProps {
+  token: GenerativeToken
+}
+
+const _ButtonExploreParams = ({ token }: ButtonExploreParamsProps) => {
+  const { user } = useContext(UserContext)
+  const { data } = useQuery(Qu_mintTickets, {
+    variables: {
+      take: 1,
+      skip: 0,
+      filters: {
+        token_eq: token.id,
+        owner_eq: user?.id,
+        underAuction_eq: false,
+      },
+    },
+    skip: !user,
+  })
+  const hasAtLeastOneTicket = user && data?.mintTickets.length > 0
+  return (
+    <Link href={`${getGenerativeTokenUrl(token)}/explore-params`} passHref>
+      <Button
+        isLink={true}
+        size="regular"
+        color={hasAtLeastOneTicket ? "secondary" : "black"}
+        iconSide="right"
+        className={style.button}
+      >
+        {hasAtLeastOneTicket ? (
+          <>
+            use ticket
+            <i className="fa-sharp fa-solid fa-ticket" aria-hidden />
+          </>
+        ) : (
+          <>
+            explore params{" "}
+            <i aria-hidden className="fa-sharp fa-regular fa-slider" />
+          </>
+        )}
+      </Button>
+    </Link>
+  )
+}
+
+export const ButtonExploreParams = memo(_ButtonExploreParams)

src/containers/Generative/Display/GenerativeDisplay.tsx

@@ -28,6 +28,7 @@ import { ListReserves } from "../../../components/List/ListReserves"
 import { GenTokArticleMentions } from "./GenTokArticleMentions"
 import { Clamp } from "../../../components/Clamp/Clamp"
 import { useCallback, useState } from "react"
+import { ButtonExploreParams } from "./ButtonExploreParams"
 
 /**
  * This is the Core component resposible for the display logic of a Generative
@@ -89,16 +90,21 @@ export function GenerativeDisplay({ token, offlineMode = false }: Props) {
           <Spacing size="x-large" sm="regular" />
 
           <MintController token={token} forceDisabled={offlineMode}>
-            <Link href={getGenerativeTokenMarketplaceUrl(token)} passHref>
-              <Button
-                isLink={true}
-                size="regular"
-                disabled={offlineMode}
-                className={style.button}
-              >
-                open marketplace
-              </Button>
-            </Link>
+            <>
+              {token.inputBytesSize > 0 && (
+                <ButtonExploreParams token={token} />
+              )}
+              <Link href={getGenerativeTokenMarketplaceUrl(token)} passHref>
+                <Button
+                  isLink={true}
+                  size="regular"
+                  disabled={offlineMode}
+                  className={style.button}
+                >
+                  open marketplace
+                </Button>
+              </Link>
+            </>
           </MintController>
 
           <Spacing size="4x-large" sm="x-large" />

src/containers/MintWithTicket/MintWithTicketPage.tsx

@@ -43,21 +43,26 @@ import { ParamConfigurationList } from "./ParamConfigurationList"
 import { PanelSubmitMode } from "./Panel/PanelControls"
 import { format } from "date-fns"
 import { truncateEnd } from "utils/strings"
+import { MintTicket } from "../../types/entities/MintTicket"
 
-export type TOnMintHandler = (ticketId: number | number[] | null) => void
+export type TOnMintHandler = (
+  ticket: MintTicket | MintTicket[] | null,
+  claimTicket?: boolean
+) => void
 
 interface Props {
   token: GenerativeToken
-  ticketId?: number
+  ticket?: MintTicket
   mode?: PanelSubmitMode
 }
-export function MintWithTicketPageRoot({ token, ticketId, mode }: Props) {
+export function MintWithTicketPageRoot({ token, ticket, mode }: Props) {
   const { showTicketPreMintWarning } = useSettingsContext()
   const [showLoadConfigModal, setShowLoadConfigModal] = useState(false)
   const [showPreMintWarningView, setShowPreMintWarningView] = useState(false)
-  const [selectedTicketId, setSelectedTicketId] = useState<
-    number | number[] | null
-  >(null)
+  const [selectedTicket, setSelectedTicket] = useState<{
+    ticket: MintTicket | MintTicket[]
+    claimTicket?: boolean
+  } | null>(null)
   const panelParamsRef = useRef<PanelParamsRef>(null)
   const historyContext = useContext(ParamsHistoryContext)
   const artworkIframeRef = useRef<ArtworkIframeRef>(null)
@@ -78,7 +83,7 @@ export function MintWithTicketPageRoot({ token, ticketId, mode }: Props) {
 
   const handleClosePreMintView = useCallback(() => {
     setShowPreMintWarningView(false)
-    setSelectedTicketId(null)
+    setSelectedTicket(null)
   }, [])
 
   const { data, setData, hash, setHash, inputBytes } = useFxParams(params)
@@ -149,11 +154,12 @@ export function MintWithTicketPageRoot({ token, ticketId, mode }: Props) {
 
   // call contract v3 mint with ticket
   const handleMint: TOnMintHandler = useCallback(
-    (_ticketId) => {
+    (_ticket, claimTicket) => {
       if (inputBytes) {
         call({
           token: token,
-          ticketId: _ticketId,
+          ticket: _ticket,
+          claimTicket,
           inputBytes: inputBytes,
         })
       }
@@ -162,22 +168,21 @@ export function MintWithTicketPageRoot({ token, ticketId, mode }: Props) {
   )
 
   const handleClickSubmit: TOnMintHandler = useCallback(
-    (_ticketId) => {
-      const ticketIdToMint =
-        mode === "with-ticket" && ticketId ? ticketId : _ticketId
+    (_ticket, claimTicket) => {
+      const ticketToMint = mode === "with-ticket" && ticket ? ticket : _ticket
       if (showTicketPreMintWarning) {
         setShowPreMintWarningView(true)
-        setSelectedTicketId(ticketIdToMint)
+        setSelectedTicket(ticketToMint && { ticket: ticketToMint, claimTicket })
       } else {
-        handleMint(ticketIdToMint)
+        handleMint(ticketToMint, claimTicket)
       }
     },
-    [handleMint, mode, showTicketPreMintWarning, ticketId]
+    [handleMint, mode, showTicketPreMintWarning, ticket]
   )
 
   const handleValidatePreMint = useCallback(() => {
-    handleMint(selectedTicketId)
-  }, [handleMint, selectedTicketId])
+    handleMint(selectedTicket?.ticket || null, selectedTicket?.claimTicket)
+  }, [handleMint, selectedTicket])
 
   const handleSaveConfiguration = () => {
     if (paramConfigExists) return

src/containers/MintWithTicket/Panel/ButtonClaimAndMint.tsx

@@ -0,0 +1,75 @@
+import React, { memo, useCallback, useContext, useMemo } from "react"
+import { useQuery } from "@apollo/client"
+import { Qu_genTokenClaimableMintTickets } from "../../../queries/generative-token"
+import { BaseButton } from "../../../components/FxParams/BaseInput"
+import style from "./PanelControls.module.scss"
+import { GenerativeToken } from "../../../types/entities/GenerativeToken"
+import useNow from "../../../hooks/useNow"
+import { MintTicket } from "../../../types/entities/MintTicket"
+import { getMintTicketDAPrice } from "../../../utils/mint-ticket"
+import { DisplayTezos } from "../../../components/Display/DisplayTezos"
+import { displayMutez } from "../../../utils/units"
+import { UserContext } from "../../UserProvider"
+
+type GenerativeTokenWithDaMintTickets = GenerativeToken & {
+  daMintTickets: MintTicket[]
+}
+interface ClaimAndMintProps {
+  token: GenerativeToken
+  onClick: (ticket: MintTicket) => void
+}
+
+const _ButtonClaimAndMint = ({ token, onClick }: ClaimAndMintProps) => {
+  const { user } = useContext(UserContext)
+  const now = useNow(15000)
+  const { data } = useQuery<{
+    generativeToken: GenerativeTokenWithDaMintTickets
+  }>(Qu_genTokenClaimableMintTickets, {
+    variables: {
+      id: token.id,
+      ownerId: user?.id || "nobody",
+    },
+  })
+  const cheapestTicket = useMemo<MintTicket | null>(() => {
+    if (!data?.generativeToken) return null
+    const [cheapestDaTicket] = data.generativeToken.daMintTickets
+      .map((ticket) => {
+        return {
+          ...ticket,
+          daPrice: getMintTicketDAPrice(
+            now,
+            new Date(ticket.taxationPaidUntil),
+            ticket.price
+          ),
+        }
+      })
+      .sort((a, b) => (a.daPrice > b.daPrice ? 1 : -1))
+    const [cheapestClaimableTicket] = data.generativeToken.mintTickets
+    if (cheapestDaTicket && cheapestClaimableTicket) {
+      return cheapestDaTicket.daPrice < cheapestClaimableTicket.price
+        ? cheapestDaTicket
+        : cheapestClaimableTicket
+    }
+    return cheapestDaTicket || cheapestClaimableTicket || null
+  }, [data, now])
+  const handleClickClaimAndMint = useCallback(() => {
+    if (cheapestTicket) {
+      onClick(cheapestTicket)
+    }
+  }, [cheapestTicket, onClick])
+  const cheapestTicketPrice =
+    cheapestTicket && (cheapestTicket.daPrice || cheapestTicket.price)
+  return cheapestTicketPrice ? (
+    <BaseButton
+      color="main"
+      onClick={handleClickClaimAndMint}
+      className={style.submitButton}
+      title={`claim & mint with ${displayMutez(cheapestTicketPrice)} tezos`}
+    >
+      claim & mint{" "}
+      <DisplayTezos mutez={cheapestTicketPrice} formatBig={false} />
+    </BaseButton>
+  ) : null
+}
+
+export const ButtonClaimAndMint = memo(_ButtonClaimAndMint)

src/containers/MintWithTicket/Panel/PanelControls.module.scss

@@ -9,8 +9,11 @@
 .buttonsWrapper {
   flex-grow: 1;
   display: flex;
+  align-items: center;
   gap: var(--fxl-spacing-sm);
   .submitButton {
+    min-height: 30px;
+    height: auto;
     flex-grow: 1;
   }
 }
@@ -34,4 +37,4 @@
   & > * {
     flex: 1 1 0;
   }
-}
+}