@djangocfg/ext-payments 1.0.17 → 1.0.19

package/src/config.ts

@@ -4,6 +4,7 @@
 
 import { createExtensionConfig } from '@djangocfg/ext-base';
 
+// @ts-ignore - package.json is not typed
 import packageJson from '../package.json';
 
 export const extensionConfig = createExtensionConfig(packageJson, {

package/src/contexts/WalletContext.tsx

@@ -13,7 +13,6 @@
 import React, { createContext, ReactNode, useContext, useMemo, useCallback } from 'react';
 
 import { apiPayments } from '../api';
-import * as Fetchers from '../api/generated/ext_payments/_utils/fetchers';
 import {
   usePaymentsBalanceRetrieve,
   usePaymentsPaymentsList,
@@ -61,8 +60,8 @@ export interface ActivityItem {
 export interface Currency {
   code: string;
   name: string;
+  token: string;
   network?: string;
-  rate: number;
   enabled: boolean;
 }
 
@@ -228,25 +227,27 @@ export function WalletProvider({ children }: { children: ReactNode }) {
       .map((c: any) => ({
         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 || undefined,
-        rate: parseFloat(c.usd_rate || c.rate) || 1,
         enabled: c.is_enabled !== false,
       }));
   }, [currenciesData]);
 
   // Operations
   const addFunds = useCallback(async (data: PaymentCreateRequest): Promise<PaymentDetail> => {
-    const result = await createPaymentMutation(data, apiPayments);
+    const response = await createPaymentMutation(data, apiPayments);
     // Refresh all data
     await Promise.all([mutateBalance(), mutatePayments(), mutateTransactions()]);
-    return result;
+    // API returns { success, payment, qr_code_url } - extract payment
+    return response.payment;
   }, [createPaymentMutation, mutateBalance, mutatePayments, mutateTransactions]);
 
   const withdraw = useCallback(async (data: WithdrawalCreateRequest): Promise<WithdrawalDetail> => {
-    const result = await createWithdrawalMutation(data, apiPayments);
+    const response = await createWithdrawalMutation(data, apiPayments);
     // Refresh all data
     await Promise.all([mutateBalance(), mutateWithdrawals(), mutateTransactions()]);
-    return result;
+    // API returns { success, withdrawal, message } - extract withdrawal
+    return response.withdrawal;
   }, [createWithdrawalMutation, mutateBalance, mutateWithdrawals, mutateTransactions]);
 
   const cancelWithdrawal = useCallback(async (id: string): Promise<void> => {
@@ -256,11 +257,11 @@ export function WalletProvider({ children }: { children: ReactNode }) {
   }, [cancelWithdrawalMutation, mutateBalance, mutateWithdrawals, mutateTransactions]);
 
   const getPaymentDetails = useCallback(async (id: string): Promise<PaymentDetail | undefined> => {
-    return Fetchers.getPaymentsPaymentsRetrieve(id, apiPayments);
+    return apiPayments.ext_payments_payments.paymentsRetrieve(id);
   }, []);
 
   const getWithdrawalDetails = useCallback(async (id: string): Promise<WithdrawalDetail | undefined> => {
-    return Fetchers.getPaymentsWithdrawalsRetrieve(id, apiPayments);
+    return apiPayments.ext_payments_payments.withdrawalsRetrieve(id);
   }, []);
 
   const refreshWallet = useCallback(async () => {

package/src/contexts/index.ts

@@ -1,7 +1,11 @@
 /**
- * Wallet Context Exports
+ * Payments Context Exports
  */
 
+// Types (single source of truth)
+export * from './types';
+
+// Context
 export {
   WalletProvider,
   useWallet,

package/src/contexts/types.ts

@@ -0,0 +1,46 @@
+/**
+ * Payments Context Types
+ *
+ * Re-exports all types and enums from generated API for payments.
+ * This is the single source of truth for payment types.
+ */
+
+// Import and re-export enums
+import * as PaymentsEnums from '../api/generated/ext_payments/enums';
+
+// =============================================================================
+// Payment Enums
+// =============================================================================
+export const PaymentStatus = PaymentsEnums.PaymentDetailStatus;
+export const PaymentListStatus = PaymentsEnums.PaymentListStatus;
+export const TransactionType = PaymentsEnums.TransactionTransactionType;
+export const WithdrawalStatus = PaymentsEnums.WithdrawalDetailStatus;
+export const WithdrawalListStatus = PaymentsEnums.WithdrawalListStatus;
+
+// Type exports for TypeScript
+export type PaymentStatus = PaymentsEnums.PaymentDetailStatus;
+export type PaymentListStatus = PaymentsEnums.PaymentListStatus;
+export type TransactionType = PaymentsEnums.TransactionTransactionType;
+export type WithdrawalStatus = PaymentsEnums.WithdrawalDetailStatus;
+export type WithdrawalListStatus = PaymentsEnums.WithdrawalListStatus;
+
+// =============================================================================
+// Payment Schemas
+// =============================================================================
+export type { Balance } from '../api/generated/ext_payments/_utils/schemas/Balance.schema';
+export type { Currency } from '../api/generated/ext_payments/_utils/schemas/Currency.schema';
+export type { PaymentDetail } from '../api/generated/ext_payments/_utils/schemas/PaymentDetail.schema';
+export type { PaymentList } from '../api/generated/ext_payments/_utils/schemas/PaymentList.schema';
+export type { PaymentCreateRequest } from '../api/generated/ext_payments/_utils/schemas/PaymentCreateRequest.schema';
+export type { PaymentCreateResponse } from '../api/generated/ext_payments/_utils/schemas/PaymentCreateResponse.schema';
+export type { PaginatedPaymentListList } from '../api/generated/ext_payments/_utils/schemas/PaginatedPaymentListList.schema';
+export type { Transaction } from '../api/generated/ext_payments/_utils/schemas/Transaction.schema';
+
+// =============================================================================
+// Withdrawal Schemas
+// =============================================================================
+export type { WithdrawalDetail } from '../api/generated/ext_payments/_utils/schemas/WithdrawalDetail.schema';
+export type { WithdrawalList } from '../api/generated/ext_payments/_utils/schemas/WithdrawalList.schema';
+export type { WithdrawalCreateRequest } from '../api/generated/ext_payments/_utils/schemas/WithdrawalCreateRequest.schema';
+export type { WithdrawalCreateResponse } from '../api/generated/ext_payments/_utils/schemas/WithdrawalCreateResponse.schema';
+export type { PaginatedWithdrawalListList } from '../api/generated/ext_payments/_utils/schemas/PaginatedWithdrawalListList.schema';

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useEstimate';
+export * from './useWithdrawalEstimate';
+export * from './useCurrencyOptions';

package/src/hooks/useCurrencyOptions.ts

@@ -0,0 +1,79 @@
+'use client';
+
+/**
+ * Hooks for currency selection
+ */
+
+import { useMemo, useEffect, useCallback, useRef } from 'react';
+import type { Currency } from '../contexts/WalletContext';
+import type { CurrencyOption } from '../types';
+
+/**
+ * Map currencies to combobox options
+ */
+export function useCurrencyOptions(currencies: Currency[]): CurrencyOption[] {
+  return useMemo(() => {
+    return currencies.map((c) => ({
+      value: c.code,
+      label: c.name,
+      token: c.token,
+      network: c.network,
+    }));
+  }, [currencies]);
+}
+
+interface UseDefaultCurrencyOptions {
+  currencyOptions: CurrencyOption[];
+  savedCurrency: string;
+  currentValue: string;
+  setValue: (value: string) => void;
+}
+
+/**
+ * Set default currency when options load (saved or USDT fallback)
+ */
+export function useDefaultCurrency({
+  currencyOptions,
+  savedCurrency,
+  currentValue,
+  setValue,
+}: UseDefaultCurrencyOptions): void {
+  useEffect(() => {
+    if (currencyOptions.length > 0 && !currentValue) {
+      // Prefer saved currency if it exists in options
+      const savedOption = savedCurrency && currencyOptions.find(c => c.value === savedCurrency);
+      if (savedOption) {
+        setValue(savedOption.value);
+      } else {
+        // Fallback to USDT or first available
+        const usdt = currencyOptions.find(c => c.value.includes('USDT'));
+        setValue(usdt?.value || currencyOptions[0].value);
+      }
+    }
+  }, [currencyOptions, savedCurrency, currentValue, setValue]);
+}
+
+/**
+ * Auto-save value to localStorage when it changes
+ */
+export function useAutoSave<T>(
+  value: T,
+  save: (value: T) => void,
+  validate?: (value: T) => boolean
+): void {
+  // Use refs to avoid infinite loops from unstable function references
+  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]);
+}

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

@@ -4,6 +4,9 @@
  * 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';

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';