@djangocfg/ext-payments 1.0.17 → 1.0.19

package/dist/index.js

@@ -1,15 +1,14 @@
+import { createContext, useState, useMemo, useCallback, useEffect, useContext, useRef } from 'react';
+import { initializeExtensionAPI, createExtensionAPI } from '@djangocfg/ext-base/api';
 import { createConsola, consola } from 'consola';
 import pRetry, { AbortError } from 'p-retry';
 import { z } from 'zod';
-import { initializeExtensionAPI, createExtensionAPI } from '@djangocfg/ext-base/api';
-import { Plus, ArrowUpRight, RefreshCw, AlertCircle, XCircle, CheckCircle2, Loader2, Clock, ArrowDownLeft, History, ChevronRight, ExternalLink } from 'lucide-react';
-import { Skeleton, Button, TokenIcon, ResponsiveSheet, ResponsiveSheetContent, ResponsiveSheetHeader, ResponsiveSheetTitle, ResponsiveSheetDescription, Form, FormField, FormItem, FormLabel, FormControl, Input, FormMessage, Combobox, Alert, AlertDescription, CopyButton, useIsMobile, Drawer, Dialog, DrawerContent, DialogContent, DrawerHeader, DialogHeader, DrawerTitle, DialogTitle, DrawerDescription, DialogDescription, DrawerFooter, DialogFooter } from '@djangocfg/ui-core';
-import { cn } from '@djangocfg/ui-core/lib';
-import * as React2 from 'react';
-import { createContext, useState, useMemo, useCallback, useEffect, useContext } from 'react';
-import useSWR2 from 'swr';
+import useSWR, { useSWRConfig } from 'swr';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import moment2 from 'moment';
+import { Plus, ArrowUpRight, RefreshCw, AlertCircle, XCircle, CheckCircle2, Loader2, Clock, ArrowDownLeft, History, ChevronRight, Ban, ExternalLink } from 'lucide-react';
+import { Skeleton, Button, TokenIcon, useLocalStorage, ResponsiveSheet, ResponsiveSheetContent, ResponsiveSheetHeader, ResponsiveSheetTitle, ResponsiveSheetDescription, Form, FormField, FormItem, FormLabel, FormControl, Input, FormMessage, Alert, AlertDescription, CopyButton, Combobox } from '@djangocfg/ui-core';
+import { cn } from '@djangocfg/ui-core/lib';
+import moment3 from 'moment';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createExtensionConfig } from '@djangocfg/ext-base';
@@ -38,12 +37,47 @@ var ExtPaymentsPayments = class {
   /**
    * Get available currencies
    * 
-   * Returns list of available currencies with token+network info
+   * Returns list of available currencies with token+network info, popular
+   * first
    */
   async currenciesList() {
     const response = await this.client.request("GET", "/cfg/payments/currencies/");
     return response;
   }
+  /**
+   * Get currency estimate
+   * 
+   * Get estimated crypto amount for a given USD amount, including min amount
+   */
+  async currenciesEstimateRetrieve(...args) {
+    const code = args[0];
+    const isParamsObject = args.length === 2 && typeof args[1] === "object" && args[1] !== null && !Array.isArray(args[1]);
+    let params;
+    if (isParamsObject) {
+      params = args[1];
+    } else {
+      params = { amount: args[1] };
+    }
+    const response = await this.client.request("GET", `/cfg/payments/currencies/${code}/estimate/`, { params });
+    return response;
+  }
+  /**
+   * Get withdrawal estimate
+   * 
+   * Get estimated crypto amount for withdrawal with fee breakdown
+   */
+  async currenciesWithdrawalEstimateRetrieve(...args) {
+    const code = args[0];
+    const isParamsObject = args.length === 2 && typeof args[1] === "object" && args[1] !== null && !Array.isArray(args[1]);
+    let params;
+    if (isParamsObject) {
+      params = args[1];
+    } else {
+      params = { amount: args[1] };
+    }
+    const response = await this.client.request("GET", `/cfg/payments/currencies/${code}/withdrawal-estimate/`, { params });
+    return response;
+  }
   /**
    * ViewSet for payment operations. Endpoints: - GET /payments/ - List
    * user's payments - GET /payments/{id}/ - Get payment details - POST
@@ -721,8 +755,8 @@ var APIClient = class {
 // src/api/generated/ext_payments/storage.ts
 var LocalStorageAdapter = class {
   logger;
-  constructor(logger) {
-    this.logger = logger;
+  constructor(logger2) {
+    this.logger = logger2;
   }
   getItem(key) {
     try {
@@ -764,8 +798,8 @@ var LocalStorageAdapter = class {
 };
 var CookieStorageAdapter = class {
   logger;
-  constructor(logger) {
-    this.logger = logger;
+  constructor(logger2) {
+    this.logger = logger2;
   }
   getItem(key) {
     try {
@@ -814,8 +848,8 @@ var CookieStorageAdapter = class {
 var MemoryStorageAdapter = class {
   storage = /* @__PURE__ */ new Map();
   logger;
-  constructor(logger) {
-    this.logger = logger;
+  constructor(logger2) {
+    this.logger = logger2;
   }
   getItem(key) {
     const value = this.storage.get(key) || null;
@@ -900,10 +934,13 @@ __export(schemas_exports, {
   PaginatedPaymentListListSchema: () => PaginatedPaymentListListSchema,
   PaginatedWithdrawalListListSchema: () => PaginatedWithdrawalListListSchema,
   PaymentCreateRequestSchema: () => PaymentCreateRequestSchema,
+  PaymentCreateResponseSchema: () => PaymentCreateResponseSchema,
   PaymentDetailSchema: () => PaymentDetailSchema,
   PaymentListSchema: () => PaymentListSchema,
   TransactionSchema: () => TransactionSchema,
+  WithdrawalCancelResponseSchema: () => WithdrawalCancelResponseSchema,
   WithdrawalCreateRequestSchema: () => WithdrawalCreateRequestSchema,
+  WithdrawalCreateResponseSchema: () => WithdrawalCreateResponseSchema,
   WithdrawalDetailSchema: () => WithdrawalDetailSchema,
   WithdrawalListSchema: () => WithdrawalListSchema
 });
@@ -912,7 +949,7 @@ var BalanceSchema = z.object({
   balance_display: z.string(),
   total_deposited: z.string(),
   total_withdrawn: z.string(),
-  last_transaction_at: z.iso.datetime().nullable()
+  last_transaction_at: z.string().datetime({ offset: true }).nullable()
 });
 var CurrencySchema = z.object({
   code: z.string(),
@@ -934,8 +971,8 @@ var PaymentListSchema = z.object({
   currency_token: z.string(),
   status: z.nativeEnum(PaymentListStatus),
   status_display: z.string(),
-  created_at: z.iso.datetime(),
-  completed_at: z.iso.datetime().nullable()
+  created_at: z.string().datetime({ offset: true }),
+  completed_at: z.string().datetime({ offset: true }).nullable()
 });
 
 // src/api/generated/ext_payments/_utils/schemas/PaginatedPaymentListList.schema.ts
@@ -959,8 +996,8 @@ var WithdrawalListSchema = z.object({
   currency_token: z.string(),
   status: z.nativeEnum(WithdrawalListStatus),
   status_display: z.string(),
-  created_at: z.iso.datetime(),
-  completed_at: z.iso.datetime().nullable()
+  created_at: z.string().datetime({ offset: true }),
+  completed_at: z.string().datetime({ offset: true }).nullable()
 });
 
 // src/api/generated/ext_payments/_utils/schemas/PaginatedWithdrawalListList.schema.ts
@@ -999,14 +1036,21 @@ var PaymentDetailSchema = z.object({
   transaction_hash: z.string().nullable(),
   explorer_link: z.string().nullable(),
   confirmations_count: z.int(),
-  expires_at: z.iso.datetime().nullable(),
-  completed_at: z.iso.datetime().nullable(),
-  created_at: z.iso.datetime(),
+  expires_at: z.string().datetime({ offset: true }).nullable(),
+  completed_at: z.string().datetime({ offset: true }).nullable(),
+  created_at: z.string().datetime({ offset: true }),
   is_completed: z.boolean(),
   is_failed: z.boolean(),
   is_expired: z.boolean(),
   description: z.string()
 });
+
+// src/api/generated/ext_payments/_utils/schemas/PaymentCreateResponse.schema.ts
+var PaymentCreateResponseSchema = z.object({
+  success: z.boolean(),
+  payment: PaymentDetailSchema,
+  qr_code_url: z.union([z.url(), z.literal("")]).nullable()
+});
 var TransactionSchema = z.object({
   id: z.string().regex(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i),
   transaction_type: z.nativeEnum(TransactionTransactionType),
@@ -1016,12 +1060,7 @@ var TransactionSchema = z.object({
   balance_after: z.string(),
   payment_id: z.string().nullable(),
   description: z.string(),
-  created_at: z.iso.datetime()
-});
-var WithdrawalCreateRequestSchema = z.object({
-  amount_usd: z.string(),
-  currency_code: z.string().min(1).max(20),
-  wallet_address: z.string().min(1).max(255)
+  created_at: z.string().datetime({ offset: true })
 });
 var WithdrawalDetailSchema = z.object({
   id: z.string().regex(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i),
@@ -1042,11 +1081,28 @@ var WithdrawalDetailSchema = z.object({
   transaction_hash: z.string().nullable(),
   explorer_link: z.string().nullable(),
   admin_notes: z.string(),
-  created_at: z.iso.datetime(),
-  approved_at: z.iso.datetime().nullable(),
-  completed_at: z.iso.datetime().nullable(),
-  rejected_at: z.iso.datetime().nullable(),
-  cancelled_at: z.iso.datetime().nullable()
+  created_at: z.string().datetime({ offset: true }),
+  approved_at: z.string().datetime({ offset: true }).nullable(),
+  completed_at: z.string().datetime({ offset: true }).nullable(),
+  rejected_at: z.string().datetime({ offset: true }).nullable(),
+  cancelled_at: z.string().datetime({ offset: true }).nullable()
+});
+
+// src/api/generated/ext_payments/_utils/schemas/WithdrawalCancelResponse.schema.ts
+var WithdrawalCancelResponseSchema = z.object({
+  success: z.boolean(),
+  withdrawal: WithdrawalDetailSchema,
+  message: z.string()
+});
+var WithdrawalCreateRequestSchema = z.object({
+  amount_usd: z.string(),
+  currency_code: z.string().min(1).max(20),
+  wallet_address: z.string().min(1).max(255)
+});
+var WithdrawalCreateResponseSchema = z.object({
+  success: z.boolean(),
+  withdrawal: WithdrawalDetailSchema,
+  message: z.string()
 });
 
 // src/api/generated/ext_payments/validation-events.ts
@@ -1103,7 +1159,9 @@ __export(fetchers_exports, {
   createPaymentsWithdrawalsCancelCreate: () => createPaymentsWithdrawalsCancelCreate,
   createPaymentsWithdrawalsCreateCreate: () => createPaymentsWithdrawalsCreateCreate,
   getPaymentsBalanceRetrieve: () => getPaymentsBalanceRetrieve,
+  getPaymentsCurrenciesEstimateRetrieve: () => getPaymentsCurrenciesEstimateRetrieve,
   getPaymentsCurrenciesList: () => getPaymentsCurrenciesList,
+  getPaymentsCurrenciesWithdrawalEstimateRetrieve: () => getPaymentsCurrenciesWithdrawalEstimateRetrieve,
   getPaymentsPaymentsList: () => getPaymentsPaymentsList,
   getPaymentsPaymentsRetrieve: () => getPaymentsPaymentsRetrieve,
   getPaymentsPaymentsStatusRetrieve: () => getPaymentsPaymentsStatusRetrieve,
@@ -1214,6 +1272,16 @@ async function getPaymentsCurrenciesList(client) {
   const response = await api.ext_payments_payments.currenciesList();
   return response;
 }
+async function getPaymentsCurrenciesEstimateRetrieve(code, params, client) {
+  const api = client || getAPIInstance();
+  const response = await api.ext_payments_payments.currenciesEstimateRetrieve(code, params?.amount);
+  return response;
+}
+async function getPaymentsCurrenciesWithdrawalEstimateRetrieve(code, params, client) {
+  const api = client || getAPIInstance();
+  const response = await api.ext_payments_payments.currenciesWithdrawalEstimateRetrieve(code, params?.amount);
+  return response;
+}
 async function getPaymentsPaymentsList(params, client) {
   const api = client || getAPIInstance();
   const response = await api.ext_payments_payments.paymentsList(params?.page, params?.page_size);
@@ -1386,7 +1454,7 @@ async function createPaymentsPaymentsCreateCreate(data, client) {
   const api = client || getAPIInstance();
   const response = await api.ext_payments_payments.paymentsCreateCreate(data);
   try {
-    return PaymentDetailSchema.parse(response);
+    return PaymentCreateResponseSchema.parse(response);
   } catch (error) {
     consola.error("\u274C Zod Validation Failed");
     consola.box(`createPaymentsPaymentsCreateCreate
@@ -1517,7 +1585,7 @@ async function createPaymentsWithdrawalsCancelCreate(id, client) {
   const api = client || getAPIInstance();
   const response = await api.ext_payments_payments.withdrawalsCancelCreate(id);
   try {
-    return WithdrawalDetailSchema.parse(response);
+    return WithdrawalCancelResponseSchema.parse(response);
   } catch (error) {
     consola.error("\u274C Zod Validation Failed");
     consola.box(`createPaymentsWithdrawalsCancelCreate
@@ -1559,7 +1627,7 @@ async function createPaymentsWithdrawalsCreateCreate(data, client) {
   const api = client || getAPIInstance();
   const response = await api.ext_payments_payments.withdrawalsCreateCreate(data);
   try {
-    return WithdrawalDetailSchema.parse(response);
+    return WithdrawalCreateResponseSchema.parse(response);
   } catch (error) {
     consola.error("\u274C Zod Validation Failed");
     consola.box(`createPaymentsWithdrawalsCreateCreate
@@ -1613,8 +1681,8 @@ var API = class {
   constructor(baseUrl, options) {
     this.baseUrl = baseUrl;
     this.options = options;
-    const logger = options?.loggerConfig ? new APILogger(options.loggerConfig) : void 0;
-    this.storage = options?.storage || new LocalStorageAdapter(logger);
+    const logger2 = options?.loggerConfig ? new APILogger(options.loggerConfig) : void 0;
+    this.storage = options?.storage || new LocalStorageAdapter(logger2);
     this._loadTokensFromStorage();
     this._client = new APIClient(this.baseUrl, {
       retryConfig: this.options?.retryConfig,
@@ -1723,9 +1791,215 @@ var API = class {
     return "./schema.json";
   }
 };
+
+// src/api/index.ts
 initializeExtensionAPI(configureAPI);
 var apiPayments = createExtensionAPI(API);
+function usePaymentsBalanceRetrieve(client) {
+  return useSWR(
+    "cfg-payments-balance",
+    () => getPaymentsBalanceRetrieve(client)
+  );
+}
+function usePaymentsCurrenciesList(client) {
+  return useSWR(
+    "cfg-payments-currencies",
+    () => getPaymentsCurrenciesList(client)
+  );
+}
+function usePaymentsPaymentsList(params, client) {
+  return useSWR(
+    params ? ["cfg-payments-payments", params] : "cfg-payments-payments",
+    () => getPaymentsPaymentsList(params, client)
+  );
+}
+function useCreatePaymentsPaymentsCreateCreate() {
+  const { mutate } = useSWRConfig();
+  return async (data, client) => {
+    const result = await createPaymentsPaymentsCreateCreate(data, client);
+    mutate("cfg-payments-payments");
+    return result;
+  };
+}
+function usePaymentsTransactionsList(params, client) {
+  return useSWR(
+    params ? ["cfg-payments-transactions", params] : "cfg-payments-transactions",
+    () => getPaymentsTransactionsList(params, client)
+  );
+}
+function usePaymentsWithdrawalsList(params, client) {
+  return useSWR(
+    params ? ["cfg-payments-withdrawals", params] : "cfg-payments-withdrawals",
+    () => getPaymentsWithdrawalsList(params, client)
+  );
+}
+function useCreatePaymentsWithdrawalsCancelCreate() {
+  const { mutate } = useSWRConfig();
+  return async (id, client) => {
+    const result = await createPaymentsWithdrawalsCancelCreate(id, client);
+    mutate("cfg-payments-withdrawals-cancel");
+    return result;
+  };
+}
+function useCreatePaymentsWithdrawalsCreateCreate() {
+  const { mutate } = useSWRConfig();
+  return async (data, client) => {
+    const result = await createPaymentsWithdrawalsCreateCreate(data, client);
+    mutate("cfg-payments-withdrawals");
+    return result;
+  };
+}
 var WalletContext = createContext(void 0);
+function WalletProvider({ children }) {
+  const {
+    data: balance,
+    isLoading: isLoadingBalance,
+    mutate: mutateBalance
+  } = usePaymentsBalanceRetrieve(apiPayments);
+  const {
+    data: paymentsData,
+    isLoading: isLoadingPayments,
+    mutate: mutatePayments
+  } = usePaymentsPaymentsList({ page: 1, page_size: 20 }, apiPayments);
+  const {
+    data: transactionsData,
+    isLoading: isLoadingTransactions,
+    mutate: mutateTransactions
+  } = usePaymentsTransactionsList({ limit: 20 }, apiPayments);
+  const {
+    data: currenciesData,
+    isLoading: isLoadingCurrencies,
+    mutate: mutateCurrencies
+  } = usePaymentsCurrenciesList(apiPayments);
+  const {
+    data: withdrawalsData,
+    isLoading: isLoadingWithdrawals,
+    mutate: mutateWithdrawals
+  } = usePaymentsWithdrawalsList({ page: 1, page_size: 20 }, apiPayments);
+  const createPaymentMutation = useCreatePaymentsPaymentsCreateCreate();
+  const createWithdrawalMutation = useCreatePaymentsWithdrawalsCreateCreate();
+  const cancelWithdrawalMutation = useCreatePaymentsWithdrawalsCancelCreate();
+  const balanceAmount = useMemo(() => {
+    if (!balance?.balance_usd) return 0;
+    return parseFloat(balance.balance_usd) || 0;
+  }, [balance]);
+  const activity = useMemo(() => {
+    const items = [];
+    const payments = paymentsData?.results || [];
+    for (const payment of payments) {
+      items.push({
+        id: `payment-${payment.id}`,
+        type: "payment",
+        amount: payment.amount_usd,
+        amountDisplay: `+$${parseFloat(payment.amount_usd).toFixed(2)}`,
+        currency: payment.currency_code,
+        status: mapPaymentStatus(payment.status),
+        statusDisplay: payment.status_display,
+        description: `${payment.currency_code} payment`,
+        createdAt: payment.created_at,
+        payment
+      });
+    }
+    const withdrawals = withdrawalsData?.results || [];
+    for (const withdrawal of withdrawals) {
+      items.push({
+        id: `withdrawal-${withdrawal.id}`,
+        type: "withdrawal",
+        amount: withdrawal.amount_usd,
+        amountDisplay: `-$${parseFloat(withdrawal.amount_usd).toFixed(2)}`,
+        currency: withdrawal.currency_code,
+        status: mapWithdrawalStatus(withdrawal.status),
+        statusDisplay: withdrawal.status_display,
+        description: `${withdrawal.currency_code} withdrawal`,
+        createdAt: withdrawal.created_at,
+        withdrawal
+      });
+    }
+    const transactions = transactionsData?.results || transactionsData || [];
+    if (Array.isArray(transactions)) {
+      for (const tx of transactions) {
+        if (tx.payment_id && payments.some((p) => p.id === tx.payment_id)) {
+          continue;
+        }
+        const isDeposit = tx.transaction_type === "deposit";
+        items.push({
+          id: `tx-${tx.id}`,
+          type: isDeposit ? "deposit" : "withdrawal",
+          amount: tx.amount_usd,
+          amountDisplay: `${isDeposit ? "+" : "-"}$${Math.abs(parseFloat(tx.amount_usd)).toFixed(2)}`,
+          status: "completed",
+          statusDisplay: "Completed",
+          description: tx.description || tx.type_display,
+          createdAt: tx.created_at,
+          transaction: tx
+        });
+      }
+    }
+    items.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+    return items;
+  }, [paymentsData, withdrawalsData, transactionsData]);
+  const currencies = useMemo(() => {
+    const data = currenciesData?.currencies || currenciesData?.results || currenciesData || [];
+    if (!Array.isArray(data)) return [];
+    return data.filter((c) => c.is_enabled !== false).map((c) => ({
+      code: c.code || c.currency_code || c.symbol,
+      name: c.name || c.code,
+      token: c.token || c.code,
+      // Token symbol (e.g., USDT, WBTC) with fallback to code
+      network: c.network || void 0,
+      enabled: c.is_enabled !== false
+    }));
+  }, [currenciesData]);
+  const addFunds = useCallback(async (data) => {
+    const response = await createPaymentMutation(data, apiPayments);
+    await Promise.all([mutateBalance(), mutatePayments(), mutateTransactions()]);
+    return response.payment;
+  }, [createPaymentMutation, mutateBalance, mutatePayments, mutateTransactions]);
+  const withdraw = useCallback(async (data) => {
+    const response = await createWithdrawalMutation(data, apiPayments);
+    await Promise.all([mutateBalance(), mutateWithdrawals(), mutateTransactions()]);
+    return response.withdrawal;
+  }, [createWithdrawalMutation, mutateBalance, mutateWithdrawals, mutateTransactions]);
+  const cancelWithdrawal = useCallback(async (id) => {
+    await cancelWithdrawalMutation(id, apiPayments);
+    await Promise.all([mutateBalance(), mutateWithdrawals(), mutateTransactions()]);
+  }, [cancelWithdrawalMutation, mutateBalance, mutateWithdrawals, mutateTransactions]);
+  const getPaymentDetails = useCallback(async (id) => {
+    return apiPayments.ext_payments_payments.paymentsRetrieve(id);
+  }, []);
+  const getWithdrawalDetails = useCallback(async (id) => {
+    return apiPayments.ext_payments_payments.withdrawalsRetrieve(id);
+  }, []);
+  const refreshWallet = useCallback(async () => {
+    await Promise.all([
+      mutateBalance(),
+      mutatePayments(),
+      mutateWithdrawals(),
+      mutateTransactions(),
+      mutateCurrencies()
+    ]);
+  }, [mutateBalance, mutatePayments, mutateWithdrawals, mutateTransactions, mutateCurrencies]);
+  const isLoading = isLoadingBalance || isLoadingPayments || isLoadingWithdrawals || isLoadingTransactions;
+  const isLoadingActivity = isLoadingPayments || isLoadingWithdrawals || isLoadingTransactions;
+  const value = {
+    balance,
+    balanceAmount,
+    isLoadingBalance,
+    activity,
+    isLoadingActivity,
+    hasMoreActivity: (paymentsData?.count || 0) > 20 || (withdrawalsData?.count || 0) > 20,
+    currencies,
+    isLoadingCurrencies,
+    addFunds,
+    withdraw,
+    cancelWithdrawal,
+    getPaymentDetails,
+    getWithdrawalDetails,
+    refreshWallet,
+    isLoading
+  };
+  return /* @__PURE__ */ jsx(WalletContext.Provider, { value, children });
+}
 function useWallet() {
   const context = useContext(WalletContext);
   if (!context) {
@@ -1733,6 +2007,44 @@ function useWallet() {
   }
   return context;
 }
+function mapPaymentStatus(status) {
+  switch (status?.toLowerCase()) {
+    case "completed":
+    case "success":
+    case "finished":
+      return "completed";
+    case "pending":
+    case "waiting":
+      return "pending";
+    case "confirming":
+    case "partially_paid":
+      return "confirming";
+    case "expired":
+      return "expired";
+    case "failed":
+    case "error":
+    case "cancelled":
+      return "failed";
+    default:
+      return "pending";
+  }
+}
+function mapWithdrawalStatus(status) {
+  switch (status?.toLowerCase()) {
+    case "completed":
+      return "completed";
+    case "pending":
+    case "approved":
+      return "pending";
+    case "processing":
+      return "confirming";
+    case "rejected":
+    case "cancelled":
+      return "failed";
+    default:
+      return "pending";
+  }
+}
 function BalanceHero({ onAddFunds, onWithdraw, className }) {
   const { balance, balanceAmount, isLoadingBalance, refreshWallet } = useWallet();
   const formattedBalance = new Intl.NumberFormat("en-US", {
@@ -1838,7 +2150,7 @@ function ActivityItem({ item, onClick }) {
   const StatusIcon = config.icon;
   const isPositive = item.type === "payment" || item.type === "deposit";
   const DirectionIcon = isPositive ? ArrowDownLeft : ArrowUpRight;
-  const relativeTime = moment2(item.createdAt).fromNow();
+  const relativeTime = moment3(item.createdAt).fromNow();
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -1927,41 +2239,299 @@ function ActivityList({
     )) })
   ] });
 }
+function useEstimate({
+  currencyCode,
+  amountUsd,
+  minAmount = 0,
+  debounceMs = 300,
+  skip = false
+}) {
+  const [estimate, setEstimate] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (skip || !currencyCode || amountUsd < minAmount) {
+      setEstimate(null);
+      setError(null);
+      return;
+    }
+    const fetchEstimate = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await apiPayments.ext_payments_payments.currenciesEstimateRetrieve(
+          currencyCode,
+          { amount: amountUsd }
+        );
+        if (response?.success && response?.estimated_amount) {
+          setEstimate({
+            estimatedAmount: parseFloat(response.estimated_amount),
+            usdRate: parseFloat(response.usd_rate) || 0,
+            minAmountUsd: response.min_amount_usd ? parseFloat(response.min_amount_usd) : null,
+            isStablecoin: response.is_stablecoin || false,
+            // New fee fields
+            amountToReceive: parseFloat(response.amount_to_receive) || amountUsd,
+            serviceFeeUsd: parseFloat(response.service_fee_usd) || 0,
+            serviceFeePercent: parseFloat(response.service_fee_percent) || 0,
+            totalToPayUsd: parseFloat(response.total_to_pay_usd) || amountUsd
+          });
+        } else {
+          setEstimate(null);
+        }
+      } catch (err) {
+        console.error("Failed to fetch estimate:", err);
+        setEstimate(null);
+        setError(err instanceof Error ? err : new Error("Failed to fetch estimate"));
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    const timeoutId = setTimeout(fetchEstimate, debounceMs);
+    return () => clearTimeout(timeoutId);
+  }, [currencyCode, amountUsd, minAmount, debounceMs, skip]);
+  return { estimate, isLoading, error };
+}
+function useWithdrawalEstimate({
+  currencyCode,
+  amountUsd,
+  minAmount = 10,
+  debounceMs = 300,
+  skip = false
+}) {
+  const [estimate, setEstimate] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (skip || !currencyCode || amountUsd < minAmount) {
+      setEstimate(null);
+      setError(null);
+      return;
+    }
+    const fetchEstimate = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await apiPayments.ext_payments_payments.currenciesWithdrawalEstimateRetrieve(
+          currencyCode,
+          { amount: amountUsd }
+        );
+        if (response?.success && response?.estimated_amount) {
+          setEstimate({
+            estimatedAmount: parseFloat(response.estimated_amount),
+            usdRate: parseFloat(response.usd_rate) || 0,
+            minAmountUsd: response.min_amount_usd ? parseFloat(response.min_amount_usd) : null,
+            isStablecoin: response.is_stablecoin || false,
+            // Withdrawal-specific fields
+            amountRequested: parseFloat(response.amount_requested) || amountUsd,
+            serviceFeeUsd: parseFloat(response.service_fee_usd) || 0,
+            serviceFeePercent: parseFloat(response.service_fee_percent) || 0,
+            networkFeeUsd: parseFloat(response.network_fee_usd) || 0,
+            totalFeesUsd: parseFloat(response.total_fees_usd) || 0,
+            amountToReceive: parseFloat(response.amount_to_receive) || 0
+          });
+        } else {
+          setEstimate(null);
+        }
+      } catch (err) {
+        console.error("Failed to fetch withdrawal estimate:", err);
+        setEstimate(null);
+        setError(err instanceof Error ? err : new Error("Failed to fetch withdrawal estimate"));
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    const timeoutId = setTimeout(fetchEstimate, debounceMs);
+    return () => clearTimeout(timeoutId);
+  }, [currencyCode, amountUsd, minAmount, debounceMs, skip]);
+  return { estimate, isLoading, error };
+}
+function useCurrencyOptions(currencies) {
+  return useMemo(() => {
+    return currencies.map((c) => ({
+      value: c.code,
+      label: c.name,
+      token: c.token,
+      network: c.network
+    }));
+  }, [currencies]);
+}
+function useDefaultCurrency({
+  currencyOptions,
+  savedCurrency,
+  currentValue,
+  setValue
+}) {
+  useEffect(() => {
+    if (currencyOptions.length > 0 && !currentValue) {
+      const savedOption = savedCurrency && currencyOptions.find((c) => c.value === savedCurrency);
+      if (savedOption) {
+        setValue(savedOption.value);
+      } else {
+        const usdt = currencyOptions.find((c) => c.value.includes("USDT"));
+        setValue(usdt?.value || currencyOptions[0].value);
+      }
+    }
+  }, [currencyOptions, savedCurrency, currentValue, setValue]);
+}
+function useAutoSave(value, save, validate) {
+  const saveRef = useRef(save);
+  const validateRef = useRef(validate);
+  useEffect(() => {
+    saveRef.current = save;
+    validateRef.current = validate;
+  });
+  useEffect(() => {
+    const isValid = validateRef.current ? validateRef.current(value) : Boolean(value);
+    if (isValid) {
+      saveRef.current(value);
+    }
+  }, [value]);
+}
+
+// src/utils/format.ts
+function formatUsdRate(rate) {
+  if (rate >= 1) {
+    return rate.toLocaleString(void 0, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+  } else if (rate >= 0.01) {
+    return rate.toLocaleString(void 0, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 4
+    });
+  } else if (rate >= 1e-4) {
+    return rate.toLocaleString(void 0, {
+      minimumFractionDigits: 4,
+      maximumFractionDigits: 6
+    });
+  } else {
+    return rate.toLocaleString(void 0, {
+      minimumFractionDigits: 6,
+      maximumFractionDigits: 8
+    });
+  }
+}
+function formatCryptoAmount(amount, isStablecoin) {
+  const decimals = isStablecoin ? 2 : 8;
+  return amount.toFixed(decimals);
+}
+function formatUsdAmount(amount, alwaysShowCents = false) {
+  if (alwaysShowCents) {
+    return amount.toFixed(2);
+  }
+  const hasCents = amount % 1 !== 0;
+  if (hasCents) {
+    return amount.toFixed(2);
+  }
+  return amount.toFixed(0);
+}
+
+// src/utils/errors.ts
+function extractErrorMessage(err, fallback = "An error occurred") {
+  if (!err) return fallback;
+  const error = err;
+  const responseData = error.response?.data;
+  const response = responseData || error.response;
+  if (response) {
+    if (typeof response.error === "string") return response.error;
+    if (typeof response.message === "string") return response.message;
+    if (typeof response.detail === "string") return response.detail;
+  }
+  if (typeof error.errorMessage === "string") return error.errorMessage;
+  if (typeof error.message === "string") return error.message;
+  return fallback;
+}
+var isDevelopment = process.env.NODE_ENV === "development";
+createConsola({
+  level: isDevelopment ? 4 : 1
+}).withTag("ext-payments");
+function CurrencyCombobox({
+  options,
+  value,
+  onChange,
+  disabled,
+  placeholder = "Select currency..."
+}) {
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      options,
+      value,
+      onValueChange: onChange,
+      placeholder,
+      searchPlaceholder: "Search...",
+      disabled,
+      className: "h-14",
+      renderOption: (option) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1", children: [
+        /* @__PURE__ */ jsx(TokenIcon, { symbol: option.value, size: 24 }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label })
+      ] }),
+      renderValue: (option) => option && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(TokenIcon, { symbol: option.value, size: 24 }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label })
+      ] })
+    }
+  );
+}
 var AddFundsSchema = z.object({
-  amount: z.number().min(1, "Minimum $1.00"),
+  amount: z.number().min(1, "Minimum $1"),
   currency: z.string().min(1, "Select a currency")
 });
+var STORAGE_KEY = "payments:addFunds";
 function AddFundsSheet({ open, onOpenChange, onSuccess }) {
   const { currencies, isLoadingCurrencies, addFunds } = useWallet();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState(null);
+  const [saved, setSaved] = useLocalStorage(STORAGE_KEY, {
+    currency: "",
+    amount: 100
+  });
   const form = useForm({
     resolver: zodResolver(AddFundsSchema),
     defaultValues: {
-      amount: 100,
-      currency: ""
+      amount: saved.amount,
+      currency: saved.currency
     }
   });
-  const currencyOptions = useMemo(() => {
-    return currencies.map((c) => ({
-      value: c.code,
-      label: c.network ? `${c.code} (${c.network})` : c.code,
-      rate: c.rate,
-      network: c.network
-    }));
-  }, [currencies]);
-  useMemo(() => {
-    if (currencyOptions.length > 0 && !form.getValues("currency")) {
-      const usdt = currencyOptions.find((c) => c.value.includes("USDT"));
-      form.setValue("currency", usdt?.value || currencyOptions[0].value);
-    }
-  }, [currencyOptions, form]);
-  const selectedCurrency = currencyOptions.find((c) => c.value === form.watch("currency"));
-  const cryptoAmount = useMemo(() => {
-    const amount = form.watch("amount");
-    if (!selectedCurrency?.rate || !amount) return null;
-    return amount / selectedCurrency.rate;
-  }, [form.watch("amount"), selectedCurrency]);
+  const watchedAmount = form.watch("amount");
+  const watchedCurrency = form.watch("currency");
+  useAutoSave(watchedAmount, (v) => setSaved((prev) => ({ ...prev, amount: v })), (v) => v > 0);
+  useAutoSave(watchedCurrency, (v) => setSaved((prev) => ({ ...prev, currency: v })));
+  const currencyOptions = useCurrencyOptions(currencies);
+  useDefaultCurrency({
+    currencyOptions,
+    savedCurrency: saved.currency,
+    currentValue: watchedCurrency,
+    setValue: (v) => form.setValue("currency", v)
+  });
+  const { estimate, isLoading: isLoadingEstimate } = useEstimate({
+    currencyCode: watchedCurrency,
+    amountUsd: watchedAmount,
+    minAmount: 1
+  });
+  const selectedCurrency = currencyOptions.find((c) => c.value === watchedCurrency);
+  const displayData = useMemo(() => {
+    if (!selectedCurrency || !estimate) return null;
+    const token = selectedCurrency.token;
+    const cryptoAmount = formatCryptoAmount(estimate.estimatedAmount, estimate.isStablecoin);
+    const rate = formatUsdRate(estimate.usdRate);
+    const belowMinimum = estimate.minAmountUsd ? watchedAmount < estimate.minAmountUsd : false;
+    const minAmount = estimate.minAmountUsd ? formatUsdAmount(estimate.minAmountUsd) : void 0;
+    return {
+      token,
+      cryptoAmount,
+      rate,
+      showRate: !estimate.isStablecoin && estimate.usdRate > 0,
+      belowMinimum,
+      minAmount,
+      // Fee breakdown from API
+      amountToReceive: estimate.amountToReceive,
+      serviceFeeUsd: estimate.serviceFeeUsd,
+      serviceFeePercent: estimate.serviceFeePercent,
+      totalToPayUsd: estimate.totalToPayUsd
+    };
+  }, [selectedCurrency, estimate, watchedAmount]);
   const handleSubmit = useCallback(async (data) => {
     try {
       setIsSubmitting(true);
@@ -1974,19 +2544,22 @@ function AddFundsSheet({ open, onOpenChange, onSuccess }) {
       onOpenChange(false);
       onSuccess?.(result);
     } catch (err) {
-      const message = err?.response?.data?.message || err?.response?.data?.detail || err?.message || "Failed to create payment";
-      setError(message);
+      setError(extractErrorMessage(err, "Failed to create payment"));
     } finally {
       setIsSubmitting(false);
     }
   }, [addFunds, form, onOpenChange, onSuccess]);
   const handleOpenChange = useCallback((open2) => {
-    if (!open2) {
+    if (open2) {
+      form.reset({
+        amount: saved.amount,
+        currency: saved.currency
+      });
+    } else {
       setError(null);
-      form.reset();
     }
     onOpenChange(open2);
-  }, [form, onOpenChange]);
+  }, [form, onOpenChange, saved]);
   return /* @__PURE__ */ jsx(ResponsiveSheet, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(ResponsiveSheetContent, { className: "sm:max-w-md", children: [
     /* @__PURE__ */ jsxs(ResponsiveSheetHeader, { children: [
       /* @__PURE__ */ jsx(ResponsiveSheetTitle, { children: "Add Funds" }),
@@ -2008,7 +2581,7 @@ function AddFundsSheet({ open, onOpenChange, onSuccess }) {
                   type: "number",
                   step: "0.01",
                   min: "1",
-                  placeholder: "100.00",
+                  placeholder: "100",
                   className: "pl-8 text-2xl h-14 font-semibold",
                   ...field,
                   onChange: (e) => field.onChange(parseFloat(e.target.value) || 0)
@@ -2027,51 +2600,78 @@ function AddFundsSheet({ open, onOpenChange, onSuccess }) {
           render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
             /* @__PURE__ */ jsx(FormLabel, { children: "Pay with" }),
             /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-              Combobox,
+              CurrencyCombobox,
               {
                 options: currencyOptions,
                 value: field.value,
-                onValueChange: field.onChange,
-                placeholder: "Select currency...",
-                searchPlaceholder: "Search...",
-                disabled: isLoadingCurrencies,
-                className: "h-14",
-                renderOption: (option) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1", children: [
-                  /* @__PURE__ */ jsx(TokenIcon, { symbol: option.value, size: 24 }),
-                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label })
-                ] }),
-                renderValue: (option) => option && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsx(TokenIcon, { symbol: option.value, size: 24 }),
-                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label })
-                ] })
+                onChange: field.onChange,
+                disabled: isLoadingCurrencies
               }
             ) }),
             /* @__PURE__ */ jsx(FormMessage, {})
           ] })
         }
       ),
-      cryptoAmount !== null && selectedCurrency && /* @__PURE__ */ jsxs("div", { className: "bg-muted rounded-xl p-4 space-y-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "You will send" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(TokenIcon, { symbol: selectedCurrency.value, size: 20 }),
-            /* @__PURE__ */ jsxs("span", { className: "font-mono font-semibold", children: [
-              cryptoAmount.toFixed(8),
-              " ",
-              selectedCurrency.value
-            ] })
+      selectedCurrency && watchedAmount >= 1 && /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-xl p-4 space-y-2", children: isLoadingEstimate ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-2", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "ml-2 text-sm text-muted-foreground", children: "Getting rate..." })
+      ] }) : displayData ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Amount" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "$",
+            formatUsdAmount(displayData.amountToReceive)
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            "Service fee (",
+            displayData.serviceFeePercent,
+            "%)"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "+$",
+            formatUsdAmount(displayData.serviceFeeUsd)
+          ] })
+        ] }),
+        displayData.showRate && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
           /* @__PURE__ */ jsx("span", { children: "Rate" }),
           /* @__PURE__ */ jsxs("span", { children: [
             "1 ",
-            selectedCurrency.value,
+            displayData.token,
             " = $",
-            selectedCurrency.rate.toFixed(2)
+            displayData.rate
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "border-t pt-2 mt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "You will send" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-end", children: [
+              /* @__PURE__ */ jsx(TokenIcon, { symbol: displayData.token, size: 20 }),
+              /* @__PURE__ */ jsxs("span", { className: "font-mono font-semibold text-lg", children: [
+                displayData.cryptoAmount,
+                " ",
+                displayData.token
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+              "~$",
+              formatUsdAmount(displayData.totalToPayUsd)
+            ] })
           ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm pt-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "You will receive" }),
+          /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+            "$",
+            formatUsdAmount(displayData.amountToReceive)
+          ] })
+        ] }),
+        displayData.belowMinimum && displayData.minAmount && /* @__PURE__ */ jsxs("div", { className: "text-sm text-destructive mt-2 pt-2 border-t border-destructive/20", children: [
+          "Minimum amount: $",
+          displayData.minAmount
         ] })
-      ] }),
+      ] }) : /* @__PURE__ */ jsx("div", { className: "text-center text-sm text-muted-foreground py-2", children: "Enter amount to see conversion" }) }),
       error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }),
       /* @__PURE__ */ jsx(
         Button,
@@ -2079,7 +2679,7 @@ function AddFundsSheet({ open, onOpenChange, onSuccess }) {
           type: "submit",
           size: "lg",
           className: "w-full h-14 text-lg rounded-xl",
-          disabled: isSubmitting || currencyOptions.length === 0,
+          disabled: isSubmitting || currencyOptions.length === 0 || isLoadingEstimate || displayData?.belowMinimum,
           children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(RefreshCw, { className: "h-5 w-5 mr-2 animate-spin" }),
             "Creating..."
@@ -2090,54 +2690,54 @@ function AddFundsSheet({ open, onOpenChange, onSuccess }) {
   ] }) });
 }
 var WithdrawSchema = z.object({
-  amount: z.number().min(10, "Minimum $10.00"),
+  amount: z.number().min(10, "Minimum $10"),
   currency: z.string().min(1, "Select a currency"),
   wallet_address: z.string().min(26, "Invalid wallet address")
 });
-var SERVICE_FEE_PERCENT = 0.01;
-var NETWORK_FEE_USD = 1;
+var STORAGE_KEY2 = "payments:withdraw";
 function WithdrawSheet({ open, onOpenChange, onSuccess }) {
   const { currencies, isLoadingCurrencies, withdraw, balanceAmount } = useWallet();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState(null);
+  const [saved, setSaved] = useLocalStorage(STORAGE_KEY2, {
+    currency: "",
+    wallet: ""
+  });
   const form = useForm({
     resolver: zodResolver(WithdrawSchema),
     defaultValues: {
       amount: 10,
-      currency: "",
-      wallet_address: ""
+      currency: saved.currency,
+      wallet_address: saved.wallet
     }
   });
-  const currencyOptions = useMemo(() => {
-    return currencies.map((c) => ({
-      value: c.code,
-      label: c.network ? `${c.code} (${c.network})` : c.code,
-      rate: c.rate,
-      network: c.network
-    }));
-  }, [currencies]);
-  useMemo(() => {
-    if (currencyOptions.length > 0 && !form.getValues("currency")) {
-      const usdt = currencyOptions.find((c) => c.value.includes("USDT"));
-      form.setValue("currency", usdt?.value || currencyOptions[0].value);
-    }
-  }, [currencyOptions, form]);
-  const selectedCurrency = currencyOptions.find((c) => c.value === form.watch("currency"));
-  const amount = form.watch("amount") || 0;
-  const feeBreakdown = useMemo(() => {
-    const serviceFee = amount * SERVICE_FEE_PERCENT;
-    const networkFee = NETWORK_FEE_USD;
-    const totalFee = serviceFee + networkFee;
-    const finalAmount = Math.max(0, amount - totalFee);
-    const cryptoAmount = selectedCurrency?.rate ? finalAmount / selectedCurrency.rate : null;
+  const watchedAmount = form.watch("amount");
+  const watchedCurrency = form.watch("currency");
+  const watchedWallet = form.watch("wallet_address");
+  useAutoSave(watchedCurrency, (v) => setSaved((prev) => ({ ...prev, currency: v })));
+  useAutoSave(watchedWallet, (v) => setSaved((prev) => ({ ...prev, wallet: v })), (v) => v.length >= 26);
+  const currencyOptions = useCurrencyOptions(currencies);
+  useDefaultCurrency({
+    currencyOptions,
+    savedCurrency: saved.currency,
+    currentValue: watchedCurrency,
+    setValue: (v) => form.setValue("currency", v)
+  });
+  const selectedCurrency = currencyOptions.find((c) => c.value === watchedCurrency);
+  const amount = watchedAmount || 0;
+  const { estimate, isLoading: isLoadingEstimate } = useWithdrawalEstimate({
+    currencyCode: watchedCurrency,
+    amountUsd: amount,
+    minAmount: 10,
+    skip: amount < 10
+  });
+  const cryptoDisplay = useMemo(() => {
+    if (!selectedCurrency || !estimate) return null;
     return {
-      serviceFee,
-      networkFee,
-      totalFee,
-      finalAmount,
-      cryptoAmount
+      token: selectedCurrency.token,
+      cryptoAmount: formatCryptoAmount(estimate.estimatedAmount, estimate.isStablecoin)
     };
-  }, [amount, selectedCurrency]);
+  }, [selectedCurrency, estimate]);
   const insufficientBalance = amount > balanceAmount;
   const handleSubmit = useCallback(async (data) => {
     try {
@@ -2152,19 +2752,23 @@ function WithdrawSheet({ open, onOpenChange, onSuccess }) {
       onOpenChange(false);
       onSuccess?.(result);
     } catch (err) {
-      const message = err?.response?.data?.error || err?.response?.data?.message || err?.response?.data?.detail || err?.message || "Failed to create withdrawal request";
-      setError(message);
+      setError(extractErrorMessage(err, "Failed to create withdrawal request"));
     } finally {
       setIsSubmitting(false);
     }
   }, [withdraw, form, onOpenChange, onSuccess]);
   const handleOpenChange = useCallback((open2) => {
-    if (!open2) {
+    if (open2) {
+      form.reset({
+        amount: 10,
+        currency: saved.currency,
+        wallet_address: saved.wallet
+      });
+    } else {
       setError(null);
-      form.reset();
     }
     onOpenChange(open2);
-  }, [form, onOpenChange]);
+  }, [form, onOpenChange, saved]);
   return /* @__PURE__ */ jsx(ResponsiveSheet, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(ResponsiveSheetContent, { className: "sm:max-w-md", children: [
     /* @__PURE__ */ jsxs(ResponsiveSheetHeader, { children: [
       /* @__PURE__ */ jsx(ResponsiveSheetTitle, { children: "Withdraw" }),
@@ -2186,7 +2790,7 @@ function WithdrawSheet({ open, onOpenChange, onSuccess }) {
                   type: "number",
                   step: "0.01",
                   min: "10",
-                  placeholder: "10.00",
+                  placeholder: "10",
                   className: "pl-8 text-2xl h-14 font-semibold",
                   ...field,
                   onChange: (e) => field.onChange(parseFloat(e.target.value) || 0)
@@ -2196,7 +2800,7 @@ function WithdrawSheet({ open, onOpenChange, onSuccess }) {
             /* @__PURE__ */ jsx(FormMessage, {}),
             insufficientBalance && /* @__PURE__ */ jsxs("p", { className: "text-sm text-destructive mt-1", children: [
               "Insufficient balance (Available: $",
-              balanceAmount.toFixed(2),
+              formatUsdAmount(balanceAmount),
               ")"
             ] })
           ] })
@@ -2210,23 +2814,12 @@ function WithdrawSheet({ open, onOpenChange, onSuccess }) {
           render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
             /* @__PURE__ */ jsx(FormLabel, { children: "Withdraw as" }),
             /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-              Combobox,
+              CurrencyCombobox,
               {
                 options: currencyOptions,
                 value: field.value,
-                onValueChange: field.onChange,
-                placeholder: "Select currency...",
-                searchPlaceholder: "Search...",
-                disabled: isLoadingCurrencies,
-                className: "h-14",
-                renderOption: (option) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1", children: [
-                  /* @__PURE__ */ jsx(TokenIcon, { symbol: option.value, size: 24 }),
-                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label })
-                ] }),
-                renderValue: (option) => option && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsx(TokenIcon, { symbol: option.value, size: 24 }),
-                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label })
-                ] })
+                onChange: field.onChange,
+                disabled: isLoadingCurrencies
               }
             ) }),
             /* @__PURE__ */ jsx(FormMessage, {})
@@ -2257,36 +2850,49 @@ function WithdrawSheet({ open, onOpenChange, onSuccess }) {
           /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Amount" }),
           /* @__PURE__ */ jsxs("span", { children: [
             "$",
-            amount.toFixed(2)
+            formatUsdAmount(amount)
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Service fee (1%)" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
-            "-$",
-            feeBreakdown.serviceFee.toFixed(2)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Network fee" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
-            "-$",
-            feeBreakdown.networkFee.toFixed(2)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "border-t pt-2 mt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "You will receive" }),
-          /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
-            /* @__PURE__ */ jsxs("div", { className: "font-semibold", children: [
-              "$",
-              feeBreakdown.finalAmount.toFixed(2)
+        isLoadingEstimate ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-2", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+          /* @__PURE__ */ jsx("span", { children: "Calculating fees..." })
+        ] }) : estimate ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              "Service fee (",
+              estimate.serviceFeePercent,
+              "%)"
             ] }),
-            feeBreakdown.cryptoAmount !== null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
-              /* @__PURE__ */ jsx(TokenIcon, { symbol: selectedCurrency.value, size: 16 }),
-              /* @__PURE__ */ jsx("span", { className: "font-mono", children: feeBreakdown.cryptoAmount.toFixed(8) })
+            /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
+              "-$",
+              formatUsdAmount(estimate.serviceFeeUsd)
             ] })
-          ] })
-        ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Network fee" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
+              "-$",
+              formatUsdAmount(estimate.networkFeeUsd)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "border-t pt-2 mt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: "You will receive" }),
+            /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+              /* @__PURE__ */ jsxs("div", { className: "font-semibold", children: [
+                "$",
+                formatUsdAmount(estimate.amountToReceive)
+              ] }),
+              cryptoDisplay && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(TokenIcon, { symbol: cryptoDisplay.token, size: 16 }),
+                /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+                  cryptoDisplay.cryptoAmount,
+                  " ",
+                  cryptoDisplay.token
+                ] })
+              ] })
+            ] })
+          ] }) })
+        ] }) : null
       ] }),
       /* @__PURE__ */ jsxs(Alert, { children: [
         /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
@@ -2299,7 +2905,7 @@ function WithdrawSheet({ open, onOpenChange, onSuccess }) {
           type: "submit",
           size: "lg",
           className: "w-full h-14 text-lg rounded-xl",
-          disabled: isSubmitting || currencyOptions.length === 0 || insufficientBalance || feeBreakdown.finalAmount <= 0,
+          disabled: isSubmitting || currencyOptions.length === 0 || insufficientBalance || !estimate || estimate.amountToReceive <= 0 || isLoadingEstimate,
           children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(RefreshCw, { className: "h-5 w-5 mr-2 animate-spin" }),
             "Submitting..."
@@ -2310,6 +2916,229 @@ function WithdrawSheet({ open, onOpenChange, onSuccess }) {
   ] }) });
 }
 var statusConfig2 = {
+  pending: {
+    icon: Clock,
+    color: "text-yellow-500",
+    bg: "bg-yellow-500/10",
+    label: "Pending Approval"
+  },
+  approved: {
+    icon: CheckCircle2,
+    color: "text-blue-500",
+    bg: "bg-blue-500/10",
+    label: "Approved"
+  },
+  processing: {
+    icon: RefreshCw,
+    color: "text-blue-500",
+    bg: "bg-blue-500/10",
+    label: "Processing",
+    animate: true
+  },
+  completed: {
+    icon: CheckCircle2,
+    color: "text-green-500",
+    bg: "bg-green-500/10",
+    label: "Completed"
+  },
+  rejected: {
+    icon: XCircle,
+    color: "text-red-500",
+    bg: "bg-red-500/10",
+    label: "Rejected"
+  },
+  cancelled: {
+    icon: Ban,
+    color: "text-muted-foreground",
+    bg: "bg-muted",
+    label: "Cancelled"
+  }
+};
+function WithdrawalSheet({ withdrawalId, open, onOpenChange }) {
+  const { getWithdrawalDetails, cancelWithdrawal, refreshWallet } = useWallet();
+  const { data: withdrawal, isLoading, error, mutate } = useSWR(
+    open && withdrawalId ? ["withdrawal-details", withdrawalId] : null,
+    () => getWithdrawalDetails(withdrawalId),
+    { refreshInterval: 3e4 }
+  );
+  const displayData = useMemo(() => {
+    const s = withdrawal?.status?.toLowerCase() || "pending";
+    const config2 = statusConfig2[s] || statusConfig2.pending;
+    const isPending = s === "pending";
+    const isCompleted = s === "completed";
+    const isRejected = s === "rejected";
+    const isCancelled = s === "cancelled";
+    const isProcessing = s === "processing" || s === "approved";
+    const canCancel2 = isPending;
+    let description2 = "";
+    if (isPending) description2 = "Waiting for admin approval";
+    else if (isProcessing) description2 = "Your withdrawal is being processed";
+    else if (isCompleted) description2 = "Withdrawal completed successfully";
+    else if (isRejected) description2 = "Withdrawal was rejected";
+    else if (isCancelled) description2 = "Withdrawal was cancelled";
+    const amountUsd2 = withdrawal?.amount_usd ? `$${parseFloat(withdrawal.amount_usd).toFixed(2)}` : "";
+    const finalAmountUsd2 = withdrawal?.final_amount_usd ? `$${parseFloat(withdrawal.final_amount_usd).toFixed(2)}` : "";
+    const totalFeeUsd2 = withdrawal?.total_fee_usd ? `$${parseFloat(withdrawal.total_fee_usd).toFixed(2)}` : "";
+    const createdAt2 = withdrawal?.created_at ? moment3.utc(withdrawal.created_at).local().format("MMM D, YYYY HH:mm") : "";
+    const completedAt2 = withdrawal?.completed_at ? moment3.utc(withdrawal.completed_at).local().format("MMM D, YYYY HH:mm") : null;
+    return {
+      status: s,
+      config: config2,
+      isPending,
+      isCompleted,
+      isRejected,
+      isCancelled,
+      isProcessing,
+      canCancel: canCancel2,
+      description: description2,
+      amountUsd: amountUsd2,
+      finalAmountUsd: finalAmountUsd2,
+      totalFeeUsd: totalFeeUsd2,
+      createdAt: createdAt2,
+      completedAt: completedAt2
+    };
+  }, [withdrawal]);
+  const { config, canCancel, description, amountUsd, finalAmountUsd, totalFeeUsd, createdAt, completedAt } = displayData;
+  const StatusIcon = config.icon;
+  const handleCancel = async () => {
+    if (!withdrawalId) return;
+    try {
+      await cancelWithdrawal(withdrawalId);
+      await mutate();
+      await refreshWallet();
+    } catch (err) {
+      console.error("Failed to cancel withdrawal:", err);
+    }
+  };
+  return /* @__PURE__ */ jsx(ResponsiveSheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(ResponsiveSheetContent, { className: "sm:max-w-lg", children: [
+    /* @__PURE__ */ jsxs(ResponsiveSheetHeader, { children: [
+      /* @__PURE__ */ jsx(ResponsiveSheetTitle, { children: "Withdrawal Details" }),
+      /* @__PURE__ */ jsx(ResponsiveSheetDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 sm:p-0 sm:mt-4 overflow-y-auto max-h-[70vh]", children: [
+      isLoading && /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-16 w-full rounded-xl" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-24 w-full rounded-xl" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full rounded-xl" })
+      ] }),
+      error && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12", children: [
+        /* @__PURE__ */ jsx(XCircle, { className: "h-12 w-12 text-destructive mb-4" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Failed to load withdrawal" }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => mutate(), children: "Try Again" })
+      ] }),
+      withdrawal && !isLoading && /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 p-4 rounded-xl", config.bg), children: [
+          /* @__PURE__ */ jsx(StatusIcon, { className: cn("h-6 w-6", config.color, config.animate && "animate-spin") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-semibold", children: config.label }),
+            withdrawal.admin_notes && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: withdrawal.admin_notes })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-muted rounded-xl p-4 space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Amount" }),
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: amountUsd })
+          ] }),
+          totalFeeUsd && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Total fees" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
+              "-",
+              totalFeeUsd
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-2 border-t", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "You receive" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(TokenIcon, { symbol: withdrawal.currency_code, size: 24 }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono font-bold text-lg", children: finalAmountUsd })
+            ] })
+          ] }),
+          withdrawal.crypto_amount && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Crypto amount" }),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+              withdrawal.crypto_amount,
+              " ",
+              withdrawal.currency_token
+            ] })
+          ] })
+        ] }),
+        withdrawal.wallet_address && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Destination Wallet" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 p-3 bg-muted rounded-xl font-mono text-sm break-all", children: withdrawal.wallet_address }),
+            /* @__PURE__ */ jsx(CopyButton, { value: withdrawal.wallet_address, variant: "outline", className: "shrink-0" })
+          ] })
+        ] }),
+        withdrawal.transaction_hash && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Transaction Hash" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 p-3 bg-muted rounded-xl font-mono text-sm break-all", children: withdrawal.transaction_hash }),
+            /* @__PURE__ */ jsx(CopyButton, { value: withdrawal.transaction_hash, variant: "outline", className: "shrink-0" })
+          ] })
+        ] }),
+        withdrawal.explorer_link && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            className: "w-full",
+            onClick: () => window.open(withdrawal.explorer_link, "_blank"),
+            children: [
+              /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 mr-2" }),
+              "View on Explorer"
+            ]
+          }
+        ),
+        canCancel && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "destructive",
+            className: "w-full",
+            onClick: handleCancel,
+            children: [
+              /* @__PURE__ */ jsx(Ban, { className: "h-4 w-4 mr-2" }),
+              "Cancel Withdrawal"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-xs text-muted-foreground pt-4 border-t", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { children: "Withdrawal ID" }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: withdrawal.id })
+          ] }),
+          withdrawal.internal_withdrawal_id && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { children: "Reference #" }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: withdrawal.internal_withdrawal_id })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { children: "Created" }),
+            /* @__PURE__ */ jsx("span", { children: createdAt })
+          ] }),
+          completedAt && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { children: "Completed" }),
+            /* @__PURE__ */ jsx("span", { children: completedAt })
+          ] }),
+          withdrawal.currency_network && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { children: "Network" }),
+            /* @__PURE__ */ jsx("span", { children: withdrawal.currency_network })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            className: "w-full",
+            onClick: () => mutate(),
+            children: [
+              /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-2" }),
+              "Refresh Status"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+var statusConfig3 = {
   pending: {
     icon: Clock,
     color: "text-yellow-500",
@@ -2342,10 +3171,10 @@ var statusConfig2 = {
     label: "Expired"
   }
 };
-function PaymentSheet({ paymentId, open, onOpenChange }) {
+function PaymentSheet({ paymentId, open, onOpenChange, onCreateNew }) {
   const { getPaymentDetails } = useWallet();
   const [timeLeft, setTimeLeft] = useState("");
-  const { data: payment, isLoading, error, mutate } = useSWR2(
+  const { data: payment, isLoading, error, mutate } = useSWR(
     open && paymentId ? ["payment-details", paymentId] : null,
     () => getPaymentDetails(paymentId),
     { refreshInterval: 1e4 }
@@ -2353,14 +3182,14 @@ function PaymentSheet({ paymentId, open, onOpenChange }) {
   useEffect(() => {
     if (!payment?.expires_at) return;
     const updateTimeLeft = () => {
-      const now = moment2();
-      const expires = moment2.utc(payment.expires_at);
+      const now = moment3();
+      const expires = moment3.utc(payment.expires_at);
       const diff = expires.diff(now);
       if (diff <= 0) {
         setTimeLeft("Expired");
         return;
       }
-      const duration = moment2.duration(diff);
+      const duration = moment3.duration(diff);
       const hours = Math.floor(duration.asHours());
       const minutes = duration.minutes();
       const seconds = duration.seconds();
@@ -2370,22 +3199,59 @@ function PaymentSheet({ paymentId, open, onOpenChange }) {
     const interval = setInterval(updateTimeLeft, 1e3);
     return () => clearInterval(interval);
   }, [payment?.expires_at]);
-  const status = useMemo(() => {
+  const displayData = useMemo(() => {
     const s = payment?.status?.toLowerCase();
-    if (s === "completed" || s === "success" || s === "finished") return "completed";
-    if (s === "confirming" || s === "partially_paid") return "confirming";
-    if (s === "expired") return "expired";
-    if (s === "failed" || s === "error" || s === "cancelled") return "failed";
-    return "pending";
-  }, [payment?.status]);
-  const config = statusConfig2[status];
+    let status;
+    if (s === "completed" || s === "success" || s === "finished") status = "completed";
+    else if (s === "confirming" || s === "partially_paid") status = "confirming";
+    else if (s === "expired") status = "expired";
+    else if (s === "failed" || s === "error" || s === "cancelled") status = "failed";
+    else status = "pending";
+    const config2 = statusConfig3[status];
+    const isPending = status === "pending";
+    const isExpired2 = status === "expired" || timeLeft === "Expired";
+    const isCompleted = status === "completed";
+    const isFailed = status === "failed";
+    const isConfirming = status === "confirming";
+    const canPay2 = isPending && !isExpired2;
+    let description2 = "";
+    if (canPay2) description2 = "Send cryptocurrency to complete payment";
+    else if (isExpired2) description2 = "This payment has expired";
+    else if (isCompleted) description2 = "Payment completed successfully";
+    else if (isFailed) description2 = "Payment failed";
+    else if (isConfirming) description2 = "Confirming your payment";
+    const statusBadge2 = {
+      bg: isExpired2 ? "bg-muted" : config2.bg,
+      iconColor: isExpired2 ? "text-muted-foreground" : config2.color,
+      iconAnimate: config2.animate,
+      label: isExpired2 ? "Payment Expired" : config2.label,
+      subtitle: canPay2 && timeLeft ? `Expires in ${timeLeft}` : isExpired2 ? "Please create a new payment to continue" : null
+    };
+    const qrCodeUrl2 = payment?.pay_address && canPay2 ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}` : null;
+    const amountUsd2 = payment?.amount_usd ? `$${parseFloat(payment.amount_usd).toFixed(2)} USD` : "";
+    const createdAt2 = payment?.created_at ? moment3.utc(payment.created_at).local().format("MMM D, YYYY HH:mm") : "";
+    return {
+      status,
+      config: config2,
+      isPending,
+      isExpired: isExpired2,
+      isCompleted,
+      isFailed,
+      isConfirming,
+      canPay: canPay2,
+      description: description2,
+      statusBadge: statusBadge2,
+      qrCodeUrl: qrCodeUrl2,
+      amountUsd: amountUsd2,
+      createdAt: createdAt2
+    };
+  }, [payment, timeLeft]);
+  const { config, canPay, isExpired, description, statusBadge, qrCodeUrl, amountUsd, createdAt } = displayData;
   const StatusIcon = config.icon;
-  const qrCodeUrl = payment?.pay_address ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}` : null;
-  const isPending = status === "pending";
   return /* @__PURE__ */ jsx(ResponsiveSheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(ResponsiveSheetContent, { className: "sm:max-w-lg", children: [
     /* @__PURE__ */ jsxs(ResponsiveSheetHeader, { children: [
       /* @__PURE__ */ jsx(ResponsiveSheetTitle, { children: "Payment Details" }),
-      /* @__PURE__ */ jsx(ResponsiveSheetDescription, { children: isPending ? "Send cryptocurrency to complete payment" : "Payment information" })
+      /* @__PURE__ */ jsx(ResponsiveSheetDescription, { children: description })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "p-4 sm:p-0 sm:mt-4 overflow-y-auto max-h-[70vh]", children: [
       isLoading && /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
@@ -2399,14 +3265,11 @@ function PaymentSheet({ paymentId, open, onOpenChange }) {
         /* @__PURE__ */ jsx(Button, { onClick: () => mutate(), children: "Try Again" })
       ] }),
       payment && !isLoading && /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 p-4 rounded-xl", config.bg), children: [
-          /* @__PURE__ */ jsx(StatusIcon, { className: cn("h-6 w-6", config.color, config.animate && "animate-spin") }),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 p-4 rounded-xl", statusBadge.bg), children: [
+          /* @__PURE__ */ jsx(StatusIcon, { className: cn("h-6 w-6", statusBadge.iconColor, statusBadge.iconAnimate && "animate-spin") }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "font-semibold", children: config.label }),
-            isPending && timeLeft && /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
-              "Expires in ",
-              timeLeft
-            ] })
+            /* @__PURE__ */ jsx("div", { className: "font-semibold", children: statusBadge.label }),
+            statusBadge.subtitle && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: statusBadge.subtitle })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "bg-muted rounded-xl p-4 space-y-3", children: [
@@ -2423,30 +3286,38 @@ function PaymentSheet({ paymentId, open, onOpenChange }) {
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
             /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Equivalent" }),
-            /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
-              "$",
-              parseFloat(payment.amount_usd).toFixed(2),
-              " USD"
-            ] })
+            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: amountUsd })
           ] }),
           payment.currency_network && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm pt-2 border-t", children: [
             /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Network" }),
             /* @__PURE__ */ jsx("span", { className: "font-medium", children: payment.currency_network })
           ] })
         ] }),
-        qrCodeUrl && isPending && /* @__PURE__ */ jsx("div", { className: "flex justify-center p-6 bg-white rounded-xl", children: /* @__PURE__ */ jsx("img", { src: qrCodeUrl, alt: "Payment QR Code", className: "w-48 h-48" }) }),
-        payment.pay_address && isPending && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        qrCodeUrl && /* @__PURE__ */ jsx("div", { className: "flex justify-center p-6 bg-white rounded-xl", children: /* @__PURE__ */ jsx("img", { src: qrCodeUrl, alt: "Payment QR Code", className: "w-48 h-48" }) }),
+        payment.pay_address && canPay && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Payment Address" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx("div", { className: "flex-1 p-3 bg-muted rounded-xl font-mono text-sm break-all", children: payment.pay_address }),
             /* @__PURE__ */ jsx(CopyButton, { value: payment.pay_address, variant: "outline", className: "shrink-0" })
           ] })
         ] }),
+        isExpired && onCreateNew && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "lg",
+            className: "w-full",
+            onClick: () => {
+              onOpenChange(false);
+              onCreateNew();
+            },
+            children: "Create New Payment"
+          }
+        ),
         payment.transaction_hash && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Transaction Hash" }),
           /* @__PURE__ */ jsx("div", { className: "p-3 bg-muted rounded-xl font-mono text-sm break-all", children: payment.transaction_hash })
         ] }),
-        payment.payment_url && isPending && /* @__PURE__ */ jsxs(
+        payment.payment_url && canPay && /* @__PURE__ */ jsxs(
           Button,
           {
             variant: "outline",
@@ -2469,7 +3340,7 @@ function PaymentSheet({ paymentId, open, onOpenChange }) {
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
             /* @__PURE__ */ jsx("span", { children: "Created" }),
-            /* @__PURE__ */ jsx("span", { children: moment2.utc(payment.created_at).local().format("MMM D, YYYY HH:mm") })
+            /* @__PURE__ */ jsx("span", { children: createdAt })
           ] })
         ] }),
         /* @__PURE__ */ jsxs(
@@ -2488,54 +3359,85 @@ function PaymentSheet({ paymentId, open, onOpenChange }) {
     ] })
   ] }) });
 }
-var ResponsiveSheetContext = React2.createContext({ isMobile: false });
-function ResponsiveSheet4({ open, onOpenChange, children }) {
-  const isMobile = useIsMobile();
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(ResponsiveSheetContext.Provider, { value: { isMobile: true }, children: /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children }) });
-  }
-  return /* @__PURE__ */ jsx(ResponsiveSheetContext.Provider, { value: { isMobile: false }, children: /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children }) });
-}
-function ResponsiveSheetContent4({ children, className }) {
-  const { isMobile } = React2.useContext(ResponsiveSheetContext);
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(DrawerContent, { className, children });
-  }
-  return /* @__PURE__ */ jsx(DialogContent, { className, children });
-}
-function ResponsiveSheetHeader4({ children, className }) {
-  const { isMobile } = React2.useContext(ResponsiveSheetContext);
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(DrawerHeader, { className, children });
-  }
-  return /* @__PURE__ */ jsx(DialogHeader, { className, children });
-}
-function ResponsiveSheetTitle4({ children, className }) {
-  const { isMobile } = React2.useContext(ResponsiveSheetContext);
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(DrawerTitle, { className, children });
-  }
-  return /* @__PURE__ */ jsx(DialogTitle, { className, children });
-}
-function ResponsiveSheetDescription4({ children, className }) {
-  const { isMobile } = React2.useContext(ResponsiveSheetContext);
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(DrawerDescription, { className, children });
-  }
-  return /* @__PURE__ */ jsx(DialogDescription, { className, children });
-}
-function ResponsiveSheetFooter({ children, className }) {
-  const { isMobile } = React2.useContext(ResponsiveSheetContext);
-  if (isMobile) {
-    return /* @__PURE__ */ jsx(DrawerFooter, { className, children });
-  }
-  return /* @__PURE__ */ jsx(DialogFooter, { className, children });
+var WalletContent = () => {
+  const [addFundsOpen, setAddFundsOpen] = useState(false);
+  const [withdrawOpen, setWithdrawOpen] = useState(false);
+  const [selectedPaymentId, setSelectedPaymentId] = useState(null);
+  const [paymentSheetOpen, setPaymentSheetOpen] = useState(false);
+  const [selectedWithdrawalId, setSelectedWithdrawalId] = useState(null);
+  const [withdrawalSheetOpen, setWithdrawalSheetOpen] = useState(false);
+  const handleActivityClick = useCallback((item) => {
+    if (item.payment) {
+      setSelectedPaymentId(item.payment.id);
+      setPaymentSheetOpen(true);
+    } else if (item.withdrawal) {
+      setSelectedWithdrawalId(item.withdrawal.id);
+      setWithdrawalSheetOpen(true);
+    }
+  }, []);
+  const handlePaymentCreated = useCallback((payment) => {
+    setSelectedPaymentId(payment.id);
+    setPaymentSheetOpen(true);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen", children: [
+    /* @__PURE__ */ jsx(
+      BalanceHero,
+      {
+        onAddFunds: () => setAddFundsOpen(true),
+        onWithdraw: () => setWithdrawOpen(true),
+        className: "bg-muted/30 border-b"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActivityList,
+      {
+        onItemClick: handleActivityClick,
+        limit: 20,
+        className: "max-w-2xl mx-auto pb-12"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AddFundsSheet,
+      {
+        open: addFundsOpen,
+        onOpenChange: setAddFundsOpen,
+        onSuccess: handlePaymentCreated
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      WithdrawSheet,
+      {
+        open: withdrawOpen,
+        onOpenChange: setWithdrawOpen
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PaymentSheet,
+      {
+        paymentId: selectedPaymentId,
+        open: paymentSheetOpen,
+        onOpenChange: setPaymentSheetOpen,
+        onCreateNew: () => setAddFundsOpen(true)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      WithdrawalSheet,
+      {
+        withdrawalId: selectedWithdrawalId,
+        open: withdrawalSheetOpen,
+        onOpenChange: setWithdrawalSheetOpen
+      }
+    )
+  ] });
+};
+function WalletPage() {
+  return /* @__PURE__ */ jsx(WalletProvider, { children: /* @__PURE__ */ jsx(WalletContent, {}) });
 }
 
 // package.json
 var package_default = {
   name: "@djangocfg/ext-payments",
-  version: "1.0.17",
+  version: "1.0.19",
   description: "Payments system extension for DjangoCFG",
   keywords: [
     "django",
@@ -2675,4 +3577,4 @@ export default function CryptoCheckout() {
   ]
 });
 
-export { API, APIClient, APIError, APILogger, ActivityItem, ActivityList, AddFundsSheet, BalanceHero, BalanceSchema, CookieStorageAdapter, CurrencySchema, DEFAULT_RETRY_CONFIG, enums_exports as Enums, models_exports as ExtPaymentsPaymentsTypes, FetchAdapter, fetchers_exports as Fetchers, LocalStorageAdapter, MemoryStorageAdapter, NetworkError, PaginatedPaymentListListSchema, PaginatedWithdrawalListListSchema, PaymentCreateRequestSchema, PaymentDetailSchema, PaymentListSchema, PaymentSheet, REFRESH_TOKEN_KEY, ResponsiveSheet4 as ResponsiveSheet, ResponsiveSheetContent4 as ResponsiveSheetContent, ResponsiveSheetDescription4 as ResponsiveSheetDescription, ResponsiveSheetFooter, ResponsiveSheetHeader4 as ResponsiveSheetHeader, ResponsiveSheetTitle4 as ResponsiveSheetTitle, schemas_exports as Schemas, TOKEN_KEY, TransactionSchema, WithdrawSheet, WithdrawalCreateRequestSchema, WithdrawalDetailSchema, WithdrawalListSchema, apiPayments, clearAPITokens, configureAPI, createPaymentsPaymentsConfirmCreate, createPaymentsPaymentsCreateCreate, createPaymentsWithdrawalsCancelCreate, createPaymentsWithdrawalsCreateCreate, dispatchValidationError, extensionConfig, formatZodError, getAPIInstance, getPaymentsBalanceRetrieve, getPaymentsCurrenciesList, getPaymentsPaymentsList, getPaymentsPaymentsRetrieve, getPaymentsPaymentsStatusRetrieve, getPaymentsTransactionsList, getPaymentsWithdrawalsList, getPaymentsWithdrawalsRetrieve, isAPIConfigured, onValidationError, reconfigureAPI, resetAPI, shouldRetry, withRetry };
+export { API, APIClient, APIError, APILogger, ActivityItem, ActivityList, AddFundsSheet, BalanceHero, BalanceSchema, CookieStorageAdapter, CurrencySchema, DEFAULT_RETRY_CONFIG, enums_exports as Enums, models_exports as ExtPaymentsPaymentsTypes, FetchAdapter, fetchers_exports as Fetchers, LocalStorageAdapter, MemoryStorageAdapter, NetworkError, PaginatedPaymentListListSchema, PaginatedWithdrawalListListSchema, PaymentCreateRequestSchema, PaymentCreateResponseSchema, PaymentDetailSchema, PaymentListSchema, PaymentSheet, REFRESH_TOKEN_KEY, schemas_exports as Schemas, TOKEN_KEY, TransactionSchema, WalletPage, WithdrawSheet, WithdrawalCancelResponseSchema, WithdrawalCreateRequestSchema, WithdrawalCreateResponseSchema, WithdrawalDetailSchema, WithdrawalListSchema, WithdrawalSheet, apiPayments, clearAPITokens, configureAPI, createPaymentsPaymentsConfirmCreate, createPaymentsPaymentsCreateCreate, createPaymentsWithdrawalsCancelCreate, createPaymentsWithdrawalsCreateCreate, dispatchValidationError, extensionConfig, formatZodError, getAPIInstance, getPaymentsBalanceRetrieve, getPaymentsCurrenciesEstimateRetrieve, getPaymentsCurrenciesList, getPaymentsCurrenciesWithdrawalEstimateRetrieve, getPaymentsPaymentsList, getPaymentsPaymentsRetrieve, getPaymentsPaymentsStatusRetrieve, getPaymentsTransactionsList, getPaymentsWithdrawalsList, getPaymentsWithdrawalsRetrieve, isAPIConfigured, onValidationError, reconfigureAPI, resetAPI, shouldRetry, withRetry };