diff --git a/web/cashtab/src/components/Home/Tx.js b/web/cashtab/src/components/Home/Tx.js
--- a/web/cashtab/src/components/Home/Tx.js
+++ b/web/cashtab/src/components/Home/Tx.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import styled from 'styled-components';
@@ -8,6 +8,7 @@
GenesisIcon,
UnparsedIcon,
ThemedContactsOutlined,
+ AirdropIcon,
} from 'components/Common/CustomIcons';
import { currency } from 'components/Common/Ticker';
import { fromLegacyDecimals } from 'utils/cashMethods';
@@ -20,6 +21,7 @@
ThemedLinkSolid,
ThemedPdfSolid,
} from 'components/Common/CustomIcons';
+import useBCH from 'hooks/useBCH';
const TxIcon = styled.div`
svg {
@@ -87,6 +89,9 @@
.received {
color: ${props => props.theme.eCashBlue};
}
+ .airdrop {
+ margin-right: 12px;
+ }
h4 {
font-size: 12px;
color: ${props => props.theme.lightWhite};
@@ -350,6 +355,7 @@
addressesInContactList,
contactList,
}) => {
+ const [tokenStats, setTokenStats] = useState(null);
const txDate =
typeof data.blocktime === 'undefined'
? formatDate()
@@ -360,6 +366,19 @@
if (!Object.keys(data).includes('outgoingTx')) {
unparsedTx = true;
}
+ const { getBCH, getTokenStats } = useBCH();
+
+ useEffect(() => {
+ const fetchTokenStats = async () => {
+ if (data.airdropFlag && data.airdropTokenId) {
+ const BCH = getBCH();
+ const result = await getTokenStats(BCH, data.airdropTokenId);
+ setTokenStats(result);
+ }
+ };
+
+ fetchTokenStats();
+ }, []);
return (
<>
{unparsedTx ? (
@@ -394,13 +413,21 @@
) : (
-
+ {data.airdropFlag ? (
+
+ ) : (
+
+ )}
)}
) : (
-
+ {data.airdropFlag ? (
+
+ ) : (
+
+ )}
)}
@@ -415,17 +442,32 @@
Genesis
) : (
-
- Sent
-
+ <>
+ {data.airdropFlag ? (
+
+ Airdrop
+
+ ) : (
+
+ Sent
+
+ )}
+
)}
) : (
-
- Received
-
-
+ <>
+ {data.airdropFlag ? (
+
+ Airdrop
+
+ ) : (
+
+ Received
+
+ )}
+
{addressesInContactList.includes(
data.replyAddress,
) && (
@@ -468,190 +510,262 @@
)}
{txDate}
- {data.tokenTx ? (
-
- {data.tokenTx &&
- data.tokenInfo ? (
- <>
+ <>
+ {data.airdropFlag ? (
+ <>
+
- {data.outgoingTx ? (
-
- {data.tokenInfo
- .transactionType ===
- 'GENESIS' ? (
- <>
-
- +{' '}
- {data.tokenInfo.qtyReceived.toString()}
-
+
+ {!data.outgoingTx ? (
+
+ +{' '}
+ {formatBalance(
+ fromLegacyDecimals(
+ data.amountReceived,
+ ),
+ )}
+
+ {
+ currency.ticker
+ }
+ {tokenStats && (
+
{
- data
- .tokenInfo
- .tokenTicker
+ tokenStats.name
}
-
+
+ )}
+
+ ) : (
+
+ -{' '}
+ {formatBalance(
+ fromLegacyDecimals(
+ data.amountSent,
+ ),
+ )}
+
+ {
+ currency.ticker
+ }
+ {tokenStats && (
{
- data
- .tokenInfo
- .tokenName
+ tokenStats.name
}
-
- ) : (
- <>
-
- -{' '}
- {data.tokenInfo.qtySent.toString()}
-
- {
- data
- .tokenInfo
- .tokenTicker
+ )}
+
+ )}
+
+
+
+ ) : (
+ <>
+ {' '}
+ {data.tokenTx ? (
+
+ {data.tokenTx &&
+ data.tokenInfo ? (
+ <>
+
+
-
- {
+ tokenId={
data
.tokenInfo
- .tokenName
+ .tokenId
}
-
-
- )}
-
- ) : (
-
-
- +{' '}
- {data.tokenInfo.qtyReceived.toString()}
-
- {
- data
- .tokenInfo
- .tokenTicker
- }
-
-
- {
- data
- .tokenInfo
- .tokenName
- }
-
-
- )}
-
- ) : (
- Token Tx
- )}
-
- ) : (
- <>
-
- {data.outgoingTx ? (
- <>
-
- -
- {formatBalance(
- fromLegacyDecimals(
- data.amountSent,
- ),
- )}{' '}
- {
- currency.ticker
- }
-
- {fiatPrice !==
- null &&
- !isNaN(
- data.amountSent,
- ) && (
-
- -
- {
- currency
- .fiatCurrencies[
- fiatCurrency
- ]
- .symbol
- }
- {(
- fromLegacyDecimals(
- data.amountSent,
- ) *
- fiatPrice
- ).toFixed(
- 2,
- )}{' '}
- {
- currency
- .fiatCurrencies
- .fiatCurrency
- }
-
- )}
-
+ />
+
+ {data.outgoingTx ? (
+
+ {data
+ .tokenInfo
+ .transactionType ===
+ 'GENESIS' ? (
+ <>
+
+ +{' '}
+ {data.tokenInfo.qtyReceived.toString()}
+
+ {
+ data
+ .tokenInfo
+ .tokenTicker
+ }
+
+
+ {
+ data
+ .tokenInfo
+ .tokenName
+ }
+
+
+ ) : (
+ <>
+
+ -{' '}
+ {data.tokenInfo.qtySent.toString()}
+
+ {
+ data
+ .tokenInfo
+ .tokenTicker
+ }
+
+
+ {
+ data
+ .tokenInfo
+ .tokenName
+ }
+
+
+ )}
+
+ ) : (
+
+
+ +{' '}
+ {data.tokenInfo.qtyReceived.toString()}
+
+ {
+ data
+ .tokenInfo
+ .tokenTicker
+ }
+
+
+ {
+ data
+ .tokenInfo
+ .tokenName
+ }
+
+
+ )}
+
+ ) : (
+
+ Token Tx
+
+ )}
+
) : (
<>
-
- +
- {formatBalance(
- fromLegacyDecimals(
- data.amountReceived,
- ),
- )}{' '}
- {
- currency.ticker
+
- {fiatPrice !==
- null &&
- !isNaN(
- data.amountReceived,
- ) && (
-
- +
- {
- currency
- .fiatCurrencies[
- fiatCurrency
- ]
- .symbol
- }
- {(
- fromLegacyDecimals(
+ >
+ {data.outgoingTx ? (
+ <>
+
+ -
+ {formatBalance(
+ fromLegacyDecimals(
+ data.amountSent,
+ ),
+ )}{' '}
+ {
+ currency.ticker
+ }
+
+ {fiatPrice !==
+ null &&
+ !isNaN(
+ data.amountSent,
+ ) && (
+
+ -
+ {
+ currency
+ .fiatCurrencies[
+ fiatCurrency
+ ]
+ .symbol
+ }
+ {(
+ fromLegacyDecimals(
+ data.amountSent,
+ ) *
+ fiatPrice
+ ).toFixed(
+ 2,
+ )}{' '}
+ {
+ currency
+ .fiatCurrencies
+ .fiatCurrency
+ }
+
+ )}
+
+ ) : (
+ <>
+
+ +
+ {formatBalance(
+ fromLegacyDecimals(
+ data.amountReceived,
+ ),
+ )}{' '}
+ {
+ currency.ticker
+ }
+
+ {fiatPrice !==
+ null &&
+ !isNaN(
data.amountReceived,
- ) *
- fiatPrice
- ).toFixed(
- 2,
- )}{' '}
- {
- currency
- .fiatCurrencies
- .fiatCurrency
- }
-
+ ) && (
+
+ +
+ {
+ currency
+ .fiatCurrencies[
+ fiatCurrency
+ ]
+ .symbol
+ }
+ {(
+ fromLegacyDecimals(
+ data.amountReceived,
+ ) *
+ fiatPrice
+ ).toFixed(
+ 2,
+ )}{' '}
+ {
+ currency
+ .fiatCurrencies
+ .fiatCurrency
+ }
+
+ )}
+
)}
+
)}
-
-
- )}
+
+ )}
+
{data.opReturnMessage && (
<>