From a98ba62a41a1e71a9100cc82d8d2de7a73287e20 Mon Sep 17 00:00:00 2001 From: ioay Date: Thu, 18 Jan 2024 22:00:48 +0100 Subject: [PATCH] Resume staking flow modal --- .../assets/images/staking-pause-circle.svg | 10 ++++ .../Modals/Staking/Resume/index.tsx | 47 +++++++++++++++++++ dapp/src/components/Modals/Staking/index.tsx | 10 ++-- .../Modals/Staking/utils/stakingSteps.ts | 6 +++ dapp/src/components/Modals/Support/index.tsx | 8 +++- .../src/components/shared/ModalBase/index.tsx | 24 ++++++++-- dapp/src/constants/staking.ts | 2 +- dapp/src/contexts/ModalFlowContext.tsx | 9 +++- dapp/src/utils/customIcons.tsx | 16 +++++++ 9 files changed, 122 insertions(+), 10 deletions(-) create mode 100644 dapp/src/assets/images/staking-pause-circle.svg create mode 100644 dapp/src/components/Modals/Staking/Resume/index.tsx create mode 100644 dapp/src/components/Modals/Staking/utils/stakingSteps.ts create mode 100644 dapp/src/utils/customIcons.tsx 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: ( + + ), +})