From 33f21b11f12b7204d582aef9674f406cdc6f23f2 Mon Sep 17 00:00:00 2001 From: Jacob Waterman Date: Wed, 16 Oct 2024 15:32:00 -0700 Subject: [PATCH] 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 | | --- | --- | | | | ### Test plan Unit tests and manually verified ### Related issues https://linear.app/valora/issue/ACT-1406/daily-rate --- locales/base/translation.json | 6 +- src/analytics/Properties.tsx | 2 +- src/earn/EarnPoolInfoScreen.test.tsx | 24 ++++++++ src/earn/EarnPoolInfoScreen.tsx | 83 ++++++++++++++++++++++++++-- src/positions/types.ts | 1 + test/RootStateSchema.json | 3 + 6 files changed, 113 insertions(+), 6 deletions(-) diff --git a/locales/base/translation.json b/locales/base/translation.json index 1f91a5c9199..d2a436d86ba 100644 --- a/locales/base/translation.json +++ b/locales/base/translation.json @@ -2695,6 +2695,7 @@ "chainName": "Chain: <0>{{networkName}}", "protocolName": "Protocol: <0>{{providerName}}", "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}}." + "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}}.", + "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 index 227124ac902..f9b22545712 100644 --- 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 index 1c89d973717..0412a831a7a 100644 --- 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 index e63c2b4e32b..79406914878 100644 --- a/src/earn/EarnPoolInfoScreen.tsx +++ b/src/earn/EarnPoolInfoScreen.tsx @@ -286,7 +286,7 @@ function YieldCard({ /> - {yieldRateSum > 0 + {yieldRateSum > 0.00005 ? t('earnFlow.poolInfoScreen.ratePercent', { rate: yieldRateSum.toFixed(2) }) : '--'} @@ -320,6 +320,33 @@ function YieldCard({ ) } +function DailyYieldRateCard({ + dailyYieldRate, + onInfoIconPress, +}: { + dailyYieldRate: number + onInfoIconPress: () => void +}) { + const { t } = useTranslation() + return ( + + + + + + + {t('earnFlow.poolInfoScreen.ratePercent', { rate: dailyYieldRate.toFixed(4) })} + + + + ) +} + function TvlCard({ earnPosition, onInfoIconPress, @@ -407,10 +434,10 @@ function LearnMoreTouchable({ }} > - {t('earnFlow.poolInfoScreen.learnMoreOnProvider', { providerName })} + @@ -514,6 +541,7 @@ export default function EarnPoolInfoScreen({ route, navigation }: Props) { const tvlInfoBottomSheetRef = useRef(null) const ageInfoBottomSheetRef = useRef(null) const yieldRateInfoBottomSheetRef = useRef(null) + const dailyYieldRateInfoBottomSheetRef = useRef(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 && ( + { + AppAnalytics.track(EarnEvents.earn_pool_info_tap_info_icon, { + providerId: appId, + poolId: positionId, + type: 'dailyYieldRate', + networkId, + depositTokenId: dataProps.depositTokenId, + }) + dailyYieldRateInfoBottomSheetRef.current?.snapToIndex(0) + }} + /> + )} + { @@ -647,6 +691,16 @@ export default function EarnPoolInfoScreen({ route, navigation }: Props) { providerName={appName} testId="YieldRateInfoBottomSheet" /> + titleKey: string @@ -674,6 +730,8 @@ function InfoBottomSheet({ descriptionUrl?: string providerName: string testId: string + linkUrl?: string + linkKey?: string }) { const { t } = useTranslation() const dispatch = useDispatch() @@ -702,6 +760,23 @@ function InfoBottomSheet({ ) : ( {t(descriptionKey, { providerName })} )} + {!!linkUrl && !!linkKey && ( + + { + navigateToURI(linkUrl) + }} + > + + + + + + + + + )}