merge sepolia into mainnet

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scroll.io",
-  "version": "5.0.78",
+  "version": "5.0.79",
   "private": false,
   "license": "MIT",
   "scripts": {

src/constants/nft.ts

@@ -17,6 +17,8 @@ export const EndDate = dayjs("2023-12-09T23:00:00Z").subtract(1, "ms")
 export const MintableDate = dayjs("2023-12-14T23:00:00Z")
 // 1702594800
 
+export const MintableEndDate = dayjs("2024-03-29T23:59:59Z")
+
 export const ContractReleaseDate = dayjs("2023-12-14T11:30:42Z")
 
 export const NFT_RARITY_MAP = {

src/pages/developer-nft/mint/home/ReadyToMint.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react"
+import Countdown, { zeroPad } from "react-countdown"
 import ReactGA from "react-ga4"
 
 import { Box, Stack, Typography } from "@mui/material"
@@ -10,7 +11,7 @@ import Button from "@/components/Button"
 import Link from "@/components/Link"
 import RequestWarning from "@/components/RequestWarning"
 import { ANNOUNCING_SCROLL_ORIGINS_NFT, ContractReleaseDate, DESIGNING_SCROLL_ORIGINS } from "@/constants"
-import { CHAIN_ID, L2_NAME, SCROLL_ORIGINS_NFT } from "@/constants"
+import { CHAIN_ID, L2_NAME, MintableEndDate, SCROLL_ORIGINS_NFT } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useCheckViewport from "@/hooks/useCheckViewport"
 import useNFTStore from "@/stores/nftStore"
@@ -65,8 +66,15 @@ const MintHome = props => {
       })
   }
 
-  const renderAction = () => {
+  const renderAction = (end = false) => {
     if (chainId === CHAIN_ID.L2) {
+      if (end) {
+        return (
+          <Button color="primary" width={isMobile ? "23rem" : "28.2rem"} gloomy>
+            Mint ended
+          </Button>
+        )
+      }
       return (
         <Button color="primary" loading={loading || isMinting} width={isMobile ? "23rem" : "28.2rem"} onClick={handleCheckEligibility}>
           {isMinting ? "Minting" : loading ? "Checking" : "Mint now"}
@@ -94,6 +102,30 @@ const MintHome = props => {
     setErrorMessage("")
   }
 
+  const renderCountDown = ({ hours, days, minutes, seconds, completed }) => {
+    return (
+      <>
+        <Typography sx={{ fontSize: "2.4rem", lineHeight: "3.5rem", fontWeight: 500 }}>
+          {completed ? "" : ` Mint ends in ${zeroPad(days)}:${zeroPad(hours)}:${zeroPad(minutes)}:${zeroPad(seconds)}`}
+        </Typography>
+        <Box
+          sx={{
+            height: "8rem",
+            marginTop: "0.8rem !important",
+          }}
+        >
+          {!isEligible && <>{renderAction(completed)}</>}
+          {isEligible === -1 && (
+            <Alert severity="error" sx={{ width: ["100%", "42.8rem"] }}>
+              The wallet address is not eligible. Please reach out to Scroll Discord, ‘scroll-origins-support,’ if you have any questions about{" "}
+              {SCROLL_ORIGINS_NFT}.
+            </Alert>
+          )}
+        </Box>
+      </>
+    )
+  }
+
   return (
     <Box
       sx={{
@@ -134,27 +166,11 @@ const MintHome = props => {
             program to celebrate alongside early developers building on Scroll within 60 days of Genesis Block (Before December 9, 2023 10:59PM GMT).
           </Typography>
         </Box>
-
         <Stack direction="row" spacing={isMobile ? "2.4rem" : "4.8rem"}>
           <Statistic label="Total NFTs minted">{typeof total === "bigint" ? total.toString() : "-"}</Statistic>
           <Statistic label="NFTs released on">{formatDate(ContractReleaseDate)}</Statistic>
         </Stack>
-        <Box
-          sx={{
-            height: "8rem",
-            "@media (max-width: 1200px) and (min-width: 600px)": {
-              marginTop: "4.8rem !important",
-            },
-          }}
-        >
-          {!isEligible && <>{renderAction()}</>}
-          {isEligible === -1 && (
-            <Alert severity="error" sx={{ width: ["100%", "42.8rem"] }}>
-              The wallet address is not eligible. Please reach out to Scroll Discord, ‘scroll-origins-support,’ if you have any questions about{" "}
-              {SCROLL_ORIGINS_NFT}.
-            </Alert>
-          )}
-        </Box>
+        <Countdown date={MintableEndDate} renderer={renderCountDown}></Countdown>
       </Stack>
       <MintFlowDialog open={isEligible === 1} minting={isMinting} onClose={handleCloseFlow}></MintFlowDialog>
       <RequestWarning open={!!errorMessage} onClose={handleCloseWarning}>