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

Changeset View

Standalone View

web/cashtab/src/components/App.js

Show All 12 Lines
} 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 TabCash from '@assets/tabcash.png';
import ABC from '@assets/logo_topright.png';
import './App.css';		import './App.css';
import { WalletContext } from '@utils/context';		import { WalletContext } from '@utils/context';
import { checkForTokenById } from '@utils/tokenMethods.js';
import { isValidStoredWallet } from '@utils/cashMethods';		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';
		// Easter egg imports not used in extension/src/components/App.js
		import TabCash from '@assets/tabcash.png';
		import ABC from '@assets/logo_topright.png';
		import { checkForTokenById } from '@utils/tokenMethods.js';

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 All 27 Lines	const GlobalStyle = createGlobalStyle`
}		}
`;		`;

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};		background-color: ${props => props.theme.app.background};
`;		`;

const Footer = styled.div`		const Footer = styled.div`
z-index: 2;		z-index: 2;
background-color: ${props => props.theme.footer.background};		background-color: ${props => props.theme.footer.background};
border-radius: 20px;		border-radius: 20px;
position: fixed;		position: fixed;
bottom: 0;		bottom: 0;
width: 500px;		width: 500px;
@media (max-width: 768px) {		@media (max-width: 768px) {
▲ Show 20 Lines • Show All 72 Lines • ▼ Show 20 Lines	export const HeaderCtn = styled.div`
align-items: center;		align-items: center;
justify-content: center;		justify-content: center;
width: 100%;		width: 100%;
padding: 20px 0 30px;		padding: 20px 0 30px;
margin-bottom: 20px;		margin-bottom: 20px;
justify-content: space-between;		justify-content: space-between;
border-bottom: 1px solid ${props => props.theme.wallet.borders.color};		border-bottom: 1px solid ${props => props.theme.wallet.borders.color};

		a {
		color: ${props => props.theme.wallet.text.secondary};

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

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

		export const CashTabLogo = styled.img`
		width: 120px;
		@media (max-width: 768px) {
		width: 110px;
		}
		`;

		// AbcLogo styled component not included in extension, replaced by open in new tab link
		export const AbcLogo = styled.img`
		width: 150px;
		@media (max-width: 768px) {
		width: 120px;
		}
		`;

		// Easter egg styled component not used in extension/src/components/App.js
export const EasterEgg = styled.img`		export const EasterEgg = styled.img`
position: fixed;		position: fixed;
bottom: -195px;		bottom: -195px;
margin: 0;		margin: 0;
right: 10%;		right: 10%;
transition-property: bottom;		transition-property: bottom;
transition-duration: 1.5s;		transition-duration: 1.5s;
transition-timing-function: ease-out;		transition-timing-function: ease-out;

:hover {		:hover {
bottom: 0;		bottom: 0;
}		}

@media screen and (max-width: 1250px) {		@media screen and (max-width: 1250px) {
display: none;		display: none;
}		}
`;		`;

export const CashTabLogo = styled.img`
width: 120px;
@media (max-width: 768px) {
width: 110px;
}
`;
export const AbcLogo = styled.img`
width: 150px;
@media (max-width: 768px) {
width: 120px;
}
`;

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);
// 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 history = useHistory();
		const selectedKey =
		location && location.pathname ? location.pathname.substr(1) : '';

		// 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;
const location = useLocation();
const history = useHistory();
const selectedKey =
location && location.pathname ? location.pathname.substr(1) : '';

return (		return (
<ThemeProvider theme={theme}>		<ThemeProvider theme={theme}>
<GlobalStyle />		<GlobalStyle />
<Spin		<Spin
spinning={		spinning={
loading \|\| loadingUtxosAfterSend \|\| (wallet && !validWallet)		loading \|\| loadingUtxosAfterSend \|\| (wallet && !validWallet)
}		}
indicator={CashLoadingIcon}		indicator={CashLoadingIcon}
>		>
<CustomApp>		<CustomApp>
<WalletBody>		<WalletBody>
<WalletCtn>		<WalletCtn>
<HeaderCtn>		<HeaderCtn>
<CashTabLogo src={CashTab} alt="cashtab" />		<CashTabLogo src={CashTab} alt="cashtab" />
		{/Begin component not included in extension as desktop only/}
{hasTab && (		{hasTab && (
<EasterEgg src={TabCash} alt="tabcash" />		<EasterEgg src={TabCash} alt="tabcash" />
)}		)}
		{/End component not included in extension as desktop only/}
		{/Begin component not included in extension as replaced by open in tab link/}
<a		<a
href="https://e.cash/"		href="https://e.cash/"
target="_blank"		target="_blank"
rel="noopener noreferrer"		rel="noopener noreferrer"
>		>
<AbcLogo src={ABC} alt="abc" />		<AbcLogo src={ABC} alt="abc" />
</a>		</a>
		{/Begin component not included in extension as replaced by open in tab link/}
</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
▲ Show 20 Lines • Show All 72 Lines • Show Last 20 Lines