feat(earn): Add earn withdraw bottom sheet

locales/base/translation.json

@@ -2713,6 +2713,20 @@
       "deposit": "Deposit",
       "depositAndEarnings": "Deposit & Earnings",
       "withdraw": "Withdraw",
+      "withdrawBottomSheet": {
+        "title": "Select withdraw type",
+        "withdrawAndClaim": "Withdraw and Claim",
+        "withdrawDescription": "Withdraw a specific amount of any tokens you have deposited in the pool",
+        "withdrawAndClaimDescription": "Withdraw a specific amount of any tokens you have deposited in the pool and claim your rewards automatically",
+        "claimRewards": "Claim Rewards",
+        "claimRewardsDescription": "Claim your rewards. Partial amounts of the reward cannot be claimed",
+        "claimEarnings": "Claim Earnings",
+        "claimEarningsDescription": "Claim the earnings on your deposit. Partial amounts cannot be claimed",
+        "exit": "Exit",
+        "exitDescription": "Exiting will withdraw everything you have in the pool",
+        "exitWithRewardsDescription": "Exiting will withdraw everything you have in the pool, including rewards",
+        "exitWithEarningsDescription": "Exiting will withdraw everything you have in the pool, including earnings"
+      },
       "totalDepositAndEarnings": "Total Deposit & Earnings",
       "titleLocalAmountDisplay": "{{localCurrencySymbol}}{{localCurrencyAmount}}",
       "lineItemAmountDisplay": "{{localCurrencySymbol}}{{localCurrencyAmount}} ({{cryptoAmount}} {{cryptoSymbol}})",

src/analytics/Events.tsx

@@ -683,4 +683,5 @@ export enum EarnEvents {
   earn_pool_info_tap_withdraw = 'earn_pool_info_tap_withdraw',
   earn_pool_info_tap_deposit = 'earn_pool_info_tap_deposit',
   earn_pool_info_tap_safety_details = 'earn_pool_info_tap_safety_details',
+  earn_select_withdraw_type = 'earn_select_withdraw_type',
 }

src/analytics/Properties.tsx

@@ -54,7 +54,12 @@ import { ErrorMessages } from 'src/app/ErrorMessages'
 import { AddAssetsActionType } from 'src/components/AddAssetsBottomSheet'
 import { TokenPickerOrigin } from 'src/components/TokenBottomSheet'
 import { DappSection } from 'src/dapps/types'
-import { BeforeDepositActionName, EarnEnterMode, SerializableRewardsInfo } from 'src/earn/types'
+import {
+  BeforeDepositActionName,
+  EarnEnterMode,
+  SerializableRewardsInfo,
+  WithdrawActionName,
+} from 'src/earn/types'
 import { ProviderSelectionAnalyticsData } from 'src/fiatExchanges/types'
 import { CICOFlow, FiatExchangeFlow, PaymentMethod } from 'src/fiatExchanges/utils'
 import { HomeActionName, NotificationBannerCTATypes, NotificationType } from 'src/home/types'
@@ -1642,6 +1647,7 @@ interface EarnEventsProperties {
   [EarnEvents.earn_pool_info_tap_safety_details]: EarnCommonProperties & {
     action: 'expand' | 'collapse'
   }
+  [EarnEvents.earn_select_withdraw_type]: EarnCommonProperties & { type: WithdrawActionName }
 }
 
 export type AnalyticsPropertiesList = AppEventsProperties &

src/analytics/docs.ts

@@ -610,6 +610,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [EarnEvents.earn_pool_info_tap_withdraw]: `When the user taps the withdraw button on the pool info screen`,
   [EarnEvents.earn_pool_info_tap_deposit]: `When the user taps the deposit button on the pool info screen`,
   [EarnEvents.earn_pool_info_tap_safety_details]: `When the user taps the view more/less details on the safety card on the pool info screen`,
+  [EarnEvents.earn_select_withdraw_type]: `When a user selects a withdrawal type on the withdraw bottom sheet`,
 
   // Legacy event docs
   //  The below events had docs, but are no longer produced by the latest app version.

src/earn/ActionCard.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import Touchable from 'src/components/Touchable'
+import { BeforeDepositAction, WithdrawAction } from 'src/earn/types'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+
+export function ActionCard({ action }: { action: BeforeDepositAction | WithdrawAction }) {
+  return (
+    <Touchable
+      style={styles.touchable}
+      key={action.name}
+      borderRadius={20}
+      onPress={action.onPress}
+      testID={`Earn/ActionCard/${action.name}`}
+    >
+      <>
+        <action.iconComponent color={Colors.black} />
+        <View style={styles.cardContainer}>
+          <Text style={styles.actionTitle}>{action.title}</Text>
+          <Text style={styles.actionDetails}>{action.details}</Text>
+        </View>
+      </>
+    </Touchable>
+  )
+}
+
+const styles = StyleSheet.create({
+  actionTitle: {
+    ...typeScale.labelMedium,
+    color: Colors.black,
+  },
+  actionDetails: {
+    ...typeScale.bodySmall,
+    color: Colors.black,
+  },
+  touchable: {
+    backgroundColor: Colors.gray1,
+    padding: Spacing.Regular16,
+    flexDirection: 'row',
+    gap: Spacing.Regular16,
+    alignItems: 'center',
+  },
+  cardContainer: {
+    flex: 1,
+  },
+})

src/earn/poolInfoScreen/BeforeDepositBottomSheet.tsx

@@ -5,8 +5,8 @@ import AppAnalytics from 'src/analytics/AppAnalytics'
 import { EarnEvents } from 'src/analytics/Events'
 import { EarnCommonProperties, TokenProperties } from 'src/analytics/Properties'
 import BottomSheet, { BottomSheetModalRefType } from 'src/components/BottomSheet'
-import Touchable from 'src/components/Touchable'
-import { BeforeDepositAction, BeforeDepositActionName } from 'src/earn/types'
+import { ActionCard } from 'src/earn/ActionCard'
+import { BeforeDepositAction } from 'src/earn/types'
 import { ExternalExchangeProvider } from 'src/fiatExchanges/ExternalExchanges'
 import { CICOFlow } from 'src/fiatExchanges/utils'
 import QuickActionsAdd from 'src/icons/quick-actions/Add'
@@ -25,26 +25,6 @@ import { Spacing } from 'src/styles/styles'
 import { TokenBalance } from 'src/tokens/slice'
 import { getTokenAnalyticsProps } from 'src/tokens/utils'
 
-function ActionCard({ action }: { action: BeforeDepositAction }) {
-  return (
-    <Touchable
-      style={styles.touchable}
-      key={action.name}
-      borderRadius={20}
-      onPress={action.onPress}
-      testID={`Earn/BeforeDepositBottomSheet/${action.name}`}
-    >
-      <>
-        <action.iconComponent color={Colors.black} />
-        <View style={styles.cardContainer}>
-          <Text style={styles.actionTitle}>{action.title}</Text>
-          <Text style={styles.actionDetails}>{action.details}</Text>
-        </View>
-      </>
-    </Touchable>
-  )
-}
-
 function AddAction({
   token,
   forwardedRef,
@@ -56,8 +36,8 @@ function AddAction({
 }) {
   const { t } = useTranslation()
 
-  const action = {
-    name: BeforeDepositActionName.Add,
+  const action: BeforeDepositAction = {
+    name: 'Add',
     title: t('earnFlow.beforeDepositBottomSheet.action.add'),
     details: t('earnFlow.beforeDepositBottomSheet.action.addDescription', {
       tokenSymbol: token.symbol,
@@ -66,7 +46,7 @@ function AddAction({
     iconComponent: QuickActionsAdd,
     onPress: () => {
       AppAnalytics.track(EarnEvents.earn_before_deposit_action_press, {
-        action: BeforeDepositActionName.Add,
+        action: 'Add',
         ...analyticsProps,
       })
 
@@ -94,8 +74,8 @@ function TransferAction({
 }) {
   const { t } = useTranslation()
 
-  const action = {
-    name: BeforeDepositActionName.Transfer,
+  const action: BeforeDepositAction = {
+    name: 'Transfer',
     title: t('earnFlow.beforeDepositBottomSheet.action.transfer'),
     details: t('earnFlow.beforeDepositBottomSheet.action.transferDescription', {
       tokenSymbol: token.symbol,
@@ -104,7 +84,7 @@ function TransferAction({
     iconComponent: QuickActionsSend,
     onPress: () => {
       AppAnalytics.track(EarnEvents.earn_before_deposit_action_press, {
-        action: BeforeDepositActionName.Transfer,
+        action: 'Transfer',
         ...analyticsProps,
       })
 
@@ -126,16 +106,16 @@ function CrossChainSwapAction({
 }) {
   const { t } = useTranslation()
 
-  const action = {
-    name: BeforeDepositActionName.CrossChainSwap,
+  const action: BeforeDepositAction = {
+    name: 'CrossChainSwap',
     title: t('earnFlow.beforeDepositBottomSheet.action.crossChainSwap'),
     details: t('earnFlow.beforeDepositBottomSheet.action.crossChainSwapDescription', {
       tokenSymbol: token.symbol,
     }),
     iconComponent: SwapArrows,
     onPress: () => {
       AppAnalytics.track(EarnEvents.earn_before_deposit_action_press, {
-        action: BeforeDepositActionName.CrossChainSwap,
+        action: 'CrossChainSwap',
         ...analyticsProps,
       })
 
@@ -157,8 +137,8 @@ function SwapAction({
 }) {
   const { t } = useTranslation()
 
-  const action = {
-    name: BeforeDepositActionName.Swap,
+  const action: BeforeDepositAction = {
+    name: 'Swap',
     title: t('earnFlow.beforeDepositBottomSheet.action.swap'),
     details: t('earnFlow.beforeDepositBottomSheet.action.swapDescription', {
       tokenSymbol: token.symbol,
@@ -167,7 +147,7 @@ function SwapAction({
     iconComponent: SwapArrows,
     onPress: () => {
       AppAnalytics.track(EarnEvents.earn_before_deposit_action_press, {
-        action: BeforeDepositActionName.Swap,
+        action: 'Swap',
         ...analyticsProps,
       })
 
@@ -191,8 +171,8 @@ function SwapAndDepositAction({
 }) {
   const { t } = useTranslation()
 
-  const action = {
-    name: BeforeDepositActionName.SwapAndDeposit,
+  const action: BeforeDepositAction = {
+    name: 'SwapAndDeposit',
     title: t('earnFlow.beforeDepositBottomSheet.action.swapAndDeposit'),
     details: t('earnFlow.beforeDepositBottomSheet.action.swapAndDepositDescription', {
       tokenSymbol: token.symbol,
@@ -201,7 +181,7 @@ function SwapAndDepositAction({
     iconComponent: SwapAndDeposit,
     onPress: () => {
       AppAnalytics.track(EarnEvents.earn_before_deposit_action_press, {
-        action: BeforeDepositActionName.SwapAndDeposit,
+        action: 'SwapAndDeposit',
         ...analyticsProps,
       })
 
@@ -311,10 +291,6 @@ const styles = StyleSheet.create({
     gap: Spacing.Regular16,
     marginVertical: Spacing.Thick24,
   },
-  actionTitle: {
-    ...typeScale.labelMedium,
-    color: Colors.black,
-  },
   actionDetails: {
     ...typeScale.bodySmall,
     color: Colors.black,
@@ -323,14 +299,4 @@ const styles = StyleSheet.create({
     ...typeScale.titleSmall,
     color: Colors.black,
   },
-  touchable: {
-    backgroundColor: Colors.gray1,
-    padding: Spacing.Regular16,
-    flexDirection: 'row',
-    gap: Spacing.Regular16,
-    alignItems: 'center',
-  },
-  cardContainer: {
-    flex: 1,
-  },
 })