diff --git a/dapp/src/assets/images/staking-pause-circle.svg b/dapp/src/assets/images/staking-pause-circle.svg
new file mode 100644
index 000000000..884c05f78
--- /dev/null
+++ b/dapp/src/assets/images/staking-pause-circle.svg
@@ -0,0 +1,10 @@
+
diff --git a/dapp/src/components/Modals/Staking/Resume/index.tsx b/dapp/src/components/Modals/Staking/Resume/index.tsx
new file mode 100644
index 000000000..5c7472b62
--- /dev/null
+++ b/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 (
+ <>
+ Paused
+
+
+
+
+
+
+ Are your sure you want to cancel?
+
+
+
+
+
+ >
+ )
+}
diff --git a/dapp/src/components/Modals/Staking/index.tsx b/dapp/src/components/Modals/Staking/index.tsx
index e74dd57ea..bbe14cc22 100644
--- a/dapp/src/components/Modals/Staking/index.tsx
+++ b/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
- case 2:
+ case OVERVIEW:
return
- case 3:
+ case SIGN_MESSAGE:
return
- case 4:
+ case DEPOSIT_BTC:
return
default:
return null
diff --git a/dapp/src/components/Modals/Staking/utils/stakingSteps.ts b/dapp/src/components/Modals/Staking/utils/stakingSteps.ts
new file mode 100644
index 000000000..db7493f6a
--- /dev/null
+++ b/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,
+}
diff --git a/dapp/src/components/Modals/Support/index.tsx b/dapp/src/components/Modals/Support/index.tsx
index ae5aa98eb..d5d4876c7 100644
--- a/dapp/src/components/Modals/Support/index.tsx
+++ b/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 (
)
+ if (isResumeStep) {
+ return
+ }
+
return children
}
diff --git a/dapp/src/components/shared/ModalBase/index.tsx b/dapp/src/components/shared/ModalBase/index.tsx
index 6b253e89d..d38c186f9 100644
--- a/dapp/src/components/shared/ModalBase/index.tsx
+++ b/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(
() => ({
activeStep,
+ isResumeStep,
onClose: handleClose,
+ onResume: handleResume,
goNext: handleGoNext,
}),
- [activeStep, handleGoNext, handleClose],
+ [activeStep, isResumeStep, handleGoNext, handleClose, handleResume],
)
return (
diff --git a/dapp/src/constants/staking.ts b/dapp/src/constants/staking.ts
index 421c57bb5..56a187c7f 100644
--- a/dapp/src/constants/staking.ts
+++ b/dapp/src/constants/staking.ts
@@ -1 +1 @@
-export const BITCOIN_MIN_AMOUNT = "1000000" // 0.01 BTC
+export const BITCOIN_MIN_AMOUNT = "100" // 0.000001 BTC
diff --git a/dapp/src/contexts/ModalFlowContext.tsx b/dapp/src/contexts/ModalFlowContext.tsx
index 287d134e1..316c0aeb0 100644
--- a/dapp/src/contexts/ModalFlowContext.tsx
+++ b/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({
activeStep: undefined,
- goNext: () => {},
+ isResumeStep: false,
onClose: () => {},
+ onResume: () => {},
+ goNext: () => {},
+ goBack: () => {},
})
diff --git a/dapp/src/utils/customIcons.tsx b/dapp/src/utils/customIcons.tsx
new file mode 100644
index 000000000..c9b0120ee
--- /dev/null
+++ b/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: (
+
+ ),
+})