Update DepositBTCModal component

thesis · May 8, 2024 · 148117f · 148117f
1 parent d4ea05b
commit 148117f
Showing 1 changed file with 24 additions and 22 deletions.
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react"
+import React, { useCallback } from "react"
 import {
   useDepositBTCTransaction,
   useDepositTelemetry,
@@ -9,13 +9,16 @@ import {
   useTransactionContext,
   useWalletContext,
 } from "#/hooks"
-import { TextMd } from "#/components/shared/Typography"
 import { logPromiseFailure } from "#/utils"
 import { PROCESS_STATUSES } from "#/types"
-import { CardAlert } from "#/components/shared/alerts"
 import { TOASTS, TOAST_IDS } from "#/types/toast"
-import StakingStepsModalContent from "./StakingStepsModalContent"
+import { ModalBody, ModalHeader, Highlight, useTimeout } from "@chakra-ui/react"
+import Spinner from "#/components/shared/Spinner"
+import { TextMd } from "#/components/shared/Typography"
+import { CardAlert } from "#/components/shared/alerts"
+import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
 
+const DELAY = ONE_SEC_IN_MILLISECONDS * 3
 const TOAST_ID = TOAST_IDS.DEPOSIT_TRANSACTION_ERROR
 const TOAST = TOASTS[TOAST_ID]
 
@@ -27,9 +30,6 @@ export default function DepositBTCModal() {
   const depositTelemetry = useDepositTelemetry()
   const { closeToast, openToast } = useToast()
 
-  const [isLoading, setIsLoading] = useState(false)
-  const [buttonText, setButtonText] = useState("Deposit BTC")
-
   const onStakeBTCSuccess = useCallback(
     () => setStatus(PROCESS_STATUSES.SUCCEEDED),
     [setStatus],
@@ -57,7 +57,6 @@ export default function DepositBTCModal() {
       id: TOAST_ID,
       render: TOAST,
     })
-    setButtonText("Try again")
   }, [openToast])
 
   const onDepositBTCError = useCallback(() => showError(), [showError])
@@ -71,13 +70,11 @@ export default function DepositBTCModal() {
     if (!tokenAmount?.amount || !btcAddress || !depositReceipt || !ethAccount)
       return
 
-    setIsLoading(true)
     const response = await depositTelemetry(
       depositReceipt,
       btcAddress,
       ethAccount.address,
     )
-    setIsLoading(false)
 
     if (response.verificationStatus === "valid") {
       logPromiseFailure(sendBitcoinTransaction(tokenAmount?.amount, btcAddress))
@@ -98,18 +95,23 @@ export default function DepositBTCModal() {
     logPromiseFailure(handledDepositBTC())
   }, [handledDepositBTC])
 
+  useTimeout(handledDepositBTCWrapper, DELAY)
+
   return (
-    <StakingStepsModalContent
-      buttonText={buttonText}
-      activeStep={1}
-      isLoading={isLoading}
-      onClick={handledDepositBTCWrapper}
-    >
-      <CardAlert status="error">
-        <TextMd>
-          Make a Bitcoin transaction to deposit and stake your BTC.
-        </TextMd>
-      </CardAlert>
-    </StakingStepsModalContent>
+    <>
+      <ModalHeader>Waiting transaction...</ModalHeader>
+      <ModalBody>
+        <Spinner size="xl" />
+        <TextMd>Please complete the transaction in your wallet.</TextMd>
+        <CardAlert>
+          <TextMd>
+            <Highlight query="Rewards" styles={{ fontWeight: "bold" }}>
+              You will receive your Rewards once the deposit transaction is
+              completed.
+            </Highlight>
+          </TextMd>
+        </CardAlert>
+      </ModalBody>
+    </>
   )
 }