Skip to content

F
frontend
Commit aa932910 authored by isstuev's avatar isstuev
Browse files
Options

fix

parent b0fb59e1
Hide whitespace changes
Inline Side-by-side
Showing with 51 additions and 61 deletions
lib/date/dayjs.ts
View file @ aa932910
......@@ -38,7 +38,7 @@ dayjs.updateLocale('en', {
relativeTime: {
s: 'a sec',
ss: '%d secs',
future: '%s left',
future: 'in %s',
past: '%s ago',
m: '1 min',
mm: '%d mins',
......
mocks/withdrawals/withdrawals.ts
View file @ aa932910
......@@ -12,8 +12,8 @@ export const data = {
public_tags: [],
watchlist_names: [],
},
l1_tx_hash: null,
l2_timestamp: '2023-02-15T12:50:02.000000Z',
l1_tx_hash: '0x1a235bee32ac10cb7efdad98415737484ca66386e491cde9e17d42b136dca684',
l2_timestamp: '2022-02-15T12:50:02.000000Z',
l2_tx_hash: '0x918cd8c5c24c17e06cd02b0379510c4ad56324bf153578fb9caaaa2fe4e7dc35',
msg_nonce: 396,
msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620172',
......@@ -40,7 +40,7 @@ export const data = {
msg_nonce: 390,
msg_nonce_raw: '1766847064778384329583297500742918515827483896875618958121606201292620166',
msg_nonce_version: 1,
status: 'Ready for Relay',
status: 'Ready for relay',
},
],
next_page_params: {
......
types/api/withdrawals.ts
View file @ aa932910
......@@ -13,7 +13,7 @@ export type WithdrawalsItem = {
export type WithdrawalStatus =
'In challenge period' |
'Ready for Relay' |
'Ready for relay' |
'Relayed' |
'Waiting for state root' |
'Ready to prove';
......
ui/pages/Withdrawals.tsx
View file @ aa932910
......@@ -49,7 +49,7 @@ const Withdrawals = () => {
</Flex>
</ActionBar>
) }
<Show below="lg" ssr={ false }>{ data.items.map((item => <WithdrawalsListItem key={ item.l2_tx_hash } { ...item }/>)) }</Show>
<Show below="lg" ssr={ false }>{ data.items.map((item => <WithdrawalsListItem key={ item.l2_tx_hash } item={ item }/>)) }</Show>
<Hide below="lg" ssr={ false }><WithdrawalsTable items={ data.items } top={ isPaginationVisible ? 80 : 0 }/></Hide>
</>
);
......
ui/withdrawals/WithdrawalsListItem.tsx
View file @ aa932910
/* eslint-disable @typescript-eslint/naming-convention */
import { Box, Flex, Text, HStack, Icon } from '@chakra-ui/react';
import { route } from 'nextjs-routes';
import React from 'react';
......@@ -17,61 +16,57 @@ import LinkExternal from 'ui/shared/LinkExternal';
import LinkInternal from 'ui/shared/LinkInternal';
import ListItemMobile from 'ui/shared/ListItemMobile';
type Props = WithdrawalsItem;
type Props = { item: WithdrawalsItem };
const WithdrawalsListItem = ({
msg_nonce,
msg_nonce_version,
l1_tx_hash,
l2_timestamp,
l2_tx_hash,
from,
status,
challenge_period_end,
}: Props) => {
const timeAgo = useTimeAgoIncrement(l2_timestamp, false);
const timeToEnd = dayjs(challenge_period_end).fromNow();
const WithdrawalsListItem = ({ item }: Props) => {
const timeAgo = useTimeAgoIncrement(item.l2_timestamp, false);
const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : '';
return (
<ListItemMobile rowGap={ 3 }>
<Flex alignItems="center" justifyContent="space-between" w="100%">
<LinkInternal href={ route({ pathname: '/tx/[hash]', query: { hash: l2_tx_hash } }) } display="flex" alignItems="center">
<LinkInternal
href={ route({ pathname: '/tx/[hash]', query: { hash: item.l2_tx_hash } }) }
display="flex"
width="fit-content"
alignItems="center"
>
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
<Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShorten hash={ l2_tx_hash }/></Box>
<Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShorten hash={ item.l2_tx_hash }/></Box>
</LinkInternal>
<Text variant="secondary">{ timeAgo }</Text>
</Flex>
<HStack spacing={ 3 } width="100%">
<Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">Msg nonce</Text>
<Text variant="secondary">{ msg_nonce_version + '-' + msg_nonce }</Text>
<Text variant="secondary">{ item.msg_nonce_version + '-' + item.msg_nonce }</Text>
</HStack>
<HStack spacing={ 3 } width="100%">
<Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">Status</Text>
{ status === 'Ready for Relay' ?
<LinkExternal href={ appConfig.L2.withdrawalUrl }>{ status }</LinkExternal> :
<Text variant="secondary">{ status }</Text>
{ item.status === 'Ready for relay' ?
<LinkExternal href={ appConfig.L2.withdrawalUrl }>{ item.status }</LinkExternal> :
<Text variant="secondary">{ item.status }</Text>
}
</HStack>
{ from && (
{ item.from && (
<HStack spacing={ 3 } width="100%">
<Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">From</Text>
<Address>
<AddressIcon address={ from }/>
<AddressLink hash={ from.hash } type="address" truncation="constant" ml={ 2 }/>
<AddressIcon address={ item.from }/>
<AddressLink hash={ item.from.hash } type="address" truncation="constant" ml={ 2 }/>
</Address>
</HStack>
) }
{ l1_tx_hash && (
{ item.l1_tx_hash && (
<HStack spacing={ 3 } width="100%">
<Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">L1 txn hash</Text>
<LinkExternal
href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: l1_tx_hash } }) }
href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }
>
<HashStringShorten hash={ l1_tx_hash }/>
<HashStringShorten hash={ item.l1_tx_hash }/>
</LinkExternal>
</HStack>
) }
{ challenge_period_end && (
{ item.challenge_period_end && (
<HStack spacing={ 3 } width="100%">
<Text fontSize="sm" fontWeight={ 500 } whiteSpace="nowrap">Time left</Text>
<Text variant="secondary">{ timeToEnd }</Text>
......
ui/withdrawals/WithdrawalsTable.tsx
View file @ aa932910
......@@ -28,7 +28,7 @@ const WithdrawalsTable = ({ items, top }: Props) => {
</Thead>
<Tbody>
{ items.map((item) => (
<WithdrawalsTableItem key={ item.l2_tx_hash } { ...item }/>
<WithdrawalsTableItem key={ item.l2_tx_hash } item={ item }/>
)) }
</Tbody>
</Table>
......
ui/withdrawals/WithdrawalsTableItem.tsx
View file @ aa932910
/* eslint-disable @typescript-eslint/naming-convention */
import { Box, Td, Tr, Text, Icon } from '@chakra-ui/react';
import { route } from 'nextjs-routes';
import React from 'react';
......@@ -7,6 +6,7 @@ import type { WithdrawalsItem } from 'types/api/withdrawals';
import appConfig from 'configs/app/config';
import txIcon from 'icons/transactions.svg';
import dayjs from 'lib/date/dayjs';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
......@@ -15,56 +15,51 @@ import HashStringShorten from 'ui/shared/HashStringShorten';
import LinkExternal from 'ui/shared/LinkExternal';
import LinkInternal from 'ui/shared/LinkInternal';
type Props = WithdrawalsItem;
type Props = { item: WithdrawalsItem };
const WithdrawalsTableItem = ({
msg_nonce,
msg_nonce_version,
l1_tx_hash,
l2_timestamp,
l2_tx_hash,
from,
status,
challenge_period_end,
}: Props) => {
const timeAgo = useTimeAgoIncrement(l2_timestamp, false) || 'N/A';
const timeToEnd = useTimeAgoIncrement(challenge_period_end, false) || '-';
// const timeToEnd = challenge_period_end ? dayjs(challenge_period_end).fromNow() : '-';
const WithdrawalsTableItem = ({ item }: Props) => {
const timeAgo = useTimeAgoIncrement(item.l2_timestamp, false) || 'N/A';
const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : '-';
return (
<Tr>
<Td verticalAlign="middle" fontWeight={ 600 }>
<Text>{ msg_nonce_version + '-' + msg_nonce }</Text>
<Text>{ item.msg_nonce_version + '-' + item.msg_nonce }</Text>
</Td>
<Td verticalAlign="middle">
{ from ? (
{ item.from ? (
<Address>
<AddressIcon address={ from }/>
<AddressLink hash={ from.hash } type="address" truncation="constant" ml={ 2 }/>
<AddressIcon address={ item.from }/>
<AddressLink hash={ item.from.hash } type="address" truncation="constant" ml={ 2 }/>
</Address>
) : 'N/A' }
</Td>
<Td verticalAlign="middle">
<LinkInternal href={ route({ pathname: '/tx/[hash]', query: { hash: l2_tx_hash } }) } display="flex" alignItems="center">
<LinkInternal
href={ route({ pathname: '/tx/[hash]', query: { hash: item.l2_tx_hash } }) }
display="flex"
width="fit-content"
alignItems="center"
>
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/>
<Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShorten hash={ l2_tx_hash }/></Box>
<Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShorten hash={ item.l2_tx_hash }/></Box>
</LinkInternal>
</Td>
<Td verticalAlign="middle" pr={ 12 }>
<Text variant="secondary">{ timeAgo }</Text>
</Td>
<Td verticalAlign="middle">
{ status === 'Ready for Relay' ?
<LinkExternal href={ appConfig.L2.withdrawalUrl }>{ status }</LinkExternal> :
<Text>{ status }</Text>
{ item.status === 'Ready for relay' ?
<LinkExternal href={ appConfig.L2.withdrawalUrl }>{ item.status }</LinkExternal> :
<Text>{ item.status }</Text>
}
</Td>
<Td verticalAlign="middle">
{ l1_tx_hash ? (
{ item.l1_tx_hash ? (
<LinkExternal
href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: l1_tx_hash } }) }
href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }
>
<HashStringShorten hash={ l1_tx_hash }/>
<HashStringShorten hash={ item.l1_tx_hash }/>
</LinkExternal>
) :
'N/A'
......
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