fix(feedV2): fix missing title, subtitle, localAmount for deposit and…

… withdraw (#6200) ### Description Follow up to #6189 with small bugs that I noticed. ### Test plan - Updated tests ### Related issues - Part of RET-1204 ### Backwards compatibility Yes ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [x] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)
valora-inc · Oct 31, 2024 · bfdea5e · bfdea5e
1 parent 12210f7
commit bfdea5e
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 28 deletions.
diff --git 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
@@ -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(
       <Provider store={store}>
-        <DepositOrWithdrawFeedItem transaction={transactionWithoutProvider} />
+        <DepositOrWithdrawFeedItem
+          transaction={{
+            ...depositTransaction,
+            appName: undefined,
+          }}
+        />
       </Provider>
     )
 
-    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
@@ -47,15 +47,9 @@ function Description({ transaction }: DescriptionProps) {
       <Text style={styles.title} testID={'DepositOrWithdrawFeedItem/title'} numberOfLines={1}>
         {title}
       </Text>
-      {!!txAppName && (
-        <Text
-          style={styles.subtitle}
-          testID={'DepositOrWithdrawFeedItem/subtitle'}
-          numberOfLines={1}
-        >
-          {subtitle}
-        </Text>
-      )}
+      <Text style={styles.subtitle} testID={'DepositOrWithdrawFeedItem/subtitle'} numberOfLines={1}>
+        {subtitle}
+      </Text>
     </View>
   )
 }
@@ -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 (
     <TokenDisplay
       amount={amountValue}
+      localAmount={localAmount}
       tokenId={tokenId}
       showLocalAmount={isLocal}
       showSymbol={true}

diff --git a/src/transactions/feed/TransactionDetailsScreen.test.tsx b/src/transactions/feed/TransactionDetailsScreen.test.tsx
@@ -578,6 +578,7 @@ describe('TransactionDetailsScreen', () => {
 
     function depositTransaction({
       status = TransactionStatus.Complete,
+      ...rest
     }: Partial<DepositOrWithdraw>): DepositOrWithdraw {
       return {
         type: TokenTransactionTypeV2.Deposit,
@@ -596,15 +597,18 @@ describe('TransactionDetailsScreen', () => {
           tokenId: mockCusdTokenId,
         },
         status,
+        ...rest,
       }
     }
 
     function withdrawTransaction({
       status = TransactionStatus.Complete,
+      ...rest
     }: Partial<DepositOrWithdraw>): 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
@@ -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
@@ -32,16 +32,12 @@ export function DepositOrWithdrawContent({ transaction }: DepositOrWithdrawConte
   return (
     <>
       <Text style={styles.detailsTitle}>{t('transactionDetails.descriptionLabel')}</Text>
-      {!!txAppName && (
-        <Text style={styles.detailsSubtitle}>
-          {t(
-            isDeposit
-              ? 'transactionDetails.depositSubtitle'
-              : 'transactionDetails.withdrawSubtitle',
-            { context: !txAppName ? 'noTxAppName' : undefined, txAppName, tokenSymbol }
-          )}
-        </Text>
-      )}
+      <Text style={styles.detailsSubtitle}>
+        {t(
+          isDeposit ? 'transactionDetails.depositSubtitle' : 'transactionDetails.withdrawSubtitle',
+          { context: !txAppName ? 'noTxAppName' : undefined, txAppName, tokenSymbol }
+        )}
+      </Text>
       <RowDivider />
       <View style={styles.amountContainer}>
         <View>
@@ -66,6 +62,7 @@ export function DepositOrWithdrawContent({ transaction }: DepositOrWithdrawConte
           </View>
           <TokenDisplay
             amount={amount.value}
+            localAmount={amount.localAmount}
             tokenId={amount.tokenId}
             style={styles.amountSubtitle}
           />