@djangocfg/ext-payments 1.0.14 → 1.0.19

package/src/hooks/useEstimate.ts

@@ -0,0 +1,113 @@
+'use client';
+
+/**
+ * Hook for fetching currency estimates with debounce
+ */
+
+import { useState, useEffect } from 'react';
+import { apiPayments } from '../api';
+import type { DepositEstimate } from '../types';
+
+interface UseEstimateOptions {
+  /** Currency code to get estimate for */
+  currencyCode: string | undefined;
+  /** Amount in USD */
+  amountUsd: number;
+  /** Minimum amount required (default: 0) */
+  minAmount?: number;
+  /** Debounce delay in ms (default: 300) */
+  debounceMs?: number;
+  /** Whether to skip fetching (e.g., when conditions not met) */
+  skip?: boolean;
+}
+
+/** Parsed deposit estimate data for UI */
+interface DepositEstimateData {
+  estimatedAmount: number;
+  usdRate: number;
+  minAmountUsd: number | null;
+  isStablecoin: boolean;
+  amountToReceive: number;
+  serviceFeeUsd: number;
+  serviceFeePercent: number;
+  totalToPayUsd: number;
+}
+
+interface UseEstimateResult {
+  estimate: DepositEstimateData | null;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+/**
+ * Fetch currency estimate with debouncing
+ *
+ * @example
+ * ```tsx
+ * const { estimate, isLoading } = useEstimate({
+ *   currencyCode: 'USDTTRC20',
+ *   amountUsd: 100,
+ *   minAmount: 1,
+ * });
+ * ```
+ */
+export function useEstimate({
+  currencyCode,
+  amountUsd,
+  minAmount = 0,
+  debounceMs = 300,
+  skip = false,
+}: UseEstimateOptions): UseEstimateResult {
+  const [estimate, setEstimate] = useState<DepositEstimateData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    // Skip if conditions not met
+    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);
+      }
+    };
+
+    // Debounce the fetch
+    const timeoutId = setTimeout(fetchEstimate, debounceMs);
+    return () => clearTimeout(timeoutId);
+  }, [currencyCode, amountUsd, minAmount, debounceMs, skip]);
+
+  return { estimate, isLoading, error };
+}

package/src/hooks/useWithdrawalEstimate.ts

@@ -0,0 +1,117 @@
+'use client';
+
+/**
+ * Hook for fetching withdrawal estimates with debounce
+ */
+
+import { useState, useEffect } from 'react';
+import { apiPayments } from '../api';
+import type { WithdrawalEstimate } from '../types';
+
+interface UseWithdrawalEstimateOptions {
+  /** Currency code to get estimate for */
+  currencyCode: string | undefined;
+  /** Amount in USD to withdraw */
+  amountUsd: number;
+  /** Minimum amount required (default: 10) */
+  minAmount?: number;
+  /** Debounce delay in ms (default: 300) */
+  debounceMs?: number;
+  /** Whether to skip fetching */
+  skip?: boolean;
+}
+
+/** Parsed withdrawal estimate data for UI */
+interface WithdrawalEstimateData {
+  estimatedAmount: number;
+  usdRate: number;
+  minAmountUsd: number | null;
+  isStablecoin: boolean;
+  amountRequested: number;
+  serviceFeeUsd: number;
+  serviceFeePercent: number;
+  networkFeeUsd: number;
+  totalFeesUsd: number;
+  amountToReceive: number;
+}
+
+interface UseWithdrawalEstimateResult {
+  estimate: WithdrawalEstimateData | null;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+/**
+ * Fetch withdrawal estimate with debouncing
+ *
+ * @example
+ * ```tsx
+ * const { estimate, isLoading } = useWithdrawalEstimate({
+ *   currencyCode: 'USDTTRC20',
+ *   amountUsd: 100,
+ *   minAmount: 10,
+ * });
+ * ```
+ */
+export function useWithdrawalEstimate({
+  currencyCode,
+  amountUsd,
+  minAmount = 10,
+  debounceMs = 300,
+  skip = false,
+}: UseWithdrawalEstimateOptions): UseWithdrawalEstimateResult {
+  const [estimate, setEstimate] = useState<WithdrawalEstimateData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    // Skip if conditions not met
+    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);
+      }
+    };
+
+    // Debounce the fetch
+    const timeoutId = setTimeout(fetchEstimate, debounceMs);
+    return () => clearTimeout(timeoutId);
+  }, [currencyCode, amountUsd, minAmount, debounceMs, skip]);
+
+  return { estimate, isLoading, error };
+}

package/src/index.ts

@@ -1,38 +1,29 @@
 /**
- * @djangocfg/ext-payments
+ * Wallet Extension (Apple-style)
  *
- * Payments system extension.
- * This entry point is server-safe (no SWR/React hooks).
- *
- * For React hooks, import from '@djangocfg/ext-payments/hooks'
+ * Simplified payments system with single page UX.
  */
 
+// Page component
+export { WalletPage } from './WalletPage';
+
 // API client (server-safe)
 export * from './api/generated/ext_payments';
 export { API } from './api/generated/ext_payments';
 export { apiPayments } from './api';
 
-// Layout components
-export { PaymentsLayout } from './layouts/PaymentsLayout';
-export type { PaymentsLayoutProps } from './layouts/PaymentsLayout/PaymentsLayout';
-
-// Events
-export * from './layouts/PaymentsLayout/events';
-
-// Types
-export type { PaymentTab } from './layouts/PaymentsLayout/types';
+// Components
+export * from './components';
 
 // Re-export API types for convenience
 export type {
   Balance,
-  Currency,
   PaymentList,
   PaymentDetail,
+  PaymentCreateRequest,
   Transaction,
   PaginatedPaymentListList,
 } from './api/generated/ext_payments/_utils/schemas';
 
-// Note: Hooks are NOT exported here to keep this bundle server-safe
-// Use: import { usePaymentsList } from '@djangocfg/ext-payments/hooks'
-// Export config
+// Config
 export { extensionConfig } from './config';

package/src/types/index.ts

@@ -0,0 +1,78 @@
+
+// =============================================================================
+// Estimate Types (not generated - defined manually for estimate endpoints)
+// =============================================================================
+
+/**
+ * Deposit estimate response from API
+ */
+export interface DepositEstimate {
+  success: boolean;
+  /** Crypto amount to send (includes fees) */
+  estimated_amount: string;
+  /** USD rate (how much USD per 1 crypto) */
+  usd_rate: string;
+  /** Minimum amount in USD */
+  min_amount_usd: string | null;
+  /** Whether the currency is a stablecoin */
+  is_stablecoin: boolean;
+  /** Amount user will receive on balance (USD) */
+  amount_to_receive: string;
+  /** Service fee in USD */
+  service_fee_usd: string;
+  /** Service fee percentage (e.g., 2 for 2%) */
+  service_fee_percent: string;
+  /** Total USD amount to pay (including fees) */
+  total_to_pay_usd: string;
+}
+
+/**
+ * Withdrawal estimate response from API
+ */
+export interface WithdrawalEstimate {
+  success: boolean;
+  /** Crypto amount user will receive */
+  estimated_amount: string;
+  /** USD rate (how much USD per 1 crypto) */
+  usd_rate: string;
+  /** Minimum amount in USD */
+  min_amount_usd: string | null;
+  /** Whether the currency is a stablecoin */
+  is_stablecoin: boolean;
+  /** Amount user requested to withdraw */
+  amount_requested: string;
+  /** Service fee in USD */
+  service_fee_usd: string;
+  /** Service fee percentage (e.g., 1 for 1%) */
+  service_fee_percent: string;
+  /** Network fee in USD */
+  network_fee_usd: string;
+  /** Total fees in USD */
+  total_fees_usd: string;
+  /** Amount user will receive after fees (USD) */
+  amount_to_receive: string;
+}
+
+// =============================================================================
+// UI Helper Types
+// =============================================================================
+
+/**
+ * Currency option for combobox
+ */
+export interface CurrencyOption {
+  value: string;
+  label: string;
+  token: string;
+  network?: string;
+}
+
+/**
+ * Formatted display data for crypto transactions
+ */
+export interface CryptoDisplayData {
+  token: string;
+  amount: string;
+  rate: string;
+  showRate: boolean;
+}

package/src/utils/errors.ts

@@ -0,0 +1,36 @@
+/**
+ * Error handling utilities
+ */
+
+/**
+ * Extract user-friendly error message from API error response
+ *
+ * Handles various error formats:
+ * - APIError with response.data
+ * - Axios-style errors
+ * - Plain Error objects
+ */
+export function extractErrorMessage(err: unknown, fallback = 'An error occurred'): string {
+  if (!err) return fallback;
+
+  // Type guard for error-like objects
+  const error = err as Record<string, unknown>;
+
+  // APIError / Axios style: err.response.data.error
+  const responseData = (error.response as Record<string, unknown>)?.data as Record<string, unknown> | undefined;
+  const response = responseData || error.response as Record<string, unknown> | undefined;
+
+  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;
+  }
+
+  // APIError getter style
+  if (typeof error.errorMessage === 'string') return error.errorMessage;
+
+  // Plain Error
+  if (typeof error.message === 'string') return error.message;
+
+  return fallback;
+}

package/src/utils/format.ts

@@ -0,0 +1,65 @@
+/**
+ * Formatting utilities for Payments module
+ */
+
+/**
+ * Format USD rate with adaptive decimal places based on value
+ *
+ * - >= $1: 2 decimals (e.g., $95,503.90)
+ * - $0.01-$0.99: up to 4 decimals (e.g., $0.0123)
+ * - $0.0001-$0.0099: up to 6 decimals (e.g., $0.000253)
+ * - < $0.0001: up to 8 decimals (e.g., $0.00000025)
+ */
+export function formatUsdRate(rate: number): string {
+  if (rate >= 1) {
+    return rate.toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  } else if (rate >= 0.01) {
+    return rate.toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 4,
+    });
+  } else if (rate >= 0.0001) {
+    return rate.toLocaleString(undefined, {
+      minimumFractionDigits: 4,
+      maximumFractionDigits: 6,
+    });
+  } else {
+    return rate.toLocaleString(undefined, {
+      minimumFractionDigits: 6,
+      maximumFractionDigits: 8,
+    });
+  }
+}
+
+/**
+ * Format crypto amount with appropriate decimal places
+ *
+ * @param amount - The crypto amount to format
+ * @param isStablecoin - Whether the currency is a stablecoin (affects decimal places)
+ */
+export function formatCryptoAmount(amount: number, isStablecoin: boolean): string {
+  const decimals = isStablecoin ? 2 : 8;
+  return amount.toFixed(decimals);
+}
+
+/**
+ * Format USD amount for display
+ * Shows cents only if they exist (e.g., $100 not $100.00, but $99.50)
+ */
+export function formatUsdAmount(amount: number, alwaysShowCents = false): string {
+  if (alwaysShowCents) {
+    return amount.toFixed(2);
+  }
+
+  // Check if amount has cents
+  const hasCents = amount % 1 !== 0;
+
+  if (hasCents) {
+    return amount.toFixed(2);
+  }
+
+  return amount.toFixed(0);
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './format';
+export * from './errors';
+export * from './logger';

package/src/contexts/BalancesContext.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import React, { createContext, ReactNode, useContext } from 'react';
-
-import { apiPayments } from '../api';
-import { usePaymentsBalanceRetrieve } from '../api/generated/ext_payments/_utils/hooks';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Context Type
-// ─────────────────────────────────────────────────────────────────────────
-
-export interface BalancesContextValue {
-  // Balance data - single endpoint returns balance info
-  balance: any | undefined;
-  isLoadingBalance: boolean;
-  balanceError: Error | undefined;
-  refreshBalance: () => Promise<void>;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Context
-// ─────────────────────────────────────────────────────────────────────────
-
-const BalancesContext = createContext<BalancesContextValue | undefined>(undefined);
-
-// ─────────────────────────────────────────────────────────────────────────
-// Provider
-// ─────────────────────────────────────────────────────────────────────────
-
-export function BalancesProvider({ children }: { children: ReactNode }) {
-  // Get balance from /cfg/payments/balance/
-  const {
-    data: balance,
-    error: balanceError,
-    isLoading: isLoadingBalance,
-    mutate: mutateBalance,
-  } = usePaymentsBalanceRetrieve(apiPayments);
-
-  const refreshBalance = async () => {
-    await mutateBalance();
-  };
-
-  const value: BalancesContextValue = {
-    balance,
-    isLoadingBalance,
-    balanceError,
-    refreshBalance,
-  };
-
-  return <BalancesContext.Provider value={value}>{children}</BalancesContext.Provider>;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Hook
-// ─────────────────────────────────────────────────────────────────────────
-
-export function useBalancesContext(): BalancesContextValue {
-  const context = useContext(BalancesContext);
-  if (!context) {
-    throw new Error('useBalancesContext must be used within BalancesProvider');
-  }
-  return context;
-}

package/src/contexts/CurrenciesContext.tsx

@@ -1,64 +0,0 @@
-'use client';
-
-import React, { createContext, ReactNode, useContext } from 'react';
-
-import { apiPayments } from '../api';
-import { usePaymentsCurrenciesList } from '../api/generated/ext_payments/_utils/hooks';
-
-// ─────────────────────────────────────────────────────────────────────────
-// Context Type
-// ─────────────────────────────────────────────────────────────────────────
-
-export interface CurrenciesContextValue {
-  // Currencies data - returns raw response with currencies array
-  currencies: any | undefined;
-  isLoadingCurrencies: boolean;
-  currenciesError: Error | undefined;
-  refreshCurrencies: () => Promise<void>;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Context
-// ─────────────────────────────────────────────────────────────────────────
-
-const CurrenciesContext = createContext<CurrenciesContextValue | undefined>(undefined);
-
-// ─────────────────────────────────────────────────────────────────────────
-// Provider
-// ─────────────────────────────────────────────────────────────────────────
-
-export function CurrenciesProvider({ children }: { children: ReactNode }) {
-  // Get currencies list from /cfg/payments/currencies/
-  const {
-    data: currencies,
-    error: currenciesError,
-    isLoading: isLoadingCurrencies,
-    mutate: mutateCurrencies,
-  } = usePaymentsCurrenciesList(apiPayments);
-
-  const refreshCurrencies = async () => {
-    await mutateCurrencies();
-  };
-
-  const value: CurrenciesContextValue = {
-    currencies,
-    isLoadingCurrencies,
-    currenciesError,
-    refreshCurrencies,
-  };
-
-  return <CurrenciesContext.Provider value={value}>{children}</CurrenciesContext.Provider>;
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// Hook
-// ─────────────────────────────────────────────────────────────────────────
-
-export function useCurrenciesContext(): CurrenciesContextValue {
-  const context = useContext(CurrenciesContext);
-  if (!context) {
-    throw new Error('useCurrenciesContext must be used within CurrenciesProvider');
-  }
-  return context;
-}
-