Handling an error that occurs after a deposit action (#325)

This PR adds support for potential errors occurring after the deposit transaction. To handle this, we show an error screen prompting the user to retry. If the error is episodal, upon pressing the "Retry" button, the user will see the Success screen, continuing the flow as usual. We intentionally omit a close button, guiding the user to proceed within the flow and preventing abandonment. If the user chooses not to retry, a message will inform them that we will automatically retry after a designated time - 1 minute. However, if the repeated attempt results in an error, let's show the user the information to look for help on Discord. However, the user should be able to try again from this level. ### UI <img width="300" alt="Screenshot 2024-04-02 at 15 44 29" src="https://github.com/thesis/acre/assets/23117945/150e88a6-eb6f-48e5-9995-f6121a8c557c"> <img width="300" alt="Screenshot 2024-04-02 at 15 49 26" src="https://github.com/thesis/acre/assets/23117945/c7080253-868d-4c7c-85f6-13628c55a3b5"> #### Test flow recordings https://github.com/thesis/acre/assets/23117945/de124600-74bc-47ef-8a76-437426e55144 ### Testing Let's use a patch file to test. Use the following file: [test.patch](https://github.com/thesis/acre/files/14838545/test.patch) ``` git apply test.patch ```
thesis · Apr 12, 2024 · d742627 · d742627
2 parents 965f38b + 274a96d
commit d742627
Show file tree

Hide file tree

Showing 34 changed files with 458 additions and 133 deletions.
diff --git a/dapp/package.json b/dapp/package.json
@@ -24,6 +24,7 @@
     "@reduxjs/toolkit": "^2.2.0",
     "@sentry/react": "^7.98.0",
     "@sentry/types": "^7.102.0",
+    "@tabler/icons-react": "^3.1.0",
     "@tanstack/react-table": "^8.11.3",
     "@types/react-slick": "^0.23.13",
     "axios": "^1.6.7",

diff --git a/dapp/src/acre-react/hooks/useStakeFlow.ts b/dapp/src/acre-react/hooks/useStakeFlow.ts
@@ -67,7 +67,8 @@ export function useStakeFlow(): UseStakeFlowReturn {
 
   const stake = useCallback(async () => {
     if (!stakeFlow) throw new Error("Initialize stake first")
-
+    // The current waiting time for repeat transactions is very long.
+    // TODO: Find the right value and pass it as additional options.
     await stakeFlow.stake()
   }, [stakeFlow])
 

diff --git a/dapp/src/assets/icons/Bitcoin.tsx → dapp/src/assets/icons/BitcoinIcon.tsx b/dapp/src/assets/icons/Bitcoin.tsx → dapp/src/assets/icons/BitcoinIcon.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
-export const Bitcoin = createIcon({
-  displayName: "Bitcoin",
+export const BitcoinIcon = createIcon({
+  displayName: "BitcoinIcon",
   viewBox: "0 0 28 28",
   path: [
     <g clipPath="url(#clip0_1935_2913)">

diff --git a/dapp/src/assets/icons/ConnectETHAccount.tsx → dapp/src/assets/icons/CableWithPlugIcon.tsx b/dapp/src/assets/icons/ConnectETHAccount.tsx → dapp/src/assets/icons/CableWithPlugIcon.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { createIcon } from "@chakra-ui/react"
 
-export const ConnectETHAccount = createIcon({
-  displayName: "ConnectETHAccount",
+export const CableWithPlugIcon = createIcon({
+  displayName: "CableWithPlugIcon",
   viewBox: "0 0 127 122",
   defaultProps: {
     fill: "none",
@@ -13,35 +13,17 @@ export const ConnectETHAccount = createIcon({
       stroke="url(#paint0_linear_3172_24686)"
       strokeWidth="2"
     />,
-    <g clipPath="url(#clip0_3172_24686)">
-      <rect
-        x="33"
-        y="33"
-        width="56"
-        height="56"
-        rx="28"
-        fill="white"
-        fillOpacity="0.1"
-      />
-      <rect x="33" y="33" width="56" height="56" fill="#231F20" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M60.9967 46.0004L60.9969 46V46.0007L70.4934 61.4816L60.9969 66.9965V66.9969L60.9967 66.9967L60.9965 66.9968L60.996 66.9963L51.5 61.4816L60.9961 46.0014L60.9965 46L60.9967 46.0004ZM60.9969 76.3989V76.401L51.5 63.2528L60.9969 68.7652V68.7664L60.9978 68.7654L70.5003 63.2529L60.9978 76.4012L60.9969 76.3989Z"
-        fill="#FFFDF9"
-      />
-    </g>,
     <path
       d="M127 55C127 58.866 123.866 62 120 62C116.134 62 113 58.866 113 55L113 50L127 50L127 55Z"
-      fill="#F34900"
+      fill="currentColor"
     />,
     <path
       d="M125 50L122 50L122 46.5C122 45.6716 122.672 45 123.5 45C124.328 45 125 45.6716 125 46.5L125 50Z"
-      fill="#F34900"
+      fill="currentColor"
     />,
     <path
       d="M118 50L115 50L115 46.5C115 45.6716 115.672 45 116.5 45C117.328 45 118 45.6716 118 46.5L118 50Z"
-      fill="#F34900"
+      fill="currentColor"
     />,
     <path
       d="M122.5 52.5L117.5 57.5M117.5 52.5L122.5 57.5"
@@ -59,8 +41,8 @@ export const ConnectETHAccount = createIcon({
         y2="62.5"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stopColor="#F34900" stopOpacity="0" />
-        <stop offset="1" stopColor="#F34900" />
+        <stop stopColor="currentColor" stopOpacity="0" />
+        <stop offset="1" stopColor="currentColor" />
       </linearGradient>
       <clipPath id="clip0_3172_24686">
         <rect x="33" y="33" width="56" height="56" rx="28" fill="white" />

diff --git a/dapp/src/assets/icons/ConnectBTCAccount.tsx b/dapp/src/assets/icons/ConnectBTCAccount.tsx
diff --git a/dapp/src/assets/icons/Ethereum.tsx b/dapp/src/assets/icons/Ethereum.tsx
diff --git a/dapp/src/assets/icons/EthereumIcon.tsx b/dapp/src/assets/icons/EthereumIcon.tsx
@@ -0,0 +1,31 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const EthereumIcon = createIcon({
+  displayName: "EthereumIcon",
+  viewBox: "0 0 56 57",
+  path: [
+    <g clipPath="url(#clip0_7755_23923)">
+      <rect
+        y="0.5"
+        width="56"
+        height="56"
+        rx="28"
+        fill="white"
+        fillOpacity="0.1"
+      />
+      <rect y="0.5" width="56" height="56" fill="#231F20" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M27.9967 13.5004L27.9969 13.5V13.5007L37.4934 28.9816L27.9969 34.4965V34.4969L27.9967 34.4967L27.9965 34.4968L27.996 34.4963L18.5 28.9816L27.9961 13.5014L27.9965 13.5L27.9967 13.5004ZM27.9969 43.8989V43.901L18.5 30.7528L27.9969 36.2652V36.2664L27.9978 36.2654L37.5003 30.7529L27.9978 43.9012L27.9969 43.8989Z"
+        fill="#FFFDF9"
+      />
+    </g>,
+    <defs>
+      <clipPath id="clip0_7755_23923">
+        <rect y="0.5" width="56" height="56" rx="28" fill="white" />
+      </clipPath>
+    </defs>,
+  ],
+})
diff --git a/dapp/src/assets/icons/index.ts b/dapp/src/assets/icons/index.ts
@@ -1,12 +1,8 @@
 export * from "./Info"
-export * from "./Bitcoin"
-export * from "./Ethereum"
 export * from "./ArrowUpRight"
 export * from "./ArrowLeft"
 export * from "./ArrowRight"
 export * from "./AcreLogo"
-export * from "./ConnectBTCAccount"
-export * from "./ConnectETHAccount"
 export * from "./AlertInfo"
 export * from "./stBTC"
 export * from "./BTC"
@@ -19,3 +15,6 @@ export * from "./SortDESC"
 export * from "./Pause"
 export * from "./ChevronRight"
 export * from "./LoadingSpinnerSuccessIcon"
+export * from "./BitcoinIcon"
+export * from "./EthereumIcon"
+export * from "./CableWithPlugIcon"
diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
@@ -7,7 +7,7 @@ import {
 } from "#/hooks"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import { TextMd } from "#/components/shared/Typography"
-import { Bitcoin, EthereumIcon } from "#/assets/icons"
+import { BitcoinIcon, EthereumIcon } from "#/assets/icons"
 import { Account } from "@ledgerhq/wallet-api-client"
 import { CURRENCY_ID_BITCOIN } from "#/constants"
 import {
@@ -64,7 +64,7 @@ export default function ConnectWallet() {
         <Button
           variant="card"
           colorScheme={customDataBtcAccount.colorScheme}
-          leftIcon={<Icon as={Bitcoin} boxSize={6} />}
+          leftIcon={<Icon as={BitcoinIcon} boxSize={6} />}
           onClick={handleConnectBitcoinAccount}
         >
           {customDataBtcAccount.text}

diff --git a/...l/ModalContentWrapper/ActionFormModal.tsx → ...ents/TransactionModal/ActionFormModal.tsx b/...l/ModalContentWrapper/ActionFormModal.tsx → ...ents/TransactionModal/ActionFormModal.tsx
@@ -17,8 +17,8 @@ import {
 import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types"
 import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
 import { logPromiseFailure } from "#/utils"
-import StakeFormModal from "../ActiveStakingStep/StakeFormModal"
-import UnstakeFormModal from "../ActiveUnstakingStep/UnstakeFormModal"
+import StakeFormModal from "./ActiveStakingStep/StakeFormModal"
+import UnstakeFormModal from "./ActiveUnstakingStep/UnstakeFormModal"
 
 const TABS = Object.values(ACTION_FLOW_TYPES)
 

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx
@@ -25,7 +25,6 @@ export default function DepositBTCModal() {
     setStatus(PROCESS_STATUSES.SUCCEEDED)
   }, [setStatus])
 
-  // TODO: After a failed attempt, we should display the message
   const onStakeBTCError = useCallback(() => {
     setStatus(PROCESS_STATUSES.FAILED)
   }, [setStatus])

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx
@@ -0,0 +1,80 @@
+import React, { useMemo } from "react"
+import {
+  Box,
+  Button,
+  HStack,
+  Icon,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "@chakra-ui/react"
+import { CableWithPlugIcon } from "#/assets/icons"
+import { TextMd, TextSm } from "#/components/shared/Typography"
+import IconWrapper from "#/components/shared/IconWrapper"
+import { getExpirationTimestamp, getPercentValue } from "#/utils"
+import { useCountdown } from "#/hooks"
+import { ONE_MINUTE_IN_SECONDS, ONE_SEC_IN_MILLISECONDS } from "#/constants"
+import { IconShieldCheckFilled, IconX } from "@tabler/icons-react"
+
+const getCounterData = (minutes: string, seconds: string) => {
+  const isLessThanMinute = parseInt(minutes, 10) <= 0
+
+  const progressPercent = `${
+    isLessThanMinute
+      ? getPercentValue(parseInt(seconds, 10), ONE_MINUTE_IN_SECONDS)
+      : 100
+  }%`
+  const label = `${isLessThanMinute ? "0" : "1"}:${seconds}`
+
+  return { label, progressPercent }
+}
+
+export default function RetryModal({ retry }: { retry: () => void }) {
+  const retryTimestamp = useMemo(
+    () =>
+      getExpirationTimestamp(ONE_MINUTE_IN_SECONDS * ONE_SEC_IN_MILLISECONDS),
+    [],
+  )
+  const { minutes, seconds } = useCountdown(retryTimestamp, true, retry)
+
+  const { label, progressPercent } = getCounterData(minutes, seconds)
+
+  return (
+    <>
+      <ModalHeader color="red.400">Oops! There was an error.</ModalHeader>
+      <ModalBody gap={10} pt={4}>
+        <IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.400">
+          <Icon as={IconX} color="red.400" boxSize={14} strokeWidth={1} />
+        </IconWrapper>
+        <TextMd>
+          Your deposit didn&apos;t go through but no worries, your funds are
+          safe.
+        </TextMd>
+        <HStack gap={1}>
+          <TextMd>Auto-retry in</TextMd>
+          <TextMd fontWeight="bold" textAlign="left" minW={10}>
+            {label}
+          </TextMd>
+          <Box
+            w={3}
+            h={3}
+            aspectRatio={1}
+            borderRadius="50%"
+            background={`conic-gradient(var(--chakra-colors-brand-400) ${progressPercent}, transparent 0)`}
+            transition="background"
+          />
+          <Box />
+        </HStack>
+      </ModalBody>
+      <ModalFooter mt={4}>
+        <Button size="lg" width="100%" onClick={retry}>
+          Retry
+        </Button>
+        <HStack>
+          <Icon as={IconShieldCheckFilled} boxSize={5} color="gold.700" />
+          <TextSm color="grey.700">Your funds are secure.</TextSm>
+        </HStack>
+      </ModalFooter>
+    </>
+  )
+}