Skip to content

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

action bar fix

parent 01c7603b
Hide whitespace changes
Inline Side-by-side
Showing with 65 additions and 100 deletions
ui/pages/L2Deposits.tsx
View file @ 814090be
import { Box, Hide, Show, Skeleton } from '@chakra-ui/react';
import { Hide, Show, Skeleton } from '@chakra-ui/react';
import React from 'react';
import useApiQuery from 'lib/api/useApiQuery';
......@@ -7,11 +7,10 @@ import { L2_DEPOSIT_ITEM } from 'stubs/L2';
import { generateListStub } from 'stubs/utils';
import DepositsListItem from 'ui/l2Deposits/DepositsListItem';
import DepositsTable from 'ui/l2Deposits/DepositsTable';
import ActionBar from 'ui/shared/ActionBar';
import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
const L2Deposits = () => {
const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
......@@ -69,19 +68,7 @@ const L2Deposits = () => {
);
})();
const actionBar = (
<>
<Box mb={ 6 } display={{ base: 'block', lg: 'none' }}>
{ text }
</Box>
<ActionBar mt={ -6 }>
<Box display={{ base: 'none', lg: 'block' }}>
{ text }
</Box>
{ pagination.isVisible && <Pagination ml="auto" { ...pagination }/> }
</ActionBar>
</>
);
const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
return (
<>
......
ui/pages/L2OutputRoots.tsx
View file @ 814090be
import { Box, Hide, Show, Skeleton, Text } from '@chakra-ui/react';
import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
import React from 'react';
import useApiQuery from 'lib/api/useApiQuery';
......@@ -6,11 +6,10 @@ import { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2';
import { generateListStub } from 'stubs/utils';
import OutputRootsListItem from 'ui/l2OutputRoots/OutputRootsListItem';
import OutputRootsTable from 'ui/l2OutputRoots/OutputRootsTable';
import ActionBar from 'ui/shared/ActionBar';
import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
const L2OutputRoots = () => {
const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
......@@ -67,19 +66,7 @@ const L2OutputRoots = () => {
);
})();
const actionBar = (
<>
<Box mb={ 6 } display={{ base: 'block', lg: 'none' }}>
{ text }
</Box>
<ActionBar mt={ -6 } alignItems="center">
<Box display={{ base: 'none', lg: 'block' }}>
{ text }
</Box>
{ pagination.isVisible && <Pagination ml="auto" { ...pagination }/> }
</ActionBar>
</>
);
const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
return (
<>
......
ui/pages/L2TxnBatches.tsx
View file @ 814090be
import { Box, Hide, Show, Skeleton, Text } from '@chakra-ui/react';
import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
import React from 'react';
import useApiQuery from 'lib/api/useApiQuery';
......@@ -7,11 +7,10 @@ import { L2_TXN_BATCHES_ITEM } from 'stubs/L2';
import { generateListStub } from 'stubs/utils';
import TxnBatchesListItem from 'ui/l2TxnBatches/TxnBatchesListItem';
import TxnBatchesTable from 'ui/l2TxnBatches/TxnBatchesTable';
import ActionBar from 'ui/shared/ActionBar';
import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
const L2TxnBatches = () => {
const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
......@@ -66,19 +65,7 @@ const L2TxnBatches = () => {
);
})();
const actionBar = (
<>
<Box mb={ 6 } display={{ base: 'block', lg: 'none' }}>
{ text }
</Box>
<ActionBar mt={ -6 } alignItems="center">
<Box display={{ base: 'none', lg: 'block' }}>
{ text }
</Box>
{ pagination.isVisible && <Pagination ml="auto" { ...pagination }/> }
</ActionBar>
</>
);
const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
return (
<>
......
ui/pages/L2Withdrawals.tsx
View file @ 814090be
import { Box, Hide, Show, Skeleton } from '@chakra-ui/react';
import { Hide, Show, Skeleton } from '@chakra-ui/react';
import React from 'react';
import useApiQuery from 'lib/api/useApiQuery';
......@@ -7,11 +7,10 @@ import { L2_WITHDRAWAL_ITEM } from 'stubs/L2';
import { generateListStub } from 'stubs/utils';
import WithdrawalsListItem from 'ui/l2Withdrawals/WithdrawalsListItem';
import WithdrawalsTable from 'ui/l2Withdrawals/WithdrawalsTable';
import ActionBar from 'ui/shared/ActionBar';
import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
const L2Withdrawals = () => {
const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
......@@ -66,19 +65,7 @@ const L2Withdrawals = () => {
);
})();
const actionBar = (
<>
<Box mb={ 6 } display={{ base: 'block', lg: 'none' }}>
{ text }
</Box>
<ActionBar mt={ -6 }>
<Box display={{ base: 'none', lg: 'block' }}>
{ text }
</Box>
{ pagination.isVisible && <Pagination ml="auto" { ...pagination }/> }
</ActionBar>
</>
);
const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
return (
<>
......
ui/pages/Withdrawals.tsx
View file @ 814090be
import { Flex, Hide, Show, Skeleton, Text } from '@chakra-ui/react';
import { Hide, Show, Skeleton, Text } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
import config from 'configs/app';
import useApiQuery from 'lib/api/useApiQuery';
import getCurrencyValue from 'lib/getCurrencyValue';
import useIsMobile from 'lib/hooks/useIsMobile';
import { generateListStub } from 'stubs/utils';
import { WITHDRAWAL } from 'stubs/withdrawals';
import ActionBar from 'ui/shared/ActionBar';
import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem';
import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
const feature = config.features.beaconChain;
const Withdrawals = () => {
const isMobile = useIsMobile();
const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
resourceName: 'withdrawals',
options: {
......@@ -31,7 +27,14 @@ const Withdrawals = () => {
},
});
const countersQuery = useApiQuery('withdrawals_counters');
const countersQuery = useApiQuery('withdrawals_counters', {
queryOptions: {
placeholderData: {
withdrawal_count: '19091878',
withdrawal_sum: '4630710684332438',
},
},
});
const content = data?.items ? (
<>
......@@ -52,43 +55,23 @@ const Withdrawals = () => {
) : null;
const text = (() => {
if (countersQuery.isLoading) {
return (
<Skeleton
w={{ base: '100%', lg: '320px' }}
h="24px"
mb={{ base: 6, lg: pagination.isVisible ? 0 : 7 }}
mt={{ base: 0, lg: pagination.isVisible ? 0 : 7 }}
/>
);
}
if (countersQuery.isError || !feature.isEnabled) {
return null;
}
const { valueStr } = getCurrencyValue({ value: countersQuery.data.withdrawal_sum });
return (
<Text mb={{ base: 6, lg: pagination.isVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}>
{ BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed
and { valueStr } { feature.currency.symbol } withdrawn
</Text>
<Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
{ countersQuery.data && (
<Text lineHeight={{ base: '24px', lg: '32px' }}>
{ BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed
and { getCurrencyValue({ value: countersQuery.data.withdrawal_sum }).valueStr } { feature.currency.symbol } withdrawn
</Text>
) }
</Skeleton>
);
})();
const actionBar = (
<>
{ (isMobile || !pagination.isVisible) && text }
{ pagination.isVisible && (
<ActionBar mt={ -6 }>
<Flex alignItems="center" justifyContent="space-between" w="100%">
{ !isMobile && text }
<Pagination ml="auto" { ...pagination }/>
</Flex>
</ActionBar>
) }
</>
);
const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
return (
<>
......
ui/shared/StickyPaginationWithText.tsx 0 → 100644
View file @ 814090be
import { Box } from '@chakra-ui/react';
import React from 'react';
import type { PaginationParams } from './pagination/types';
import ActionBar from './ActionBar';
import Pagination from './pagination/Pagination';
type Props = {
pagination: PaginationParams;
text: React.ReactNode;
}
const TextSeparator = ({ pagination, text }: Props) => {
if (!pagination.isVisible) {
return <Box mb={ 6 }>{ text }</Box>;
}
return (
<>
<Box mb={ 6 } display={{ base: 'block', lg: 'none' }}>
{ text }
</Box>
<ActionBar mt={ -6 } alignItems="center">
<Box display={{ base: 'none', lg: 'block' }}>
{ text }
</Box>
{ pagination.isVisible && <Pagination ml="auto" { ...pagination }/> }
</ActionBar>
</>
);
};
export default TextSeparator;
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