Fix treasury balance visibility

frontend/components/CreateProposalForm.tsx

@@ -14,9 +14,11 @@ import toast from 'react-hot-toast';
 import { motion, AnimatePresence } from 'framer-motion';
 import CategoryTags from './common/CategoryTags';
 import { predictProposalSuccess } from '@/utils/successPredictor';
-import { Target, AlertCircle, Sparkles, Brain, CheckCircle2 } from 'lucide-react';
+import { Target, AlertCircle, Sparkles, Brain, CheckCircle2, Wallet } from 'lucide-react';
 import { useTransaction } from '@/hooks/useTransaction';
 import { ContractVersionGuard } from './common/ContractVersionGuard';
+import { useTreasuryBalance } from '@/hooks/useTreasuryBalance';
+import { validateAmountAgainstTreasury } from '@/lib/validation';
 
 const NETWORK = STACKS_MAINNET;
 
@@ -32,6 +34,7 @@ export default function CreateProposalForm({ userAddress }: CreateProposalFormPr
     const [amountError, setAmountError] = useState('');
     const [error, setError] = useState('');
     const [success, setSuccess] = useState('');
+    const { balanceInStx, loading: treasuryLoading, error: treasuryError } = useTreasuryBalance();
 
     const { isLoading, execute } = useTransaction({
         type: 'create-proposal',
@@ -151,6 +154,37 @@ export default function CreateProposalForm({ userAddress }: CreateProposalFormPr
                     </div>
                 </div>
 
+                {/* Treasury Balance Display */}
+                <div className={`border rounded-2xl p-4 mb-6 flex items-center gap-4 ${
+                    treasuryError ? 'bg-red-600/10 border-red-500/20' : 
+                    treasuryLoading ? 'bg-slate-800/50 border-slate-700/30' :
+                    'bg-purple-600/10 border-purple-500/20'
+                }`}>
+                    <div className={`w-10 h-10 rounded-xl flex items-center justify-center border ${
+                        treasuryError ? 'bg-red-600/20 border-red-500/30' :
+                        treasuryLoading ? 'bg-slate-700/30 border-slate-600/30' :
+                        'bg-purple-600/20 border-purple-500/30'
+                    }`}>
+                        <Wallet className={`w-5 h-5 ${
+                            treasuryError ? 'text-red-500' :
+                            treasuryLoading ? 'text-slate-500' :
+                            'text-purple-500'
+                        }`} />
+                    </div>
+                    <div className="flex-1">
+                        <p className="text-white text-xs font-black uppercase tracking-widest">Treasury Available</p>
+                        {treasuryLoading ? (
+                            <p className="text-[10px] font-medium text-slate-500 uppercase tracking-tight">Loading balance...</p>
+                        ) : treasuryError ? (
+                            <p className="text-[10px] font-medium text-red-400 uppercase tracking-tight">Failed to load treasury balance</p>
+                        ) : (
+                            <p className="text-[10px] font-medium text-slate-400 uppercase tracking-tight">
+                                {balanceInStx !== null ? `${balanceInStx.toFixed(2)} STX` : '0.00 STX'} available for funding
+                            </p>
+                        )}
+                    </div>
+                </div>
+
                 <ContractVersionGuard>
 
                 <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
@@ -207,14 +241,8 @@ export default function CreateProposalForm({ userAddress }: CreateProposalFormPr
                                 onChange={(e) => {
                                     const val = e.target.value;
                                     setAmount(val);
-                                    const numVal = parseFloat(val);
-                                    if (val && numVal < 1) {
-                                        setAmountError('Amount must be at least 1 STX');
-                                    } else if (val && numVal > 200) {
-                                        setAmountError('Amount cannot exceed 200 STX');
-                                    } else {
-                                        setAmountError('');
-                                    }
+                                    const error = validateAmountAgainstTreasury(val, balanceInStx);
+                                    setAmountError(error || '');
                                 }}
                                 step="0.000001"
                                 min="1"
@@ -280,6 +308,31 @@ export default function CreateProposalForm({ userAddress }: CreateProposalFormPr
                         )}
                     </AnimatePresence>
 
+                    {/* Treasury Warning */}
+                    <AnimatePresence>
+                        {amount && balanceInStx !== null && parseFloat(amount) > balanceInStx && (
+                            <motion.div
+                                initial={{ opacity: 0, height: 0 }}
+                                animate={{ opacity: 1, height: 'auto' }}
+                                exit={{ opacity: 0, height: 0 }}
+                                className="bg-yellow-500/10 border border-yellow-500/20 rounded-2xl p-4 overflow-hidden"
+                            >
+                                <div className="flex items-start space-x-3">
+                                    <AlertCircle className="w-5 h-5 text-yellow-500 mt-0.5 flex-shrink-0" />
+                                    <div>
+                                        <p className="text-yellow-200 text-xs font-bold leading-relaxed uppercase tracking-tight mb-1">
+                                            Insufficient Treasury Funds
+                                        </p>
+                                        <p className="text-yellow-300/80 text-[10px] font-medium leading-relaxed uppercase tracking-tight">
+                                            Your request of {parseFloat(amount).toFixed(2)} STX exceeds the available treasury balance of {balanceInStx.toFixed(2)} STX. 
+                                            This proposal cannot be executed until the treasury is replenished.
+                                        </p>
+                                    </div>
+                                </div>
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+
                     {/* Submit Button */}
                     <button
                         type="submit"

frontend/src/components/TreasuryBalance.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect, memo } from 'react';
-import { API_URL, CONTRACT_ADDRESS, CONTRACT_NAME, formatStx } from '../config';
+import { memo } from 'react';
+import { formatStx } from '../config';
 import { useStxPriceData } from '../hooks/useStxPrice';
 import { formatUsd, stxToUsd } from '../lib/currency';
-import { normalizeError } from '../lib/error-normalizer';
+import { useTreasuryBalance } from '../hooks/useTreasuryBalance';
 
 interface TreasuryBalanceProps {
   className?: string;
@@ -11,40 +11,9 @@ interface TreasuryBalanceProps {
 export const TreasuryBalance = memo(function TreasuryBalance({
   className = '',
 }: TreasuryBalanceProps) {
-  const [balance, setBalance] = useState<number | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const { balance, loading, error } = useTreasuryBalance();
   const { price } = useStxPriceData();
 
-  useEffect(() => {
-    async function fetchTreasuryBalance() {
-      setLoading(true);
-      setError(null);
-
-      try {
-        const contractAddress = `${CONTRACT_ADDRESS}.${CONTRACT_NAME}`;
-        const url = `${API_URL}/extended/v1/address/${contractAddress}/stx`;
-        const response = await fetch(url);
-
-        if (!response.ok) {
-          throw new Error(`Failed to fetch treasury balance: ${response.statusText}`);
-        }
-
-        const data = await response.json();
-        setBalance(Number(data.balance) || 0);
-      } catch (err) {
-        const normalized = normalizeError(err);
-        setError(normalized.message);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    fetchTreasuryBalance();
-    const interval = setInterval(fetchTreasuryBalance, 60000);
-    return () => clearInterval(interval);
-  }, []);
-
   if (loading && balance === null) {
     return (
       <div className={`rounded-xl border border-border bg-card p-4 ${className}`}>

frontend/src/hooks/index.ts

@@ -9,6 +9,7 @@ export { useRetry } from './useRetry';
 export { useDebouncedSearch } from './useDebouncedSearch';
 export { useStxPriceData } from './useStxPrice';
 export { useWalletBalanceData } from './useWalletBalance';
+export { useTreasuryBalance } from './useTreasuryBalance';
 // Blockchain state hooks
 export { useCurrentBlockHeight } from './useCurrentBlockHeight';
 export { useVote } from './useVote';

frontend/src/hooks/useTreasuryBalance.ts

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { API_URL, CONTRACT_ADDRESS, CONTRACT_NAME, microToStx } from '../config';
+import { normalizeError } from '../lib/error-normalizer';
+
+interface TreasuryBalanceState {
+  balance: number | null;
+  balanceInStx: number | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+export function useTreasuryBalance(): TreasuryBalanceState {
+  const [balance, setBalance] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTreasuryBalance = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const contractAddress = `${CONTRACT_ADDRESS}.${CONTRACT_NAME}`;
+      const url = `${API_URL}/extended/v1/address/${contractAddress}/stx`;
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch treasury balance: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      setBalance(Number(data.balance) || 0);
+    } catch (err) {
+      const normalized = normalizeError(err);
+      setError(normalized.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTreasuryBalance();
+    const interval = setInterval(fetchTreasuryBalance, 60000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return {
+    balance,
+    balanceInStx: balance !== null ? microToStx(balance) : null,
+    loading,
+    error,
+    refetch: fetchTreasuryBalance,
+  };
+}

frontend/src/lib/validation.test.ts

@@ -3,6 +3,7 @@ import {
   validateTitle,
   validateDescription,
   validateAmount,
+  validateAmountAgainstTreasury,
   validateDuration,
   validateProposalForm,
   isFormValid,
@@ -181,3 +182,34 @@ describe('isFormValid', () => {
     expect(isFormValid({ title: 'Title is required' })).toBe(false);
   });
 });
+
+/* ────────────────────────────────────────────── */
+/*  validateAmountAgainstTreasury                 */
+/* ────────────────────────────────────────────── */
+describe('validateAmountAgainstTreasury', () => {
+  it('returns basic validation error when amount is invalid', () => {
+    expect(validateAmountAgainstTreasury('', 100)).toBe('Amount is required');
+    expect(validateAmountAgainstTreasury('abc', 100)).toContain('valid number');
+    expect(validateAmountAgainstTreasury('0', 100)).toContain('at least');
+  });
+
+  it('returns null when amount is valid and within treasury balance', () => {
+    expect(validateAmountAgainstTreasury('50', 100)).toBeNull();
+    expect(validateAmountAgainstTreasury('100', 100)).toBeNull();
+  });
+
+  it('returns error when amount exceeds treasury balance', () => {
+    const error = validateAmountAgainstTreasury('150', 100);
+    expect(error).toContain('exceeds treasury balance');
+    expect(error).toContain('100.00 STX available');
+  });
+
+  it('handles null treasury balance gracefully', () => {
+    expect(validateAmountAgainstTreasury('50', null)).toBeNull();
+  });
+
+  it('validates against treasury balance with decimals', () => {
+    expect(validateAmountAgainstTreasury('50.5', 50.25)).toContain('exceeds treasury balance');
+    expect(validateAmountAgainstTreasury('50.25', 50.25)).toBeNull();
+  });
+});

frontend/src/lib/validation.ts

@@ -96,6 +96,23 @@ export function validateAmount(value: string): string | null {
   return null;
 }
 
+export function validateAmountAgainstTreasury(
+  value: string,
+  treasuryBalance: number | null
+): string | null {
+  const basicError = validateAmount(value);
+  if (basicError) return basicError;
+
+  if (treasuryBalance !== null) {
+    const num = parseFloat(value);
+    if (num > treasuryBalance) {
+      return `Amount exceeds treasury balance (${treasuryBalance.toFixed(2)} STX available)`;
+    }
+  }
+
+  return null;
+}
+
 export function validateDuration(value: string): string | null {
   if (!value.trim()) return 'Duration is required';
   const num = parseInt(value, 10);

frontend/src/spa-pages/CreateProposal.tsx

@@ -9,7 +9,8 @@ import { useFormValidation } from '../hooks/useFormValidation';
 import { useFocusOnMount } from '../hooks/useFocusOnMount';
 import { useDocumentTitle } from '../hooks/useDocumentTitle';
 import { useStxPriceData } from '../hooks/useStxPrice';
-import { isFormValid, validateProposalForm } from '../lib/validation';
+import { useTreasuryBalance } from '../hooks/useTreasuryBalance';
+import { isFormValid, validateProposalForm, validateAmountAgainstTreasury } from '../lib/validation';
 import { sanitizeText, sanitizeMultilineText } from '../lib/sanitize';
 import { formatUsd, stxToUsd } from '../lib/currency';
 import { CharacterCounter } from '../components/CharacterCounter';
@@ -29,6 +30,7 @@ export function CreateProposalPage() {
   const headingRef = useFocusOnMount<HTMLHeadingElement>();
   useDocumentTitle('Create Proposal');
   const { price: stxPrice } = useStxPriceData();
+  const { balanceInStx, loading: treasuryLoading, error: treasuryError } = useTreasuryBalance();
 
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
@@ -119,10 +121,35 @@ export function CreateProposalPage() {
   return (
     <div className="mx-auto max-w-2xl px-4 sm:px-6 py-8">
       <h1 ref={headingRef} tabIndex={-1} className="mb-2 text-2xl font-bold text-text outline-none">Create Proposal</h1>
-      <p className="mb-8 text-sm text-muted">
+      <p className="mb-4 text-sm text-muted">
         Submit a funding request to the SprintFund DAO. Requires {MIN_STAKE_STX}+ STX staked.
       </p>
 
+      {/* Treasury Balance Display */}
+      <div className={`mb-6 rounded-lg border px-4 py-3 ${
+        treasuryError ? 'bg-red/5 border-red/20' : 
+        treasuryLoading ? 'bg-card border-border' :
+        'bg-green/5 border-green/20'
+      }`}>
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs font-medium text-muted">Treasury Available</p>
+            {treasuryLoading ? (
+              <p className="text-sm text-muted">Loading balance...</p>
+            ) : treasuryError ? (
+              <p className="text-sm text-red">Failed to load treasury balance</p>
+            ) : (
+              <p className="text-sm font-semibold text-text">
+                {balanceInStx !== null ? `${balanceInStx.toFixed(2)} STX` : '0.00 STX'}
+              </p>
+            )}
+          </div>
+          {!treasuryLoading && !treasuryError && balanceInStx !== null && (
+            <p className="text-xs text-muted">Available for funding</p>
+          )}
+        </div>
+      </div>
+
       <form onSubmit={handleSubmit} className="space-y-5" noValidate>
         {/* Title */}
         <div>
@@ -273,6 +300,19 @@ export function CreateProposalPage() {
           </p>
         )}
 
+        {/* Treasury Warning */}
+        {amount && balanceInStx !== null && parseFloat(amount) > balanceInStx && (
+          <div role="alert" aria-live="polite" className="rounded-lg bg-yellow-500/10 border border-yellow-500/20 px-4 py-3">
+            <p className="mb-1 text-xs font-semibold text-yellow-600">
+              Insufficient Treasury Funds
+            </p>
+            <p className="text-xs text-yellow-700/80">
+              Your request of {parseFloat(amount).toFixed(2)} STX exceeds the available treasury balance of {balanceInStx.toFixed(2)} STX. 
+              This proposal cannot be executed until the treasury is replenished.
+            </p>
+          </div>
+        )}
+
         {/* TX Status */}
         {txStatus && (
           <p role="status" aria-live="polite" className="rounded-lg bg-green/5 border border-green/20 px-3 py-2 text-xs text-green">