Develop

next.config.js

@@ -44,14 +44,19 @@ const nextConfig = {
     return [
       {
         source: '/trustless-computers',
-        destination: '/blockchains',
+        destination: '/blockchains/computers',
         permanent: false,
       },
       {
-        source: '/blockchains/dashboard',
+        source: '/bvm-website-sats',
         destination: '/blockchains/computers',
         permanent: false,
       },
+      {
+        source: '/blockchains/computers',
+        destination: '/blockchains',
+        permanent: false,
+      },
     ];
   },
 

src/app/blockchains/page.tsx

@@ -3,15 +3,26 @@
 import { isProduction } from '@/config';
 import MainLayout from '@/layouts/MainLayout';
 import IframeTC from '@/modules/iframe-tc';
+import dynamic from 'next/dynamic';
 
-const pathUrl = '/trustless-computers-iframe/';
-// const IframeURLExtend = DOMAIN_URL + MAIN_PATH;
+const pathUrl = '/bvm-website-sats-iframe/computers';
 const IframeURLExtend =
-  'https://dev.newbitcoincity.com/trustless-computers-iframe/';
+  'http://localhost:6009/trustless-computers-iframe/dashboard';
+
+// const iframeDomain = isProduction
+//   ? 'http://localhost:6009'
+//   : 'http://localhost:6009';
 
 const iframeDomain = isProduction
-  ? 'https://newbitcoincity.com'
-  : 'https://dev.newbitcoincity.com';
+  ? 'https://bvm.network'
+  : 'https://dev.bvm.network';
+
+const IframeTCDynamic = dynamic(
+  () => import('@/modules/iframe-tc').then((m) => m.default),
+  {
+    ssr: false,
+  },
+);
 
 const TCPage = () => {
   return (
@@ -22,9 +33,7 @@ const TCPage = () => {
         bgColor: 'white',
       }}
     >
-      {typeof document !== 'undefined' ? (
-        <IframeTC iframeURL={`${iframeDomain}${pathUrl}`} />
-      ) : null}
+      <IframeTCDynamic iframeURL={`${iframeDomain}${pathUrl}`} />
     </MainLayout>
   );
 };

src/layouts/Header/menuConfig.ts

@@ -10,7 +10,7 @@ export interface NavItem {
 export const NAV_ITEMS: Array<NavItem> = [
   {
     label: 'Blockchains',
-    href: '/blockchains',
+    href: '/blockchains/computers',
     isNewWindow: false,
     isHide: false,
   },

src/modules/iframe-tc/index.tsx

@@ -1,14 +1,16 @@
 'use client';
 
 import useWindowSize from '@/hooks/useWindowSize';
+import { Flex, Spinner } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
 import s from './styles.module.scss';
-import { useEffect } from 'react';
 
 interface IProps {
   iframeURL: string;
 }
 
 const IframeTC = (props: IProps) => {
+  const [iframeLoading, setIframeLoading] = useState(true);
   const { heightWidth } = useWindowSize();
   const elmHeader = document?.getElementById('header');
 
@@ -20,11 +22,26 @@ const IframeTC = (props: IProps) => {
         elmHeader.click();
       }
     }
-    window.addEventListener('blur', blur);
+    setIframeLoading(false);
     return () => window.removeEventListener('blur', blur);
   }, [document]);
 
-  if (!document) return <></>;
+  if (!document) {
+    return <></>;
+  }
+  if (iframeLoading) {
+    return (
+      <Flex
+        flex={1}
+        minHeight={'100%'}
+        justify={'center'}
+        align={'center'}
+        bgColor={'white'}
+      >
+        <Spinner color={'black'}></Spinner>
+      </Flex>
+    );
+  }
   return (
     <div
       className={s.container}
@@ -39,6 +56,10 @@ const IframeTC = (props: IProps) => {
         src={props.iframeURL}
         width="100%"
         style={{ border: 'none' }}
+        onLoadedData={() => {}}
+        onLoad={() => {
+          setIframeLoading(false);
+        }}
       />
     </div>
   );