Update market page with new grace period dynamics

src/typescript/frontend/src/app/test/route.ts

@@ -10,6 +10,6 @@ export async function GET() {
     const version = await aptos.getLedgerInfo().then((res) => res.ledger_version);
     return new NextResponse(version.toString());
   } catch {
-    return new NextResponse("", {status: 500});
+    return new NextResponse("", { status: 500 });
   }
 }

src/typescript/frontend/src/components/misc/prettified-hex/index.tsx

@@ -15,7 +15,7 @@ export const PrettyHex = ({
     text: prettifyHex(hex),
     overdrive: false,
     overflow: true,
-    speed: typeof scramble === "undefined" ? 0 : (scrambleProps.speed ?? 0.6),
+    speed: typeof scramble === "undefined" ? 0 : scrambleProps.speed ?? 0.6,
     playOnMount: true,
     ...scrambleProps,
   });

src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/LiquidityButton.tsx

@@ -7,13 +7,58 @@ import { isInBondingCurve } from "utils/bonding-curve";
 import { AnimatedProgressBar } from "./AnimatedProgressBar";
 import Link from "next/link";
 import { ROUTES } from "router/routes";
+import { useGracePeriod } from "lib/hooks/queries/use-grace-period";
+import { Text } from "components/text";
+import { useEffect, useState } from "react";
+
+const timeLeft = (seconds: number) => {
+  const remainder = seconds % 60;
+  const minutes = Math.floor(seconds / 60);
+  if (remainder === 0 && minutes === 1) {
+    return `${minutes} minute left`;
+  }
+  if (remainder === 0) {
+    return `${minutes} minutes left`;
+  }
+  if (minutes === 0 && remainder === 1) {
+    return `${remainder} second left`;
+  }
+  if (minutes === 0) {
+    return `${remainder} seconds left`;
+  }
+  if (remainder === 1 && minutes == 1) {
+    return `${minutes} minute and ${remainder} second left`;
+  }
+  if (minutes === 1) {
+    return `${minutes} minute and ${remainder} seconds left`;
+  }
+  if (remainder === 1) {
+    return `${minutes} minutes and ${remainder} second left`;
+  }
+  return `${minutes} minutes and ${remainder} seconds left`;
+};
+
+const getNow = () => Math.floor(new Date().getTime() / 1000);
 
 export const LiquidityButton = (props: GridProps) => {
   const { t } = translationFunction();
+  const [now, setNow] = useState(getNow());
+  const { isLoading, data } = useGracePeriod(props.data.symbol);
+  data;
+
+  const isInGracePeriod = isLoading ? false : !data!.gracePeriodOver;
+  const registrationTime = Number((data?.flag?.marketRegistrationTime ?? 0n) / 1000000n);
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setNow(getNow());
+    }, 1000);
+    return () => clearInterval(id);
+  });
 
   return (
     <>
-      {!isInBondingCurve(props.data) ? (
+      {!isInBondingCurve(props.data) && !isInGracePeriod ? (
         <StyledContentHeader>
           <Flex width="100%" justifyContent="center">
             <Link
@@ -26,10 +71,16 @@ export const LiquidityButton = (props: GridProps) => {
             </Link>
           </Flex>
         </StyledContentHeader>
-      ) : (
+      ) : !isInGracePeriod ? (
         <StyledContentHeader className="!p-0">
           <AnimatedProgressBar geoblocked={props.geoblocked} data={props.data} />
         </StyledContentHeader>
+      ) : (
+        <StyledContentHeader>
+          <Flex width="100%" justifyContent="center">
+            <Text>Grace period ({timeLeft(now - registrationTime)} left)</Text>
+          </Flex>
+        </StyledContentHeader>
       )}
     </>
   );

src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/SwapButton.tsx

@@ -12,6 +12,8 @@ import { useAnimationControls } from "framer-motion";
 import { RewardsAnimation } from "./RewardsAnimation";
 import { toast } from "react-toastify";
 import { CongratulationsToast } from "./CongratulationsToast";
+import { useGracePeriod } from "lib/hooks/queries/use-grace-period";
+import Popup from "components/popup";
 
 export const SwapButton = ({
   inputAmount,
@@ -20,17 +22,26 @@ export const SwapButton = ({
   setSubmit,
   disabled,
   geoblocked,
+  symbol,
 }: {
   inputAmount: bigint | number | string;
   isSell: boolean;
   marketAddress: AccountAddressString;
   setSubmit: Dispatch<SetStateAction<(() => Promise<void>) | null>>;
   disabled?: boolean;
   geoblocked: boolean;
+  symbol: string;
 }) => {
   const { t } = translationFunction();
   const { aptos, account, submit } = useAptos();
   const controls = useAnimationControls();
+  const { isLoading, data } = useGracePeriod(symbol);
+
+  const isInGracePeriod = isLoading ? false : !data!.gracePeriodOver;
+  // If data not loaded yet, use user address as registrant address in order to not prevent the user from trying to trade.
+  const registrantAddress = data?.flag?.marketRegistrant ?? account?.address;
+
+  const canTrade = !isInGracePeriod || registrantAddress === account?.address;
 
   const handleClick = useCallback(async () => {
     if (!account) {
@@ -70,9 +81,17 @@ export const SwapButton = ({
   return (
     <>
       <ButtonWithConnectWalletFallback geoblocked={geoblocked}>
-        <Button disabled={disabled} onClick={handleClick} scale="lg">
-          {t("Swap")}
-        </Button>
+        {canTrade ? (
+          <Button disabled={disabled} onClick={handleClick} scale="lg">
+            {t("Swap")}
+          </Button>
+        ) : (
+          <Popup content="This market is in its grace period. During the grace period of a market, only the market creator can trade. The grace period ends 5 minutes after the market registration, of atfter the first trade, whichever comes first.">
+            <Button disabled={true} onClick={handleClick} scale="lg">
+              {t("Swap")}
+            </Button>
+          </Popup>
+        )}
       </ButtonWithConnectWalletFallback>
       <RewardsAnimation controls={controls} />
     </>

src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx

@@ -188,9 +188,7 @@ const Liquidity: React.FC<LiquidityProps> = ({ market, geoblocked }) => {
           type={direction === "add" ? "number" : "text"}
           disabled={direction === "remove"}
           value={
-            direction === "add"
-              ? liquidity
-              : (fmtCoin(removeLiquidityResult?.quote_amount) ?? "...")
+            direction === "add" ? liquidity : fmtCoin(removeLiquidityResult?.quote_amount) ?? "..."
           }
         ></input>
       </Column>
@@ -216,8 +214,8 @@ const Liquidity: React.FC<LiquidityProps> = ({ market, geoblocked }) => {
           }}
           value={
             direction === "add"
-              ? (fmtCoin(provideLiquidityResult?.base_amount) ?? "...")
-              : (fmtCoin(removeLiquidityResult?.base_amount) ?? "...")
+              ? fmtCoin(provideLiquidityResult?.base_amount) ?? "..."
+              : fmtCoin(removeLiquidityResult?.base_amount) ?? "..."
           }
           type="text"
           disabled
@@ -244,7 +242,7 @@ const Liquidity: React.FC<LiquidityProps> = ({ market, geoblocked }) => {
             color: direction === "add" ? theme.colors.lightGray + "99" : "white",
           }}
           value={
-            direction === "add" ? (fmtCoin(provideLiquidityResult?.lp_coin_amount) ?? "...") : lp
+            direction === "add" ? fmtCoin(provideLiquidityResult?.lp_coin_amount) ?? "..." : lp
           }
           type={direction === "add" ? "text" : "number"}
           onChange={(e) => setLP(e.target.value === "" ? "" : Number(e.target.value))}
@@ -354,7 +352,7 @@ const Liquidity: React.FC<LiquidityProps> = ({ market, geoblocked }) => {
             <AptosInputLabel />
 
             <Text textScale={{ _: "bodySmall", tablet: "bodyLarge" }} textTransform="uppercase">
-              {market ? (fmtCoin(market.cpammRealReservesQuote) ?? loadingComponent) : "-"}
+              {market ? fmtCoin(market.cpammRealReservesQuote) ?? loadingComponent : "-"}
             </Text>
           </Flex>
 
@@ -366,7 +364,7 @@ const Liquidity: React.FC<LiquidityProps> = ({ market, geoblocked }) => {
             <EmojiInputLabel emoji={market ? market.symbol : "-"} />
 
             <Text textScale={{ _: "bodySmall", tablet: "bodyLarge" }} textTransform="uppercase">
-              {market ? (fmtCoin(market.cpammRealReservesBase) ?? loadingComponent) : "-"}
+              {market ? fmtCoin(market.cpammRealReservesBase) ?? loadingComponent : "-"}
             </Text>
           </Flex>
         </StyledAddLiquidityWrapper>

src/typescript/frontend/src/components/pages/verify/VerifyPage.tsx

@@ -64,58 +64,60 @@ export const ClientVerifyPage: React.FC<{ geoblocked: boolean }> = ({ geoblocked
 
   return (
     <>
-      <div className="absolute top-0 left-0 w-[100dvw] h-[100dvh] bg-black z-50 overflow-hidden grid"
+      <div
+        className="absolute top-0 left-0 w-[100dvw] h-[100dvh] bg-black z-50 overflow-hidden grid"
         style={{
-          gridTemplateRows: "19fr 1fr"
-        }}>
-          <div className="flex items-center justify-center w-full h-full">
-            <div className="flex flex-col justify-begin uppercase text-ec-blue gap-4 text-2xl">
-              {connected && verified === false && (
-                <motion.div
-                  onMouseEnter={replayBack}
-                  animate={{ x: 0, y: -60 }}
-                  initial={{ x: 2000, y: -60 }}
-                  className="absolute flex flex-row px-2.5 hover:cursor-pointer min-w-[12ch] top-[50%]"
-                  onClick={() => {
-                    setVerified(null);
-                    disconnect();
-                  }}
-                  transition={{
-                    type: "just",
-                    duration: 0.3,
-                  }}
-                >
-                  <span>{"<<"}&nbsp;</span>
-                  <span ref={backRef}>Back</span>
-                </motion.div>
-              )}
-              <ButtonWithConnectWalletFallback geoblocked={geoblocked} arrow={false}>
-                <div className="flex flex-row uppercase">
-                  <span className="px-2.5">{"{"}</span>
-                  <a
-                    ref={ref}
-                    href={process.env.NEXT_PUBLIC_GALXE_CAMPAIGN_REDIRECT}
-                    onMouseEnter={replay}
-                    {...EXTERNAL_LINK_PROPS}
-                  />
-                  <span className="px-2.5">{"}"}</span>
-                </div>
-              </ButtonWithConnectWalletFallback>
-            </div>
-          </div>
-          <Flex justifyContent="center" className="w-[100dvw]">
-            <Link href={LINKS?.tos ?? ROUTES.notFound}>
-              <Text
-                textScale="display6"
-                $fontWeight="bold"
-                fontSize={{ _: "8px", tablet: "15px" }}
-                textTransform="uppercase"
-                py={{ _: "16px", tablet: "24px" }}
+          gridTemplateRows: "19fr 1fr",
+        }}
+      >
+        <div className="flex items-center justify-center w-full h-full">
+          <div className="flex flex-col justify-begin uppercase text-ec-blue gap-4 text-2xl">
+            {connected && verified === false && (
+              <motion.div
+                onMouseEnter={replayBack}
+                animate={{ x: 0, y: -60 }}
+                initial={{ x: 2000, y: -60 }}
+                className="absolute flex flex-row px-2.5 hover:cursor-pointer min-w-[12ch] top-[50%]"
+                onClick={() => {
+                  setVerified(null);
+                  disconnect();
+                }}
+                transition={{
+                  type: "just",
+                  duration: 0.3,
+                }}
               >
-                TERMS OF USE
-              </Text>
-            </Link>
-          </Flex>
+                <span>{"<<"}&nbsp;</span>
+                <span ref={backRef}>Back</span>
+              </motion.div>
+            )}
+            <ButtonWithConnectWalletFallback geoblocked={geoblocked} arrow={false}>
+              <div className="flex flex-row uppercase">
+                <span className="px-2.5">{"{"}</span>
+                <a
+                  ref={ref}
+                  href={process.env.NEXT_PUBLIC_GALXE_CAMPAIGN_REDIRECT}
+                  onMouseEnter={replay}
+                  {...EXTERNAL_LINK_PROPS}
+                />
+                <span className="px-2.5">{"}"}</span>
+              </div>
+            </ButtonWithConnectWalletFallback>
+          </div>
+        </div>
+        <Flex justifyContent="center" className="w-[100dvw]">
+          <Link href={LINKS?.tos ?? ROUTES.notFound}>
+            <Text
+              textScale="display6"
+              $fontWeight="bold"
+              fontSize={{ _: "8px", tablet: "15px" }}
+              textTransform="uppercase"
+              py={{ _: "16px", tablet: "24px" }}
+            >
+              TERMS OF USE
+            </Text>
+          </Link>
+        </Flex>
       </div>
     </>
   );

src/typescript/frontend/src/lib/hooks/queries/use-grace-period.ts

@@ -0,0 +1,18 @@
+import { getRegistrationGracePeriodFlag } from "@sdk/markets";
+import { useQuery } from "@tanstack/react-query";
+import { useAptos } from "context/wallet-context/AptosContextProvider";
+
+export const useGracePeriod = (symbol: string) => {
+  const { aptos } = useAptos();
+
+  return useQuery({
+    queryKey: ["grace-period", symbol],
+    queryFn: () => {
+      return getRegistrationGracePeriodFlag({
+        aptos,
+        symbol,
+      });
+    },
+    staleTime: 2000,
+  });
+};

src/typescript/frontend/src/lib/queries/sorting/market-data.ts

@@ -77,9 +77,7 @@ const getMyPools = async ({
 };
 
 export const fetchFeaturedMarket = async () => {
-  const keys = [
-    "featured-market",
-  ].map(String);
+  const keys = ["featured-market"].map(String);
 
   const res = await cached(
     () =>