feat(earn): Show daily yield rate on the pool info screen if available (

#6159) ### Description https://www.figma.com/design/E1rC3MG74qEg5V4tvbeUnU/Stablecoin-Enablement?node-id=7514-85993&node-type=instance&m=dev https://linear.app/valora/issue/ACT-1406/daily-rate * Daily yield rate in pool info screen when available * small style fix to learn more link #### Daily Yield Rate https://github.com/user-attachments/assets/9ad04f6c-a06c-4e49-9af5-a9d8c6a2d1f7 #### Link Style https://www.figma.com/design/E1rC3MG74qEg5V4tvbeUnU/Stablecoin-Enablement?node-id=7514-85993&node-type=instance&m=dev | Before | After | | --- | --- | | <img src="https://github.com/user-attachments/assets/1a9e19cd-48c2-4eb9-ba67-23a864232343" width="250px"> | <img src="https://github.com/user-attachments/assets/05afb6d8-59c3-4786-b4f7-368828b1f667" width="250px"> | ### Test plan Unit tests and manually verified ### Related issues https://linear.app/valora/issue/ACT-1406/daily-rate
valora-inc · Oct 16, 2024 · 33f21b1 · 33f21b1
1 parent 3a1a88e
commit 33f21b1
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 6 deletions.
diff --git a/locales/base/translation.json b/locales/base/translation.json
@@ -2695,6 +2695,7 @@
       "chainName": "Chain: <0>{{networkName}}</0>",
       "protocolName": "Protocol: <0>{{providerName}}</0>",
       "yieldRate": "Yield Rate",
+      "dailyYieldRate": "Daily Rate",
       "ratePercent": "{{rate}}%",
       "rewards": "Rewards",
       "noRewards": "No rewards",
@@ -2716,7 +2717,10 @@
         "ageTitle": "Age of Pool",
         "ageDescription": "Older liquidity pools can indicate a solid track record and a history of building community trust. Because of this, some may consider these pools to be safer.\n\nThere is no perfect way to determine risk, so use this info as part of your overall research to make the decision that is best for you.",
         "yieldRateTitle": "Yield Rate",
-        "yieldRateDescription": "While most pools offer earnings in the form of a liquidity pool token, some give additional token(s) as a reward or added incentive.\n\nSince {{appName}} aggregates pools across multiple protocols, we have combined all the earning and reward rates into a single, overall yield rate to help easily evaluate your earning potential. This number is an estimate since the earning and reward values fluctuate constantly.\n\nFor further information about earning breakdowns you can visit <0>{{providerName}}</0>."
+        "yieldRateDescription": "While most pools offer earnings in the form of a liquidity pool token, some give additional token(s) as a reward or added incentive.\n\nSince {{appName}} aggregates pools across multiple protocols, we have combined all the earning and reward rates into a single, overall yield rate to help easily evaluate your earning potential. This number is an estimate since the earning and reward values fluctuate constantly.\n\nFor further information about earning breakdowns you can visit <0>{{providerName}}</0>.",
+        "dailyYieldRateTitle": "Daily Rate",
+        "dailyYieldRateDescription": "The daily rate displayed reflects the daily rate provided by {{providerName}}.",
+        "dailyYieldRateLink": "View More Daily Rate Details On {{providerName}}"
       }
     },
     "beforeDepositBottomSheet": {

diff --git a/src/analytics/Properties.tsx b/src/analytics/Properties.tsx
@@ -1621,7 +1621,7 @@ interface EarnEventsProperties {
   [EarnEvents.earn_home_error_try_again]: undefined
   [EarnEvents.earn_pool_info_view_pool]: EarnCommonProperties
   [EarnEvents.earn_pool_info_tap_info_icon]: {
-    type: 'tvl' | 'age' | 'yieldRate' | 'deposit'
+    type: 'tvl' | 'age' | 'yieldRate' | 'deposit' | 'dailyYieldRate'
   } & EarnCommonProperties
   [EarnEvents.earn_pool_info_tap_withdraw]: {
     poolAmount: string

diff --git a/src/earn/EarnPoolInfoScreen.test.tsx b/src/earn/EarnPoolInfoScreen.test.tsx
@@ -623,4 +623,28 @@ describe('EarnPoolInfoScreen', () => {
     })
     // TODO (ACT-1343): check that navigate is called with correct params
   })
+  it('shows the daily yield rate when it is available', () => {
+    const { getByTestId } = renderEarnPoolInfoScreen({
+      ...mockEarnPositions[0],
+      dataProps: {
+        ...mockEarnPositions[0].dataProps,
+        dailyYieldRatePercentage: 0.0452483,
+      },
+    })
+    expect(
+      within(getByTestId('DailyYieldRateCard')).getAllByText(
+        'earnFlow.poolInfoScreen.ratePercent, {"rate":"0.0452"}'
+      )
+    ).toBeTruthy()
+  })
+  it.each([0, undefined])('does not show the daily yield rate when it is %s', (dailyYieldRate) => {
+    const { queryByTestId } = renderEarnPoolInfoScreen({
+      ...mockEarnPositions[0],
+      dataProps: {
+        ...mockEarnPositions[0].dataProps,
+        dailyYieldRatePercentage: dailyYieldRate,
+      },
+    })
+    expect(queryByTestId('DailyYieldRateCard')).toBeFalsy()
+  })
 })
diff --git a/src/earn/EarnPoolInfoScreen.tsx b/src/earn/EarnPoolInfoScreen.tsx
@@ -286,7 +286,7 @@ function YieldCard({
           />
         </View>
         <Text style={styles.cardTitleText}>
-          {yieldRateSum > 0
+          {yieldRateSum > 0.00005
             ? t('earnFlow.poolInfoScreen.ratePercent', { rate: yieldRateSum.toFixed(2) })
             : '--'}
         </Text>
@@ -320,6 +320,33 @@ function YieldCard({
   )
 }
 
+function DailyYieldRateCard({
+  dailyYieldRate,
+  onInfoIconPress,
+}: {
+  dailyYieldRate: number
+  onInfoIconPress: () => void
+}) {
+  const { t } = useTranslation()
+  return (
+    <View style={styles.card} testID="DailyYieldRateCard">
+      <View style={styles.cardLineContainer}>
+        <View style={styles.cardLineLabel}>
+          <LabelWithInfo
+            onPress={onInfoIconPress}
+            label={t('earnFlow.poolInfoScreen.dailyYieldRate')}
+            labelStyle={styles.cardTitleText}
+            testID="DailyYieldRateInfoIcon"
+          />
+        </View>
+        <Text style={styles.cardTitleText}>
+          {t('earnFlow.poolInfoScreen.ratePercent', { rate: dailyYieldRate.toFixed(4) })}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
 function TvlCard({
   earnPosition,
   onInfoIconPress,
@@ -407,10 +434,10 @@ function LearnMoreTouchable({
         }}
       >
         <View style={styles.learnMoreView}>
-          <OpenLinkIcon color={Colors.black} size={24} />
           <Text style={styles.learnMoreText}>
             {t('earnFlow.poolInfoScreen.learnMoreOnProvider', { providerName })}
           </Text>
+          <OpenLinkIcon color={Colors.black} size={16} />
         </View>
       </Touchable>
     </View>
@@ -514,6 +541,7 @@ export default function EarnPoolInfoScreen({ route, navigation }: Props) {
   const tvlInfoBottomSheetRef = useRef<BottomSheetModalRefType>(null)
   const ageInfoBottomSheetRef = useRef<BottomSheetModalRefType>(null)
   const yieldRateInfoBottomSheetRef = useRef<BottomSheetModalRefType>(null)
+  const dailyYieldRateInfoBottomSheetRef = useRef<BottomSheetModalRefType>(null)
 
   // Scroll Aware Header
   const scrollPosition = useSharedValue(0)
@@ -573,6 +601,22 @@ export default function EarnPoolInfoScreen({ route, navigation }: Props) {
             tokensInfo={tokensInfo}
             earnPosition={pool}
           />
+          {!!dataProps.dailyYieldRatePercentage && dataProps.dailyYieldRatePercentage > 0 && (
+            <DailyYieldRateCard
+              dailyYieldRate={dataProps.dailyYieldRatePercentage}
+              onInfoIconPress={() => {
+                AppAnalytics.track(EarnEvents.earn_pool_info_tap_info_icon, {
+                  providerId: appId,
+                  poolId: positionId,
+                  type: 'dailyYieldRate',
+                  networkId,
+                  depositTokenId: dataProps.depositTokenId,
+                })
+                dailyYieldRateInfoBottomSheetRef.current?.snapToIndex(0)
+              }}
+            />
+          )}
+
           <TvlCard
             earnPosition={pool}
             onInfoIconPress={() => {
@@ -647,6 +691,16 @@ export default function EarnPoolInfoScreen({ route, navigation }: Props) {
         providerName={appName}
         testId="YieldRateInfoBottomSheet"
       />
+      <InfoBottomSheet
+        infoBottomSheetRef={dailyYieldRateInfoBottomSheetRef}
+        titleKey="earnFlow.poolInfoScreen.infoBottomSheet.dailyYieldRateTitle"
+        descriptionKey="earnFlow.poolInfoScreen.infoBottomSheet.dailyYieldRateDescription"
+        descriptionUrl={dataProps.manageUrl}
+        providerName={appName}
+        linkKey="earnFlow.poolInfoScreen.infoBottomSheet.dailyYieldRateLink"
+        linkUrl={dataProps.manageUrl}
+        testId="DailyYieldRateInfoBottomSheet"
+      />
       <BeforeDepositBottomSheet
         forwardedRef={beforeDepositBottomSheetRef}
         token={depositToken}
@@ -667,13 +721,17 @@ function InfoBottomSheet({
   descriptionUrl,
   providerName,
   testId,
+  linkUrl,
+  linkKey,
 }: {
   infoBottomSheetRef: React.RefObject<BottomSheetModalRefType>
   titleKey: string
   descriptionKey: string
   descriptionUrl?: string
   providerName: string
   testId: string
+  linkUrl?: string
+  linkKey?: string
 }) {
   const { t } = useTranslation()
   const dispatch = useDispatch()
@@ -702,6 +760,23 @@ function InfoBottomSheet({
       ) : (
         <Text style={styles.infoBottomSheetText}>{t(descriptionKey, { providerName })}</Text>
       )}
+      {!!linkUrl && !!linkKey && (
+        <View style={styles.learnMoreContainer}>
+          <Touchable
+            borderRadius={8}
+            onPress={() => {
+              navigateToURI(linkUrl)
+            }}
+          >
+            <View style={styles.learnMoreView}>
+              <Text style={styles.learnMoreText}>
+                <Trans i18nKey={linkKey} tOptions={{ providerName }} />
+              </Text>
+              <OpenLinkIcon color={Colors.black} size={16} />
+            </View>
+          </Touchable>
+        </View>
+      )}
       <Button
         onPress={onPressDismiss}
         text={t('earnFlow.poolInfoScreen.infoBottomSheet.gotIt')}
@@ -837,10 +912,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: Spacing.Smallest8,
+    marginBottom: Spacing.Thick24,
   },
   learnMoreText: {
-    ...typeScale.bodyMedium,
+    ...typeScale.labelSemiBoldSmall,
     color: Colors.black,
   },
   buttonContainer: {

diff --git a/src/positions/types.ts b/src/positions/types.ts
@@ -36,6 +36,7 @@ interface EarnDataProps {
   depositTokenId: string
   withdrawTokenId: string
   rewardsPositionIds?: string[]
+  dailyYieldRatePercentage?: number
   // We'll add more fields here as needed
 }
 

diff --git a/test/RootStateSchema.json b/test/RootStateSchema.json
@@ -1245,6 +1245,9 @@
                 "contractCreatedAt": {
                     "type": "string"
                 },
+                "dailyYieldRatePercentage": {
+                    "type": "number"
+                },
                 "depositTokenId": {
                     "type": "string"
                 },