All files / app/components/title-bar title-bar.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/* eslint-disable @typescript-eslint/no-unsafe-argument */
import { BackButton } from '../back-button';
import { NetworkMessage } from './network-message';
import { SettingsButton } from './settings-button';
import { UpdateAvailableButton } from './update-available-button';
import { ColorModeButton } from '@components/color-mode-button';
import routes from '@constants/routes.json';
import { useCheckForUpdates } from '@hooks/use-check-for-updates';
import { useWindowFocus } from '@hooks/use-window-focus';
import { Flex, color, Stack, Box } from '@stacks/ui';
import { openExternalLink } from '@utils/external-links';
import React, { FC } from 'react';
import ReactDOM from 'react-dom';
import { useHistory, useLocation, matchPath } from 'react-router';
 
export const TitleBar: FC = () => {
  const el = document.querySelector('.draggable-bar');
  const location = useLocation();
 
  const routerHistory = useHistory();
 
  const winState = useWindowFocus();
 
  const { isNewerReleaseAvailable, latestRelease } = useCheckForUpdates();
 
  const isBlurred = winState === 'blurred';
  const isOnboarding = matchPath(location.pathname, { path: '/onboard' }) !== null;
 
  Iif (!el) return null;
 
  const content = (
    <Flex
      justifyContent="space-between"
      pl={process.platform === 'darwin' ? '72px' : 'tight'}
      height="100%"
      backgroundColor={color('bg')}
      position="relative"
      alignItems="center"
      opacity={isBlurred ? 0.5 : 1}
    >
      <BackButton />
      <Flex
        justifyContent="space-around"
        flex={1}
        // Manages absolute centre alignment of content
        position={['relative', 'absolute']}
        left={[null, '130px']}
        right={[null, '130px']}
        height="100%"
      >
        <Box position="absolute" width="120px" height="44px" className="inner-drag" />
        <Flex>
          {isNewerReleaseAvailable && latestRelease && (
            <UpdateAvailableButton
              windowState={winState}
              onClick={() => openExternalLink('https://leather.io/wallet/install-desktop')}
            />
          )}
          <Flex alignItems="center" ml="base">
            <NetworkMessage textColor={isBlurred ? color('text-title') : undefined} />
          </Flex>
        </Flex>
      </Flex>
      <Stack alignItems="center" pr="base-loose" isInline spacing="tight">
        <ColorModeButton color={color('text-title')} />
        {!isOnboarding && (
          <SettingsButton
            onClick={() => routerHistory.push(routes.SETTINGS)}
            color={color('text-title')}
          />
        )}
      </Stack>
    </Flex>
  );
  return ReactDOM.createPortal(content, el);
};