refactor(ui): de-chip the explorer — flatten pills to plain text / status marks

The UI was pill-heavy everywhere. Removed the noise, kept only meaningful
signals, no color changes:

- Redundant COUNT pills → plain muted text. Section-header counts (inputs/outputs,
  "N transactions", blocks/pending/masternode counts, feed hints) drop the pill
  background and read as a quiet number.
- Redundant page-header badges removed entirely where the same value already lives
  in a stat tile or the global network indicator: block/blocks height, address &
  block tx-count, "Showing N", peers total, and the MAINNET/MCP/network chips on
  masternodes, fee-calculator, mcp and address-validator headers.
- STATUS pills flattened to icon/dot + colored text (no filled pill): tx status
  (Confirmed / In mempool / Unconfirmed), block confirmations, masternode status
  (now a status dot), home live indicator, wfair/bridge peg tone, network-status
  online + per-check state.
- Home-card indicators (price change %, GitHub stars, network phase, supply/stats
  minted %, reward split) → plain colored/muted text with their icon, no pill.

Interactive segmented controls (chart period toggles) left as-is. Dropped the
imports/hooks orphaned by the removals (useNetwork, Activity, Network, Database,
Receipt).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: NateIsern

src/components/address-content.tsx

@@ -80,12 +80,6 @@ export function AddressContent({ address }: { address: string }) {
         subtitle={t('subtitle')}
         onRefresh={() => void refetch()}
         isRefreshing={isFetching}
-        action={
-          <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
-            <Receipt className="size-3" />
-            {t('transactionsCount', { count: info.txCount })}
-          </span>
-        }
       />
 
       {/* Hero: balance as the confident primary figure + address identity. */}
@@ -192,7 +186,7 @@ function AddressTransactionsSection({
               {t('exportCsv')}
             </Button>
           ) : null}
-          <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium tabular-nums text-muted-foreground">
+          <span className="text-xs tabular-nums text-muted-foreground">
             {t('transactionsCount', { count: total })}
           </span>
         </div>

src/components/address-validator-content.tsx

@@ -111,12 +111,6 @@ export function AddressValidatorContent() {
       <DetailHeader
         title={t('title')}
         subtitle={t('subtitle')}
-        action={
-          <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
-            <Wallet className="size-3" />
-            {currentNetwork.toUpperCase()}
-          </span>
-        }
       />
 
       <SectionCard title={t('validateSection.title')} icon={ShieldCheck}>

src/components/block-content.tsx

@@ -87,12 +87,6 @@ export function BlockContent({ hashOrHeight }: { hashOrHeight: string }) {
         subtitle={t('details')}
         onRefresh={() => void refetch()}
         isRefreshing={isFetching}
-        action={
-          <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
-            <Database className="size-3" />
-            {common('transactions')}: {formatNumber(txCount)}
-          </span>
-        }
       />
 
       {/* Hero: block height + hash as the confident primary identity. */}
@@ -199,7 +193,7 @@ export function BlockContent({ hashOrHeight }: { hashOrHeight: string }) {
         icon={Receipt}
         flush
         action={
-          <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium tabular-nums text-primary">
+          <span className="text-xs tabular-nums text-muted-foreground">
             {formatNumber(txCount)} {common('transactions')}
           </span>
         }
@@ -226,11 +220,11 @@ function ConfirmationPill({
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium tabular-nums',
-        confirmed ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground',
+        'inline-flex items-center gap-1 text-xs font-medium tabular-nums',
+        confirmed ? 'text-primary' : 'text-muted-foreground',
       )}
     >
-      <CheckCircle2 className="size-3" />
+      <CheckCircle2 className="size-3.5" />
       {formatNumber(confirmations)} {label}
     </span>
   )

src/components/blocks-content.tsx

@@ -3,7 +3,6 @@ import {
   AlertTriangle,
   Blocks as BlocksIcon,
   Calendar,
-  Database,
   Layers,
   Network,
   Search,
@@ -122,12 +121,6 @@ export function BlocksContent() {
         subtitle={t('subtitle')}
         onRefresh={() => void refetch()}
         isRefreshing={isFetching}
-        badge={
-          <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
-            <Database className="size-3" />
-            {t('height', { height: formatNumber(height) })}
-          </span>
-        }
       />
 
       {/* Summary tiles — same language as the home stat strip. */}
@@ -190,7 +183,7 @@ export function BlocksContent() {
         icon={BlocksIcon}
         flush
         action={
-          <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium tabular-nums text-muted-foreground">
+          <span className="text-xs tabular-nums text-muted-foreground">
             {t('blocksCount', { count: filteredBlocks.length })}
           </span>
         }

src/components/bridge-content.tsx

@@ -120,10 +120,10 @@ export function BridgeContent() {
   const pegBadge = (
     <span
       className={cn(
-        'inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium',
-        peg.tone === 'healthy' && 'bg-primary/10 text-primary',
-        peg.tone === 'unhealthy' && 'bg-destructive/10 text-destructive',
-        peg.tone === 'pending' && 'bg-muted/70 text-muted-foreground',
+        'inline-flex items-center gap-1 text-xs font-medium',
+        peg.tone === 'healthy' && 'text-primary',
+        peg.tone === 'unhealthy' && 'text-destructive',
+        peg.tone === 'pending' && 'text-muted-foreground',
       )}
     >
       <peg.icon className="size-3.5" />

src/components/fee-calculator-content.tsx

@@ -91,12 +91,6 @@ export function FeeCalculatorContent() {
       <DetailHeader
         title={t('title')}
         subtitle={t('subtitle')}
-        action={
-          <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
-            <Calculator className="size-3" />
-            {currentNetwork.toUpperCase()}
-          </span>
-        }
       />
 
       <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)]">

src/components/home/github-card.tsx

@@ -35,7 +35,7 @@ export function GithubCard() {
 
   const action =
     stars !== null ? (
-      <span className="inline-flex items-center gap-1 rounded-full bg-muted/70 px-2 py-0.5 text-xs font-medium tabular-nums">
+      <span className="inline-flex items-center gap-1 text-xs font-medium tabular-nums text-muted-foreground">
         <Star className="size-3" />
         {formatCompactNumber(stars)}
       </span>

src/components/home/home-header.tsx

@@ -45,10 +45,10 @@ function LivePill({ mode, phase, height, label }: LivePillProps) {
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
-        mode === 'live' && 'bg-primary/10 text-primary',
-        mode === 'polling' && 'bg-amber-500/10 text-amber-700 dark:text-amber-400',
-        mode === 'offline' && 'bg-destructive/10 text-destructive',
+        'inline-flex items-center gap-1.5 text-xs font-medium',
+        mode === 'live' && 'text-primary',
+        mode === 'polling' && 'text-amber-700 dark:text-amber-400',
+        mode === 'offline' && 'text-destructive',
       )}
     >
       <span

src/components/home/network-card.tsx

@@ -15,7 +15,7 @@ export function NetworkCard() {
   const nextPhase = phase === 'PoW' ? 'PoS' : null
 
   const action = phase ? (
-    <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+    <span className="inline-flex items-center gap-1 text-xs font-medium text-primary">
       {phase}
       {nextPhase && (
         <>

src/components/home/price-card.tsx

@@ -71,8 +71,8 @@ export function PriceCard() {
     change !== null ? (
       <span
         className={cn(
-          'inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-medium tabular-nums',
-          isUp ? 'bg-primary/10 text-primary' : 'bg-destructive/10 text-destructive',
+          'inline-flex items-center gap-0.5 text-xs font-medium tabular-nums',
+          isUp ? 'text-primary' : 'text-destructive',
         )}
       >
         {isUp ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}