Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/extension/src/components/App.js
import React, { useState, useEffect } from 'react'; | import React, { useState, useEffect } from 'react'; | ||||
import 'antd/dist/antd.less'; | import 'antd/dist/antd.less'; | ||||
import PropTypes from 'prop-types'; | import PropTypes from 'prop-types'; | ||||
import { Spin, Modal } from 'antd'; | import { Spin, Modal } from 'antd'; | ||||
import { | import { | ||||
CashLoadingIcon, | CashLoadingIcon, | ||||
HomeIcon, | HomeIcon, | ||||
SendIcon, | SendIcon, | ||||
ReceiveIcon, | ReceiveIcon, | ||||
SettingsIcon, | SettingsIcon, | ||||
AirdropIcon, | AirdropIcon, | ||||
ThemedSignAndVerifyMsg, | |||||
} from 'components/Common/CustomIcons'; | } 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 Home from 'components/Home/Home'; | import Home from 'components/Home/Home'; | ||||
import Receive from 'components/Receive/Receive'; | import Receive from 'components/Receive/Receive'; | ||||
import Tokens from 'components/Tokens/Tokens'; | import Tokens from 'components/Tokens/Tokens'; | ||||
import Send from 'components/Send/Send'; | import Send from 'components/Send/Send'; | ||||
▲ Show 20 Lines • Show All 214 Lines • ▼ Show 20 Lines | const NavItem = styled.button` | ||||
justify-content: right; | justify-content: right; | ||||
align-items: center; | align-items: center; | ||||
width: 100%; | width: 100%; | ||||
white-space: nowrap; | white-space: nowrap; | ||||
height: 3rem; | height: 3rem; | ||||
background-color: ${props => props.theme.walletBackground}; | background-color: ${props => props.theme.walletBackground}; | ||||
border: none; | border: none; | ||||
color: ${props => props.theme.contrast}; | color: ${props => props.theme.contrast}; | ||||
gap: 6px; | |||||
cursor: pointer; | cursor: pointer; | ||||
gap: 1rem; | |||||
&:hover { | &:hover { | ||||
color: ${props => props.theme.navActive}; | color: ${props => props.theme.navActive}; | ||||
svg { | svg { | ||||
fill: ${props => props.theme.navActive}; | fill: ${props => props.theme.navActive}; | ||||
} | } | ||||
} | } | ||||
svg { | svg { | ||||
fill: ${props => props.theme.contrast}; | fill: ${props => props.theme.contrast}; | ||||
width: 26px; | max-width: 26px; | ||||
height: auto; | height: auto; | ||||
flex: 1; | |||||
} | |||||
p { | |||||
flex: 2; | |||||
margin-top: 5px; | |||||
} | } | ||||
`; | `; | ||||
export const NavButton = styled.button` | export const NavButton = styled.button` | ||||
:focus, | :focus, | ||||
:active { | :active { | ||||
outline: none; | outline: none; | ||||
} | } | ||||
cursor: pointer; | cursor: pointer; | ||||
▲ Show 20 Lines • Show All 324 Lines • ▼ Show 20 Lines | return ( | ||||
<NavMenu open={navMenuClicked}> | <NavMenu open={navMenuClicked}> | ||||
<NavItem | <NavItem | ||||
active={selectedKey === 'airdrop'} | active={selectedKey === 'airdrop'} | ||||
onClick={() => | onClick={() => | ||||
history.push('/airdrop') | history.push('/airdrop') | ||||
} | } | ||||
> | > | ||||
{' '} | {' '} | ||||
Airdrop | <p>Airdrop</p> | ||||
<AirdropIcon /> | <AirdropIcon /> | ||||
</NavItem> | </NavItem> | ||||
<NavItem | <NavItem | ||||
active={ | |||||
selectedKey === 'signverifymsg' | |||||
} | |||||
onClick={() => | |||||
history.push('/signverifymsg') | |||||
} | |||||
> | |||||
<p>Sign & Verify</p> | |||||
<ThemedSignAndVerifyMsg /> | |||||
</NavItem> | |||||
<NavItem | |||||
active={selectedKey === 'configure'} | active={selectedKey === 'configure'} | ||||
onClick={() => | onClick={() => | ||||
history.push('/configure') | history.push('/configure') | ||||
} | } | ||||
> | > | ||||
Settings | <p>Settings</p> | ||||
<SettingsIcon /> | <SettingsIcon /> | ||||
</NavItem> | </NavItem> | ||||
</NavMenu> | </NavMenu> | ||||
</NavWrapper> | </NavWrapper> | ||||
</Footer> | </Footer> | ||||
) : null} | ) : null} | ||||
</WalletBody> | </WalletBody> | ||||
</CustomApp> | </CustomApp> | ||||
Show All 10 Lines |