@oasisprotocol/privana-sdk 0.2.0 → 0.2.1

package/dist/index.js

@@ -8,7 +8,7 @@ import { twMerge } from 'tailwind-merge';
 import { createSiweMessage } from 'viem/siwe';
 import { WagmiContext, useAccount, useWalletClient, useConfig, useWriteContract, useSendTransaction, useChainId, useSwitchChain, useBalance as useBalance$1, useReadContract } from 'wagmi';
 import { watchAccount, getAccount, getWalletClient } from 'wagmi/actions';
-import { waitForTransactionReceipt as waitForTransactionReceipt$1, getTransaction, call } from 'viem/actions';
+import { getTransactionReceipt as getTransactionReceipt$1, waitForTransactionReceipt as waitForTransactionReceipt$1, getTransaction, call } from 'viem/actions';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -29,7 +29,7 @@ var config_default = {
       chainId: 23295,
       name: "Sapphire Testnet",
       accountingContract: "0xaF8e5de153A584528B57DD4B9B0195956BBDF571",
-      apiUrl: "https://flexvaults-staging.rofl.build"
+      apiUrl: "https://testnet.privana.finance"
     },
     mainnet: {
       chainId: 23294,
@@ -1608,6 +1608,12 @@ function getAction(client, actionFn, name) {
 function getChainId2(config) {
   return config.state.chainId;
 }
+async function getTransactionReceipt(config, parameters) {
+  const { chainId, ...rest } = parameters;
+  const client = config.getClient({ chainId });
+  const action = getAction(client, getTransactionReceipt$1, "getTransactionReceipt");
+  return action(rest);
+}
 async function waitForTransactionReceipt(config, parameters) {
   const { chainId, timeout = 0, ...rest } = parameters;
   const client = config.getClient({ chainId });
@@ -1688,6 +1694,36 @@ function useEnsureCorrectChain() {
 }
 
 // src/sdk/hooks/use-deposit.ts
+var STALE_MS = 30 * 60 * 1e3;
+function storageKey(address) {
+  return `privana:pending-deposit:${address.toLowerCase()}`;
+}
+function savePendingDeposit(address, data) {
+  try {
+    sessionStorage.setItem(storageKey(address), JSON.stringify(data));
+  } catch {
+  }
+}
+function loadPendingDeposit(address) {
+  try {
+    const raw = sessionStorage.getItem(storageKey(address));
+    if (!raw) return null;
+    const data = JSON.parse(raw);
+    if (Date.now() - data.savedAt > STALE_MS) {
+      clearPendingDeposit(address);
+      return null;
+    }
+    return data;
+  } catch {
+    return null;
+  }
+}
+function clearPendingDeposit(address) {
+  try {
+    sessionStorage.removeItem(storageKey(address));
+  } catch {
+  }
+}
 function useDeposit(options = {}) {
   const { address } = useAccount();
   const { client, enabledTokens, getChainById: getChainById2 } = usePrivanaContext();
@@ -1755,13 +1791,19 @@ function useDeposit(options = {}) {
   const isSendingTx = isWritingContract || isSendingNative;
   const sendError = writeError ?? sendNativeError;
   const { ensureCorrectChain } = useEnsureCorrectChain();
+  const invalidateGeneration = useCallback(() => {
+    generationRef.current++;
+  }, []);
   useEffect(() => {
     return () => {
+      invalidateGeneration();
       if (pollIntervalRef.current) {
         clearTimeout(pollIntervalRef.current);
+        pollIntervalRef.current = null;
       }
     };
-  }, []);
+  }, [invalidateGeneration]);
+  const resumedAddressRef = useRef(void 0);
   const stopPolling = useCallback(() => {
     if (pollIntervalRef.current) {
       clearTimeout(pollIntervalRef.current);
@@ -1771,6 +1813,7 @@ function useDeposit(options = {}) {
   const reset = useCallback(() => {
     generationRef.current++;
     stopPolling();
+    if (address) clearPendingDeposit(address);
     verificationContextRef.current = null;
     setDepositAddress(null);
     setTxHash(void 0);
@@ -1783,7 +1826,7 @@ function useDeposit(options = {}) {
     addressMutation.reset();
     resetWriteContract();
     resetSendTransaction();
-  }, [addressMutation, resetWriteContract, resetSendTransaction, stopPolling]);
+  }, [address, addressMutation, resetWriteContract, resetSendTransaction, stopPolling]);
   const runVerification = useCallback(
     async (ctx, generation) => {
       const isStale = () => generation !== generationRef.current;
@@ -1811,6 +1854,7 @@ function useDeposit(options = {}) {
         if (triggerResult.status === "credited") {
           setIsWaitingForProcessing(false);
           verificationContextRef.current = null;
+          if (address) clearPendingDeposit(address);
           queryClient.invalidateQueries({ queryKey: ["accounting-balance"] });
           queryClient.invalidateQueries({ queryKey: ["accounting-history"] });
           onCreditedRef.current?.(hash, triggerResult);
@@ -1844,6 +1888,7 @@ function useDeposit(options = {}) {
               stopPolling();
               setIsWaitingForProcessing(false);
               verificationContextRef.current = null;
+              if (address) clearPendingDeposit(address);
               queryClient.invalidateQueries({ queryKey: ["accounting-balance"] });
               queryClient.invalidateQueries({ queryKey: ["accounting-history"] });
               onCreditedRef.current?.(hash, result);
@@ -1883,7 +1928,7 @@ function useDeposit(options = {}) {
         );
       }
     },
-    [client, executePrivateRead, pollInterval, pollTimeout, queryClient, stopPolling]
+    [address, client, executePrivateRead, pollInterval, pollTimeout, queryClient, stopPolling]
   );
   const retryVerification = useCallback(async () => {
     const ctx = verificationContextRef.current;
@@ -1895,6 +1940,55 @@ function useDeposit(options = {}) {
     const generation = generationRef.current;
     await runVerification(ctx, generation);
   }, [runVerification, stopPolling]);
+  useEffect(() => {
+    if (!address || resumedAddressRef.current === address) return;
+    const persisted = loadPendingDeposit(address);
+    if (!persisted) return;
+    resumedAddressRef.current = address;
+    const hash = persisted.txHash;
+    setTxHash(hash);
+    setDepositAddress(persisted.depositAddress);
+    setIsWaitingForConfirmation(true);
+    const ctx = {
+      hash,
+      chainId: persisted.chainId,
+      amount: BigInt(persisted.amount)
+    };
+    verificationContextRef.current = ctx;
+    const generation = ++generationRef.current;
+    const isStale = () => generation !== generationRef.current;
+    (async () => {
+      try {
+        let confirmed = false;
+        try {
+          await getTransactionReceipt(config, { hash, chainId: persisted.chainId });
+          confirmed = true;
+        } catch {
+        }
+        if (!confirmed) {
+          await waitForTransactionReceipt(config, {
+            hash,
+            chainId: persisted.chainId,
+            confirmations
+          });
+        }
+        if (isStale()) return;
+        setIsWaitingForConfirmation(false);
+        onDepositSuccessRef.current?.(hash);
+        queryClient.invalidateQueries({ queryKey: ["readContract"] });
+        await runVerification(ctx, generation);
+      } catch (err) {
+        if (isStale()) return;
+        setIsWaitingForConfirmation(false);
+        stopPolling();
+        const error2 = err instanceof Error ? err : new Error("Deposit verification failed");
+        setIsWaitingForProcessing(false);
+        setDepositError(error2);
+        setVerificationFailed(true);
+        onErrorRef.current?.(error2);
+      }
+    })();
+  }, [address, config, confirmations, queryClient, runVerification, stopPolling]);
   const deposit = useCallback(
     async (params) => {
       if (verificationContextRef.current) {
@@ -1951,10 +2045,21 @@ function useDeposit(options = {}) {
           amount: params.amount
         };
         verificationContextRef.current = ctx;
+        savePendingDeposit(address, {
+          txHash: hash,
+          chainId: sourceChain.id,
+          amount: params.amount.toString(),
+          depositAddress: addrResponse,
+          savedAt: Date.now()
+        });
         try {
           setIsWaitingForConfirmation(true);
           try {
-            await waitForTransactionReceipt(config, { hash, confirmations });
+            await waitForTransactionReceipt(config, {
+              hash,
+              chainId: sourceChain.id,
+              confirmations
+            });
           } finally {
             if (!isStale()) setIsWaitingForConfirmation(false);
           }
@@ -3152,6 +3257,7 @@ function DepositForm({
   selectedToken,
   onTokenSelect,
   onPendingChange,
+  onUnsafeToCloseChange,
   onSuccess
 }) {
   const { isConnected, address } = useAccount();
@@ -3180,7 +3286,7 @@ function DepositForm({
     }
   });
   const walletBalance = isNative ? nativeBalanceData?.value : erc20Balance;
-  const formattedWalletBalance = walletBalance ? formatTokenAmount(walletBalance.toString(), selectedToken.decimals) : "0";
+  const formattedWalletBalance = walletBalance ? formatTokenAmount(walletBalance.toString(), selectedToken.decimals) : "0.00";
   const handleMaxClick = () => {
     if (formattedWalletBalance && parseFloat(formattedWalletBalance) > 0) {
       setAmount(formattedWalletBalance.replace(/[\s\u2009]/g, ""));
@@ -3247,6 +3353,9 @@ function DepositForm({
   useEffect(() => {
     onPendingChange?.(isPending && !cancelled);
   }, [isPending, cancelled, onPendingChange]);
+  useEffect(() => {
+    onUnsafeToCloseChange?.((isGettingAddress || isSendingTransaction) && !cancelled);
+  }, [isGettingAddress, isSendingTransaction, cancelled, onUnsafeToCloseChange]);
   const handleCancel = () => {
     setCancelled(true);
     reset();
@@ -3410,7 +3519,12 @@ function DepositForm({
     )
   ] });
 }
-function WithdrawForm({ selectedToken, onTokenSelect, onPendingChange }) {
+function WithdrawForm({
+  selectedToken,
+  onTokenSelect,
+  onPendingChange,
+  onUnsafeToCloseChange
+}) {
   const { isConnected, address } = useAccount();
   const { chains, getChainById: getChainById2 } = usePrivanaContext();
   const [amount, setAmount] = useState("");
@@ -3463,8 +3577,10 @@ function WithdrawForm({ selectedToken, onTokenSelect, onPendingChange }) {
     }
   }, [error]);
   useEffect(() => {
-    onPendingChange?.(isPending && !cancelled);
-  }, [isPending, cancelled, onPendingChange]);
+    const pending = isPending && !cancelled;
+    onPendingChange?.(pending);
+    onUnsafeToCloseChange?.(pending);
+  }, [isPending, cancelled, onPendingChange, onUnsafeToCloseChange]);
   const handleCancel = () => {
     setCancelled(true);
     reset();
@@ -3623,9 +3739,6 @@ function CloseIcon() {
     }
   ) });
 }
-function SearchIcon() {
-  return /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full border-[1.5px] border-current" });
-}
 function ChevronRight() {
   return /* @__PURE__ */ jsx("svg", { width: "10", height: "5", viewBox: "0 0 12 6", className: "-rotate-90", children: /* @__PURE__ */ jsx(
     "path",
@@ -3686,7 +3799,7 @@ function BalanceCards({
   });
   const { totalLocked, isLoading: lockedLoading } = useLockedFunds({ enabled: showLockedFunds });
   const formattedBalance = formatTokenAmount(balanceWei, selectedToken.decimals);
-  const formattedLocked = showLockedFunds ? formatTokenAmount(String(totalLocked), selectedToken.decimals) : "0";
+  const formattedLocked = showLockedFunds ? formatTokenAmount(String(totalLocked), selectedToken.decimals) : "0.00";
   return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-2", disabled && "opacity-50"), children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -3749,7 +3862,7 @@ function Tabs({
           "div",
           {
             className: cn(
-              "bg-input absolute top-1 bottom-1 left-1 w-[calc(50%-4px)] rounded-md transition-transform duration-200",
+              "bg-input absolute top-1 bottom-1 left-1 w-[calc(50%-8px)] rounded-md transition-transform duration-200",
               activeTab === "withdraw" && "translate-x-[calc(100%+8px)]"
             )
           }
@@ -3784,7 +3897,7 @@ function Tabs({
     }
   );
 }
-function LockedFundsView({ onBack, onClose }) {
+function LockedFundsView({ onBack }) {
   const { getTokenById } = usePrivanaContext();
   const { locks, isLoading } = useLockedFunds();
   const { unlockFunds, unlockAllExpired, isPending } = useUnlockFunds();
@@ -3817,27 +3930,17 @@ function LockedFundsView({ onBack, onClose }) {
   };
   const expiredCount = locks.filter((l) => l.is_expired).length;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onBack,
-            className: "text-muted-foreground hover:text-foreground flex h-6 w-6 cursor-pointer items-center justify-center transition-colors",
-            children: /* @__PURE__ */ jsx(ChevronLeft, {})
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-foreground text-xl leading-6 font-medium", children: "Locked Funds" })
-      ] }),
-      onClose && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-5 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: onClose,
-          className: "text-muted-foreground hover:text-foreground flex h-6 w-6 cursor-pointer items-center justify-center transition-colors",
-          children: /* @__PURE__ */ jsx(CloseIcon, {})
+          onClick: onBack,
+          className: "text-muted-foreground hover:text-foreground -ml-2 flex h-6 w-6 cursor-pointer items-center justify-center transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronLeft, {})
         }
-      )
-    ] }),
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-foreground text-xl leading-6 font-medium", children: "Locked Funds" })
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "bg-muted flex min-h-0 flex-1 flex-col rounded-[10px] p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-3", children: [1, 2].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex animate-pulse items-center gap-3 rounded-lg p-3", children: [
         /* @__PURE__ */ jsx("div", { className: "bg-secondary h-10 w-10 rounded-full" }),
@@ -3922,34 +4025,24 @@ function BalanceTokenRow({ token }) {
     isLoading ? /* @__PURE__ */ jsx("span", { className: "bg-secondary h-4 w-16 animate-pulse rounded" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: formattedBalance })
   ] });
 }
-function BalanceDetailsView({ onBack, onClose }) {
+function BalanceDetailsView({ onBack }) {
   const { enabledTokens, chains } = usePrivanaContext();
   const [selectedChainId, setSelectedChainId] = useState(chains[0]?.id ?? 84532);
   const chainTokens = useMemo(() => {
     return enabledTokens.filter((t) => t.chainId === selectedChainId);
   }, [enabledTokens, selectedChainId]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onBack,
-            className: "text-muted-foreground hover:text-foreground flex h-6 w-6 cursor-pointer items-center justify-center transition-colors",
-            children: /* @__PURE__ */ jsx(ChevronLeft, {})
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-foreground text-xl leading-6 font-medium", children: "Token Balances" })
-      ] }),
-      onClose && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-5 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: onClose,
-          className: "text-muted-foreground hover:text-foreground flex h-6 w-6 cursor-pointer items-center justify-center transition-colors",
-          children: /* @__PURE__ */ jsx(CloseIcon, {})
+          onClick: onBack,
+          className: "text-muted-foreground hover:text-foreground -ml-2 flex h-6 w-6 cursor-pointer items-center justify-center transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronLeft, {})
         }
-      )
-    ] }),
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-foreground text-xl leading-6 font-medium", children: "Token Balances" })
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 gap-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "bg-muted flex flex-1 flex-col overflow-hidden rounded-[10px] p-2", children: [
         /* @__PURE__ */ jsx("div", { className: "px-4 pt-4 pb-2", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Network" }) }),
@@ -4019,48 +4112,30 @@ function TokenRow({
 }
 function TokenSelectorView({
   onBack,
-  onClose,
   onSelect,
   selectedTokenId
 }) {
-  const [tokenSearch, setTokenSearch] = useState("");
   const { enabledTokens, chains } = usePrivanaContext();
   const [selectedChainId, setSelectedChainId] = useState(chains[0]?.id ?? 84532);
   const chainTokens = useMemo(() => {
     return enabledTokens.filter((t) => t.chainId === selectedChainId);
   }, [enabledTokens, selectedChainId]);
-  const filteredTokens = useMemo(() => {
-    if (!tokenSearch) return chainTokens;
-    return chainTokens.filter(
-      (t) => t.symbol.toLowerCase().includes(tokenSearch.toLowerCase()) || t.name.toLowerCase().includes(tokenSearch.toLowerCase())
-    );
-  }, [tokenSearch, chainTokens]);
   const handleTokenSelect = (token) => {
     onSelect(token);
     onBack();
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onBack,
-            className: "text-muted-foreground hover:text-foreground flex h-6 w-6 cursor-pointer items-center justify-center transition-colors",
-            children: /* @__PURE__ */ jsx(ChevronLeft, {})
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-foreground text-xl leading-6 font-medium", children: "Select Token" })
-      ] }),
-      onClose && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-5 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: onClose,
-          className: "text-muted-foreground hover:text-foreground flex h-6 w-6 cursor-pointer items-center justify-center transition-colors",
-          children: /* @__PURE__ */ jsx(CloseIcon, {})
+          onClick: onBack,
+          className: "text-muted-foreground hover:text-foreground -ml-2 flex h-6 w-6 cursor-pointer items-center justify-center transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronLeft, {})
         }
-      )
-    ] }),
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-foreground text-xl leading-6 font-medium", children: "Select Token" })
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 gap-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "bg-muted flex flex-1 flex-col overflow-hidden rounded-[10px] p-2", children: [
         /* @__PURE__ */ jsx("div", { className: "px-4 pt-4 pb-2", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Network" }) }),
@@ -4084,23 +4159,8 @@ function TokenSelectorView({
         }) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "bg-muted flex flex-[2] flex-col overflow-hidden rounded-[10px] p-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "px-4 pt-4 pb-2", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Token" }) }),
-          /* @__PURE__ */ jsx("div", { className: "px-3", children: /* @__PURE__ */ jsxs("div", { className: "border-border bg-input flex items-center gap-2.5 rounded-lg border px-3 py-2.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                placeholder: "Search",
-                value: tokenSearch,
-                onChange: (e) => setTokenSearch(e.target.value),
-                className: "text-foreground placeholder:text-muted-foreground flex-1 bg-transparent text-sm outline-none"
-              }
-            )
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-2 flex-1 overflow-y-auto", children: filteredTokens.map((token) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "px-4 pt-4 pb-2", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: "Token" }) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 flex-1 overflow-y-auto", children: chainTokens.map((token) => /* @__PURE__ */ jsx(
           TokenRow,
           {
             token,
@@ -4114,9 +4174,8 @@ function TokenSelectorView({
   ] });
 }
 function ModalBody({
-  onClose,
   onViewChange,
-  onTransactionPendingChange,
+  onCloseBlockedChange,
   showLockedFunds = true,
   defaultTab = "deposit",
   onDepositSuccess
@@ -4125,65 +4184,78 @@ function ModalBody({
   const [selectedToken, setSelectedToken] = useState(defaultToken);
   const [activeTab, setActiveTab] = useState(defaultTab);
   const [currentView, setCurrentView] = useState("main");
-  const [isTransactionPending, setIsTransactionPending] = useState(false);
+  const [isInteractionPending, setIsInteractionPending] = useState(false);
   useEffect(() => {
     if (!selectedToken && defaultToken) {
       setSelectedToken(defaultToken);
     }
   }, [selectedToken, defaultToken]);
-  const handleTransactionPendingChange = (isPending) => {
-    setIsTransactionPending(isPending);
-    onTransactionPendingChange?.(isPending);
+  const handlePendingChange = (isPending) => {
+    setIsInteractionPending(isPending);
+  };
+  const handleCloseBlockedChange = (isBlocked) => {
+    onCloseBlockedChange?.(isBlocked);
   };
   const handleViewChange = (view) => {
-    setCurrentView(view);
-    onViewChange?.(view);
+    const update = () => {
+      setCurrentView(view);
+      onViewChange?.(view);
+    };
+    if (typeof document !== "undefined" && typeof document.startViewTransition === "function") {
+      document.documentElement.dataset.privanaVtDir = view === "main" ? "back" : "forward";
+      const transition = document.startViewTransition(update);
+      transition.finished.then(() => {
+        delete document.documentElement.dataset.privanaVtDir;
+      });
+    } else {
+      update();
+    }
   };
   const handleTokenSelect = (token) => {
     setSelectedToken(token);
   };
   if (tokensStatus === "loading" || !selectedToken) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pb-4", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsx("div", { className: "bg-secondary h-25 animate-pulse rounded-[10px]" }),
       /* @__PURE__ */ jsx("div", { className: "bg-secondary h-11 animate-pulse rounded-[10px]" }),
       /* @__PURE__ */ jsx("div", { className: "bg-secondary h-50 animate-pulse rounded-[10px]" })
     ] });
   }
   if (currentView === "locked-funds") {
-    return /* @__PURE__ */ jsx(LockedFundsView, { onBack: () => handleViewChange("main"), onClose });
+    return /* @__PURE__ */ jsx(LockedFundsView, { onBack: () => handleViewChange("main") });
   }
   if (currentView === "balance-details") {
-    return /* @__PURE__ */ jsx(BalanceDetailsView, { onBack: () => handleViewChange("main"), onClose });
+    return /* @__PURE__ */ jsx(BalanceDetailsView, { onBack: () => handleViewChange("main") });
   }
   if (currentView === "select-token") {
     return /* @__PURE__ */ jsx(
       TokenSelectorView,
       {
         onBack: () => handleViewChange("main"),
-        onClose,
         onSelect: handleTokenSelect,
         selectedTokenId: selectedToken.id
       }
     );
   }
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pb-4", children: [
-    /* @__PURE__ */ jsx("div", { className: cn(isTransactionPending && "pointer-events-none"), children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: cn(isInteractionPending && "pointer-events-none"), children: /* @__PURE__ */ jsx(
       BalanceCards,
       {
         selectedToken,
         onLockedFundsClick: () => handleViewChange("locked-funds"),
         onBalanceClick: () => handleViewChange("balance-details"),
         showLockedFunds,
-        disabled: isTransactionPending
+        disabled: isInteractionPending
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: cn(isTransactionPending && "pointer-events-none"), children: /* @__PURE__ */ jsx(Tabs, { activeTab, onTabChange: setActiveTab, disabled: isTransactionPending }) }),
+    /* @__PURE__ */ jsx("div", { className: cn(isInteractionPending && "pointer-events-none"), children: /* @__PURE__ */ jsx(Tabs, { activeTab, onTabChange: setActiveTab, disabled: isInteractionPending }) }),
     /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-[10px] p-5", children: activeTab === "deposit" ? /* @__PURE__ */ jsx(
       DepositForm,
       {
         selectedToken,
         onTokenSelect: () => handleViewChange("select-token"),
-        onPendingChange: handleTransactionPendingChange,
+        onPendingChange: handlePendingChange,
+        onUnsafeToCloseChange: handleCloseBlockedChange,
         onSuccess: onDepositSuccess
       }
     ) : /* @__PURE__ */ jsx(
@@ -4191,7 +4263,8 @@ function ModalBody({
       {
         selectedToken,
         onTokenSelect: () => handleViewChange("select-token"),
-        onPendingChange: handleTransactionPendingChange
+        onPendingChange: handlePendingChange,
+        onUnsafeToCloseChange: handleCloseBlockedChange
       }
     ) })
   ] }) });
@@ -4203,55 +4276,84 @@ function PrivanaModal({
   defaultTab,
   onDepositSuccess
 }) {
-  const [isTransactionPending, setIsTransactionPending] = useState(false);
+  const [currentView, setCurrentView] = useState("main");
   const titleId = useId();
   const descId = useId();
-  const handleOpenChange = (isOpen) => {
-    if (!isOpen && isTransactionPending) {
-      return;
-    }
-    if (!isOpen) {
-      onClose();
-    }
+  const [isCloseBlocked, setIsCloseBlocked] = useState(false);
+  const handleClose = () => {
+    if (!isCloseBlocked) onClose();
   };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(
-    DialogContent,
+  return /* @__PURE__ */ jsx(
+    Dialog,
     {
-      "data-privana": true,
-      showCloseButton: false,
-      className: "bg-card flex w-[560px] max-w-[95vw] flex-col gap-2 overflow-hidden rounded-2xl border-0 p-2",
-      overlayClassName: isTransactionPending ? "cursor-not-allowed" : void 0,
-      "aria-labelledby": titleId,
-      "aria-describedby": descId,
-      children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { id: titleId, className: "sr-only", children: "Privana" }),
-          /* @__PURE__ */ jsx(DialogDescription, { id: descId, className: "sr-only", children: "Deposit or withdraw tokens from your Flexvault" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-foreground text-xl leading-6 font-medium", children: "Privana" }),
-            onClose && /* @__PURE__ */ jsx(
+      open,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) handleClose();
+      },
+      children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          "data-privana": true,
+          "data-view": currentView,
+          showCloseButton: false,
+          onInteractOutside: isCloseBlocked ? (e) => e.preventDefault() : void 0,
+          onEscapeKeyDown: isCloseBlocked ? (e) => e.preventDefault() : void 0,
+          className: "bg-card flex h-[596px] max-h-[95dvh] w-[560px] max-w-[95vw] flex-col gap-2 overflow-hidden rounded-2xl border-0 p-2 pb-[2.75rem]",
+          "aria-labelledby": titleId,
+          "aria-describedby": descId,
+          children: [
+            /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: onClose,
-                className: "text-muted-foreground hover:text-foreground flex h-6 w-6 cursor-pointer items-center justify-center transition-colors",
+                "data-privana-close": true,
+                onClick: handleClose,
+                disabled: isCloseBlocked,
+                "aria-label": "Close",
+                className: cn(
+                  "absolute top-6 right-5 z-20 flex h-6 w-6 items-center justify-center transition-colors",
+                  isCloseBlocked ? "text-muted-foreground/40 cursor-not-allowed" : "text-muted-foreground hover:text-foreground cursor-pointer"
+                ),
                 children: /* @__PURE__ */ jsx(CloseIcon, {})
               }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-privana-content": true,
+                "data-view": currentView,
+                className: "flex min-h-0 flex-1 flex-col gap-2",
+                children: [
+                  /* @__PURE__ */ jsx(DialogTitle, { id: titleId, className: "sr-only", children: "Privana" }),
+                  /* @__PURE__ */ jsx(DialogDescription, { id: descId, className: "sr-only", children: "Deposit or withdraw tokens from your Privana" }),
+                  currentView === "main" && /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center px-5 py-4", children: /* @__PURE__ */ jsx("span", { className: "text-foreground text-xl leading-6 font-medium", children: "Privana" }) }) }),
+                  /* @__PURE__ */ jsx(
+                    ModalBody,
+                    {
+                      onCloseBlockedChange: setIsCloseBlocked,
+                      onViewChange: setCurrentView,
+                      showLockedFunds,
+                      defaultTab,
+                      onDepositSuccess
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                "data-privana-footer": true,
+                href: "https://privana.finance",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "Powered by Privana"
+              }
             )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          ModalBody,
-          {
-            onClose: isTransactionPending ? void 0 : onClose,
-            onTransactionPendingChange: setIsTransactionPending,
-            showLockedFunds,
-            defaultTab,
-            onDepositSuccess
-          }
-        )
-      ]
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 function PrivanaInlineModal({
   className,