@djangocfg/ext-payments 1.0.13 → 1.0.17

package/src/contexts/WalletContext.tsx

@@ -0,0 +1,355 @@
+/**
+ * Wallet Context (Apple-style unified)
+ *
+ * Single context for all wallet operations:
+ * - Balance
+ * - Activity (payments + transactions merged)
+ * - Currencies
+ * - Payment operations
+ */
+
+'use client';
+
+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,
+  usePaymentsTransactionsList,
+  usePaymentsCurrenciesList,
+  usePaymentsWithdrawalsList,
+  useCreatePaymentsPaymentsCreateCreate,
+  useCreatePaymentsWithdrawalsCreateCreate,
+  useCreatePaymentsWithdrawalsCancelCreate,
+} from '../api/generated/ext_payments/_utils/hooks';
+
+import type {
+  Balance,
+  PaymentList,
+  Transaction,
+  PaymentCreateRequest,
+  PaymentDetail,
+  WithdrawalCreateRequest,
+  WithdrawalDetail,
+  WithdrawalList,
+} from '../api/generated/ext_payments/_utils/schemas';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type ActivityType = 'payment' | 'deposit' | 'withdrawal';
+
+export interface ActivityItem {
+  id: string;
+  type: ActivityType;
+  amount: string;
+  amountDisplay: string;
+  currency?: string;
+  status: 'pending' | 'completed' | 'failed' | 'expired' | 'confirming';
+  statusDisplay: string;
+  description: string;
+  createdAt: string;
+  // Original data for details
+  payment?: PaymentList;
+  transaction?: Transaction;
+  withdrawal?: WithdrawalList;
+}
+
+export interface Currency {
+  code: string;
+  name: string;
+  network?: string;
+  rate: number;
+  enabled: boolean;
+}
+
+export interface WalletContextValue {
+  // Balance
+  balance: Balance | undefined;
+  balanceAmount: number;
+  isLoadingBalance: boolean;
+
+  // Activity (merged payments + transactions)
+  activity: ActivityItem[];
+  isLoadingActivity: boolean;
+  hasMoreActivity: boolean;
+
+  // Currencies
+  currencies: Currency[];
+  isLoadingCurrencies: boolean;
+
+  // Operations
+  addFunds: (data: PaymentCreateRequest) => Promise<PaymentDetail>;
+  withdraw: (data: WithdrawalCreateRequest) => Promise<WithdrawalDetail>;
+  cancelWithdrawal: (id: string) => Promise<void>;
+  getPaymentDetails: (id: string) => Promise<PaymentDetail | undefined>;
+  getWithdrawalDetails: (id: string) => Promise<WithdrawalDetail | undefined>;
+  refreshWallet: () => Promise<void>;
+
+  // Loading state
+  isLoading: boolean;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+const WalletContext = createContext<WalletContextValue | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function WalletProvider({ children }: { children: ReactNode }) {
+  // Fetch balance
+  const {
+    data: balance,
+    isLoading: isLoadingBalance,
+    mutate: mutateBalance,
+  } = usePaymentsBalanceRetrieve(apiPayments);
+
+  // Fetch recent payments
+  const {
+    data: paymentsData,
+    isLoading: isLoadingPayments,
+    mutate: mutatePayments,
+  } = usePaymentsPaymentsList({ page: 1, page_size: 20 }, apiPayments);
+
+  // Fetch recent transactions
+  const {
+    data: transactionsData,
+    isLoading: isLoadingTransactions,
+    mutate: mutateTransactions,
+  } = usePaymentsTransactionsList({ limit: 20 }, apiPayments);
+
+  // Fetch currencies
+  const {
+    data: currenciesData,
+    isLoading: isLoadingCurrencies,
+    mutate: mutateCurrencies,
+  } = usePaymentsCurrenciesList(apiPayments);
+
+  // Fetch recent withdrawals
+  const {
+    data: withdrawalsData,
+    isLoading: isLoadingWithdrawals,
+    mutate: mutateWithdrawals,
+  } = usePaymentsWithdrawalsList({ page: 1, page_size: 20 }, apiPayments);
+
+  // Mutation hooks
+  const createPaymentMutation = useCreatePaymentsPaymentsCreateCreate();
+  const createWithdrawalMutation = useCreatePaymentsWithdrawalsCreateCreate();
+  const cancelWithdrawalMutation = useCreatePaymentsWithdrawalsCancelCreate();
+
+  // Parse balance amount
+  const balanceAmount = useMemo(() => {
+    if (!balance?.balance_usd) return 0;
+    return parseFloat(balance.balance_usd) || 0;
+  }, [balance]);
+
+  // Merge and sort activity (payments + withdrawals + transactions)
+  const activity = useMemo<ActivityItem[]>(() => {
+    const items: ActivityItem[] = [];
+
+    // Add payments (deposits)
+    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,
+      });
+    }
+
+    // Add withdrawals
+    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,
+      });
+    }
+
+    // Add transactions (only if not linked to a payment/withdrawal already shown)
+    const transactions = transactionsData?.results || transactionsData || [];
+    if (Array.isArray(transactions)) {
+      for (const tx of transactions) {
+        // Skip if this transaction is linked to a payment we already have
+        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,
+        });
+      }
+    }
+
+    // Sort by date, newest first
+    items.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+
+    return items;
+  }, [paymentsData, withdrawalsData, transactionsData]);
+
+  // Parse currencies
+  const currencies = useMemo<Currency[]>(() => {
+    const data = currenciesData?.currencies || currenciesData?.results || currenciesData || [];
+    if (!Array.isArray(data)) return [];
+
+    return data
+      .filter((c: any) => c.is_enabled !== false)
+      .map((c: any) => ({
+        code: c.code || c.currency_code || c.symbol,
+        name: c.name || c.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);
+    // Refresh all data
+    await Promise.all([mutateBalance(), mutatePayments(), mutateTransactions()]);
+    return result;
+  }, [createPaymentMutation, mutateBalance, mutatePayments, mutateTransactions]);
+
+  const withdraw = useCallback(async (data: WithdrawalCreateRequest): Promise<WithdrawalDetail> => {
+    const result = await createWithdrawalMutation(data, apiPayments);
+    // Refresh all data
+    await Promise.all([mutateBalance(), mutateWithdrawals(), mutateTransactions()]);
+    return result;
+  }, [createWithdrawalMutation, mutateBalance, mutateWithdrawals, mutateTransactions]);
+
+  const cancelWithdrawal = useCallback(async (id: string): Promise<void> => {
+    await cancelWithdrawalMutation(id, apiPayments);
+    // Refresh all data
+    await Promise.all([mutateBalance(), mutateWithdrawals(), mutateTransactions()]);
+  }, [cancelWithdrawalMutation, mutateBalance, mutateWithdrawals, mutateTransactions]);
+
+  const getPaymentDetails = useCallback(async (id: string): Promise<PaymentDetail | undefined> => {
+    return Fetchers.getPaymentsPaymentsRetrieve(id, apiPayments);
+  }, []);
+
+  const getWithdrawalDetails = useCallback(async (id: string): Promise<WithdrawalDetail | undefined> => {
+    return Fetchers.getPaymentsWithdrawalsRetrieve(id, apiPayments);
+  }, []);
+
+  const refreshWallet = useCallback(async () => {
+    await Promise.all([
+      mutateBalance(),
+      mutatePayments(),
+      mutateWithdrawals(),
+      mutateTransactions(),
+      mutateCurrencies(),
+    ]);
+  }, [mutateBalance, mutatePayments, mutateWithdrawals, mutateTransactions, mutateCurrencies]);
+
+  // Combined loading state
+  const isLoading = isLoadingBalance || isLoadingPayments || isLoadingWithdrawals || isLoadingTransactions;
+  const isLoadingActivity = isLoadingPayments || isLoadingWithdrawals || isLoadingTransactions;
+
+  const value: WalletContextValue = {
+    balance,
+    balanceAmount,
+    isLoadingBalance,
+    activity,
+    isLoadingActivity,
+    hasMoreActivity: (paymentsData?.count || 0) > 20 || (withdrawalsData?.count || 0) > 20,
+    currencies,
+    isLoadingCurrencies,
+    addFunds,
+    withdraw,
+    cancelWithdrawal,
+    getPaymentDetails,
+    getWithdrawalDetails,
+    refreshWallet,
+    isLoading,
+  };
+
+  return <WalletContext.Provider value={value}>{children}</WalletContext.Provider>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function useWallet(): WalletContextValue {
+  const context = useContext(WalletContext);
+  if (!context) {
+    throw new Error('useWallet must be used within WalletProvider');
+  }
+  return context;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function mapPaymentStatus(status: string): ActivityItem['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: string): ActivityItem['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';
+  }
+}

package/src/contexts/index.ts

@@ -1,45 +1,12 @@
-// Payments
-export {
-  PaymentsProvider,
-  usePaymentsContext
-} from './PaymentsContext';
-export type {
-  PaymentsContextValue,
-} from './PaymentsContext';
-
-// Balances
-export {
-  BalancesProvider,
-  useBalancesContext
-} from './BalancesContext';
-export type {
-  BalancesContextValue,
-} from './BalancesContext';
-
-// Currencies
-export {
-  CurrenciesProvider,
-  useCurrenciesContext
-} from './CurrenciesContext';
-export type {
-  CurrenciesContextValue,
-} from './CurrenciesContext';
-
-// Overview
-export {
-  OverviewProvider,
-  useOverviewContext
-} from './OverviewContext';
-export type {
-  OverviewContextValue,
-} from './OverviewContext';
-
-// Root Payments (Global)
-export {
-  RootPaymentsProvider,
-  useRootPaymentsContext
-} from './RootPaymentsContext';
-export type {
-  RootPaymentsContextValue,
-} from './RootPaymentsContext';
-
+/**
+ * Wallet Context Exports
+ */
+
+export {
+  WalletProvider,
+  useWallet,
+  type WalletContextValue,
+  type ActivityItem,
+  type ActivityType,
+  type Currency,
+} from './WalletContext';

package/src/index.ts

@@ -1,10 +1,7 @@
 /**
- * @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.
  */
 
 // API client (server-safe)
@@ -12,27 +9,18 @@ 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/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;
-}
-