Differential D12473 Diff 36447 web/cashtab/src/components/App.js

Changeset View

Standalone View

web/cashtab/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: 0;		margin: 0;
}		}
		${({ 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;
Show All 38 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: center;		justify-content: center;
width: 100%;		width: 100%;
padding: 15px 0;		padding: 15px 0;
`;		`;

export const CashTabLogo = styled.img`		export const CashTabLogo = styled.img`
width: 120px;		width: 120px;
Show All 24 Lines	:hover {
bottom: 0;		bottom: 0;
}		}

@media screen and (max-width: 1250px) {		@media screen and (max-width: 1250px) {
display: none;		display: none;
}		}
`;		`;

		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 handleNavMenuClick = () => setNavMenuClicked(!navMenuClicked);		const handleNavMenuClick = () => setNavMenuClicked(!navMenuClicked);
// If wallet is unmigrated, do not show page until it has migrated		// 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		// An invalid wallet will be validated/populated after the next API call, ETA 10s
▲ Show 20 Lines • Show All 43 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 component not included in extension as desktop only/}		{/Begin component not included in extension as desktop only/}
{hasTab && (		{hasTab && (
<EasterEgg src={TabCash} alt="tabcash" />		<EasterEgg src={TabCash} alt="tabcash" />
)}		)}
{/End component not included in extension as desktop only/}		{/End component not included in extension as desktop only/}
</HeaderCtn>		</HeaderCtn>
<ProtectableComponentWrapper>		<ProtectableComponentWrapper>
<Switch>		<Switch>
▲ Show 20 Lines • Show All 72 Lines • ▼ Show 20 Lines	return (
/>		/>
</NavButton>		</NavButton>
<NavButton		<NavButton
active={selectedKey === 'receive'}		active={selectedKey === 'receive'}
onClick={() => history.push('receive')}		onClick={() => history.push('receive')}
>		>
<ReceiveIcon />		<ReceiveIcon />
</NavButton>		</NavButton>

<NavWrapper onClick={handleNavMenuClick}>		<NavWrapper onClick={handleNavMenuClick}>
<NavIcon clicked={navMenuClicked} />		<NavIcon clicked={navMenuClicked} />
<NavMenu open={navMenuClicked}>		<NavMenu open={navMenuClicked}>
<NavItem		<NavItem
active={selectedKey === 'airdrop'}		active={selectedKey === 'airdrop'}
onClick={() =>		onClick={() =>
history.push('/airdrop')		history.push('/airdrop')
}		}
▲ Show 20 Lines • Show All 41 Lines • Show Last 20 Lines