Differential D9358 Diff 28049 web/cashtab/src/components/Wallet/Tx.js

Changeset View

Standalone View

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

Show First 20 Lines • Show All 51 Lines • ▼ Show 20 Lines	const TxInfo = styled.div`

color: ${props =>		color: ${props =>
props.outgoing ? props.theme.secondary : props.theme.primary};		props.outgoing ? props.theme.secondary : props.theme.primary};

@media screen and (max-width: 500px) {		@media screen and (max-width: 500px) {
font-size: 0.8rem;		font-size: 0.8rem;
}		}
`;		`;
		const TxFiatPrice = styled.span`
		font-size: 0.8rem;
		`;
const TokenInfo = styled.div`		const TokenInfo = styled.div`
display: grid;		display: grid;
grid-template-rows: 50%;		grid-template-rows: 50%;
grid-template-columns: 24px auto;		grid-template-columns: 24px auto;
padding: 12px;		padding: 12px;
font-size: 1rem;		font-size: 1rem;

color: ${props =>		color: ${props =>
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines	:hover {
border-color: ${props => props.theme.primary};		border-color: ${props => props.theme.primary};
}		}
@media screen and (max-width: 500px) {		@media screen and (max-width: 500px) {
grid-template-columns: 24px 30% 50%;		grid-template-columns: 24px 30% 50%;
padding: 12px 12px;		padding: 12px 12px;
}		}
`;		`;

const Tx = ({ data }) => {		const Tx = ({ data, fiatPrice }) => {
const txDate =		const txDate =
typeof data.blocktime === 'undefined'		typeof data.blocktime === 'undefined'
? new Date().toLocaleDateString()		? new Date().toLocaleDateString()
: new Date(data.blocktime * 1000).toLocaleDateString();		: new Date(data.blocktime * 1000).toLocaleDateString();

return (		return (
<TxWrapper>		<TxWrapper>
<TxIcon>{data.outgoingTx ? <SentTx /> : <ReceivedTx />}</TxIcon>		<TxIcon>{data.outgoingTx ? <SentTx /> : <ReceivedTx />}</TxIcon>
▲ Show 20 Lines • Show All 65 Lines • ▼ Show 20 Lines	return (
</>		</>
) : (		) : (
<span>Token Tx</span>		<span>Token Tx</span>
)}		)}
</TokenInfo>		</TokenInfo>
) : (		) : (
<>		<>
<TxInfo outgoing={data.outgoingTx}>		<TxInfo outgoing={data.outgoingTx}>
{data.outgoingTx		{data.outgoingTx ? (
? `- ${data.amountSent.toFixed(8)} ${		<>
currency.ticker		- {data.amountSent.toFixed(8)}
}`		{currency.ticker}
: `+ ${data.amountReceived.toFixed(8)} ${		<br />
currency.ticker		{fiatPrice !== null &&
}`}		!isNaN(data.amountSent) && (
		<TxFiatPrice>
		- $
		{(
		data.amountSent * fiatPrice
		).toFixed(2)}{' '}
		USD
		</TxFiatPrice>
		)}
		</>
		) : (
		<>
		+ {data.amountReceived.toFixed(8)}
		{currency.ticker}
		<br />
		{fiatPrice !== null &&
		!isNaN(data.amountReceived) && (
		<TxFiatPrice>
		+ $
		{(
		data.amountReceived * fiatPrice
		).toFixed(2)}{' '}
		USD
		</TxFiatPrice>
		)}
		</>
		)}
</TxInfo>		</TxInfo>
</>		</>
)}		)}
</TxWrapper>		</TxWrapper>
);		);
};		};

export default Tx;		export default Tx;