Address issues

src/typescript/frontend/src/components/pages/emojicoin/ClientEmojicoinPage.tsx

@@ -12,6 +12,7 @@ import MainInfo from "./components/main-info/MainInfo";
 import { useReliableSubscribe } from "@hooks/use-reliable-subscribe";
 import { type BrokerEvent } from "@/broker/types";
 import { marketToLatestBars } from "@/store/event/candlestick-bars";
+import { useQueryClient } from "@tanstack/react-query";
 
 const EVENT_TYPES: Array<BrokerEvent> = ["Chat", "PeriodicState", "Swap"];
 
@@ -35,6 +36,12 @@ const ClientEmojicoinPage = (props: EmojicoinProps) => {
 
   useReliableSubscribe({ eventTypes: EVENT_TYPES });
 
+  const queryClient = useQueryClient();
+  const swaps = useEventStore((s) => s.getMarket(props.data.symbolEmojis)?.swapEvents ?? []);
+  useEffect(() => {
+    queryClient.invalidateQueries({queryKey: ["grace-period", props.data.symbol]});
+  }, [swaps]);
+
   return (
     <Box pt="85px">
       <TextCarousel />

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

@@ -11,8 +11,10 @@ import { useGracePeriod } from "lib/hooks/queries/use-grace-period";
 import { Text } from "components/text";
 import { useEffect, useState } from "react";
 import { useMatchBreakpoints } from "@hooks/index";
+import { useQueryClient } from "@tanstack/react-query";
 
 const timeLeft = (seconds: number) => {
+  if (seconds <= 0) return "0 s";
   const remainder = seconds % 60;
   const minutes = Math.floor(seconds / 60);
   if (remainder === 0) {
@@ -30,15 +32,19 @@ export const LiquidityButton = (props: GridProps) => {
   const { isDesktop } = useMatchBreakpoints();
   const { t } = translationFunction();
   const [now, setNow] = useState(getNow());
+  const queryClient = useQueryClient();
   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());
+      const n = getNow();
+      setNow(n);
+      if (60 * 5 - (n - registrationTime) < 0) {
+        queryClient.invalidateQueries({queryKey: ["grace-period", props.data.symbol]});
+      }
     }, 200);
     return () => clearInterval(id);
   });

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

@@ -99,10 +99,12 @@ export const SwapButton = ({
             <RewardsAnimation controls={controls} />
           </>
         ) : (
-          <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 className="max-w-[300px]" 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.">
+            <div>
+              <Button disabled={true} onClick={handleClick} scale="lg">
+                {t("Swap")}
+              </Button>
+            </div>
           </Popup>
         )}
       </ButtonWithConnectWalletFallback>

src/typescript/frontend/src/context/providers.tsx

@@ -31,6 +31,8 @@ import { isMobile, isTablet } from "react-device-detect";
 
 enableMapSet();
 
+const queryClient = new QueryClient();
+
 const ThemedApp: React.FC<{ children: React.ReactNode; geoblocked: boolean }> = ({
   children,
   geoblocked,
@@ -54,8 +56,6 @@ const ThemedApp: React.FC<{ children: React.ReactNode; geoblocked: boolean }> =
   // It's possible we can also pass a promise down from the server components
   // to the clients and then add those to the store as they stream in.
 
-  const queryClient = new QueryClient();
-
   return (
     <ThemeProvider theme={theme}>
       <QueryClientProvider client={queryClient}>