From f39eae0119a4494c35a2a470d7d9f1727678f7c8 Mon Sep 17 00:00:00 2001 From: 2712 <2712@trustless.computer> Date: Wed, 11 Sep 2024 14:43:24 +0700 Subject: [PATCH 1/9] Revert "update" This reverts commit 2795fc46fab24880b194e2076e755313059e32a1. --- src/modules/l2-rollup/index.tsx | 150 ++++++++++++++++---------------- 1 file changed, 75 insertions(+), 75 deletions(-) diff --git a/src/modules/l2-rollup/index.tsx b/src/modules/l2-rollup/index.tsx index faaa11689..e9af96571 100644 --- a/src/modules/l2-rollup/index.tsx +++ b/src/modules/l2-rollup/index.tsx @@ -5,7 +5,6 @@ import AppLoading from '@/components/AppLoading'; import ListTable, { ColumnProp } from '@/components/ListTable'; import { MIN_DECIMAL } from '@/constants/constants'; -import PowerBox from '@/modules/l2-rollup/PowerBox'; import { useContactUs } from '@/Providers/ContactUsProvider/hook'; import CRollupL2API from '@/services/api/dapp/rollupl2'; import { @@ -28,17 +27,19 @@ import { Tooltip, useDisclosure, } from '@chakra-ui/react'; -import { DotLottiePlayer } from '@dotlottie/react-player'; import orderBy from 'lodash/orderBy'; import { useEffect, useMemo, useRef, useState } from 'react'; -import { isMobile } from 'react-device-detect'; import { useDispatch } from 'react-redux'; -import SearchAddress from '../l2-rollup-detail/SearchAddress'; -import AddressesEngagement from './AddressesEngagement'; -import AnimArrowDown from './AnimArrowDown'; import BitcoinRentModal from './BitcoinRentModal'; import L2RollupFee from './fees'; import s from './styles.module.scss'; +import SearchAddress from '../l2-rollup-detail/SearchAddress'; +import React from 'react'; +import { isMobile } from 'react-device-detect'; +import { DotLottiePlayer } from '@dotlottie/react-player'; +import AnimArrowDown from './AnimArrowDown'; +import PowerBox from '@/modules/l2-rollup/PowerBox'; +import AddressesEngagement from './AddressesEngagement'; enum SortRollupType { name, @@ -270,40 +271,6 @@ const L2Rollup = () => { ); }; - const renderItemTotal = ( - title: string, - value: string, - tooltip?: string, - mulValue?: string, - ) => { - return ( - - - {title} - {tooltip && ( - - tooltip - - )} - - - {value} - - {mulValue && ( - - {mulValue} - - )} - - ); - }; - const columns: ColumnProp[] = useMemo(() => { return [ { @@ -608,6 +575,34 @@ const L2Rollup = () => { ); }, }, + // { + // id: 'fdv', + // label: renderLabel('FDV', SortRollupType.fdv), + // labelConfig, + // config: { + // borderBottom: 'none', + // fontSize: '16px', + // fontWeight: 500, + // verticalAlign: 'middle', + // letterSpacing: '-0.5px', + // }, + // render(data: IRollupL2Info) { + // return ( + // + // + // {data.fdv_usd && data.fdv_usd !== '0' + // ? `$${formatCurrency(data.fdv_usd, MIN_DECIMAL, MIN_DECIMAL)}` + // : '-'} + // + // + // ); + // }, + // }, { id: 'block', label: renderLabel('Block', SortRollupType.block), @@ -640,18 +635,7 @@ const L2Rollup = () => { }, { id: 'tps', - label: ( - - {renderLabel( - 'TPS', - SortRollupType.tps, - 'The total transactions per second', - )} - - Total: {formatCurrency(total.tps, MIN_DECIMAL, MIN_DECIMAL)} - - - ), + label: renderLabel('TPS', SortRollupType.tps), labelConfig, config: { borderBottom: 'none', @@ -678,18 +662,7 @@ const L2Rollup = () => { }, { id: 'mgas', - label: ( - - {renderLabel( - 'Mgas/s', - SortRollupType.mgas, - 'The total megagas (Million Gas) per second', - )} - - Total: {formatCurrency(total.mgas, MIN_DECIMAL, MIN_DECIMAL)} - - - ), + label: renderLabel('Mgas/s', SortRollupType.mgas), labelConfig, config: { borderBottom: 'none', @@ -712,14 +685,7 @@ const L2Rollup = () => { }, { id: 'kbs', - label: ( - - {renderLabel('Kb/s', SortRollupType.kbs, 'Total KB per second')} - - Total: {formatCurrency(total.kbs, MIN_DECIMAL, MIN_DECIMAL)} - - - ), + label: renderLabel('Kb/s', SortRollupType.kbs), labelConfig, config: { borderBottom: 'none', @@ -939,6 +905,40 @@ const L2Rollup = () => { ]; }, [currentSort]); + const renderItemTotal = ( + title: string, + value: string, + tooltip?: string, + mulValue?: string, + ) => { + return ( + + + {title} + {tooltip && ( + + tooltip + + )} + + + {value} + + {mulValue && ( + + {mulValue} + + )} + + ); + }; + const chainsSupportForChart = useMemo( () => data.filter((d) => d.fee_chart_supported).map((v) => v.name), [data], @@ -1227,7 +1227,7 @@ const L2Rollup = () => { - {/* { : '-', )} - */} - + + {data.length <= 0 ? ( From 2416006411f3c14724470123f8d71a216fec42da Mon Sep 17 00:00:00 2001 From: 2712 <2712@trustless.computer> Date: Wed, 11 Sep 2024 15:05:25 +0700 Subject: [PATCH 2/9] feat: update heartbeats --- src/modules/l2-rollup/index.tsx | 407 ++++++++++++----------- src/modules/l2-rollup/styles.module.scss | 54 +++ 2 files changed, 274 insertions(+), 187 deletions(-) diff --git a/src/modules/l2-rollup/index.tsx b/src/modules/l2-rollup/index.tsx index e9af96571..a9e1d291b 100644 --- a/src/modules/l2-rollup/index.tsx +++ b/src/modules/l2-rollup/index.tsx @@ -26,6 +26,11 @@ import { Text, Tooltip, useDisclosure, + Tab, + TabList, + TabPanel, + TabPanels, + Tabs, } from '@chakra-ui/react'; import orderBy from 'lodash/orderBy'; import { useEffect, useMemo, useRef, useState } from 'react'; @@ -84,7 +89,7 @@ const L2Rollup = () => { const rollupL2Api = new CRollupL2API(); const [currentSort, setCurrentSort] = useState({ - type: SortRollupType.level, + type: SortRollupType.tps, ascending: false, }); @@ -1088,201 +1093,229 @@ const L2Rollup = () => { mt={isShowIntro ? 'calc(100dvh - 696px)' : 'calc(100dvh - 412px)'} > {isShowIntro && renderIntro()} - - setHoverTooltip(true)} - onMouseLeave={() => setHoverTooltip(false)} - > - {hoverTooltip && ( - - About project Bitcoin Heartbeats - - )} - setIsShowIntro(!isShowIntro)} - /> - - - - Transaction Count - {`Today Ξ${formatCurrency( - (_dataChart.txs?.[_dataChart.txs.length - 1] as any) - ?.y as any, - 0, - 2, - )}`} - - } - /> - - Bitcoin l2 Active addresses - - - - {`Ξ${formatCurrency( + + + Realtime Data + Static Data + + setHoverTooltip(true)} + onMouseLeave={() => setHoverTooltip(false)} + > + {hoverTooltip && ( + + About project Bitcoin Heartbeats + + )} + setIsShowIntro(!isShowIntro)} + /> + + + + + + + {data.length <= 0 ? ( + + + + ) : ( + + )} + + + + + + + Transaction Count + {`Today Ξ${formatCurrency( + (_dataChart.txs?.[_dataChart.txs.length - 1] as any) + ?.y as any, + 0, + 2, + )}`} + + } + /> + + + Bitcoin l2 Active addresses + + + + + {`Ξ${formatCurrency( + ( + _dataChart.addresses?.[ + _dataChart.addresses.length - 1 + ] as any + )?.y as any, + 0, + 2, + )}`} + + + + + + + + + + } + /> + + Fees Paid by Users + {`Today $${formatCurrency( ( - _dataChart.addresses?.[ - _dataChart.addresses.length - 1 + _dataChart.fees?.[ + _dataChart.fees.length - 1 ] as any )?.y as any, 0, 2, - )}`} - - - - - - - - - - } - /> - + + } + /> + + + + * This data has been collected from{' '} + {chainsSupportForChart.join(', ')} chains.{' '} + + Rollux, Merlin, Core, and Stacks will be coming soon. + + + + + + + + + + + Total + - Fees Paid by Users - {`Today $${formatCurrency( - (_dataChart.fees?.[_dataChart.fees.length - 1] as any) - ?.y as any, - 0, - 2, - )}`} + {renderItemTotal( + 'TPS', + formatCurrency(total.tps, MIN_DECIMAL, MIN_DECIMAL), + 'The total transactions per second', + bitcoinRollup + ? `(${formatCurrency( + Math.abs(total.tps / bitcoinRollup.tps), + MIN_DECIMAL, + MIN_DECIMAL, + )}x)` + : '-', + )} + {renderItemTotal( + 'Mgas/s', + formatCurrency(total.mgas, MIN_DECIMAL, MIN_DECIMAL), + 'The total megagas (Million Gas) per second', + '', + )} + {renderItemTotal( + 'KB/s', + formatCurrency(total.kbs, MIN_DECIMAL, MIN_DECIMAL), + 'Total KB per second', + bitcoinRollup + ? `(${formatCurrency( + Math.abs(total.kbs / bitcoinRollup.kbs), + MIN_DECIMAL, + MIN_DECIMAL, + )}x)` + : '-', + )} - } - /> - - - - * This data has been collected from{' '} - {chainsSupportForChart.join(', ')} chains.{' '} - Rollux, Merlin, Core, and Stacks will be coming soon. - - - - - - + + + + - - - Total - - - {renderItemTotal( - 'TPS', - formatCurrency(total.tps, MIN_DECIMAL, MIN_DECIMAL), - 'The total transactions per second', - bitcoinRollup - ? `(${formatCurrency( - Math.abs(total.tps / bitcoinRollup.tps), - MIN_DECIMAL, - MIN_DECIMAL, - )}x)` - : '-', - )} - {renderItemTotal( - 'Mgas/s', - formatCurrency(total.mgas, MIN_DECIMAL, MIN_DECIMAL), - 'The total megagas (Million Gas) per second', - '', - )} - {renderItemTotal( - 'KB/s', - formatCurrency(total.kbs, MIN_DECIMAL, MIN_DECIMAL), - 'Total KB per second', - bitcoinRollup - ? `(${formatCurrency( - Math.abs(total.kbs / bitcoinRollup.kbs), - MIN_DECIMAL, - MIN_DECIMAL, - )}x)` - : '-', - )} - - - - {data.length <= 0 ? ( - - - - ) : ( - - )} - button { + background: none; + border: none; + color: #fff; + opacity: 50%; + font-weight: 400; + + flex: unset; + position: relative; + text-align: center; + + &[aria-selected='true'] { + opacity: 1; + font-weight: 600; + color: #fa4e0e !important; + + &::after { + content: ''; + display: block; + height: 2px; + width: 100%; + background-color: #fa4e0e !important; + position: absolute; + bottom: 0; + } + } + } + } + + .tabPanel { + > [role='tabpanel'] { + padding: 0; + border-color: transparent !important; + } + border-color: transparent !important; + } } .search { From dc91ffbf93a1bfcacf3b82e5b3232724197887c8 Mon Sep 17 00:00:00 2001 From: 2712 <2712@trustless.computer> Date: Wed, 11 Sep 2024 15:09:35 +0700 Subject: [PATCH 3/9] feat: update heartbeats --- src/modules/l2-rollup/index.tsx | 104 ++++++++++++++++---------------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/src/modules/l2-rollup/index.tsx b/src/modules/l2-rollup/index.tsx index a9e1d291b..1a700cd85 100644 --- a/src/modules/l2-rollup/index.tsx +++ b/src/modules/l2-rollup/index.tsx @@ -1128,6 +1128,58 @@ const L2Rollup = () => { + + + Total + + + {renderItemTotal( + 'TPS', + formatCurrency(total.tps, MIN_DECIMAL, MIN_DECIMAL), + 'The total transactions per second', + bitcoinRollup + ? `(${formatCurrency( + Math.abs(total.tps / bitcoinRollup.tps), + MIN_DECIMAL, + MIN_DECIMAL, + )}x)` + : '-', + )} + {renderItemTotal( + 'Mgas/s', + formatCurrency(total.mgas, MIN_DECIMAL, MIN_DECIMAL), + 'The total megagas (Million Gas) per second', + '', + )} + {renderItemTotal( + 'KB/s', + formatCurrency(total.kbs, MIN_DECIMAL, MIN_DECIMAL), + 'Total KB per second', + bitcoinRollup + ? `(${formatCurrency( + Math.abs(total.kbs / bitcoinRollup.kbs), + MIN_DECIMAL, + MIN_DECIMAL, + )}x)` + : '-', + )} + + {data.length <= 0 ? ( @@ -1260,58 +1312,6 @@ const L2Rollup = () => { > - - - - Total - - - {renderItemTotal( - 'TPS', - formatCurrency(total.tps, MIN_DECIMAL, MIN_DECIMAL), - 'The total transactions per second', - bitcoinRollup - ? `(${formatCurrency( - Math.abs(total.tps / bitcoinRollup.tps), - MIN_DECIMAL, - MIN_DECIMAL, - )}x)` - : '-', - )} - {renderItemTotal( - 'Mgas/s', - formatCurrency(total.mgas, MIN_DECIMAL, MIN_DECIMAL), - 'The total megagas (Million Gas) per second', - '', - )} - {renderItemTotal( - 'KB/s', - formatCurrency(total.kbs, MIN_DECIMAL, MIN_DECIMAL), - 'Total KB per second', - bitcoinRollup - ? `(${formatCurrency( - Math.abs(total.kbs / bitcoinRollup.kbs), - MIN_DECIMAL, - MIN_DECIMAL, - )}x)` - : '-', - )} - - From 8de803753e82a13f78962952b2cf5fbdbe03e4ee Mon Sep 17 00:00:00 2001 From: 2712 <2712@trustless.computer> Date: Wed, 11 Sep 2024 15:14:53 +0700 Subject: [PATCH 4/9] feat: update heartbeats --- src/modules/l2-rollup/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/modules/l2-rollup/index.tsx b/src/modules/l2-rollup/index.tsx index 1a700cd85..5380f895f 100644 --- a/src/modules/l2-rollup/index.tsx +++ b/src/modules/l2-rollup/index.tsx @@ -1094,7 +1094,11 @@ const L2Rollup = () => { > {isShowIntro && renderIntro()} - + Realtime Data Static Data From e1f8b3082b4ec5a23d347205b0ab8b4f26020088 Mon Sep 17 00:00:00 2001 From: 2712 <2712@trustless.computer> Date: Wed, 11 Sep 2024 15:35:50 +0700 Subject: [PATCH 5/9] feat: update heartbeats --- src/modules/l2-rollup/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/modules/l2-rollup/index.tsx b/src/modules/l2-rollup/index.tsx index 5380f895f..6bf0efd19 100644 --- a/src/modules/l2-rollup/index.tsx +++ b/src/modules/l2-rollup/index.tsx @@ -1099,8 +1099,8 @@ const L2Rollup = () => { fontSize={['16px', '18px', ' 20px']} mt={isShowIntro ? '24px' : '0px'} > - Realtime Data - Static Data + Real-time Data + Analytics { > {hoverTooltip && ( - About project Bitcoin Heartbeats + About Heartbeats )} Date: Wed, 11 Sep 2024 15:44:44 +0700 Subject: [PATCH 6/9] feat: update heartbeats --- src/modules/l2-rollup/index.tsx | 4 ++-- src/modules/l2-rollup/styles.module.scss | 27 ++++++++++-------------- 2 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/modules/l2-rollup/index.tsx b/src/modules/l2-rollup/index.tsx index 6bf0efd19..7b0050718 100644 --- a/src/modules/l2-rollup/index.tsx +++ b/src/modules/l2-rollup/index.tsx @@ -1099,8 +1099,8 @@ const L2Rollup = () => { fontSize={['16px', '18px', ' 20px']} mt={isShowIntro ? '24px' : '0px'} > - Real-time Data - Analytics + Real-time Data + Analytics button { background: none; border: none; - color: #fff; - opacity: 50%; - font-weight: 400; + color: gray; + font-weight: 500; + background: #f4f4f4; + font-size: 14px; + line-height: 20px; + padding-top: 8px; + padding-bottom: 8px; flex: unset; position: relative; text-align: center; + width: 160px; &[aria-selected='true'] { opacity: 1; font-weight: 600; - color: #fa4e0e !important; - - &::after { - content: ''; - display: block; - height: 2px; - width: 100%; - background-color: #fa4e0e !important; - position: absolute; - bottom: 0; - } + color: #fff !important; + background: linear-gradient(95.67deg, #ffc076 7.06%, #ff0000 92.21%); } } } From a6def3c75677ba5af327fa34621d815f6a740da2 Mon Sep 17 00:00:00 2001 From: 2712 <2712@trustless.computer> Date: Wed, 11 Sep 2024 15:59:30 +0700 Subject: [PATCH 7/9] feat: update heartbeats --- src/modules/l2-rollup/index.tsx | 2 +- src/modules/l2-rollup/styles.module.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/l2-rollup/index.tsx b/src/modules/l2-rollup/index.tsx index 7b0050718..8a5bb15b5 100644 --- a/src/modules/l2-rollup/index.tsx +++ b/src/modules/l2-rollup/index.tsx @@ -1099,7 +1099,7 @@ const L2Rollup = () => { fontSize={['16px', '18px', ' 20px']} mt={isShowIntro ? '24px' : '0px'} > - Real-time Data + Live Data Analytics Date: Wed, 11 Sep 2024 16:04:41 +0700 Subject: [PATCH 8/9] feat: update heartbeats --- src/layouts/HeaderV4/menuConfig.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/layouts/HeaderV4/menuConfig.ts b/src/layouts/HeaderV4/menuConfig.ts index e8ffe6172..a21df62ee 100644 --- a/src/layouts/HeaderV4/menuConfig.ts +++ b/src/layouts/HeaderV4/menuConfig.ts @@ -155,16 +155,15 @@ export const NAV_ITEMS_LEFT: Array = [ isNewWindow: false, isHide: false, }, - { - label: 'BVM', - href: '/bvm', + label: 'Ecosystem', + href: '/explore', isNewWindow: false, isHide: false, }, { - label: 'Ecosystem', - href: '/explore', + label: '$BVM', + href: '/bvm', isNewWindow: false, isHide: false, }, From fcb817c8e0205d3c314fdc99db9c42555cddc2bc Mon Sep 17 00:00:00 2001 From: 2712 <2712@trustless.computer> Date: Wed, 11 Sep 2024 16:13:32 +0700 Subject: [PATCH 9/9] feat: update heartbeats --- src/modules/l2-rollup/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/l2-rollup/index.tsx b/src/modules/l2-rollup/index.tsx index 8a5bb15b5..b11909023 100644 --- a/src/modules/l2-rollup/index.tsx +++ b/src/modules/l2-rollup/index.tsx @@ -68,7 +68,7 @@ interface ISort { ascending?: boolean; } -const SEARCH_BAR_HEIGHT = 72; +const SEARCH_BAR_HEIGHT = 92; const L2Rollup = () => { const { showContactUsModal } = useContactUs(); @@ -1057,7 +1057,7 @@ const L2Rollup = () => {