mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
1a57cb25a0
* add export for address txs * transfer all export from page to dialog * remove old route and components * improve file name and fix loading state of icon button * basic implementation * refetch item status * status indicator for download items * changes for multichain * handle too many requests for downloads error * update button styles and spacing * fix tests * disable async export for multichain * Fix CSV export cancel flow and stabilize context updates Applied via @cursor push command * test and review fixes * design fixes * refactor file names --------- Co-authored-by: Hanzo Dev <[email protected]>
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { Flex, Separator, VStack } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import { IconButton } from 'toolkit/chakra/icon-button';
|
|
import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
|
|
import { Status } from 'toolkit/chakra/status';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
import { useCsvExportContext } from '../../utils/context';
|
|
import CsvExportDownloadsItem from './CsvExportDownloadsItem';
|
|
|
|
const CsvExportDownloads = () => {
|
|
const { dialogOpen, onDialogOpenChange, items } = useCsvExportContext();
|
|
|
|
if (items.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<PopoverRoot open={ dialogOpen } onOpenChange={ onDialogOpenChange } positioning={{ placement: 'bottom-end' }}>
|
|
<PopoverTrigger>
|
|
<Flex alignItems="center">
|
|
<Flex position="relative">
|
|
<IconButton
|
|
aria-label="Open list of downloads"
|
|
variant="link"
|
|
size="2xs"
|
|
borderRadius="none"
|
|
>
|
|
<IconSvg name="download"/>
|
|
</IconButton>
|
|
{ items.some((item) => item.is_highlighted) && (
|
|
<Status
|
|
size="sm"
|
|
position="absolute"
|
|
top="0"
|
|
right="0"
|
|
/>
|
|
) }
|
|
</Flex>
|
|
<Separator orientation="vertical" mx={ 2 } h={ 4 }/>
|
|
</Flex>
|
|
</PopoverTrigger>
|
|
<PopoverContent w="300px" maxH="400px" overflowY="auto">
|
|
<PopoverBody textStyle="sm">
|
|
<VStack
|
|
separator={ <Separator orientation="horizontal"/> }
|
|
alignItems="stretch"
|
|
gap={ 3 }
|
|
>
|
|
{ items.map((item, index) => (
|
|
<CsvExportDownloadsItem
|
|
key={ `${ item.request_id }_${ item.status }` }
|
|
index={ items.length - index }
|
|
data={ item }
|
|
/>
|
|
)) }
|
|
</VStack>
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</PopoverRoot>
|
|
);
|
|
};
|
|
|
|
export default React.memo(CsvExportDownloads);
|