Differential D9250 Diff 27771 web/cashtab/src/components/App.js

Changeset View

Standalone View

web/cashtab/src/components/App.js

import React from 'react';		import React from 'react';
import 'antd/dist/antd.less';		import 'antd/dist/antd.less';
import '../index.css';		import '../index.css';
import styled from 'styled-components';		import styled from 'styled-components';
import { Tabs } from 'antd';		import { Tabs } from 'antd';
import {		import {
FolderOpenFilled,		FolderOpenFilled,
CaretRightOutlined,		CaretRightOutlined,
SettingFilled,		SettingFilled,
} from '@ant-design/icons';		} from '@ant-design/icons';
import Wallet from '@components/Wallet/Wallet';		import Wallet from '@components/Wallet/Wallet';
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.png';		import CashTab from '@assets/cashtab.png';
		import TabCash from '@assets/tabcash.png';
import ABC from '@assets/bitcoinabclogo.png';		import ABC from '@assets/bitcoinabclogo.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';
▲ Show 20 Lines • Show All 106 Lines • ▼ Show 20 Lines	export const HeaderCtn = styled.div`
@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 EasterEgg = styled.img`
		position: fixed;
		bottom: -195px;
		margin: 0;
		right: 10%;
		transition-property: bottom;
		transition-duration: 1.5s;
		transition-timing-function: ease-out;

		:hover {
		bottom: 0;
		}

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

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 } = ContextValue;		const { wallet, tokens } = 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) : '';

return (		return (
<div className="App">		<div className="App">
<WalletBody>		<WalletBody>
<WalletCtn>		<WalletCtn>
<HeaderCtn>		<HeaderCtn>
<CashTabLogo src={CashTab} alt="cashtab" />		<CashTabLogo src={CashTab} alt="cashtab" />
		{hasTab && <EasterEgg src={TabCash} alt="tabcash" />}
<a		<a
href="https://www.bitcoinabc.org/"		href="https://www.bitcoinabc.org/"
target="_blank"		target="_blank"
rel="noopener noreferrer"		rel="noopener noreferrer"
>		>
<AbcLogo src={ABC} alt="abc" />		<AbcLogo src={ABC} alt="abc" />
</a>		</a>
</HeaderCtn>		</HeaderCtn>
▲ Show 20 Lines • Show All 78 Lines • Show Last 20 Lines