Add Hydrated and config nextjs router

TrustlessComputer · Jan 8, 2024 · 3076167 · 3076167
1 parent a01aade
commit 3076167
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 11 deletions.
diff --git a/next.config.js b/next.config.js
@@ -52,16 +52,6 @@ const nextConfig = {
         destination: '/blockchains/computers',
         permanent: false,
       },
-      // {
-      //   source: '/blockchains/computers',
-      //   destination: '/blockchains',
-      //   permanent: false,
-      // },
-      // {
-      //   source: '/blockchains/customize',
-      //   destination: '/blockchains/customize',
-      //   permanent: false,
-      // },
     ];
   },
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import { MetadataConfig, ViewportConfig } from '@/config';
 import chakraThemes, { ChakraFontsFace } from '@/themes/chakra-themes';
 import { HelveticaNeueFontConfig } from '@/themes/font-config';
 import { ChakraProvider } from '@chakra-ui/react';
+import Hydrated from '@/components/Hydrated';
 
 export const metadata: Metadata = MetadataConfig;
 export const viewport: Viewport = ViewportConfig;
@@ -20,7 +21,7 @@ export default function RootLayout({
       <body>
         <ChakraProvider theme={chakraThemes}>
           <ChakraFontsFace />
-          {children}
+          <Hydrated>{children}</Hydrated>
         </ChakraProvider>
       </body>
     </html>

diff --git a/src/components/Hydrated/index.tsx b/src/components/Hydrated/index.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import configs from '@/constants/l2ass.constant';
+import { useContext, useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export enum IframeEventName {
+  topup = 'topup',
+  create_gamefi_wallet = 'create_gamefi_wallet',
+  import_gamefi_wallet = 'import_gamefi_wallet',
+  hide_sidebar = 'hide_sidebar',
+  open_sidebar = 'open_sidebar',
+  trustless_computer_change_route = 'trustless-computer-change-route',
+}
+export interface IFrameEvent {
+  data: {
+    name: IframeEventName;
+  };
+}
+
+const Hydrated = ({ children }: { children?: any }) => {
+  const [hydration, setHydration] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setHydration(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (hydration && window) {
+      window.onmessage = function (event: IFrameEvent & any) {
+        try {
+          const eventData = JSON.parse(event.data);
+          console.log;
+          switch (eventData.name) {
+            case IframeEventName.trustless_computer_change_route: {
+              const subUrl = (eventData.url || '').split('/');
+              if (subUrl.length > 0) {
+                let lastSubUrl: string = subUrl[subUrl.length - 1];
+
+                // lastSubUrl = lastSubUrl.replaceAll('buy', 'customize');
+                // if (lastSubUrl.includes('trustless-computers-iframe')) {
+                //   window.history.replaceState({}, '', '/blockchains');
+                // } else {
+                //   window.history.replaceState(
+                //     {},
+                //     '',
+                //     '/blockchains/' + lastSubUrl,
+                //   );
+                // }
+
+                if (lastSubUrl === 'buy') {
+                  router.replace('/blockchains/customize');
+                } else {
+                }
+              }
+              break;
+            }
+            default:
+              break;
+          }
+        } catch (error) {}
+      };
+    }
+  }, [hydration]);
+
+  return hydration ? children : null;
+};
+
+export default Hydrated;
diff --git a/src/constants/l2ass.constant.ts b/src/constants/l2ass.constant.ts
@@ -0,0 +1,32 @@
+// import { CDN_URL_IMAGES } from '@/configs';
+
+import { isProduction } from '@/config';
+
+const MAIN_PATH = '/trustless-computers-iframe/';
+const APP_URL =
+  (isProduction
+    ? 'https://newbitcoincity.com'
+    : 'https://dev.newbitcoincity.com') + MAIN_PATH;
+
+const DASH_BOARD_URL = APP_URL + 'computers/';
+const TOKEN_URL = APP_URL + 'token/';
+const PRICE_URL = APP_URL + 'price/';
+const BUY_URL = APP_URL + 'buy/';
+
+// const META_DATA = {
+//   title: 'Trustless Computer',
+//   description: 'Launch your own Bitcoin L2 blockchain in one click.',
+//   image: `${CDN_URL_IMAGES}/trustless-computer-metadata-01.png`,
+// };
+
+const configs = {
+  APP_URL,
+  DASH_BOARD_URL,
+  TOKEN_URL,
+  PRICE_URL,
+  // META_DATA,
+  BUY_URL,
+  MAIN_PATH,
+};
+
+export default configs;