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]>
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import { Flex, Box, HStack } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import CsvExportDownloads from 'client/features/csv-export/components/downloads/CsvExportDownloads';
|
|
import config from 'configs/app';
|
|
import { useAppContext } from 'lib/contexts/app';
|
|
import * as cookies from 'lib/cookies';
|
|
import useIsMobile from 'lib/hooks/useIsMobile';
|
|
import useProvider from 'lib/web3/useProvider';
|
|
import { CONTENT_MAX_WIDTH } from 'ui/shared/layout/utils';
|
|
import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
|
|
|
|
import DeFiDropdown from './DeFiDropdown';
|
|
import NetworkMenu from './NetworkMenu';
|
|
import Settings from './settings/Settings';
|
|
import TopBarStats from './TopBarStats';
|
|
|
|
const TopBar = () => {
|
|
const hideAddToWalletButtonCookie = cookies.get(cookies.NAMES.HIDE_ADD_TO_WALLET_BUTTON, useAppContext().cookies);
|
|
const [ isAddChainButtonVisible, setIsAddChainButtonVisible ] = React.useState(hideAddToWalletButtonCookie !== 'topbar');
|
|
|
|
const web3 = useProvider();
|
|
const isMobile = useIsMobile();
|
|
|
|
const hasAddChainButton = Boolean(
|
|
isAddChainButtonVisible &&
|
|
web3.data?.provider &&
|
|
web3.data?.wallet &&
|
|
config.chain.rpcUrls.length &&
|
|
config.features.web3Wallet.isEnabled &&
|
|
!config.features.multichain.isEnabled &&
|
|
!isMobile,
|
|
);
|
|
const hasDeFiDropdown = Boolean(config.features.deFiDropdown.isEnabled);
|
|
|
|
const handleAddSuccess = React.useCallback(() => {
|
|
cookies.set(cookies.NAMES.HIDE_ADD_TO_WALLET_BUTTON, 'topbar', { expires: 3 * 365 });
|
|
setIsAddChainButtonVisible(false);
|
|
}, [ ]);
|
|
|
|
return (
|
|
// not ideal if scrollbar is visible, but better than having a horizontal scroll
|
|
<Box bgColor={{ _light: 'theme.topbar.bg._light', _dark: 'theme.topbar.bg._dark' }} position="sticky" left={ 0 } width="100%" maxWidth="100vw">
|
|
<Flex
|
|
py={ 2 }
|
|
px={{ base: 3, lg: 6 }}
|
|
m="0 auto"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
maxW={ `${ CONTENT_MAX_WIDTH }px` }
|
|
>
|
|
<HStack gap={ 0 } fontSize="xs">
|
|
{ Boolean(config.UI.featuredNetworks.items || config.features.multichain.isEnabled) && <NetworkMenu/> }
|
|
{ !config.features.multichain.isEnabled ? <TopBarStats/> : <div/> }
|
|
</HStack>
|
|
<HStack
|
|
alignItems="center"
|
|
gap={ 3 }
|
|
>
|
|
{ (hasAddChainButton || hasDeFiDropdown) && (
|
|
<HStack>
|
|
{ hasAddChainButton && <NetworkAddToWallet source="Top bar" onAddSuccess={ handleAddSuccess }/> }
|
|
{ hasDeFiDropdown && <DeFiDropdown/> }
|
|
</HStack>
|
|
) }
|
|
<HStack gap={ 0 }>
|
|
<CsvExportDownloads/>
|
|
<Settings/>
|
|
</HStack>
|
|
</HStack>
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default React.memo(TopBar);
|