Merge pull request #807 from TrustlessComputer/enh/chains

modify code
TrustlessComputer · Sep 12, 2024 · 7464ce0 · 7464ce0
2 parents 52c9f77 + 44a80bc
commit 7464ce0
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 deletions.
diff --git 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
@@ -18,19 +18,18 @@ 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 (
       <Flex
         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
@@ -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
@@ -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
@@ -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,
 );