@@ -3,8 +3,7 @@ import { useTranslation } from "react-i18next";
3
3
import { useMediaQuery } from "react-responsive" ;
4
4
import { Link } from "react-router-dom" ;
5
5
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" ;
8
7
import BigNumber from "bignumber.js" ;
9
8
10
9
import { BlockCountContext } from "api/contexts/BlockCount" ;
@@ -16,11 +15,11 @@ import {
16
15
BITCOIN_TOTAL_TRANSACTION_FEES_48H ,
17
16
MarketStatisticsContext ,
18
17
TOTAL_CONFIRMATIONS_7D ,
19
- // TOTAL_CONFIRMATIONS_14D,
18
+ TOTAL_CONFIRMATIONS_14D ,
20
19
TOTAL_CONFIRMATIONS_24H ,
21
20
TOTAL_CONFIRMATIONS_48H ,
22
21
TOTAL_VOLUME_7D ,
23
- // TOTAL_VOLUME_14D,
22
+ TOTAL_VOLUME_14D ,
24
23
TOTAL_VOLUME_24H ,
25
24
TOTAL_VOLUME_48H ,
26
25
} from "api/contexts/MarketStatistics" ;
@@ -36,6 +35,8 @@ import { formatBytes } from "components/utils";
36
35
import Banner from "./Banner" ;
37
36
import RecentTransactions from "./RecentTransactions" ;
38
37
38
+ const { Option } = Select ;
39
+
39
40
const HomePage = ( ) => {
40
41
const { t } = useTranslation ( ) ;
41
42
const isSmallAndLower = ! useMediaQuery ( { query : "(min-width: 576px)" } ) ;
@@ -117,31 +118,57 @@ const HomePage = () => {
117
118
. times ( 100 )
118
119
. toNumber ( )
119
120
: 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
+ }
145
172
146
173
React . useEffect ( ( ) => {
147
174
setFormattedLedgerSize ( formatBytes ( ledgerSize ) ) ;
@@ -235,26 +262,27 @@ const HomePage = () => {
235
262
< Card
236
263
size = "small"
237
264
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 = {
249
265
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
+ </ >
258
286
) : null
259
287
}
260
288
>
0 commit comments