dApp: Handle deposit rejection (#453)

Closes: #432 

This pull request reverts `ResumeModal` component removal with updated
logic.
dApp now distinguishes error caused by user interruption and displays a
proper modal window to ensure the user really wants to cancel the
process.


https://github.com/thesis/acre/assets/11503879/a1fbcee1-8edc-4274-857b-1e9c94571a7d

Summary of changes:
- added paused/pending action flow states definitions
- added `useActionFlowPause` hook exposing state change handler
functions
- added `ResumeModal` component
- added `TransactionError` type definition

dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx

@@ -1,14 +1,15 @@
 import React, { useCallback, useEffect } from "react"
 import {
+  useActionFlowPause,
   useActionFlowTokenAmount,
   useAppDispatch,
   useDepositBTCTransaction,
   useExecuteFunction,
   useStakeFlowContext,
   useVerifyDepositAddress,
 } from "#/hooks"
-import { logPromiseFailure } from "#/utils"
-import { PROCESS_STATUSES } from "#/types"
+import { isLedgerLiveError, logPromiseFailure } from "#/utils"
+import { PROCESS_STATUSES, LedgerLiveError } from "#/types"
 import { Highlight } from "@chakra-ui/react"
 import { TextMd } from "#/components/shared/Typography"
 import { CardAlert } from "#/components/shared/alerts"
@@ -20,6 +21,7 @@ export default function DepositBTCModal() {
   const { btcAddress, depositReceipt, stake } = useStakeFlowContext()
   const verifyDepositAddress = useVerifyDepositAddress()
   const dispatch = useAppDispatch()
+  const { handlePause } = useActionFlowPause()
 
   const onStakeBTCSuccess = useCallback(() => {
     dispatch(setStatus(PROCESS_STATUSES.SUCCEEDED))
@@ -42,9 +44,22 @@ export default function DepositBTCModal() {
   }, [dispatch, handleStake])
 
   // TODO: Handle when the function fails
-  const showError = useCallback(() => {}, [])
+  const showError = useCallback((error?: LedgerLiveError) => {
+    console.error(error)
+  }, [])
 
-  const onDepositBTCError = useCallback(() => showError(), [showError])
+  const onDepositBTCError = useCallback(
+    (error: unknown) => {
+      if (!isLedgerLiveError(error)) return
+
+      const isInterrupted =
+        error.message && error.message.includes("Signature interrupted by user")
+      if (isInterrupted) handlePause()
+
+      showError(error)
+    },
+    [showError, handlePause],
+  )
 
   const { sendBitcoinTransaction, transactionHash } = useDepositBTCTransaction(
     onDepositBTCSuccess,

dapp/src/components/TransactionModal/ModalContentWrapper.tsx

@@ -14,6 +14,7 @@ import ErrorModal from "./ErrorModal"
 import LoadingModal from "./LoadingModal"
 import MissingAccountModal from "./MissingAccountModal"
 import SuccessModal from "./SuccessModal"
+import ResumeModal from "./ResumeModal"
 
 export default function ModalContentWrapper({
   children,
@@ -43,5 +44,7 @@ export default function ModalContentWrapper({
 
   if (status === PROCESS_STATUSES.FAILED) return <ErrorModal type={type} />
 
+  if (status === PROCESS_STATUSES.PAUSED) return <ResumeModal />
+
   return children
 }

dapp/src/components/TransactionModal/ResumeModal.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import {
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  HStack,
+} from "@chakra-ui/react"
+
+import Spinner from "#/components/shared/Spinner"
+import { PauseIcon } from "#/assets/icons"
+import { TextMd } from "#/components/shared/Typography"
+import { useActionFlowPause, useModal } from "#/hooks"
+
+export default function ResumeModal() {
+  const { handleResume } = useActionFlowPause()
+  const { closeModal } = useModal()
+
+  return (
+    <>
+      <ModalHeader pb={6} textAlign="center">
+        Paused
+      </ModalHeader>
+      <ModalBody textAlign="start" py={6} mx={3} gap={4}>
+        <HStack position="relative" justifyContent="center">
+          <Spinner size="2xl" />
+          <PauseIcon position="absolute" boxSize={6} color="brand.400" />
+        </HStack>
+
+        <TextMd>Are your sure you want to cancel?</TextMd>
+      </ModalBody>
+      <ModalFooter flexDirection="column" gap={2}>
+        <Button size="lg" width="100%" onClick={handleResume}>
+          Resume deposit
+        </Button>
+        <Button size="lg" width="100%" variant="outline" onClick={closeModal}>
+          Yes, cancel
+        </Button>
+      </ModalFooter>
+    </>
+  )
+}

dapp/src/hooks/store/index.ts

@@ -11,3 +11,4 @@ export * from "./useActionFlowTxHash"
 export * from "./useCompletedActivities"
 export * from "./useLatestActivities"
 export * from "./useAllActivitiesCount"
+export * from "./useActionFlowPause"

dapp/src/hooks/store/useActionFlowPause.ts

@@ -0,0 +1,29 @@
+import { setStatus } from "#/store/action-flow"
+import { PROCESS_STATUSES } from "#/types"
+import { useAppDispatch } from "./useAppDispatch"
+
+/**
+ * Custom hook that provides functions to pause and resume the action flow process.
+ * @returns An object containing the `handlePause` and `handleResume` functions.
+ */
+export function useActionFlowPause() {
+  const dispatch = useAppDispatch()
+
+  /**
+   * Function to pause the action flow process.
+   * It dispatches an action to set the status to "PAUSED" if the current status is "PENDING".
+   */
+  const handlePause = () => {
+    dispatch(setStatus(PROCESS_STATUSES.PAUSED))
+  }
+
+  /**
+   * Function to resume the action flow process.
+   * It dispatches an action to set the status to "PENDING".
+   */
+  const handleResume = () => {
+    dispatch(setStatus(PROCESS_STATUSES.PENDING))
+  }
+
+  return { handlePause, handleResume }
+}

dapp/src/theme/Spinner.ts

@@ -13,8 +13,14 @@ const sizeXl = defineStyle({
   height: 16,
 })
 
+const size2Xl = defineStyle({
+  width: 20,
+  height: 20,
+})
+
 const sizes = {
   xl: sizeXl,
+  "2xl": size2Xl,
 }
 
 export const spinnerTheme = defineStyleConfig({ baseStyle, sizes })

dapp/src/types/action-flow.ts

@@ -22,6 +22,8 @@ export const PROCESS_STATUSES = {
   LOADING: "LOADING",
   FAILED: "FAILED",
   SUCCEEDED: "SUCCEEDED",
+  PAUSED: "PAUSED",
+  PENDING: "PENDING",
 } as const
 
 export type ProcessStatus =

dapp/src/types/ledger-live-app.ts

@@ -8,3 +8,9 @@ export type UseRequestAccountReturn = {
   account: Account | null
   requestAccount: (...params: RequestAccountParams) => Promise<void>
 }
+
+export type LedgerLiveError = {
+  message?: string
+  name?: string
+  stack?: string
+}

dapp/src/utils/index.ts

@@ -10,3 +10,4 @@ export * from "./exchangeApi"
 export * from "./verifyDepositAddress"
 export * from "./json"
 export * from "./activities"
+export * from "./type-check"

dapp/src/utils/type-check.ts

@@ -0,0 +1,15 @@
+import { LedgerLiveError } from "#/types"
+
+export function isObject(
+  arg: unknown,
+): arg is Record<string | number | symbol, unknown> {
+  return typeof arg === "object" && arg !== null
+}
+
+export function isString(arg: unknown): arg is string {
+  return typeof arg === "string"
+}
+
+export function isLedgerLiveError(arg: unknown): arg is LedgerLiveError {
+  return isObject(arg) && arg.name === "Error" && isString(arg.message)
+}