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]>
73 lines
2.4 KiB
TypeScript
73 lines
2.4 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 { Tooltip } from 'toolkit/chakra/tooltip';
|
|
import { useDisclosure } from 'toolkit/hooks/useDisclosure';
|
|
import IconSvg from 'ui/shared/IconSvg';
|
|
|
|
import SettingsAddressFormat from './SettingsAddressFormat';
|
|
import SettingsColorTheme from './SettingsColorTheme';
|
|
import SettingsIdentIcon from './SettingsIdentIcon';
|
|
import SettingsLocalTime from './SettingsLocalTime';
|
|
import SettingsPoorReputationTokens from './SettingsPoorReputationTokens';
|
|
import SettingsScamTokens from './SettingsScamTokens';
|
|
|
|
const Settings = () => {
|
|
const popover = useDisclosure();
|
|
const tooltip = useDisclosure();
|
|
|
|
const handlePopoverOpenChange = React.useCallback(({ open }: { open: boolean }) => {
|
|
open && tooltip.onClose();
|
|
popover.onOpenChange({ open });
|
|
}, [ popover, tooltip ]);
|
|
|
|
const handleTooltipOpenChange = React.useCallback(({ open }: { open: boolean }) => {
|
|
if (!popover.open) {
|
|
tooltip.onOpenChange({ open });
|
|
}
|
|
}, [ popover, tooltip ]);
|
|
|
|
return (
|
|
<PopoverRoot
|
|
positioning={{ placement: 'bottom-end' }}
|
|
open={ popover.open }
|
|
onOpenChange={ handlePopoverOpenChange }
|
|
// should be false to enable auto-switch to default color theme
|
|
lazyMount={ false }
|
|
>
|
|
<Tooltip content="Website settings" disableOnMobile open={ tooltip.open } onOpenChange={ handleTooltipOpenChange }>
|
|
<Flex alignItems="center">
|
|
<PopoverTrigger>
|
|
<IconButton
|
|
variant="link"
|
|
size="2xs"
|
|
borderRadius="sm"
|
|
aria-label="User settings"
|
|
>
|
|
<IconSvg name="gear"/>
|
|
</IconButton>
|
|
</PopoverTrigger>
|
|
</Flex>
|
|
</Tooltip>
|
|
<PopoverContent overflowY="hidden" w="auto" fontSize="sm">
|
|
<PopoverBody>
|
|
<SettingsColorTheme onSelect={ popover.onClose }/>
|
|
<Separator my={ 3 }/>
|
|
<SettingsIdentIcon/>
|
|
<SettingsAddressFormat/>
|
|
<Separator my={ 3 }/>
|
|
<VStack gap={ 1 }>
|
|
<SettingsScamTokens/>
|
|
<SettingsPoorReputationTokens/>
|
|
<SettingsLocalTime/>
|
|
</VStack>
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</PopoverRoot>
|
|
);
|
|
};
|
|
|
|
export default React.memo(Settings);
|