diff --git a/lib/api/resources.ts b/lib/api/resources.ts index 826046f9ac..761e41efd0 100644 --- a/lib/api/resources.ts +++ b/lib/api/resources.ts @@ -42,12 +42,12 @@ import type { AddressesResponse, AddressesMetadataSearchResult, AddressesMetadat import type { AddressMetadataInfo, PublicTagTypesResponse } from 'types/api/addressMetadata'; import type { ArbitrumL2MessagesResponse, - ArbitrumL2MessagesItem, ArbitrumL2TxnBatch, ArbitrumL2TxnBatchesResponse, ArbitrumL2BatchTxs, ArbitrumL2BatchBlocks, ArbitrumL2TxnBatchesItem, + ArbitrumLatestDepositsResponse, } from 'types/api/arbitrumL2'; import type { TxBlobs, Blob } from 'types/api/blobs'; import type { @@ -1028,7 +1028,7 @@ Q extends 'homepage_blocks' ? Array : Q extends 'homepage_txs' ? Array : Q extends 'homepage_txs_watchlist' ? Array : Q extends 'homepage_optimistic_deposits' ? Array : -Q extends 'homepage_arbitrum_deposits' ? { items: Array } : +Q extends 'homepage_arbitrum_deposits' ? ArbitrumLatestDepositsResponse : Q extends 'homepage_zkevm_l2_batches' ? { items: Array } : Q extends 'homepage_arbitrum_l2_batches' ? { items: Array} : Q extends 'homepage_indexing_status' ? IndexingStatus : diff --git a/mocks/arbitrum/deposits.ts b/mocks/arbitrum/deposits.ts index 8bc7f290e8..b1f47d3f76 100644 --- a/mocks/arbitrum/deposits.ts +++ b/mocks/arbitrum/deposits.ts @@ -1,4 +1,4 @@ -import type { ArbitrumL2MessagesResponse } from 'types/api/arbitrumL2'; +import type { ArbitrumL2MessagesResponse, ArbitrumLatestDepositsResponse } from 'types/api/arbitrumL2'; export const baseResponse: ArbitrumL2MessagesResponse = { items: [ @@ -27,3 +27,20 @@ export const baseResponse: ArbitrumL2MessagesResponse = { direction: 'to-rollup', }, }; + +export const latestDepositsResponse: ArbitrumLatestDepositsResponse = { + items: [ + { + completion_transaction_hash: '0x3ccdf87449d3de6a9dcd3eddb7bc9ecdf1770d4631f03cdf12a098911618d138', + origination_transaction_block_number: 123400, + origination_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436', + origination_timestamp: '2023-06-01T14:46:48.000000Z', + }, + { + completion_transaction_hash: '0xd16d918b2f95a5cdf66824f6291b6d5eb80b6f4acab3f9fb82ee0ec4109646a0', + origination_timestamp: null, + origination_transaction_block_number: null, + origination_transaction_hash: null, + }, + ], +}; diff --git a/types/api/arbitrumL2.ts b/types/api/arbitrumL2.ts index 5effbcbb7f..5d64d35516 100644 --- a/types/api/arbitrumL2.ts +++ b/types/api/arbitrumL2.ts @@ -1,12 +1,23 @@ import type { Block } from './block'; import type { Transaction } from './transaction'; +export interface ArbitrumLatestDepositsItem { + completion_transaction_hash: string; + origination_timestamp: string | null; + origination_transaction_block_number: number | null; + origination_transaction_hash: string | null; +} + +export interface ArbitrumLatestDepositsResponse { + items: Array; +} + export type ArbitrumL2MessagesItem = { completion_transaction_hash: string | null; id: number; origination_address: string; origination_timestamp: string | null; - origination_transaction_block_number: number; + origination_transaction_block_number: number | null; origination_transaction_hash: string; status: 'initiated' | 'sent' | 'confirmed' | 'relayed'; } diff --git a/ui/home/latestDeposits/LatestArbitrumDeposits.pw.tsx b/ui/home/latestDeposits/LatestArbitrumDeposits.pw.tsx new file mode 100644 index 0000000000..496a215603 --- /dev/null +++ b/ui/home/latestDeposits/LatestArbitrumDeposits.pw.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import * as depositMock from 'mocks/arbitrum/deposits'; +import { ENVS_MAP } from 'playwright/fixtures/mockEnvs'; +import { test, expect } from 'playwright/lib'; + +import LatestArbitrumDeposits from './LatestArbitrumDeposits'; + +test('default view +@mobile', async({ render, mockApiResponse, mockEnvs }) => { + await mockEnvs(ENVS_MAP.arbitrumRollup); + mockApiResponse('homepage_arbitrum_deposits', depositMock.latestDepositsResponse); + const component = await render(); + await expect(component).toHaveScreenshot(); +}); diff --git a/ui/home/latestDeposits/LatestDeposits.tsx b/ui/home/latestDeposits/LatestDeposits.tsx index 0ed6f84a23..7d1dd44112 100644 --- a/ui/home/latestDeposits/LatestDeposits.tsx +++ b/ui/home/latestDeposits/LatestDeposits.tsx @@ -2,6 +2,7 @@ import { Box, Flex, Grid, + GridItem, Skeleton, } from '@chakra-ui/react'; import React from 'react'; @@ -17,9 +18,9 @@ import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice'; import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip'; type DepositsItem = { - l1BlockNumber: number; - l1TxHash: string; - l2TxHash: string | null; + l1BlockNumber: number | null; + l1TxHash: string | null; + l2TxHash: string; timestamp: string | null; } @@ -38,7 +39,7 @@ type ItemProps = { const LatestDepositsItem = ({ item, isLoading }: ItemProps) => { const isMobile = useIsMobile(); - const l1BlockLink = ( + const l1BlockLink = item.l1BlockNumber ? ( { lineHeight={ 5 } fontWeight={ 700 } /> + ) : ( + ); - const l1TxLink = ( + const l1TxLink = item.l1TxHash ? ( { lineHeight={ 5 } truncation={ isMobile ? 'constant_long' : 'dynamic' } /> + ) : ( + ); - const l2TxLink = item.l2TxHash ? ( + const l2TxLink = ( { lineHeight={ 5 } truncation={ isMobile ? 'constant_long' : 'dynamic' } /> - ) : null; + ); const content = (() => { if (isMobile) { @@ -74,11 +93,13 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => { <> { l1BlockLink } - + { item.timestamp ? ( + + ) : } @@ -101,14 +122,16 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => { L1 txn { l1TxLink } - + { item.timestamp ? ( + + ) : } L2 txn diff --git a/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_default_default-view-mobile-1.png b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_default_default-view-mobile-1.png new file mode 100644 index 0000000000..3eaa7443a3 Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_default_default-view-mobile-1.png differ diff --git a/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_mobile_default-view-mobile-1.png b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_mobile_default-view-mobile-1.png new file mode 100644 index 0000000000..9cd7e2103e Binary files /dev/null and b/ui/home/latestDeposits/__screenshots__/LatestArbitrumDeposits.pw.tsx_mobile_default-view-mobile-1.png differ diff --git a/ui/messages/ArbitrumL2MessagesListItem.tsx b/ui/messages/ArbitrumL2MessagesListItem.tsx index 422366dac0..d291efc9fe 100644 --- a/ui/messages/ArbitrumL2MessagesListItem.tsx +++ b/ui/messages/ArbitrumL2MessagesListItem.tsx @@ -33,13 +33,15 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => { <> L1 block - + { item.origination_transaction_block_number ? ( + + ) : N/A } ) } @@ -84,14 +86,18 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => { ) } - Age - - - + { item.origination_timestamp && ( + <> + Age + + + + + ) } Status diff --git a/ui/messages/ArbitrumL2MessagesTableItem.tsx b/ui/messages/ArbitrumL2MessagesTableItem.tsx index fbd4f13ef9..a59319ef31 100644 --- a/ui/messages/ArbitrumL2MessagesTableItem.tsx +++ b/ui/messages/ArbitrumL2MessagesTableItem.tsx @@ -29,14 +29,16 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => { { direction === 'to-rollup' && ( - + { item.origination_transaction_block_number ? ( + + ) : N/A } ) } { direction === 'from-rollup' && ( diff --git a/ui/shared/entities/block/BlockEntity.tsx b/ui/shared/entities/block/BlockEntity.tsx index 60753d128c..ed42f62700 100644 --- a/ui/shared/entities/block/BlockEntity.tsx +++ b/ui/shared/entities/block/BlockEntity.tsx @@ -50,7 +50,7 @@ const Content = chakra((props: ContentProps) => { const Container = EntityBase.Container; export interface EntityProps extends EntityBase.EntityBaseProps { - number: number; + number: number | string; hash?: string; }