From 0fb35e3ddcd2f24f279dc537e69c26e6eb77df84 Mon Sep 17 00:00:00 2001 From: Imamah-Zafar Date: Wed, 9 Aug 2023 12:01:56 +0500 Subject: [PATCH 1/5] Use ft transfer array to show token specific history --- .../components/transactions/txTransfers.tsx | 65 +++++++++++++------ .../coinDashboard/transactionsHistoryList.tsx | 4 ++ 2 files changed, 49 insertions(+), 20 deletions(-) diff --git a/src/app/components/transactions/txTransfers.tsx b/src/app/components/transactions/txTransfers.tsx index 41d0504ab..80e7cf8d1 100644 --- a/src/app/components/transactions/txTransfers.tsx +++ b/src/app/components/transactions/txTransfers.tsx @@ -75,26 +75,51 @@ export default function TxTransfers(props: TxTransfersProps) { : t('TRANSACTION_SENT'); return ( <> - {transaction.stx_transfers.map((stxTransfer) => ( - - {renderTransactionIcon(stxTransfer)} - - - {getTokenTransferTitle(stxTransfer)} - ( - {`${value} ${coin}`} - )} - /> - - {formatAddress(stxTransfer.recipient as string)} - - - ))} + {coin === 'FT' && transaction.ft_transfers + ? transaction.ft_transfers.map((ftTransfer) => ( + + {renderTransactionIcon(ftTransfer)} + + + {getTokenTransferTitle(ftTransfer)} + ( + {`${value} ${ftTransfer.asset_identifier + .split('::')[1] + .toUpperCase()}`} + )} + /> + + {formatAddress(ftTransfer.recipient as string)} + + + )) + : transaction.stx_transfers.map((stxTransfer) => ( + + {renderTransactionIcon(stxTransfer)} + + + {getTokenTransferTitle(stxTransfer)} + ( + {`${value} ${coin}`} + )} + /> + + + {formatAddress(stxTransfer.recipient as string)} + + + + ))} ); } diff --git a/src/app/screens/coinDashboard/transactionsHistoryList.tsx b/src/app/screens/coinDashboard/transactionsHistoryList.tsx index f1954c2c2..5f920b004 100644 --- a/src/app/screens/coinDashboard/transactionsHistoryList.tsx +++ b/src/app/screens/coinDashboard/transactionsHistoryList.tsx @@ -150,6 +150,8 @@ const filterTxs = ( export default function TransactionsHistoryList(props: TransactionsHistoryListProps) { const { coin, txFilter } = props; + console.log('txFilter'); + console.log(txFilter); const { data, isLoading, isFetching } = useTransactions((coin as CurrencyTypes) || 'STX'); const styles = useSpring({ config: { ...config.stiff }, @@ -171,6 +173,8 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr if (txFilter && coin === 'FT') { const filteredTxs = filterTxs(data, txFilter); + console.log('filteredTxs'); + console.log(filteredTxs); return groupedTxsByDateMap(filteredTxs); } From e7c5f19aa0ad94a5d7ba4dbe3174e90ff8994eb4 Mon Sep 17 00:00:00 2001 From: Imamah-Zafar Date: Wed, 9 Aug 2023 12:19:55 +0500 Subject: [PATCH 2/5] Add filter to only show specific token history --- .../transactions/stxTransaction.tsx | 5 +- .../components/transactions/txTransfers.tsx | 55 +++++++++++-------- .../coinDashboard/transactionsHistoryList.tsx | 5 +- 3 files changed, 36 insertions(+), 29 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 ( <> - + ({ interface TxTransfersProps { transaction: AddressTransactionWithTransfers; coin: CurrencyTypes; + txFilter: string | null; } export default function TxTransfers(props: TxTransfersProps) { - const { transaction, coin } = props; + const { transaction, coin, txFilter } = props; const { selectedAccount } = useWalletSelector(); const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' }); @@ -76,28 +77,36 @@ export default function TxTransfers(props: TxTransfersProps) { return ( <> {coin === 'FT' && transaction.ft_transfers - ? transaction.ft_transfers.map((ftTransfer) => ( - - {renderTransactionIcon(ftTransfer)} - - - {getTokenTransferTitle(ftTransfer)} - ( - {`${value} ${ftTransfer.asset_identifier - .split('::')[1] - .toUpperCase()}`} - )} - /> - - {formatAddress(ftTransfer.recipient as string)} - - - )) + ? transaction.ft_transfers.map((ftTransfer) => { + if (ftTransfer.asset_identifier === txFilter) { + return ( + + {renderTransactionIcon(ftTransfer)} + + + + {getTokenTransferTitle(ftTransfer)} + + ( + {`${value} ${ftTransfer.asset_identifier + .split('::')[1] + .toUpperCase()}`} + )} + /> + + + {formatAddress(ftTransfer.recipient as string)} + + + + ); + } + }) : transaction.stx_transfers.map((stxTransfer) => ( {renderTransactionIcon(stxTransfer)} diff --git a/src/app/screens/coinDashboard/transactionsHistoryList.tsx b/src/app/screens/coinDashboard/transactionsHistoryList.tsx index 5f920b004..3e463f0fb 100644 --- a/src/app/screens/coinDashboard/transactionsHistoryList.tsx +++ b/src/app/screens/coinDashboard/transactionsHistoryList.tsx @@ -150,8 +150,6 @@ const filterTxs = ( export default function TransactionsHistoryList(props: TransactionsHistoryListProps) { const { coin, txFilter } = props; - console.log('txFilter'); - console.log(txFilter); const { data, isLoading, isFetching } = useTransactions((coin as CurrencyTypes) || 'STX'); const styles = useSpring({ config: { ...config.stiff }, @@ -173,8 +171,6 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr if (txFilter && coin === 'FT') { const filteredTxs = filterTxs(data, txFilter); - console.log('filteredTxs'); - console.log(filteredTxs); return groupedTxsByDateMap(filteredTxs); } @@ -204,6 +200,7 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr transaction={transaction} transactionCoin={coin} key={transaction.tx_id} + txFilter={txFilter} /> ); })} From bc0b2910087139f55e9c97a82134453eabcb067a Mon Sep 17 00:00:00 2001 From: Imamah-Zafar Date: Wed, 9 Aug 2023 13:31:15 +0500 Subject: [PATCH 3/5] Refactor txTransfers file to reuse code --- .../components/transactions/txTransfers.tsx | 90 ++++++++----------- 1 file changed, 38 insertions(+), 52 deletions(-) diff --git a/src/app/components/transactions/txTransfers.tsx b/src/app/components/transactions/txTransfers.tsx index 96f82d1c1..0ec55f7e4 100644 --- a/src/app/components/transactions/txTransfers.tsx +++ b/src/app/components/transactions/txTransfers.tsx @@ -74,61 +74,47 @@ export default function TxTransfers(props: TxTransfersProps) { selectedAccount?.stxAddress === transfer.recipient ? t('TRANSACTION_RECEIVED') : t('TRANSACTION_SENT'); + + function renderTransaction(transactionList) { + return transactionList.map((transfer) => { + const isFT = coin === 'FT'; + const isRecipientNegative = selectedAccount?.stxAddress !== transfer.recipient; + + if (isFT && transfer.asset_identifier !== txFilter) { + return null; + } + + return ( + + {renderTransactionIcon(transfer)} + + + {getTokenTransferTitle(transfer)} + ( + + {`${value} ${ + isFT ? transfer.asset_identifier.split('::')[1].toUpperCase() : coin + }`} + + )} + /> + + {formatAddress(transfer.recipient as string)} + + + ); + }); + } return ( <> {coin === 'FT' && transaction.ft_transfers - ? transaction.ft_transfers.map((ftTransfer) => { - if (ftTransfer.asset_identifier === txFilter) { - return ( - - {renderTransactionIcon(ftTransfer)} - - - - {getTokenTransferTitle(ftTransfer)} - - ( - {`${value} ${ftTransfer.asset_identifier - .split('::')[1] - .toUpperCase()}`} - )} - /> - - - {formatAddress(ftTransfer.recipient as string)} - - - - ); - } - }) - : transaction.stx_transfers.map((stxTransfer) => ( - - {renderTransactionIcon(stxTransfer)} - - - {getTokenTransferTitle(stxTransfer)} - ( - {`${value} ${coin}`} - )} - /> - - - {formatAddress(stxTransfer.recipient as string)} - - - - ))} + ? renderTransaction(transaction.ft_transfers) + : renderTransaction(transaction.stx_transfers)} ); } From 288ec1bd92decf1011c38473deb43530e9805a2c Mon Sep 17 00:00:00 2001 From: Imamah-Zafar Date: Wed, 9 Aug 2023 13:43:07 +0500 Subject: [PATCH 4/5] Use token ticker --- src/app/components/transactions/txTransfers.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/components/transactions/txTransfers.tsx b/src/app/components/transactions/txTransfers.tsx index 0ec55f7e4..4490ea5a7 100644 --- 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', @@ -56,7 +57,7 @@ interface TxTransfersProps { export default function TxTransfers(props: TxTransfersProps) { const { transaction, coin, txFilter } = props; - const { selectedAccount } = useWalletSelector(); + const { selectedAccount, coinsList } = useWalletSelector(); const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' }); function formatAddress(addr: string): string { @@ -78,8 +79,8 @@ export default function TxTransfers(props: TxTransfersProps) { function renderTransaction(transactionList) { return transactionList.map((transfer) => { const isFT = coin === 'FT'; + const ft = coinsList?.find((ftCoin) => ftCoin.principal === txFilter!.split('::')[0]); const isRecipientNegative = selectedAccount?.stxAddress !== transfer.recipient; - if (isFT && transfer.asset_identifier !== txFilter) { return null; } @@ -97,9 +98,7 @@ export default function TxTransfers(props: TxTransfersProps) { prefix={isRecipientNegative ? '-' : ''} renderText={(value: string) => ( - {`${value} ${ - isFT ? transfer.asset_identifier.split('::')[1].toUpperCase() : coin - }`} + {`${value} ${isFT && ft ? getFtTicker(ft) : coin}`} )} /> From ff885212aea3bfc61f1969500facf31d08d35719 Mon Sep 17 00:00:00 2001 From: Imamah-Zafar Date: Wed, 9 Aug 2023 13:45:21 +0500 Subject: [PATCH 5/5] Update variable name --- src/app/components/transactions/txTransfers.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/transactions/txTransfers.tsx b/src/app/components/transactions/txTransfers.tsx index 4490ea5a7..3d63c6871 100644 --- a/src/app/components/transactions/txTransfers.tsx +++ b/src/app/components/transactions/txTransfers.tsx @@ -80,7 +80,7 @@ export default function TxTransfers(props: TxTransfersProps) { return transactionList.map((transfer) => { const isFT = coin === 'FT'; const ft = coinsList?.find((ftCoin) => ftCoin.principal === txFilter!.split('::')[0]); - const isRecipientNegative = selectedAccount?.stxAddress !== transfer.recipient; + const isSentTransaction = selectedAccount?.stxAddress !== transfer.recipient; if (isFT && transfer.asset_identifier !== txFilter) { return null; } @@ -95,7 +95,7 @@ export default function TxTransfers(props: TxTransfersProps) { value={microstacksToStx(BigNumber(transfer.amount)).toString()} displayType="text" thousandSeparator - prefix={isRecipientNegative ? '-' : ''} + prefix={isSentTransaction ? '-' : ''} renderText={(value: string) => ( {`${value} ${isFT && ft ? getFtTicker(ft) : coin}`}