Changeset View
Changeset View
Standalone 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 |