1  import { Trans } from '@lingui/macro';
 2  import { Box, Checkbox, FormControlLabel } from '@mui/material';
 3  import { FaucetButton } from 'src/components/FaucetButton';
 4  import { useRootStore } from 'src/store/root';
 5  import { ENABLE_TESTNET, STAGING_ENV } from 'src/utils/marketsAndNetworksConfig';
 6  import { DASHBOARD } from 'src/utils/mixPanelEvents';
 7  
 8  import { BridgeButton } from '../../components/BridgeButton';
 9  import { toggleLocalStorageClick } from '../../helpers/toggle-local-storage-click';
10  import { NetworkConfig } from '../../ui-config/networksConfig';
11  
12  interface DashboardListTopPanelProps extends Pick<NetworkConfig, 'bridge'> {
13    value: boolean;
14    onClick: (value: boolean) => void;
15    localStorageName: string;
16  }
17  
18  export const DashboardListTopPanel = ({
19    value,
20    onClick,
21    localStorageName,
22    bridge,
23  }: DashboardListTopPanelProps) => {
24    const trackEvent = useRootStore((store) => store.trackEvent);
25  
26    return (
27      <Box
28        sx={{
29          display: 'flex',
30          alignItems: { xs: 'flex-start', xsm: 'center' },
31          justifyContent: 'space-between',
32          flexDirection: { xs: 'column-reverse', xsm: 'row' },
33          px: { xs: 4, xsm: 6 },
34          py: 2,
35          pl: { xs: '18px', xsm: '27px' },
36        }}
37      >
38        <FormControlLabel
39          sx={{ mt: { xs: bridge ? 2 : 0, xsm: 0 } }}
40          control={<Checkbox sx={{ p: '6px' }} />}
41          checked={value}
42          onChange={() => {
43            trackEvent(DASHBOARD.SHOW_ASSETS_0_BALANCE, {});
44  
45            toggleLocalStorageClick(value, onClick, localStorageName);
46          }}
47          label={<Trans>Show assets with 0 balance</Trans>}
48        />
49  
50        {(STAGING_ENV || ENABLE_TESTNET) && <FaucetButton />}
51        {!ENABLE_TESTNET && <BridgeButton bridge={bridge} />}
52      </Box>
53    );
54  };