Differential D10287 Diff 30390 web/cashtab/src/components/Wallet/Wallet.js

Changeset View

Standalone View

web/cashtab/src/components/Wallet/Wallet.js

Show All 30 Lines	export const TabLabel = styled.button`
cursor: pointer;		cursor: pointer;

@media (max-width: 400px) {		@media (max-width: 400px) {
font-size: 16px;		font-size: 16px;
}		}

${({ active, ...props }) =>		${({ active, ...props }) =>
active &&		active &&
`		`
color: ${props.theme.primary};		color: ${props.theme.primary};
`}		`}
`;		`;
export const TabLine = styled.div`		export const TabLine = styled.div`
margin: auto;		margin: auto;
transition: margin-left 0.5s ease-in-out, width 0.5s 0.1s;		transition: margin-left 0.5s ease-in-out, width 0.5s 0.1s;
height: 4px;		height: 4px;
border-radius: 5px;		border-radius: 5px;
background-color: ${props => props.theme.primary};		background-color: ${props => props.theme.primary};
pointer-events: none;		pointer-events: none;

margin-left: 72%;		margin-left: 72%;
width: 28%;		width: 28%;

${({ left, ...props }) =>		${({ left, ...props }) =>
left &&		left &&
`		`
margin-left: 1%		margin-left: 1%
width: 69%;		width: 69%;
`}		`}
`;		`;
export const TabPane = styled.div`		export const TabPane = styled.div`
${({ active }) =>		${({ active }) =>
!active &&		!active &&
`		`
display: none;		display: none;
`}		`}
`;		`;

export const SwitchBtnCtn = styled.div`		export const SwitchBtnCtn = styled.div`
display: flex;		display: flex;
align-items: center;		align-items: center;
justify-content: center;		justify-content: center;
▲ Show 20 Lines • Show All 196 Lines • ▼ Show 20 Lines	return (
onClick={() => setActiveTab('txHistory')}		onClick={() => setActiveTab('txHistory')}
>		>
Transaction History		Transaction History
</TabLabel>		</TabLabel>
<TabLabel		<TabLabel
active={activeTab === 'tokens'}		active={activeTab === 'tokens'}
onClick={() => setActiveTab('tokens')}		onClick={() => setActiveTab('tokens')}
>		>
Tokens		eTokens
</TabLabel>		</TabLabel>
<TabLine left={activeTab === 'txHistory'} />		<TabLine left={activeTab === 'txHistory'} />
</Tabs>		</Tabs>

<TabPane active={activeTab === 'txHistory'}>		<TabPane active={activeTab === 'txHistory'}>
<TxHistory		<TxHistory
txs={parsedTxHistory}		txs={parsedTxHistory}
fiatPrice={fiatPrice}		fiatPrice={fiatPrice}
▲ Show 20 Lines • Show All 50 Lines • Show Last 20 Lines