Resuming deposit modal

dapp/src/components/Modals/Staking/index.tsx

@@ -7,18 +7,21 @@ import SignMessage from "./SignMessage"
 import DepositBTC from "./DepositBTC"
 
 function ActiveStakingStep() {
-  const { activeStep } = useModalFlowContext()
+  const { activeStep, startTransactionProcess, endTransactionProcess } =
+    useModalFlowContext()
 
   switch (activeStep) {
     case 1:
       return <ActionForm action="stake" />
     case 2:
       return <Overview />
     case 3:
+      startTransactionProcess()
       return <SignMessage />
     case 4:
       return <DepositBTC />
     default:
+      endTransactionProcess()
       return null
   }
 }

dapp/src/components/Modals/Support/ResumeModal.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import {
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  HStack,
+} from "@chakra-ui/react"
+
+import Spinner from "#/components/shared/Spinner"
+import { Pause } from "#/static/icons"
+import { TextMd } from "#/components/shared/Typography"
+
+export default function ResumeModal({
+  onResume,
+  onClose,
+}: {
+  onResume: () => void
+  onClose: () => void
+}) {
+  return (
+    <>
+      <ModalHeader>Paused</ModalHeader>
+      <ModalBody textAlign="start" py={6} mx={3}>
+        <HStack position="relative" justifyContent="center">
+          <Spinner size="xl" />
+          <Pause position="absolute" boxSize={6} />
+        </HStack>
+
+        <TextMd>Are your sure you want to cancel?</TextMd>
+      </ModalBody>
+      <ModalFooter flexDirection="column" gap={2}>
+        <Button size="lg" width="100%" onClick={onResume}>
+          Resume deposit
+        </Button>
+        <Button size="lg" width="100%" variant="outline" onClick={onClose}>
+          Yes, cancel
+        </Button>
+      </ModalFooter>
+    </>
+  )
+}

dapp/src/components/Modals/Support/index.tsx

@@ -1,11 +1,13 @@
 import React from "react"
 import {
+  useModalFlowContext,
   useRequestBitcoinAccount,
   useRequestEthereumAccount,
   useWalletContext,
 } from "#/hooks"
 import { ConnectBTCAccount, ConnectETHAccount } from "#/static/icons"
 import MissingAccount from "./MissingAccount"
+import ResumeModal from "./ResumeModal"
 
 export default function SupportWrapper({
   children,
@@ -15,7 +17,7 @@ export default function SupportWrapper({
   const { btcAccount, ethAccount } = useWalletContext()
   const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount()
   const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount()
-
+  const { isPaused, onClose, onResume } = useModalFlowContext()
   if (!btcAccount)
     return (
       <MissingAccount
@@ -34,5 +36,9 @@ export default function SupportWrapper({
       />
     )
 
+  if (isPaused) {
+    return <ResumeModal onClose={onClose} onResume={onResume} />
+  }
+
   return children
 }

dapp/src/components/shared/ModalBase/index.tsx

@@ -29,17 +29,36 @@ export default function ModalBase({
   const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar()
 
   const [activeStep, setActiveStep] = useState(defaultStep)
+  const [isPaused, setIsPaused] = useState(false)
+  const [isPendingTransaction, setIsPendingTransaction] = useState(false)
+
+  const handleResume = useCallback(() => {
+    setIsPaused(false)
+  }, [])
 
   const handleGoNext = useCallback(() => {
     setActiveStep((prevStep) => prevStep + 1)
   }, [])
 
   const handleClose = useCallback(() => {
-    onClose()
-  }, [onClose])
+    if (!isPaused && isPendingTransaction) {
+      setIsPaused(true)
+    } else {
+      onClose()
+    }
+  }, [isPaused, isPendingTransaction, onClose])
+
+  const handleStartTransactionProcess = useCallback(() => {
+    setIsPendingTransaction(true)
+  }, [setIsPendingTransaction])
+
+  const handleStopTransactionProcess = useCallback(() => {
+    setIsPendingTransaction(false)
+  }, [setIsPendingTransaction])
 
   const resetState = useCallback(() => {
     setActiveStep(defaultStep)
+    setIsPaused(false)
   }, [defaultStep])
 
   useEffect(() => {
@@ -63,10 +82,22 @@ export default function ModalBase({
   const contextValue: ModalFlowContextValue = useMemo<ModalFlowContextValue>(
     () => ({
       activeStep,
+      isPaused,
       onClose: handleClose,
+      onResume: handleResume,
       goNext: handleGoNext,
+      startTransactionProcess: handleStartTransactionProcess,
+      endTransactionProcess: handleStopTransactionProcess,
     }),
-    [activeStep, handleGoNext, handleClose],
+    [
+      activeStep,
+      isPaused,
+      handleGoNext,
+      handleClose,
+      handleResume,
+      handleStartTransactionProcess,
+      handleStopTransactionProcess,
+    ],
   )
 
   return (

dapp/src/contexts/ModalFlowContext.tsx

@@ -2,16 +2,25 @@ import { createContext } from "react"
 
 export type ModalStep = {
   goNext: () => void
+  goBack?: () => void
 }
 
 export type ModalFlowContextValue = {
   activeStep?: number
+  isPaused?: boolean
   onClose: () => void
+  onResume: () => void
   goNext: () => void
+  startTransactionProcess: () => void
+  endTransactionProcess: () => void
 }
 
 export const ModalFlowContext = createContext<ModalFlowContextValue>({
   activeStep: undefined,
-  goNext: () => {},
+  isPaused: false,
   onClose: () => {},
+  onResume: () => {},
+  goNext: () => {},
+  startTransactionProcess: () => {},
+  endTransactionProcess: () => {},
 })

dapp/src/hooks/useDepositBTCTransaction.ts

@@ -1,13 +1,16 @@
 import { useCallback } from "react"
 import { OnSuccessCallback } from "#/types"
+import { useModalFlowContext } from "./useModalFlowContext"
 
 export function useDepositBTCTransaction(onSuccess?: OnSuccessCallback) {
+  const { endTransactionProcess } = useModalFlowContext()
   // TODO: sending transactions using the SDK
   const depositBTC = useCallback(() => {
     if (onSuccess) {
+      endTransactionProcess()
       setTimeout(onSuccess, 1000)
     }
-  }, [onSuccess])
+  }, [onSuccess, endTransactionProcess])
 
   return { depositBTC }
 }

dapp/src/static/icons/Pause.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const Pause = createIcon({
+  displayName: "PauseIcon",
+  viewBox: "0 0 18 20",
+  path: (
+    <path
+      d="M2 18V2M16 18V2"
+      stroke="#F34900"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+})

dapp/src/static/icons/index.ts

@@ -9,3 +9,4 @@ export * from "./ConnectBTCAccount"
 export * from "./ConnectETHAccount"
 export * from "./AlertInfo"
 export * from "./ShieldPlus"
+export * from "./Pause"

dapp/src/theme/Spinner.ts

@@ -8,4 +8,13 @@ const baseStyle = defineStyle({
   borderLeftColor: "gold.400",
 })
 
-export const spinnerTheme = defineStyleConfig({ baseStyle })
+const sizeXl = defineStyle({
+  width: "4.5rem",
+  height: "4.5rem",
+})
+
+const sizes = {
+  xl: sizeXl,
+}
+
+export const spinnerTheme = defineStyleConfig({ baseStyle, sizes })