Differential D10837 Diff 31833 web/cashtab/src/components/App.js

Changeset View

Standalone View

web/cashtab/src/components/App.js

import React, { useState, useEffect } from 'react';		import React, { useState, useEffect } from 'react';
import 'antd/dist/antd.less';		import 'antd/dist/antd.less';
import { Modal, Spin } from 'antd';		import { Modal, Spin } from 'antd';
import { CashLoadingIcon } from '@components/Common/CustomIcons';		import { CashLoadingIcon } from '@components/Common/CustomIcons';
import '../index.css';		import '../index.css';
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';		import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
import { theme } from '@assets/styles/theme';		import { lightTheme } from '@assets/styles/theme';
		import { darkTheme } from '@assets/styles/darkTheme';
import {		import {
FolderOpenFilled,		FolderOpenFilled,
CaretRightOutlined,		CaretRightOutlined,
SettingFilled,		SettingFilled,
AppstoreAddOutlined,		AppstoreAddOutlined,
} from '@ant-design/icons';		} from '@ant-design/icons';
import Wallet from '@components/Wallet/Wallet';		import Wallet from '@components/Wallet/Wallet';
import Tokens from '@components/Tokens/Tokens';		import Tokens from '@components/Tokens/Tokens';
▲ Show 20 Lines • Show All 207 Lines • ▼ Show 20 Lines	@media screen and (max-width: 1250px) {
display: none;		display: none;
}		}
`;		`;

const App = () => {		const App = () => {
const ContextValue = React.useContext(WalletContext);		const ContextValue = React.useContext(WalletContext);
const { wallet, loading } = ContextValue;		const { wallet, loading } = ContextValue;
const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false);		const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false);
		const [theme, setTheme] = useState('light');

		useEffect(() => {
		const existingPreference = localStorage.getItem('userSelectedTheme');
		if (existingPreference) {
		existingPreference === 'light'
		? setTheme('light')
		: setTheme('dark');
		} else {
		setTheme('light');
		localStorage.setItem('userSelectedTheme', 'light');
		}
		}, []);

		const toggleTheme = () => {
		//if the theme is not light, then set it to dark
		if (theme === 'light') {
		setTheme('dark');
		localStorage.setItem('userSelectedTheme', 'dark');
		} else {
		setTheme('light');
		localStorage.setItem('userSelectedTheme', 'light');
		}
		};
// If wallet is unmigrated, do not show page until it has migrated		// If wallet is unmigrated, do not show page until it has migrated
// An invalid wallet will be validated/populated after the next API call, ETA 10s		// An invalid wallet will be validated/populated after the next API call, ETA 10s
const validWallet = isValidStoredWallet(wallet);		const validWallet = isValidStoredWallet(wallet);
const location = useLocation();		const location = useLocation();
const history = useHistory();		const history = useHistory();
const selectedKey =		const selectedKey =
location && location.pathname ? location.pathname.substr(1) : '';		location && location.pathname ? location.pathname.substr(1) : '';

// Easter egg boolean not used in extension/src/components/App.js		// Easter egg boolean not used in extension/src/components/App.js
const hasTab = validWallet		const hasTab = validWallet
? checkForTokenById(		? checkForTokenById(
wallet.state.tokens,		wallet.state.tokens,
'50d8292c6255cda7afc6c8566fed3cf42a2794e9619740fe8f4c95431271410e',		'50d8292c6255cda7afc6c8566fed3cf42a2794e9619740fe8f4c95431271410e',
)		)
: false;		: false;

return (		return (
<ThemeProvider theme={theme}>		<ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
<GlobalStyle />		<GlobalStyle />
<Spin		<Spin
spinning={		spinning={
loading \|\| loadingUtxosAfterSend \|\| (wallet && !validWallet)		loading \|\| loadingUtxosAfterSend \|\| (wallet && !validWallet)
}		}
indicator={CashLoadingIcon}		indicator={CashLoadingIcon}
>		>
<CustomApp>		<CustomApp>
▲ Show 20 Lines • Show All 45 Lines • ▼ Show 20 Lines	return (
}		}
passLoadingStatus={		passLoadingStatus={
setLoadingUtxosAfterSend		setLoadingUtxosAfterSend
}		}
/>		/>
)}		)}
/>		/>
<Route path="/configure">		<Route path="/configure">
<Configure />		<Configure
		toggleTheme={toggleTheme}
		theme={theme}
		/>
</Route>		</Route>
<Redirect exact from="/" to="/wallet" />		<Redirect exact from="/" to="/wallet" />
<Route component={NotFound} />		<Route component={NotFound} />
</Switch>		</Switch>
</ProtectableComponentWrapper>		</ProtectableComponentWrapper>
</WalletCtn>		</WalletCtn>
{wallet ? (		{wallet ? (
<Footer>		<Footer>
Show All 40 Lines