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
secretkeylabs · Aug 9, 2023 · 356a328 · 356a328
1 parent 198e122
commit 356a328
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 14 deletions.
diff --git 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 (
     <>
-      <TxTransfers transaction={transaction} coin={transactionCoin} />
+      <TxTransfers transaction={transaction} coin={transactionCoin} txFilter={txFilter} />
       <StxTransferTransaction
         transaction={parseStxTransactionData({
           responseTx: transaction.tx,

diff --git a/src/app/components/transactions/txTransfers.tsx b/src/app/components/transactions/txTransfers.tsx
@@ -9,6 +9,7 @@ import { NumericFormat } from 'react-number-format';
 import { microstacksToStx } from '@secretkeylabs/xverse-core';
 import BigNumber from 'bignumber.js';
 import { useTranslation } from 'react-i18next';
+import { getFtTicker } from '@utils/tokens';
 
 const TransactionContainer = styled.div((props) => ({
   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 (
         <TransactionContainer key={nanoid()}>
-          {renderTransactionIcon(stxTransfer)}
+          {renderTransactionIcon(transfer)}
           <TransactionInfoContainer>
             <TransactionRow>
-              <TransactionTitleText>{getTokenTransferTitle(stxTransfer)}</TransactionTitleText>
+              <TransactionTitleText>{getTokenTransferTitle(transfer)}</TransactionTitleText>
               <NumericFormat
-                value={microstacksToStx(BigNumber(stxTransfer.amount)).toString()}
+                value={microstacksToStx(BigNumber(transfer.amount)).toString()}
                 displayType="text"
                 thousandSeparator
-                prefix={selectedAccount?.stxAddress === stxTransfer.recipient ? '' : '-'}
+                prefix={isSentTransaction ? '-' : ''}
                 renderText={(value: string) => (
-                  <TransactionValue>{`${value} ${coin}`}</TransactionValue>
+                  <TransactionValue>
+                    {`${value} ${isFT && ft ? getFtTicker(ft) : coin}`}
+                  </TransactionValue>
                 )}
               />
             </TransactionRow>
-            <RecipientAddress>{formatAddress(stxTransfer.recipient as string)}</RecipientAddress>
+            <RecipientAddress>{formatAddress(transfer.recipient as string)}</RecipientAddress>
           </TransactionInfoContainer>
         </TransactionContainer>
-      ))}
+      );
+    });
+  }
+  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
@@ -200,6 +200,7 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
                   transaction={transaction}
                   transactionCoin={coin}
                   key={transaction.tx_id}
+                  txFilter={txFilter}
                 />
               );
             })}