chore: adjust text for earn and simplify active pool tap action (#5792)

### Description Simplies the multipool card in the Discover Tab. | iOS No Deposits Before | iOS No Deposits After | iOS With Deposits Before | iOS With Deposits After | | ----- | ----- | ----- | ----- | | ![](https://github.com/user-attachments/assets/27e1ced2-b26d-498d-8906-5ff847fa731d "iOS Before No Deposits") | ![](https://github.com/user-attachments/assets/239b65be-6a5c-4f48-a771-d95cc12dd663 "iOS After No Deposits") | ![](https://github.com/user-attachments/assets/ac50207d-8146-46d4-83f0-cb1410a94f1b "iOS Before With Deposits") | ![](https://github.com/user-attachments/assets/1086a061-de30-48f6-97d6-a356d62b5a41 "iOS After With Deposits") | | Android No Deposits Before | Android No Deposits After | Android With Deposits Before | Android With Deposits After | | ----- | ----- | ----- | ----- | | ![](https://github.com/user-attachments/assets/973762df-68c8-47dd-a199-19e944951779 "Android Before No Deposits") | ![](https://github.com/user-attachments/assets/8239b312-f588-4912-9cdd-5e01d8209e6b "Android After No Deposits") | ![](https://github.com/user-attachments/assets/3ad38e65-fab3-446c-b42c-d333f5e2ac48 "Android Before With Deposits") | ![](https://github.com/user-attachments/assets/7d8a13d5-4762-4151-aaea-bb6db37e721b "Android After With Deposits") | ### Test plan - [x] Tested locally on Android - [x] Tested locally on iOS - [x] Unit tests updated ### Related issues - Fixes ACT-1333 ### Backwards compatibility Yes ### Network scalability N/A
valora-inc · Aug 21, 2024 · f28d92b · f28d92b
1 parent 13c8715
commit f28d92b
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 78 deletions.
diff --git a/locales/base/translation.json b/locales/base/translation.json
@@ -2511,8 +2511,8 @@
     },
     "entrypoint": {
       "title": "Earn on your stablecoins",
-      "subtitle": "Deposit and earn returns",
-      "description": "Explore pools to deposit assets and earn returns on your stablecoins"
+      "subtitle": "Deposit and earn",
+      "description": "Earn on your stablecoins when you lend through a liquidity pool"
     },
     "enterAmount": {
       "earnUpToLabel": "You could earn up to:",
@@ -2542,6 +2542,7 @@
       "viewPools": "View Pools",
       "poolsSupplied": "Pools supplied",
       "totalSupplied": "Total supplied",
+      "depositAndEarnings": "Deposit & Earnings",
       "myPools": "My Pools",
       "explore": "Explore Open"
     },

diff --git a/src/analytics/Events.tsx b/src/analytics/Events.tsx
@@ -682,7 +682,7 @@ export enum EarnEvents {
   earn_withdraw_add_gas_press = 'earn_withdraw_add_gas_press',
   earn_info_learn_press = 'earn_info_learn_press',
   earn_info_earn_press = 'earn_info_earn_press',
-  earn_active_pools_cta_press = 'earn_active_pools_cta_press',
+  earn_active_pools_card_press = 'earn_active_pools_card_press',
   earn_home_learn_more_press = 'earn_home_learn_more_press',
   earn_pool_card_cta_press = 'earn_pool_card_cta_press',
 }
diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx
@@ -1633,7 +1633,7 @@ interface EarnEventsProperties {
   [EarnEvents.earn_withdraw_add_gas_press]: { gasTokenId: string }
   [EarnEvents.earn_info_learn_press]: undefined
   [EarnEvents.earn_info_earn_press]: undefined
-  [EarnEvents.earn_active_pools_cta_press]: { action: 'myPools' | 'exploreOpenPools' }
+  [EarnEvents.earn_active_pools_card_press]: undefined
   [EarnEvents.earn_home_learn_more_press]: undefined
   [EarnEvents.earn_pool_card_cta_press]: {
     tokenAmount: string

diff --git a/src/analytics/docs.ts b/src/analytics/docs.ts
@@ -606,7 +606,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [EarnEvents.earn_withdraw_add_gas_press]: `When the user doesn't have enough for gas and clicks on the button to add gas token`,
   [EarnEvents.earn_info_learn_press]: `When the user taps 'Learn More' on the earn info page`,
   [EarnEvents.earn_info_earn_press]: `When the user taps 'Start Earning' on the earn info page `,
-  [EarnEvents.earn_active_pools_cta_press]: `When the user taps one of the CTAs in the active pools card in the discover tab. The action property denotes the CTA, either myPools or exploreOpenPools`,
+  [EarnEvents.earn_active_pools_card_press]: `When the user taps on the active pool card in discover tab.`,
   [EarnEvents.earn_home_learn_more_press]: `When the user taps 'Learn more' on the earn home screen`,
   [EarnEvents.earn_pool_card_cta_press]: `When the user taps a cta button on the pool card`,
 
@@ -650,4 +650,5 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   // [DappKitEvents.dappkit_request_accept_error]: `when the dapp request fails`,
   // [KeylessBackupEvents.cab_sign_in_with_google]: ``, renamed to cab_sign_in_start when we started supporting Apple sign in
   // [KeylessBackupEvents.cab_sign_in_with_google_success]: ``, renamed to cab_sign_in_success when we started supporting Apple sign in
+  // [EarnEvents.earn_active_pools_cta_press]: `cta buttons on the card were removed and replaced with a single card press event`,
 }
diff --git a/src/earn/EarnActivePools.test.tsx b/src/earn/EarnActivePools.test.tsx
@@ -88,33 +88,15 @@ describe('EarnActivePools', () => {
     expect(getByTestId('EarnActivePools/TotalSupplied')).toContainElement(getByText('₱13.29'))
   })
 
-  it('explore pools navigates to correct tab on earn home page', () => {
-    const { getByText } = render(
+  it('navigates to correct tab on touchable press', () => {
+    const { getByTestId } = render(
       <Provider store={store}>
         <EarnActivePools />
       </Provider>
     )
 
-    fireEvent.press(getByText('earnFlow.activePools.explore'))
-    expect(AppAnalytics.track).toHaveBeenCalledWith(EarnEvents.earn_active_pools_cta_press, {
-      action: 'exploreOpenPools',
-    })
-    expect(navigate).toHaveBeenCalledWith(Screens.EarnHome, {
-      activeEarnTab: EarnTabType.OpenPools,
-    })
-  })
-
-  it('my pools navigates to correct tab on earn home page', () => {
-    const { getByText } = render(
-      <Provider store={store}>
-        <EarnActivePools />
-      </Provider>
-    )
-
-    fireEvent.press(getByText('earnFlow.activePools.myPools'))
-    expect(AppAnalytics.track).toHaveBeenCalledWith(EarnEvents.earn_active_pools_cta_press, {
-      action: 'myPools',
-    })
+    fireEvent.press(getByTestId('EarnActivePools'))
+    expect(AppAnalytics.track).toHaveBeenCalledWith(EarnEvents.earn_active_pools_card_press)
     expect(navigate).toHaveBeenCalledWith(Screens.EarnHome, { activeEarnTab: EarnTabType.MyPools })
   })
 })
diff --git a/src/earn/EarnActivePools.tsx b/src/earn/EarnActivePools.tsx
@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 import AppAnalytics from 'src/analytics/AppAnalytics'
 import { EarnEvents } from 'src/analytics/Events'
-import Button, { BtnSizes, BtnTypes, TextSizes } from 'src/components/Button'
 import { formatValueToDisplay } from 'src/components/TokenDisplay'
+import Touchable from 'src/components/Touchable'
 import { EarnTabType } from 'src/earn/types'
 import { useDollarsToLocalAmount } from 'src/localCurrency/hooks'
 import { getLocalCurrencySymbol } from 'src/localCurrency/selectors'
@@ -41,51 +41,32 @@ export default function EarnActivePools() {
     [localCurrencySymbol, totalSuppliedValue]
   )
 
+  function handlePress() {
+    AppAnalytics.track(EarnEvents.earn_active_pools_card_press)
+    navigate(Screens.EarnHome, { activeEarnTab: EarnTabType.MyPools })
+  }
+
   return (
-    <View style={styles.card} testID="EarnActivePools">
+    <Touchable
+      style={styles.card}
+      borderRadius={Spacing.Smallest8}
+      testID="EarnActivePools"
+      onPress={handlePress}
+    >
       <View style={styles.container}>
         <Text style={styles.title}>{t('earnFlow.activePools.title')}</Text>
-        <View>
+        <View style={styles.textContainer}>
+          <View style={styles.row} testID="EarnActivePools/TotalSupplied">
+            <Text style={styles.labelText}>{t('earnFlow.activePools.depositAndEarnings')}</Text>
+            <Text style={styles.valueText}>{totalSupplied}</Text>
+          </View>
           <View style={styles.row} testID="EarnActivePools/PoolsSupplied">
             <Text style={styles.labelText}>{t('earnFlow.activePools.poolsSupplied')}</Text>
             <Text style={styles.valueText}>{poolsSupplied}</Text>
           </View>
-          <View style={styles.separator} />
-          <View style={styles.row} testID="EarnActivePools/TotalSupplied">
-            <Text style={styles.labelText}>{t('earnFlow.activePools.totalSupplied')}</Text>
-            <Text style={styles.valueText}>{totalSupplied}</Text>
-          </View>
-        </View>
-        <View style={styles.buttonContainer}>
-          <Button
-            onPress={() => {
-              AppAnalytics.track(EarnEvents.earn_active_pools_cta_press, {
-                action: 'exploreOpenPools',
-              })
-              navigate(Screens.EarnHome, { activeEarnTab: EarnTabType.OpenPools })
-            }}
-            text={t('earnFlow.activePools.explore')}
-            type={BtnTypes.TERTIARY}
-            size={BtnSizes.FULL}
-            style={styles.button}
-            textSize={TextSizes.SMALL}
-          />
-          <Button
-            onPress={() => {
-              AppAnalytics.track(EarnEvents.earn_active_pools_cta_press, {
-                action: 'myPools',
-              })
-              navigate(Screens.EarnHome, { activeEarnTab: EarnTabType.MyPools })
-            }}
-            text={t('earnFlow.activePools.myPools')}
-            type={BtnTypes.SECONDARY}
-            size={BtnSizes.FULL}
-            style={styles.button}
-            textSize={TextSizes.SMALL}
-          />
         </View>
       </View>
-    </View>
+    </Touchable>
   )
 }
 
@@ -94,7 +75,7 @@ const styles = StyleSheet.create({
     padding: Spacing.Regular16,
     borderColor: Colors.gray2,
     borderWidth: 1,
-    borderRadius: 8,
+    borderRadius: Spacing.Smallest8,
     marginBottom: Spacing.Thick24,
   },
   title: {
@@ -109,19 +90,6 @@ const styles = StyleSheet.create({
     ...typeScale.labelSemiBoldSmall,
     color: Colors.black,
   },
-  separator: {
-    height: 1,
-    backgroundColor: Colors.gray2,
-    marginVertical: Spacing.Smallest8,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    gap: Spacing.Smallest8,
-  },
-  button: {
-    flexGrow: 1,
-    flexBasis: 0,
-  },
   container: {
     flexDirection: 'column',
     gap: Spacing.Regular16,
@@ -130,4 +98,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  textContainer: {
+    gap: Spacing.Regular16,
+  },
 })