feat: explorer API, wallet, CCIP scripts, and config refresh

- Backend REST/gateway/track routes, analytics, Blockscout proxy paths.
- Frontend wallet and liquidity surfaces; MetaMask token list alignment.
- Deployment docs, verification scripts, address inventory updates.

Check: go build ./... under backend/ (pass).
Made-with: Cursor

frontend/src/pages/blocks/index.tsx

@@ -6,6 +6,7 @@ import { Card, Address } from '@/libs/frontend-ui-primitives'
 import Link from 'next/link'
 
 export default function BlocksPage() {
+  const pageSize = 20
   const [blocks, setBlocks] = useState<Block[]>([])
   const [loading, setLoading] = useState(true)
   const [page, setPage] = useState(1)
@@ -17,75 +18,89 @@ export default function BlocksPage() {
       const response = await blocksApi.list({
         chain_id: chainId,
         page,
-        page_size: 20,
+        page_size: pageSize,
         sort: 'number',
         order: 'desc',
       })
       setBlocks(response.data)
     } catch (error) {
       console.error('Failed to load blocks:', error)
+      setBlocks([])
     } finally {
       setLoading(false)
     }
-  }, [chainId, page])
+  }, [chainId, page, pageSize])
 
   useEffect(() => {
     loadBlocks()
   }, [loadBlocks])
 
-  if (loading) {
-    return <div className="p-8">Loading blocks...</div>
-  }
+  const showPagination = page > 1 || blocks.length > 0
+  const canGoNext = blocks.length === pageSize
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">Blocks</h1>
+    <div className="container mx-auto px-4 py-6 sm:py-8">
+      <h1 className="mb-6 text-3xl font-bold">Blocks</h1>
 
-      <div className="space-y-4">
-        {blocks.map((block) => (
-          <Card key={block.number}>
-            <div className="flex items-center justify-between">
-              <div>
-                <Link
-                  href={`/blocks/${block.number}`}
-                  className="text-lg font-semibold text-primary-600 hover:text-primary-700"
-                >
-                  Block #{block.number}
-                </Link>
-                <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                  <Address address={block.hash} truncate />
+      {loading ? (
+        <Card>
+          <p className="text-sm text-gray-600 dark:text-gray-400">Loading blocks...</p>
+        </Card>
+      ) : (
+        <div className="space-y-4">
+          {blocks.length === 0 ? (
+            <Card>
+              <p className="text-sm text-gray-600 dark:text-gray-400">Recent blocks are unavailable right now.</p>
+            </Card>
+          ) : (
+            blocks.map((block) => (
+              <Card key={block.number}>
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div>
+                    <Link
+                      href={`/blocks/${block.number}`}
+                      className="text-lg font-semibold text-primary-600 hover:text-primary-700"
+                    >
+                      Block #{block.number}
+                    </Link>
+                    <div className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                      <Address address={block.hash} truncate showCopy={false} />
+                    </div>
+                  </div>
+                  <div className="text-left sm:text-right">
+                    <div className="text-sm">
+                      {new Date(block.timestamp).toLocaleString()}
+                    </div>
+                    <div className="text-sm text-gray-600 dark:text-gray-400">
+                      {block.transaction_count} transactions
+                    </div>
+                  </div>
                 </div>
-              </div>
-              <div className="text-right">
-                <div className="text-sm">
-                  {new Date(block.timestamp).toLocaleString()}
-                </div>
-                <div className="text-sm text-gray-600 dark:text-gray-400">
-                  {block.transaction_count} transactions
-                </div>
-              </div>
-            </div>
-          </Card>
-        ))}
-      </div>
+              </Card>
+            ))
+          )}
+        </div>
+      )}
 
-      <div className="mt-6 flex gap-4 justify-center">
-        <button
-          onClick={() => setPage((p) => Math.max(1, p - 1))}
-          disabled={page === 1}
-          className="px-4 py-2 bg-gray-200 rounded disabled:opacity-50"
-        >
-          Previous
-        </button>
-        <span className="px-4 py-2">Page {page}</span>
-        <button
-          onClick={() => setPage((p) => p + 1)}
-          className="px-4 py-2 bg-gray-200 rounded"
-        >
-          Next
-        </button>
-      </div>
+      {showPagination && (
+        <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
+          <button
+            onClick={() => setPage((p) => Math.max(1, p - 1))}
+            disabled={loading || page === 1}
+            className="rounded bg-gray-200 px-4 py-2 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Previous
+          </button>
+          <span className="px-3 py-2 text-sm sm:px-4">Page {page}</span>
+          <button
+            onClick={() => setPage((p) => p + 1)}
+            disabled={loading || !canGoNext}
+            className="rounded bg-gray-200 px-4 py-2 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            Next
+          </button>
+        </div>
+      )}
     </div>
   )
 }
-