2021-09-28 01:28:30 +03:00
|
|
|
import React from 'react';
|
|
|
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
|
|
|
import { ThemeProvider } from 'styled-components';
|
|
|
|
|
import light from './themes/light';
|
|
|
|
|
import { Box, Reset } from '@tlon/indigo-react';
|
|
|
|
|
import StartupModal from './components/StartupModal';
|
|
|
|
|
import { useSettings } from './hooks/useSettings';
|
|
|
|
|
import Body from './components/Body';
|
2021-09-11 18:52:57 +03:00
|
|
|
import Header from './components/Header';
|
2021-09-28 01:28:30 +03:00
|
|
|
|
|
|
|
|
const App: React.FC = () => {
|
|
|
|
|
const { loaded, wallet, provider, scanProgress } = useSettings();
|
|
|
|
|
const scanning = scanProgress?.main !== null || scanProgress?.change !== null;
|
|
|
|
|
const blur = !loaded || scanning ? false : !(wallet && provider);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<BrowserRouter basename="/apps/bitcoin">
|
|
|
|
|
<ThemeProvider theme={light}>
|
|
|
|
|
<Reset />
|
|
|
|
|
{loaded && !scanning ? <StartupModal /> : null}
|
|
|
|
|
<Box
|
|
|
|
|
display="flex"
|
|
|
|
|
flexDirection="column"
|
|
|
|
|
position="absolute"
|
|
|
|
|
alignItems="center"
|
|
|
|
|
backgroundColor="lightOrange"
|
|
|
|
|
width="100%"
|
|
|
|
|
minHeight={loaded && !scanning ? '100%' : 'none'}
|
|
|
|
|
height={loaded && !scanning ? 'none' : '100%'}
|
|
|
|
|
style={{ filter: blur ? 'blur(8px)' : 'none' }}
|
|
|
|
|
>
|
2021-09-11 18:52:57 +03:00
|
|
|
<Header />
|
2021-09-28 01:28:30 +03:00
|
|
|
<Body />
|
|
|
|
|
</Box>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
</BrowserRouter>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default App;
|
