feat: earn asset details for aaveUSDC

locales/base/translation.json

@@ -2356,7 +2356,8 @@
       "totalValue": "Total Value:",
       "apy": "~{{apy}}% APY",
       "exitPool": "Exit Pool",
-      "depositMore": "Deposit More"
+      "depositMore": "Deposit More",
+      "viewPools": "View Pools"
     },
     "depositBottomSheet": {
       "title": "Review & Deposit",

src/analytics/Events.tsx

@@ -682,4 +682,5 @@ export enum EarnEvents {
   earn_deposit_terms_and_conditions_press = 'earn_deposit_terms_and_conditions_press',
   earn_deposit_complete = 'earn_deposit_complete',
   earn_deposit_cancel = 'earn_deposit_cancel',
+  earn_view_pools_press = 'earn_view_pools_press',
 }

src/analytics/Properties.tsx

@@ -1582,6 +1582,7 @@ interface EarnEventsProperties {
   [EarnEvents.earn_deposit_terms_and_conditions_press]: undefined
   [EarnEvents.earn_deposit_complete]: undefined
   [EarnEvents.earn_deposit_cancel]: undefined
+  [EarnEvents.earn_view_pools_press]: undefined
 }
 
 export type AnalyticsPropertiesList = AppEventsProperties &

src/analytics/docs.ts

@@ -597,6 +597,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [EarnEvents.earn_deposit_terms_and_conditions_press]: `When a user taps on the terms and conditions link on the deposit bottom sheet`,
   [EarnEvents.earn_deposit_complete]: `When a user taps on the complete button on the deposit bottom sheet`,
   [EarnEvents.earn_deposit_cancel]: `When a user taps on the cancel button on the deposit bottom sheet`,
+  [EarnEvents.earn_view_pools_press]: `When the user taps on the view pools button from token details`,
 
   // Legacy event docs
   //  The below events had docs, but are no longer produced by the latest app version.

src/dappsExplorer/TabDiscover.tsx

@@ -34,7 +34,7 @@ import NoResults from 'src/dappsExplorer/NoResults'
 import { searchDappList } from 'src/dappsExplorer/searchDappList'
 import useDappFavoritedToast from 'src/dappsExplorer/useDappFavoritedToast'
 import useOpenDapp from 'src/dappsExplorer/useOpenDapp'
-import useEarn from 'src/earn/useEarn'
+import { EarnCardDiscover } from 'src/earn/EarnCard'
 import { currentLanguageSelector } from 'src/i18n/selectors'
 import { Screens } from 'src/navigator/Screens'
 import useScrollAwareHeader from 'src/navigator/ScrollAwareHeader'
@@ -43,6 +43,7 @@ import { useDispatch, useSelector } from 'src/redux/hooks'
 import { Colors } from 'src/styles/colors'
 import fontStyles, { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
+import networkConfig from 'src/web3/networkConfig'
 
 const AnimatedSectionList =
   Animated.createAnimatedComponent<SectionListProps<Dapp, SectionData>>(SectionList)
@@ -73,9 +74,6 @@ function TabDiscover({ navigation }: Props) {
   const nonFavoriteDappsWithCategoryNames = useSelector(nonFavoriteDappsWithCategoryNamesSelector)
   const favoriteDappsWithCategoryNames = useSelector(favoriteDappsWithCategoryNamesSelector)
 
-  // Earning Pool Aave
-  const { Earn } = useEarn()
-
   const [filterChips, setFilterChips] = useState<BooleanFilterChip<DappWithCategoryNames>[]>(() =>
     categories.map((category) => ({
       id: category.id,
@@ -237,7 +235,10 @@ function TabDiscover({ navigation }: Props) {
                   </Text>
                 }
                 <DappFeaturedActions onPressShowDappRankings={handleShowDappRankings} />
-                <Earn />
+                <EarnCardDiscover
+                  poolTokenId={networkConfig.aaveArbUsdcTokenId}
+                  depositTokenId={networkConfig.arbUsdcTokenId}
+                />
                 <SearchInput
                   onChangeText={(text) => {
                     setSearchTerm(text)

src/earn/EarnActivePool.test.tsx

@@ -0,0 +1,79 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { EarnEvents } from 'src/analytics/Events'
+import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
+import EarnActivePool from 'src/earn/EarnActivePool'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { NetworkId } from 'src/transactions/types'
+import networkConfig from 'src/web3/networkConfig'
+import { createMockStore } from 'test/utils'
+import { mockAaveArbUsdcAddress } from 'test/values'
+
+const store = createMockStore({
+  tokens: {
+    tokenBalances: {
+      [networkConfig.aaveArbUsdcTokenId]: {
+        networkId: NetworkId['arbitrum-sepolia'],
+        address: mockAaveArbUsdcAddress,
+        tokenId: networkConfig.aaveArbUsdcTokenId,
+        symbol: 'aArbSepUSDC',
+        priceUsd: '1',
+        balance: '10.75',
+        priceFetchedAt: Date.now(),
+      },
+    },
+  },
+})
+
+describe('EarnActivePool', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should render correctly with ExitAndDeposit cta', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <EarnActivePool
+          cta="ExitAndDeposit"
+          depositTokenId={networkConfig.arbUsdcTokenId}
+          poolTokenId={networkConfig.aaveArbUsdcTokenId}
+        />
+      </Provider>
+    )
+
+    expect(getByText('earnFlow.activePools.exitPool')).toBeTruthy()
+    expect(getByText('earnFlow.activePools.depositMore')).toBeTruthy()
+  })
+
+  it('should render correctly with ViewPools cta', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <EarnActivePool
+          cta="ViewPools"
+          depositTokenId={networkConfig.arbUsdcTokenId}
+          poolTokenId={networkConfig.aaveArbUsdcTokenId}
+        />
+      </Provider>
+    )
+
+    expect(getByText('earnFlow.activePools.viewPools')).toBeTruthy()
+  })
+
+  it('should have correct analytics and navigation with ViewPools cta', () => {
+    const { getByText } = render(
+      <Provider store={store}>
+        <EarnActivePool
+          cta="ViewPools"
+          depositTokenId={networkConfig.arbUsdcTokenId}
+          poolTokenId={networkConfig.aaveArbUsdcTokenId}
+        />
+      </Provider>
+    )
+
+    fireEvent.press(getByText('earnFlow.activePools.viewPools'))
+    expect(ValoraAnalytics.track).toHaveBeenCalledWith(EarnEvents.earn_view_pools_press)
+    expect(navigate).toBeCalledWith(Screens.TabDiscover)
+  })
+})

src/earn/EarnActivePool.tsx

@@ -2,17 +2,21 @@
 import { useAsync } from 'react-async-hook'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
+import { EarnEvents } from 'src/analytics/Events'
+import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import SkeletonPlaceholder from 'src/components/SkeletonPlaceholder'
 import TokenDisplay from 'src/components/TokenDisplay'
 import { fetchAavePoolInfo } from 'src/earn/poolInfo'
 import UpwardGraph from 'src/icons/UpwardGraph'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
 import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
 import { useTokenInfo } from 'src/tokens/hooks'
 import Logger from 'src/utils/Logger'
-import networkConfig from 'src/web3/networkConfig'
+import networkConfig, { networkIdToNetwork } from 'src/web3/networkConfig'
 import { isAddress } from 'viem'
 
 const TAG = 'earn/EarnActivePool'
@@ -33,27 +37,39 @@
   )
 }
 
-export default function EarnActivePool() {
+interface Props {
+  cta: 'ExitAndDeposit' | 'ViewPools'
+  depositTokenId: string
+  poolTokenId: string
+}
+
+export default function EarnActivePool({ depositTokenId, poolTokenId, cta }: Props) {
   const { t } = useTranslation()
-  const token = useTokenInfo(networkConfig.arbUsdcTokenId)
-  const poolToken = useTokenInfo(networkConfig.aaveArbUsdcTokenId)
-  const asyncPoolInfo = useAsync(async () => {
-    if (!token || !token.address) {
-      // should never happen
-      Logger.warn(TAG, `Token with id ${networkConfig.arbUsdcTokenId} not found`)
-      throw new Error(`Token with id ${networkConfig.arbUsdcTokenId} not found`)
-    }
-    if (!isAddress(token.address)) {
-      Logger.warn(
-        TAG,
-        `Token with id ${networkConfig.arbUsdcTokenId} does not contain a valid address`
-      )
-      throw new Error(
-        `Token with id ${networkConfig.arbUsdcTokenId} does not contain a valid address`
-      )
+  const depositToken = useTokenInfo(depositTokenId)
+  const poolToken = useTokenInfo(poolTokenId)
+  const asyncPoolInfo = useAsync(
+    async () => {
+      if (!depositToken || !depositToken.address) {
+        throw new Error(`Token with id ${depositTokenId} not found`)
+      }
+
+      if (!isAddress(depositToken.address)) {
+        throw new Error(`Token with id ${depositTokenId} does not contain a valid address`)
+      }
+
+      return fetchAavePoolInfo({
+        assetAddress: depositToken.address,
+        contractAddress: networkConfig.arbAavePoolV3ContractAddress,
+        network: networkIdToNetwork[depositToken.networkId],
+      })
+    },
+    [],
+    {
+      onError: (error) => {
+        Logger.warn(TAG, error.message)
+      },
     }
-    return fetchAavePoolInfo(token.address)
-  }, [])
+  )
 
   return (
     <View style={styles.card} testID="EarnActivePool">
@@ -66,19 +82,19 @@
               <TokenDisplay
                 amount={poolToken.balance}
                 showLocalAmount={false}
-                testID={`${networkConfig.arbUsdcTokenId}-totalAmount`}
-                tokenId={networkConfig.arbUsdcTokenId}
+                testID={`${depositTokenId}-totalAmount`}
+                tokenId={depositTokenId}
               />
             )}
           </View>
           <View style={styles.row}>
             {asyncPoolInfo.error && <View />}
             {asyncPoolInfo.loading && <PoolDetailsLoading />}
-            {asyncPoolInfo.result && (
+            {asyncPoolInfo.result && !!asyncPoolInfo.result.apy && (
               <View style={styles.apyContainer}>
                 <Text style={styles.apyText}>
                   {t('earnFlow.activePools.apy', {
-                    apy: (asyncPoolInfo.result.apy * 100).toFixed(2) ?? '',
+                    apy: (asyncPoolInfo.result.apy * 100).toFixed(2),
                   })}
                 </Text>
                 <UpwardGraph />
@@ -88,36 +104,52 @@
               <TokenDisplay
                 amount={poolToken.balance}
                 showLocalAmount={true}
-                testID={`${networkConfig.arbUsdcTokenId}-totalAmount`}
-                tokenId={networkConfig.arbUsdcTokenId}
+                testID={`${depositTokenId}-totalAmount`}
+                tokenId={depositTokenId}
               />
             )}
           </View>
         </View>
-        <View style={styles.buttonContainer}>
-          <Button
-            onPress={() => {
-              // TODO (act-1180) create earn review withdraw screen
-              // Will navigate to this screen with appropriate props
-              // fire analytics
-            }}
-            text={t('earnFlow.activePools.exitPool')}
-            type={BtnTypes.SECONDARY}
-            size={BtnSizes.FULL}
-            style={styles.button}
-          />
-          <Button
-            onPress={() => {
-              // TODO (act-1176) create earn enter amount screen
-              // Will navigate to this screen with appropriate props
-              // fire analytics
-            }}
-            text={t('earnFlow.activePools.depositMore')}
-            type={BtnTypes.PRIMARY}
-            size={BtnSizes.FULL}
-            style={styles.button}
-          />
-        </View>
+        {cta === 'ExitAndDeposit' && (
+          <View style={styles.buttonContainer}>
+            <Button
+              onPress={() => {
+                // TODO (act-1180) create earn review withdraw screen
+                // Will navigate to this screen with appropriate props
+                // fire analytics
+              }}
+              text={t('earnFlow.activePools.exitPool')}
+              type={BtnTypes.GRAY_WITH_BORDER}
+              size={BtnSizes.FULL}
+              style={styles.button}
+            />
+            <Button
+              onPress={() => {
+                // TODO (act-1176) create earn enter amount screen
+                // Will navigate to this screen with appropriate props
+                // fire analytics
+              }}
+              text={t('earnFlow.activePools.depositMore')}
+              type={BtnTypes.PRIMARY}
+              size={BtnSizes.FULL}
+              style={styles.button}
+            />
+          </View>
+        )}
+        {cta === 'ViewPools' && (
+          <View style={styles.buttonContainer}>
+            <Button
+              onPress={() => {
+                ValoraAnalytics.track(EarnEvents.earn_view_pools_press)
+                navigate(Screens.TabDiscover)
+              }}
+              text={t('earnFlow.activePools.viewPools')}
+              type={BtnTypes.GRAY_WITH_BORDER}
+              size={BtnSizes.FULL}
+              style={styles.button}
+            />
+          </View>
+        )}
       </View>
     </View>
   )

src/earn/EarnCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { View } from 'react-native'
+import ItemSeparator from 'src/components/ItemSeparator'
+import EarnActivePool from 'src/earn/EarnActivePool'
+import EarnCta from 'src/earn/EarnCta'
+import { getFeatureGate } from 'src/statsig'
+import { StatsigFeatureGates } from 'src/statsig/types'
+import { Spacing } from 'src/styles/styles'
+import { useTokenInfo } from 'src/tokens/hooks'
+
+interface Props {
+  depositTokenId: string
+  poolTokenId: string
+}
+
+export function EarnCardDiscover({ depositTokenId, poolTokenId }: Props) {
+  const showStablecoinEarn = getFeatureGate(StatsigFeatureGates.SHOW_STABLECOIN_EARN)
+  const poolToken = useTokenInfo(poolTokenId)
+
+  if (showStablecoinEarn) {
+    return poolToken && poolToken.balance.gt(0) ? (
+      <EarnActivePool
+        cta="ExitAndDeposit"
+        depositTokenId={depositTokenId}
+        poolTokenId={poolTokenId}
+      />
+    ) : (
+      <EarnCta />
+    )
+  }
+  return null
+}
+
+export function EarnCardTokenDetails({ depositTokenId, poolTokenId }: Props) {
+  const showStablecoinEarn = getFeatureGate(StatsigFeatureGates.SHOW_STABLECOIN_EARN)
+  const poolToken = useTokenInfo(poolTokenId)
+
+  return showStablecoinEarn && poolToken && poolToken.balance.gt(0) ? (
+    <>
+      <ItemSeparator />
+      <View style={{ margin: Spacing.Regular16 }}>
+        <EarnActivePool cta="ViewPools" depositTokenId={depositTokenId} poolTokenId={poolTokenId} />
+      </View>
+    </>
+  ) : null
+}

src/earn/poolInfo.test.ts

@@ -10,7 +10,11 @@ describe('poolInfo', () => {
       currentLiquidityRate: BigInt(1e27 * 0.036),
     })
 
-    const result = await fetchAavePoolInfo('0x1234')
+    const result = await fetchAavePoolInfo({
+      assetAddress: '0x1234',
+      contractAddress: networkConfig.arbAavePoolV3ContractAddress,
+      network: Network.Arbitrum,
+    })
 
     expect(result).toEqual({ apy: 0.0366558430938988 })
     expect(publicClient[Network.Arbitrum].readContract).toHaveBeenCalledWith({