From 356a3282baec3eeeb5fcba97dbb37acc8bb68574 Mon Sep 17 00:00:00 2001
From: Imamah-Zafar <88320460+Imamah-Zafar@users.noreply.github.com>
Date: Wed, 9 Aug 2023 14:07:28 +0500
Subject: [PATCH] Fix swaps tx history (#557)
* Use ft transfer array to show token specific history
* Add filter to only show specific token history
* Refactor txTransfers file to reuse code
* Use token ticker
* Update variable name
---
.../transactions/stxTransaction.tsx | 5 ++-
.../components/transactions/txTransfers.tsx | 43 +++++++++++++------
.../coinDashboard/transactionsHistoryList.tsx | 1 +
3 files changed, 35 insertions(+), 14 deletions(-)
diff --git a/src/app/components/transactions/stxTransaction.tsx b/src/app/components/transactions/stxTransaction.tsx
index 617ae37ce..9f164b243 100644
--- a/src/app/components/transactions/stxTransaction.tsx
+++ b/src/app/components/transactions/stxTransaction.tsx
@@ -30,10 +30,11 @@ import StxTransferTransaction from './stxTransferTransaction';
interface TransactionHistoryItemProps {
transaction: AddressTransactionWithTransfers | Tx;
transactionCoin: CurrencyTypes;
+ txFilter: string | null;
}
export default function StxTransactionHistoryItem(props: TransactionHistoryItemProps) {
- const { transaction, transactionCoin } = props;
+ const { transaction, transactionCoin, txFilter } = props;
const { selectedAccount } = useWalletSelector();
// const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
if (!isAddressTransactionWithTransfers(transaction)) {
@@ -68,7 +69,7 @@ export default function StxTransactionHistoryItem(props: TransactionHistoryItemP
}
return (
<>
-
+
({
display: 'flex',
@@ -51,11 +52,12 @@ const TransactionValue = styled.p((props) => ({
interface TxTransfersProps {
transaction: AddressTransactionWithTransfers;
coin: CurrencyTypes;
+ txFilter: string | null;
}
export default function TxTransfers(props: TxTransfersProps) {
- const { transaction, coin } = props;
- const { selectedAccount } = useWalletSelector();
+ const { transaction, coin, txFilter } = props;
+ const { selectedAccount, coinsList } = useWalletSelector();
const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
function formatAddress(addr: string): string {
@@ -73,28 +75,45 @@ export default function TxTransfers(props: TxTransfersProps) {
selectedAccount?.stxAddress === transfer.recipient
? t('TRANSACTION_RECEIVED')
: t('TRANSACTION_SENT');
- return (
- <>
- {transaction.stx_transfers.map((stxTransfer) => (
+
+ function renderTransaction(transactionList) {
+ return transactionList.map((transfer) => {
+ const isFT = coin === 'FT';
+ const ft = coinsList?.find((ftCoin) => ftCoin.principal === txFilter!.split('::')[0]);
+ const isSentTransaction = selectedAccount?.stxAddress !== transfer.recipient;
+ if (isFT && transfer.asset_identifier !== txFilter) {
+ return null;
+ }
+
+ return (
- {renderTransactionIcon(stxTransfer)}
+ {renderTransactionIcon(transfer)}
- {getTokenTransferTitle(stxTransfer)}
+ {getTokenTransferTitle(transfer)}
(
- {`${value} ${coin}`}
+
+ {`${value} ${isFT && ft ? getFtTicker(ft) : coin}`}
+
)}
/>
- {formatAddress(stxTransfer.recipient as string)}
+ {formatAddress(transfer.recipient as string)}
- ))}
+ );
+ });
+ }
+ return (
+ <>
+ {coin === 'FT' && transaction.ft_transfers
+ ? renderTransaction(transaction.ft_transfers)
+ : renderTransaction(transaction.stx_transfers)}
>
);
}
diff --git a/src/app/screens/coinDashboard/transactionsHistoryList.tsx b/src/app/screens/coinDashboard/transactionsHistoryList.tsx
index f1954c2c2..3e463f0fb 100644
--- a/src/app/screens/coinDashboard/transactionsHistoryList.tsx
+++ b/src/app/screens/coinDashboard/transactionsHistoryList.tsx
@@ -200,6 +200,7 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
transaction={transaction}
transactionCoin={coin}
key={transaction.tx_id}
+ txFilter={txFilter}
/>
);
})}