From 4b32328359f040da84411f7f0cee0e07e1b3d277 Mon Sep 17 00:00:00 2001 From: ioay Date: Thu, 18 Jan 2024 22:00:48 +0100 Subject: [PATCH 1/9] 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/contexts/ModalFlowContext.tsx | 9 +++- dapp/src/utils/customIcons.tsx | 16 +++++++ 8 files changed, 121 insertions(+), 9 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/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: ( + + ), +}) From cbdf3eef337582becd30e1b35beabea4bda88eb0 Mon Sep 17 00:00:00 2001 From: ioay Date: Sun, 21 Jan 2024 22:41:09 +0100 Subject: [PATCH 2/9] Resume modal: update styles, naming convention & directory structure --- dapp/src/assets/images/staking-pause-circle.svg | 10 ---------- .../index.tsx => Support/ResumeModal.tsx} | 17 ++++++----------- dapp/src/components/Modals/Support/index.tsx | 8 ++++---- dapp/src/components/shared/ModalBase/index.tsx | 2 +- dapp/src/constants/staking.ts | 2 +- dapp/src/contexts/ModalFlowContext.tsx | 6 ++---- .../customIcons.tsx => static/icons/Pause.tsx} | 2 +- dapp/src/static/icons/index.ts | 1 + dapp/src/theme/Spinner.ts | 11 ++++++++++- 9 files changed, 26 insertions(+), 33 deletions(-) delete mode 100644 dapp/src/assets/images/staking-pause-circle.svg rename dapp/src/components/Modals/{Staking/Resume/index.tsx => Support/ResumeModal.tsx} (73%) rename dapp/src/{utils/customIcons.tsx => static/icons/Pause.tsx} (88%) diff --git a/dapp/src/assets/images/staking-pause-circle.svg b/dapp/src/assets/images/staking-pause-circle.svg deleted file mode 100644 index 884c05f78..000000000 --- a/dapp/src/assets/images/staking-pause-circle.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/dapp/src/components/Modals/Staking/Resume/index.tsx b/dapp/src/components/Modals/Support/ResumeModal.tsx similarity index 73% rename from dapp/src/components/Modals/Staking/Resume/index.tsx rename to dapp/src/components/Modals/Support/ResumeModal.tsx index 5c7472b62..985def84e 100644 --- a/dapp/src/components/Modals/Staking/Resume/index.tsx +++ b/dapp/src/components/Modals/Support/ResumeModal.tsx @@ -4,14 +4,14 @@ import { ModalBody, ModalFooter, Button, - Stack, + HStack, } from "@chakra-ui/react" import Spinner from "#/components/shared/Spinner" -import { PauseIcon } from "#/utils/customIcons" +import { Pause } from "#/static/icons" import { TextMd } from "#/components/shared/Typography" -export default function PausingModal({ +export default function ResumeModal({ onResume, onClose, }: { @@ -22,15 +22,10 @@ export default function PausingModal({ <> Paused - + - - + + Are your sure you want to cancel? diff --git a/dapp/src/components/Modals/Support/index.tsx b/dapp/src/components/Modals/Support/index.tsx index d5d4876c7..01cdb20c8 100644 --- a/dapp/src/components/Modals/Support/index.tsx +++ b/dapp/src/components/Modals/Support/index.tsx @@ -7,7 +7,7 @@ import { } from "#/hooks" import { ConnectBTCAccount, ConnectETHAccount } from "#/static/icons" import MissingAccount from "./MissingAccount" -import Resume from "../Staking/Resume" +import ResumeModal from "./ResumeModal" export default function SupportWrapper({ children, @@ -17,7 +17,7 @@ export default function SupportWrapper({ const { btcAccount, ethAccount } = useWalletContext() const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount() const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount() - const { isResumeStep, onClose, onResume } = useModalFlowContext() + const { isPaused, onClose, onResume } = useModalFlowContext() if (!btcAccount) return ( ) - if (isResumeStep) { - return + if (isPaused) { + return } return children diff --git a/dapp/src/components/shared/ModalBase/index.tsx b/dapp/src/components/shared/ModalBase/index.tsx index d38c186f9..fe849cf1a 100644 --- a/dapp/src/components/shared/ModalBase/index.tsx +++ b/dapp/src/components/shared/ModalBase/index.tsx @@ -79,7 +79,7 @@ export default function ModalBase({ const contextValue: ModalFlowContextValue = useMemo( () => ({ activeStep, - isResumeStep, + isPaused: isResumeStep, onClose: handleClose, onResume: handleResume, goNext: handleGoNext, diff --git a/dapp/src/constants/staking.ts b/dapp/src/constants/staking.ts index 421c57bb5..51d470fd5 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.01 BTC diff --git a/dapp/src/contexts/ModalFlowContext.tsx b/dapp/src/contexts/ModalFlowContext.tsx index 316c0aeb0..75ffe3237 100644 --- a/dapp/src/contexts/ModalFlowContext.tsx +++ b/dapp/src/contexts/ModalFlowContext.tsx @@ -7,18 +7,16 @@ export type ModalStep = { export type ModalFlowContextValue = { activeStep?: number - isResumeStep?: boolean + isPaused?: boolean onClose: () => void onResume: () => void goNext: () => void - goBack?: () => void } export const ModalFlowContext = createContext({ activeStep: undefined, - isResumeStep: false, + isPaused: false, onClose: () => {}, onResume: () => {}, goNext: () => {}, - goBack: () => {}, }) diff --git a/dapp/src/utils/customIcons.tsx b/dapp/src/static/icons/Pause.tsx similarity index 88% rename from dapp/src/utils/customIcons.tsx rename to dapp/src/static/icons/Pause.tsx index c9b0120ee..41668dde5 100644 --- a/dapp/src/utils/customIcons.tsx +++ b/dapp/src/static/icons/Pause.tsx @@ -1,7 +1,7 @@ import React from "react" import { createIcon } from "@chakra-ui/react" -export const PauseIcon = createIcon({ +export const Pause = createIcon({ displayName: "PauseIcon", viewBox: "0 0 18 20", path: ( diff --git a/dapp/src/static/icons/index.ts b/dapp/src/static/icons/index.ts index fef11b54a..582477ae8 100644 --- a/dapp/src/static/icons/index.ts +++ b/dapp/src/static/icons/index.ts @@ -9,3 +9,4 @@ export * from "./ConnectBTCAccount" export * from "./ConnectETHAccount" export * from "./AlertInfo" export * from "./ShieldPlus" +export * from "./Pause" diff --git a/dapp/src/theme/Spinner.ts b/dapp/src/theme/Spinner.ts index 74b0f3ff8..58179e674 100644 --- a/dapp/src/theme/Spinner.ts +++ b/dapp/src/theme/Spinner.ts @@ -8,4 +8,13 @@ const baseStyle = defineStyle({ borderLeftColor: "gold.400", }) -export const spinnerTheme = defineStyleConfig({ baseStyle }) +const sizeXl = defineStyle({ + width: "4.5rem", + height: "4.5rem", +}) + +const sizes = { + xl: sizeXl, +} + +export const spinnerTheme = defineStyleConfig({ baseStyle, sizes }) From f9c2ab053d5c4bac71b375f96cf18e8f54c8d49c Mon Sep 17 00:00:00 2001 From: ioay Date: Mon, 22 Jan 2024 10:57:21 +0100 Subject: [PATCH 3/9] Add pending transaction process to context --- dapp/src/components/Modals/Staking/index.tsx | 5 ++- .../src/components/shared/ModalBase/index.tsx | 41 ++++++++++++------- dapp/src/contexts/ModalFlowContext.tsx | 4 ++ dapp/src/hooks/useDepositBTCTransaction.ts | 5 ++- 4 files changed, 39 insertions(+), 16 deletions(-) diff --git a/dapp/src/components/Modals/Staking/index.tsx b/dapp/src/components/Modals/Staking/index.tsx index bbe14cc22..607dd1f76 100644 --- a/dapp/src/components/Modals/Staking/index.tsx +++ b/dapp/src/components/Modals/Staking/index.tsx @@ -8,7 +8,8 @@ import DepositBTC from "./DepositBTC" import { STAKING_STEPS } from "./utils/stakingSteps" function ActiveStakingStep() { - const { activeStep } = useModalFlowContext() + const { activeStep, startTransactionProcess, endTransactionProcess } = + useModalFlowContext() const { ACTION_FORM, OVERVIEW, SIGN_MESSAGE, DEPOSIT_BTC } = STAKING_STEPS switch (activeStep) { @@ -17,10 +18,12 @@ function ActiveStakingStep() { case OVERVIEW: return case SIGN_MESSAGE: + startTransactionProcess() return case DEPOSIT_BTC: return default: + endTransactionProcess() return null } } diff --git a/dapp/src/components/shared/ModalBase/index.tsx b/dapp/src/components/shared/ModalBase/index.tsx index fe849cf1a..e2a536b79 100644 --- a/dapp/src/components/shared/ModalBase/index.tsx +++ b/dapp/src/components/shared/ModalBase/index.tsx @@ -12,7 +12,6 @@ import { TransactionContextProvider, } from "#/contexts" import SupportWrapper from "#/components/Modals/Support" -import { STAKING_STEPS } from "#/components/Modals/Staking/utils/stakingSteps" export default function ModalBase({ isOpen, @@ -30,32 +29,36 @@ export default function ModalBase({ const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar() const [activeStep, setActiveStep] = useState(defaultStep) - const [isResumeStep, setResumeStep] = useState(false) + const [isPaused, setIsPaused] = useState(false) + const [isPendingTransaction, setIsPendingTransaction] = useState(false) const handleResume = useCallback(() => { - setResumeStep(false) + setIsPaused(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(() => { - if (!isResumeStep && isStakingPending()) { - setResumeStep(true) + if (!isPaused && isPendingTransaction) { + setIsPaused(true) } else { onClose() } - }, [isResumeStep, isStakingPending, onClose]) + }, [isPaused, isPendingTransaction, onClose]) + + const handleStartTransactionProcess = useCallback(() => { + setIsPendingTransaction(true) + }, [setIsPendingTransaction]) + + const handleStopTransactionProcess = useCallback(() => { + setIsPendingTransaction(false) + }, [setIsPendingTransaction]) const resetState = useCallback(() => { setActiveStep(defaultStep) - setResumeStep(false) + setIsPaused(false) }, [defaultStep]) useEffect(() => { @@ -79,12 +82,22 @@ export default function ModalBase({ const contextValue: ModalFlowContextValue = useMemo( () => ({ activeStep, - isPaused: isResumeStep, + isPaused, onClose: handleClose, onResume: handleResume, goNext: handleGoNext, + startTransactionProcess: handleStartTransactionProcess, + endTransactionProcess: handleStopTransactionProcess, }), - [activeStep, isResumeStep, handleGoNext, handleClose, handleResume], + [ + activeStep, + isPaused, + handleGoNext, + handleClose, + handleResume, + handleStartTransactionProcess, + handleStopTransactionProcess, + ], ) return ( diff --git a/dapp/src/contexts/ModalFlowContext.tsx b/dapp/src/contexts/ModalFlowContext.tsx index 75ffe3237..43945f7c5 100644 --- a/dapp/src/contexts/ModalFlowContext.tsx +++ b/dapp/src/contexts/ModalFlowContext.tsx @@ -11,6 +11,8 @@ export type ModalFlowContextValue = { onClose: () => void onResume: () => void goNext: () => void + startTransactionProcess: () => void + endTransactionProcess: () => void } export const ModalFlowContext = createContext({ @@ -19,4 +21,6 @@ export const ModalFlowContext = createContext({ onClose: () => {}, onResume: () => {}, goNext: () => {}, + startTransactionProcess: () => {}, + endTransactionProcess: () => {}, }) diff --git a/dapp/src/hooks/useDepositBTCTransaction.ts b/dapp/src/hooks/useDepositBTCTransaction.ts index 0bef0c4be..97db06b30 100644 --- a/dapp/src/hooks/useDepositBTCTransaction.ts +++ b/dapp/src/hooks/useDepositBTCTransaction.ts @@ -1,13 +1,16 @@ import { useCallback } from "react" import { OnSuccessCallback } from "#/types" +import { useModalFlowContext } from "./useModalFlowContext" export function useDepositBTCTransaction(onSuccess?: OnSuccessCallback) { + const { endTransactionProcess } = useModalFlowContext() // TODO: sending transactions using the SDK const depositBTC = useCallback(() => { if (onSuccess) { + endTransactionProcess() setTimeout(onSuccess, 1000) } - }, [onSuccess]) + }, [onSuccess, endTransactionProcess]) return { depositBTC } } From 12ab0a1e10bb749db65b407a4acfe9b1f49c6a7c Mon Sep 17 00:00:00 2001 From: ioay Date: Mon, 22 Jan 2024 12:09:06 +0100 Subject: [PATCH 4/9] Reverted bitcoin min amount --- dapp/src/constants/staking.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dapp/src/constants/staking.ts b/dapp/src/constants/staking.ts index 51d470fd5..421c57bb5 100644 --- a/dapp/src/constants/staking.ts +++ b/dapp/src/constants/staking.ts @@ -1 +1 @@ -export const BITCOIN_MIN_AMOUNT = "100" // 0.01 BTC +export const BITCOIN_MIN_AMOUNT = "1000000" // 0.01 BTC From fcdf8d2bed235bc3ea9bd8faadd420de3798cff0 Mon Sep 17 00:00:00 2001 From: ioay Date: Tue, 23 Jan 2024 11:08:49 +0100 Subject: [PATCH 5/9] Reverted staking steps --- dapp/src/components/Modals/Staking/index.tsx | 14 +++++--------- .../Modals/Staking/utils/stakingSteps.ts | 6 ------ 2 files changed, 5 insertions(+), 15 deletions(-) delete mode 100644 dapp/src/components/Modals/Staking/utils/stakingSteps.ts diff --git a/dapp/src/components/Modals/Staking/index.tsx b/dapp/src/components/Modals/Staking/index.tsx index 607dd1f76..966a0c16b 100644 --- a/dapp/src/components/Modals/Staking/index.tsx +++ b/dapp/src/components/Modals/Staking/index.tsx @@ -5,25 +5,21 @@ 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, startTransactionProcess, endTransactionProcess } = - useModalFlowContext() - const { ACTION_FORM, OVERVIEW, SIGN_MESSAGE, DEPOSIT_BTC } = STAKING_STEPS + const { activeStep, startTransactionProcess } = useModalFlowContext() switch (activeStep) { - case ACTION_FORM: + case 1: return - case OVERVIEW: + case 2: return - case SIGN_MESSAGE: + case 3: startTransactionProcess() return - case DEPOSIT_BTC: + case 4: return default: - endTransactionProcess() return null } } diff --git a/dapp/src/components/Modals/Staking/utils/stakingSteps.ts b/dapp/src/components/Modals/Staking/utils/stakingSteps.ts deleted file mode 100644 index db7493f6a..000000000 --- a/dapp/src/components/Modals/Staking/utils/stakingSteps.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const STAKING_STEPS = { - ACTION_FORM: 1, - OVERVIEW: 2, - SIGN_MESSAGE: 3, - DEPOSIT_BTC: 4, -} From 3738bfa529b46e4393fe8abfc5bd789876f2786c Mon Sep 17 00:00:00 2001 From: ioay Date: Tue, 23 Jan 2024 11:54:31 +0100 Subject: [PATCH 6/9] End transaction process for default staking step --- dapp/src/components/Modals/Staking/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/dapp/src/components/Modals/Staking/index.tsx b/dapp/src/components/Modals/Staking/index.tsx index 966a0c16b..92cd91b6c 100644 --- a/dapp/src/components/Modals/Staking/index.tsx +++ b/dapp/src/components/Modals/Staking/index.tsx @@ -7,7 +7,8 @@ import SignMessage from "./SignMessage" import DepositBTC from "./DepositBTC" function ActiveStakingStep() { - const { activeStep, startTransactionProcess } = useModalFlowContext() + const { activeStep, startTransactionProcess, endTransactionProcess } = + useModalFlowContext() switch (activeStep) { case 1: @@ -20,6 +21,7 @@ function ActiveStakingStep() { case 4: return default: + endTransactionProcess() return null } } From be492cd7c6ff9f88b98dd6d4ca3e71274306a02a Mon Sep 17 00:00:00 2001 From: ioay Date: Tue, 23 Jan 2024 21:04:44 +0100 Subject: [PATCH 7/9] Added end of transaction to resetState method, updated activeStakingSteps --- dapp/src/components/Modals/Staking/DepositBTC.tsx | 14 +++++++++++--- dapp/src/components/Modals/Staking/SignMessage.tsx | 8 ++++++-- dapp/src/components/Modals/Staking/index.tsx | 5 +---- dapp/src/components/Modals/Support/index.tsx | 1 + dapp/src/components/shared/ModalBase/index.tsx | 1 + dapp/src/constants/staking.ts | 2 +- dapp/src/contexts/ModalFlowContext.tsx | 1 - dapp/src/hooks/useDepositBTCTransaction.ts | 5 +---- 8 files changed, 22 insertions(+), 15 deletions(-) diff --git a/dapp/src/components/Modals/Staking/DepositBTC.tsx b/dapp/src/components/Modals/Staking/DepositBTC.tsx index 924a0ee24..1a7881233 100644 --- a/dapp/src/components/Modals/Staking/DepositBTC.tsx +++ b/dapp/src/components/Modals/Staking/DepositBTC.tsx @@ -1,12 +1,20 @@ -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 onDepositBTCTransactionSuccess = useCallback(() => { + endTransactionProcess() + goNext() + }, [endTransactionProcess, goNext]) + + const { depositBTC } = useDepositBTCTransaction( + onDepositBTCTransactionSuccess, + ) return ( diff --git a/dapp/src/components/Modals/Staking/SignMessage.tsx b/dapp/src/components/Modals/Staking/SignMessage.tsx index e3cda7886..5c5ffd282 100644 --- a/dapp/src/components/Modals/Staking/SignMessage.tsx +++ b/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" @@ -6,9 +6,13 @@ import { TextMd } from "#/components/shared/Typography" import StakingSteps from "./components/StakingSteps" export default function SignMessage() { - const { goNext } = useModalFlowContext() + const { goNext, startTransactionProcess } = useModalFlowContext() const { signMessage } = useSignMessage(goNext) + useEffect(() => { + startTransactionProcess() + }, [startTransactionProcess]) + return ( {/* TODO: Add the correct action after click */} diff --git a/dapp/src/components/Modals/Staking/index.tsx b/dapp/src/components/Modals/Staking/index.tsx index 92cd91b6c..e74dd57ea 100644 --- a/dapp/src/components/Modals/Staking/index.tsx +++ b/dapp/src/components/Modals/Staking/index.tsx @@ -7,8 +7,7 @@ import SignMessage from "./SignMessage" import DepositBTC from "./DepositBTC" function ActiveStakingStep() { - const { activeStep, startTransactionProcess, endTransactionProcess } = - useModalFlowContext() + const { activeStep } = useModalFlowContext() switch (activeStep) { case 1: @@ -16,12 +15,10 @@ function ActiveStakingStep() { case 2: return case 3: - startTransactionProcess() return case 4: return default: - endTransactionProcess() return null } } diff --git a/dapp/src/components/Modals/Support/index.tsx b/dapp/src/components/Modals/Support/index.tsx index 01cdb20c8..6f2c51911 100644 --- a/dapp/src/components/Modals/Support/index.tsx +++ b/dapp/src/components/Modals/Support/index.tsx @@ -18,6 +18,7 @@ export default function SupportWrapper({ const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount() const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount() const { isPaused, onClose, onResume } = useModalFlowContext() + if (!btcAccount) return ( { setActiveStep(defaultStep) setIsPaused(false) + setIsPendingTransaction(false) }, [defaultStep]) useEffect(() => { diff --git a/dapp/src/constants/staking.ts b/dapp/src/constants/staking.ts index 421c57bb5..51d470fd5 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.01 BTC diff --git a/dapp/src/contexts/ModalFlowContext.tsx b/dapp/src/contexts/ModalFlowContext.tsx index 43945f7c5..5f314ba6f 100644 --- a/dapp/src/contexts/ModalFlowContext.tsx +++ b/dapp/src/contexts/ModalFlowContext.tsx @@ -2,7 +2,6 @@ import { createContext } from "react" export type ModalStep = { goNext: () => void - goBack?: () => void } export type ModalFlowContextValue = { diff --git a/dapp/src/hooks/useDepositBTCTransaction.ts b/dapp/src/hooks/useDepositBTCTransaction.ts index 97db06b30..0bef0c4be 100644 --- a/dapp/src/hooks/useDepositBTCTransaction.ts +++ b/dapp/src/hooks/useDepositBTCTransaction.ts @@ -1,16 +1,13 @@ import { useCallback } from "react" import { OnSuccessCallback } from "#/types" -import { useModalFlowContext } from "./useModalFlowContext" export function useDepositBTCTransaction(onSuccess?: OnSuccessCallback) { - const { endTransactionProcess } = useModalFlowContext() // TODO: sending transactions using the SDK const depositBTC = useCallback(() => { if (onSuccess) { - endTransactionProcess() setTimeout(onSuccess, 1000) } - }, [onSuccess, endTransactionProcess]) + }, [onSuccess]) return { depositBTC } } From b5a02c45a213bd26903ceca87348b3d52bbbb343 Mon Sep 17 00:00:00 2001 From: ioay Date: Thu, 25 Jan 2024 16:47:28 +0100 Subject: [PATCH 8/9] Pause icon styles, fn callback renamed for depositBTC --- dapp/src/assets/icons/Pause.tsx | 4 ++-- dapp/src/components/Modals/Staking/DepositBTC.tsx | 6 ++---- dapp/src/components/Modals/Support/ResumeModal.tsx | 4 ++-- dapp/src/constants/staking.ts | 2 +- 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/dapp/src/assets/icons/Pause.tsx b/dapp/src/assets/icons/Pause.tsx index 41668dde5..5bdd71bc0 100644 --- a/dapp/src/assets/icons/Pause.tsx +++ b/dapp/src/assets/icons/Pause.tsx @@ -1,13 +1,13 @@ import React from "react" import { createIcon } from "@chakra-ui/react" -export const Pause = createIcon({ +export const PauseIcon = createIcon({ displayName: "PauseIcon", viewBox: "0 0 18 20", path: ( { + const onDepositSuccess = useCallback(() => { endTransactionProcess() goNext() }, [endTransactionProcess, goNext]) - const { depositBTC } = useDepositBTCTransaction( - onDepositBTCTransactionSuccess, - ) + const { depositBTC } = useDepositBTCTransaction(onDepositSuccess) return ( diff --git a/dapp/src/components/Modals/Support/ResumeModal.tsx b/dapp/src/components/Modals/Support/ResumeModal.tsx index a09f040c9..fb633e7eb 100644 --- a/dapp/src/components/Modals/Support/ResumeModal.tsx +++ b/dapp/src/components/Modals/Support/ResumeModal.tsx @@ -8,7 +8,7 @@ import { } from "@chakra-ui/react" import Spinner from "#/components/shared/Spinner" -import { Pause } from "#/assets/icons" +import { PauseIcon } from "#/assets/icons" import { TextMd } from "#/components/shared/Typography" export default function ResumeModal({ @@ -24,7 +24,7 @@ export default function ResumeModal({ - + Are your sure you want to cancel? diff --git a/dapp/src/constants/staking.ts b/dapp/src/constants/staking.ts index 51d470fd5..421c57bb5 100644 --- a/dapp/src/constants/staking.ts +++ b/dapp/src/constants/staking.ts @@ -1 +1 @@ -export const BITCOIN_MIN_AMOUNT = "100" // 0.01 BTC +export const BITCOIN_MIN_AMOUNT = "1000000" // 0.01 BTC From 0543d88705709c706c19789ddcbc790912aabd55 Mon Sep 17 00:00:00 2001 From: ioay Date: Sun, 28 Jan 2024 12:13:22 +0100 Subject: [PATCH 9/9] Use chakra unit instead of rem, fixing issues after modalBase changes --- .../src/components/TransactionModal/index.tsx | 40 +++++++++++++++++-- dapp/src/theme/Spinner.ts | 4 +- 2 files changed, 38 insertions(+), 6 deletions(-) diff --git a/dapp/src/components/TransactionModal/index.tsx b/dapp/src/components/TransactionModal/index.tsx index e656f7642..84b032594 100644 --- a/dapp/src/components/TransactionModal/index.tsx +++ b/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( () => ({ activeStep, + isPaused, onClose: handleClose, + onResume: handleResume, goNext: handleGoNext, + startTransactionProcess: handleStartTransactionProcess, + endTransactionProcess: handleStopTransactionProcess, }), - [activeStep, handleGoNext, handleClose], + [ + activeStep, + isPaused, + handleGoNext, + handleClose, + handleResume, + handleStartTransactionProcess, + handleStopTransactionProcess, + ], ) return ( - + {children} diff --git a/dapp/src/theme/Spinner.ts b/dapp/src/theme/Spinner.ts index 58179e674..678482d13 100644 --- a/dapp/src/theme/Spinner.ts +++ b/dapp/src/theme/Spinner.ts @@ -9,8 +9,8 @@ const baseStyle = defineStyle({ }) const sizeXl = defineStyle({ - width: "4.5rem", - height: "4.5rem", + width: 16, + height: 16, }) const sizes = {