feat(earn): Add earn withdraw bottom sheet

locales/base/translation.json

@@ -2704,6 +2704,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

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

src/analytics/Properties.tsx

@@ -1631,6 +1631,7 @@ interface EarnEventsProperties {
     hasTokensOnSameNetwork: boolean
     hasTokensOnOtherNetworks: boolean
   }
+  [EarnEvents.earn_select_withdraw_type]: { type: 'partialWithdraw' | 'claim' | 'exit' }
 }
 
 export type AnalyticsPropertiesList = AppEventsProperties &

src/analytics/docs.ts

@@ -609,6 +609,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [EarnEvents.earn_pool_info_tap_info_icon]: `When the user taps an info icon on the earn pool info screen`,
   [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_select_withdraw_type]: `When a use selects a withdraw 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/BeforeDepositBottomSheet.tsx

@@ -6,7 +6,7 @@ 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 { BeforeDepositAction, BeforeDepositActionName, WithdrawAction } 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,14 +25,14 @@ import { Spacing } from 'src/styles/styles'
 import { TokenBalance } from 'src/tokens/slice'
 import { getTokenAnalyticsProps } from 'src/tokens/utils'
 
-function ActionCard({ action }: { action: BeforeDepositAction }) {
+export function ActionCard({ action }: { action: BeforeDepositAction | WithdrawAction }) {
   return (
     <Touchable
       style={styles.touchable}
       key={action.name}
       borderRadius={20}
       onPress={action.onPress}
-      testID={`Earn/BeforeDepositBottomSheet/${action.name}`}
+      testID={`Earn/ActionCard/${action.name}`}
     >
       <>
         <action.iconComponent color={Colors.black} />