Distinguish price loading/unavailable, fix analytics 0-flash, surface silent save failures

- #675: audited all 5 consumers of use-token-price.ts. Fixed two real
  gaps — stream-card.tsx rendered loading and unavailable identically
  (both showed nothing); now shows a skeleton pulse while loading.
  create-form.tsx's "Fetching price…" indicator was dead code (nested
  inside a block that can only render once the price has already
  resolved, so `priceLoading` was always false there) — moved it out
  so it's actually reachable, and added a distinct "Price unavailable"
  message for the resolved-but-null case. dashboard-stats.tsx already
  handled this correctly; create-confirmation.tsx and the stream
  detail page use the price only for an XLM-denominated fee estimate
  that never renders a USD value, so there's nothing to distinguish
  there.
- #674: analytics/page.tsx called useStreams({ enablePolling: false })
  but never destructured `loading`, so the four stat cards flashed "0"
  before real data resolved. Destructured it and render a skeleton
  pulse per card while loading. (hooks/use-streams.ts had the same
  pre-existing corruption fixed elsewhere this session — two competing
  implementations merged together, duplicate declarations, two
  conflicting return statements — reconciled into one, since it
  directly blocked `loading` from working at all here.)
- #676: use-form-draft.ts's save() silently discarded quota/
  unavailable errors. Added an optional onSaveError callback (fires
  once per failure streak, resets on the next successful save) and
  wired create-form.tsx to show a toast warning.
- #677: use-webhooks.ts's saveWebhooks/saveHistory called
  localStorage.setItem unguarded — wrapped both in try/catch
  (returning a success flag) matching use-form-draft.ts's pattern, and
  added the same onSaveError callback convention, wired to a toast in
  webhook-settings.tsx.

Closes #674
Closes #675
Closes #676
Closes #677

Author: Kingsman-99

app/app/analytics/page.tsx

@@ -210,7 +210,10 @@ function buildSnapshot(streams: StreamData[], range: string): AnalyticsSnapshot
 }
 
 export default function AnalyticsPage() {
-  const { all } = useStreams({ enablePolling: false })
+  // Issue #674: `loading` was never destructured, so the four stat cards
+  // below rendered misleading "0" values before real data resolved instead
+  // of a loading state.
+  const { all, loading } = useStreams({ enablePolling: false })
   const { network } = useNetwork()
   const [range, setRange] = useState('30d')
   const [mounted, setMounted] = useState(false)
@@ -260,9 +263,13 @@ export default function AnalyticsPage() {
           <CardHeader className="pb-2">
             <CardDescription>Total volume streamed</CardDescription>
             <CardTitle className="text-2xl font-semibold">
-              {snapshot.totalVolume > 0n
-                ? formatCompactAmount(snapshot.totalVolume, snapshot.tokenShares[0]?.decimals ?? 7)
-                : '0'}
+              {loading ? (
+                <span className="inline-block h-7 w-24 animate-pulse rounded bg-muted" />
+              ) : snapshot.totalVolume > 0n ? (
+                formatCompactAmount(snapshot.totalVolume, snapshot.tokenShares[0]?.decimals ?? 7)
+              ) : (
+                '0'
+              )}
             </CardTitle>
           </CardHeader>
           <CardContent className="flex items-center gap-2 text-sm text-muted-foreground">
@@ -272,7 +279,13 @@ export default function AnalyticsPage() {
         <Card>
           <CardHeader className="pb-2">
             <CardDescription>Active streams</CardDescription>
-            <CardTitle className="text-2xl font-semibold">{snapshot.activeCount}</CardTitle>
+            <CardTitle className="text-2xl font-semibold">
+              {loading ? (
+                <span className="inline-block h-7 w-12 animate-pulse rounded bg-muted" />
+              ) : (
+                snapshot.activeCount
+              )}
+            </CardTitle>
           </CardHeader>
           <CardContent className="flex items-center gap-2 text-sm text-muted-foreground">
             <TrendingUp className="size-4" /> Currently streaming now
@@ -281,7 +294,13 @@ export default function AnalyticsPage() {
         <Card>
           <CardHeader className="pb-2">
             <CardDescription>Total streams created</CardDescription>
-            <CardTitle className="text-2xl font-semibold">{snapshot.totalStreams}</CardTitle>
+            <CardTitle className="text-2xl font-semibold">
+              {loading ? (
+                <span className="inline-block h-7 w-12 animate-pulse rounded bg-muted" />
+              ) : (
+                snapshot.totalStreams
+              )}
+            </CardTitle>
           </CardHeader>
           <CardContent className="flex items-center gap-2 text-sm text-muted-foreground">
             <BarChart3 className="size-4" /> All-time stream count
@@ -291,7 +310,11 @@ export default function AnalyticsPage() {
           <CardHeader className="pb-2">
             <CardDescription>Average duration</CardDescription>
             <CardTitle className="text-2xl font-semibold">
-              {snapshot.averageDurationDays.toFixed(1)}d
+              {loading ? (
+                <span className="inline-block h-7 w-14 animate-pulse rounded bg-muted" />
+              ) : (
+                `${snapshot.averageDurationDays.toFixed(1)}d`
+              )}
             </CardTitle>
           </CardHeader>
           <CardContent className="flex items-center gap-2 text-sm text-muted-foreground">

app/app/create/create-form.tsx

@@ -371,6 +371,13 @@ export function CreateForm() {
       setRecipientInput(draft.recipient);
     },
     true,
+    // Issue #676: surface draft-save failures instead of silently
+    // discarding them.
+    () =>
+      toast.warning("Your draft isn't being saved", {
+        description:
+          "Storage is full or unavailable — your progress won't be restored if you leave this page.",
+      }),
   );
 
   // Check for existing draft on first mount
@@ -841,7 +848,19 @@ export function CreateForm() {
                 )}
               </div>
 
-              {/* Issue #186: USD equivalent + per-second rate */}
+              {/* Issue #186: USD equivalent + per-second rate.
+                  Issue #675: `priceLoading` used to be nested inside this
+                  block, but by the time `usdEquivalent` is truthy the price
+                  has already resolved (loading is always false here) — so
+                  it could never actually render. Show a distinct loading
+                  indicator whenever a price is being fetched and the user
+                  has entered an amount, separately from the "here's the
+                  USD value" case below. */}
+              {priceLoading && tokenAmountNum > 0 && !usdInputMode && (
+                <p className="text-xs text-muted-foreground opacity-60">
+                  Fetching price…
+                </p>
+              )}
               {usdEquivalent && !usdInputMode && (
                 <p className="text-xs text-muted-foreground">
                   ≈ ${usdEquivalent} USD
@@ -860,9 +879,15 @@ export function CreateForm() {
                       {selectedToken.symbol}/sec (≈ ${amountPerSecondUsd}/sec)
                     </span>
                   )}
-                  {priceLoading && (
-                    <span className="ml-1 opacity-60">Fetching price…</span>
-                  )}
+                </p>
+              )}
+              {/* Issue #675: distinct from the loading state above — the
+                  price fetch has finished but no price is available for
+                  this token (not XLM/USDC/EURC, or the fetch failed with no
+                  cached fallback). */}
+              {!priceLoading && !supportsUsd && tokenAmountNum > 0 && !usdInputMode && (
+                <p className="text-xs text-muted-foreground">
+                  Price unavailable for {selectedToken.symbol}
                 </p>
               )}
               {usdInputMode && form.amount && (

components/streams/stream-card.tsx

@@ -62,7 +62,7 @@ function StreamCardInner({
   const interval = getInterval(stream)
   const now = useNow(interval)
   const { address } = useWallet()
-  const { usdPrice } = useTokenPrice(stream.token.symbol)
+  const { usdPrice, loading: priceLoading } = useTokenPrice(stream.token.symbol)
   const [showUsd] = useShowUsd()
   const isCancelling = useIsStreamCancelling(stream.id)
   const { isBlocked, hideStream, unhideStream, blockSender, unblockSender } = useHiddenStreams()
@@ -239,8 +239,15 @@ function StreamCardInner({
             className="text-lg font-semibold"
             maxFractionDigits={2}
           />
-          {usdValue !== null && (
-            <p className="text-xs text-muted-foreground">{formatUsd(usdValue)}</p>
+          {/* Issue #675: loading and unavailable previously rendered
+              identically (nothing) — show a distinct skeleton while the
+              price is still being fetched. */}
+          {showUsd && usdValue === null && priceLoading ? (
+            <div className="mt-0.5 h-3 w-12 animate-pulse rounded bg-muted" aria-label="Loading price" />
+          ) : (
+            usdValue !== null && (
+              <p className="text-xs text-muted-foreground">{formatUsd(usdValue)}</p>
+            )
           )}
         </div>
         <div className="text-right">

components/webhooks/webhook-settings.tsx

@@ -19,7 +19,14 @@ const ALL_EVENTS: { value: WebhookEventType; label: string }[] = [
 ]
 
 export function WebhookSettings() {
-  const { webhooks, history, addWebhook, removeWebhook, toggleWebhook, testWebhook } = useWebhooks()
+  // Issue #677: surface webhook-config save failures instead of letting
+  // localStorage.setItem throw uncaught / fail silently.
+  const { webhooks, history, addWebhook, removeWebhook, toggleWebhook, testWebhook } = useWebhooks(
+    () =>
+      toast.warning("Webhook settings aren't being saved", {
+        description: 'Storage is full or unavailable — your changes may not persist.',
+      }),
+  )
 
   const [url, setUrl] = useState('')
   const [urlError, setUrlError] = useState('')

hooks/use-form-draft.ts

@@ -14,9 +14,16 @@ export function useFormDraft<T>(
   value: T,
   onChange: (draft: T) => void,
   enabled = true,
+  // Issue #676: draft-save failures (quota exceeded, private browsing) used
+  // to be silently discarded — the caller can surface this however fits
+  // (toast, inline notice, ...). Only fires once per failure streak, not on
+  // every debounced save, so it stays a lightweight one-time warning rather
+  // than spamming the user.
+  onSaveError?: () => void,
 ) {
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const isRestoringRef = useRef(false)
+  const hasWarnedRef = useRef(false)
 
   const storageKey = `flowstar_draft_${key}`
 
@@ -25,11 +32,18 @@ export function useFormDraft<T>(
       try {
         const entry: DraftEntry<T> = { data, savedAt: Date.now() }
         localStorage.setItem(storageKey, JSON.stringify(entry))
+        hasWarnedRef.current = false
       } catch {
-        // storage quota exceeded or unavailable — silently skip
+        // storage quota exceeded or unavailable — the draft itself is still
+        // silently skipped (nothing else we can do), but the user is now
+        // told their progress isn't being saved.
+        if (!hasWarnedRef.current) {
+          hasWarnedRef.current = true
+          onSaveError?.()
+        }
       }
     },
-    [storageKey],
+    [storageKey, onSaveError],
   )
 
   const discard = useCallback(() => {

hooks/use-streams.ts

@@ -58,15 +58,13 @@ export function useStreams(options?: UseStreamsOptions): CategorizedStreams {
   const [streams, setStreams] = useState<StreamData[]>([])
   const [loading, setLoading] = useState(false)
   const [isRefreshingAfterHidden, setIsRefreshingAfterHidden] = useState(false)
+  // True while `streams` is serving the offline cache instead of a live fetch.
+  const [stale, setStale] = useState(false)
+  const [lastUpdated, setLastUpdated] = useState<number | null>(null)
 
   const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
   // Tracks whether the polling interval is currently running.
   const pollingActiveRef = useRef(false)
-
-  // True while `streams` is serving the offline cache instead of a live fetch.
-  const [stale, setStale] = useState(false)
-  const [lastUpdated, setLastUpdated] = useState<number | null>(null)
-  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null)
   // Monotonically increasing request ID — any response whose ID doesn't
   // match the current value is from a stale request and is discarded.
   const requestIdRef = useRef(0)
@@ -96,19 +94,47 @@ export function useStreams(options?: UseStreamsOptions): CategorizedStreams {
 
       if (!address) {
         setStreams([])
+        setStale(false)
+        setLastUpdated(null)
         if (req === requestIdRef.current) setLoading(false)
         return
       }
+
+      // Offline (or the request will fail shortly): serve cached stream data
+      // immediately with a stale indicator instead of an empty dashboard
+      // (issue #150).
+      if (typeof navigator !== 'undefined' && navigator.onLine === false) {
+        const cached = readCachedStreams(network, address)
+        if (cached) {
+          setStreams(cached.streams)
+          setStale(true)
+          setLastUpdated(cached.fetchedAt)
+        }
+        setLoading(false)
+        return
+      }
+
       setLoading(true)
       try {
         const data = await fetchStreamsForAddress(network, address)
         // Discard if a newer request has already started.
         if (req !== requestIdRef.current) return
         setStreams(data)
+        setStale(false)
+        setLastUpdated(Date.now())
+        writeCachedStreams(network, address, data)
       } catch (e) {
         if (req !== requestIdRef.current) return
         // Suppress errors from intentionally aborted requests.
         if (e instanceof DOMException && e.name === 'AbortError') return
+        // Network-level failure (e.g. connectivity dropped mid-request) —
+        // fall back to whatever we last cached rather than showing nothing.
+        const cached = readCachedStreams(network, address)
+        if (cached) {
+          setStreams(cached.streams)
+          setStale(true)
+          setLastUpdated(cached.fetchedAt)
+        }
         captureError(e, { operation: 'use-streams:fetch' })
       } finally {
         if (req === requestIdRef.current) setLoading(false)
@@ -137,52 +163,6 @@ export function useStreams(options?: UseStreamsOptions): CategorizedStreams {
     if (pollIntervalRef.current) {
       clearInterval(pollIntervalRef.current)
       pollIntervalRef.current = null
-    if (!address) {
-      setStreams([])
-      setStale(false)
-      setLastUpdated(null)
-      if (req === requestIdRef.current) setLoading(false)
-      return
-    }
-
-    // Offline (or the request will fail shortly): serve cached stream data
-    // immediately with a stale indicator instead of an empty dashboard
-    // (issue #150).
-    if (typeof navigator !== 'undefined' && navigator.onLine === false) {
-      const cached = readCachedStreams(network, address)
-      if (cached) {
-        setStreams(cached.streams)
-        setStale(true)
-        setLastUpdated(cached.fetchedAt)
-      }
-      setLoading(false)
-      return
-    }
-
-    setLoading(true)
-    try {
-      const data = await fetchStreamsForAddress(network, address)
-      // Discard if a newer request has already started.
-      if (req !== requestIdRef.current) return
-      setStreams(data)
-      setStale(false)
-      setLastUpdated(Date.now())
-      writeCachedStreams(network, address, data)
-    } catch (e) {
-      if (req !== requestIdRef.current) return
-      // Suppress errors from intentionally aborted requests.
-      if (e instanceof DOMException && e.name === 'AbortError') return
-      // Network-level failure (e.g. connectivity dropped mid-request) —
-      // fall back to whatever we last cached rather than showing nothing.
-      const cached = readCachedStreams(network, address)
-      if (cached) {
-        setStreams(cached.streams)
-        setStale(true)
-        setLastUpdated(cached.fetchedAt)
-      }
-      captureError(e, { operation: 'use-streams:fetch' })
-    } finally {
-      if (req === requestIdRef.current) setLoading(false)
     }
     pollingActiveRef.current = false
   }, [])
@@ -256,8 +236,16 @@ export function useStreams(options?: UseStreamsOptions): CategorizedStreams {
   const sent = streams.filter((s) => s.sender === address)
   const received = streams.filter((s) => s.recipient === address)
 
-  return { all: streams, sent, received, loading, isRefreshingAfterHidden, refetch: fetch }
-  return { all: streams, sent, received, loading, refetch: fetch, stale, lastUpdated }
+  return {
+    all: streams,
+    sent,
+    received,
+    loading,
+    isRefreshingAfterHidden,
+    refetch: fetch,
+    stale,
+    lastUpdated,
+  }
 }
 
 export function useStream(id: string): {