diff --git a/src/modules/l2-rollup-detail/TokenTransferTabBitcoin/index.tsx b/src/modules/l2-rollup-detail/TokenTransferTabBitcoin/index.tsx index 9f6c2cecc..5b2b1eca5 100644 --- 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('runes'); + const [balanceType, setBalanceType] = useState('fractal'); const [list, setList] = useState([]); @@ -319,7 +320,13 @@ const TokenTransferTabBitcoin = (props: IProps) => { borderRadius={'8px'} mb={'20px'} > - {BalanceTypes.map((balance) => ( + {[ + { + type: 'fractal', + title: 'Fractal', + }, + ...BalanceTypes, + ].map((balance) => ( { ))} - - { - refParams.current = { - ...refParams.current, - page: refParams.current.page + 1, - }; - hasIncrementedPageRef.current = true; - fetchData(); - }} - isFetching={refreshing} - hasIncrementedPageRef={hasIncrementedPageRef} - onFetchNewData={onRefresh} - wrapClassName={s.wrapScroll} - dependData={list} - > - } - /> - {isFetching && } - - + {balanceType === 'fractal' ? ( + + ) : ( + + { + refParams.current = { + ...refParams.current, + page: refParams.current.page + 1, + }; + hasIncrementedPageRef.current = true; + fetchData(); + }} + isFetching={refreshing} + hasIncrementedPageRef={hasIncrementedPageRef} + onFetchNewData={onRefresh} + wrapClassName={s.wrapScroll} + dependData={list} + > + } + /> + {isFetching && } + + + )} ); }; diff --git a/src/modules/l2-rollup-detail/TransactionsTabFBitcoin/index.tsx b/src/modules/l2-rollup-detail/TransactionsTabFBitcoin/index.tsx index 430cbc73c..f75565d75 100644 --- 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')} {' '} - ({dayjs.unix(item.status.block_time).toNow()}) + ({formatTimeAgo(item.status.block_time)}) diff --git a/src/modules/l2-rollup-detail/TxBTCExplorer/index.tsx b/src/modules/l2-rollup-detail/TxBTCExplorer/index.tsx index 48d1a19c4..530d0a9bc 100644 --- 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')} - ({dayjs.unix(timestamp).toNow()}) + ({formatTimeAgo(timestamp)}) )} diff --git a/src/modules/l2-rollup-detail/index.tsx b/src/modules/l2-rollup-detail/index.tsx index ca6069676..628f9e807 100644 --- 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 = () => { > Portfolio Transactions - Fractal Transactions Token Transfer @@ -219,9 +217,6 @@ const L2RollupDetail = () => { - - - diff --git a/src/services/api/dapp/rollupl2-detail-bitcoin/interface.ts b/src/services/api/dapp/rollupl2-detail-bitcoin/interface.ts index 2b45e943b..7815e1c36 100644 --- 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 index ab86c9da1..588ae5ef0 100644 --- 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,6 +49,10 @@ function getCurrentUnixTimestamp() { return Math.floor(Date.now() / 1000); } +function formatTimeAgo(time: number) { + return dayjs.unix(time).toNow().replaceAll('in ', '') + ' ago'; +} + export { formatUnixDateTime, formatDateTime, @@ -55,4 +60,5 @@ export { isExpiredTime, getCurrentUnixTimestamp, formatTimeStamp, + formatTimeAgo, };