Differential D10970 Diff 32402 web/cashtab/extension/src/components/App.js

Changeset View

Standalone View

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

import React, { useState } from 'react';		import React, { useState } from 'react';
import 'antd/dist/antd.less';		import 'antd/dist/antd.less';
import { Spin } from 'antd';		import { Spin } from 'antd';
import { CashLoadingIcon } from '@components/Common/CustomIcons';		import {
		CashLoadingIcon,
		HomeIcon,
		SendIcon,
		ReceiveIcon,
		SettingsIcon,
		} 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 Home from '@components/Home/Home';
FolderOpenFilled,		import Receive from '@components/Receive/Receive';
CaretRightOutlined,
SettingFilled,
AppstoreAddOutlined,
} from '@ant-design/icons';
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 './App.css';		import './App.css';
import { WalletContext } from '@utils/context';		import { WalletContext } from '@utils/context';
import { isValidStoredWallet } from '@utils/cashMethods';		import { isValidStoredWallet } from '@utils/cashMethods';
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		// Extension-only import used for open in new tab link
import PopOut from '@assets/popout.svg';		import PopOut from '@assets/popout.svg';

const GlobalStyle = createGlobalStyle`		const GlobalStyle = createGlobalStyle`
		*::placeholder {
		color: ${props => props.theme.forms.placeholder} !important;
		}
		*::selection {
		background: ${props => props.theme.eCashBlue} !important;
		}
		.ant-modal-content, .ant-modal-header, .ant-modal-title {
		background-color: ${props => props.theme.modal.background} !important;
		color: ${props => props.theme.modal.color} !important;
		}
		.ant-modal-content svg {
		fill: ${props => props.theme.modal.color};
		}
		.ant-modal-footer button {
		background-color: ${props =>
		props.theme.modal.buttonBackground} !important;
		color: ${props => props.theme.modal.color} !important;
		border-color: ${props => props.theme.modal.border} !important;
		:hover {
		background-color: ${props => props.theme.eCashBlue} !important;
		}
		}
.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, #cropControlsConfirm{		.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, #cropControlsConfirm{
border-radius: 8px;		border-radius: 3px;
background-color: ${props => props.theme.modals.buttons.background};		border-radius: 3px;
color: ${props => props.theme.wallet.text.secondary};		background-color: ${props =>
font-weight: bold;		props.theme.modal.buttonBackground} !important;
		color: ${props => props.theme.modal.color} !important;
		border-color: ${props => props.theme.modal.border} !important;
		:hover {
		background-color: ${props => props.theme.eCashBlue} !important;
		}
		text-shadow: none !important;
		text-shadow: none !important;
}		}

.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover, #cropControlsConfirm:hover {		.ant-modal-wrap > div > div.ant-modal-content > div > div > div.ant-modal-confirm-btns > button:hover,.ant-modal-confirm-btns > button:hover, .ant-modal-footer > button:hover, #cropControlsConfirm:hover {
color: ${props => props.theme.primary};		color: ${props => props.theme.contrast};
transition: color 0.3s;		transition: all 0.3s;
background-color: ${props => props.theme.modals.buttons.background};		background-color: ${props => props.theme.eCashBlue};
		border-color: ${props => props.theme.eCashBlue};
}		}
.selectedCurrencyOption {		.selectedCurrencyOption, .ant-select-dropdown {
text-align: left;		text-align: left;
color: ${props => props.theme.wallet.text.secondary} !important;		color: ${props => props.theme.contrast} !important;
background-color: ${props => props.theme.contrast} !important;		background-color: ${props =>
		props.theme.collapses.expandedBackground} !important;
}		}
.cashLoadingIcon {		.cashLoadingIcon {
color: ${props => props.theme.primary} !important;		color: ${props => props.theme.eCashBlue} !important;
font-size: 48px !important;		font-size: 48px !important;
}		}
.selectedCurrencyOption:hover {		.selectedCurrencyOption:hover {
color: ${props => props.theme.contrast} !important;		color: ${props => props.theme.contrast} !important;
background-color: ${props => props.theme.primary} !important;		background-color: ${props => props.theme.eCashBlue} !important;
}		}
#addrSwitch, #cropSwitch {		#addrSwitch, #cropSwitch {
.ant-switch-checked {		.ant-switch-checked {
background-color: white !important;		background-color: white !important;
}		}
}		}
#addrSwitch.ant-switch-checked, #cropSwitch.ant-switch-checked {		#addrSwitch.ant-switch-checked, #cropSwitch.ant-switch-checked {
background-image: ${props =>		background-image: ${props =>
props.theme.buttons.primary.backgroundImage} !important;		props.theme.buttons.primary.backgroundImage} !important;
}		}

.ant-slider-rail {		.ant-slider-rail {
background-color: ${props => props.theme.forms.border} !important;		background-color: ${props => props.theme.forms.border} !important;
}		}
.ant-slider-track {		.ant-slider-track {
background-color: ${props => props.theme.primary} !important;		background-color: ${props => props.theme.eCashBlue} !important;
		}
		.ant-descriptions-bordered .ant-descriptions-row {
		background: ${props => props.theme.contrast};
		}
		.ant-modal-confirm-content, .ant-modal-confirm-title {
		color: ${props => props.theme.contrast} !important;
}		}
`;		`;

const CustomApp = styled.div`		const CustomApp = styled.div`
text-align: center;		text-align: center;
font-family: 'Gilroy', sans-serif;		font-family: 'Gilroy', sans-serif;
background-color: ${props => props.theme.app.background};		font-family: 'Poppins', sans-serif;
		background-color: ${props => props.theme.backgroundColor};
		background-size: 100px 171px;
		background-image: ${props => props.theme.backgroundImage};
		background-attachment: fixed;
`;		`;

const Footer = styled.div`		const Footer = styled.div`
z-index: 2;		z-index: 2;
background-color: ${props => props.theme.footer.background};		height: 80px;
border-radius: 20px;		border-top: 1px solid rgba(255, 255, 255, 0.5);
		background-color: ${props => props.theme.footerBackground};
position: fixed;		position: fixed;
bottom: 0;		bottom: 0;
width: 500px;		width: 500px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 50px;
@media (max-width: 768px) {		@media (max-width: 768px) {
width: 100%;		width: 100%;
		padding: 0 20px;
}		}
border-top: 1px solid ${props => props.theme.wallet.borders.color};
`;		`;

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: 0;
margin: 0 28px;		background: none;
@media (max-width: 475px) {
margin: 0 20px;
}
@media (max-width: 420px) {
margin: 0 12px;
}
@media (max-width: 350px) {
margin: 0 8px;
}
background-color: ${props => props.theme.footer.background};
border: none;		border: none;
font-size: 12px;		font-size: 10px;
font-weight: bold;		svg {
.anticon {		fill: ${props => props.theme.contrast};
display: block;		width: 26px;
color: ${props => props.theme.footer.navIconInactive};		height: auto;
font-size: 24px;
margin-bottom: 6px;
}		}
${({ active, ...props }) =>		${({ active, ...props }) =>
active &&		active &&
`		`
color: ${props.theme.primary};		color: ${props.theme.navActive};
.anticon {		svg {
color: ${props.theme.primary};		fill: ${props.theme.navActive};
}		}
`}		`}
`;		`;

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-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};
min-height: 100vh;		min-height: 100vh;
padding: 10px 30px 120px 30px;		padding: 0 0 100px;
background: ${props => props.theme.wallet.background};		background: ${props => props.theme.walletBackground};
-webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};		-webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
-moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};		-moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow};		box-shadow: 0px 0px 24px 1px ${props => props.theme.shadow};
@media (max-width: 768px) {		@media (max-width: 768px) {
width: 100%;		width: 100%;
-webkit-box-shadow: none;		-webkit-box-shadow: none;
-moz-box-shadow: none;		-moz-box-shadow: none;
box-shadow: none;		box-shadow: none;
}		}
`;		`;

export const HeaderCtn = styled.div`		export const HeaderCtn = styled.div`
display: flex;		display: flex;
align-items: center;		align-items: center;
justify-content: center;
width: 100%;
padding: 20px 0 30px;
margin-bottom: 20px;
justify-content: space-between;		justify-content: space-between;
border-bottom: 1px solid ${props => props.theme.wallet.borders.color};		width: 100%;
		padding: 15px;
a {
color: ${props => props.theme.wallet.text.secondary};

:hover {
color: ${props => props.theme.primary};
}
}

@media (max-width: 768px) {
a {
font-size: 12px;
}
padding: 10px 0 20px;
}
`;		`;

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;
}		}
`;		`;
▲ Show 20 Lines • Show All 44 Lines • ▼ Show 20 Lines	return (
onClick={() => openInTab()}		onClick={() => openInTab()}
>		>
<ExtTabImg src={PopOut} alt="Open in tab" />		<ExtTabImg src={PopOut} alt="Open in tab" />
</OpenInTabBtn>		</OpenInTabBtn>
{/End extension-only components/}		{/End extension-only components/}
</HeaderCtn>		</HeaderCtn>
{/Note that the extension does not support biometric security/}		{/Note that the extension does not support biometric security/}
{/Hence <ProtectableComponentWrapper> is not pulled in/}		{/Hence <ProtectableComponentWrapper> is not pulled in/}
<WalletLabel name={wallet.name}></WalletLabel>
<Switch>		<Switch>
<Route path="/wallet">		<Route path="/wallet">
<Wallet />		<Home />
		</Route>
		<Route path="/receive">
		<Receive
		passLoadingStatus={
		setLoadingUtxosAfterSend
		}
		/>
</Route>		</Route>
<Route path="/tokens">		<Route path="/tokens">
<Tokens		<Tokens
passLoadingStatus={		passLoadingStatus={
setLoadingUtxosAfterSend		setLoadingUtxosAfterSend
}		}
/>		/>
</Route>		</Route>
Show All 23 Lines	return (
</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 />		<HomeIcon />
Wallet
</NavButton>		</NavButton>

<NavButton		<NavButton
active={selectedKey === 'tokens'}		active={selectedKey === 'send'}
onClick={() => history.push('/tokens')}		onClick={() => history.push('/send')}
>		>
<AppstoreAddOutlined />		<SendIcon
eTokens		style={{
		marginTop: '-9px',
		}}
		/>
</NavButton>		</NavButton>

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

export default App;		export default App;