Differential D9927 Diff 29562 web/cashtab/extension/src/components/App.js

Changeset View

Standalone View

web/cashtab/extension/src/components/App.js

import React from 'react';		import React, { useState } from 'react';
import 'antd/dist/antd.less';		import 'antd/dist/antd.less';
		import { Spin } from 'antd';
		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 { theme } from '@assets/styles/theme';
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';
import Send from '@components/Send/Send';		import Send from '@components/Send/Send';
import SendToken from '@components/Send/SendToken';		import SendToken from '@components/Send/SendToken';
import Configure from '@components/Configure/Configure';		import Configure from '@components/Configure/Configure';
import NotFound from '@components/NotFound';		import NotFound from '@components/NotFound';
import CashTab from '@assets/cashtab_xec.png';		import CashTab from '@assets/cashtab_xec.png';
import PopOut from '@assets/popout.svg';
import './App.css';		import './App.css';
import { WalletContext } from '@utils/context';		import { WalletContext } from '@utils/context';
		import { isValidStoredWallet } from '@utils/cashMethods';
import WalletLabel from '@components/Common/WalletLabel.js';		import WalletLabel from '@components/Common/WalletLabel.js';
import {		import {
Route,		Route,
Redirect,		Redirect,
Switch,		Switch,
useLocation,		useLocation,
useHistory,		useHistory,
} from 'react-router-dom';		} from 'react-router-dom';
		// Extension-only import used for open in new tab link
		import PopOut from '@assets/popout.svg';

const GlobalStyle = createGlobalStyle`		const GlobalStyle = createGlobalStyle`
.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button {		.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button, .ant-modal > button, .ant-modal-confirm-btns > button, .ant-modal-footer > button {
border-radius: 8px;		border-radius: 8px;
background-color: ${props => props.theme.modals.buttons.background};		background-color: ${props => props.theme.modals.buttons.background};
color: ${props => props.theme.wallet.text.secondary};		color: ${props => props.theme.wallet.text.secondary};
font-weight: bold;		font-weight: bold;
}		}
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Lines	const Footer = styled.div`
bottom: 0;		bottom: 0;
width: 500px;		width: 500px;
@media (max-width: 768px) {		@media (max-width: 768px) {
width: 100%;		width: 100%;
}		}
border-top: 1px solid ${props => props.theme.wallet.borders.color};		border-top: 1px solid ${props => props.theme.wallet.borders.color};
`;		`;

const OpenInTabBtn = styled.button`
background: none;
border: none;
`;
const ExtTabImg = styled.img`
max-width: 20px;
`;
export const NavButton = styled.button`		export const NavButton = styled.button`
:focus,		:focus,
:active {		:active {
outline: none;		outline: none;
}		}
cursor: pointer;		cursor: pointer;
padding: 24px 12px 12px 12px;		padding: 24px 12px 12px 12px;
margin: 0 28px;		margin: 0 28px;
Show All 27 Lines
`;		`;

export const WalletBody = styled.div`		export const WalletBody = styled.div`
display: flex;		display: flex;
align-items: center;		align-items: center;
justify-content: center;		justify-content: center;
width: 100%;		width: 100%;
min-height: 100vh;		min-height: 100vh;
background: ${props => props.theme.app.sidebars};		background-image: ${props => props.theme.app.sidebars};
		background-attachment: fixed;
`;		`;

export const WalletCtn = styled.div`		export const WalletCtn = styled.div`
position: relative;		position: relative;
width: 500px;		width: 500px;
background-color: ${props => props.theme.footerBackground};		background-color: ${props => props.theme.footerBackground};
min-height: 100vh;		min-height: 100vh;
padding: 10px 30px 120px 30px;		padding: 10px 30px 120px 30px;
background: ${props => props.theme.wallet.background};		background: ${props => props.theme.wallet.background};
-webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};		-webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};
Show All 34 Lines
`;		`;

export const CashTabLogo = styled.img`		export const CashTabLogo = styled.img`
width: 120px;		width: 120px;
@media (max-width: 768px) {		@media (max-width: 768px) {
width: 110px;		width: 110px;
}		}
`;		`;
export const AbcLogo = styled.img`
width: 150px;		// Extension only styled components
@media (max-width: 768px) {		const OpenInTabBtn = styled.button`
width: 120px;		background: none;
}		border: none;
		`;

		const ExtTabImg = styled.img`
		max-width: 20px;
`;		`;

const App = () => {		const App = () => {
const ContextValue = React.useContext(WalletContext);		const ContextValue = React.useContext(WalletContext);
const { wallet } = ContextValue;		const { wallet, loading } = ContextValue;
		const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false);
		// 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
		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) : '';
		// openInTab is an extension-only method
const openInTab = () => {		const openInTab = () => {
window.open(`index.html#/${selectedKey}`);		window.open(`index.html#/${selectedKey}`);
};		};

return (		return (
<ThemeProvider theme={theme}>		<ThemeProvider theme={theme}>
<GlobalStyle />		<GlobalStyle />
		<Spin
		spinning={
		loading \|\| loadingUtxosAfterSend \|\| (wallet && !validWallet)
		}
		indicator={CashLoadingIcon}
		>
<CustomApp>		<CustomApp>
<WalletBody>		<WalletBody>
<WalletCtn>		<WalletCtn>
<HeaderCtn>		<HeaderCtn>
<CashTabLogo src={CashTab} alt="cashtab" />		<CashTabLogo src={CashTab} alt="cashtab" />
		{/Begin extension-only components/}
<OpenInTabBtn		<OpenInTabBtn
data-tip="Open in tab"		data-tip="Open in tab"
onClick={() => openInTab()}		onClick={() => openInTab()}
>		>
<ExtTabImg src={PopOut} alt="Open in tab" />		<ExtTabImg src={PopOut} alt="Open in tab" />
</OpenInTabBtn>		</OpenInTabBtn>
		{/End extension-only components/}
</HeaderCtn>		</HeaderCtn>
<WalletLabel name={wallet.name}></WalletLabel>		<WalletLabel name={wallet.name}></WalletLabel>
<Switch>		<Switch>
<Route path="/wallet">		<Route path="/wallet">
<Wallet />		<Wallet />
</Route>		</Route>
<Route path="/tokens">		<Route path="/tokens">
<Tokens />		<Tokens
		passLoadingStatus={
		setLoadingUtxosAfterSend
		}
		/>
</Route>		</Route>
<Route path="/send">		<Route path="/send">
<Send />		<Send
		passLoadingStatus={
		setLoadingUtxosAfterSend
		}
		/>
</Route>		</Route>
<Route		<Route
path="/send-token/:tokenId"		path="/send-token/:tokenId"
render={props => (		render={props => (
<SendToken		<SendToken
tokenId={props.match.params.tokenId}		tokenId={props.match.params.tokenId}
		passLoadingStatus={
		setLoadingUtxosAfterSend
		}
/>		/>
)}		)}
/>		/>
<Route path="/configure">		<Route path="/configure">
<Configure />		<Configure />
</Route>		</Route>
<Redirect exact from="/" to="/wallet" />		<Redirect exact from="/" to="/wallet" />
<Route component={NotFound} />		<Route component={NotFound} />
</Switch>		</Switch>
</WalletCtn>		</WalletCtn>
{wallet ? (		{wallet ? (
<Footer>		<Footer>
<NavButton		<NavButton
active={selectedKey === 'wallet'}		active={selectedKey === 'wallet'}
onClick={() => history.push('/wallet')}		onClick={() => history.push('/wallet')}
>		>
<FolderOpenFilled />		<FolderOpenFilled />
Wallet		Wallet
</NavButton>		</NavButton>

<NavButton		<NavButton
active={selectedKey === 'tokens'}		active={selectedKey === 'tokens'}
onClick={() => history.push('/tokens')}		onClick={() => history.push('/tokens')}
>		>
<AppstoreAddOutlined />		<AppstoreAddOutlined />
Tokens		Tokens
</NavButton>		</NavButton>

<NavButton		<NavButton
active={selectedKey === 'send'}		active={selectedKey === 'send'}
onClick={() => history.push('/send')}		onClick={() => history.push('/send')}
>		>
<CaretRightOutlined />		<CaretRightOutlined />
Send		Send
</NavButton>		</NavButton>
<NavButton		<NavButton
active={selectedKey === 'configure'}		active={selectedKey === 'configure'}
onClick={() => history.push('/configure')}		onClick={() => history.push('/configure')}
>		>
<SettingFilled />		<SettingFilled />
Settings		Settings
</NavButton>		</NavButton>
</Footer>		</Footer>
) : null}		) : null}
</WalletBody>		</WalletBody>
</CustomApp>		</CustomApp>
		</Spin>
</ThemeProvider>		</ThemeProvider>
);		);
};		};

export default App;		export default App;