@djangocfg/ext-payments 1.0.14 → 1.0.17

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,258 @@
+/**
+ * Add Funds Sheet (Apple-style)
+ *
+ * Responsive: Dialog on desktop, Drawer on mobile
+ */
+
+'use client';
+
+import { useState, useMemo, useCallback } from 'react';
+import { RefreshCw } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import {
+  Alert,
+  AlertDescription,
+  Button,
+  Combobox,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  TokenIcon,
+  ResponsiveSheet,
+  ResponsiveSheetContent,
+  ResponsiveSheetDescription,
+  ResponsiveSheetHeader,
+  ResponsiveSheetTitle,
+} from '@djangocfg/ui-core';
+
+import { useWallet } from '../contexts/WalletContext';
+import type { PaymentDetail } from '../api/generated/ext_payments/_utils/schemas';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Schema
+// ─────────────────────────────────────────────────────────────────────────────
+
+const AddFundsSchema = z.object({
+  amount: z.number().min(1, 'Minimum $1.00'),
+  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
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function AddFundsSheet({ open, onOpenChange, onSuccess }: AddFundsSheetProps) {
+  const { currencies, isLoadingCurrencies, addFunds } = useWallet();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const form = useForm<AddFundsForm>({
+    resolver: zodResolver(AddFundsSchema),
+    defaultValues: {
+      amount: 100,
+      currency: '',
+    },
+  });
+
+  // Currency options for combobox
+  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]);
+
+  // Set default currency when loaded
+  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]);
+
+  // Calculate crypto amount
+  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]);
+
+  // 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: any) {
+      const message = err?.response?.data?.message
+        || err?.response?.data?.detail
+        || err?.message
+        || 'Failed to create payment';
+      setError(message);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [addFunds, form, onOpenChange, onSuccess]);
+
+  // Reset on close
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (!open) {
+      setError(null);
+      form.reset();
+    }
+    onOpenChange(open);
+  }, [form, onOpenChange]);
+
+  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.00"
+                        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>
+                    <Combobox
+                      options={currencyOptions}
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      placeholder="Select currency..."
+                      searchPlaceholder="Search..."
+                      disabled={isLoadingCurrencies}
+                      className="h-14"
+                      renderOption={(option) => (
+                        <div className="flex items-center gap-3 flex-1">
+                          <TokenIcon symbol={option.value} size={24} />
+                          <span className="font-medium">{option.label}</span>
+                        </div>
+                      )}
+                      renderValue={(option) => option && (
+                        <div className="flex items-center gap-3">
+                          <TokenIcon symbol={option.value} size={24} />
+                          <span className="font-medium">{option.label}</span>
+                        </div>
+                      )}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Conversion Preview */}
+            {cryptoAmount !== null && selectedCurrency && (
+              <div className="bg-muted rounded-xl p-4 space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">You will send</span>
+                  <div className="flex items-center gap-2">
+                    <TokenIcon symbol={selectedCurrency.value} size={20} />
+                    <span className="font-mono font-semibold">
+                      {cryptoAmount.toFixed(8)} {selectedCurrency.value}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between text-sm text-muted-foreground">
+                  <span>Rate</span>
+                  <span>1 {selectedCurrency.value} = ${selectedCurrency.rate.toFixed(2)}</span>
+                </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}
+            >
+              {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>
+  );
+}