diff --git a/locales/base/translation.json b/locales/base/translation.json index bd669500c30..14cc23f4a4b 100644 --- a/locales/base/translation.json +++ b/locales/base/translation.json @@ -2285,7 +2285,7 @@ "crossChainSwapTransactionLabel": "Cross-chain", "depositTitle": "Deposited", "depositSubtitle": "to {{txAppName}} Pool", - "depositSubtitle_noTxAppName": "to unknown pool", + "depositSubtitle_noTxAppName": "to unknown app", "withdrawTitle": "Withdrew", "withdrawSubtitle": "from {{txAppName}} Pool", "withdrawSubtitle_noTxAppName": "from unknown app", diff --git a/src/transactions/feed/DepositOrWithdrawFeedItem.test.tsx b/src/transactions/feed/DepositOrWithdrawFeedItem.test.tsx index 583c2f9a408..b5a63d7b524 100644 --- a/src/transactions/feed/DepositOrWithdrawFeedItem.test.tsx +++ b/src/transactions/feed/DepositOrWithdrawFeedItem.test.tsx @@ -71,19 +71,19 @@ describe('DepositOrWithdrawFeedItem', () => { expect(getByText('transactionFeed.depositSubtitle, {"txAppName":"Some Dapp"}')).toBeTruthy() }) - it('does not display app name when not available', () => { - const transactionWithoutProvider = { - ...depositTransaction, - appName: undefined, - } - + it('displays when app name is not available', () => { const { queryByText } = render( - + ) - expect(queryByText('transactionFeed.depositSubtitle, {"txAppName":"Some Dapp"}')).toBeNull() + expect(queryByText('transactionFeed.depositSubtitle, {"context":"noTxAppName"}')).toBeTruthy() }) it('should fire analytic event on tap', () => { diff --git a/src/transactions/feed/DepositOrWithdrawFeedItem.tsx b/src/transactions/feed/DepositOrWithdrawFeedItem.tsx index f5c688d484e..eddc68a4bf7 100644 --- a/src/transactions/feed/DepositOrWithdrawFeedItem.tsx +++ b/src/transactions/feed/DepositOrWithdrawFeedItem.tsx @@ -47,15 +47,9 @@ function Description({ transaction }: DescriptionProps) { {title} - {!!txAppName && ( - - {subtitle} - - )} + + {subtitle} + ) } @@ -67,15 +61,18 @@ interface AmountDisplayProps { function AmountDisplay({ transaction, isLocal }: AmountDisplayProps) { let amountValue + let localAmount let tokenId switch (transaction.type) { case TokenTransactionTypeV2.Deposit: amountValue = new BigNumber(-transaction.outAmount.value) + localAmount = transaction.outAmount.localAmount tokenId = transaction.outAmount.tokenId break case TokenTransactionTypeV2.Withdraw: amountValue = new BigNumber(transaction.inAmount.value) + localAmount = transaction.inAmount.localAmount tokenId = transaction.inAmount.tokenId break } @@ -90,6 +87,7 @@ function AmountDisplay({ transaction, isLocal }: AmountDisplayProps) { return ( { function depositTransaction({ status = TransactionStatus.Complete, + ...rest }: Partial): DepositOrWithdraw { return { type: TokenTransactionTypeV2.Deposit, @@ -596,15 +597,18 @@ describe('TransactionDetailsScreen', () => { tokenId: mockCusdTokenId, }, status, + ...rest, } } function withdrawTransaction({ status = TransactionStatus.Complete, + ...rest }: Partial): DepositOrWithdraw { return { ...depositTransaction({ status }), type: TokenTransactionTypeV2.Withdraw, + ...rest, } } @@ -648,6 +652,38 @@ describe('TransactionDetailsScreen', () => { expect(getByText('transactionDetailsActions.showCompletedTransactionDetails')).toBeTruthy() }) + it('should display app name', () => { + const { getByText } = renderScreen({ + transaction: depositTransaction({ appName: 'Aave' }), + storeOverrides: { + tokens: { + tokenBalances: mockTokenBalances, + }, + }, + }) + + expect( + getByText('transactionDetails.depositSubtitle, {"txAppName":"Aave","tokenSymbol":"cUSD"}') + ).toBeTruthy() + }) + + it('should display when app name is not available', () => { + const { getByText } = renderScreen({ + transaction: depositTransaction({ appName: undefined }), + storeOverrides: { + tokens: { + tokenBalances: mockTokenBalances, + }, + }, + }) + + expect( + getByText( + 'transactionDetails.depositSubtitle, {"context":"noTxAppName","tokenSymbol":"cUSD"}' + ) + ).toBeTruthy() + }) + it('renders swap details for deposit with swap', () => { const transactionWithSwap = { ...depositTransaction({ status: TransactionStatus.Complete }), diff --git a/src/transactions/feed/TransactionDetailsScreen.tsx b/src/transactions/feed/TransactionDetailsScreen.tsx index 851a11073d7..11c4cd48257 100644 --- a/src/transactions/feed/TransactionDetailsScreen.tsx +++ b/src/transactions/feed/TransactionDetailsScreen.tsx @@ -65,6 +65,10 @@ function useHeaderTitle(transaction: TokenTransaction) { return t('swapScreen.title') case TokenTransactionTypeV2.Approval: return t('transactionFeed.approvalTransactionTitle') + case TokenTransactionTypeV2.Deposit: + return t('transactionFeed.depositTitle') + case TokenTransactionTypeV2.Withdraw: + return t('transactionFeed.withdrawTitle') case TokenTransactionTypeV2.ClaimReward: return t('transactionFeed.claimRewardTitle') case TokenTransactionTypeV2.EarnWithdraw: diff --git a/src/transactions/feed/detailContent/DepositOrWithdrawContent.tsx b/src/transactions/feed/detailContent/DepositOrWithdrawContent.tsx index 8da9f1a6b18..61f8dc0fea1 100644 --- a/src/transactions/feed/detailContent/DepositOrWithdrawContent.tsx +++ b/src/transactions/feed/detailContent/DepositOrWithdrawContent.tsx @@ -32,16 +32,12 @@ export function DepositOrWithdrawContent({ transaction }: DepositOrWithdrawConte return ( <> {t('transactionDetails.descriptionLabel')} - {!!txAppName && ( - - {t( - isDeposit - ? 'transactionDetails.depositSubtitle' - : 'transactionDetails.withdrawSubtitle', - { context: !txAppName ? 'noTxAppName' : undefined, txAppName, tokenSymbol } - )} - - )} + + {t( + isDeposit ? 'transactionDetails.depositSubtitle' : 'transactionDetails.withdrawSubtitle', + { context: !txAppName ? 'noTxAppName' : undefined, txAppName, tokenSymbol } + )} + @@ -66,6 +62,7 @@ export function DepositOrWithdrawContent({ transaction }: DepositOrWithdrawConte