feat - add text for deposit and reclaim page

src/comps/Deposit.tsx

@@ -44,6 +44,7 @@ import { useQuery } from "@tanstack/react-query";
 import getBtcBalance from "@/actions/get-btc-balance";
 import { useDepositStatus } from "@/hooks/use-deposit-status";
 import { useEmilyDeposit } from "@/util/use-emily-deposit";
+import Link from "next/link";
 /*
   deposit flow has 3 steps
   1) enter amount you want to deposit
@@ -448,12 +449,33 @@ type DepositFlowReviewProps = DepositFlowStepProps & {
 };
 
 const DepositFlowReview = ({ txId }: DepositFlowReviewProps) => {
-  const { status, recipient, stacksTxId, statusResponse } =
-    useDepositStatus(txId);
+  const {
+    confirmedBlockHeight,
+    currentBlockHeight,
+    status,
+    recipient,
+    stacksTxId,
+    statusResponse,
+  } = useDepositStatus(txId);
+
   const { WALLET_NETWORK: walletNetwork } = useAtomValue(bridgeConfigAtom);
   const btcAmount = useMemo(() => {
     return (statusResponse?.vout[0].value || 0) / 1e8;
   }, [statusResponse?.vout]);
+
+  console.log("confirmedBlockHeight", confirmedBlockHeight);
+  console.log("currentBlockHeight", currentBlockHeight);
+
+  const showDepositWarning = useMemo(() => {
+    if (confirmedBlockHeight === 0) {
+      return false;
+    } else {
+      const elapsedBlocks = currentBlockHeight - confirmedBlockHeight;
+
+      console.log("elapsedBlocks,", elapsedBlocks);
+      return elapsedBlocks >= 6;
+    }
+  }, [confirmedBlockHeight, currentBlockHeight]);
   return (
     <FlowContainer>
       <>
@@ -479,6 +501,23 @@ const DepositFlowReview = ({ txId }: DepositFlowReviewProps) => {
             To avoid losing your progress, please keep this page open.
           </SubText>
         </div>
+        {showDepositWarning && (
+          <div className="flex flex-1 items-end">
+            <SubText>
+              There is a delay in processing your deposit, but signers are still
+              working on it and your funds are secure. Please contact our
+              support team
+              <Link
+                className="text-blue-500 underline"
+                href="https://direct.lc.chat/18945692/"
+              >
+                {"  "}
+                here{"  "}
+              </Link>
+              to help us expedite it.”
+            </SubText>
+          </div>
+        )}
         <div className="flex flex-1 items-end">
           <DepositStepper status={status} txId={txId} />
         </div>
@@ -487,7 +526,9 @@ const DepositFlowReview = ({ txId }: DepositFlowReviewProps) => {
           <div className="w-full flex-row flex justify-between items-center">
             <a
               className="w-40 rounded-lg py-3 flex justify-center items-center flex-row bg-orange"
-              href={`https://explorer.hiro.so/txid/${stacksTxId}?chain=${walletNetwork === "mainnet" ? "mainnet" : "testnet"}`}
+              href={`https://explorer.hiro.so/txid/${stacksTxId}?chain=${
+                walletNetwork === "mainnet" ? "mainnet" : "testnet"
+              }`}
               target="_blank"
               rel="noreferrer"
             >

src/comps/ReclaimManager.tsx

@@ -30,6 +30,7 @@ import {
   signPSBTLeather,
   signPSBTXverse,
 } from "@/util/wallet-utils/src/sign-psbt";
+import Link from "next/link";
 
 /*
   Goal : User server side rendering as much as possible
@@ -453,6 +454,20 @@ const ReclaimDeposit = ({
               {useShortAddress(getWalletAddress() || "")}
             </p>
           </div>
+          <div className="flex flex-1 items-end">
+            <SubText>
+              Please note that we have received reports of errors with Ledgers
+              running the reclaim function - if you are using a ledger and
+              experience this please contact our support team
+              <Link
+                className="text-blue-500 underline"
+                href="https://direct.lc.chat/18945692/"
+              >
+                {"  "}
+                here{"  "}
+              </Link>
+            </SubText>
+          </div>
         </div>
         <div className="flex flex-1 ">
           <div className="w-full p-4 bg-lightOrange h-20 rounded-lg flex flex-row items-center justify-center gap-2">

src/hooks/use-deposit-status.ts

@@ -31,6 +31,9 @@ export function useDepositStatus(txId: string) {
     ReturnType<typeof getRawTransaction>
   > | null>(null);
 
+  const [currentBlockHeight, setCurrentBlockHeight] = useState<number>(0);
+  const [confirmedBlockHeight, setConfirmedBlockHeight] = useState<number>(0);
+
   const { EMILY_URL: emilyUrl, RECLAIM_LOCK_TIME } =
     useAtomValue(bridgeConfigAtom);
 
@@ -54,6 +57,7 @@ export function useDepositStatus(txId: string) {
     ) {
       const check = async () => {
         const info = await getRawTransaction(txId);
+
         const txInfo = await getEmilyDepositInfo({
           txId,
           emilyURL: emilyUrl!,
@@ -72,6 +76,9 @@ export function useDepositStatus(txId: string) {
           return router.push(`/?txId=${rbfTxId}&step=3`);
         }
         setStatusResponse(info);
+
+        console.log("info", info);
+        console.log("txInfo", txInfo);
         if (info.status.confirmed) {
           setEmilyResponse(txInfo);
 
@@ -81,8 +88,14 @@ export function useDepositStatus(txId: string) {
             return;
           }
           const currentBlockHeight = await getCurrentBlockHeight();
+
+          setCurrentBlockHeight(currentBlockHeight);
+
+          const confirmedBlockTime = info.status.block_height || 0;
+          setConfirmedBlockHeight(confirmedBlockTime);
           const unlockBlock =
             Number(RECLAIM_LOCK_TIME || 144) + info.status.block_height - 1;
+
           const isPastLockTime = currentBlockHeight >= unlockBlock;
           if (isPastLockTime) {
             setTransferTxStatus(DepositStatus.Failed);
@@ -111,5 +124,7 @@ export function useDepositStatus(txId: string) {
     recipient: recipient && (Cl.deserialize(recipient) as PrincipalCV).value,
     stacksTxId: stacksTxId,
     statusResponse,
+    currentBlockHeight,
+    confirmedBlockHeight,
   };
 }