@@ -3,8 +3,7 @@ import { useTranslation } from "react-i18next";
33import { useMediaQuery } from "react-responsive" ;
44import { Link } from "react-router-dom" ;
55
6- import { CheckOutlined , CloseOutlined } from "@ant-design/icons" ;
7- import { Card , Col , Row , Switch , Tooltip } from "antd" ;
6+ import { Card , Col , Row , Select , Tooltip } from "antd" ;
87import BigNumber from "bignumber.js" ;
98
109import { BlockCountContext } from "api/contexts/BlockCount" ;
@@ -16,11 +15,11 @@ import {
1615 BITCOIN_TOTAL_TRANSACTION_FEES_48H ,
1716 MarketStatisticsContext ,
1817 TOTAL_CONFIRMATIONS_7D ,
19- // TOTAL_CONFIRMATIONS_14D,
18+ TOTAL_CONFIRMATIONS_14D ,
2019 TOTAL_CONFIRMATIONS_24H ,
2120 TOTAL_CONFIRMATIONS_48H ,
2221 TOTAL_VOLUME_7D ,
23- // TOTAL_VOLUME_14D,
22+ TOTAL_VOLUME_14D ,
2423 TOTAL_VOLUME_24H ,
2524 TOTAL_VOLUME_48H ,
2625} from "api/contexts/MarketStatistics" ;
@@ -36,6 +35,8 @@ import { formatBytes } from "components/utils";
3635import Banner from "./Banner" ;
3736import RecentTransactions from "./RecentTransactions" ;
3837
38+ const { Option } = Select ;
39+
3940const HomePage = ( ) => {
4041 const { t } = useTranslation ( ) ;
4142 const isSmallAndLower = ! useMediaQuery ( { query : "(min-width: 576px)" } ) ;
@@ -117,31 +118,57 @@ const HomePage = () => {
117118 . times ( 100 )
118119 . toNumber ( )
119120 : 0 ;
120- let onChainVolume48hAgo = 0 ;
121- let onChainVolumeChange24h = 0 ;
122- if ( marketStatistics [ TOTAL_VOLUME_24H ] && marketStatistics [ TOTAL_VOLUME_48H ] ) {
123- onChainVolume48hAgo = new BigNumber ( marketStatistics [ TOTAL_VOLUME_48H ] )
124- . minus ( marketStatistics [ TOTAL_VOLUME_24H ] )
125- . toNumber ( ) ;
126- onChainVolumeChange24h = new BigNumber ( marketStatistics [ TOTAL_VOLUME_24H ] )
127- . minus ( onChainVolume48hAgo )
128- . dividedBy ( onChainVolume48hAgo )
129- . times ( 100 )
130- . toNumber ( ) ;
131- }
132-
133- let totalConfirmations48hAgo = 0 ;
134- let confirmationChange24h = 0 ;
135- if ( marketStatistics [ TOTAL_CONFIRMATIONS_24H ] && marketStatistics [ TOTAL_CONFIRMATIONS_48H ] ) {
136- totalConfirmations48hAgo = new BigNumber ( marketStatistics [ TOTAL_CONFIRMATIONS_48H ] )
137- . minus ( marketStatistics [ TOTAL_CONFIRMATIONS_24H ] )
138- . toNumber ( ) ;
139- confirmationChange24h = new BigNumber ( marketStatistics [ TOTAL_CONFIRMATIONS_24H ] )
140- . minus ( totalConfirmations48hAgo )
141- . dividedBy ( totalConfirmations48hAgo )
142- . times ( 100 )
143- . toNumber ( ) ;
144- }
121+ let onChainVolume48hAgo = 0 ;
122+ let onChainVolumeChange24h = 0 ;
123+ if ( marketStatistics [ TOTAL_VOLUME_24H ] && marketStatistics [ TOTAL_VOLUME_48H ] ) {
124+ onChainVolume48hAgo = new BigNumber ( marketStatistics [ TOTAL_VOLUME_48H ] )
125+ . minus ( marketStatistics [ TOTAL_VOLUME_24H ] )
126+ . toNumber ( ) ;
127+ onChainVolumeChange24h = new BigNumber ( marketStatistics [ TOTAL_VOLUME_24H ] )
128+ . minus ( onChainVolume48hAgo )
129+ . dividedBy ( onChainVolume48hAgo )
130+ . times ( 100 )
131+ . toNumber ( ) ;
132+ }
133+
134+ let onChainVolume14dAgo = 0 ;
135+ let onChainVolumeChange7d = 0 ;
136+ if ( marketStatistics [ TOTAL_VOLUME_7D ] && marketStatistics [ TOTAL_VOLUME_14D ] ) {
137+ onChainVolume14dAgo = new BigNumber ( marketStatistics [ TOTAL_VOLUME_14D ] )
138+ . minus ( marketStatistics [ TOTAL_VOLUME_7D ] )
139+ . toNumber ( ) ;
140+ onChainVolumeChange7d = new BigNumber ( marketStatistics [ TOTAL_VOLUME_7D ] )
141+ . minus ( onChainVolume14dAgo )
142+ . dividedBy ( onChainVolume14dAgo )
143+ . times ( 100 )
144+ . toNumber ( ) ;
145+ }
146+
147+ let totalConfirmations48hAgo = 0 ;
148+ let confirmationChange24h = 0 ;
149+ if ( marketStatistics [ TOTAL_CONFIRMATIONS_24H ] && marketStatistics [ TOTAL_CONFIRMATIONS_48H ] ) {
150+ totalConfirmations48hAgo = new BigNumber ( marketStatistics [ TOTAL_CONFIRMATIONS_48H ] )
151+ . minus ( marketStatistics [ TOTAL_CONFIRMATIONS_24H ] )
152+ . toNumber ( ) ;
153+ confirmationChange24h = new BigNumber ( marketStatistics [ TOTAL_CONFIRMATIONS_24H ] )
154+ . minus ( totalConfirmations48hAgo )
155+ . dividedBy ( totalConfirmations48hAgo )
156+ . times ( 100 )
157+ . toNumber ( ) ;
158+ }
159+
160+ let totalConfirmations14dAgo = 0 ;
161+ let confirmationChange7d = 0 ;
162+ if ( marketStatistics [ TOTAL_CONFIRMATIONS_7D ] && marketStatistics [ TOTAL_CONFIRMATIONS_14D ] ) {
163+ totalConfirmations14dAgo = new BigNumber ( marketStatistics [ TOTAL_CONFIRMATIONS_14D ] )
164+ . minus ( marketStatistics [ TOTAL_CONFIRMATIONS_7D ] )
165+ . toNumber ( ) ;
166+ confirmationChange7d = new BigNumber ( marketStatistics [ TOTAL_CONFIRMATIONS_7D ] )
167+ . minus ( totalConfirmations14dAgo )
168+ . dividedBy ( totalConfirmations14dAgo )
169+ . times ( 100 )
170+ . toNumber ( ) ;
171+ }
145172
146173 React . useEffect ( ( ) => {
147174 setFormattedLedgerSize ( formatBytes ( ledgerSize ) ) ;
@@ -235,26 +262,27 @@ const HomePage = () => {
235262 < Card
236263 size = "small"
237264 title = {
238- < span >
239- { is24Hours ? t ( "pages.home.last24Hours" ) : t ( "pages.home.last7Days" ) }
240- < Tooltip
241- placement = "right"
242- title = { is24Hours ? t ( "tooltips.last24Hours" ) : t ( "tooltips.last7days" ) }
243- >
244- < QuestionCircle />
245- </ Tooltip >
246- </ span >
247- }
248- extra = {
249265 isFeatureActive ? (
250- < Switch
251- checkedChildren = { < CheckOutlined /> }
252- unCheckedChildren = { < CloseOutlined /> }
253- onChange = { ( checked : boolean ) => {
254- setIs24Hours ( checked ) ;
255- } }
256- checked = { is24Hours }
257- />
266+ < >
267+ < Select
268+ value = { is24Hours }
269+ onChange = { ( value : boolean ) => {
270+ console . log ( "~~~value" , value ) ;
271+ setIs24Hours ( value ) ;
272+ } }
273+ >
274+ < Option value = { true } > { t ( "pages.home.last24Hours" ) } </ Option >
275+ < Option value = { false } > { t ( "pages.home.last7Days" ) } </ Option >
276+ </ Select >
277+ < span >
278+ < Tooltip
279+ placement = "right"
280+ title = { is24Hours ? t ( "tooltips.last24Hours" ) : t ( "tooltips.last7days" ) }
281+ >
282+ < QuestionCircle />
283+ </ Tooltip >
284+ </ span >
285+ </ >
258286 ) : null
259287 }
260288 >
0 commit comments