Differential D10970 Diff 32402 web/cashtab/src/components/Home/Tx.js

Changeset View

Standalone View

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

This file was moved from web/cashtab/src/components/Wallet/Tx.js.

import React from 'react';		import React from 'react';
import { Link } from 'react-router-dom';		import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';		import PropTypes from 'prop-types';
import styled from 'styled-components';		import styled from 'styled-components';
import {		import {
ArrowUpOutlined,		SendIcon,
ArrowDownOutlined,		ReceiveIcon,
ExperimentOutlined,		GenesisIcon,
ExclamationOutlined,		UnparsedIcon,
} from '@ant-design/icons';		} from '@components/Common/CustomIcons';
import { currency } from '@components/Common/Ticker';		import { currency } from '@components/Common/Ticker';
import makeBlockie from 'ethereum-blockies-base64';		import makeBlockie from 'ethereum-blockies-base64';
import { Img } from 'react-image';		import { Img } from 'react-image';
import { fromLegacyDecimals } from '@utils/cashMethods';		import { fromLegacyDecimals } from '@utils/cashMethods';
import { formatBalance, formatDate } from '@utils/formatting';		import { formatBalance, formatDate } from '@utils/formatting';
const SentTx = styled(ArrowUpOutlined)`
color: ${props => props.theme.secondary} !important;		const TxIcon = styled.div`
		svg {
		width: 20px;
		height: 20px;
		}
		height: 40px;
		width: 40px;
		border: 1px solid #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100px;
`;		`;
const ReceivedTx = styled(ArrowDownOutlined)`
color: ${props => props.theme.primary} !important;		const SentTx = styled(TxIcon)`
		svg {
		margin-right: -3px;
		}
		fill: ${props => props.theme.contrast};
`;		`;
const GenesisTx = styled(ExperimentOutlined)`		const ReceivedTx = styled(TxIcon)`
color: ${props => props.theme.primary} !important;		svg {
		fill: ${props => props.theme.eCashBlue};
		}
		border-color: ${props => props.theme.eCashBlue};
`;		`;
const UnparsedTx = styled(ExclamationOutlined)`		const GenesisTx = styled(TxIcon)`
color: ${props => props.theme.primary} !important;		border-color: ${props => props.theme.genesisGreen};
		svg {
		fill: ${props => props.theme.genesisGreen};
		}
		`;
		const UnparsedTx = styled(TxIcon)`
		color: ${props => props.theme.eCashBlue} !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 OpReturnType = styled.span`
		const LeftTextCtn = styled.div`
text-align: left;		text-align: left;
width: 300%;		display: flex;
max-height: 200px;		align-items: left;
padding: 3px;		flex-direction: column;
margin: auto;		margin-left: 10px;
word-break: break-word;		h3 {
padding-left: 13px;		color: ${props => props.theme.contrast};
padding-right: 30px;		font-size: 14px;
/* invisible scrollbar */		font-weight: 700;
overflow: hidden;		margin: 0;
height: 100%;		}
margin-right: -50px; /* Maximum width of scrollbar */		.genesis {
padding-right: 50px; /* Maximum width of scrollbar */		color: ${props => props.theme.genesisGreen};
overflow-y: scroll;		}
::-webkit-scrollbar {		.received {
display: none;		color: ${props => props.theme.eCashBlue};
		}
		h4 {
		font-size: 12px;
		color: ${props => props.theme.lightWhite};
		margin: 0;
}		}
`;		`;

		const RightTextCtn = styled.div`
		text-align: right;
		display: flex;
		align-items: left;
		flex-direction: column;
		margin-left: 10px;
		h3 {
		color: ${props => props.theme.contrast};
		font-size: 14px;
		font-weight: 700;
		margin: 0;
		}
		.genesis {
		color: ${props => props.theme.genesisGreen};
		}
		.received {
		color: ${props => props.theme.eCashBlue};
		}
		h4 {
		font-size: 12px;
		color: ${props => props.theme.lightWhite};
		margin: 0;
		}
		`;
		const OpReturnType = styled.div`
		text-align: right;
		width: 100%;
		padding: 10px;
		border-radius: 5px;
		background: ${props => props.theme.sentMessage};
		margin-top: 15px;
		h4 {
		color: ${props => props.theme.lightWhite};
		margin: 0;
		font-size: 12px;
		display: inline-block;
		}
		p {
		color: ${props => props.theme.contrast};
		margin: 0;
		font-size: 14px;
		margin-bottom: 10px;
		overflow-wrap: break-word;
		}
		a {
		color: ${props => props.theme.contrast};
		margin: 0;
		font-size: 10px;
		border: 1px solid ${props => props.theme.contrast};
		border-radius: 5px;
		padding: 2px 10px;
		opacity: 0.6;
		}
		a:hover {
		opacity: 1;
		border-color: ${props => props.theme.eCashBlue};
		color: ${props => props.theme.contrast};
		background: ${props => props.theme.eCashBlue};
		}
		${({ received, ...props }) =>
		received &&
		`
		text-align: left;
		background: ${props.theme.receivedMessage};
		`}
		`;
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.eCashBlue} !important;
		`;
		const GenesisLabel = styled.span`
		font-weight: bold;
		color: ${props => props.theme.genesisGreen} !important;
`;		`;
const CashtabMessageLabel = styled.span`		const CashtabMessageLabel = styled.span`
text-align: left;		text-align: left;
font-weight: bold;		font-weight: bold;
color: ${props => props.theme.primary} !important;		color: ${props => props.theme.eCashBlue} !important;
white-space: nowrap;		white-space: nowrap;
`;		`;
const EncryptionMessageLabel = styled.span`		const EncryptionMessageLabel = styled.span`
text-align: left;
font-weight: bold;		font-weight: bold;
color: ${props => props.theme.wallet.encryption};		font-size: 12px;
		color: ${props => props.theme.encryptionRed};
white-space: nowrap;		white-space: nowrap;
`;		`;
const UnauthorizedDecryptionMessage = styled.span`		const UnauthorizedDecryptionMessage = styled.span`
text-align: left;		text-align: left;
color: ${props => props.theme.wallet.encryption};		color: ${props => props.theme.encryptionRed};
white-space: nowrap;		white-space: nowrap;
font-style: italic;		font-style: italic;
`;		`;
const MessageLabel = styled.span`		const MessageLabel = styled.span`
text-align: left;		text-align: left;
font-weight: bold;		font-weight: bold;
color: ${props => props.theme.secondary} !important;		color: ${props => props.theme.secondary} !important;
white-space: nowrap;		white-space: nowrap;
`;		`;
const ReplyMessageLabel = styled.span`		const ReplyMessageLabel = styled.span`
color: ${props => props.theme.primary} !important;		color: ${props => props.theme.eCashBlue} !important;
`;
const TxIcon = styled.div`
svg {
width: 32px;
height: 32px;
}
height: 32px;
width: 32px;
@media screen and (max-width: 500px) {
svg {
width: 24px;
height: 24px;
}
height: 24px;
width: 24px;
}
`;		`;

const TxInfo = styled.div`		const TxInfo = styled.div`
padding: 12px;
font-size: 1rem;
text-align: right;		text-align: right;
		display: flex;
color: ${props =>		align-items: left;
props.outgoing ? props.theme.secondary : props.theme.primary};		flex-direction: column;
		margin-left: 10px;
		flex-grow: 2;
		h3 {
		color: ${props => props.theme.contrast};
		font-size: 14px;
		font-weight: 700;
		margin: 0;
		}
		.genesis {
		color: ${props => props.theme.genesisGreen};
		}
		.received {
		color: ${props => props.theme.eCashBlue};
		}
		h4 {
		font-size: 12px;
		color: ${props => props.theme.lightWhite};
		margin: 0;
		}

@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: flex;
grid-template-rows: 50%;		flex-grow: 1;
grid-template-columns: 24px auto;		justify-content: flex-end;
padding: 12px;
font-size: 1rem;

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

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

const TxWrapper = styled.div`		const TxWrapper = styled.div`
display: grid;		display: flex;
grid-template-columns: 36px 30% 50%;

justify-content: space-between;
align-items: center;		align-items: center;
padding: 15px 25px;		border-top: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;		color: ${props => props.theme.contrast};
background: ${props => props.theme.tokenListItem.background};		padding: 10px 0;
margin-bottom: 12px;		flex-wrap: wrap;
box-shadow: ${props => props.theme.tokenListItem.boxShadow};

:hover {
transform: translateY(-2px);
box-shadow: rgb(136 172 243 / 25%) 0px 10px 30px,
rgb(0 0 0 / 3%) 0px 1px 1px, rgb(0 51 167 / 10%) 0px 10px 20px;
transition: all 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
}
@media screen and (max-width: 500px) {
grid-template-columns: 24px 30% 50%;
padding: 12px 12px;
}
`;		`;

const Tx = ({ data, fiatPrice, fiatCurrency }) => {		const Tx = ({ data, fiatPrice, fiatCurrency }) => {
const txDate =		const txDate =
typeof data.blocktime === 'undefined'		typeof data.blocktime === 'undefined'
? formatDate()		? formatDate()
: formatDate(data.blocktime, navigator.language);		: formatDate(data.blocktime, navigator.language);
// if data only includes height and txid, then the tx could not be parsed by cashtab		// if data only includes height and txid, then the tx could not be parsed by cashtab
// render as such but keep link to block explorer		// render as such but keep link to block explorer
let unparsedTx = false;		let unparsedTx = false;
if (!Object.keys(data).includes('outgoingTx')) {		if (!Object.keys(data).includes('outgoingTx')) {
unparsedTx = true;		unparsedTx = true;
}		}
return (		return (
<>		<>
{unparsedTx ? (		{unparsedTx ? (
<TxWrapper>		<TxWrapper>
<TxIcon>		<UnparsedTx>
<UnparsedTx />		<UnparsedIcon />
</TxIcon>		</UnparsedTx>

<DateType>		<DateType>
<ReceivedLabel>Unparsed</ReceivedLabel>		<ReceivedLabel>Unparsed</ReceivedLabel>
<br />		<br />
{txDate}		{txDate}
</DateType>		</DateType>
<TxInfo>Open in Explorer</TxInfo>		<TxInfo>Open in Explorer</TxInfo>
</TxWrapper>		</TxWrapper>
) : (		) : (
<TxWrapper>		<TxWrapper>
<TxIcon>
{data.outgoingTx ? (		{data.outgoingTx ? (
<>		<>
{data.tokenTx &&		{data.tokenTx &&
data.tokenInfo.transactionType === 'GENESIS' ? (		data.tokenInfo.transactionType === 'GENESIS' ? (
<GenesisTx />		<GenesisTx>
		<GenesisIcon />
		</GenesisTx>
) : (		) : (
<SentTx />		<SentTx>
		<SendIcon />
		</SentTx>
)}		)}
</>		</>
) : (		) : (
<ReceivedTx />		<ReceivedTx>
		<ReceiveIcon />
		</ReceivedTx>
)}		)}
</TxIcon>
<DateType>		<LeftTextCtn>
{data.outgoingTx ? (		{data.outgoingTx ? (
<>		<>
{data.tokenTx &&		{data.tokenTx &&
data.tokenInfo.transactionType === 'GENESIS' ? (		data.tokenInfo.transactionType === 'GENESIS' ? (
<ReceivedLabel>Genesis</ReceivedLabel>		<h3 className="genesis">Genesis</h3>
) : (		) : (
<SentLabel>Sent</SentLabel>		<h3 className="sent">Sent</h3>
)}		)}
</>		</>
) : (		) : (
<ReceivedLabel>Received</ReceivedLabel>		<h3 className="received">Received</h3>
)}		)}
<br />		<h4>{txDate}</h4>
{txDate}		</LeftTextCtn>
</DateType>
{data.tokenTx ? (		{data.tokenTx ? (
<TokenInfo outgoing={data.outgoingTx}>		<TokenInfo outgoing={data.outgoingTx}>
{data.tokenTx && data.tokenInfo ? (		{data.tokenTx && data.tokenInfo ? (
<>		<>
<TxTokenIcon>		<TxTokenIcon>
{currency.tokenIconsUrl !== '' ? (		{currency.tokenIconsUrl !== '' ? (
<Img		<Img
src={`${currency.tokenIconsUrl}/32/${data.tokenInfo.tokenId}.png`}		src={`${currency.tokenIconsUrl}/32/${data.tokenInfo.tokenId}.png`}
Show All 20 Lines	return (
key={`identicon-${data.tokenInfo.tokenId}`}		key={`identicon-${data.tokenInfo.tokenId}`}
src={makeBlockie(		src={makeBlockie(
data.tokenInfo.tokenId,		data.tokenInfo.tokenId,
)}		)}
/>		/>
)}		)}
</TxTokenIcon>		</TxTokenIcon>
{data.outgoingTx ? (		{data.outgoingTx ? (
<>		<RightTextCtn>
{data.tokenInfo.transactionType ===		{data.tokenInfo.transactionType ===
'GENESIS' ? (		'GENESIS' ? (
<>		<>
<TokenTxAmt>		<TokenTxAmt className="genesis">
+{' '}		+{' '}
{data.tokenInfo.qtyReceived.toString()}		{data.tokenInfo.qtyReceived.toString()}

{		{
data.tokenInfo		data.tokenInfo
.tokenTicker		.tokenTicker
}		}
</TokenTxAmt>		</TokenTxAmt>
Show All 18 Lines	return (
<TokenName>		<TokenName>
{		{
data.tokenInfo		data.tokenInfo
.tokenName		.tokenName
}		}
</TokenName>		</TokenName>
</>		</>
)}		)}
</>		</RightTextCtn>
) : (		) : (
<>		<RightTextCtn>
<TokenTxAmt>		<TokenTxAmt className="received">
+{' '}		+{' '}
{data.tokenInfo.qtyReceived.toString()}		{data.tokenInfo.qtyReceived.toString()}

{data.tokenInfo.tokenTicker}		{data.tokenInfo.tokenTicker}
</TokenTxAmt>		</TokenTxAmt>
<TokenName>		<TokenName>
{data.tokenInfo.tokenName}		{data.tokenInfo.tokenName}
</TokenName>		</TokenName>
</>		</RightTextCtn>
)}		)}
</>		</>
) : (		) : (
<span>Token Tx</span>		<span>Token Tx</span>
)}		)}
</TokenInfo>		</TokenInfo>
) : (		) : (
<>		<>
<TxInfo outgoing={data.outgoingTx}>		<TxInfo outgoing={data.outgoingTx}>
{data.outgoingTx ? (		{data.outgoingTx ? (
<>		<>
-{' '}		<h3>
		-
{formatBalance(		{formatBalance(
fromLegacyDecimals(data.amountSent),		fromLegacyDecimals(
		data.amountSent,
		),
)}{' '}		)}{' '}
{currency.ticker}		{currency.ticker}
<br />		</h3>
{fiatPrice !== null &&		{fiatPrice !== null &&
!isNaN(data.amountSent) && (		!isNaN(data.amountSent) && (
<TxFiatPrice>		<h4>
-{' '}		-
{		{
currency.fiatCurrencies[		currency.fiatCurrencies[
fiatCurrency		fiatCurrency
].symbol		].symbol
}		}
{(		{(
fromLegacyDecimals(		fromLegacyDecimals(
data.amountSent,		data.amountSent,
) * fiatPrice		) * fiatPrice
).toFixed(2)}{' '}		).toFixed(2)}{' '}
{		{
currency.fiatCurrencies		currency.fiatCurrencies
.fiatCurrency		.fiatCurrency
}		}
</TxFiatPrice>		</h4>
)}		)}
</>		</>
) : (		) : (
<>		<>
+{' '}		<h3 className="received">
		+
{formatBalance(		{formatBalance(
fromLegacyDecimals(		fromLegacyDecimals(
data.amountReceived,		data.amountReceived,
),		),
)}{' '}		)}{' '}
{currency.ticker}		{currency.ticker}
<br />		</h3>
{fiatPrice !== null &&		{fiatPrice !== null &&
!isNaN(data.amountReceived) && (		!isNaN(data.amountReceived) && (
<TxFiatPrice>		<h4>
+{' '}		+
{		{
currency.fiatCurrencies[		currency.fiatCurrencies[
fiatCurrency		fiatCurrency
].symbol		].symbol
}		}
{(		{(
fromLegacyDecimals(		fromLegacyDecimals(
data.amountReceived,		data.amountReceived,
) * fiatPrice		) * fiatPrice
).toFixed(2)}{' '}		).toFixed(2)}{' '}
{		{
currency.fiatCurrencies		currency.fiatCurrencies
.fiatCurrency		.fiatCurrency
}		}
</TxFiatPrice>		</h4>
)}		)}
</>		</>
)}		)}
</TxInfo>		</TxInfo>
</>		</>
)}		)}
{data.opReturnMessage && (		{data.opReturnMessage && (
<>		<>
<br />		<OpReturnType received={!data.outgoingTx}>
<OpReturnType>
{data.isCashtabMessage ? (		{data.isCashtabMessage ? (
<CashtabMessageLabel>		<h4>Cashtab Message</h4>
Cashtab Message		) : (
</CashtabMessageLabel>		<h4>External Message</h4>
) : (
<MessageLabel>
External Message
</MessageLabel>
)}		)}
{data.isEncryptedMessage ? (		{data.isEncryptedMessage ? (
<EncryptionMessageLabel>		<EncryptionMessageLabel>
- Encrypted		- Encrypted
</EncryptionMessageLabel>		</EncryptionMessageLabel>
) : (		) : (
''		''
)}		)}
<br />		<br />
{/unencrypted OP_RETURN Message/}		{/unencrypted OP_RETURN Message/}
{data.opReturnMessage &&		{data.opReturnMessage &&
!data.isEncryptedMessage		!data.isEncryptedMessage ? (
? data.opReturnMessage		<p>{data.opReturnMessage}</p>
: ''}		) : (
		''
		)}
{/encrypted and wallet is authorized to view OP_RETURN Message/}		{/encrypted and wallet is authorized to view OP_RETURN Message/}
{data.opReturnMessage &&		{data.opReturnMessage &&
data.isEncryptedMessage &&		data.isEncryptedMessage &&
data.decryptionSuccess		data.decryptionSuccess ? (
? data.opReturnMessage		<p>{data.opReturnMessage}</p>
: ''}		) : (
		''
		)}
{/encrypted but wallet is not authorized to view OP_RETURN Message/}		{/encrypted but wallet is not authorized to view OP_RETURN Message/}
{data.opReturnMessage &&		{data.opReturnMessage &&
data.isEncryptedMessage &&		data.isEncryptedMessage &&
!data.decryptionSuccess ? (		!data.decryptionSuccess ? (
<UnauthorizedDecryptionMessage>		<UnauthorizedDecryptionMessage>
{data.opReturnMessage}		{data.opReturnMessage}
</UnauthorizedDecryptionMessage>		</UnauthorizedDecryptionMessage>
) : (		) : (
''		''
)}		)}
{!data.outgoingTx && data.replyAddress ? (		{!data.outgoingTx && data.replyAddress ? (
<Link		<Link
to={{		to={{
pathname: `/send`,		pathname: `/send`,
state: {		state: {
replyAddress: data.replyAddress,		replyAddress: data.replyAddress,
},		},
}}		}}
>		>
<br />
<br />
<ReplyMessageLabel>
Reply To Message		Reply To Message
</ReplyMessageLabel>
</Link>		</Link>
) : (		) : (
''		''
)}		)}
</OpReturnType>		</OpReturnType>
</>		</>
)}		)}
</TxWrapper>		</TxWrapper>
Show All 12 Lines