Converter coming soon v1

apps/converter/src/app/layout.tsx

@@ -7,14 +7,14 @@ import {
   PageWrapper,
   PageBackroundImage,
   PageContainer,
-  MantleLogoIcon,
 } from "@mantle/ui";
-import CONST from "@mantle/constants";
 
 import Head from "@app/head";
 import Providers from "@app/providers";
 
+import { isComingSoon } from "@config/constants";
 import Nav from "@components/Nav";
+import Footer from "@components/Footer";
 
 import bridgeBG from "../../public/bridge-bg.png";
 
@@ -37,29 +37,14 @@ export default function RootLayout({
               <PageBackroundImage
                 imgSrc={bridgeBG}
                 altDesc="Bridge Background Image"
+                className={isComingSoon ? "blur-md" : ""}
               />
             }
-            header={<Nav className="mb-0 m-0" />}
+            header={<Nav className="mb-0 m-0" hideConnectBtn={isComingSoon} />}
             className="h-screen"
           >
             <PageContainer className="grow">{children}</PageContainer>
-            <div className="flex justify-center items-center py-8">
-              <div>
-                <a
-                  href={CONST.WEBSITE}
-                  rel="noreferrer noopener"
-                  target="_blank"
-                  className="inline-block"
-                >
-                  <div className="flex flex-row align-center gap-4">
-                    <MantleLogoIcon height={40} width={40} />
-                    <div className="flex items-center">
-                      Mantle {new Date().getFullYear()}&nbsp;&#169;
-                    </div>
-                  </div>
-                </a>
-              </div>
-            </div>
+            {!isComingSoon && <Footer />}
           </PageWrapper>
         </Providers>
       </body>

apps/converter/src/app/page.tsx

@@ -1,6 +1,11 @@
 // Page components
+import { isComingSoon } from "@config/constants";
 import Converter from "@components/converter/Convert";
+import ComingSoon from "@components/comingSoon";
 
 export default async function Page() {
+  if (isComingSoon) {
+    return <ComingSoon />;
+  }
   return <Converter />;
 }

apps/converter/src/components/Footer.tsx

@@ -0,0 +1,26 @@
+import { MantleLogoIcon } from "@mantle/ui";
+import CONST from "@mantle/constants";
+
+function Footer() {
+  return (
+    <div className="flex justify-center items-center py-8">
+      <div>
+        <a
+          href={CONST.WEBSITE}
+          rel="noreferrer noopener"
+          target="_blank"
+          className="inline-block"
+        >
+          <div className="flex flex-row align-center gap-4">
+            <MantleLogoIcon height={40} width={40} />
+            <div className="flex items-center">
+              Mantle {new Date().getFullYear()}&nbsp;&#169;
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default Footer;

apps/converter/src/components/Nav.tsx

@@ -4,14 +4,19 @@ import { Header } from "@mantle/ui/src/navigation/Header";
 import ConnectWallet from "@components/ConnectWallet";
 import { usePathname } from "next/navigation";
 
-function Nav({ className }: { className: string }) {
+type NavProps = {
+  className: string;
+  hideConnectBtn: boolean;
+};
+
+function Nav({ className, hideConnectBtn }: NavProps) {
   // use the given pathName to set active on navItem
   const pathName = usePathname();
 
   // these nav items will navigate internally
   const NAV_ITEMS = [
     {
-      name: "Converter",
+      name: "Migrate",
       href: "/",
       internal: true,
       active: pathName === "/",
@@ -29,7 +34,7 @@ function Nav({ className }: { className: string }) {
   return (
     <Header
       navLite
-      walletConnect={<ConnectWallet />}
+      walletConnect={hideConnectBtn ? null : <ConnectWallet />}
       navItems={NAV_ITEMS}
       className={className}
     />

apps/converter/src/components/comingSoon/index.tsx

@@ -0,0 +1,17 @@
+import { Typography } from "@mantle/ui";
+
+export default function ComingSoon() {
+  return (
+    <>
+      <div className="md:grow md:mt-0 mt-36 flex justify-center items-center">
+        <Typography className="text-center md:text-[80px] text-[42px] font-medium">
+          Migrator
+        </Typography>
+      </div>
+
+      <Typography className="md:my-40 my-8 text-center md:text-[42px] text-[28px] font-medium">
+        Coming soon
+      </Typography>
+    </>
+  );
+}

apps/converter/src/config/constants.ts

@@ -297,3 +297,6 @@ export enum ErrorMessages {
   INSUFFICIENT_GAS = "You do not have enough gas to cover the transaction cost.",
   HALTED = "Conversion halted. Contract is under maintenance. Please check later.",
 }
+
+export const isComingSoon =
+  process.env.NEXT_PUBLIC_IS_COMING_SOON === "true" || false;

turbo.json

@@ -57,7 +57,8 @@
         "NEXT_PUBLIC_SITE_URL",
         "NEXT_PUBLIC_VERCEL_URL",
         "NEXT_PUBLIC_L1_CHAIN_ID",
-        "NEXT_PUBLIC_L2_CHAIN_ID"
+        "NEXT_PUBLIC_L2_CHAIN_ID",
+        "NEXT_PUBLIC_IS_COMING_SOON"
       ],
       "cache": false
     },