From 3076167e3fbd1108dcb67c1e258e34567563ec69 Mon Sep 17 00:00:00 2001 From: tonytc13579 Date: Mon, 8 Jan 2024 18:57:51 +0700 Subject: [PATCH] Add Hydrated and config nextjs router --- next.config.js | 10 ----- src/app/layout.tsx | 3 +- src/components/Hydrated/index.tsx | 72 +++++++++++++++++++++++++++++++ src/constants/l2ass.constant.ts | 32 ++++++++++++++ 4 files changed, 106 insertions(+), 11 deletions(-) create mode 100644 src/components/Hydrated/index.tsx create mode 100644 src/constants/l2ass.constant.ts diff --git a/next.config.js b/next.config.js index ae3d0ac39..d83167ff8 100644 --- 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 index 6786b243b..f8cdbe751 100644 --- 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({ - {children} + {children} diff --git a/src/components/Hydrated/index.tsx b/src/components/Hydrated/index.tsx new file mode 100644 index 000000000..abb849f95 --- /dev/null +++ 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 new file mode 100644 index 000000000..a687e92d2 --- /dev/null +++ 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;