diff --git a/next.config.js b/next.config.js index b469c1ed5..9c4f4056d 100644 --- a/next.config.js +++ b/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, + }, ]; }, diff --git a/src/app/blockchains/page.tsx b/src/app/blockchains/page.tsx index 5331a2960..14184b665 100644 --- a/src/app/blockchains/page.tsx +++ b/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' ? ( - - ) : null} + ); }; diff --git a/src/app/tc/page.tsx b/src/app/tc/page.tsx deleted file mode 100644 index 5331a2960..000000000 --- a/src/app/tc/page.tsx +++ /dev/null @@ -1,32 +0,0 @@ -'use client'; - -import { isProduction } from '@/config'; -import MainLayout from '@/layouts/MainLayout'; -import IframeTC from '@/modules/iframe-tc'; - -const pathUrl = '/trustless-computers-iframe/'; -// const IframeURLExtend = DOMAIN_URL + MAIN_PATH; -const IframeURLExtend = - 'https://dev.newbitcoincity.com/trustless-computers-iframe/'; - -const iframeDomain = isProduction - ? 'https://newbitcoincity.com' - : 'https://dev.newbitcoincity.com'; - -const TCPage = () => { - return ( - - {typeof document !== 'undefined' ? ( - - ) : null} - - ); -}; - -export default TCPage; diff --git a/src/layouts/Header/menuConfig.ts b/src/layouts/Header/menuConfig.ts index 6675643b1..b9aefade0 100644 --- a/src/layouts/Header/menuConfig.ts +++ b/src/layouts/Header/menuConfig.ts @@ -10,7 +10,7 @@ export interface NavItem { export const NAV_ITEMS: Array = [ { label: 'Blockchains', - href: '/blockchains', + href: '/blockchains/computers', isNewWindow: false, isHide: false, }, diff --git a/src/modules/iframe-tc/index.tsx b/src/modules/iframe-tc/index.tsx index 55c837768..ea4bbcffb 100644 --- a/src/modules/iframe-tc/index.tsx +++ b/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 ( + + + + ); + } return (
{ src={props.iframeURL} width="100%" style={{ border: 'none' }} + onLoadedData={() => {}} + onLoad={() => { + setIframeLoading(false); + }} />
);