Pause deposit modal - view

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

@@ -0,0 +1,53 @@
+import React from "react"
+import {
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Spinner,
+  Stack,
+} from "@chakra-ui/react"
+
+import { TextMd } from "../../../shared/Typography"
+import { PauseIcon } from "../../../../utils/customIcons"
+
+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
+            thickness="3px"
+            speed="0.65s"
+            emptyColor="gold.400"
+            color="brand.400"
+            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/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

@@ -29,17 +29,29 @@ 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 handleClose = useCallback(() => {
-    onClose()
-  }, [onClose])
+    // TODO: waiting for transaction functionality (show resume modal when transaction is pending)
+    // currently resuming modal shows always on step no 2
+    if (!isResumeStep && activeStep === 2) {
+      setResumeStep(true)
+    } else {
+      onClose()
+    }
+  }, [activeStep, isResumeStep, onClose])
 
   const resetState = useCallback(() => {
     setActiveStep(defaultStep)
+    setResumeStep(false)
   }, [defaultStep])
 
   useEffect(() => {
@@ -63,10 +75,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"
+    />
+  ),
+})