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