From 44a80bccdadb2baecc8a914a27611308c04b92bf Mon Sep 17 00:00:00 2001
From: tony <tony@bvm.network>
Date: Thu, 12 Sep 2024 11:48:16 +0700
Subject: [PATCH] modify code

---
 src/modules/blockchains/Dashboard.page_v2.tsx | 11 +------
 .../Body_v2/L2Instance/HeaderRow_v2.tsx       | 28 ++++-------------
 .../blockchains/components/Body_v2/index.tsx  |  3 --
 .../enhnace/enhance.withWaiting.tsx           | 31 +++++++++++++++++++
 src/modules/blockchains/enhnace/index.tsx     |  2 ++
 5 files changed, 40 insertions(+), 35 deletions(-)
 create mode 100644 src/modules/blockchains/enhnace/enhance.withWaiting.tsx

diff --git a/src/modules/blockchains/Dashboard.page_v2.tsx b/src/modules/blockchains/Dashboard.page_v2.tsx
index 6ffa03bf4..92d7f6990 100644
--- a/src/modules/blockchains/Dashboard.page_v2.tsx
+++ b/src/modules/blockchains/Dashboard.page_v2.tsx
@@ -18,14 +18,11 @@ import { useEffect, useState } from 'react';
 import { TAB_ENUM, TAB_ENUM_MAP } from './Dashboard.constant_v2';
 import { enhance } from './Dashboard.enhance';
 import BillingPage from './components/BillingPage';
-// import BodyView from './components/Body';
-import { useRouter } from 'next/navigation';
 import BodyView from './components/Body_v2';
 import NetworkBar from './components/NetworkBar_V2';
 import s from './styles.module.scss';
 
 const Page = (props: any) => {
-  const router = useRouter();
   const { onOpenTopUpModal } = props;
   const [activeTab, setChatTabIndex] = useState<TAB_ENUM>(
     TAB_ENUM.MANAGE_CHAINS,
@@ -52,12 +49,6 @@ const Page = (props: any) => {
     }
   }, [loggedIn]);
 
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     router.push('/chains/66bb33f039450b503310947b');
-  //   }, 5000);
-  // }, []);
-
   const renderTabbar = () => {
     return (
       <Tabs
@@ -113,7 +104,7 @@ const Page = (props: any) => {
             fontWeight={500}
             color={'#000'}
           >
-            To see your ZK rollups -{' '}
+            To see your Bitcoin chain -{' '}
             <Text
               as="span"
               fontSize={['15px', '16px', '18px']}
diff --git a/src/modules/blockchains/components/Body_v2/L2Instance/HeaderRow_v2.tsx b/src/modules/blockchains/components/Body_v2/L2Instance/HeaderRow_v2.tsx
index 945f188a3..cf4cff521 100644
--- a/src/modules/blockchains/components/Body_v2/L2Instance/HeaderRow_v2.tsx
+++ b/src/modules/blockchains/components/Body_v2/L2Instance/HeaderRow_v2.tsx
@@ -18,11 +18,10 @@ const HeaderRow = (props: Props) => {
   const { item, isOwner, depositOnClick, editOnClick } = props;
   const mapper = useOrderMapper(item);
 
-  const router = useRouter();
-
-  const isShowStatus =
-    item.status === OrderStatus.Started ||
-    item.status === OrderStatus.Processing;
+  // const isShowStatus =
+  //   item.status === OrderStatus.Started ||
+  //   item.status === OrderStatus.Processing;
+  const isShowStatus = true;
 
   const renderLeftView = () => {
     return (
@@ -30,7 +29,7 @@ const HeaderRow = (props: Props) => {
         flex={1}
         flexDir={'row'}
         gap={'12px'}
-        align={'center'}
+        align={'flex-start'}
         w={'100%'}
         justify={'flex-start'}
       >
@@ -76,21 +75,6 @@ const HeaderRow = (props: Props) => {
             }}
           />
         )} */}
-
-        <Image
-          src={`/blockchains/customize/ic-infor.svg`}
-          fit={'contain'}
-          maxW={'40px'}
-          maxH={'40px'}
-          _hover={{
-            cursor: 'pointer',
-            opacity: 0.8,
-          }}
-          onClick={(event: any) => {
-            if (event.stopPropagation) event.stopPropagation();
-            router.push(`/chains/${item?.orderId}/detail`);
-          }}
-        />
       </Flex>
     );
   };
@@ -99,7 +83,7 @@ const HeaderRow = (props: Props) => {
     if (!isShowStatus) return null;
     return (
       <Flex
-        flex={1}
+        flex={0.5}
         flexDir={'row'}
         align={'center'}
         gap={'10px'}
diff --git a/src/modules/blockchains/components/Body_v2/index.tsx b/src/modules/blockchains/components/Body_v2/index.tsx
index 19f8705b1..9d9902cbf 100644
--- a/src/modules/blockchains/components/Body_v2/index.tsx
+++ b/src/modules/blockchains/components/Body_v2/index.tsx
@@ -27,9 +27,6 @@ import { useRouter } from 'next/navigation';
 
 const BodyGridView = () => {
   const dispatch = useAppDispatch();
-  const { onOpenWaittingSetingUp } = useDashboard();
-  const { getMyOrderList } = useL2Service();
-  // const allOrders = useAppSelector(allOrdersSelector);
   const myOrders = useAppSelector(myOrderListFilteredByNetwork);
   const { accountInforL2Service, isMyOrderListFetched } = useAppSelector(
     getL2ServicesStateSelector,
diff --git a/src/modules/blockchains/enhnace/enhance.withWaiting.tsx b/src/modules/blockchains/enhnace/enhance.withWaiting.tsx
new file mode 100644
index 000000000..c90f507d9
--- /dev/null
+++ b/src/modules/blockchains/enhnace/enhance.withWaiting.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { DashboardProps, DashboardWrappedComponent } from '../Dashboard.types';
+import { Flex, Spinner } from '@chakra-ui/react';
+
+const enhance =
+  (WrappedComponent: DashboardWrappedComponent) => (props: DashboardProps) => {
+    const [isInitDone, setInitDone] = useState(false);
+
+    useEffect(() => {
+      setTimeout(() => {
+        setInitDone(true);
+      }, 1000);
+    }, []);
+
+    if (!isInitDone)
+      return (
+        <Flex
+          display={'flex'}
+          w={'100dvw'}
+          h={'100dvh'}
+          bgColor={'#fff'}
+          align={'center'}
+          justify={'center'}
+        >
+          <Spinner color="#000" />
+        </Flex>
+      );
+    return <WrappedComponent {...props} />;
+  };
+
+export default enhance;
diff --git a/src/modules/blockchains/enhnace/index.tsx b/src/modules/blockchains/enhnace/index.tsx
index 2bfaf53bd..e91a373bf 100644
--- a/src/modules/blockchains/enhnace/index.tsx
+++ b/src/modules/blockchains/enhnace/index.tsx
@@ -11,6 +11,7 @@ import enhanceUpdateOrderModal from './enhance.UpdateOrderModal';
 import enhanceWaittingSettingUpModal from './enhance.WaittingSettingUpModal';
 import enhanceDappListModal from './enhance.DappListModal';
 import enhanceInstallDappDetailModal from './enhance.InstallDappDetailModal';
+import withWaiting from './enhance.withWaiting';
 
 import { DashboardContext } from '../providers/DashboardProvider';
 
@@ -34,5 +35,6 @@ export default compose<DashboardWrappedComponent>(
   enhanceWaittingSettingUpModal,
   enhanceInstallDappDetailModal,
   enhanceDappListModal,
+  withWaiting,
   enhance,
 );