better error handling

app/src/app/listing/[pk]/page.tsx

@@ -60,8 +60,8 @@ export default function ListingPage({ params }: { params: Promise<{ pk: string }
         [['listing', pk], ['orders', pk]],
         'create_order',
       )
-    } catch (err) {
-      console.error('create_order failed:', err)
+    } catch {
+      // error already shown via toast in useTx
     } finally {
       setOrderLoading(false)
     }

app/src/components/ui/Toast.tsx

@@ -2,24 +2,26 @@
 
 import { createContext, useCallback, useContext, useState, type ReactNode } from 'react'
 
-const ToastCtx = createContext<(msg: string) => void>(() => {})
+type ToastFn = (msg: string, type?: 'success' | 'error') => void
+
+const ToastCtx = createContext<ToastFn>(() => {})
 
 export function useToast() {
   return useContext(ToastCtx)
 }
 
 export function ToastProvider({ children }: { children: ReactNode }) {
-  const [msg, setMsg] = useState('')
+  const [state, setState] = useState<{ msg: string; type: 'success' | 'error' } | null>(null)
 
-  const show = useCallback((m: string) => {
-    setMsg(m)
-    setTimeout(() => setMsg(''), 2800)
+  const show = useCallback<ToastFn>((m, type = 'success') => {
+    setState({ msg: m, type })
+    setTimeout(() => setState(null), type === 'error' ? 4500 : 2800)
   }, [])
 
   return (
     <ToastCtx.Provider value={show}>
       {children}
-      {msg && (
+      {state && (
         <div
           style={{
             position: 'fixed',
@@ -32,7 +34,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
             gap: 10,
             padding: '12px 18px',
             background: 'var(--bg2)',
-            border: '1px solid var(--accBd)',
+            border: `1px solid ${state.type === 'error' ? 'var(--errBd, #f87171)' : 'var(--accBd)'}`,
             borderRadius: 12,
             boxShadow: '0 16px 40px rgba(0,0,0,.55)',
             fontSize: 13,
@@ -46,12 +48,12 @@ export function ToastProvider({ children }: { children: ReactNode }) {
               width: 8,
               height: 8,
               borderRadius: '50%',
-              background: 'var(--acc2)',
-              boxShadow: '0 0 8px var(--acc2)',
+              background: state.type === 'error' ? '#f87171' : 'var(--acc2)',
+              boxShadow: state.type === 'error' ? '0 0 8px #f87171' : '0 0 8px var(--acc2)',
               flexShrink: 0,
             }}
           />
-          {msg}
+          {state.msg}
         </div>
       )}
     </ToastCtx.Provider>

app/src/hooks/useTx.ts

@@ -39,10 +39,15 @@ export function useTx() {
 
     const signed = await signTransactionMessageWithSigners(txMsg)
     assertIsTransactionWithBlockhashLifetime(signed)
+    try {
       await sendAndConfirmTransactionFactory({ rpc: rpc as never, rpcSubscriptions: rpcSubscriptions as never })(
         signed as never,
         { commitment: 'confirmed' },
       )
+    } catch (err) {
+      toast(friendlyTxError(err), 'error')
+      throw err
+    }
 
     toast(`Tx confirmed — ${label}`)
     for (const key of invalidateKeys) {
@@ -50,3 +55,20 @@ export function useTx() {
     }
   }
 }
+
+function friendlyTxError(err: unknown): string {
+  const msg = err instanceof Error ? err.message : String(err)
+  if (
+    msg.includes('Attempt to debit an account but found no record of a prior credit') ||
+    msg.includes('AccountNotFound')
+  ) {
+    return 'Insufficient SOL — please fund your wallet and try again.'
+  }
+  if (msg.includes('insufficient lamports') || msg.includes('insufficient funds')) {
+    return 'Insufficient SOL — please fund your wallet and try again.'
+  }
+  if (msg.includes('User rejected') || msg.includes('Transaction was not confirmed')) {
+    return 'Transaction cancelled.'
+  }
+  return 'Transaction failed — please try again.'
+}