diff --git a/lib/block/getBlockReward.ts b/lib/block/getBlockReward.ts
index dfe2558232..89ea14bbd3 100644
--- a/lib/block/getBlockReward.ts
+++ b/lib/block/getBlockReward.ts
@@ -4,6 +4,7 @@ import type { Block } from 'types/api/block';
export default function getBlockReward(block: Block) {
const txFees = BigNumber(block.transaction_fees || 0);
+ const priorityFee = BigNumber(block.priority_fee || 0);
const burntFees = BigNumber(block.burnt_fees || 0);
const minerReward = block.rewards?.find(({ type }) => type === 'Miner Reward' || type === 'Validator Reward')?.reward;
const totalReward = BigNumber(minerReward || 0);
@@ -14,5 +15,6 @@ export default function getBlockReward(block: Block) {
staticReward,
txFees,
burntFees,
+ priorityFee,
};
}
diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx
index 8784919bea..4959d76653 100644
--- a/ui/block/BlockDetails.tsx
+++ b/ui/block/BlockDetails.tsx
@@ -78,8 +78,17 @@ const BlockDetails = ({ query }: Props) => {
const validatorTitle = getNetworkValidatorTitle();
+ const shouldHideRewardBreakdown = () => {
+ return (
+ rollupFeature.isEnabled ||
+ totalReward.isEqualTo(ZERO) ||
+ txFees.isEqualTo(ZERO) ||
+ burntFees.isEqualTo(ZERO)
+ ) && data.withdrawals_count === 0;
+ };
+
const rewardBreakDown = (() => {
- if (rollupFeature.isEnabled || totalReward.isEqualTo(ZERO) || txFees.isEqualTo(ZERO) || burntFees.isEqualTo(ZERO)) {
+ if (shouldHideRewardBreakdown()) {
return null;
}
@@ -345,19 +354,26 @@ const BlockDetails = ({ query }: Props) => {
) }
- { !rollupFeature.isEnabled && !totalReward.isEqualTo(ZERO) && (
+ { !rollupFeature.isEnabled && (data.withdrawals_count ?? 0) > 0 && (
<>
0 && data.burnt_fees !== '0' ?
+ `For each block, the ${ validatorTitle } is rewarded with a finite amount of ${ config.chain.currency.symbol || 'native token' }
+ on top of the fees paid for all transactions in the block` :
+ 'Mining rewards'
}
isLoading={ isPlaceholderData }
>
Block reward
-
+ 0 && data.burnt_fees !== '0' ? '140px' : '24px' }
+ minW={{ base: '100%', md: '400px' }}
+ w={{ base: '100%', md: 'min-content' }}
+ >
{ rewardBreakDown }
diff --git a/ui/block/BlockRewards.tsx b/ui/block/BlockRewards.tsx
index af863e2a6f..db665be5a8 100644
--- a/ui/block/BlockRewards.tsx
+++ b/ui/block/BlockRewards.tsx
@@ -158,7 +158,7 @@ const KDABlockRewards = ({ query }: Props) => {
const handleBurntFeesValuesMouseLeave = useCallback(() => onMouseLeaveValues(burntFeesValuesRef), [ onMouseLeaveValues ]);
if (isLoading) {
- return ;
+ return ;
}
if (!calculatedValues) {
@@ -170,110 +170,118 @@ const KDABlockRewards = ({ query }: Props) => {
{ rewardAmount } { currencyUnits.ether }
-
-
- Breakdown{ space }
-
-
-
-
-
-
- Mining reward
-
-
-
- +
-
-
-
-
- Transaction fees
-
-
-
- -
-
-
-
-
- Burnt fees
-
-
-
-
-
- { hasRewardBaseFee && (
-
-
-
- Reward fee:
-
- { rewardBaseFee }
-
-
- )
- }
- { space }+{ space }
- { hasTxFees && (
-
-
-
- Transaction fees:
-
- { txFees }
-
-
- ) }
- { space }-{ space }
- { hasBurntFees && (
-
-
-
- Burnt fees:{ ' ' }
-
- { burntFees }
-
-
+ { hasTxFees && hasBurntFees && (
+
+
+ Breakdown{ space }
+
+
+
+
+
+
+ Mining reward
+
+
+
+ +
+
+
+
+
+ Transaction fees
+
+
+
+ -
+
+
+
+
+ Burnt fees
+
+
+
+
+ { hasTxFees && hasBurntFees && (
+
+ { hasRewardBaseFee && (
+
+
+
+ Reward fee:
+
+ { rewardBaseFee }
+
+
+ )
+ }
+ { hasTxFees && (
+ <>
+ { space }+{ space }
+
+
+
+ Transaction fees:
+
+ { txFees }
+
+
+
+ ) }
+ { hasBurntFees && (
+ <>
+ { space }-{ space }
+
+
+
+ Burnt fees:{ ' ' }
+
+ { burntFees }
+
+
+
+ ) }
+
) }
-
+ isLoading={ isLoading }
+ />
) }
- isLoading={ isLoading }
- />
-
+
+ ) }
);
};
diff --git a/ui/block/useKDABlockRewards.tsx b/ui/block/useKDABlockRewards.tsx
index 34e5012ca4..af4defff80 100644
--- a/ui/block/useKDABlockRewards.tsx
+++ b/ui/block/useKDABlockRewards.tsx
@@ -1,10 +1,12 @@
import BigNumber from 'bignumber.js';
+import { useRouter } from 'next/router';
import { useMemo } from 'react';
import useApiQuery from 'lib/api/useApiQuery';
+import getBlockReward from 'lib/block/getBlockReward';
+import getQueryParamString from 'lib/router/getQueryParamString';
import { WEI, ZERO } from 'toolkit/utils/consts';
-import getBlockReward from '../../lib/block/getBlockReward';
import type { BlockQuery } from './useBlockQuery';
export type TKDABlockRewardsData = {
@@ -24,22 +26,26 @@ export type TKDABlockRewardsData = {
burntFees: BigNumber;
hasRewardBaseFee: boolean;
hasTxFees: boolean;
+ hasPriorityFee: boolean;
hasBurntFees: boolean;
} | null;
formattedValues: {
rewardAmount?: string;
rewardBaseFee?: string;
txFees?: string;
+ priorityFee?: string;
burntFees?: string;
};
};
export const useKDABlockRewardsData = (query: BlockQuery): TKDABlockRewardsData => {
+ const router = useRouter();
const { data, isLoading: queryIsLoading } = query;
+ const heightOrHash = getQueryParamString(router.query.height_or_hash ?? data?.height.toString() ?? data?.hash ?? '');
const { data: withdrawalsData, isLoading: withdrawalsIsLoading } = useApiQuery('general:block_withdrawals', {
- queryParams: { height_or_hash: `${ data?.height }` },
+ queryParams: { height_or_hash: heightOrHash },
});
- const { totalReward, burntFees, txFees } = data ? getBlockReward(data) : { totalReward: ZERO, burntFees: ZERO, txFees: ZERO };
+ const { totalReward, burntFees, txFees, priorityFee } = data ? getBlockReward(data) : { totalReward: ZERO, burntFees: ZERO, txFees: ZERO, priorityFee: ZERO };
const calculatedValues = useMemo(() => {
if (!withdrawalsData?.items?.length) {
@@ -47,19 +53,21 @@ export const useKDABlockRewardsData = (query: BlockQuery): TKDABlockRewardsData
}
const [ reward ] = withdrawalsData.items;
- const rewardAmount = BigNumber(reward.amount ?? 0);
+ const rewardAmount = BigNumber((reward.amount ?? 0)).plus(priorityFee.toNumber());
const rewardBaseFee = BigNumber(rewardAmount.toNumber() - totalReward.toNumber() + burntFees.toNumber());
return {
rewardAmount: rewardAmount.dividedBy(WEI),
rewardBaseFee: rewardBaseFee.dividedBy(WEI),
txFees: txFees.dividedBy(WEI),
+ priorityFee: priorityFee.dividedBy(WEI),
burntFees: burntFees.dividedBy(WEI),
hasRewardBaseFee: !rewardBaseFee.isEqualTo(ZERO),
hasTxFees: !txFees.isEqualTo(ZERO),
+ hasPriorityFee: !priorityFee.isEqualTo(ZERO),
hasBurntFees: !burntFees.isEqualTo(ZERO),
};
- }, [ withdrawalsData, totalReward, burntFees, txFees ]);
+ }, [ withdrawalsData, totalReward, burntFees, txFees, priorityFee ]);
return {
isLoading: withdrawalsIsLoading || queryIsLoading,
@@ -76,6 +84,7 @@ export const useKDABlockRewardsData = (query: BlockQuery): TKDABlockRewardsData
rewardAmount: calculatedValues?.rewardAmount ? BigNumber(calculatedValues.rewardAmount).toFixed() : undefined,
rewardBaseFee: calculatedValues?.rewardBaseFee ? BigNumber(calculatedValues.rewardBaseFee).toFixed() : undefined,
txFees: calculatedValues?.txFees ? BigNumber(calculatedValues.txFees).toFixed() : undefined,
+ priorityFee: calculatedValues?.priorityFee ? BigNumber(calculatedValues.priorityFee).toFixed() : undefined,
burntFees: calculatedValues?.burntFees ? BigNumber(calculatedValues.burntFees).toFixed() : undefined,
},
};