@@ -30,42 +30,59 @@ export default function Stats() {
3030 args : [ 'https://eth.blockscout.com/api/v2/stats/charts/market' ] ,
3131 } ) ;
3232 const ethSupply = ethSupplyData . value ? + ethSupplyData . value . available_supply : undefined ;
33+ const ethSupplyFormatted = ethSupply ?
34+ `Ξ${ ethSupply . toLocaleString ( 'en-US' , { maximumFractionDigits : 2 , } ) } : undefined ;
3335
3436 const pricesAndTxsData = useDataState < PricesAndTxsData , [ string ] > ( {
3537 args : [ 'https://eth.blockscout.com/api/v2/stats' ] ,
3638 } ) ;
3739
38- let ethPrice : number | undefined = undefined ;
39- let averageGasPrice , transactionsToday , totalTransactions ;
40+ let ethPrice : number | undefined ;
41+ let ethPriceFormatted : string ;
42+ let averageGasPrice : number ;
43+ let averageGasPriceFormatted : string ;
44+ let transactionsToday : string ;
45+ let totalTransactions : string ;
4046
4147 if ( pricesAndTxsData . value ) {
4248 ethPrice = + pricesAndTxsData . value . coin_price ;
49+ ethPriceFormatted = ethPrice . toLocaleString ( 'en-US' , {
50+ style : 'currency' ,
51+ currency : 'USD' ,
52+ } )
4353 averageGasPrice = + pricesAndTxsData . value . gas_prices . average ;
54+ averageGasPriceFormatted = `${ getGasPriceGwei ( averageGasPrice ) } ${ getGasPriceUsd ( averageGasPrice , ethPrice ) }
4455 transactionsToday = ( + pricesAndTxsData . value . transactions_today ) . toLocaleString ( 'en-US' ) ;
4556 totalTransactions = ( + pricesAndTxsData . value . total_transactions ) . toLocaleString ( 'en-US' ) ;
4657 }
4758
48- // Since ethMarketCap is dependent on both fetches / DataStates, we need a new
59+ const ethMarketCapFormatted = ( ethPrice && ethSupply ) ?
60+ ( ethPrice * ethSupply ) . toLocaleString ( 'en-US' , {
61+ style : 'currency' ,
62+ currency : 'USD' ,
63+ } ) : undefined ;
64+
65+ // Since ethMarketCapFormatted is dependent on both fetches / DataStates, we need a new
4966 // DataState for it to correctly render when it is in Error or Loading states.
50- // Contrary to `useDataState`, `DataState.Init ` just creates the (undefined) DataState
51- // from the fetcher, without actually running the fetcher:
52- let ethMarketCapData = DataState . useConfig < any > ( {
67+ // Contrary to `useDataState`, `DataState.useConfig() ` just creates the (undefined) DataState
68+ // (LoadingRoot) from the fetcher, without actually running the fetcher:
69+ const ethMarketCapData = DataState . useConfig < any > ( {
5370 fetcher : async ( ) => await Promise . all ( [ pricesAndTxsData . fetch ( ) , ethSupplyData . fetch ( ) ] )
5471 } ) ;
5572
5673 // Give it a correct value if both fetches have already succeeded or an error if not:
5774 // (This requires `useEffect` because of setValue/setError)
5875 useEffect ( ( ) => {
59- if ( ethPrice && ethSupply ) {
60- ethMarketCapData . setValue ( [ ethPrice , ethSupply ] ) ;
76+ if ( ethMarketCapFormatted ) {
77+ ethMarketCapData . setValue ( ethMarketCapFormatted ) ;
6178 }
6279 if ( pricesAndTxsData . error || ethSupplyData . error ) {
6380 ethMarketCapData . setError ( 'Price or supply fetch failed' ) ;
6481 }
6582 // Dont include `ethMarketCapData` as a dependency as `react-hooks` says,
6683 // or it'll cause an infinite loop!
6784 // eslint-disable-next-line react-hooks/exhaustive-deps
68- } , [ ethPrice , ethSupply ] ) ;
85+ } , [ ethMarketCapFormatted ] ) ;
6986
7087 return (
7188 < div className = 'border border-(--border-color) bg-(--comp-bg-color)
@@ -75,35 +92,21 @@ export default function Stats() {
7592 label = 'ETHER PRICE'
7693 icon = { < CurrencyDollarIcon className = 'w-8 h-8' /> }
7794 dataState = { pricesAndTxsData }
78- value = { ( ) =>
79- ethPrice ! . toLocaleString ( 'en-US' , {
80- style : 'currency' ,
81- currency : 'USD' ,
82- } )
83- }
95+ value = { ( ) => ethPriceFormatted }
8496 className = 'md:border-b'
8597 />
8698 < StatCard
8799 label = 'ETHER SUPPLY'
88100 icon = { < div className = 'w-8 h-8 bg-(image:--eth-logo-url) bg-contain bg-no-repeat bg-center' /> }
89101 dataState = { ethSupplyData }
90- value = { ( ) =>
91- `Ξ${ ethSupply ! . toLocaleString ( 'en-US' , {
92- maximumFractionDigits : 2 ,
93- } ) } `
94- }
102+ value = { ( ) => ethSupplyFormatted }
95103 className = 'md:border-b md:border-x'
96104 />
97105 < StatCard
98106 label = 'ETHER MARKET CAP'
99107 icon = { < GlobeAltIcon className = 'w-8 h-8' /> }
100108 dataState = { ethMarketCapData }
101- value = { ( ) =>
102- ( ethPrice ! * ethSupply ! ) . toLocaleString ( 'en-US' , {
103- style : 'currency' ,
104- currency : 'USD' ,
105- } )
106- }
109+ value = { ( ) => ethMarketCapFormatted }
107110 className = 'md:border-b'
108111 />
109112 </ div >
@@ -116,22 +119,22 @@ export default function Stats() {
116119 value = { ( ) =>
117120 < Link href = '/mainnet/gastracker'
118121 className = 'text-(--link-color) hover:text-(--hover-fg-color)' >
119- { getGasPriceGwei ( averageGasPrice ! ) } { getGasPriceUsd ( averageGasPrice ! , ethPrice ! ) }
122+ { averageGasPriceFormatted }
120123 </ Link >
121124 }
122125 />
123126 < StatCard
124127 label = 'TRANSACTIONS TODAY'
125128 icon = { < ClipboardDocumentListIcon className = 'w-8 h-8' /> }
126129 dataState = { pricesAndTxsData }
127- value = { ( ) => transactionsToday ! }
130+ value = { ( ) => transactionsToday }
128131 className = 'md:border-x'
129132 />
130133 < StatCard
131134 label = 'TOTAL TRANSACTIONS'
132135 icon = { < Square3Stack3DIcon className = 'w-8 h-8' /> }
133136 dataState = { pricesAndTxsData }
134- value = { ( ) => totalTransactions ! }
137+ value = { ( ) => totalTransactions }
135138 />
136139 </ div >
137140 </ div >
0 commit comments