Differential D9348 Diff 28012 web/cashtab/src/components/Wallet/Tx.js

Changeset View

Standalone View

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

import React from 'react';		import React from 'react';
import styled from 'styled-components';		import styled from 'styled-components';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';		import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { currency } from '@components/Common/Ticker';		import { currency } from '@components/Common/Ticker';
		import makeBlockie from 'ethereum-blockies-base64';
		import { Img } from 'react-image';

const SentTx = styled(ArrowUpOutlined)`		const SentTx = styled(ArrowUpOutlined)`
color: ${props => props.theme.secondary} !important;		color: ${props => props.theme.secondary} !important;
`;		`;
const ReceivedTx = styled(ArrowDownOutlined)`		const ReceivedTx = styled(ArrowDownOutlined)`
color: ${props => props.theme.primary} !important;		color: ${props => props.theme.primary} !important;
`;		`;
const DateType = styled.div`		const DateType = styled.div`
text-align: left;		text-align: left;
padding: 12px;		padding: 12px;
@media screen and (max-width: 500px) {		@media screen and (max-width: 500px) {
font-size: 0.8rem;		font-size: 0.8rem;
}		}
`;		`;

const SentLabel = styled.span`		const SentLabel = styled.span`
font-weight: bold;		font-weight: bold;

color: ${props => props.theme.secondary} !important;		color: ${props => props.theme.secondary} !important;
`;		`;
const ReceivedLabel = styled.span`		const ReceivedLabel = styled.span`
font-weight: bold;		font-weight: bold;
color: ${props => props.theme.primary} !important;		color: ${props => props.theme.primary} !important;
Show All 13 Lines	@media screen and (max-width: 500px) {
height: 24px;		height: 24px;
width: 24px;		width: 24px;
}		}
`;		`;

const TxInfo = styled.div`		const TxInfo = styled.div`
padding: 12px;		padding: 12px;
font-size: 1rem;		font-size: 1rem;
		text-align: right;

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

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

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;
		grid-template-columns: 16px auto;
}		}
`;		`;
		const TxTokenIcon = styled.div`
		img {
		height: 24px;
		width: 24px;
		}
		@media screen and (max-width: 500px) {
		img {
		height: 16px;
		width: 16px;
		}
		}
		grid-column-start: 1;
		grid-column-end: span 1;
		grid-row-start: 1;
		grid-row-end: span 2;
		align-self: center;
		`;
		const TokenTxAmt = styled.div`
		padding-left: 12px;
		text-align: right;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		`;
		const TokenName = styled.div`
		padding-left: 12px;
		font-size: 0.8rem;
		@media screen and (max-width: 500px) {
		font-size: 0.6rem;
		}
		text-align: right;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		`;

const TxWrapper = styled.div`		const TxWrapper = styled.div`
display: grid;		display: grid;
grid-template-columns: 36px 30% 50%;		grid-template-columns: 36px 30% 50%;
@media screen and (max-width: 500px) {
grid-template-columns: 24px 30% 50%;
}
justify-content: space-between;		justify-content: space-between;
align-items: center;		align-items: center;
padding: 15px 25px;		padding: 15px 25px;
border-radius: 3px;		border-radius: 3px;
background: ${props => props.theme.tokenListItem.background};		background: ${props => props.theme.tokenListItem.background};
margin-bottom: 3px;		margin-bottom: 3px;
box-shadow: ${props => props.theme.tokenListItem.boxShadow};		box-shadow: ${props => props.theme.tokenListItem.boxShadow};
border: 1px solid ${props => props.theme.tokenListItem.border};		border: 1px solid ${props => props.theme.tokenListItem.border};

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

const Tx = ({ data }) => {		const Tx = ({ data }) => {
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>
<DateType>		<DateType>
{data.outgoingTx ? (		{data.outgoingTx ? (
<SentLabel>Sent</SentLabel>		<SentLabel>Sent</SentLabel>
) : (		) : (
<ReceivedLabel>Received</ReceivedLabel>		<ReceivedLabel>Received</ReceivedLabel>
)}		)}
<br />		<br />
{txDate}		{txDate}
</DateType>		</DateType>
<TxInfo outgoing={data.outgoingTx}>
{data.tokenTx ? (		{data.tokenTx ? (
		<TokenInfo outgoing={data.outgoingTx}>
		{data.tokenTx && data.tokenInfo ? (
		<>
		<TxTokenIcon>
		{currency.tokenIconsUrl !== '' ? (
		<Img
		src={`${currency.tokenIconsUrl}/${data.tokenInfo.tokenId}.png`}
		unloader={
		<img
		alt={`identicon of tokenId ${data.tokenInfo.tokenId} `}
		style={{
		borderRadius: '50%',
		}}
		key={`identicon-${data.tokenInfo.tokenId}`}
		src={makeBlockie(
		data.tokenInfo.tokenId,
		)}
		/>
		}
		/>
		) : (
		<img
		alt={`identicon of tokenId ${data.tokenInfo.tokenId} `}
		style={{
		borderRadius: '50%',
		}}
		key={`identicon-${data.tokenInfo.tokenId}`}
		src={makeBlockie(
		data.tokenInfo.tokenId,
		)}
		/>
		)}
		</TxTokenIcon>
		{data.outgoingTx ? (
		<>
		<TokenTxAmt>
		- {data.tokenInfo.qtySent.toString()}
		{data.tokenInfo.tokenTicker}
		</TokenTxAmt>
		<TokenName>
		{data.tokenInfo.tokenName}
		</TokenName>
		</>
		) : (
		<>
		<TokenTxAmt>
		+{' '}
		{data.tokenInfo.qtyReceived.toString()}
		{data.tokenInfo.tokenTicker}
		</TokenTxAmt>
		<TokenName>
		{data.tokenInfo.tokenName}
		</TokenName>
		</>
		)}
		</>
		) : (
<span>Token Tx</span>		<span>Token Tx</span>
		)}
		</TokenInfo>
) : (		) : (
<>		<>
		<TxInfo outgoing={data.outgoingTx}>
{data.outgoingTx		{data.outgoingTx
? `- ${data.amountSent.toFixed(8)} ${		? `- ${data.amountSent.toFixed(8)} ${
currency.ticker		currency.ticker
}`		}`
: `+ ${data.amountReceived.toFixed(8)} ${		: `+ ${data.amountReceived.toFixed(8)} ${
currency.ticker		currency.ticker
}`}		}`}
		</TxInfo>
</>		</>
)}		)}
</TxInfo>
</TxWrapper>		</TxWrapper>
);		);
};		};

export default Tx;		export default Tx;