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

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": {

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

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()
+  })
 })

src/earn/EarnPoolInfoScreen.tsx

@@ -286,7 +286,7 @@
           />
         </View>
         <Text style={styles.cardTitleText}>
-          {yieldRateSum > 0
+          {yieldRateSum > 0.00005
             ? t('earnFlow.poolInfoScreen.ratePercent', { rate: yieldRateSum.toFixed(2) })
             : '--'}
         </Text>
@@ -320,6 +320,33 @@
   )
 }
 
+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 @@
         }}
       >
         <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 @@
   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 @@
             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 @@
         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 @@
   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 @@
       ) : (
         <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 @@
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: Spacing.Smallest8,
+    marginBottom: Spacing.Thick24,
   },
   learnMoreText: {
-    ...typeScale.bodyMedium,
+    ...typeScale.labelSemiBoldSmall,
     color: Colors.black,
   },
   buttonContainer: {

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
 }
 

test/RootStateSchema.json

@@ -1245,6 +1245,9 @@
                 "contractCreatedAt": {
                     "type": "string"
                 },
+                "dailyYieldRatePercentage": {
+                    "type": "number"
+                },
                 "depositTokenId": {
                     "type": "string"
                 },