diff --git a/src/components/tables/LatestBlocksTable/LatestBlockTable.stories.ts b/src/components/tables/LatestBlocksTable/LatestBlockTable.stories.ts index b8e4128..ad9b979 100644 --- a/src/components/tables/LatestBlocksTable/LatestBlockTable.stories.ts +++ b/src/components/tables/LatestBlocksTable/LatestBlockTable.stories.ts @@ -5,84 +5,144 @@ import type { Meta, StoryObj } from '@storybook/react' const data: Block[] = [ { slot: 1, - proposer: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'mev', reward: 0.32, blockType: 'okpoolproposal', }, { slot: 2, - proposer: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'vanila', reward: 2.12, blockType: 'missedproposal', }, { slot: 3, - proposer: '0x7915e43086Cd78Be341Df73726C0947B6334b978', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'mev', reward: 0.32, blockType: 'wrongfeerecipient', }, { slot: 4, - proposer: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'mev', reward: 0.32, blockType: 'okpoolproposal', }, { slot: 5, - proposer: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'vanila', reward: 2.12, blockType: 'missedproposal', }, { slot: 6, - proposer: '0x7915e43086Cd78Be341Df73726C0947B6334b978', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'mev', reward: 0.32, blockType: 'wrongfeerecipient', }, { slot: 7, - proposer: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'mev', reward: 0.32, blockType: 'okpoolproposal', }, { slot: 8, - proposer: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'vanila', reward: 2.12, blockType: 'missedproposal', }, { slot: 9, - proposer: '0x7915e43086Cd78Be341Df73726C0947B6334b978', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'mev', reward: 0.32, blockType: 'wrongfeerecipient', }, { slot: 10, - proposer: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'mev', reward: 0.32, blockType: 'okpoolproposal', }, { slot: 11, - proposer: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'vanila', reward: 2.12, blockType: 'missedproposal', }, { slot: 12, - proposer: '0x7915e43086Cd78Be341Df73726C0947B6334b978', + proposer: { + withdrawalAddress: '0x00005ea00ac477b1030ce78506496e8c2de24bf5', + validatorKey: + '0xa62c5914723e36eef425e1ada8b42aa24d2b1fd4f3025e5fc814f78212b7edfd3dfc5e09609de0d6a3de28d3a10bc7cb', + validatorIndex: 1, + }, rewardType: 'mev', reward: 0.32, blockType: 'wrongfeerecipient', diff --git a/src/components/tables/LatestBlocksTable/config.ts b/src/components/tables/LatestBlocksTable/config.ts index 8851e90..b9849b4 100644 --- a/src/components/tables/LatestBlocksTable/config.ts +++ b/src/components/tables/LatestBlocksTable/config.ts @@ -2,7 +2,7 @@ export const PAGE_SIZE = 10 export const headerTooltip = { slot: 'Slot of the block', - proposer: 'Address of the validator', + proposer: 'Key of the validator', rewardType: 'Type of the reward (vanila or mev)', reward: 'Reward of the block', } diff --git a/src/components/tables/LatestBlocksTable/index.tsx b/src/components/tables/LatestBlocksTable/index.tsx index bf1f8e3..49be375 100644 --- a/src/components/tables/LatestBlocksTable/index.tsx +++ b/src/components/tables/LatestBlocksTable/index.tsx @@ -11,7 +11,7 @@ import { useReactTable, } from '@tanstack/react-table' import { useSearchInput } from '@/hooks/useSearchInput' -import { addEthSuffix } from '@/utils/web3' +import { addEthSuffix, shortenEthAddress } from '@/utils/web3' import { toFixedNoTrailingZeros } from '@/utils/decimals' import { getBeaconChainExplorer } from '@/utils/config' import type { Block } from '../types' @@ -43,10 +43,10 @@ const getColumns = (blackExplorerUrl?: string) => [ return ( - {proposer.toLocaleString()} + {shortenEthAddress(proposer.validatorKey.toLocaleString())} ) }, @@ -96,7 +96,7 @@ export function LatestBlocksTable({ () => data ?.filter((row) => { - const address = row.proposer.toLowerCase() + const address = row.proposer.withdrawalAddress.toLowerCase() const search = debouncedSearchInput.toLowerCase() return ( address.includes(search) && diff --git a/src/components/tables/types.ts b/src/components/tables/types.ts index 74a067d..ae364d7 100644 --- a/src/components/tables/types.ts +++ b/src/components/tables/types.ts @@ -2,12 +2,18 @@ import type { Warnings } from './MyValidatorsTable/components/WarningIcon' export interface Block { slot: number - proposer: `0x${string}` + proposer: Proposer rewardType: 'vanila' | 'mev' | '' reward: number blockType: 'okpoolproposal' | 'missedproposal' | 'wrongfeerecipient' } +interface Proposer { + withdrawalAddress: `0x${string}` + validatorKey: `0x${string}` + validatorIndex: number +} + export interface Validator { address: `0x${string}` pending: number diff --git a/src/components/views/LatestBlocksSP.tsx b/src/components/views/LatestBlocksSP.tsx index 09ca00d..7b7280a 100644 --- a/src/components/views/LatestBlocksSP.tsx +++ b/src/components/views/LatestBlocksSP.tsx @@ -1,12 +1,10 @@ import { LatestBlocksTable } from '../tables/LatestBlocksTable' import { useQuery } from '@tanstack/react-query' -import { useNetwork } from 'wagmi' import type { Block } from '@/components/tables/types' import { fetchAllBlocks } from '@/client/api/queryFunctions' import { weiToEth } from '@/utils/web3' export function LatestBlocksSP() { - const { chain } = useNetwork() const { data, isLoading } = useQuery({ queryKey: ['latest-blocks'], queryFn: fetchAllBlocks, @@ -16,10 +14,22 @@ export function LatestBlocksSP() { if (data) { blocks = data.map( - ({ slot, withdrawalAddress, rewardType, rewardWei, blockType }) => ({ + ({ + slot, + withdrawalAddress, + validatorKey, + validatorIndex, + rewardType, + rewardWei, + blockType, + }) => ({ blockType, slot, - proposer: withdrawalAddress as `0x${string}`, + proposer: { + withdrawalAddress: withdrawalAddress as `0x${string}`, + validatorKey: validatorKey as `0x${string}`, + validatorIndex: validatorIndex as number, + }, rewardType, reward: weiToEth(rewardWei), }) @@ -29,7 +39,7 @@ export function LatestBlocksSP() { return (