Resuming deposit modal (#138)

Closes: #110 

When a user leaves the staking flow, the user is asked for confirmation.

Figma:
https://www.figma.com/file/OUdSfHsmgV8EJpWxAzXjl5/Design-Tasks?type=design&node-id=3799-15142&mode=design&t=1vG9C2eujbt5Q5tk-4

dapp/src/assets/icons/Pause.tsx

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

dapp/src/assets/icons/index.ts

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

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

@@ -1,12 +1,18 @@
-import React from "react"
+import React, { useCallback } from "react"
 import { useDepositBTCTransaction, useModalFlowContext } from "#/hooks"
 import Alert from "#/components/shared/Alert"
 import { TextMd } from "#/components/shared/Typography"
 import StakingSteps from "./components/StakingSteps"
 
 export default function DepositBTC() {
-  const { goNext } = useModalFlowContext()
-  const { depositBTC } = useDepositBTCTransaction(goNext)
+  const { goNext, endTransactionProcess } = useModalFlowContext()
+
+  const onDepositSuccess = useCallback(() => {
+    endTransactionProcess()
+    goNext()
+  }, [endTransactionProcess, goNext])
+
+  const { depositBTC } = useDepositBTCTransaction(onDepositSuccess)
 
   return (
     <StakingSteps buttonText="Deposit BTC" activeStep={1} onClick={depositBTC}>

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

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { Highlight } from "@chakra-ui/react"
 import { useModalFlowContext, useSignMessage } from "#/hooks"
 import Alert from "#/components/shared/Alert"
@@ -7,9 +7,13 @@ import { asyncWrapper } from "#/utils"
 import StakingSteps from "./components/StakingSteps"
 
 export default function SignMessage() {
-  const { goNext } = useModalFlowContext()
+  const { goNext, startTransactionProcess } = useModalFlowContext()
   const { signMessage } = useSignMessage(goNext)
 
+  useEffect(() => {
+    startTransactionProcess()
+  }, [startTransactionProcess])
+
   const handleClick = () => {
     asyncWrapper(signMessage())
   }

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 { PauseIcon } from "#/assets/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" />
+          <PauseIcon position="absolute" boxSize={6} color="brand.400" />
+        </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 "#/assets/icons"
 import MissingAccount from "./MissingAccount"
+import ResumeModal from "./ResumeModal"
 
 export default function SupportWrapper({
   children,
@@ -15,6 +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 (
@@ -34,5 +37,9 @@ export default function SupportWrapper({
       />
     )
 
+  if (isPaused) {
+    return <ResumeModal onClose={onClose} onResume={onResume} />
+  }
+
   return children
 }

dapp/src/components/TransactionModal/index.tsx

@@ -24,17 +24,37 @@ export default function TransactionModal({
   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)
+    setIsPendingTransaction(false)
   }, [defaultStep])
 
   useEffect(() => {
@@ -58,14 +78,26 @@ export default function TransactionModal({
   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 (
-    <ModalBase isOpen={isOpen} onClose={onClose}>
+    <ModalBase isOpen={isOpen} onClose={handleClose}>
       <TransactionContextProvider>
         <ModalFlowContext.Provider value={contextValue}>
           <SupportWrapper>{children}</SupportWrapper>

dapp/src/contexts/ModalFlowContext.tsx

@@ -6,12 +6,20 @@ export type ModalStep = {
 
 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/theme/Spinner.ts

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