Removal of unnecessary code from deposit flow

dapp/src/components/TransactionModal/ActionFormModal.tsx

@@ -1,15 +1,6 @@
 import React, { useCallback, useState } from "react"
+import { Box, ModalBody, ModalCloseButton, ModalHeader } from "@chakra-ui/react"
 import {
-  ModalBody,
-  Tabs,
-  TabList,
-  Tab,
-  TabPanels,
-  TabPanel,
-  ModalCloseButton,
-} from "@chakra-ui/react"
-import {
-  useModalFlowContext,
   useStakeFlowContext,
   useTransactionContext,
   useWalletContext,
@@ -20,16 +11,36 @@ import { logPromiseFailure } from "#/utils"
 import StakeFormModal from "./ActiveStakingStep/StakeFormModal"
 import UnstakeFormModal from "./ActiveUnstakingStep/UnstakeFormModal"
 
-const TABS = Object.values(ACTION_FLOW_TYPES)
+const FORM_DATA: Record<
+  ActionFlowType,
+  {
+    header: string
+    FormComponent: (
+      props: React.ComponentProps<
+        typeof StakeFormModal | typeof UnstakeFormModal
+      >,
+    ) => React.ReactNode
+  }
+> = {
+  stake: {
+    header: "Deposit",
+    FormComponent: StakeFormModal,
+  },
+  unstake: {
+    header: "Withdraw",
+    FormComponent: UnstakeFormModal,
+  },
+}
 
-function ActionFormModal({ defaultType }: { defaultType: ActionFlowType }) {
+function ActionFormModal({ type }: { type: ActionFlowType }) {
   const { btcAccount, ethAccount } = useWalletContext()
-  const { type, setType } = useModalFlowContext()
   const { setTokenAmount } = useTransactionContext()
   const { initStake } = useStakeFlowContext()
 
   const [isLoading, setIsLoading] = useState(false)
 
+  const { header, FormComponent } = FORM_DATA[type]
+
   const handleInitStake = useCallback(async () => {
     const btcAddress = btcAccount?.address
     const ethAddress = ethAccount?.address
@@ -67,34 +78,11 @@ function ActionFormModal({ defaultType }: { defaultType: ActionFlowType }) {
   return (
     <>
       {!isLoading && <ModalCloseButton />}
+      <ModalHeader>{header}</ModalHeader>
       <ModalBody>
-        <Tabs
-          w="100%"
-          variant="underline"
-          defaultIndex={TABS.indexOf(defaultType)}
-        >
-          <TabList pb={6}>
-            {TABS.map((actionFlowType) => (
-              <Tab
-                key={actionFlowType}
-                w="50%"
-                pb={4}
-                onClick={() => setType(actionFlowType)}
-                isDisabled={actionFlowType !== type && isLoading}
-              >
-                {actionFlowType}
-              </Tab>
-            ))}
-          </TabList>
-          <TabPanels>
-            <TabPanel>
-              <StakeFormModal onSubmitForm={handleSubmitFormWrapper} />
-            </TabPanel>
-            <TabPanel>
-              <UnstakeFormModal onSubmitForm={handleSubmitFormWrapper} />
-            </TabPanel>
-          </TabPanels>
-        </Tabs>
+        <Box w="100%">
+          <FormComponent onSubmitForm={handleSubmitFormWrapper} />
+        </Box>
       </ModalBody>
     </>
   )

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

@@ -1,17 +1,11 @@
 import React from "react"
 import { ACTION_FLOW_STEPS_TYPES, ACTION_FLOW_TYPES } from "#/types"
-import SignMessageModal from "./SignMessageModal"
 import DepositBTCModal from "./DepositBTCModal"
-import OverviewModal from "./OverviewModal"
 
 const STEPS = ACTION_FLOW_STEPS_TYPES[ACTION_FLOW_TYPES.STAKE]
 
 export function ActiveStakingStep({ activeStep }: { activeStep: number }) {
   switch (activeStep) {
-    case STEPS.OVERVIEW:
-      return <OverviewModal />
-    case STEPS.SIGN_MESSAGE:
-      return <SignMessageModal />
     case STEPS.DEPOSIT_BTC:
       return <DepositBTCModal />
     default: {

dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx

@@ -1,18 +1,13 @@
-import React, { useCallback, useEffect } from "react"
+import React, { useCallback } from "react"
 import { useExecuteFunction, useModalFlowContext } from "#/hooks"
 import { PROCESS_STATUSES } from "#/types"
 import { Button, ModalBody, ModalFooter, ModalHeader } from "@chakra-ui/react"
 import { TextMd } from "#/components/shared/Typography"
 import { logPromiseFailure } from "#/utils"
-import { ReceiveSTBTCAlert } from "#/components/shared/alerts"
 
 export default function SignMessageModal() {
   const { setStatus } = useModalFlowContext()
 
-  useEffect(() => {
-    setStatus(PROCESS_STATUSES.PENDING)
-  }, [setStatus])
-
   const onSignMessageSuccess = useCallback(() => {
     setStatus(PROCESS_STATUSES.SUCCEEDED)
   }, [setStatus])
@@ -46,7 +41,6 @@ export default function SignMessageModal() {
           You will sign a gas-free Ethereum message to indicate the address
           where you'd like to get your stBTC liquid staking token.
         </TextMd>
-        <ReceiveSTBTCAlert />
       </ModalBody>
       <ModalFooter pt={10}>
         <Button size="lg" width="100%" onClick={handleSignMessageWrapper}>

dapp/src/components/TransactionModal/ModalContentWrapper.tsx

@@ -7,26 +7,23 @@ import {
   useWalletContext,
 } from "#/hooks"
 import { BitcoinIcon, EthereumIcon } from "#/assets/icons"
-import { ActionFlowType, PROCESS_STATUSES } from "#/types"
+import { PROCESS_STATUSES } from "#/types"
 import { isSupportedBTCAddressType } from "#/utils"
 import ActionFormModal from "./ActionFormModal"
 import ErrorModal from "./ErrorModal"
 import LoadingModal from "./LoadingModal"
 import MissingAccountModal from "./MissingAccountModal"
-import ResumeModal from "./ResumeModal"
 import SuccessModal from "./SuccessModal"
 
 export default function ModalContentWrapper({
-  defaultType,
   children,
 }: {
-  defaultType: ActionFlowType
   children: React.ReactNode
 }) {
   const { btcAccount, ethAccount } = useWalletContext()
   const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount()
   const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount()
-  const { type, status, onClose, onResume } = useModalFlowContext()
+  const { type, status } = useModalFlowContext()
   const { tokenAmount } = useTransactionContext()
 
   if (!btcAccount || !isSupportedBTCAddressType(btcAccount.address))
@@ -47,10 +44,7 @@ export default function ModalContentWrapper({
       />
     )
 
-  if (!tokenAmount) return <ActionFormModal defaultType={defaultType} />
-
-  if (status === PROCESS_STATUSES.PAUSED)
-    return <ResumeModal onClose={onClose} onResume={onResume} />
+  if (!tokenAmount) return <ActionFormModal type={type} />
 
   if (status === PROCESS_STATUSES.LOADING) return <LoadingModal />
 

dapp/src/components/TransactionModal/SuccessModal.tsx

@@ -46,7 +46,6 @@ export default function SuccessModal({ type, tokenAmount }: SuccessModalProps) {
             />
           </Box>
         </VStack>
-        <ReceiveSTBTCAlert />
       </ModalBody>
       <ModalFooter mt={4}>
         <Button size="lg" width="100%" variant="outline" onClick={onClose}>