Handling an error that occurs after a deposit action

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",
     "axios": "^1.6.7",
     "ethers": "^6.10.0",

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)">

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" />

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>,
+  ],
+})

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"

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}

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])

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 { dateToUnixTimestamp } 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 getRetryTimestamp = () => {
+  const today = new Date()
+  const retryDate = new Date(
+    today.getTime() + ONE_MINUTE_IN_SECONDS * ONE_SEC_IN_MILLISECONDS,
+  )
+
+  return dateToUnixTimestamp(retryDate)
+}
+
+const getProgressPercent = (seconds: string) =>
+  ((ONE_MINUTE_IN_SECONDS - parseInt(seconds, 10)) * 100) /
+  ONE_MINUTE_IN_SECONDS
+
+export default function RetryModal({ retry }: { retry: () => void }) {
+  const retryTimestamp = useMemo(() => getRetryTimestamp(), [])
+  const { minutes, seconds } = useCountdown(retryTimestamp, true, retry)
+
+  const isLessThanMinute = parseInt(minutes, 10) <= 0
+  const counterLabel = `${isLessThanMinute ? "0" : "1"}:${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}>
+            {counterLabel}
+          </TextMd>
+          <Box
+            w={3}
+            h={3}
+            aspectRatio={1}
+            borderRadius="50%"
+            background={`conic-gradient(transparent ${
+              isLessThanMinute ? getProgressPercent(seconds) : 0
+            }%, var(--chakra-colors-brand-400) 0)`}
+            transform="scaleX(-1)"
+            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>
+    </>
+  )
+}