Modify env files, add Iframe tc

.env

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_APP_ENV=develop
-NEXT_PUBLIC_DOMAIN_URL="http://localhost:3000"
+NEXT_PUBLIC_APP_ENV=local
+NEXT_PUBLIC_DOMAIN_URL=http://localhost:3000
 NEXT_PUBLIC_CDN_URL=https://cdn.newbitcoincity.com
 NEXT_PUBLIC_API_URL=

envs/.env.develop

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_APP_ENV=develop
-NEXT_PUBLIC_DOMAIN_URL="http://localhost:3000"
+NEXT_PUBLIC_DOMAIN_URL=https://dev.bvm.network
 NEXT_PUBLIC_CDN_URL=https://cdn.newbitcoincity.com
 NEXT_PUBLIC_API_URL=

envs/.env.production

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_APP_ENV=production
-NEXT_PUBLIC_DOMAIN_URL="http://localhost:3000"
+NEXT_PUBLIC_DOMAIN_URL=https://bvm.network
 NEXT_PUBLIC_CDN_URL=https://cdn.newbitcoincity.com
 NEXT_PUBLIC_API_URL=

envs/.env.staging

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_APP_ENV=staging
-NEXT_PUBLIC_DOMAIN_URL="http://localhost:3000"
+NEXT_PUBLIC_DOMAIN_URL=https://bvm.network
 NEXT_PUBLIC_CDN_URL=https://cdn.newbitcoincity.com
 NEXT_PUBLIC_API_URL=

next.config.js

@@ -40,6 +40,21 @@ const nextConfig = {
                   `,
   },
 
+  async redirects() {
+    return [
+      {
+        source: '/trustless-computers',
+        destination: '/tc',
+        permanent: false,
+      },
+      {
+        source: '/tc/dashboard',
+        destination: '/tc/computers',
+        permanent: false,
+      },
+    ];
+  },
+
   webpack: (config, { isServer, dev }) => {
     // Note: we provide webpack above so you should not `require` it
     // Perform customizations to webpack config

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "local": "cp ./envs/.env.local .env && next dev",
     "dev": "cp ./envs/.env.develop .env && next dev",
     "ld": "export PORT=3001 && cp ./envs/.env.develop .env  && rm -rf .next && next dev",
     "ls": "export PORT=3002 && cp ./envs/.env.staging .env  && rm -rf .next && next dev",

src/app/building-blocks/page.tsx

@@ -7,7 +7,7 @@ const BuildingBlocksPage = () => {
   return (
     <MainLayout
       headerProps={{
-        primaryColor: 'black',
+        color: 'black',
       }}
     >
       <BuildingBlockModule />

src/app/tc/page.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import IframeTC from '@/modules/iframe-tc';
+import MainLayout from '@/layouts/MainLayout';
+import { DOMAIN_URL, isProduction } from '@/config';
+
+const MAIN_PATH = '/trustless-computers-iframe/';
+// const IframeURLExtend = DOMAIN_URL + MAIN_PATH;
+const IframeURLExtend =
+  'https://dev.newbitcoincity.com/trustless-computers-iframe/';
+
+const TCPage = () => {
+  return (
+    <MainLayout
+      headerProps={{
+        color: 'black',
+        position: 'relative',
+        bgColor: 'white',
+      }}
+    >
+      <IframeTC iframeURL={IframeURLExtend} />
+    </MainLayout>
+  );
+};
+
+export default TCPage;

src/config/index.ts

@@ -6,6 +6,9 @@ export const API_UR: string = process.env.NEXT_PUBLIC_API_URL!;
 export const DOMAIN_URL: string = process.env.NEXT_PUBLIC_DOMAIN_URL!;
 export const CDN_URL: string = process.env.NEXT_PUBLIC_CDN_URL!;
 
+export const isProduction: boolean = APP_ENV === 'production';
+export const isDevelop: boolean = APP_ENV === 'develop';
+
 export const CDN_URL_ICONS: string = CDN_URL + '/nbc/icons';
 
 export { MetadataConfig, ViewportConfig };

src/constants/breakpoint.ts

@@ -0,0 +1,4 @@
+export const XS_MOBILE_SCREEN = 500;
+export const MOBILE_SCREEN = 768;
+export const TABLET_SCREEN = 1024;
+export const QHD_SCREEN = 2048;

src/hooks/useWindowSize.ts

@@ -0,0 +1,90 @@
+import {
+  MOBILE_SCREEN,
+  QHD_SCREEN,
+  TABLET_SCREEN,
+  XS_MOBILE_SCREEN,
+} from '@/constants/breakpoint';
+import { useEffect, useState } from 'react';
+
+interface Size {
+  sreenWidth: number;
+  heightWidth: number;
+}
+
+interface CheckMobile {
+  xSMobileScreen: boolean;
+  mobileScreen: boolean;
+  tabletScreen: boolean | undefined;
+  desktopScreen: boolean;
+  QHDScreen: boolean;
+}
+
+function useWindowSize(): Size & CheckMobile {
+  const [windowSize, setWindowSize] = useState<Size>({
+    sreenWidth: 0,
+    heightWidth: 0,
+  });
+  const [xSMobileScreen, setXSMobileScreen] = useState(true);
+  const [mobileScreen, setMobileScreen] = useState(true);
+  const [tabletScreen, setTabletScreen] = useState<boolean | undefined>(
+    undefined,
+  );
+  const [desktopScreen, setDesktopScreen] = useState(true);
+  const [QHDScreen, setQHDScreen] = useState(true);
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        sreenWidth: window.innerWidth,
+        heightWidth: window.innerHeight,
+      });
+    }
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (windowSize?.sreenWidth && windowSize.sreenWidth <= XS_MOBILE_SCREEN) {
+      setXSMobileScreen(true);
+    } else {
+      setXSMobileScreen(false);
+    }
+
+    if (windowSize?.sreenWidth && windowSize.sreenWidth <= MOBILE_SCREEN) {
+      setMobileScreen(true);
+    } else {
+      setMobileScreen(false);
+    }
+
+    if (windowSize?.sreenWidth && windowSize.sreenWidth <= TABLET_SCREEN) {
+      setTabletScreen(true);
+    } else {
+      setTabletScreen(false);
+    }
+
+    if (windowSize?.sreenWidth && windowSize.sreenWidth >= QHD_SCREEN) {
+      setQHDScreen(true);
+    } else {
+      setQHDScreen(false);
+    }
+  }, [windowSize.sreenWidth]);
+
+  useEffect(() => {
+    setDesktopScreen(
+      !mobileScreen && !tabletScreen && !xSMobileScreen && !QHDScreen,
+    );
+  }, [tabletScreen, mobileScreen, xSMobileScreen, QHDScreen]);
+
+  return {
+    sreenWidth: windowSize.sreenWidth,
+    heightWidth: windowSize.heightWidth,
+    mobileScreen,
+    tabletScreen,
+    desktopScreen,
+    QHDScreen,
+    xSMobileScreen,
+  };
+}
+
+export default useWindowSize;

src/layouts/Footer/index.tsx

@@ -4,7 +4,7 @@ import { Box, Container, Stack, Text } from '@chakra-ui/react';
 
 const Footer = () => {
   return (
-    <Box bgColor={'black'}>
+    <Box bgColor={'black'} id="footer">
       <Container
         as={Stack}
         maxW={'2xl'}

src/layouts/Header/index.tsx

@@ -20,11 +20,16 @@ import { MobileNav } from './components/MobileNav';
 import Link from 'next/link';
 
 export type HeaderProps = {
-  primaryColor?: 'black' | 'white';
+  color?: 'black' | 'white';
+  position?: 'absolute' | 'relative';
+  bgColor?: string;
 };
 
 const Header = (props: HeaderProps) => {
-  const primaryColor = props.primaryColor || 'white';
+  const primaryColor = props.color || 'white';
+  const position = props.position || 'absolute';
+  const bgColor = props.bgColor || 'transparent';
+
   const { isOpen, onToggle } = useDisclosure();
   const isMobile = useBreakpointValue({ base: true, md: false }) as boolean;
 
@@ -48,7 +53,8 @@ const Header = (props: HeaderProps) => {
   return (
     <>
       <Box
-        position={'absolute'}
+        position={position === 'absolute' ? 'absolute' : 'relative'}
+        bgColor={bgColor}
         display={'flex'}
         justifyContent={'center'}
         alignItems={'center'}
@@ -66,6 +72,7 @@ const Header = (props: HeaderProps) => {
           display={'flex'}
           flex={1}
           align={'center'}
+          id="header"
         >
           {/* Left View */}
           <Flex

src/modules/iframe-tc/index.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import useWindowSize from '@/hooks/useWindowSize';
+import s from './styles.module.scss';
+import { useEffect } from 'react';
+
+interface IProps {
+  iframeURL: string;
+}
+
+const IframeTC = (props: IProps) => {
+  const { heightWidth } = useWindowSize();
+  const elmHeader = document.getElementById('header');
+
+  useEffect(() => {
+    window.focus();
+    function blur(e: any) {
+      const elmHeader = document.getElementById('header-hidden');
+      if (elmHeader) {
+        elmHeader.click();
+      }
+    }
+    window.addEventListener('blur', blur);
+    return () => window.removeEventListener('blur', blur);
+  }, []);
+
+  return (
+    <div
+      className={s.container}
+      style={{
+        height:
+          heightWidth -
+          (elmHeader && elmHeader.offsetHeight ? elmHeader.offsetHeight : 80),
+      }}
+    >
+      <iframe
+        id="TC_PAGE_IFRAME"
+        src={props.iframeURL}
+        width="100%"
+        style={{ border: 'none' }}
+      />
+    </div>
+  );
+};
+
+export default IframeTC;

src/modules/iframe-tc/styles.module.scss

@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.iframeGame {
+  width: 100%;
+}