Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/extension/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, { ThemeProvider, createGlobalStyle } from 'styled-components'; | ||||
import { Tabs } from 'antd'; | import { theme } from '@assets/styles/theme'; | ||||
import { | import { | ||||
FolderOpenFilled, | FolderOpenFilled, | ||||
CaretRightOutlined, | CaretRightOutlined, | ||||
SettingFilled, | SettingFilled, | ||||
} from '@ant-design/icons'; | } from '@ant-design/icons'; | ||||
import Wallet from './Wallet/Wallet'; | import Wallet from '@components/Wallet/Wallet'; | ||||
import Send from './Send/Send'; | import Send from '@components/Send/Send'; | ||||
import SendToken from './Send/SendToken'; | import SendToken from '@components/Send/SendToken'; | ||||
import Configure from './Configure/Configure'; | import Configure from '@components/Configure/Configure'; | ||||
import NotFound from './NotFound'; | import NotFound from '@components/NotFound'; | ||||
import CashTab from '../assets/cashtab.png'; | import CashTab from '@assets/cashtab.png'; | ||||
import PopOut from '../assets/popout.svg'; | import PopOut from '@assets/popout.svg'; | ||||
import './App.css'; | import './App.css'; | ||||
import { WalletContext } from '../utils/context'; | import { WalletContext } from '@utils/context'; | ||||
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 fbt from 'fbt'; | ||||
const { TabPane } = Tabs; | 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 { | |||||
border-radius: 8px; | |||||
background-color: ${props => props.theme.modals.buttons.background}; | |||||
color: ${props => props.theme.wallet.text.secondary}; | |||||
font-weight: bold; | |||||
} | |||||
.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 { | |||||
color: ${props => props.theme.primary}; | |||||
transition: color 0.3s; | |||||
background-color: ${props => props.theme.modals.buttons.background}; | |||||
} | |||||
.selectedCurrencyOption { | |||||
text-align: left; | |||||
color: ${props => props.theme.wallet.text.secondary} !important; | |||||
background-color: ${props => props.theme.contrast} !important; | |||||
} | |||||
.cashLoadingIcon { | |||||
color: ${props => props.theme.primary} !important | |||||
font-size: 48px !important; | |||||
} | |||||
.selectedCurrencyOption:hover { | |||||
color: ${props => props.theme.contrast} !important; | |||||
background-color: ${props => props.theme.primary} !important; | |||||
} | |||||
`; | |||||
const CustomApp = styled.div` | |||||
text-align: center; | |||||
font-family: 'Gilroy', sans-serif; | |||||
background-color: ${props => props.theme.app.background}; | |||||
`; | |||||
const Footer = styled.div` | const Footer = styled.div` | ||||
background-color: #fff; | 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 #e2e2e2; | border-top: 1px solid ${props => props.theme.wallet.borders.color}; | ||||
.ant-tabs-nav-list { | `; | ||||
} | |||||
.ant-tabs-top > .ant-tabs-nav::before, | const OpenInTabBtn = styled.button` | ||||
.ant-tabs-bottom > .ant-tabs-nav::before, | background: none; | ||||
.ant-tabs-top > div > .ant-tabs-nav::before, | border: none; | ||||
.ant-tabs-bottom > div > .ant-tabs-nav::before { | `; | ||||
border-bottom: none; | const ExtTabImg = styled.img` | ||||
max-width: 20px; | |||||
`; | |||||
export const NavButton = styled.button` | |||||
:focus, | |||||
:active { | |||||
outline: none; | |||||
} | } | ||||
.ant-tabs-tab { | cursor: pointer; | ||||
padding: 24px 12px 12px 12px; | padding: 24px 12px 12px 12px; | ||||
margin: 0 24px; | margin: 0 28px; | ||||
@media (max-width: 360px) { | @media (max-width: 360px) { | ||||
margin: 0 12px; | margin: 0 12px; | ||||
} | } | ||||
span { | background-color: ${props => props.theme.footer.background}; | ||||
border: none; | |||||
font-size: 12px; | font-size: 12px; | ||||
font-weight: bold; | font-weight: bold; | ||||
} | |||||
.anticon { | .anticon { | ||||
display: block; | display: block; | ||||
color: rgb(148, 148, 148); | color: ${props => props.theme.footer.navIconInactive}; | ||||
font-size: 24px; | font-size: 24px; | ||||
margin-left: 8px; | margin-bottom: 6px; | ||||
margin-bottom: 3px; | |||||
} | |||||
} | |||||
.ant-tabs-tab:hover { | |||||
color: #ff8d00; | |||||
.anticon { | |||||
color: #ff8d00; | |||||
} | |||||
} | } | ||||
.ant-tabs-tab-active > div > span { | ${({ active, ...props }) => | ||||
color: #ff8d00; | active && | ||||
} | ` | ||||
.ant-tabs-tab-active.ant-tabs-tab { | color: ${props.theme.primary}; | ||||
color: #ff8d00; | |||||
.anticon { | .anticon { | ||||
color: #ff8d00; | color: ${props.theme.primary}; | ||||
} | |||||
} | |||||
.ant-tabs-ink-bar { | |||||
display: none !important; | |||||
} | } | ||||
.ant-tabs-nav { | `} | ||||
margin: -3.5px 0 0 0; | |||||
} | |||||
`; | |||||
const OpenInTabBtn = styled.button` | |||||
background: none; | |||||
border: none; | |||||
`; | |||||
const ExtTabImg = styled.img` | |||||
max-width: 20px; | |||||
`; | `; | ||||
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: linear-gradient(270deg, #040c3c, #212c6e); | background: ${props => props.theme.app.sidebars}; | ||||
`; | `; | ||||
export const WalletCtn = styled.div` | export const WalletCtn = styled.div` | ||||
position: relative; | position: relative; | ||||
width: 500px; | width: 500px; | ||||
background-color: #fff; | background-color: ${props => props.theme.footerBackground}; | ||||
min-height: 100vh; | min-height: 100vh; | ||||
padding-top: 30px; | padding: 10px 30px 120px 30px; | ||||
padding: 10px 30px 100px 30px; | background: ${props => props.theme.wallet.background}; | ||||
background: #fff; | -webkit-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow}; | ||||
-webkit-box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1); | -moz-box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow}; | ||||
-moz-box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1); | box-shadow: 0px 0px 24px 1px ${props => props.theme.wallet.shadow}; | ||||
box-shadow: 0px 0px 24px 1px rgba(0, 0, 0, 1); | |||||
@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; | 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 #e2e2e2; | border-bottom: 1px solid ${props => props.theme.wallet.borders.color}; | ||||
a { | a { | ||||
color: #848484; | color: ${props => props.theme.wallet.text.secondary}; | ||||
:hover { | :hover { | ||||
color: #ff8d00; | 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; | ||||
Show All 20 Lines | const App = () => { | ||||
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 = () => { | const openInTab = () => { | ||||
window.open(`index.html#/${selectedKey}`); | window.open(`index.html#/${selectedKey}`); | ||||
}; | }; | ||||
return ( | return ( | ||||
<div className="App"> | <ThemeProvider theme={theme}> | ||||
<GlobalStyle /> | |||||
<CustomApp> | |||||
<WalletBody> | <WalletBody> | ||||
<WalletCtn> | <WalletCtn> | ||||
<HeaderCtn> | <HeaderCtn> | ||||
<CashTabLogo src={CashTab} alt="cashtab" /> | <CashTabLogo src={CashTab} alt="cashtab" /> | ||||
<OpenInTabBtn | <OpenInTabBtn | ||||
data-tip="Open in tab" | data-tip="Open in tab" | ||||
onClick={() => openInTab()} | onClick={() => openInTab()} | ||||
> | > | ||||
<ExtTabImg src={PopOut} alt="Open in tab" /> | <ExtTabImg src={PopOut} alt="Open in tab" /> | ||||
</OpenInTabBtn> | </OpenInTabBtn> | ||||
</HeaderCtn> | </HeaderCtn> | ||||
<WalletLabel name={wallet.name}></WalletLabel> | |||||
<Switch> | <Switch> | ||||
<Route path="/wallet"> | <Route path="/wallet"> | ||||
<Wallet /> | <Wallet /> | ||||
</Route> | </Route> | ||||
<Route path="/send"> | <Route path="/send"> | ||||
<Send /> | <Send /> | ||||
</Route> | </Route> | ||||
<Route | <Route | ||||
path="/send-token/:tokenId" | path="/send-token/:tokenId" | ||||
render={props => ( | render={props => ( | ||||
<SendToken | <SendToken | ||||
tokenId={props.match.params.tokenId} | tokenId={props.match.params.tokenId} | ||||
/> | /> | ||||
)} | )} | ||||
/> | /> | ||||
<Route path="/configure"> | <Route path="/configure"> | ||||
<Configure /> | <Configure /> | ||||
</Route> | </Route> | ||||
<Redirect exact from="/" to="/wallet" /> | <Redirect exact from="/" to="/wallet" /> | ||||
<Route component={NotFound} /> | <Route component={NotFound} /> | ||||
</Switch> | </Switch> | ||||
</WalletCtn> | </WalletCtn> | ||||
{wallet ? ( | {wallet ? ( | ||||
<Footer> | <Footer> | ||||
<Tabs | <NavButton | ||||
activeKey={selectedKey} | active={selectedKey === 'wallet'} | ||||
tabPosition="bottom" | |||||
centered | |||||
> | |||||
<TabPane | |||||
tab={ | |||||
<span | |||||
onClick={() => history.push('/wallet')} | onClick={() => history.push('/wallet')} | ||||
> | > | ||||
<FolderOpenFilled /> | <FolderOpenFilled /> | ||||
<fbt desc="Wallet menu button"> | <fbt desc="Wallet menu button">Wallet</fbt> | ||||
Wallet | </NavButton> | ||||
</fbt> | |||||
</span> | <NavButton | ||||
} | active={selectedKey === 'send'} | ||||
key="wallet" | onClick={() => history.push('/send')} | ||||
/> | > | ||||
<TabPane | |||||
tab={ | |||||
<span onClick={() => history.push('/send')}> | |||||
<CaretRightOutlined /> | <CaretRightOutlined /> | ||||
<fbt desc="Send menu button">Send</fbt> | <fbt desc="Send menu button">Send</fbt> | ||||
</span> | </NavButton> | ||||
} | <NavButton | ||||
key="send" | active={selectedKey === 'configure'} | ||||
disabled={!wallet} | onClick={() => history.push('/configure')} | ||||
/> | |||||
<TabPane | |||||
tab={ | |||||
<span | |||||
onClick={() => | |||||
history.push('/configure') | |||||
} | |||||
> | > | ||||
<SettingFilled /> | <SettingFilled /> | ||||
<fbt desc="Settings menu button"> | <fbt desc="Settings menu button">Settings</fbt> | ||||
Settings | </NavButton> | ||||
</fbt> | |||||
</span> | |||||
} | |||||
key="configure" | |||||
disabled={!wallet} | |||||
/> | |||||
</Tabs> | |||||
</Footer> | </Footer> | ||||
) : null} | ) : null} | ||||
</WalletBody> | </WalletBody> | ||||
</div> | </CustomApp> | ||||
</ThemeProvider> | |||||
); | ); | ||||
}; | }; | ||||
export default App; | export default App; |