feat(earn): redux setup for withdraw (#5429)

### Description

Also changed from started -> loading to be consistent with other slices

### Test plan

Unit tests

### Related issues

- Part of ACT-1180

### Backwards compatibility

Yes

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [x] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

src/earn/EarnDepositBottomSheet.test.tsx

@@ -181,7 +181,7 @@ describe('EarnDepositBottomSheet', () => {
   it('shows loading state and buttons are disabled when deposit is submitted', () => {
     const store = createMockStore({
       tokens: { tokenBalances: mockTokenBalances },
-      earn: { depositStatus: 'started' },
+      earn: { depositStatus: 'loading' },
     })
     const { getByTestId } = render(
       <Provider store={store}>

src/earn/EarnDepositBottomSheet.tsx

@@ -46,7 +46,7 @@ export default function EarnDepositBottomSheet({
   const { t } = useTranslation()
   const dispatch = useDispatch()
   const depositStatus = useSelector(depositStatusSelector)
-  const transactionSubmitted = depositStatus === 'started'
+  const transactionSubmitted = depositStatus === 'loading'
 
   const { estimatedFeeAmount, feeCurrency } = getFeeCurrencyAndAmounts(preparedTransaction)
 

src/earn/saga.test.ts

@@ -5,8 +5,15 @@ import { StaticProvider, dynamic, throwError } from 'redux-saga-test-plan/provid
 import erc20 from 'src/abis/IERC20'
 import { EarnEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
-import { depositSubmitSaga } from 'src/earn/saga'
-import { depositCancel, depositError, depositStart, depositSuccess } from 'src/earn/slice'
+import { depositSubmitSaga, withdrawSubmitSaga } from 'src/earn/saga'
+import {
+  depositCancel,
+  depositError,
+  depositStart,
+  depositSuccess,
+  withdrawStart,
+  withdrawSuccess,
+} from 'src/earn/slice'
 import { navigateHome } from 'src/navigator/NavigationService'
 import { CANCELLED_PIN_INPUT } from 'src/pincode/authentication'
 import { Network, NetworkId, TokenTransactionTypeV2 } from 'src/transactions/types'
@@ -313,3 +320,21 @@ describe('depositSubmitSaga', () => {
     })
   })
 })
+
+describe('withdrawSubmitSaga', () => {
+  it('navigates home and fires success event', async () => {
+    await expectSaga(withdrawSubmitSaga, {
+      type: withdrawStart.type,
+      payload: {
+        amount: '100',
+        tokenId: mockArbUsdcTokenId,
+        preparedTransactions: [],
+        rewards: [],
+      },
+    })
+      .put(withdrawSuccess())
+      .run()
+
+    expect(navigateHome).toHaveBeenCalled()
+  })
+})

src/earn/saga.ts

@@ -3,8 +3,15 @@ import BigNumber from 'bignumber.js'
 import erc20 from 'src/abis/IERC20'
 import { EarnEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
-import { depositCancel, depositError, depositStart, depositSuccess } from 'src/earn/slice'
-import { DepositInfo } from 'src/earn/types'
+import {
+  depositCancel,
+  depositError,
+  depositStart,
+  depositSuccess,
+  withdrawStart,
+  withdrawSuccess,
+} from 'src/earn/slice'
+import { DepositInfo, WithdrawInfo } from 'src/earn/types'
 import { navigateHome } from 'src/navigator/NavigationService'
 import { CANCELLED_PIN_INPUT } from 'src/pincode/authentication'
 import { vibrateError } from 'src/styles/hapticFeedback'
@@ -174,6 +181,13 @@ export function* depositSubmitSaga(action: PayloadAction<DepositInfo>) {
   }
 }
 
+export function* withdrawSubmitSaga(action: PayloadAction<WithdrawInfo>) {
+  // TODO: submit the tx
+  navigateHome()
+  yield* put(withdrawSuccess())
+}
+
 export function* earnSaga() {
   yield* takeLeading(depositStart.type, safely(depositSubmitSaga))
+  yield* takeLeading(withdrawStart.type, safely(withdrawSubmitSaga))
 }

src/earn/slice.test.ts

@@ -1,4 +1,13 @@
-import reducer, { depositCancel, depositError, depositStart, depositSuccess } from './slice'
+import reducer, {
+  depositCancel,
+  depositError,
+  depositStart,
+  depositSuccess,
+  withdrawCancel,
+  withdrawError,
+  withdrawStart,
+  withdrawSuccess,
+} from './slice'
 
 describe('Earn Slice', () => {
   it('should handle deposit start', () => {
@@ -7,7 +16,7 @@ describe('Earn Slice', () => {
       depositStart({ amount: '100', tokenId: 'tokenId', preparedTransactions: [] })
     )
 
-    expect(updatedState).toHaveProperty('depositStatus', 'started')
+    expect(updatedState).toHaveProperty('depositStatus', 'loading')
   })
 
   it('should handle deposit success', () => {
@@ -27,4 +36,31 @@ describe('Earn Slice', () => {
 
     expect(updatedState).toHaveProperty('depositStatus', 'idle')
   })
+
+  it('should handle withdraw start', () => {
+    const updatedState = reducer(
+      undefined,
+      withdrawStart({ amount: '100', tokenId: 'tokenId', preparedTransactions: [], rewards: [] })
+    )
+
+    expect(updatedState).toHaveProperty('withdrawStatus', 'loading')
+  })
+
+  it('should handle withdraw success', () => {
+    const updatedState = reducer(undefined, withdrawSuccess())
+
+    expect(updatedState).toHaveProperty('withdrawStatus', 'success')
+  })
+
+  it('should handle withdraw error', () => {
+    const updatedState = reducer(undefined, withdrawError())
+
+    expect(updatedState).toHaveProperty('withdrawStatus', 'error')
+  })
+
+  it('should handle withdraw cancel', () => {
+    const updatedState = reducer(undefined, withdrawCancel())
+
+    expect(updatedState).toHaveProperty('withdrawStatus', 'idle')
+  })
 })

src/earn/slice.ts

@@ -1,22 +1,26 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit'
 import { REHYDRATE, RehydrateAction } from 'redux-persist'
-import { DepositInfo } from 'src/earn/types'
+import { DepositInfo, WithdrawInfo } from 'src/earn/types'
 import { getRehydratePayload } from 'src/redux/persist-helper'
 
+type Status = 'idle' | 'loading' | 'success' | 'error'
+
 interface State {
-  depositStatus: 'idle' | 'started' | 'success' | 'error'
+  depositStatus: Status
+  withdrawStatus: Status
 }
 
 const initialState: State = {
   depositStatus: 'idle',
+  withdrawStatus: 'idle',
 }
 
 export const slice = createSlice({
   name: 'earn',
   initialState,
   reducers: {
     depositStart: (state, action: PayloadAction<DepositInfo>) => {
-      state.depositStatus = 'started'
+      state.depositStatus = 'loading'
     },
     depositSuccess: (state) => {
       state.depositStatus = 'success'
@@ -27,16 +31,38 @@ export const slice = createSlice({
     depositCancel: (state) => {
       state.depositStatus = 'idle'
     },
+    withdrawStart: (state, action: PayloadAction<WithdrawInfo>) => {
+      state.withdrawStatus = 'loading'
+    },
+    withdrawSuccess: (state) => {
+      state.withdrawStatus = 'success'
+    },
+    withdrawError: (state) => {
+      state.withdrawStatus = 'error'
+    },
+    withdrawCancel: (state) => {
+      state.withdrawStatus = 'idle'
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(REHYDRATE, (state, action: RehydrateAction) => ({
       ...state,
       ...getRehydratePayload(action, 'earn'),
       depositStatus: 'idle',
+      withdrawStatus: 'idle',
     }))
   },
 })
 
-export const { depositStart, depositSuccess, depositError, depositCancel } = slice.actions
+export const {
+  depositStart,
+  depositSuccess,
+  depositError,
+  depositCancel,
+  withdrawStart,
+  withdrawSuccess,
+  withdrawError,
+  withdrawCancel,
+} = slice.actions
 
 export default slice.reducer

src/earn/types.ts

@@ -11,3 +11,13 @@ export interface RewardsInfo {
   amount: string
   tokenInfo: TokenBalance
 }
+
+export interface WithdrawInfo {
+  amount: string
+  tokenId: string
+  preparedTransactions: SerializableTransactionRequest[]
+  rewards: {
+    amount: string
+    tokenId: string
+  }[]
+}

src/redux/migrations.ts

@@ -1792,4 +1792,11 @@ export const migrations = {
       introHasBeenDismissed: false,
     },
   }),
+  216: (state: any) => ({
+    ...state,
+    earn: {
+      depositStatus: 'idle',
+      withdrawStatus: 'idle',
+    },
+  }),
 }

src/redux/store.test.ts

@@ -98,7 +98,7 @@ describe('store state', () => {
       {
         "_persist": {
           "rehydrated": true,
-          "version": 215,
+          "version": 216,
         },
         "account": {
           "acceptedTerms": false,
@@ -189,6 +189,7 @@ describe('store state', () => {
         },
         "earn": {
           "depositStatus": "idle",
+          "withdrawStatus": "idle",
         },
         "escrow": {
           "isReclaiming": false,

src/redux/store.ts

@@ -21,7 +21,7 @@ const persistConfig: PersistConfig<ReducersRootState> = {
   key: 'root',
   // default is -1, increment as we make migrations
   // See https://github.com/valora-inc/wallet/tree/main/WALLET.md#redux-state-migration
-  version: 215,
+  version: 216,
   keyPrefix: `reduxStore-`, // the redux-persist default is `persist:` which doesn't work with some file systems.
   storage: FSStorage(),
   blacklist: ['networkInfo', 'alert', 'imports', 'keylessBackup', 'jumpstart'],

test/RootStateSchema.json

@@ -4560,17 +4560,15 @@
             "additionalProperties": false,
             "properties": {
                 "depositStatus": {
-                    "enum": [
-                        "error",
-                        "idle",
-                        "started",
-                        "success"
-                    ],
-                    "type": "string"
+                    "$ref": "#/definitions/Status_1"
+                },
+                "withdrawStatus": {
+                    "$ref": "#/definitions/Status_1"
                 }
             },
             "required": [
-                "depositStatus"
+                "depositStatus",
+                "withdrawStatus"
             ],
             "type": "object"
         },
@@ -4953,6 +4951,15 @@
             ],
             "type": "string"
         },
+        "Status_1": {
+            "enum": [
+                "error",
+                "idle",
+                "loading",
+                "success"
+            ],
+            "type": "string"
+        },
         "StoredTokenBalance": {
             "additionalProperties": false,
             "properties": {

test/schemas.ts

@@ -3335,6 +3335,18 @@ export const v215Schema = {
   },
 }
 
+export const v216Schema = {
+  ...v215Schema,
+  _persist: {
+    ...v215Schema._persist,
+    version: 216,
+  },
+  earn: {
+    depositStatus: 'idle',
+    withdrawStatus: 'idle',
+  },
+}
+
 export function getLatestSchema(): Partial<RootState> {
-  return v215Schema as Partial<RootState>
+  return v216Schema as Partial<RootState>
 }