Merge pull request #796 from TrustlessComputer/feat/fractal

feat: fractal heartbeats
TrustlessComputer · Sep 9, 2024 · 45e5cf7 · 45e5cf7
2 parents 5659008 + 798cf90
commit 45e5cf7
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 36 deletions.
diff --git a/src/modules/l2-rollup-detail/TokenTransferTabBitcoin/index.tsx b/src/modules/l2-rollup-detail/TokenTransferTabBitcoin/index.tsx
@@ -17,6 +17,7 @@ import { L2RollupDetailContext } from '../providers/l2-rollup-detail-context';
 import s from './styles.module.scss';
 import { useRouter } from 'next/navigation';
 import { HEART_BEAT } from '@/constants/route-path';
+import TransactionsTabFBitcoin from '../TransactionsTabFBitcoin';
 
 interface IProps {}
 
@@ -25,7 +26,7 @@ const TokenTransferTabBitcoin = (props: IProps) => {
   const router = useRouter();
 
   const rollupApi = new CRollupL2DetailBitcoinAPI();
-  const [balanceType, setBalanceType] = useState<BalanceBitcoinType>('runes');
+  const [balanceType, setBalanceType] = useState<BalanceBitcoinType>('fractal');
 
   const [list, setList] = useState<IBitcoinTokenTransaction[]>([]);
 
@@ -319,7 +320,13 @@ const TokenTransferTabBitcoin = (props: IProps) => {
         borderRadius={'8px'}
         mb={'20px'}
       >
-        {BalanceTypes.map((balance) => (
+        {[
+          {
+            type: 'fractal',
+            title: 'Fractal',
+          },
+          ...BalanceTypes,
+        ].map((balance) => (
           <Box
             bg={balanceType === balance.type ? '#ffff' : 'transparent'}
             fontWeight={balanceType === balance.type ? '400' : '500'}
@@ -332,33 +339,37 @@ const TokenTransferTabBitcoin = (props: IProps) => {
           </Box>
         ))}
       </Flex>
-      <Box className={`${s.container} ${s.shadow}`} h="60vh">
-        <ScrollWrapper
-          onFetch={() => {
-            refParams.current = {
-              ...refParams.current,
-              page: refParams.current.page + 1,
-            };
-            hasIncrementedPageRef.current = true;
-            fetchData();
-          }}
-          isFetching={refreshing}
-          hasIncrementedPageRef={hasIncrementedPageRef}
-          onFetchNewData={onRefresh}
-          wrapClassName={s.wrapScroll}
-          dependData={list}
-        >
-          <ListTable
-            data={list}
-            columns={columns}
-            className={s.tableContainer}
-            showEmpty={!isFetching}
-            emptyLabel="No transactions found."
-            emptyIcon={<Image src={'/icons/icon-empty.svg'} />}
-          />
-          {isFetching && <AppLoading className={s.loading} />}
-        </ScrollWrapper>
-      </Box>
+      {balanceType === 'fractal' ? (
+        <TransactionsTabFBitcoin />
+      ) : (
+        <Box className={`${s.container} ${s.shadow}`} h="60vh">
+          <ScrollWrapper
+            onFetch={() => {
+              refParams.current = {
+                ...refParams.current,
+                page: refParams.current.page + 1,
+              };
+              hasIncrementedPageRef.current = true;
+              fetchData();
+            }}
+            isFetching={refreshing}
+            hasIncrementedPageRef={hasIncrementedPageRef}
+            onFetchNewData={onRefresh}
+            wrapClassName={s.wrapScroll}
+            dependData={list}
+          >
+            <ListTable
+              data={list}
+              columns={columns}
+              className={s.tableContainer}
+              showEmpty={!isFetching}
+              emptyLabel="No transactions found."
+              emptyIcon={<Image src={'/icons/icon-empty.svg'} />}
+            />
+            {isFetching && <AppLoading className={s.loading} />}
+          </ScrollWrapper>
+        </Box>
+      )}
     </Flex>
   );
 };

diff --git a/src/modules/l2-rollup-detail/TransactionsTabFBitcoin/index.tsx b/src/modules/l2-rollup-detail/TransactionsTabFBitcoin/index.tsx
@@ -6,6 +6,7 @@ import CRollupL2DetailBitcoinAPI from '@/services/api/dapp/rollupl2-detail-bitco
 import { IFBitcoinTransaction } from '@/services/api/dapp/rollupl2-detail-bitcoin/interface';
 import { shortCryptoAddress } from '@/utils/address';
 import { formatCurrency } from '@/utils/format';
+import { formatTimeAgo } from '@/utils/time';
 import { Box, Flex, Image, SimpleGrid, Text } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import dayjs from 'dayjs';
@@ -159,7 +160,7 @@ const TransactionsTabFBitcoin = (props: IProps) => {
                           .format('HH:mm:ss MM/DD/YYYY')}
                         <Text as={'span'}>
                           {' '}
-                          ({dayjs.unix(item.status.block_time).toNow()})
+                          ({formatTimeAgo(item.status.block_time)})
                         </Text>
                       </Text>
                     </Flex>

diff --git a/src/modules/l2-rollup-detail/TxBTCExplorer/index.tsx b/src/modules/l2-rollup-detail/TxBTCExplorer/index.tsx
@@ -35,6 +35,7 @@ import s from './styles.module.scss';
 import TokenTransfers from './tokenTransfer';
 import { shortCryptoAddress } from '@/utils/address';
 import { isMobile } from 'react-device-detect';
+import { formatTimeAgo } from '@/utils/time';
 
 const TxBTCExplorer = () => {
   const { address, isBTCTxAddress } = useContext(L2RollupExplorerContext);
@@ -193,7 +194,7 @@ const TxBTCExplorer = () => {
               ) : (
                 <>
                   {dayjs.unix(timestamp).format('YYYY-MM-DD HH:mm:ss')}
-                  <Text as={'span'}> ({dayjs.unix(timestamp).toNow()})</Text>
+                  <Text as={'span'}> ({formatTimeAgo(timestamp)})</Text>
                 </>
               )}
             </Text>

diff --git a/src/modules/l2-rollup-detail/index.tsx b/src/modules/l2-rollup-detail/index.tsx
@@ -36,7 +36,6 @@ import TokenTransferTab from './TokenTransferTab';
 import TokenTransferTabBitcoin from './TokenTransferTabBitcoin';
 import TransactionsTab from './TransactionsTab';
 import TransactionsTabBitcoin from './TransactionsTabBitcoin';
-import TransactionsTabFBitcoin from './TransactionsTabFBitcoin';
 import WatchListAddresses from './Watchlist';
 import { formatAiSummary } from './utils';
 import MarkdownComponent from './MarkdownComponent';
@@ -209,7 +208,6 @@ const L2RollupDetail = () => {
               >
                 <Tab>Portfolio</Tab>
                 <Tab>Transactions</Tab>
-                <Tab>Fractal Transactions</Tab>
                 <Tab>Token Transfer</Tab>
               </TabList>
               <TabPanels className={s.tabPanel}>
@@ -219,9 +217,6 @@ const L2RollupDetail = () => {
                 <TabPanel minH={'40vh'}>
                   <TransactionsTabBitcoin />
                 </TabPanel>
-                <TabPanel minH={'40vh'}>
-                  <TransactionsTabFBitcoin />
-                </TabPanel>
                 <TabPanel minH={'40vh'}>
                   <TokenTransferTabBitcoin />
                 </TabPanel>

diff --git a/src/services/api/dapp/rollupl2-detail-bitcoin/interface.ts b/src/services/api/dapp/rollupl2-detail-bitcoin/interface.ts
@@ -1,4 +1,5 @@
 export type BalanceBitcoinType =
+  | 'fractal'
   | 'runes'
   | 'brc20'
   | 'src20'

diff --git a/src/utils/time.ts b/src/utils/time.ts
@@ -1,5 +1,6 @@
 import moment from 'moment';
 import isNumber from 'lodash/isNumber';
+import dayjs from 'dayjs';
 
 const FORMAT_PATTERN = 'DD MMM hh:mm A';
 
@@ -48,11 +49,16 @@ function getCurrentUnixTimestamp() {
   return Math.floor(Date.now() / 1000);
 }
 
+function formatTimeAgo(time: number) {
+  return dayjs.unix(time).toNow().replaceAll('in ', '') + ' ago';
+}
+
 export {
   formatUnixDateTime,
   formatDateTime,
   isExpiredUnixTime,
   isExpiredTime,
   getCurrentUnixTimestamp,
   formatTimeStamp,
+  formatTimeAgo,
 };