Skip to content

F
frontend
Commit f92012f4 authored by Igor Stuev's avatar Igor Stuev Committed by GitHub
Browse files
Options

Merge pull request #2047 from blockscout/arbitrum-update 

arbitrum updates
parents e9e48266 df4699d4
Show whitespace changes
Inline Side-by-side
Showing with 157 additions and 18 deletions
configs/envs/.env.arbitrum
View file @ f92012f4
# Set of ENVs for Optimism (dev only)
# https://optimism.blockscout.com/
# Set of ENVs for Arbitrum (dev only)
# https://arbitrum.blockscout.com/
# app configuration
NEXT_PUBLIC_APP_PROTOCOL=http
......
mocks/arbitrum/txnBatches.ts
View file @ f92012f4
......@@ -2,7 +2,7 @@ import type { ArbitrumL2TxnBatchesItem, ArbitrumL2TxnBatchesResponse } from 'typ
export const finalized: ArbitrumL2TxnBatchesItem = {
number: 12345,
block_count: 12345,
blocks_count: 12345,
transactions_count: 10000,
commitment_transaction: {
block_number: 12345,
......@@ -14,7 +14,7 @@ export const finalized: ArbitrumL2TxnBatchesItem = {
export const unfinalized: ArbitrumL2TxnBatchesItem = {
number: 12344,
block_count: 10000,
blocks_count: 10000,
transactions_count: 103020,
commitment_transaction: {
block_number: 12340,
......
stubs/arbitrumL2.ts
View file @ f92012f4
......@@ -15,7 +15,7 @@ export const ARBITRUM_MESSAGES_ITEM: ArbitrumL2MessagesItem = {
export const ARBITRUM_L2_TXN_BATCHES_ITEM: ArbitrumL2TxnBatchesItem = {
number: 12345,
block_count: 12345,
blocks_count: 12345,
transactions_count: 10000,
commitment_transaction: {
block_number: 12345,
......
types/api/arbitrumL2.ts
View file @ f92012f4
......@@ -34,7 +34,7 @@ type ArbitrumL2BatchCommitmentTx = {
}
export type ArbitrumL2TxnBatchesItem = {
block_count: number;
blocks_count: number;
commitment_transaction: ArbitrumL2BatchCommitmentTx;
number: number;
transactions_count: number;
......
ui/block/BlockDetails.tsx
View file @ f92012f4
......@@ -24,6 +24,7 @@ import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
......@@ -188,6 +189,20 @@ const BlockDetails = ({ query }: Props) => {
/>
</DetailsInfoItem.Value>
{ rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
<>
<DetailsInfoItem.Label
hint="The most recent L1 block height as of this L2 block"
isLoading={ isPlaceholderData }
>
L1 block height
</DetailsInfoItem.Label>
<DetailsInfoItem.Value>
<BlockEntityL1 isLoading={ isPlaceholderData } number={ data.arbitrum.l1_block_height }/>
</DetailsInfoItem.Value>
</>
) }
{ rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && !config.UI.views.block.hiddenFields?.batch && (
<>
<DetailsInfoItem.Label
......@@ -667,6 +682,40 @@ const BlockDetails = ({ query }: Props) => {
</>
) }
{ rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
<>
<DetailsInfoItem.Label
hint="The cumulative number of L2 to L1 transactions as of this block"
isLoading={ isPlaceholderData }
>
Send count
</DetailsInfoItem.Label>
<DetailsInfoItem.Value>
{ data.arbitrum.send_count.toLocaleString() }
</DetailsInfoItem.Value>
<DetailsInfoItem.Label
hint="The root of the Merkle accumulator representing all L2 to L1 transactions as of this block"
isLoading={ isPlaceholderData }
>
Send root
</DetailsInfoItem.Label>
<DetailsInfoItem.Value>
{ data.arbitrum.send_root }
</DetailsInfoItem.Value>
<DetailsInfoItem.Label
hint="The number of delayed L1 to L2 messages read as of this block"
isLoading={ isPlaceholderData }
>
Delayed messages
</DetailsInfoItem.Label>
<DetailsInfoItem.Value>
{ data.arbitrum.delayed_messages.toLocaleString() }
</DetailsInfoItem.Value>
</>
) }
{ !config.UI.views.block.hiddenFields?.nonce && (
<>
<DetailsInfoItem.Label
......
ui/shared/statusTag/ArbitrumL2MessageStatus.tsx
View file @ f92012f4
......@@ -12,18 +12,36 @@ export interface Props {
const ArbitrumL2MessageStatus = ({ status, isLoading }: Props) => {
let type: StatusTagType;
let text: string;
switch (status) {
case 'relayed':
case 'confirmed':
case 'relayed': {
type = 'ok';
text = 'Relayed';
break;
}
case 'confirmed': {
type = 'ok';
text = 'Ready for relay';
break;
}
case 'sent': {
type = 'pending';
text = 'Waiting';
break;
}
case 'initiated': {
type = 'pending';
text = 'Pending';
break;
}
default:
type = 'pending';
text = status;
break;
}
return <StatusTag type={ type } text={ status } isLoading={ isLoading }/>;
return <StatusTag type={ type } text={ text } isLoading={ isLoading }/>;
};
export default ArbitrumL2MessageStatus;
ui/tx/details/TxInfo.tsx
View file @ f92012f4
......@@ -570,6 +570,42 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
</>
) }
{ rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
<>
<DetailsInfoItem.Label
hint="Fee paid to the poster for L1 resources"
isLoading={ isLoading }
>
Poster fee
</DetailsInfoItem.Label>
<DetailsInfoItem.Value>
<CurrencyValue
value={ data.arbitrum.poster_fee }
currency={ currencyUnits.ether }
exchangeRate={ data.exchange_rate }
flexWrap="wrap"
isLoading={ isLoading }
/>
</DetailsInfoItem.Value>
<DetailsInfoItem.Label
hint="Fee paid to the network for L2 resources"
isLoading={ isLoading }
>
Network fee
</DetailsInfoItem.Label>
<DetailsInfoItem.Value>
<CurrencyValue
value={ data.arbitrum.network_fee }
currency={ currencyUnits.ether }
exchangeRate={ data.exchange_rate }
flexWrap="wrap"
isLoading={ isLoading }
/>
</DetailsInfoItem.Value>
</>
) }
<TxDetailsGasPrice gasPrice={ data.gas_price } isLoading={ isLoading }/>
<TxDetailsFeePerGas txFee={ data.fee.value } gasUsed={ data.gas_used } isLoading={ isLoading }/>
......@@ -587,6 +623,42 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
<Utilization ml={ 4 } value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() } isLoading={ isLoading }/>
</DetailsInfoItem.Value>
{ rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && data.gas_used && (
<>
<DetailsInfoItem.Label
hint="L2 gas set aside for L1 data charges"
isLoading={ isLoading }
>
Gas used for L1
</DetailsInfoItem.Label>
<DetailsInfoItem.Value>
<Skeleton isLoaded={ !isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l1 || 0).toFormat() }</Skeleton>
<TextSeparator/>
<Utilization
ml={ 4 }
value={ BigNumber(data.arbitrum.gas_used_for_l1 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() }
isLoading={ isLoading }
/>
</DetailsInfoItem.Value>
<DetailsInfoItem.Label
hint="L2 gas spent on L2 resources"
isLoading={ isLoading }
>
Gas used for L2
</DetailsInfoItem.Label>
<DetailsInfoItem.Value>
<Skeleton isLoaded={ !isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l2 || 0).toFormat() }</Skeleton>
<TextSeparator/>
<Utilization
ml={ 4 }
value={ BigNumber(data.arbitrum.gas_used_for_l2 || 0).dividedBy(BigNumber(data.gas_used)).toNumber() }
isLoading={ isLoading }
/>
</DetailsInfoItem.Value>
</>
) }
{ !config.UI.views.tx.hiddenFields?.gas_fees &&
(data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && (
<>
......
ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx
View file @ f92012f4
......@@ -103,7 +103,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
<DetailsInfoItem.Value>
<Skeleton isLoaded={ !isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
{ data.transactions_count } transaction{ data.transactions_count === 1 ? '' : 's' }
{ data.transactions_count.toLocaleString() } transaction{ data.transactions_count === 1 ? '' : 's' }
</LinkInternal>
</Skeleton>
</DetailsInfoItem.Value>
......@@ -117,7 +117,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
<DetailsInfoItem.Value>
<Skeleton isLoaded={ !isPlaceholderData }>
<LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'blocks' } }) }>
{ blocksCount } block{ blocksCount === 1 ? '' : 's' }
{ blocksCount.toLocaleString() } block{ blocksCount === 1 ? '' : 's' }
</LinkInternal>
</Skeleton>
</DetailsInfoItem.Value>
......
ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx
View file @ f92012f4
......@@ -54,11 +54,11 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
/>
</ListItemMobileGrid.Value>
{ item.block_count && (
{ item.blocks_count && (
<>
<ListItemMobileGrid.Label isLoading={ isLoading }>L2 block txn count</ListItemMobileGrid.Label>
<ListItemMobileGrid.Label isLoading={ isLoading }>Block count</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block">{ item.block_count }</Skeleton>
<Skeleton isLoaded={ !isLoading } display="inline-block">{ item.blocks_count.toLocaleString() }</Skeleton>
</ListItemMobileGrid.Value>
</>
) }
......@@ -87,7 +87,7 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
fontWeight={ 600 }
>
<Skeleton isLoaded={ !isLoading } minW="40px">
{ item.transactions_count }
{ item.transactions_count.toLocaleString() }
</Skeleton>
</LinkInternal>
</ListItemMobileGrid.Value>
......
ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx
View file @ f92012f4
......@@ -21,7 +21,7 @@ const ArbitrumL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
<Th>Batch #</Th>
<Th>L1 status</Th>
<Th>L1 block</Th>
<Th>L2 block txn count</Th>
<Th>Block count</Th>
<Th>L1 transaction</Th>
<Th>Age</Th>
<Th>Txn count</Th>
......
ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx
View file @ f92012f4
......@@ -48,7 +48,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
/>
</Td>
<Td verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } display="inline-block">{ item.block_count || 'N/A' }</Skeleton>
<Skeleton isLoaded={ !isLoading } display="inline-block">{ item.blocks_count ? item.blocks_count.toLocaleString() : 'N/A' }</Skeleton>
</Td>
<Td pr={ 12 } verticalAlign="middle">
<TxEntityL1
......@@ -70,7 +70,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
isLoading={ isLoading }
>
<Skeleton isLoaded={ !isLoading } minW="40px">
{ item.transactions_count }
{ item.transactions_count.toLocaleString() }
</Skeleton>
</LinkInternal>
</Td>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment