Skip to content

F
frontend
Commit 951ac583 authored by tom's avatar tom
Browse files
Options

skeletons for L2 withdrawls

parent c51631f0
Show whitespace changes
Inline Side-by-side
Showing with 132 additions and 79 deletions
pages/l2-withdrawals.tsx
View file @ 951ac583
import type { NextPage } from 'next'; import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import getNetworkTitle from 'lib/networks/getNetworkTitle'; import getNetworkTitle from 'lib/networks/getNetworkTitle';
import L2Withdrawals from 'ui/pages/L2Withdrawals'; import Page from 'ui/shared/Page/Page';
const L2Withdrawals = dynamic(() => import('ui/pages/L2Withdrawals'), { ssr: false });
const WithdrawalsPage: NextPage = () => { const WithdrawalsPage: NextPage = () => {
const title = getNetworkTitle(); const title = getNetworkTitle();
...@@ -12,7 +15,9 @@ const WithdrawalsPage: NextPage = () => { ...@@ -12,7 +15,9 @@ const WithdrawalsPage: NextPage = () => {
<Head> <Head>
<title>{ title }</title> <title>{ title }</title>
</Head> </Head>
<Page>
<L2Withdrawals/> <L2Withdrawals/>
</Page>
</> </>
); );
}; };
......
stubs/L2.ts
View file @ 951ac583
import type { L2DepositsItem } from 'types/api/l2Deposits'; import type { L2DepositsItem } from 'types/api/l2Deposits';
import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals';
import { ADDRESS_HASH } from './addressParams'; import { ADDRESS_HASH, ADDRESS_PARAMS } from './addressParams';
import { TX_HASH } from './tx'; import { TX_HASH } from './tx';
export const L2_DEPOSIT_ITEM: L2DepositsItem = { export const L2_DEPOSIT_ITEM: L2DepositsItem = {
...@@ -11,3 +12,14 @@ export const L2_DEPOSIT_ITEM: L2DepositsItem = { ...@@ -11,3 +12,14 @@ export const L2_DEPOSIT_ITEM: L2DepositsItem = {
l2_tx_gas_limit: '100000', l2_tx_gas_limit: '100000',
l2_tx_hash: TX_HASH, l2_tx_hash: TX_HASH,
}; };
export const L2_WITHDRAWAL_ITEM: L2WithdrawalsItem = {
challenge_period_end: null,
from: ADDRESS_PARAMS,
l1_tx_hash: TX_HASH,
l2_timestamp: '2023-06-01T13:44:56.000000Z',
l2_tx_hash: TX_HASH,
msg_nonce: 2393,
msg_nonce_version: 1,
status: 'Ready to prove',
};
types/api/l2Withdrawals.ts
View file @ 951ac583
...@@ -24,5 +24,4 @@ export type L2WithdrawalsResponse = { ...@@ -24,5 +24,4 @@ export type L2WithdrawalsResponse = {
'items_count': number; 'items_count': number;
'nonce': string; 'nonce': string;
}; };
total: number;
} }
ui/l2Withdrawals/WithdrawalsListItem.tsx
View file @ 951ac583
import { Box, Icon } from '@chakra-ui/react'; import { Skeleton } from '@chakra-ui/react';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import React from 'react'; import React from 'react';
...@@ -10,39 +10,42 @@ import dayjs from 'lib/date/dayjs'; ...@@ -10,39 +10,42 @@ import dayjs from 'lib/date/dayjs';
import Address from 'ui/shared/address/Address'; import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon'; import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink'; import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import LinkExternal from 'ui/shared/LinkExternal'; import LinkExternal from 'ui/shared/LinkExternal';
import LinkInternal from 'ui/shared/LinkInternal'; import LinkInternal from 'ui/shared/LinkInternal';
import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
type Props = { item: L2WithdrawalsItem }; type Props = { item: L2WithdrawalsItem; isLoading?: boolean };
const WithdrawalsListItem = ({ item }: Props) => { const WithdrawalsListItem = ({ item, isLoading }: Props) => {
const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : null; const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : null;
const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : null; const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : null;
return ( return (
<ListItemMobileGrid.Container> <ListItemMobileGrid.Container>
<ListItemMobileGrid.Label>Msg nonce</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Msg nonce</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block">
{ item.msg_nonce_version + '-' + item.msg_nonce } { item.msg_nonce_version + '-' + item.msg_nonce }
</Skeleton>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
{ item.from && ( { item.from && (
<> <>
<ListItemMobileGrid.Label>From</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>From</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value py="3px">
<Address> <Address>
<AddressIcon address={ item.from }/> <AddressIcon address={ item.from } isLoading={ isLoading }/>
<AddressLink hash={ item.from.hash } type="address" truncation="dynamic" ml={ 2 }/> <AddressLink hash={ item.from.hash } type="address" truncation="dynamic" ml={ 2 } isLoading={ isLoading }/>
</Address> </Address>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
</> </>
) } ) }
<ListItemMobileGrid.Label>L2 txn hash</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value py="3px">
<LinkInternal <LinkInternal
href={ route({ pathname: '/tx/[hash]', query: { hash: item.l2_tx_hash } }) } href={ route({ pathname: '/tx/[hash]', query: { hash: item.l2_tx_hash } }) }
display="flex" display="flex"
...@@ -51,37 +54,46 @@ const WithdrawalsListItem = ({ item }: Props) => { ...@@ -51,37 +54,46 @@ const WithdrawalsListItem = ({ item }: Props) => {
overflow="hidden" overflow="hidden"
w="100%" w="100%"
> >
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/> <Icon as={ txIcon } boxSize={ 6 } isLoading={ isLoading }/>
<Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l2_tx_hash }/></Box> <Skeleton isLoaded={ !isLoading } w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap" ml={ 1 }>
<HashStringShortenDynamic hash={ item.l2_tx_hash }/>
</Skeleton>
</LinkInternal> </LinkInternal>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
{ timeAgo && ( { timeAgo && (
<> <>
<ListItemMobileGrid.Label>Age</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>{ timeAgo }</ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
<Skeleton isLoaded={ !isLoading } display="inline-block">
{ timeAgo }
</Skeleton>
</ListItemMobileGrid.Value>
</> </>
) } ) }
<ListItemMobileGrid.Label>Status</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value>
{ item.status === 'Ready for relay' ? { item.status === 'Ready for relay' ?
<LinkExternal href={ appConfig.L2.withdrawalUrl }>{ item.status }</LinkExternal> : <LinkExternal href={ appConfig.L2.withdrawalUrl }>{ item.status }</LinkExternal> :
item.status } <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton> }
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
{ item.l1_tx_hash && ( { item.l1_tx_hash && (
<> <>
<ListItemMobileGrid.Label>L1 txn hash</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value> <ListItemMobileGrid.Value py="3px">
<LinkExternal <LinkExternal
href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) } href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }
maxW="100%" maxW="100%"
display="inline-flex" display="inline-flex"
overflow="hidden" overflow="hidden"
isLoading={ isLoading }
> >
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/> <Icon as={ txIcon } boxSize={ 6 } mr={ 1 } isLoading={ isLoading }/>
<Box w="calc(100% - 44px)" overflow="hidden" whiteSpace="nowrap"><HashStringShortenDynamic hash={ item.l1_tx_hash }/></Box> <Skeleton isLoaded={ !isLoading } w="calc(100% - 44px)" overflow="hidden" whiteSpace="nowrap">
<HashStringShortenDynamic hash={ item.l1_tx_hash }/>
</Skeleton>
</LinkExternal> </LinkExternal>
</ListItemMobileGrid.Value> </ListItemMobileGrid.Value>
</> </>
...@@ -89,7 +101,7 @@ const WithdrawalsListItem = ({ item }: Props) => { ...@@ -89,7 +101,7 @@ const WithdrawalsListItem = ({ item }: Props) => {
{ timeToEnd && ( { timeToEnd && (
<> <>
<ListItemMobileGrid.Label>Time left</ListItemMobileGrid.Label> <ListItemMobileGrid.Label isLoading={ isLoading }>Time left</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value>{ timeToEnd }</ListItemMobileGrid.Value> <ListItemMobileGrid.Value>{ timeToEnd }</ListItemMobileGrid.Value>
</> </>
) } ) }
......
ui/l2Withdrawals/WithdrawalsTable.tsx
View file @ 951ac583
...@@ -10,9 +10,10 @@ import WithdrawalsTableItem from './WithdrawalsTableItem'; ...@@ -10,9 +10,10 @@ import WithdrawalsTableItem from './WithdrawalsTableItem';
type Props = { type Props = {
items: Array<L2WithdrawalsItem>; items: Array<L2WithdrawalsItem>;
top: number; top: number;
isLoading?: boolean;
} }
const WithdrawalsTable = ({ items, top }: Props) => { const WithdrawalsTable = ({ items, top, isLoading }: Props) => {
return ( return (
<Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px"> <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }} minW="950px">
<Thead top={ top }> <Thead top={ top }>
...@@ -27,8 +28,8 @@ const WithdrawalsTable = ({ items, top }: Props) => { ...@@ -27,8 +28,8 @@ const WithdrawalsTable = ({ items, top }: Props) => {
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
{ items.map((item) => ( { items.map((item, index) => (
<WithdrawalsTableItem key={ item.l2_tx_hash } item={ item }/> <WithdrawalsTableItem key={ item.l2_tx_hash + (isLoading ? index : '') } item={ item } isLoading={ isLoading }/>
)) } )) }
</Tbody> </Tbody>
</Table> </Table>
......
ui/l2Withdrawals/WithdrawalsTableItem.tsx
View file @ 951ac583
import { Box, Td, Tr, Text, Icon } from '@chakra-ui/react'; import { Td, Tr, Skeleton } from '@chakra-ui/react';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import React from 'react'; import React from 'react';
...@@ -10,26 +10,27 @@ import dayjs from 'lib/date/dayjs'; ...@@ -10,26 +10,27 @@ import dayjs from 'lib/date/dayjs';
import Address from 'ui/shared/address/Address'; import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon'; import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink'; import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import HashStringShorten from 'ui/shared/HashStringShorten'; import HashStringShorten from 'ui/shared/HashStringShorten';
import LinkExternal from 'ui/shared/LinkExternal'; import LinkExternal from 'ui/shared/LinkExternal';
import LinkInternal from 'ui/shared/LinkInternal'; import LinkInternal from 'ui/shared/LinkInternal';
type Props = { item: L2WithdrawalsItem }; type Props = { item: L2WithdrawalsItem; isLoading?: boolean };
const WithdrawalsTableItem = ({ item }: Props) => { const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : 'N/A'; const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : 'N/A';
const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : ''; const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : '';
return ( return (
<Tr> <Tr>
<Td verticalAlign="middle" fontWeight={ 600 }> <Td verticalAlign="middle" fontWeight={ 600 }>
<Text>{ item.msg_nonce_version + '-' + item.msg_nonce }</Text> <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.msg_nonce_version + '-' + item.msg_nonce }</Skeleton>
</Td> </Td>
<Td verticalAlign="middle"> <Td verticalAlign="middle">
{ item.from ? ( { item.from ? (
<Address> <Address>
<AddressIcon address={ item.from }/> <AddressIcon address={ item.from } isLoading={ isLoading }/>
<AddressLink hash={ item.from.hash } type="address" truncation="constant" ml={ 2 }/> <AddressLink hash={ item.from.hash } type="address" truncation="constant" ml={ 2 } isLoading={ isLoading }/>
</Address> </Address>
) : 'N/A' } ) : 'N/A' }
</Td> </Td>
...@@ -39,33 +40,42 @@ const WithdrawalsTableItem = ({ item }: Props) => { ...@@ -39,33 +40,42 @@ const WithdrawalsTableItem = ({ item }: Props) => {
display="flex" display="flex"
width="fit-content" width="fit-content"
alignItems="center" alignItems="center"
isLoading={ isLoading }
> >
<Icon as={ txIcon } boxSize={ 6 } mr={ 1 }/> <Icon as={ txIcon } boxSize={ 6 } isLoading={ isLoading }/>
<Box w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap"><HashStringShorten hash={ item.l2_tx_hash }/></Box> <Skeleton isLoaded={ !isLoading } w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap" ml={ 1 }>
<HashStringShorten hash={ item.l2_tx_hash }/>
</Skeleton>
</LinkInternal> </LinkInternal>
</Td> </Td>
<Td verticalAlign="middle" pr={ 12 }> <Td verticalAlign="middle" pr={ 12 }>
<Text variant="secondary">{ timeAgo }</Text> <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
<span> { timeAgo }</span>
</Skeleton>
</Td> </Td>
<Td verticalAlign="middle"> <Td verticalAlign="middle">
{ item.status === 'Ready for relay' ? { item.status === 'Ready for relay' ?
<LinkExternal href={ appConfig.L2.withdrawalUrl }>{ item.status }</LinkExternal> : <LinkExternal href={ appConfig.L2.withdrawalUrl }>{ item.status }</LinkExternal> :
<Text>{ item.status }</Text> <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
} }
</Td> </Td>
<Td verticalAlign="middle"> <Td verticalAlign="middle">
{ item.l1_tx_hash ? ( { item.l1_tx_hash ? (
<LinkExternal <LinkExternal
href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) } href={ appConfig.L2.L1BaseUrl + route({ pathname: '/tx/[hash]', query: { hash: item.l1_tx_hash } }) }
isLoading={ isLoading }
display="inline-flex"
> >
<Skeleton isLoaded={ !isLoading }>
<HashStringShorten hash={ item.l1_tx_hash }/> <HashStringShorten hash={ item.l1_tx_hash }/>
</Skeleton>
</LinkExternal> </LinkExternal>
) : ) :
'N/A' 'N/A'
} }
</Td> </Td>
<Td verticalAlign="middle"> <Td verticalAlign="middle">
<Text variant="secondary">{ timeToEnd }</Text> <Skeleton isLoaded={ !isLoading } color="text_secondary" minW="50px" minH="20px" display="inline-block">{ timeToEnd }</Skeleton>
</Td> </Td>
</Tr> </Tr>
); );
......
ui/pages/L2Deposits.tsx
View file @ 951ac583
...@@ -71,11 +71,11 @@ const L2Deposits = () => { ...@@ -71,11 +71,11 @@ const L2Deposits = () => {
const actionBar = ( const actionBar = (
<> <>
<Box mb={ 6 } display={{ base: 'flex', lg: 'none' }}> <Box mb={ 6 } display={{ base: 'block', lg: 'none' }}>
{ text } { text }
</Box> </Box>
<ActionBar mt={ -6 }> <ActionBar mt={ -6 }>
<Box display={{ base: 'none', lg: 'flex' }}> <Box display={{ base: 'none', lg: 'block' }}>
{ text } { text }
</Box> </Box>
{ isPaginationVisible && <Pagination ml="auto" { ...pagination }/> } { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
......
ui/pages/L2Withdrawals.tsx
View file @ 951ac583
import { Flex, Hide, Show, Skeleton, Text } from '@chakra-ui/react'; import { Box, Hide, Show, Skeleton } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import useIsMobile from 'lib/hooks/useIsMobile';
import useQueryWithPages from 'lib/hooks/useQueryWithPages'; import useQueryWithPages from 'lib/hooks/useQueryWithPages';
import { rightLineArrow, nbsp } from 'lib/html-entities'; import { rightLineArrow, nbsp } from 'lib/html-entities';
import { L2_WITHDRAWAL_ITEM } from 'stubs/L2';
import { generateListStub } from 'stubs/utils';
import WithdrawalsListItem from 'ui/l2Withdrawals/WithdrawalsListItem'; import WithdrawalsListItem from 'ui/l2Withdrawals/WithdrawalsListItem';
import WithdrawalsTable from 'ui/l2Withdrawals/WithdrawalsTable'; import WithdrawalsTable from 'ui/l2Withdrawals/WithdrawalsTable';
import ActionBar from 'ui/shared/ActionBar'; import ActionBar from 'ui/shared/ActionBar';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import Page from 'ui/shared/Page/Page';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/Pagination'; import Pagination from 'ui/shared/Pagination';
const L2Withdrawals = () => { const L2Withdrawals = () => {
const isMobile = useIsMobile(); const { data, isError, isPlaceholderData, isPaginationVisible, pagination } = useQueryWithPages({
const { data, isError, isLoading, isPaginationVisible, pagination } = useQueryWithPages({
resourceName: 'l2_withdrawals', resourceName: 'l2_withdrawals',
options: {
placeholderData: generateListStub<'l2_withdrawals'>(
L2_WITHDRAWAL_ITEM,
50,
{
next_page_params: {
items_count: 50,
nonce: '',
},
},
),
},
}); });
const countersQuery = useApiQuery('l2_withdrawals_count'); const countersQuery = useApiQuery('l2_withdrawals_count', {
queryOptions: {
placeholderData: 23700,
},
});
const content = data?.items ? ( const content = data?.items ? (
<> <>
<Show below="lg" ssr={ false }>{ data.items.map((item => <WithdrawalsListItem key={ item.l2_tx_hash } item={ item }/>)) }</Show> <Show below="lg" ssr={ false }>{ data.items.map(((item, index) => (
<Hide below="lg" ssr={ false }><WithdrawalsTable items={ data.items } top={ isPaginationVisible ? 80 : 0 }/></Hide> <WithdrawalsListItem
key={ item.l2_tx_hash + (isPlaceholderData ? index : '') }
item={ item }
isLoading={ isPlaceholderData }
/>
))) }</Show>
<Hide below="lg" ssr={ false }>
<WithdrawalsTable items={ data.items } top={ isPaginationVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
</Hide>
</> </>
) : null; ) : null;
const text = (() => { const text = (() => {
if (countersQuery.isLoading) {
return (
<Skeleton
w={{ base: '100%', lg: '320px' }}
h="24px"
mb={{ base: 6, lg: isPaginationVisible ? 0 : 7 }}
mt={{ base: 0, lg: isPaginationVisible ? 0 : 7 }}
/>
);
}
if (countersQuery.isError) { if (countersQuery.isError) {
return null; return null;
} }
return ( return (
<Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}> <Skeleton
A total of { countersQuery.data.toLocaleString() } withdrawals found isLoaded={ !countersQuery.isPlaceholderData }
</Text> display="inline-block"
>
A total of { countersQuery.data?.toLocaleString() } withdrawals found
</Skeleton>
); );
})(); })();
const actionBar = ( const actionBar = (
<> <>
{ (isMobile || !isPaginationVisible) && text } <Box mb={ 6 } display={{ base: 'block', lg: 'none' }}>
{ isPaginationVisible && ( { text }
</Box>
<ActionBar mt={ -6 }> <ActionBar mt={ -6 }>
<Flex alignItems="center" justifyContent="space-between" w="100%"> <Box display={{ base: 'none', lg: 'block' }}>
{ !isMobile && text } { text }
<Pagination ml="auto" { ...pagination }/> </Box>
</Flex> { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
</ActionBar> </ActionBar>
) }
</> </>
); );
return ( return (
<Page> <>
<PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/> <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
<DataListDisplay <DataListDisplay
isError={ isError } isError={ isError }
isLoading={ isLoading } isLoading={ false }
items={ data?.items } items={ data?.items }
skeletonProps={{ skeletonDesktopColumns: Array(7).fill(`${ 100 / 7 }%`), skeletonDesktopMinW: '950px' }} skeletonProps={{ skeletonDesktopColumns: Array(7).fill(`${ 100 / 7 }%`), skeletonDesktopMinW: '950px' }}
emptyText="There are no withdrawals." emptyText="There are no withdrawals."
content={ content } content={ content }
actionBar={ actionBar } actionBar={ actionBar }
/> />
</Page> </>
); );
}; };
......
ui/shared/LinkExternal.tsx
View file @ 951ac583
...@@ -15,7 +15,7 @@ const LinkExternal = ({ href, children, className, isLoading }: Props) => { ...@@ -15,7 +15,7 @@ const LinkExternal = ({ href, children, className, isLoading }: Props) => {
return ( return (
<Box className={ className } fontSize="sm" lineHeight={ 5 } display="inline-block" alignItems="center"> <Box className={ className } fontSize="sm" lineHeight={ 5 } display="inline-block" alignItems="center">
{ children } { children }
<Skeleton boxSize={ 4 } verticalAlign="middle"/> <Skeleton boxSize={ 4 } verticalAlign="middle" display="inline-block"/>
</Box> </Box>
); );
} }
......
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