11import { chakra , Text } from '@chakra-ui/react' ;
2- import BigNumber from 'bignumber.js' ;
3- import React , { useCallback , useMemo } from 'react' ;
2+ import React , { useCallback } from 'react' ;
43
5- import useApiQuery from 'lib/api/useApiQuery' ;
64import { currencyUnits } from 'lib/units' ;
75import { Skeleton } from 'toolkit/chakra/skeleton' ;
86import { Tooltip } from 'toolkit/chakra/tooltip' ;
97import { Hint } from 'toolkit/components/Hint/Hint' ;
10- import { WEI , ZERO } from 'toolkit/utils/consts' ;
118import { space } from 'toolkit/utils/htmlEntities' ;
129
13- import getBlockReward from '../../lib/block/getBlockReward' ;
1410import RawDataSnippet from '../shared/RawDataSnippet' ;
1511import type { BlockQuery } from './useBlockQuery' ;
12+ import { useKDABlockRewardsData } from './useKDABlockRewards' ;
1613
1714interface Props {
1815 query : BlockQuery ;
@@ -21,33 +18,6 @@ interface Props {
2118type MouseEnterLeaveHandler = ( event : React . MouseEvent < HTMLDivElement > ) => void ;
2219type MouseEnterLeaveLabelHandler = ( event : React . MouseEvent < HTMLSpanElement > ) => void ;
2320
24- type TKDABlockRewardsData = {
25- isLoading : boolean ;
26- loading : {
27- queryIsLoading : boolean ;
28- withdrawalsIsLoading : boolean ;
29- } ;
30- data : {
31- blockData ?: BlockQuery [ 'data' ] ;
32- withdrawalsData ?: { items : Array < { amount ?: string } > } ;
33- } ;
34- calculatedValues : {
35- rewardAmount : BigNumber ;
36- rewardBaseFee : BigNumber ;
37- txFees : BigNumber ;
38- burntFees : BigNumber ;
39- hasRewardBaseFee : boolean ;
40- hasTxFees : boolean ;
41- hasBurntFees : boolean ;
42- } | null ;
43- formattedValues : {
44- rewardAmount ?: string ;
45- rewardBaseFee ?: string ;
46- txFees ?: string ;
47- burntFees ?: string ;
48- } ;
49- } ;
50-
5121interface TKDABreakdownItemProps {
5222 isLoading : boolean ;
5323 onMouseEnter ?: MouseEnterLeaveHandler ;
@@ -116,55 +86,7 @@ const BreakdownLabel = React.forwardRef<HTMLSpanElement, BreakdownLabelProps>(({
11686
11787BreakdownLabel . displayName = 'BreakdownLabel' ;
11888
119- export const KDABlockRewardsData = ( query : BlockQuery ) : TKDABlockRewardsData => {
120- const { data, isLoading : queryIsLoading } = query ;
121-
122- const { data : withdrawalsData , isLoading : withdrawalsIsLoading } = useApiQuery ( 'general:block_withdrawals' , {
123- queryParams : { height_or_hash : `${ data ?. height } ` } ,
124- } ) ;
125- const { totalReward, burntFees, txFees } = data ? getBlockReward ( data ) : { totalReward : ZERO , burntFees : ZERO , txFees : ZERO } ;
126-
127- const calculatedValues = useMemo ( ( ) => {
128- if ( ! withdrawalsData ?. items ?. length ) {
129- return null ;
130- }
131-
132- const [ reward ] = withdrawalsData . items ;
133- const rewardAmount = BigNumber ( reward . amount ?? 0 ) ;
134- const rewardBaseFee = BigNumber ( rewardAmount . toNumber ( ) - totalReward . toNumber ( ) + burntFees . toNumber ( ) ) ;
135-
136- return {
137- rewardAmount : rewardAmount . dividedBy ( WEI ) ,
138- rewardBaseFee : rewardBaseFee . dividedBy ( WEI ) ,
139- txFees : txFees . dividedBy ( WEI ) ,
140- burntFees : burntFees . dividedBy ( WEI ) ,
141- hasRewardBaseFee : ! rewardBaseFee . isEqualTo ( ZERO ) ,
142- hasTxFees : ! txFees . isEqualTo ( ZERO ) ,
143- hasBurntFees : ! burntFees . isEqualTo ( ZERO ) ,
144- } ;
145- } , [ withdrawalsData , totalReward , burntFees , txFees ] ) ;
146-
147- return {
148- isLoading : withdrawalsIsLoading || queryIsLoading ,
149- loading : {
150- queryIsLoading,
151- withdrawalsIsLoading,
152- } ,
153- data : {
154- blockData : data ,
155- withdrawalsData,
156- } ,
157- calculatedValues,
158- formattedValues : {
159- rewardAmount : calculatedValues ?. rewardAmount ? BigNumber ( calculatedValues . rewardAmount ) . toFixed ( ) : undefined ,
160- rewardBaseFee : calculatedValues ?. rewardBaseFee ? BigNumber ( calculatedValues . rewardBaseFee ) . toFixed ( ) : undefined ,
161- txFees : calculatedValues ?. txFees ? BigNumber ( calculatedValues . txFees ) . toFixed ( ) : undefined ,
162- burntFees : calculatedValues ?. burntFees ? BigNumber ( calculatedValues . burntFees ) . toFixed ( ) : undefined ,
163- } ,
164- } ;
165- } ;
166-
167- const KDABlockRewards = ( { query /* data, txFees, burntFees, totalReward */ } : Props ) => {
89+ const KDABlockRewards = ( { query } : Props ) => {
16890 const blockRewardValuesRef = React . useRef < HTMLDivElement > ( null ) ;
16991 const blockRewardLabelRef = React . useRef < HTMLSpanElement > ( null ) ;
17092 const txFeesValuesRef = React . useRef < HTMLDivElement > ( null ) ;
@@ -181,7 +103,8 @@ const KDABlockRewards = ({ query /* data, txFees, burntFees, totalReward */ }: P
181103 txFees,
182104 burntFees,
183105 } ,
184- } = KDABlockRewardsData ( query ) ;
106+ } = useKDABlockRewardsData ( query ) ;
107+
185108 const {
186109 hasRewardBaseFee,
187110 hasTxFees,
@@ -260,7 +183,7 @@ const KDABlockRewards = ({ query /* data, txFees, burntFees, totalReward */ }: P
260183 < Text color = "text.primary" fontSize = "sm" display = "inline" fontFamily = "var(--global-font-body, var(--font-fallback))" >
261184 < chakra . span whiteSpace = "nowrap" >
262185 < Hint label = "PoW mining reward" />
263- Block reward
186+ Mining reward
264187 </ chakra . span >
265188 </ Text >
266189 </ KDABreakdownItem >
0 commit comments