@djangocfg/ext-payments 1.0.14 → 1.0.19

package/src/components/ActivityItem.tsx

@@ -0,0 +1,118 @@
+/**
+ * Activity Item (Apple-style)
+ *
+ * Single row in the activity list
+ */
+
+'use client';
+
+import { ArrowDownLeft, ArrowUpRight, Clock, CheckCircle2, XCircle, AlertCircle, Loader2 } from 'lucide-react';
+import moment from 'moment';
+
+import { TokenIcon } from '@djangocfg/ui-core';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { ActivityItem as ActivityItemType } from '../contexts/WalletContext';
+
+interface ActivityItemProps {
+  item: ActivityItemType;
+  onClick?: () => void;
+}
+
+const statusConfig: Record<string, { icon: any; color: string; bg: string; animate?: boolean }> = {
+  pending: {
+    icon: Clock,
+    color: 'text-yellow-500',
+    bg: 'bg-yellow-500/10',
+  },
+  confirming: {
+    icon: Loader2,
+    color: 'text-blue-500',
+    bg: 'bg-blue-500/10',
+    animate: true,
+  },
+  completed: {
+    icon: CheckCircle2,
+    color: 'text-green-500',
+    bg: 'bg-green-500/10',
+  },
+  failed: {
+    icon: XCircle,
+    color: 'text-red-500',
+    bg: 'bg-red-500/10',
+  },
+  expired: {
+    icon: AlertCircle,
+    color: 'text-muted-foreground',
+    bg: 'bg-muted',
+  },
+};
+
+export function ActivityItem({ item, onClick }: ActivityItemProps) {
+  const config = statusConfig[item.status];
+  const StatusIcon = config.icon;
+
+  const isPositive = item.type === 'payment' || item.type === 'deposit';
+  const DirectionIcon = isPositive ? ArrowDownLeft : ArrowUpRight;
+
+  const relativeTime = moment(item.createdAt).fromNow();
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'w-full flex items-center gap-4 p-4 rounded-xl',
+        'cursor-pointer',
+        'hover:bg-accent active:bg-accent/80 transition-colors',
+        'text-left'
+      )}
+    >
+      {/* Icon */}
+      <div className={cn(
+        'flex items-center justify-center w-10 h-10 rounded-full',
+        isPositive ? 'bg-green-500/10' : 'bg-red-500/10'
+      )}>
+        {item.currency ? (
+          <TokenIcon symbol={item.currency} size={24} />
+        ) : (
+          <DirectionIcon className={cn(
+            'h-5 w-5',
+            isPositive ? 'text-green-500' : 'text-red-500'
+          )} />
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-medium truncate">{item.description}</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <span>{relativeTime}</span>
+          {item.status !== 'completed' && (
+            <>
+              <span>·</span>
+              <span className={cn('flex items-center gap-1', config.color)}>
+                <StatusIcon className={cn('h-3 w-3', config.animate && 'animate-spin')} />
+                {item.statusDisplay}
+              </span>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Amount */}
+      <div className="text-right">
+        <span className={cn(
+          'font-semibold tabular-nums',
+          isPositive ? 'text-green-600 dark:text-green-400' : 'text-foreground'
+        )}>
+          {item.amountDisplay}
+        </span>
+        {item.status === 'completed' && (
+          <CheckCircle2 className="h-4 w-4 text-green-500 ml-2 inline-block" />
+        )}
+      </div>
+    </button>
+  );
+}

package/src/components/ActivityList.tsx

@@ -0,0 +1,93 @@
+/**
+ * Activity List (Apple-style)
+ *
+ * List of recent activity (payments + transactions)
+ */
+
+'use client';
+
+import { History, ChevronRight } from 'lucide-react';
+
+import { Button, Skeleton } from '@djangocfg/ui-core';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useWallet, type ActivityItem as ActivityItemType } from '../contexts/WalletContext';
+import { ActivityItem } from './ActivityItem';
+
+interface ActivityListProps {
+  onItemClick?: (item: ActivityItemType) => void;
+  onViewAll?: () => void;
+  limit?: number;
+  className?: string;
+}
+
+export function ActivityList({
+  onItemClick,
+  onViewAll,
+  limit = 10,
+  className,
+}: ActivityListProps) {
+  const { activity, isLoadingActivity, hasMoreActivity } = useWallet();
+
+  const displayedActivity = limit ? activity.slice(0, limit) : activity;
+
+  if (isLoadingActivity) {
+    return (
+      <div className={cn('space-y-2', className)}>
+        <div className="flex items-center justify-between px-4 py-2">
+          <Skeleton className="h-5 w-32" />
+        </div>
+        {[1, 2, 3, 4, 5].map((i) => (
+          <div key={i} className="flex items-center gap-4 p-4">
+            <Skeleton className="h-10 w-10 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-3 w-24" />
+            </div>
+            <Skeleton className="h-5 w-16" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (activity.length === 0) {
+    return (
+      <div className={cn('text-center py-12', className)}>
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-muted mb-4">
+          <History className="h-8 w-8 text-muted-foreground" />
+        </div>
+        <h3 className="font-semibold mb-1">No Activity Yet</h3>
+        <p className="text-sm text-muted-foreground">
+          Your transactions will appear here
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('pt-6', className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2">
+        <h2 className="font-semibold text-lg">Recent Activity</h2>
+        {hasMoreActivity && onViewAll && (
+          <Button variant="ghost" size="sm" onClick={onViewAll} className="text-primary">
+            View All
+            <ChevronRight className="h-4 w-4 ml-1" />
+          </Button>
+        )}
+      </div>
+
+      {/* List */}
+      <div className="divide-y divide-border/50">
+        {displayedActivity.map((item) => (
+          <ActivityItem
+            key={item.id}
+            item={item}
+            onClick={() => onItemClick?.(item)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/AddFundsSheet.tsx

@@ -0,0 +1,342 @@
+/**
+ * Add Funds Sheet (Apple-style)
+ *
+ * Responsive: Dialog on desktop, Drawer on mobile
+ * Fetches real-time exchange rates on-demand
+ */
+
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { RefreshCw, Loader2 } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  TokenIcon,
+  ResponsiveSheet,
+  ResponsiveSheetContent,
+  ResponsiveSheetDescription,
+  ResponsiveSheetHeader,
+  ResponsiveSheetTitle,
+  useLocalStorage,
+} from '@djangocfg/ui-core';
+
+import { useWallet } from '../contexts/WalletContext';
+import { useEstimate, useCurrencyOptions, useDefaultCurrency, useAutoSave } from '../hooks';
+import { formatUsdRate, formatCryptoAmount, formatUsdAmount, extractErrorMessage } from '../utils';
+import { CurrencyCombobox } from './CurrencyCombobox';
+import type { PaymentDetail } from '../contexts/types';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Schema
+// ─────────────────────────────────────────────────────────────────────────────
+
+const AddFundsSchema = z.object({
+  amount: z.number().min(1, 'Minimum $1'),
+  currency: z.string().min(1, 'Select a currency'),
+});
+
+type AddFundsForm = z.infer<typeof AddFundsSchema>;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Props
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface AddFundsSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: (payment: PaymentDetail) => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Storage
+const STORAGE_KEY = 'payments:addFunds';
+
+interface AddFundsSaved {
+  currency: string;
+  amount: number;
+}
+
+export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetProps) {
+  const { currencies, isLoadingCurrencies, addFunds } = useWallet();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Remember last used currency and amount
+  const [saved, setSaved] = useLocalStorage<AddFundsSaved>(STORAGE_KEY, {
+    currency: '',
+    amount: 100,
+  });
+
+  const form = useForm<AddFundsForm>({
+    resolver: zodResolver(AddFundsSchema),
+    defaultValues: {
+      amount: saved.amount,
+      currency: saved.currency,
+    },
+  });
+
+  const watchedAmount = form.watch('amount');
+  const watchedCurrency = form.watch('currency');
+
+  // Auto-save to localStorage
+  useAutoSave(watchedAmount, (v: number) => setSaved(prev => ({ ...prev, amount: v })), (v) => v > 0);
+  useAutoSave(watchedCurrency, (v: string) => setSaved(prev => ({ ...prev, currency: v })));
+
+  // Currency options
+  const currencyOptions = useCurrencyOptions(currencies);
+
+  // Set default currency
+  useDefaultCurrency({
+    currencyOptions,
+    savedCurrency: saved.currency,
+    currentValue: watchedCurrency,
+    setValue: (v) => form.setValue('currency', v),
+  });
+
+  // Fetch estimate with debounce
+  const { estimate, isLoading: isLoadingEstimate } = useEstimate({
+    currencyCode: watchedCurrency,
+    amountUsd: watchedAmount,
+    minAmount: 1,
+  });
+
+  // Get selected currency for display
+  const selectedCurrency = currencyOptions.find(c => c.value === watchedCurrency);
+
+  // Prepare display data with fee breakdown
+  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) : undefined;
+
+    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]);
+
+  // Handle submit
+  const handleSubmit = useCallback(async (data: AddFundsForm) => {
+    try {
+      setIsSubmitting(true);
+      setError(null);
+
+      const result = await addFunds({
+        amount_usd: String(data.amount),
+        currency_code: data.currency,
+      });
+
+      form.reset();
+      onOpenChange(false);
+      onSuccess?.(result);
+    } catch (err) {
+      setError(extractErrorMessage(err, 'Failed to create payment'));
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [addFunds, form, onOpenChange, onSuccess]);
+
+  // Reset on open/close
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (open) {
+      // Reset form with saved values on open
+      form.reset({
+        amount: saved.amount,
+        currency: saved.currency,
+      });
+    } else {
+      setError(null);
+    }
+    onOpenChange(open);
+  }, [form, onOpenChange, saved]);
+
+  return (
+    <ResponsiveSheet open={open} onOpenChange={handleOpenChange}>
+      <ResponsiveSheetContent className="sm:max-w-md">
+        <ResponsiveSheetHeader>
+          <ResponsiveSheetTitle>Add Funds</ResponsiveSheetTitle>
+          <ResponsiveSheetDescription>
+            Add funds to your wallet using cryptocurrency
+          </ResponsiveSheetDescription>
+        </ResponsiveSheetHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6 p-4 sm:p-0 sm:mt-4">
+            {/* Amount Input */}
+            <FormField
+              control={form.control}
+              name="amount"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Amount (USD)</FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <span className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground text-lg">
+                        $
+                      </span>
+                      <Input
+                        type="number"
+                        step="0.01"
+                        min="1"
+                        placeholder="100"
+                        className="pl-8 text-2xl h-14 font-semibold"
+                        {...field}
+                        onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
+                      />
+                    </div>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Currency Selection */}
+            <FormField
+              control={form.control}
+              name="currency"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Pay with</FormLabel>
+                  <FormControl>
+                    <CurrencyCombobox
+                      options={currencyOptions}
+                      value={field.value}
+                      onChange={field.onChange}
+                      disabled={isLoadingCurrencies}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Payment Breakdown */}
+            {selectedCurrency && watchedAmount >= 1 && (
+              <div className="bg-muted rounded-xl p-4 space-y-2">
+                {isLoadingEstimate ? (
+                  <div className="flex items-center justify-center py-2">
+                    <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                    <span className="ml-2 text-sm text-muted-foreground">Getting rate...</span>
+                  </div>
+                ) : displayData ? (
+                  <>
+                    {/* Amount breakdown */}
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">Amount</span>
+                      <span>${formatUsdAmount(displayData.amountToReceive)}</span>
+                    </div>
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">Service fee ({displayData.serviceFeePercent}%)</span>
+                      <span>+${formatUsdAmount(displayData.serviceFeeUsd)}</span>
+                    </div>
+
+                    {/* Rate (for non-stablecoins) */}
+                    {displayData.showRate && (
+                      <div className="flex items-center justify-between text-sm text-muted-foreground">
+                        <span>Rate</span>
+                        <span>1 {displayData.token} = ${displayData.rate}</span>
+                      </div>
+                    )}
+
+                    {/* You will send */}
+                    <div className="border-t pt-2 mt-2">
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium">You will send</span>
+                        <div className="text-right">
+                          <div className="flex items-center gap-2 justify-end">
+                            <TokenIcon symbol={displayData.token} size={20} />
+                            <span className="font-mono font-semibold text-lg">
+                              {displayData.cryptoAmount} {displayData.token}
+                            </span>
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            ~${formatUsdAmount(displayData.totalToPayUsd)}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* You will receive */}
+                    <div className="flex items-center justify-between text-sm pt-2">
+                      <span className="text-muted-foreground">You will receive</span>
+                      <span className="font-medium">${formatUsdAmount(displayData.amountToReceive)}</span>
+                    </div>
+
+                    {/* Minimum warning */}
+                    {displayData.belowMinimum && displayData.minAmount && (
+                      <div className="text-sm text-destructive mt-2 pt-2 border-t border-destructive/20">
+                        Minimum amount: ${displayData.minAmount}
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <div className="text-center text-sm text-muted-foreground py-2">
+                    Enter amount to see conversion
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Error */}
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            {/* Submit Button */}
+            <Button
+              type="submit"
+              size="lg"
+              className="w-full h-14 text-lg rounded-xl"
+              disabled={
+                isSubmitting ||
+                currencyOptions.length === 0 ||
+                isLoadingEstimate ||
+                displayData?.belowMinimum
+              }
+            >
+              {isSubmitting ? (
+                <>
+                  <RefreshCw className="h-5 w-5 mr-2 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                'Continue'
+              )}
+            </Button>
+          </form>
+        </Form>
+      </ResponsiveSheetContent>
+    </ResponsiveSheet>
+  );
+}

package/src/components/BalanceHero.tsx

@@ -0,0 +1,102 @@
+/**
+ * Balance Hero (Apple-style)
+ *
+ * Large centered balance display with action buttons
+ */
+
+'use client';
+
+import { Plus, ArrowUpRight, RefreshCw } from 'lucide-react';
+
+import { Button, Skeleton } from '@djangocfg/ui-core';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useWallet } from '../contexts/WalletContext';
+
+interface BalanceHeroProps {
+  onAddFunds?: () => void;
+  onWithdraw?: () => void;
+  className?: string;
+}
+
+export function BalanceHero({ onAddFunds, onWithdraw, className }: BalanceHeroProps) {
+  const { balance, balanceAmount, isLoadingBalance, refreshWallet } = useWallet();
+
+  const formattedBalance = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(balanceAmount);
+
+  return (
+    <div className={cn('flex flex-col items-center py-16 px-4', className)}>
+      {/* Balance Display */}
+      <div className="text-center mb-6">
+        {isLoadingBalance ? (
+          <>
+            <Skeleton className="h-12 w-48 mx-auto mb-2" />
+            <Skeleton className="h-4 w-24 mx-auto" />
+          </>
+        ) : (
+          <>
+            <h1 className="text-5xl font-bold tracking-tight tabular-nums">
+              {formattedBalance}
+            </h1>
+            <p className="text-muted-foreground mt-1">Available Balance</p>
+          </>
+        )}
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex items-center gap-3">
+        <Button
+          size="lg"
+          onClick={onAddFunds}
+          className="rounded-full px-6"
+        >
+          <Plus className="h-5 w-5 mr-2" />
+          Add Funds
+        </Button>
+
+        <Button
+          size="lg"
+          variant="outline"
+          onClick={onWithdraw}
+          className="rounded-full px-6"
+        >
+          <ArrowUpRight className="h-5 w-5 mr-2" />
+          Withdraw
+        </Button>
+
+        <Button
+          size="icon"
+          variant="ghost"
+          onClick={() => refreshWallet()}
+          className="rounded-full"
+        >
+          <RefreshCw className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Stats (subtle) */}
+      {balance && !isLoadingBalance && (
+        <div className="flex items-center gap-6 mt-6 text-sm text-muted-foreground">
+          <div className="text-center">
+            <span className="block font-medium text-foreground">
+              ${parseFloat(balance.total_deposited || '0').toFixed(2)}
+            </span>
+            <span>Total Deposited</span>
+          </div>
+          <div className="h-8 w-px bg-border" />
+          <div className="text-center">
+            <span className="block font-medium text-foreground">
+              ${parseFloat(balance.total_withdrawn || '0').toFixed(2)}
+            </span>
+            <span>Total Withdrawn</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}