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 React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
...@@ -7,11 +7,10 @@ import { L2_DEPOSIT_ITEM } from 'stubs/L2'; ...@@ -7,11 +7,10 @@ import { L2_DEPOSIT_ITEM } from 'stubs/L2';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import DepositsListItem from 'ui/l2Deposits/DepositsListItem'; import DepositsListItem from 'ui/l2Deposits/DepositsListItem';
import DepositsTable from 'ui/l2Deposits/DepositsTable'; import DepositsTable from 'ui/l2Deposits/DepositsTable';
import ActionBar from 'ui/shared/ActionBar';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
const L2Deposits = () => { const L2Deposits = () => {
const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({ const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
...@@ -69,19 +68,7 @@ const L2Deposits = () => { ...@@ -69,19 +68,7 @@ const L2Deposits = () => {
); );
})(); })();
const actionBar = ( const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
<>
<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>
</>
);
return ( 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 React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
...@@ -6,11 +6,10 @@ import { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2'; ...@@ -6,11 +6,10 @@ import { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import OutputRootsListItem from 'ui/l2OutputRoots/OutputRootsListItem'; import OutputRootsListItem from 'ui/l2OutputRoots/OutputRootsListItem';
import OutputRootsTable from 'ui/l2OutputRoots/OutputRootsTable'; import OutputRootsTable from 'ui/l2OutputRoots/OutputRootsTable';
import ActionBar from 'ui/shared/ActionBar';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
const L2OutputRoots = () => { const L2OutputRoots = () => {
const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({ const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
...@@ -67,19 +66,7 @@ const L2OutputRoots = () => { ...@@ -67,19 +66,7 @@ const L2OutputRoots = () => {
); );
})(); })();
const actionBar = ( const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
<>
<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>
</>
);
return ( 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 React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
...@@ -7,11 +7,10 @@ import { L2_TXN_BATCHES_ITEM } from 'stubs/L2'; ...@@ -7,11 +7,10 @@ import { L2_TXN_BATCHES_ITEM } from 'stubs/L2';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import TxnBatchesListItem from 'ui/l2TxnBatches/TxnBatchesListItem'; import TxnBatchesListItem from 'ui/l2TxnBatches/TxnBatchesListItem';
import TxnBatchesTable from 'ui/l2TxnBatches/TxnBatchesTable'; import TxnBatchesTable from 'ui/l2TxnBatches/TxnBatchesTable';
import ActionBar from 'ui/shared/ActionBar';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
const L2TxnBatches = () => { const L2TxnBatches = () => {
const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({ const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
...@@ -66,19 +65,7 @@ const L2TxnBatches = () => { ...@@ -66,19 +65,7 @@ const L2TxnBatches = () => {
); );
})(); })();
const actionBar = ( const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
<>
<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>
</>
);
return ( 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 React from 'react';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
...@@ -7,11 +7,10 @@ import { L2_WITHDRAWAL_ITEM } from 'stubs/L2'; ...@@ -7,11 +7,10 @@ import { L2_WITHDRAWAL_ITEM } from 'stubs/L2';
import { generateListStub } from 'stubs/utils'; 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 DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
const L2Withdrawals = () => { const L2Withdrawals = () => {
const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({ const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
...@@ -66,19 +65,7 @@ const L2Withdrawals = () => { ...@@ -66,19 +65,7 @@ const L2Withdrawals = () => {
); );
})(); })();
const actionBar = ( const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
<>
<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>
</>
);
return ( 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 BigNumber from 'bignumber.js';
import React from 'react'; import React from 'react';
import config from 'configs/app'; import config from 'configs/app';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import getCurrencyValue from 'lib/getCurrencyValue'; import getCurrencyValue from 'lib/getCurrencyValue';
import useIsMobile from 'lib/hooks/useIsMobile';
import { generateListStub } from 'stubs/utils'; import { generateListStub } from 'stubs/utils';
import { WITHDRAWAL } from 'stubs/withdrawals'; import { WITHDRAWAL } from 'stubs/withdrawals';
import ActionBar from 'ui/shared/ActionBar';
import DataListDisplay from 'ui/shared/DataListDisplay'; import DataListDisplay from 'ui/shared/DataListDisplay';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText';
import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem'; import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem';
import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable'; import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
const feature = config.features.beaconChain; const feature = config.features.beaconChain;
const Withdrawals = () => { const Withdrawals = () => {
const isMobile = useIsMobile();
const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({ const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
resourceName: 'withdrawals', resourceName: 'withdrawals',
options: { options: {
...@@ -31,7 +27,14 @@ const Withdrawals = () => { ...@@ -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 ? ( const content = data?.items ? (
<> <>
...@@ -52,43 +55,23 @@ const Withdrawals = () => { ...@@ -52,43 +55,23 @@ const Withdrawals = () => {
) : null; ) : null;
const text = (() => { 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) { if (countersQuery.isError || !feature.isEnabled) {
return null; return null;
} }
const { valueStr } = getCurrencyValue({ value: countersQuery.data.withdrawal_sum });
return ( return (
<Text mb={{ base: 6, lg: pagination.isVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}> <Skeleton isLoaded={ !countersQuery.isPlaceholderData && !isPlaceholderData } display="flex" flexWrap="wrap">
{ BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed { countersQuery.data && (
and { valueStr } { feature.currency.symbol } withdrawn <Text lineHeight={{ base: '24px', lg: '32px' }}>
</Text> { BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed
and { getCurrencyValue({ value: countersQuery.data.withdrawal_sum }).valueStr } { feature.currency.symbol } withdrawn
</Text>
) }
</Skeleton>
); );
})(); })();
const actionBar = ( const actionBar = <StickyPaginationWithText text={ text } pagination={ pagination }/>;
<>
{ (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>
) }
</>
);
return ( 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