fix: validate batch buy liquid balance

Author: samjay8

src/components/common/BatchBuyModal.tsx

@@ -3,64 +3,85 @@ import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
 import { useFormatXlm } from '@/hooks/useFormatXlm';
 import showToast from '@/utils/toast.util';
-import { useBatchBuyMutation } from '@/hooks/useWallet';
+import { useBatchBuyMutation, type BatchOrder } from '@/hooks/useWallet';
 
 export interface BatchOrderRow {
-  creatorId: string;
-  priceStroops: number;
+  address: string;
+  creatorId?: string;
+  priceStroops?: number;
   quantity: number;
 }
 
 interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  liquidBalance?: number;
+  initialRows?: BatchOrderRow[];
 }
 
 const MAX_KEYS = 5;
-
-export default function BatchBuyModal({ open, onOpenChange }: Props) {
-  const [rows, setRows] = useState<BatchOrderRow[]>([]);
+const DEFAULT_LIQUID_BALANCE = 100;
+const STELLAR_ADDRESS_PATTERN = /^G[A-Z2-7]{55}$/;
+
+export default function BatchBuyModal({
+  open,
+  onOpenChange,
+  liquidBalance = DEFAULT_LIQUID_BALANCE,
+  initialRows = [],
+}: Props) {
+  const [rows, setRows] = useState<BatchOrderRow[]>(initialRows);
   const [addInput, setAddInput] = useState('');
   const { format } = useFormatXlm();
   const mutation = useBatchBuyMutation();
 
-  const totalStroops = useMemo(() => {
-    return rows.reduce((acc, r) => acc + (r.priceStroops * r.quantity), 0);
-  }, [rows]);
-
-  const totalXlm = format(totalStroops);
+  const totalQuantity = useMemo(
+    () => rows.reduce((total, row) => total + row.quantity, 0),
+    [rows]
+  );
+  const totalStroops = useMemo(
+    () => rows.reduce((total, row) => total + (row.priceStroops ?? 0) * row.quantity, 0),
+    [rows]
+  );
+  const invalidAddress = rows.some(row => !STELLAR_ADDRESS_PATTERN.test(row.address));
+  const balanceExceeded = totalQuantity > liquidBalance;
+  const validationError = invalidAddress
+    ? 'Enter valid Stellar addresses for every recipient.'
+    : balanceExceeded
+      ? `Total quantity cannot exceed your liquid balance of ${liquidBalance} keys.`
+      : undefined;
+  const canSubmit = rows.length > 0 && !validationError;
 
   const handleAdd = () => {
-    if (!addInput) return;
+    const address = addInput.trim();
+    if (!address) return;
     if (rows.length >= MAX_KEYS) {
       showToast.error(`Maximum ${MAX_KEYS} keys per batch`);
       return;
     }
 
-    // For demo: assume price 1 XLM = 10_000_000 stroops
-    const defaultPrice = 10_000_000;
-    const newRow: BatchOrderRow = {
-      creatorId: addInput,
-      priceStroops: defaultPrice,
-      quantity: 1,
-    };
-    setRows(r => [...r, newRow]);
+    setRows(rows => [
+      ...rows,
+      { address, creatorId: address, priceStroops: 10_000_000, quantity: 1 },
+    ]);
     setAddInput('');
   };
 
   const handleRemove = (idx: number) => {
-    setRows(r => r.filter((_, i) => i !== idx));
+    setRows(rows => rows.filter((_, i) => i !== idx));
   };
 
-  const handleQuantityChange = (idx: number, q: number) => {
-    setRows(r => r.map((row, i) => (i === idx ? { ...row, quantity: q } : row)));
+  const handleQuantityChange = (idx: number, quantity: number) => {
+    setRows(rows =>
+      rows.map((row, i) => (i === idx ? { ...row, quantity: Math.max(1, quantity) } : row))
+    );
   };
 
   const handleConfirm = async () => {
-    if (rows.length === 0) return;
+    if (!canSubmit) return;
     try {
       showToast.loading('Submitting batch buy...');
-      await mutation.mutateAsync({ orders: rows });
+      const orders: BatchOrder[] = rows.map(({ address, quantity }) => ({ address, quantity }));
+      await mutation.mutateAsync({ orders });
       showToast.transactionSuccess('Batch buy submitted');
       onOpenChange(false);
       setRows([]);
@@ -81,7 +102,8 @@ export default function BatchBuyModal({ open, onOpenChange }: Props) {
             <input
               value={addInput}
               onChange={e => setAddInput(e.target.value)}
-              placeholder="Search or enter creator id"
+              placeholder="Enter Stellar recipient address"
+              aria-label="Recipient address"
               className="flex-1 rounded-xl bg-white/[0.04] px-3 py-2 text-white"
             />
             <Button onClick={handleAdd}>Add</Button>
@@ -92,35 +114,43 @@ export default function BatchBuyModal({ open, onOpenChange }: Props) {
           ) : (
             <div className="space-y-2">
               {rows.map((row, idx) => (
-                <div key={row.creatorId} className="flex items-center gap-2">
-                  <div className="w-40 text-sm truncate">{row.creatorId}</div>
-                  <div className="w-28 text-sm">{format(row.priceStroops)}</div>
+                <div key={`${row.address}-${idx}`} className="flex items-center gap-2">
+                  <div className="w-40 truncate text-sm">{row.address}</div>
+                  <div className="w-28 text-sm">{format(row.priceStroops ?? 0)}</div>
                   <input
                     type="number"
                     min={1}
                     value={row.quantity}
-                    onChange={e => handleQuantityChange(idx, Math.max(1, Number(e.target.value || 1)))}
+                    aria-label={`Quantity for ${row.address}`}
+                    onChange={e => handleQuantityChange(idx, Number(e.target.value || 1))}
                     className="w-24 rounded-xl bg-white/[0.04] px-2 py-1 text-white"
                   />
                   <div className="flex-1 text-sm text-white/60">
-                    Subtotal: {format(row.priceStroops * row.quantity)} XLM
+                    Subtotal: {format((row.priceStroops ?? 0) * row.quantity)} XLM
                   </div>
                   <Button variant="ghost" onClick={() => handleRemove(idx)}>Remove</Button>
                 </div>
               ))}
             </div>
           )}
 
-          <div className="flex items-center justify-between pt-4 border-t border-white/5">
-            <div className="text-sm text-white/60">Total</div>
-            <div className="font-bold text-white">{totalXlm} XLM</div>
+          <div className="flex items-center justify-between border-t border-white/5 pt-4">
+            <div className="text-sm text-white/60">
+              Total: {totalQuantity} / {liquidBalance} keys
+            </div>
+            <div className="font-bold text-white">{format(totalStroops)} XLM</div>
           </div>
+          {validationError && (
+            <p role="alert" data-testid="batch-buy-validation-error" className="text-sm text-red-400">
+              {validationError}
+            </p>
+          )}
         </div>
 
         <DialogFooter>
           <div className="flex justify-end gap-2">
             <Button variant="ghost" onClick={() => onOpenChange(false)}>Cancel</Button>
-            <Button onClick={handleConfirm} disabled={rows.length === 0}>Confirm</Button>
+            <Button onClick={handleConfirm} disabled={!canSubmit}>Confirm</Button>
           </div>
         </DialogFooter>
       </DialogContent>

src/components/common/__tests__/BatchBuyModal.test.tsx

@@ -0,0 +1,111 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import BatchBuyModal from '@/components/common/BatchBuyModal';
+
+const mutateAsync = vi.fn();
+
+vi.mock('@/hooks/useWallet', () => ({
+  useBatchBuyMutation: () => ({ mutateAsync }),
+}));
+
+vi.mock('@/utils/toast.util', () => ({
+  default: {
+    loading: vi.fn(),
+    error: vi.fn(),
+    transactionSuccess: vi.fn(),
+  },
+}));
+
+const validAddress = (character: string) => `G${character.repeat(55)}`;
+
+const renderModal = (liquidBalance = 3) => {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <BatchBuyModal open onOpenChange={vi.fn()} liquidBalance={liquidBalance} />
+    </QueryClientProvider>
+  );
+};
+
+describe('BatchBuyModal (#832)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mutateAsync.mockResolvedValue({ success: true });
+  });
+
+  const addRecipient = (address: string) => {
+    fireEvent.change(screen.getByRole('textbox', { name: /recipient address/i }), {
+      target: { value: address },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Add' }));
+  };
+
+  it('allows a single recipient quantity equal to liquidBalance', () => {
+    renderModal(3);
+    addRecipient(validAddress('A'));
+
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '3' } });
+
+    expect(screen.queryByTestId('batch-buy-validation-error')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Confirm' })).toBeEnabled();
+  });
+
+  it('blocks submission when combined quantities exceed liquidBalance', () => {
+    renderModal(3);
+    addRecipient(validAddress('A'));
+    addRecipient(validAddress('B'));
+
+    fireEvent.change(screen.getAllByRole('spinbutton')[0], { target: { value: '2' } });
+    fireEvent.change(screen.getAllByRole('spinbutton')[1], { target: { value: '2' } });
+
+    expect(screen.getByTestId('batch-buy-validation-error')).toHaveTextContent(
+      'Total quantity cannot exceed your liquid balance of 3 keys.'
+    );
+    expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
+  });
+
+  it('re-evaluates the balance after removing a row', () => {
+    renderModal(3);
+    addRecipient(validAddress('A'));
+    addRecipient(validAddress('B'));
+    fireEvent.change(screen.getAllByRole('spinbutton')[0], { target: { value: '2' } });
+    fireEvent.change(screen.getAllByRole('spinbutton')[1], { target: { value: '2' } });
+
+    fireEvent.click(screen.getAllByRole('button', { name: 'Remove' })[1]);
+
+    expect(screen.queryByTestId('batch-buy-validation-error')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Confirm' })).toBeEnabled();
+  });
+
+  it('blocks submission when any recipient address is invalid', () => {
+    renderModal(3);
+    addRecipient('not-a-stellar-address');
+
+    expect(screen.getByTestId('batch-buy-validation-error')).toHaveTextContent(
+      'Enter valid Stellar addresses for every recipient.'
+    );
+    expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled();
+  });
+
+  it('submits the valid recipient address and quantity pairs', async () => {
+    renderModal(5);
+    const firstAddress = validAddress('A');
+    const secondAddress = validAddress('B');
+    addRecipient(firstAddress);
+    addRecipient(secondAddress);
+    fireEvent.change(screen.getAllByRole('spinbutton')[0], { target: { value: '2' } });
+    fireEvent.change(screen.getAllByRole('spinbutton')[1], { target: { value: '1' } });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }));
+
+    await waitFor(() =>
+      expect(mutateAsync).toHaveBeenCalledWith({
+        orders: [
+          { address: firstAddress, quantity: 2 },
+          { address: secondAddress, quantity: 1 },
+        ],
+      })
+    );
+  });
+});

src/hooks/useWallet.ts

@@ -196,9 +196,8 @@ export function useTradeMutation(address: string) {
 }
 
 export interface BatchOrder {
-	creatorId: string;
+	address: string;
 	quantity: number;
-	priceStroops: number;
 	ref?: string | null;
 }