feat: backstop contract reroute

Merge pull request #195 from Neko-Protocol/chore/backstop-contract-reroute

Author: aguilar1x

apps/web-app/package.json

@@ -16,6 +16,7 @@
     "@hookform/resolvers": "^5.2.2",
     "@mui/icons-material": "^5.15.0",
     "@mui/material": "^5.15.0",
+    "@neko/backstop": "0.0.0",
     "@neko/config": "0.0.0",
     "@neko/defindex-vault": "0.0.0",
     "@neko/lending": "0.0.0",

apps/web-app/src/features/backstop/components/ui/BackstopActionPanel.tsx

@@ -9,6 +9,8 @@ interface BackstopActionPanelProps {
   isLoading: boolean;
   walletBalance: string;
   depositedAmount: string;
+  activeDepositAmount: string;
+  queuedDepositAmount: string;
   hasWallet: boolean;
   backstopTokenConfigured: boolean;
   inWithdrawalQueue: boolean;
@@ -22,6 +24,8 @@ export function BackstopActionPanel({
   isLoading,
   walletBalance,
   depositedAmount,
+  activeDepositAmount,
+  queuedDepositAmount,
   hasWallet,
   backstopTokenConfigured,
   inWithdrawalQueue,
@@ -35,6 +39,7 @@ export function BackstopActionPanel({
   const [withdrawAmount, setWithdrawAmount] = useState("");
 
   const hasDeposit = parseFloat(depositedAmount) > 0;
+  const hasActiveDeposit = parseFloat(activeDepositAmount) > 0;
 
   const canDeposit =
     hasWallet &&
@@ -45,8 +50,7 @@ export function BackstopActionPanel({
 
   const canQueue =
     hasWallet &&
-    hasDeposit &&
-    !inWithdrawalQueue &&
+    hasActiveDeposit &&
     !!withdrawAmount &&
     parseFloat(withdrawAmount) > 0 &&
     !isLoading;
@@ -145,7 +149,7 @@ export function BackstopActionPanel({
       {/* Withdraw */}
       {activeTab === "withdraw" && (
         <div className="flex flex-col gap-4">
-          {!inWithdrawalQueue ? (
+          {hasActiveDeposit && (
             <>
               <BackstopInfoAlert variant="warning">
                 To withdraw, you must first queue your withdrawal and wait{" "}
@@ -157,13 +161,13 @@ export function BackstopActionPanel({
                   <span className="text-white/50 text-sm font-medium">
                     Amount to queue
                   </span>
-                  {parseFloat(depositedAmount) > 0 && (
+                  {parseFloat(activeDepositAmount) > 0 && (
                     <button
-                      onClick={() => setWithdrawAmount(depositedAmount)}
+                      onClick={() => setWithdrawAmount(activeDepositAmount)}
                       disabled={isLoading}
                       className="text-[#229EDF] text-xs font-semibold hover:text-[#229EDF]/70 transition-colors disabled:opacity-40"
                     >
-                      Max: {parseFloat(depositedAmount).toFixed(4)}
+                      Max: {parseFloat(activeDepositAmount).toFixed(4)}
                     </button>
                   )}
                 </div>
@@ -180,9 +184,9 @@ export function BackstopActionPanel({
               </div>
 
               <div className="bg-[#252525] rounded-xl p-3.5">
-                <p className="text-white/40 text-xs">Deposited balance</p>
+                <p className="text-white/40 text-xs">Available to queue</p>
                 <p className="text-white font-bold text-sm mt-0.5">
-                  {depositedAmount}
+                  {activeDepositAmount}
                 </p>
               </div>
 
@@ -198,18 +202,24 @@ export function BackstopActionPanel({
                 {isLoading ? "Processing…" : "Queue Withdrawal (17-day wait)"}
               </button>
             </>
-          ) : (
+          )}
+
+          {inWithdrawalQueue && (
             <>
+              {hasActiveDeposit && (
+                <div className="border-t border-white/5 my-1" />
+              )}
+
               <div className="bg-[#252525] rounded-xl p-3.5">
                 <p className="text-white/40 text-xs">Amount queued</p>
                 <p className="text-white font-bold text-sm mt-0.5">
-                  {depositedAmount}
+                  {queuedDepositAmount}
                 </p>
               </div>
 
               <button
                 onClick={() =>
-                  void onWithdraw(depositedAmount).then(() =>
+                  void onWithdraw(queuedDepositAmount).then(() =>
                     setWithdrawAmount("")
                   )
                 }
@@ -224,6 +234,12 @@ export function BackstopActionPanel({
               </button>
             </>
           )}
+
+          {!hasActiveDeposit && !inWithdrawalQueue && (
+            <BackstopInfoAlert variant="info">
+              No active deposit to withdraw.
+            </BackstopInfoAlert>
+          )}
         </div>
       )}
     </div>

apps/web-app/src/features/backstop/hooks/useBackstop.ts

@@ -21,7 +21,6 @@ import { fromSmallestUnit } from "@/lib/helpers/tokenUtils";
 import { rpcUrl, stellarNetwork } from "@/lib/config/stellar.config";
 
 const WITHDRAWAL_QUEUE_DAYS = 17;
-const WITHDRAWAL_QUEUE_SECONDS = BigInt(WITHDRAWAL_QUEUE_DAYS * 24 * 60 * 60);
 
 export function useBackstop(contractId: string) {
   const [isLoading, setIsLoading] = useState(false);
@@ -108,7 +107,7 @@ export function useBackstop(contractId: string) {
           allowHttp: stellarNetwork === "LOCAL",
         });
 
-        // Approve backstop token to the lending contract first (if token is configured)
+        // Approve backstop token to the backstop contract first (if token is configured)
         if (backstopTokenAddress) {
           const approveXdr = await approveToken(
             backstopTokenAddress,
@@ -259,21 +258,32 @@ export function useBackstop(contractId: string) {
     ]
   );
 
-  // Derive queue expiry info
+  // Derive queue expiry info — queuedAt now holds the expiration timestamp
+  // directly from the backstop contract's Q4W.exp field.
   const queueExpiresAt: Date | null =
     depositInfo?.inWithdrawalQueue && depositInfo.queuedAt
-      ? new Date(Number(depositInfo.queuedAt + WITHDRAWAL_QUEUE_SECONDS) * 1000)
+      ? new Date(Number(depositInfo.queuedAt) * 1000)
       : null;
 
   const queueExpired = queueExpiresAt !== null && new Date() >= queueExpiresAt;
 
+  const depositedAmount = depositInfo
+    ? fromSmallestUnit(depositInfo.amount.toString(), 7)
+    : "0";
+  const activeDepositAmount = depositInfo
+    ? fromSmallestUnit(depositInfo.activeAmount.toString(), 7)
+    : "0";
+  const queuedDepositAmount = depositInfo
+    ? fromSmallestUnit(depositInfo.queuedAmount.toString(), 7)
+    : "0";
+
   return {
     isLoading,
     walletBalance: walletBalance ?? "0",
     isLoadingWalletBalance,
-    depositedAmount: depositInfo
-      ? fromSmallestUnit(depositInfo.amount.toString(), 7)
-      : "0",
+    depositedAmount,
+    activeDepositAmount,
+    queuedDepositAmount,
     isLoadingDeposit,
     inWithdrawalQueue: depositInfo?.inWithdrawalQueue ?? false,
     queueExpiresAt,

apps/web-app/src/features/lending/components/ui/BackstopPanel.tsx

@@ -3,20 +3,20 @@
 import { useState } from "react";
 import { Shield, RefreshCw } from "lucide-react";
 import { useBackstop } from "@/features/backstop/hooks/useBackstop";
-import { networks } from "@neko/lending";
+import { networks as backstopNetworks } from "@neko/backstop";
 import { BackstopQueueStatus } from "@/features/backstop/components/ui/BackstopQueueStatus";
 import { BackstopActionPanel } from "@/features/backstop/components/ui/BackstopActionPanel";
 import { BackstopInfoAlert } from "@/features/backstop/components/ui/BackstopInfoAlert";
 
 const POOLS = [
   {
     label: "Crypto Pool",
-    contractId: networks.testnet.pool1ContractId,
+    contractId: backstopNetworks.testnet.pool1ContractId,
     assets: "USDC · XLM",
   },
   {
     label: "RWA Pool",
-    contractId: networks.testnet.pool2ContractId,
+    contractId: backstopNetworks.testnet.pool2ContractId,
     assets: "USTRY · CETES · USDY · PYUSD · KTB",
   },
 ];
@@ -30,6 +30,8 @@ export function BackstopPanel() {
     walletBalance,
     isLoadingWalletBalance,
     depositedAmount,
+    activeDepositAmount,
+    queuedDepositAmount,
     isLoadingDeposit,
     inWithdrawalQueue,
     queueExpiresAt,
@@ -133,6 +135,8 @@ export function BackstopPanel() {
           isLoading={isLoading}
           walletBalance={walletBalance}
           depositedAmount={depositedAmount}
+          activeDepositAmount={activeDepositAmount}
+          queuedDepositAmount={queuedDepositAmount}
           hasWallet={hasWallet}
           backstopTokenConfigured={backstopTokenConfigured}
           inWithdrawalQueue={inWithdrawalQueue}

apps/web-app/src/lib/constants/contracts.ts

@@ -19,3 +19,9 @@ export const LENDING_POOL2_CONTRACT_ID =
 
 export const ORACLE_CONTRACT_ID =
   "CCFWASXOQJVJR5WVHRQPQTLCZC3SCBAL2Z67YY4JJAO5GLJLJABQT47I";
+
+export const BACKSTOP_CONTRACT_ID =
+  "CDTFRINWJOMLGYS64N7JICGNBCFKKSPJBNMI7FHTDOHZQ2RAKTJEXCRO";
+
+export const BACKSTOP_POOL2_CONTRACT_ID =
+  "CARYWBLZCXSSZSSGL2VRVDS57P7KIV7NOBESGBR3SKQXDIFDDZRRFHQ6";