Differential D9344 Diff 28007 web/cashtab/src/components/Wallet/Wallet.js

Changeset View

Standalone View

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

Show First 20 Lines • Show All 48 Lines • ▼ Show 20 Lines

export const ZeroBalanceHeader = styled.div`		export const ZeroBalanceHeader = styled.div`
color: ${props => props.theme.wallet.text.primary};		color: ${props => props.theme.wallet.text.primary};
width: 100%;		width: 100%;
font-size: 14px;		font-size: 14px;
margin-bottom: 5px;		margin-bottom: 5px;
`;		`;

		export const Tabs = styled.div`
		margin: auto;
		margin-bottom: 12px;
		display: inline-block;
		text-align: center;
		`;
		export const TabLabel = styled.button`
		:focus,
		:active {
		outline: none;
		}

		border: none;
		background: none;
		font-size: 20px;
		cursor: pointer;

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

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

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

		${({ left, ...props }) =>
		left &&
		`
		margin-left: 1%
		width: 69%;
		`}
		`;
		export const TabPane = styled.div`
		${({ active }) =>
		!active &&
		`
		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;
align-content: space-between;		align-content: space-between;
margin-bottom: 15px;		margin-bottom: 15px;
.nonactiveBtn {		.nonactiveBtn {
color: ${props => props.theme.wallet.text.secondary};		color: ${props => props.theme.wallet.text.secondary};
▲ Show 20 Lines • Show All 84 Lines • ▼ Show 20 Lines
`;		`;

const WalletInfo = () => {		const WalletInfo = () => {
const ContextValue = React.useContext(WalletContext);		const ContextValue = React.useContext(WalletContext);
const {		const {
wallet,		wallet,
fiatPrice,		fiatPrice,
balances,		balances,
		tokens,
parsedTxHistory,		parsedTxHistory,
apiError,		apiError,
} = ContextValue;		} = ContextValue;
const [address, setAddress] = React.useState('cashAddress');		const [address, setAddress] = React.useState('cashAddress');
		const [activeTab, setActiveTab] = React.useState('txHistory');

const hasHistory = parsedTxHistory && parsedTxHistory.length > 0;		const hasHistory = parsedTxHistory && parsedTxHistory.length > 0;

const handleChangeAddress = () => {		const handleChangeAddress = () => {
setAddress(address === 'cashAddress' ? 'slpAddress' : 'cashAddress');		setAddress(address === 'cashAddress' ? 'slpAddress' : 'cashAddress');
};		};

return (		return (
▲ Show 20 Lines • Show All 76 Lines • ▼ Show 20 Lines	return (
className={		className={
address === 'cashAddress' ? 'nonactiveBtn' : 'slpActive'		address === 'cashAddress' ? 'nonactiveBtn' : 'slpActive'
}		}
>		>
{currency.tokenTicker}		{currency.tokenTicker}
</SwitchBtn>		</SwitchBtn>
</SwitchBtnCtn>		</SwitchBtnCtn>
{hasHistory && parsedTxHistory && (		{hasHistory && parsedTxHistory && (
<TxHistory txs={parsedTxHistory} />
)}
{balances.totalBalance ? (
<>		<>
		<Tabs>
		<TabLabel
		active={activeTab === 'txHistory'}
		onClick={() => setActiveTab('txHistory')}
		>
		Transaction History
		</TabLabel>
		<TabLabel
		active={activeTab === 'tokens'}
		onClick={() => setActiveTab('tokens')}
		>
		Tokens
		</TabLabel>
		<TabLine left={activeTab === 'txHistory'} />
		</Tabs>

		<TabPane active={activeTab === 'txHistory'}>
		<TxHistory txs={parsedTxHistory} />
<ExternalLink		<ExternalLink
style={{ marginTop: '24px' }}		style={{ marginTop: '24px' }}
href={`${currency.blockExplorerUrl}/address/${wallet.Path1899.cashAddress}`}		href={`${currency.blockExplorerUrl}/address/${wallet.Path1899.cashAddress}`}
target="_blank"		target="_blank"
rel="noopener noreferrer"		rel="noopener noreferrer"
>		>
<LinkOutlined /> More transactions		<LinkOutlined /> More transactions
</ExternalLink>		</ExternalLink>
		</TabPane>
		<TabPane active={activeTab === 'tokens'}>
		{tokens && tokens.length > 0 ? (
		<TokenList tokens={tokens} />
		) : (
		<p>
		Tokens sent to your {currency.tokenTicker}{' '}
		address will appear here
		</p>
		)}
		</TabPane>
</>		</>
) : null}		)}
</>		</>
);		);
};		};

const Wallet = () => {		const Wallet = () => {
const ContextValue = React.useContext(WalletContext);		const ContextValue = React.useContext(WalletContext);
const { wallet, tokens, loading } = ContextValue;		const { wallet, loading } = ContextValue;

return (		return (
<>		<>
{loading && (		{loading ? (
<LoadingCtn>		<LoadingCtn>
<LoadingOutlined />		<LoadingOutlined />
</LoadingCtn>		</LoadingCtn>
		) : (
		<>{wallet.Path1899 ? <WalletInfo /> : <OnBoarding />}</>
)}		)}
{!loading && wallet.Path245 && <WalletInfo />}

{!loading && wallet.Path245 && tokens && tokens.length > 0 && (
<TokenList tokens={tokens} />
)}
{!loading && !wallet.Path245 ? <OnBoarding /> : null}
</>		</>
);		);
};		};

export default Wallet;		export default Wallet;