Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/extension/src/components/App.js
Show First 20 Lines • Show All 253 Lines • ▼ Show 20 Lines | svg { | ||||
max-width: 26px; | max-width: 26px; | ||||
height: auto; | height: auto; | ||||
flex: 1; | flex: 1; | ||||
} | } | ||||
p { | p { | ||||
flex: 2; | flex: 2; | ||||
margin-top: 5px; | margin-top: 5px; | ||||
} | } | ||||
${({ active, ...props }) => | |||||
active && | |||||
` | |||||
color: ${props.theme.navActive}; | |||||
svg { | |||||
fill: ${props.theme.navActive}; | |||||
} | |||||
`} | |||||
`; | `; | ||||
export const NavButton = styled.button` | export const NavButton = styled.button` | ||||
:focus, | :focus, | ||||
:active { | :active { | ||||
outline: none; | outline: none; | ||||
} | } | ||||
cursor: pointer; | cursor: pointer; | ||||
padding: 0; | padding: 0; | ||||
Show All 37 Lines | @media (max-width: 768px) { | ||||
-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; | ||||
flex-direction: column; | |||||
gap: 1rem; | |||||
align-items: center; | align-items: center; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
width: 100%; | width: 100%; | ||||
padding: 15px; | padding: 15px; | ||||
`; | `; | ||||
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; | ||||
} | } | ||||
`; | `; | ||||
// Extension only styled components | // Extension only styled components | ||||
const OpenInTabBtn = styled.button` | const OpenInTabBtn = styled.button` | ||||
background: none; | background: none; | ||||
border: none; | border: none; | ||||
`; | `; | ||||
const ExtTabImg = styled.img` | const ExtTabImg = styled.img` | ||||
max-width: 20px; | max-width: 20px; | ||||
`; | `; | ||||
const NavHeader = styled.div` | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
width: 100%; | |||||
height: 1rem; | |||||
color: ${props => props.theme.navActive}; | |||||
svg { | |||||
padding: 0.2rem; | |||||
fill: ${props => props.theme.navActive}; | |||||
height: 33px; | |||||
width: 30px; | |||||
} | |||||
`; | |||||
const App = () => { | const App = () => { | ||||
const ContextValue = React.useContext(WalletContext); | const ContextValue = React.useContext(WalletContext); | ||||
const { wallet, loading } = ContextValue; | const { wallet, loading } = ContextValue; | ||||
const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false); | const [loadingUtxosAfterSend, setLoadingUtxosAfterSend] = useState(false); | ||||
const [navMenuClicked, setNavMenuClicked] = useState(false); | const [navMenuClicked, setNavMenuClicked] = useState(false); | ||||
const [showApproveAddressShareModal, setShowApproveAddressShareModal] = | const [showApproveAddressShareModal, setShowApproveAddressShareModal] = | ||||
useState(false); | useState(false); | ||||
const [addressRequestTabId, setAddressRequestTabId] = useState(null); | const [addressRequestTabId, setAddressRequestTabId] = useState(null); | ||||
▲ Show 20 Lines • Show All 173 Lines • ▼ Show 20 Lines | return ( | ||||
} | } | ||||
indicator={CashLoadingIcon} | indicator={CashLoadingIcon} | ||||
> | > | ||||
<CustomApp> | <CustomApp> | ||||
<WalletBody> | <WalletBody> | ||||
<WalletCtn> | <WalletCtn> | ||||
<HeaderCtn> | <HeaderCtn> | ||||
<CashtabLogo src={Cashtab} alt="cashtab" /> | <CashtabLogo src={Cashtab} alt="cashtab" /> | ||||
{selectedKey === 'airdrop' && ( | |||||
<NavHeader> | |||||
Airdrop | |||||
<AirdropIcon /> | |||||
</NavHeader> | |||||
)} | |||||
{selectedKey === 'configure' && ( | |||||
<NavHeader> | |||||
Settings | |||||
<SettingsIcon /> | |||||
</NavHeader> | |||||
)} | |||||
{selectedKey === 'signverifymsg' && ( | |||||
<NavHeader> | |||||
{' '} | |||||
Sign & Verify Msg | |||||
<ThemedSignAndVerifyMsg /> | |||||
</NavHeader> | |||||
)} | |||||
{/*Begin extension-only components*/} | {/*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*/} | {/*End extension-only components*/} | ||||
▲ Show 20 Lines • Show All 130 Lines • Show Last 20 Lines |