Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/extension/src/components/App.js
import React from 'react'; | import React, { useState } from 'react'; | ||||
import 'antd/dist/antd.less'; | import 'antd/dist/antd.less'; | ||||
import { Spin } from 'antd'; | |||||
import { CashLoadingIcon } from '@components/Common/CustomIcons'; | |||||
import '../index.css'; | import '../index.css'; | ||||
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'; | import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'; | ||||
import { theme } from '@assets/styles/theme'; | import { theme } from '@assets/styles/theme'; | ||||
import { | import { | ||||
FolderOpenFilled, | FolderOpenFilled, | ||||
CaretRightOutlined, | CaretRightOutlined, | ||||
SettingFilled, | SettingFilled, | ||||
AppstoreAddOutlined, | AppstoreAddOutlined, | ||||
} 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 PopOut from '@assets/popout.svg'; | |||||
import './App.css'; | import './App.css'; | ||||
import { WalletContext } from '@utils/context'; | import { WalletContext } from '@utils/context'; | ||||
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'; | ||||
// Extension-only import used for open in new tab link | |||||
import PopOut from '@assets/popout.svg'; | |||||
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 20 Lines • Show All 41 Lines • ▼ Show 20 Lines | const Footer = styled.div` | ||||
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: ${props => props.theme.app.sidebars}; | background-image: ${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 34 Lines | |||||
`; | `; | ||||
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` | |||||
width: 150px; | // Extension only styled components | ||||
@media (max-width: 768px) { | const OpenInTabBtn = styled.button` | ||||
width: 120px; | background: none; | ||||
} | border: none; | ||||
`; | |||||
const ExtTabImg = styled.img` | |||||
max-width: 20px; | |||||
`; | `; | ||||
const App = () => { | const App = () => { | ||||
const ContextValue = React.useContext(WalletContext); | const ContextValue = React.useContext(WalletContext); | ||||
const { wallet } = ContextValue; | const { wallet, loading } = ContextValue; | ||||
const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false); | |||||
// 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 | |||||
const validWallet = isValidStoredWallet(wallet); | |||||
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) : ''; | ||||
// openInTab is an extension-only method | |||||
const openInTab = () => { | const openInTab = () => { | ||||
window.open(`index.html#/${selectedKey}`); | window.open(`index.html#/${selectedKey}`); | ||||
}; | }; | ||||
return ( | return ( | ||||
<ThemeProvider theme={theme}> | <ThemeProvider theme={theme}> | ||||
<GlobalStyle /> | <GlobalStyle /> | ||||
<Spin | |||||
spinning={ | |||||
loading || loadingUtxosAfterSend || (wallet && !validWallet) | |||||
} | |||||
indicator={CashLoadingIcon} | |||||
> | |||||
<CustomApp> | <CustomApp> | ||||
<WalletBody> | <WalletBody> | ||||
<WalletCtn> | <WalletCtn> | ||||
<HeaderCtn> | <HeaderCtn> | ||||
<CashTabLogo src={CashTab} alt="cashtab" /> | <CashTabLogo src={CashTab} alt="cashtab" /> | ||||
{/*Begin extension-only components*/} | |||||
<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> | ||||
{/*End extension-only components*/} | |||||
</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 | ||||
passLoadingStatus={ | |||||
setLoadingUtxosAfterSend | |||||
} | |||||
/> | |||||
</Route> | </Route> | ||||
<Route path="/send"> | <Route path="/send"> | ||||
<Send /> | <Send | ||||
passLoadingStatus={ | |||||
setLoadingUtxosAfterSend | |||||
} | |||||
/> | |||||
</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} | ||||
passLoadingStatus={ | |||||
setLoadingUtxosAfterSend | |||||
} | |||||
/> | /> | ||||
)} | )} | ||||
/> | /> | ||||
<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> | ||||
<NavButton | <NavButton | ||||
active={selectedKey === 'wallet'} | active={selectedKey === 'wallet'} | ||||
onClick={() => history.push('/wallet')} | onClick={() => history.push('/wallet')} | ||||
> | > | ||||
<FolderOpenFilled /> | <FolderOpenFilled /> | ||||
Wallet | Wallet | ||||
</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 /> | ||||
Send | Send | ||||
</NavButton> | </NavButton> | ||||
<NavButton | <NavButton | ||||
active={selectedKey === 'configure'} | active={selectedKey === 'configure'} | ||||
onClick={() => history.push('/configure')} | onClick={() => history.push('/configure')} | ||||
> | > | ||||
<SettingFilled /> | <SettingFilled /> | ||||
Settings | Settings | ||||
</NavButton> | </NavButton> | ||||
</Footer> | </Footer> | ||||
) : null} | ) : null} | ||||
</WalletBody> | </WalletBody> | ||||
</CustomApp> | </CustomApp> | ||||
</Spin> | |||||
</ThemeProvider> | </ThemeProvider> | ||||
); | ); | ||||
}; | }; | ||||
export default App; | export default App; |