Native: earn screens (#1617)

musidlo · web-flow · commit 259442451a6b · 2025-06-11T13:25:41.000+02:00
diff --git a/apps/expo/app/earn/[asset]/balance.tsx b/apps/expo/app/earn/[asset]/balance.tsx
@@ -1,17 +1,20 @@
 import { Stack } from 'expo-router/build/layouts/Stack'
+import { SendEarnProvider } from 'app/features/earn/providers/SendEarnProvider'
+import { EarningsBalance } from 'app/features/earn/earnings/screen'
 import { ScreenContainer } from 'apps-expo/components/layout/ScreenContainer'
-import { Paragraph } from '@my/ui'
 
 export default function BalanceAssetSavingsScreen() {
   return (
     <>
       <Stack.Screen
         options={{
-          title: 'Savings Balance',
+          title: 'Balance',
         }}
       />
       <ScreenContainer>
-        <Paragraph>BalanceAssetSavingsScreen</Paragraph>
+        <SendEarnProvider>
+          <EarningsBalance />
+        </SendEarnProvider>
       </ScreenContainer>
     </>
   )
diff --git a/apps/expo/app/earn/[asset]/deposit.tsx b/apps/expo/app/earn/[asset]/deposit.tsx
@@ -1,17 +1,20 @@
 import { Stack } from 'expo-router/build/layouts/Stack'
 import { ScreenContainer } from 'apps-expo/components/layout/ScreenContainer'
-import { Paragraph } from '@my/ui'
+import { DepositScreen } from 'app/features/earn/deposit/screen'
+import { SendEarnProvider } from 'app/features/earn/providers/SendEarnProvider'
 
 export default function DepositAssetSavingsScreen() {
   return (
     <>
       <Stack.Screen
         options={{
-          title: 'Start Saving',
+          title: 'Deposit',
         }}
       />
       <ScreenContainer>
-        <Paragraph>DepositAssetSavingsScreen</Paragraph>
+        <SendEarnProvider>
+          <DepositScreen />
+        </SendEarnProvider>
       </ScreenContainer>
     </>
   )
diff --git a/apps/expo/app/earn/[asset]/index.tsx b/apps/expo/app/earn/[asset]/index.tsx
@@ -1,18 +1,20 @@
 import { ScreenContainer } from 'apps-expo/components/layout/ScreenContainer'
 import { Stack } from 'expo-router'
-import { Link, Paragraph } from '@my/ui'
+import { SendEarnProvider } from 'app/features/earn/providers/SendEarnProvider'
+import { ActiveEarningsScreen } from 'app/features/earn/active/screen'
 
 export default function SavingsAssetScreen() {
   return (
     <>
       <Stack.Screen
         options={{
-          title: 'Savings',
+          title: 'Details',
         }}
       />
       <ScreenContainer>
-        <Paragraph>SavingsAssetScreen</Paragraph>
-        <Link href={'/earn/usdc'}>crypto</Link>
+        <SendEarnProvider>
+          <ActiveEarningsScreen />
+        </SendEarnProvider>
       </ScreenContainer>
     </>
   )
diff --git a/apps/expo/app/earn/[asset]/withdraw.tsx b/apps/expo/app/earn/[asset]/withdraw.tsx
@@ -1,6 +1,7 @@
 import { Stack } from 'expo-router/build/layouts/Stack'
 import { ScreenContainer } from 'apps-expo/components/layout/ScreenContainer'
-import { Paragraph } from '@my/ui'
+import { SendEarnProvider } from 'app/features/earn/providers/SendEarnProvider'
+import { WithdrawForm } from 'app/features/earn/withdraw/screen'
 
 export default function WithdrawAssetSavingsScreen() {
   return (
@@ -11,7 +12,9 @@ export default function WithdrawAssetSavingsScreen() {
         }}
       />
       <ScreenContainer>
-        <Paragraph>WithdrawAssetSavingsScreen</Paragraph>
+        <SendEarnProvider>
+          <WithdrawForm />
+        </SendEarnProvider>
       </ScreenContainer>
     </>
   )
diff --git a/apps/expo/app/earn/index.tsx b/apps/expo/app/earn/index.tsx
@@ -1,6 +1,7 @@
 import { ScreenContainer } from 'apps-expo/components/layout/ScreenContainer'
 import { Stack } from 'expo-router'
-import { Link, Paragraph } from '@my/ui'
+import { SendEarnProvider } from 'app/features/earn/providers/SendEarnProvider'
+import { EarnScreen } from 'app/features/earn/screen'
 
 export default function SavingsScreen() {
   return (
@@ -11,10 +12,9 @@ export default function SavingsScreen() {
         }}
       />
       <ScreenContainer>
-        <Paragraph>SavingsScreen</Paragraph>
-        <Link href={'/earn/usdc/balance'}>balance</Link>
-        <Link href={'/earn/usdc/deposit'}>deposit</Link>
-        <Link href={'/earn/usdc/withdraw'}>withdraw</Link>
+        <SendEarnProvider>
+          <EarnScreen />
+        </SendEarnProvider>
       </ScreenContainer>
     </>
   )
diff --git a/apps/expo/metro.config.js b/apps/expo/metro.config.js
@@ -16,6 +16,25 @@ config.resolver.nodeModulesPaths = [
   path.resolve(workspaceRoot, 'node_modules'),
 ]
 
+// Add support for package.json exports field and fix module resolution issues
+config.resolver.resolverMainFields = ['react-native', 'browser', 'main']
+config.resolver.platforms = ['ios', 'android', 'native', 'web']
+
+// Custom resolver to handle packages with exports field that Metro doesn't support properly
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (moduleName === '@0xsend/send-earn-contracts') {
+    return {
+      filePath: path.resolve(
+        workspaceRoot,
+        'node_modules/@0xsend/send-earn-contracts/dist/index.js'
+      ),
+      type: 'sourceFile',
+    }
+  }
+  // Fall back to default resolver for all other modules
+  return context.resolveRequest(context, moduleName, platform)
+}
+
 config.transformer = { ...config.transformer, unstable_allowRequireContext: true }
 config.transformer.minifierPath = require.resolve('metro-minify-terser')
 
diff --git a/packages/app/features/earn/deposit/screen.tsx b/packages/app/features/earn/deposit/screen.tsx
@@ -47,6 +47,7 @@ import {
 } from '../params'
 import { useSendEarnDepositCalls, useSendEarnDepositVault } from './hooks'
 import { useSendEarnAPY } from '../hooks'
+import { Platform } from 'react-native'
 
 const log = debug('app:earn:deposit')
 const MINIMUM_DEPOSIT = BigInt(5 * 1e6) // 5 USDC
@@ -120,9 +121,16 @@ export function DepositForm() {
         message: 'Your deposit is being processed.',
       })
       if (!coin.data) return
-      router.push({
-        pathname: `/earn/${coinToParam(coin.data)}/balance`,
-      })
+
+      // for web redirect to balance is fine, on native back for better ux
+      if (Platform.OS === 'web') {
+        router.replace({
+          pathname: `/earn/${coinToParam(coin.data)}/balance`,
+        })
+        return
+      }
+
+      router.back()
     },
     onSettled: () => {
       log('sendEarn.deposit.onSettled')
diff --git a/packages/app/features/earn/earnings/screen.tsx b/packages/app/features/earn/earnings/screen.tsx
@@ -139,6 +139,7 @@ export const EarningsFeed = () => {
         onEndReached={() => hasNextPage && fetchNextPage()}
         ListFooterComponent={!isLoading && isFetchingNextPage ? <Spinner size="small" /> : null}
         stickySectionHeadersEnabled={true}
+        contentContainerStyle={{ gap: 16 }}
       />
     </Fade>
   )
diff --git a/packages/app/features/earn/withdraw/screen.tsx b/packages/app/features/earn/withdraw/screen.tsx
@@ -38,6 +38,7 @@ import {
 } from '../params'
 import { useSendEarnWithdrawCalls, useSendEarnWithdrawVault } from './hooks'
 import { useSendEarnAPY } from '../hooks'
+import { Platform } from 'react-native'
 
 export const log = debug('app:earn:withdraw')
 
@@ -143,11 +144,14 @@ export function WithdrawForm() {
 
       toast.show('Withdrawn successfully')
 
-      if (coinData) {
+      if (coinData && Platform.OS === 'web') {
         router.push({
           pathname: `/earn/${coinToParam(coinData)}`,
         })
+        return
       }
+
+      router.back()
     },
     onSettled: (data, error, variables, context) => {
       // Error or success... doesn't matter!

Original file line number	Diff line number	Diff line change
`@@ -139,6 +139,7 @@ export const EarningsFeed = () => {`
`139`	`139`	`onEndReached={() => hasNextPage && fetchNextPage()}`
`140`	`140`	`ListFooterComponent={!isLoading && isFetchingNextPage ? <Spinner size="small" /> : null}`
`141`	`141`	`stickySectionHeadersEnabled={true}`
	`142`	`+ contentContainerStyle={{ gap: 16 }}`
`142`	`143`	`/>`
`143`	`144`	`</Fade>`
`144`	`145`	`)`