Differential D9760 Diff 29216 web/cashtab/src/components/App.js

Changeset View

Standalone View

web/cashtab/src/components/App.js

Show All 10 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 PopOut from '@assets/popout.svg';
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 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';

import fbt from 'fbt';		import { FormattedMessage } from 'react-intl';

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) {
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-image: ${props => props.theme.app.sidebars};		background: ${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 12 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};

@media (max-width: 768px) {
a {		a {
font-size: 12px;		color: ${props => props.theme.wallet.text.secondary};
}
padding: 10px 0 20px;
}
`;

export const EasterEgg = styled.img`
position: fixed;
bottom: -195px;
margin: 0;
right: 10%;
transition-property: bottom;
transition-duration: 1.5s;
transition-timing-function: ease-out;

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

@media screen and (max-width: 1250px) {		@media (max-width: 768px) {
display: none;		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;
}		}
`;		`;
export const AbcLogo = styled.img`		export const AbcLogo = styled.img`
width: 150px;		width: 150px;
@media (max-width: 768px) {		@media (max-width: 768px) {
width: 120px;		width: 120px;
}		}
`;		`;

const App = () => {		const App = () => {
const ContextValue = React.useContext(WalletContext);		const ContextValue = React.useContext(WalletContext);
const { wallet, tokens } = ContextValue;		const { wallet } = ContextValue;

const hasTab = checkForTokenById(
tokens,
'50d8292c6255cda7afc6c8566fed3cf42a2794e9619740fe8f4c95431271410e',
);
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) : '';
		const openInTab = () => {
		window.open(`index.html#/${selectedKey}`);
		};

return (		return (
<ThemeProvider theme={theme}>		<ThemeProvider theme={theme}>
<GlobalStyle />		<GlobalStyle />
<CustomApp>		<CustomApp>
<WalletBody>		<WalletBody>
<WalletCtn>		<WalletCtn>
<HeaderCtn>		<HeaderCtn>
<CashTabLogo src={CashTab} alt="cashtab" />		<CashTabLogo src={CashTab} alt="cashtab" />
{hasTab && (		<OpenInTabBtn
<EasterEgg src={TabCash} alt="tabcash" />		data-tip="Open in tab"
)}		onClick={() => openInTab()}
<a
href="https://e.cash/"
target="_blank"
rel="noopener noreferrer"
>		>
<AbcLogo src={ABC} alt="abc" />		<ExtTabImg src={PopOut} alt="Open in tab" />
</a>		</OpenInTabBtn>
</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 All 18 Lines	return (
</WalletCtn>		</WalletCtn>
{wallet ? (		{wallet ? (
<Footer>		<Footer>
<NavButton		<NavButton
active={selectedKey === 'wallet'}		active={selectedKey === 'wallet'}
onClick={() => history.push('/wallet')}		onClick={() => history.push('/wallet')}
>		>
<FolderOpenFilled />		<FolderOpenFilled />
<fbt desc="Wallet menu button">Wallet</fbt>		<FormattedMessage
		defaultMessage="Wallet"
		description="Wallet menu button"
		/>
</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 />
<fbt desc="Send menu button">Send</fbt>		<FormattedMessage
		defaultMessage="Send"
		description="Send menu button"
		/>
</NavButton>		</NavButton>
<NavButton		<NavButton
active={selectedKey === 'configure'}		active={selectedKey === 'configure'}
onClick={() => history.push('/configure')}		onClick={() => history.push('/configure')}
>		>
<SettingFilled />		<SettingFilled />
<fbt desc="Settings menu button">Settings</fbt>		<FormattedMessage
		defaultMessage="Settings"
		description="Settings menu button"
		/>
</NavButton>		</NavButton>
</Footer>		</Footer>
) : null}		) : null}
</WalletBody>		</WalletBody>
</CustomApp>		</CustomApp>
</ThemeProvider>		</ThemeProvider>
);		);
};		};

export default App;		export default App;