From a8e3168342ec5c241f112c00f632f48abd71b4d1 Mon Sep 17 00:00:00 2001
From: Matt <90358481+xbtmatt@users.noreply.github.com>
Date: Thu, 7 Nov 2024 19:14:17 -0800
Subject: [PATCH] Render `/launch` as a static page

---
 src/typescript/frontend/src/app/launch/page.tsx   |  7 +++----
 .../ClientLaunchEmojicoinPage.tsx                 |  4 ++--
 .../launch-emojicoin/memoized-launch/index.tsx    | 11 +++--------
 .../frontend/src/hooks/use-is-user-geoblocked.ts  | 15 +++++++++++++++
 .../frontend/src/utils/server/geoblocked.ts       |  8 ++++++++
 5 files changed, 31 insertions(+), 14 deletions(-)
 create mode 100644 src/typescript/frontend/src/hooks/use-is-user-geoblocked.ts
 create mode 100644 src/typescript/frontend/src/utils/server/geoblocked.ts

diff --git a/src/typescript/frontend/src/app/launch/page.tsx b/src/typescript/frontend/src/app/launch/page.tsx
index fac208f2ca..49b74c15fc 100644
--- a/src/typescript/frontend/src/app/launch/page.tsx
+++ b/src/typescript/frontend/src/app/launch/page.tsx
@@ -1,15 +1,14 @@
 import ClientLaunchEmojicoinPage from "../../components/pages/launch-emojicoin/ClientLaunchEmojicoinPage";
-import { isUserGeoblocked } from "utils/geolocation";
-import { headers } from "next/headers";
 import { type Metadata } from "next";
 import { emoji } from "utils";
 
+export const dynamic = "force-static";
+
 export const metadata: Metadata = {
   title: "launch",
   description: `Launch your own emojicoins using emojicoin.fun ${emoji("party popper")}`,
 };
 
 export default async function LaunchEmojicoinPage() {
-  const geoblocked = await isUserGeoblocked(headers().get("x-real-ip"));
-  return <ClientLaunchEmojicoinPage geoblocked={geoblocked} />;
+  return <ClientLaunchEmojicoinPage />;
 }
diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx
index 84371040eb..8029ae9c6e 100644
--- a/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx
+++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx
@@ -32,7 +32,7 @@ const lastMarketRegistration = (
   return undefined;
 };
 
-const ClientLaunchEmojicoinPage: React.FC<{ geoblocked: boolean }> = ({ geoblocked }) => {
+const ClientLaunchEmojicoinPage = () => {
   const searchParams = useSearchParams();
   const emojiParams = searchParams.get("emojis");
   const setEmojis = useEmojiPicker((state) => state.setEmojis);
@@ -142,7 +142,7 @@ const ClientLaunchEmojicoinPage: React.FC<{ geoblocked: boolean }> = ({ geoblock
 
       <div className="flex justify-center items-center h-full px-6">
         <div className="relative flex flex-col w-full max-w-[414px]">
-          <MemoizedLaunchAnimation loading={isLoadingRegisteredMarket} geoblocked={geoblocked} />
+          <MemoizedLaunchAnimation loading={isLoadingRegisteredMarket} />
         </div>
       </div>
     </div>
diff --git a/src/typescript/frontend/src/components/pages/launch-emojicoin/memoized-launch/index.tsx b/src/typescript/frontend/src/components/pages/launch-emojicoin/memoized-launch/index.tsx
index 32bc5a4a27..852904cd2d 100644
--- a/src/typescript/frontend/src/components/pages/launch-emojicoin/memoized-launch/index.tsx
+++ b/src/typescript/frontend/src/components/pages/launch-emojicoin/memoized-launch/index.tsx
@@ -15,17 +15,12 @@ import { toCoinDecimalString } from "lib/utils/decimals";
 import { MARKET_REGISTRATION_DEPOSIT, ONE_APT_BIGINT } from "@sdk/const";
 import Info from "components/info";
 import { filterBigEmojis } from "components/pages/emoji-picker/EmojiPicker";
+import useIsUserGeoblocked from "@hooks/use-is-user-geoblocked";
 
 const labelClassName = "whitespace-nowrap body-sm md:body-lg text-light-gray uppercase font-forma";
 
-export const MemoizedLaunchAnimation = ({
-  loading,
-  geoblocked,
-}: {
-  loading: boolean;
-  geoblocked: boolean;
-}) => {
-  // Maybe it's this...? Maybe we need to memoize this value.
+export const MemoizedLaunchAnimation = ({ loading }: { loading: boolean }) => {
+  const geoblocked = useIsUserGeoblocked();
   const { t } = translationFunction();
   const emojis = useEmojiPicker((state) => state.emojis);
   const setIsLoadingRegisteredMarket = useEmojiPicker(
diff --git a/src/typescript/frontend/src/hooks/use-is-user-geoblocked.ts b/src/typescript/frontend/src/hooks/use-is-user-geoblocked.ts
new file mode 100644
index 0000000000..08573ff100
--- /dev/null
+++ b/src/typescript/frontend/src/hooks/use-is-user-geoblocked.ts
@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { isUserGeoblockedServerAction } from "utils/server/geoblocked";
+
+const useIsUserGeoblocked = () => {
+  const { data } = useQuery({
+    queryKey: ["geoblocked"],
+    queryFn: () => isUserGeoblockedServerAction(),
+    staleTime: Infinity,
+  });
+
+  // Assume the user is geoblocked if the response hasn't completed yet.
+  return data ?? true;
+};
+
+export default useIsUserGeoblocked;
diff --git a/src/typescript/frontend/src/utils/server/geoblocked.ts b/src/typescript/frontend/src/utils/server/geoblocked.ts
new file mode 100644
index 0000000000..f29ca09c42
--- /dev/null
+++ b/src/typescript/frontend/src/utils/server/geoblocked.ts
@@ -0,0 +1,8 @@
+"use server";
+
+import { headers } from "next/headers";
+import { isUserGeoblocked } from "utils/geolocation";
+
+export async function isUserGeoblockedServerAction() {
+  return await isUserGeoblocked(headers().get("x-real-ip"));
+}