claude:feat: make ServerError show the actual status and message

ServerError previously rendered "500 / Server error / <stringified-error>"
regardless of what failed. Derive the status from ApiError.status, map it
to a meaningful label (404 Not found, 503 Service unavailable, etc.), and
pull the description from the response body's error/message fields with a
truncate guard. Network/unknown errors fall back to "Connection failed".
Call sites switch from <ServerError status={500} message={error} /> to
<ServerError error={error} />.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: kuco23

src/components/sections/callToAction.tsx

@@ -39,7 +39,7 @@ const CallToAction = () => {
     </div>
   } else if (data == null) {
     hasError = true
-    component = <ServerError status={500} message={error} />
+    component = <ServerError error={error} />
   } else {
     const proposal = getProposalData(data)
     if (proposal.length > 0) {

src/components/ui/serverError.tsx

@@ -1,9 +1,79 @@
-export const ServerError = ({ status, message }) => {
-  return <div className="error-container">
-    <div className="error-status">{status}</div>
-    <div className="error-label">Server error</div>
-    <p className="error-desc">{String(message ?? 'The request failed.')}</p>
-  </div>
+import { ApiError } from '~/backendApi'
+
+type ServerErrorProps = {
+  error?: unknown
+  status?: number
+  className?: string
+}
+
+const MAX_DESC_CHARS = 280
+
+const labelForStatus = (status: number): string => {
+  if (status === 0) return 'Connection failed'
+  if (status === 400) return 'Bad request'
+  if (status === 401) return 'Unauthorized'
+  if (status === 403) return 'Forbidden'
+  if (status === 404) return 'Not found'
+  if (status === 408) return 'Request timeout'
+  if (status === 409) return 'Conflict'
+  if (status === 429) return 'Too many requests'
+  if (status === 502) return 'Bad gateway'
+  if (status === 503) return 'Service unavailable'
+  if (status === 504) return 'Gateway timeout'
+  if (status >= 500) return 'Server error'
+  if (status >= 400) return 'Request failed'
+  return 'Error'
+}
+
+const extractMessage = (error: unknown): string | undefined => {
+  if (error == null) return undefined
+  if (typeof error === 'string') return error.trim() || undefined
+  if (error instanceof ApiError) {
+    const body = error.body as unknown
+    if (body && typeof body === 'object') {
+      const b = body as Record<string, unknown>
+      if (typeof b.error === 'string' && b.error) return b.error
+      if (typeof b.message === 'string' && b.message) return b.message
+    }
+    if (typeof body === 'string' && body) return body
+    if (error.message) return error.message
+    return error.statusText || undefined
+  }
+  if (error instanceof Error) return error.message || undefined
+  try { return String(error) } catch { return undefined }
+}
+
+const truncate = (text: string): string =>
+  text.length <= MAX_DESC_CHARS ? text : text.slice(0, MAX_DESC_CHARS - 1).trimEnd() + '…'
+
+const derive = (error: unknown, statusOverride?: number) => {
+  let status = statusOverride
+  if (status == null && error instanceof ApiError) status = error.status
+
+  const message = extractMessage(error)
+  const hasStatus = status != null && status > 0
+
+  return {
+    statusDisplay: hasStatus ? String(status) : '—',
+    label: hasStatus ? labelForStatus(status!) : 'Connection failed',
+    description: message
+      ? truncate(message)
+      : hasStatus
+        ? 'The request failed.'
+        : 'Could not reach the server. Check your connection and try again.',
+  }
+}
+
+export const ServerError = ({ error, status, className }: ServerErrorProps) => {
+  const { statusDisplay, label, description } = derive(error, status)
+  const containerClass = className ? `error-container ${className}` : 'error-container'
+  return (
+    <div className={containerClass}>
+      <div className="error-status">{statusDisplay}</div>
+      <div className="error-label">{label}</div>
+      <p className="error-desc">{description}</p>
+    </div>
+  )
 }
 
 export default ServerError

src/pages/protocols/avalanche-validator/page.tsx

@@ -22,7 +22,7 @@ export const AvalancheValidatorPage = () => {
       </div>
     </>
   } else if (error != null) {
-    component = <ServerError status={500} message={error} />
+    component = <ServerError error={error} />
   } else {
     component = <>
       <InfoComponent specs={data.specs} summary={data.summary} />

src/pages/protocols/flare-fsp/components/delegateLocal.tsx

@@ -55,7 +55,7 @@ const FlareFspLocalDelegateComponent = () => {
       <SpinnerCircular color={C.FLARE_COLOR_CODE} size={45} />
     </div>
   } else if (data == null) {
-    component = <ServerError status={500} message={error} />
+    component = <ServerError error={error} />
   } else {
     component = <>
       <p>

src/pages/protocols/flare-fsp/page.tsx

@@ -27,7 +27,7 @@ export const FlareFspPage = () => {
       </div>
     </>
   } else if (data == null) {
-    component = <ServerError status={500} message={error} />
+    component = <ServerError error={error} />
   } else {
     const delegator = <HashLink url={flareEvmAddressUrl(data.info.delegationAddress)} address={data.info.delegationAddress} />
     component = <>

src/pages/protocols/flare-validator/components/delegateLocal.tsx

@@ -121,7 +121,7 @@ const FlareValidatorLocalDelegateComponent = () => {
       </div>
     </div>
   } else if (resp?.data == null) {
-    component = <ServerError status={500} message={error} />
+    component = <ServerError error={error} />
   } else {
     const delegated = resp.data.delegations.reduce((x, y) => x + y.delegated, 0)
     component = <div>

src/pages/protocols/flare-validator/page.tsx

@@ -24,7 +24,7 @@ export const FlareValidatorPage = () => {
       </div>
     </>
   } else if (error != null) {
-    component = <ServerError status={500} message={error} />
+    component = <ServerError error={error} />
   } else {
     component = <>
       <InfoComponent specs={data.specs} summary={data.summary} />

src/pages/protocols/songbird-fsp/components/delegateLocal.tsx

@@ -51,7 +51,7 @@ const SongbirdFspLocalDelegateComponent = () => {
       <SpinnerCircular color={C.SONGBIRD_COLOR_CODE} size={45} />
     </div>
   } else if (data == null) {
-    component = <ServerError status={500} message={error} />
+    component = <ServerError error={error} />
   } else {
     component = <>
       <p>

src/pages/protocols/songbird-fsp/page.tsx

@@ -26,7 +26,7 @@ export const SongbirdFspPage = () => {
       </div>
     </>
   } else if (data == null) {
-    component = <ServerError status={500} message={error} />
+    component = <ServerError error={error} />
   } else {
     const link = <HashLink url={songbirdEvmAddressUrl(data.info.delegationAddress)} address={data.info.delegationAddress} />
     component = <>