Differential D9328 Diff 27970 web/cashtab/src/components/Wallet/Wallet.js

Changeset View

Standalone View

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

import React from 'react';		import React from 'react';
import styled from 'styled-components';		import styled from 'styled-components';
import { LinkOutlined, LoadingOutlined } from '@ant-design/icons';		import { LinkOutlined, LoadingOutlined } from '@ant-design/icons';
import { WalletContext } from '@utils/context';		import { WalletContext } from '@utils/context';
import { OnBoarding } from '@components/OnBoarding/OnBoarding';		import { OnBoarding } from '@components/OnBoarding/OnBoarding';
import { QRCode } from '@components/Common/QRCode';		import { QRCode } from '@components/Common/QRCode';
import { currency } from '@components/Common/Ticker.js';		import { currency } from '@components/Common/Ticker.js';
import { Link } from 'react-router-dom';		import { Link } from 'react-router-dom';
import TokenList from './TokenList';		import TokenList from './TokenList';
		import TxHistory from './TxHistory';
import { CashLoader } from '@components/Common/CustomIcons';		import { CashLoader } from '@components/Common/CustomIcons';
import { formatBalance } from '@utils/cashMethods';		import { formatBalance } from '@utils/cashMethods';

export const LoadingCtn = styled.div`		export const LoadingCtn = styled.div`
width: 100%;		width: 100%;
display: flex;		display: flex;
align-items: center;		align-items: center;
justify-content: center;		justify-content: center;
▲ Show 20 Lines • Show All 126 Lines • ▼ Show 20 Lines	export const ExternalLink = styled.a`
@media (max-width: 768px) {		@media (max-width: 768px) {
padding: 10px 0;		padding: 10px 0;
font-size: 14px;		font-size: 14px;
}		}
`;		`;

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

const hasHistory =		const hasHistory = parsedTxHistory && parsedTxHistory.length > 0;
(txHistory &&
txHistory[0] &&
txHistory[0].transactions &&
txHistory[0].transactions.length > 0) \|\|
(txHistory &&
txHistory[1] &&
txHistory[1].transactions &&
txHistory[1].transactions.length > 0);

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

return (		return (
<>		<>
{!balances.totalBalance && !apiError && !hasHistory ? (		{!balances.totalBalance && !apiError && !hasHistory ? (
▲ Show 20 Lines • Show All 73 Lines • ▼ Show 20 Lines	return (
onClick={() => handleChangeAddress()}		onClick={() => handleChangeAddress()}
className={		className={
address === 'cashAddress' ? 'nonactiveBtn' : 'slpActive'		address === 'cashAddress' ? 'nonactiveBtn' : 'slpActive'
}		}
>		>
{currency.tokenTicker}		{currency.tokenTicker}
</SwitchBtn>		</SwitchBtn>
</SwitchBtnCtn>		</SwitchBtnCtn>
		{hasHistory && parsedTxHistory && (
		<TxHistory txs={parsedTxHistory} />
		)}
{balances.totalBalance ? (		{balances.totalBalance ? (
<>		<>
<ExternalLink		<ExternalLink
		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 /> View Transactions		<LinkOutlined /> More transactions
</ExternalLink>		</ExternalLink>
</>		</>
) : null}		) : null}
</>		</>
);		);
};		};

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

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

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

export default Wallet;		export default Wallet;