Resuming deposit modal

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

@@ -0,0 +1,47 @@
+import React from "react"
+import {
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Stack,
+} from "@chakra-ui/react"
+
+import Spinner from "#/components/shared/Spinner"
+import { PauseIcon } from "#/utils/customIcons"
+import { TextMd } from "#/components/shared/Typography"
+
+export default function PausingModal({
+  onResume,
+  onClose,
+}: {
+  onResume: () => void
+  onClose: () => void
+}) {
+  return (
+    <>
+      <ModalHeader>Paused</ModalHeader>
+      <ModalBody textAlign="start" py={6} mx={3}>
+        <Stack
+          position="relative"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Spinner size="xl" />
+          <PauseIcon position="absolute" />
+        </Stack>
+
+        <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/Staking/index.tsx

@@ -5,18 +5,20 @@ import Overview from "./Overview"
 import ActionForm from "../ActionForm"
 import SignMessage from "./SignMessage"
 import DepositBTC from "./DepositBTC"
+import { STAKING_STEPS } from "./utils/stakingSteps"
 
 function ActiveStakingStep() {
   const { activeStep } = useModalFlowContext()
+  const { ACTION_FORM, OVERVIEW, SIGN_MESSAGE, DEPOSIT_BTC } = STAKING_STEPS
 
   switch (activeStep) {
-    case 1:
+    case ACTION_FORM:
       return <ActionForm action="stake" />
-    case 2:
+    case OVERVIEW:
       return <Overview />
-    case 3:
+    case SIGN_MESSAGE:
       return <SignMessage />
-    case 4:
+    case DEPOSIT_BTC:
       return <DepositBTC />
     default:
       return null

dapp/src/components/Modals/Staking/utils/stakingSteps.ts

@@ -0,0 +1,6 @@
+export const STAKING_STEPS = {
+  ACTION_FORM: 1,
+  OVERVIEW: 2,
+  SIGN_MESSAGE: 3,
+  DEPOSIT_BTC: 4,
+}

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 Resume from "../Staking/Resume"
 
 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 { isResumeStep, onClose, onResume } = useModalFlowContext()
   if (!btcAccount)
     return (
       <MissingAccount
@@ -34,5 +36,9 @@ export default function SupportWrapper({
       />
     )
 
+  if (isResumeStep) {
+    return <Resume onClose={onClose} onResume={onResume} />
+  }
+
   return children
 }

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

@@ -12,6 +12,7 @@ import {
   TransactionContextProvider,
 } from "#/contexts"
 import SupportWrapper from "#/components/Modals/Support"
+import { STAKING_STEPS } from "#/components/Modals/Staking/utils/stakingSteps"
 
 export default function ModalBase({
   isOpen,
@@ -29,17 +30,32 @@ export default function ModalBase({
   const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar()
 
   const [activeStep, setActiveStep] = useState(defaultStep)
+  const [isResumeStep, setResumeStep] = useState(false)
+
+  const handleResume = useCallback(() => {
+    setResumeStep(false)
+  }, [])
 
   const handleGoNext = useCallback(() => {
     setActiveStep((prevStep) => prevStep + 1)
   }, [])
 
+  const isStakingPending = useCallback(() => {
+    const { SIGN_MESSAGE, DEPOSIT_BTC } = STAKING_STEPS
+    return activeStep === SIGN_MESSAGE || activeStep === DEPOSIT_BTC
+  }, [activeStep])
+
   const handleClose = useCallback(() => {
-    onClose()
-  }, [onClose])
+    if (!isResumeStep && isStakingPending()) {
+      setResumeStep(true)
+    } else {
+      onClose()
+    }
+  }, [isResumeStep, isStakingPending, onClose])
 
   const resetState = useCallback(() => {
     setActiveStep(defaultStep)
+    setResumeStep(false)
   }, [defaultStep])
 
   useEffect(() => {
@@ -63,10 +79,12 @@ export default function ModalBase({
   const contextValue: ModalFlowContextValue = useMemo<ModalFlowContextValue>(
     () => ({
       activeStep,
+      isResumeStep,
       onClose: handleClose,
+      onResume: handleResume,
       goNext: handleGoNext,
     }),
-    [activeStep, handleGoNext, handleClose],
+    [activeStep, isResumeStep, handleGoNext, handleClose, handleResume],
   )
 
   return (

dapp/src/contexts/ModalFlowContext.tsx

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

dapp/src/utils/customIcons.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="#F34900"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+})