Move TransactionContext to redux store

dapp/src/components/TransactionModal/ActionFormModal.tsx

@@ -1,15 +1,12 @@
 import React, { useCallback, useState } from "react"
 import { Box, ModalBody, ModalCloseButton, ModalHeader } from "@chakra-ui/react"
-import {
-  useStakeFlowContext,
-  useTransactionContext,
-  useWalletContext,
-} from "#/hooks"
+import { useAppDispatch, useStakeFlowContext, useWalletContext } from "#/hooks"
 import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types"
 import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
 import { logPromiseFailure } from "#/utils"
 import StakeFormModal from "./ActiveStakingStep/StakeFormModal"
 import UnstakeFormModal from "./ActiveUnstakingStep/UnstakeFormModal"
+import { setTokenAmount } from "#/store/action-flow"
 
 const FORM_DATA: Record<
   ActionFlowType,
@@ -34,8 +31,8 @@ const FORM_DATA: Record<
 
 function ActionFormModal({ type }: { type: ActionFlowType }) {
   const { btcAccount, ethAccount } = useWalletContext()
-  const { setTokenAmount } = useTransactionContext()
   const { initStake } = useStakeFlowContext()
+  const dispatch = useAppDispatch()
 
   const [isLoading, setIsLoading] = useState(false)
 
@@ -59,14 +56,14 @@ function ActionFormModal({ type }: { type: ActionFlowType }) {
         // TODO: Init unstake flow
         if (type === ACTION_FLOW_TYPES.STAKE) await handleInitStake()
 
-        setTokenAmount({ amount: values.amount, currency: "bitcoin" })
+        dispatch(setTokenAmount({ amount: values.amount, currency: "bitcoin" }))
       } catch (error) {
         console.error(error)
       } finally {
         setIsLoading(false)
       }
     },
-    [handleInitStake, setTokenAmount, type],
+    [dispatch, handleInitStake, type],
   )
 
   const handleSubmitFormWrapper = useCallback(

dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback } from "react"
 import {
+  useActionFlowTokenAmount,
   useDepositBTCTransaction,
   useDepositTelemetry,
   useExecuteFunction,
   useStakeFlowContext,
   useToast,
-  useTransactionContext,
   useWalletContext,
 } from "#/hooks"
 import { logPromiseFailure } from "#/utils"
@@ -24,7 +24,7 @@ const TOAST = TOASTS[TOAST_ID]
 
 export default function DepositBTCModal() {
   const { ethAccount } = useWalletContext()
-  const { tokenAmount } = useTransactionContext()
+  const tokenAmount = useActionFlowTokenAmount()
   const { btcAddress, depositReceipt, stake } = useStakeFlowContext()
   const depositTelemetry = useDepositTelemetry()
   const { closeToast, openToast } = useToast()

dapp/src/components/TransactionModal/ModalContentWrapper.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 import {
   useActionFlowStatus,
+  useActionFlowTokenAmount,
   useActionFlowType,
   useRequestBitcoinAccount,
   useRequestEthereumAccount,
-  useTransactionContext,
   useWalletContext,
 } from "#/hooks"
 import { BitcoinIcon, EthereumIcon } from "#/assets/icons"
@@ -26,7 +26,7 @@ export default function ModalContentWrapper({
   const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount()
   const status = useActionFlowStatus()
   const type = useActionFlowType()
-  const { tokenAmount } = useTransactionContext()
+  const tokenAmount = useActionFlowTokenAmount()
 
   if (!btcAccount || !isSupportedBTCAddressType(btcAccount.address))
     return (

dapp/src/components/TransactionModal/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react"
-import { StakeFlowProvider, TransactionContextProvider } from "#/contexts"
+import { StakeFlowProvider } from "#/contexts"
 import { useAppDispatch, useSidebar } from "#/hooks"
 import { ActionFlowType, BaseModalProps } from "#/types"
 import { ModalCloseButton } from "@chakra-ui/react"
@@ -33,14 +33,12 @@ function TransactionModalBase({ type }: TransactionModalProps) {
   }, [closeSidebar, openSideBar])
 
   return (
-    <TransactionContextProvider>
-      <StakeFlowProvider>
-        <ModalContentWrapper>
-          <ModalCloseButton />
-          <ActiveFlowStep />
-        </ModalContentWrapper>
-      </StakeFlowProvider>
-    </TransactionContextProvider>
+    <StakeFlowProvider>
+      <ModalContentWrapper>
+        <ModalCloseButton />
+        <ActiveFlowStep />
+      </ModalContentWrapper>
+    </StakeFlowProvider>
   )
 }
 

dapp/src/contexts/index.tsx

@@ -3,5 +3,4 @@ export * from "./WalletApiReactTransportProvider"
 export * from "./LedgerWalletAPIProvider"
 export * from "./DocsDrawerContext"
 export * from "./SidebarContext"
-export * from "./TransactionContext"
 export * from "./StakeFlowContext"

dapp/src/hooks/index.ts

@@ -8,7 +8,6 @@ export * from "./useRequestEthereumAccount"
 export * from "./useWalletContext"
 export * from "./useSidebar"
 export * from "./useDocsDrawer"
-export * from "./useTransactionContext"
 export * from "./useTransactionDetails"
 export * from "./useDepositBTCTransaction"
 export * from "./useTransactionHistoryTable"

dapp/src/hooks/store/index.ts

@@ -6,5 +6,6 @@ export * from "./useMinDepositAmount"
 export * from "./useActionFlowType"
 export * from "./useActionFlowStatus"
 export * from "./useActionFlowActiveStep"
+export * from "./useActionFlowTokenAmount"
 // TODO: Rename when the old hook is deleted.
 export { useActivities as useActivitiesNEW } from "./useActivities"

dapp/src/hooks/store/useActionFlowTokenAmount.ts

@@ -0,0 +1,6 @@
+import { selectActionFlowTokenAmount } from "#/store/action-flow"
+import { useAppSelector } from "./useAppSelector"
+
+export function useActionFlowTokenAmount() {
+  return useAppSelector(selectActionFlowTokenAmount)
+}

dapp/src/store/action-flow/actionFlowSelectors.ts

@@ -1,4 +1,4 @@
-import { ActionFlowType, ProcessStatus } from "#/types"
+import { ActionFlowType, ProcessStatus, TokenAmount } from "#/types"
 import { RootState } from ".."
 
 export const selectActionFlowType = (state: RootState): ActionFlowType =>
@@ -9,3 +9,7 @@ export const selectActionFlowActiveStep = (state: RootState): number =>
 
 export const selectActionFlowStatus = (state: RootState): ProcessStatus =>
   state.actionFlow.status
+
+export const selectActionFlowTokenAmount = (
+  state: RootState,
+): TokenAmount | undefined => state.actionFlow.tokenAmount

dapp/src/store/action-flow/actionFlowSlice.ts

@@ -1,10 +1,16 @@
-import { ActionFlowType, PROCESS_STATUSES, ProcessStatus } from "#/types"
+import {
+  ActionFlowType,
+  PROCESS_STATUSES,
+  ProcessStatus,
+  TokenAmount,
+} from "#/types"
 import { PayloadAction, createSlice } from "@reduxjs/toolkit"
 
 type ActionFlowState = {
   type: ActionFlowType
   activeStep: number
   status: ProcessStatus
+  tokenAmount?: TokenAmount
 }
 
 const initialState: ActionFlowState = {
@@ -26,6 +32,9 @@ export const actionFlowSlice = createSlice({
     setStatus(state, action: PayloadAction<ProcessStatus>) {
       state.status = action.payload
     },
+    setTokenAmount(state, action: PayloadAction<TokenAmount | undefined>) {
+      state.tokenAmount = action.payload
+    },
     goNextStep(state) {
       state.activeStep += 1
     },
@@ -37,5 +46,5 @@ export const actionFlowSlice = createSlice({
   },
 })
 
-export const { setType, setStatus, goNextStep, resetState } =
+export const { setType, setStatus, setTokenAmount, goNextStep, resetState } =
   actionFlowSlice.actions