Page MenuHomePhabricator
Differential D10093 Diff 29902 web/cashtab/src/components/Wallet/Tx.js

Changeset View

Standalone View

View Options

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

import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { import {
ArrowUpOutlined, ArrowUpOutlined,
ArrowDownOutlined, ArrowDownOutlined,
ExperimentOutlined, ExperimentOutlined,
ExclamationOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
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 { formatBalance, fromLegacyDecimals } from '@utils/cashMethods'; import { formatBalance, fromLegacyDecimals } from '@utils/cashMethods';
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 GenesisTx = styled(ExperimentOutlined)` const GenesisTx = styled(ExperimentOutlined)`
color: ${props => props.theme.primary} !important; color: ${props => props.theme.primary} !important;
`; `;
const UnparsedTx = styled(ExclamationOutlined)`
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;
} }
`; `;
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Linesconst TxWrapper = styled.div`
} }
`; `;
const Tx = ({ data, fiatPrice, fiatCurrency }) => { const Tx = ({ data, fiatPrice, fiatCurrency }) => {
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();
// 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
let unparsedTx = false;
if (!Object.keys(data).includes('outgoingTx')) {
unparsedTx = true;
}
return ( return (
<>
{unparsedTx ? (
<TxWrapper>
<TxIcon>
<UnparsedTx />
</TxIcon>
<DateType>
<ReceivedLabel>Unparsed</ReceivedLabel>
<br />
{txDate}
</DateType>
<TxInfo>Open in Explorer</TxInfo>
</TxWrapper>
) : (
<TxWrapper> <TxWrapper>
<TxIcon> <TxIcon>
{data.outgoingTx ? ( {data.outgoingTx ? (
<> <>
{data.tokenTx && {data.tokenTx &&
data.tokenInfo.transactionType === 'GENESIS' ? ( data.tokenInfo.transactionType === 'GENESIS' ? (
<GenesisTx /> <GenesisTx />
) : ( ) : (
<SentTx /> <SentTx />
)} )}
</> </>
) : ( ) : (
<ReceivedTx /> <ReceivedTx />
)} )}
</TxIcon> </TxIcon>
<DateType> <DateType>
{data.outgoingTx ? ( {data.outgoingTx ? (
<> <>
{data.tokenTx && {data.tokenTx &&
data.tokenInfo.transactionType === 'GENESIS' ? ( data.tokenInfo.transactionType === 'GENESIS' ? (
<ReceivedLabel>Genesis</ReceivedLabel> <ReceivedLabel>Genesis</ReceivedLabel>
) : ( ) : (
<SentLabel>Sent</SentLabel> <SentLabel>Sent</SentLabel>
)} )}
</> </>
) : ( ) : (
<ReceivedLabel>Received</ReceivedLabel> <ReceivedLabel>Received</ReceivedLabel>
)} )}
<br /> <br />
{txDate} {txDate}
</DateType> </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}/${data.tokenInfo.tokenId}.png`} src={`${currency.tokenIconsUrl}/${data.tokenInfo.tokenId}.png`}
unloader={ unloader={
<img <img
alt={`identicon of tokenId ${data.tokenInfo.tokenId} `} alt={`identicon of tokenId ${data.tokenInfo.tokenId} `}
style={{ style={{
borderRadius: '50%', borderRadius: '50%',
}} }}
key={`identicon-${data.tokenInfo.tokenId}`} key={`identicon-${data.tokenInfo.tokenId}`}
src={makeBlockie( src={makeBlockie(
data.tokenInfo.tokenId, data.tokenInfo
.tokenId,
)} )}
/> />
} }
/> />
) : ( ) : (
<img <img
alt={`identicon of tokenId ${data.tokenInfo.tokenId} `} alt={`identicon of tokenId ${data.tokenInfo.tokenId} `}
style={{ style={{
borderRadius: '50%', borderRadius: '50%',
}} }}
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 ? (
<> <>
{data.tokenInfo.transactionType === {data.tokenInfo.transactionType ===
'GENESIS' ? ( 'GENESIS' ? (
<> <>
<TokenTxAmt> <TokenTxAmt>
+{' '} +{' '}
{data.tokenInfo.qtyReceived.toString()} {data.tokenInfo.qtyReceived.toString()}
&nbsp; &nbsp;
{data.tokenInfo.tokenTicker} {
data.tokenInfo
.tokenTicker
}
</TokenTxAmt> </TokenTxAmt>
<TokenName> <TokenName>
{data.tokenInfo.tokenName} {
data.tokenInfo
.tokenName
}
</TokenName> </TokenName>
</> </>
) : ( ) : (
<> <>
<TokenTxAmt> <TokenTxAmt>
-{' '} -{' '}
{data.tokenInfo.qtySent.toString()} {data.tokenInfo.qtySent.toString()}
&nbsp; &nbsp;
{data.tokenInfo.tokenTicker} {
data.tokenInfo
.tokenTicker
}
</TokenTxAmt> </TokenTxAmt>
<TokenName> <TokenName>
{data.tokenInfo.tokenName} {
data.tokenInfo
.tokenName
}
</TokenName> </TokenName>
</> </>
)} )}
</> </>
) : ( ) : (
<> <>
<TokenTxAmt> <TokenTxAmt>
+{' '} +{' '}
{data.tokenInfo.qtyReceived.toString()} {data.tokenInfo.qtyReceived.toString()}
&nbsp;{data.tokenInfo.tokenTicker} &nbsp;
{data.tokenInfo.tokenTicker}
</TokenTxAmt> </TokenTxAmt>
<TokenName> <TokenName>
{data.tokenInfo.tokenName} {data.tokenInfo.tokenName}
</TokenName> </TokenName>
</> </>
)} )}
</> </>
) : ( ) : (
<span>Token Tx</span> <span>Token Tx</span>
)} )}
</TokenInfo> </TokenInfo>
) : ( ) : (
<> <>
<TxInfo outgoing={data.outgoingTx}> <TxInfo outgoing={data.outgoingTx}>
{data.outgoingTx ? ( {data.outgoingTx ? (
<> <>
-{' '} -{' '}
{formatBalance( {formatBalance(
fromLegacyDecimals(data.amountSent), fromLegacyDecimals(data.amountSent),
)}{' '} )}{' '}
{currency.ticker} {currency.ticker}
<br /> <br />
{fiatPrice !== null && !isNaN(data.amountSent) && ( {fiatPrice !== null &&
!isNaN(data.amountSent) && (
<TxFiatPrice> <TxFiatPrice>
-{' '} -{' '}
{ {
currency.fiatCurrencies[ currency.fiatCurrencies[
fiatCurrency fiatCurrency
].symbol ].symbol
} }
{( {(
fromLegacyDecimals( fromLegacyDecimals(
data.amountSent, data.amountSent,
) * fiatPrice ) * fiatPrice
).toFixed(2)}{' '} ).toFixed(2)}{' '}
{currency.fiatCurrencies.fiatCurrency} {
currency.fiatCurrencies
.fiatCurrency
}
</TxFiatPrice> </TxFiatPrice>
)} )}
</> </>
) : ( ) : (
<> <>
+{' '} +{' '}
{formatBalance( {formatBalance(
fromLegacyDecimals(data.amountReceived), fromLegacyDecimals(
data.amountReceived,
),
)}{' '} )}{' '}
{currency.ticker} {currency.ticker}
<br /> <br />
{fiatPrice !== null && {fiatPrice !== null &&
!isNaN(data.amountReceived) && ( !isNaN(data.amountReceived) && (
<TxFiatPrice> <TxFiatPrice>
+{' '} +{' '}
{ {
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> </TxFiatPrice>
)} )}
</> </>
)} )}
</TxInfo> </TxInfo>
</> </>
)} )}
</TxWrapper> </TxWrapper>
)}
</>
); );
}; };
Tx.propTypes = { Tx.propTypes = {
data: PropTypes.object, data: PropTypes.object,
fiatPrice: PropTypes.number, fiatPrice: PropTypes.number,
fiatCurrency: PropTypes.string, fiatCurrency: PropTypes.string,
}; };
export default Tx; export default Tx;