FilOzone · silent-cipher · Jul 22, 2026 · Jul 22, 2026
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-brand="onchain-cloud">
 
 <head>
   <meta charset="UTF-8" />

@@ -1,11 +1,8 @@
 import JsonView from "@uiw/react-json-view";
-import { githubDarkTheme } from "@uiw/react-json-view/githubDark";
 import { githubLightTheme } from "@uiw/react-json-view/githubLight";
-import { useTheme } from "@/components/shared/ThemeProvider";
 
 const JsonDisplay = ({ jsonData }) => {
-  const { theme } = useTheme();
-  return <JsonView value={jsonData} collapsed={0} style={theme === "dark" ? githubDarkTheme : githubLightTheme} />;
+  return <JsonView value={jsonData} collapsed={0} style={githubLightTheme} />;
 };
 
 export default JsonDisplay;
@@ -0,0 +1,29 @@
+// FOC mark ported from the filecoin-design-system bundle (FocLogo.jsx, color tone).
+// Path data is authored on a 1000 x 896.787 canvas.
+const CIRCLE =
+  "M 450.756 0.008 C 696.155 1.464 897.499 202.444 895.678 452.215 C 895.321 502.975 886.412 551.241 870.727 596.664 C 837.283 560.016 789.586 536.683 736.72 535.386 L 733.201 535.331 C 662.086 534.908 600.402 573.984 568.137 631.393 C 495.132 638.865 438.13 700.538 438.13 775.53 L 438.143 777.404 C 438.753 825.592 462.888 868.109 499.589 894.004 C 482.635 895.932 465.376 896.889 447.843 896.778 C 200.622 897.87 -1.087 695.433 0.004 446.392 C 1.097 200.262 202.078 -1.449 450.756 0.008 Z M 614.961 163.486 C 570.18 161.666 538.139 184.242 513.017 218.83 C 488.257 253.057 477.334 293.105 465.32 332.791 C 462.043 344.443 459.129 356.095 455.487 368.836 C 412.159 362.647 370.29 356.456 327.327 350.266 C 325.87 361.919 324.414 372.843 322.955 384.495 C 365.556 391.049 406.335 397.238 448.207 403.789 C 442.38 427.82 437.281 450.029 431.821 472.604 C 390.679 466.779 351.356 461.318 312.032 455.858 C 310.576 468.601 309.121 478.43 307.665 489.717 C 347.351 495.906 385.582 501.732 423.812 507.557 C 423.812 511.925 424.538 514.478 423.812 516.661 C 411.433 568.725 400.145 621.521 386.31 673.224 C 379.756 697.981 369.195 721.647 348.807 739.123 C 332.06 753.322 313.488 751.135 300.745 733.297 C 294.921 725.287 290.188 715.821 282.543 710.358 C 277.08 706.355 264.701 703.806 260.698 707.083 C 254.871 712.181 250.502 722.739 250.867 730.749 C 251.233 737.667 258.146 746.042 264.335 750.775 C 285.089 766.796 309.852 768.979 334.609 764.246 C 376.48 755.87 405.97 729.657 424.177 692.883 C 438.738 664.119 449.299 633.171 459.492 602.221 C 468.596 574.187 474.786 545.424 482.066 516.298 C 523.209 522.488 563.261 528.311 604.404 534.136 C 608.045 522.487 610.957 511.564 614.234 500.277 C 571.271 493.723 530.129 487.894 488.986 481.705 C 494.084 457.313 498.451 435.829 503.184 412.163 C 542.141 417.626 580.374 423.087 619.695 428.549 C 622.972 416.898 625.884 406.705 629.161 395.053 C 588.748 389.228 550.153 383.4 508.645 377.21 C 522.845 327.693 534.86 280.36 549.787 234.12 C 554.52 218.829 565.808 204.63 577.095 192.616 C 592.024 177.322 612.413 180.599 625.157 197.71 C 630.255 204.629 635.35 212.276 641.543 218.466 C 649.553 226.111 661.566 230.115 669.576 222.47 C 674.674 217.372 677.952 205.358 675.037 196.983 C 672.49 190.065 671.034 189.338 668.122 186.061 C 653.922 170.04 634.988 164.216 614.961 163.486 Z";
+const F =
+  "M 208.65 438.837 C 198.454 469.787 187.896 500.734 173.332 529.498 C 155.126 566.272 125.635 592.489 83.763 600.861 C 59.005 605.594 34.248 603.411 13.494 587.391 C 7.305 582.657 0.386 574.282 0.021 567.363 C -0.344 559.353 4.028 548.795 9.852 543.697 C 13.856 540.42 26.238 542.971 31.698 546.974 C 39.343 552.437 44.076 561.904 49.904 569.914 C 62.647 587.755 81.215 589.938 97.962 575.739 C 118.354 558.262 128.912 534.596 135.466 509.838 C 149.301 458.135 160.588 405.343 172.967 353.275 C 173.697 351.092 172.967 348.542 172.967 344.173 C 134.737 338.349 96.506 332.521 56.82 326.332 C 58.276 315.045 59.735 305.216 61.191 292.473 C 100.513 297.933 139.835 303.395 180.977 309.22 C 186.44 286.645 191.535 264.435 197.363 240.408 C 155.49 233.853 114.713 227.664 72.114 221.11 C 73.57 209.458 75.026 198.535 76.482 186.883 C 119.446 193.073 161.315 199.262 204.643 205.454 C 208.285 192.711 211.198 181.059 214.475 169.407 C 226.489 129.72 237.414 89.672 262.171 55.445 C 287.294 20.856 319.335 -1.718 364.119 0.103 C 384.143 0.832 403.076 6.657 417.276 22.677 C 420.188 25.954 421.644 26.681 424.195 33.6 C 427.107 41.975 423.83 53.989 418.732 59.087 C 410.722 66.732 398.708 62.729 390.698 55.08 C 384.508 48.891 379.41 41.245 374.312 34.326 C 361.569 17.214 341.18 13.937 326.251 29.231 C 314.966 41.245 303.679 55.445 298.946 70.736 C 284.016 116.977 272.003 164.312 257.803 213.826 C 299.307 220.016 337.903 225.843 378.319 231.668 C 375.042 243.32 372.129 253.513 368.852 265.165 C 329.528 259.702 291.3 254.242 252.34 248.78 C 247.607 272.446 243.239 293.929 238.141 318.322 C 279.283 324.511 320.426 330.338 363.39 336.893 C 360.113 348.18 357.2 359.102 353.558 370.752 C 312.416 364.927 272.364 359.102 231.222 352.913 C 224.306 382.039 218.116 410.803 208.65 438.837 Z";
+const CLOUD_BG =
+  "M 269.158 0.003 C 333.987 0.39 390.353 39.244 415.773 95.308 L 416.935 95.308 C 482.732 95.308 536.11 148.647 536.11 214.444 C 536.11 280.24 482.772 333.578 416.975 333.579 L 119.135 333.579 C 53.338 333.578 0 280.24 0 214.444 C 0 148.647 53.379 95.308 119.175 95.308 L 120.426 95.308 C 145.978 39.012 202.853 -0.392 269.158 0.003 Z";
+const CLOUD_RING =
+  "M 416.975 333.579 C 482.772 333.578 536.11 280.24 536.11 214.444 C 536.11 148.647 482.732 95.308 416.935 95.308 L 415.773 95.308 C 390.353 39.244 333.987 0.39 269.158 0.003 C 202.853 -0.392 145.978 39.012 120.426 95.308 L 119.175 95.308 C 53.379 95.308 0 148.647 0 214.444 C 0 280.24 53.338 333.578 119.135 333.579 L 416.975 333.579 Z M 489.744 214.444 C 489.744 254.633 457.165 287.212 416.975 287.213 L 119.135 287.213 C 78.946 287.212 46.366 254.633 46.366 214.444 L 46.389 212.567 C 47.385 173.264 79.594 141.675 119.175 141.675 L 150.3 141.675 L 162.646 114.472 C 180.965 74.113 221.644 46.088 268.882 46.369 C 314.993 46.644 355.339 74.301 373.545 114.454 L 385.886 141.675 L 416.935 141.675 C 457.145 141.675 489.744 174.275 489.744 214.444 Z";
+
+export function FocMark({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 1000 896.787" className={className} role="img" aria-label="Filecoin Onchain Cloud">
+      <defs>
+        <linearGradient id="foc-cloud-gradient" x1="0" y1="0" x2="1" y2="0.9" gradientUnits="objectBoundingBox">
+          <stop offset="0" stopColor="#39c1cb" />
+          <stop offset="1" stopColor="#006fec" />
+        </linearGradient>
+      </defs>
+      <path d={CIRCLE} fill="#0090ff" fillRule="evenodd" />
+      <path d={F} fill="#ffffff" fillRule="evenodd" transform="translate(250.479 163.384)" />
+      <g transform="translate(463.89 561.087)">
+        <path d={CLOUD_BG} fill="#ffffff" fillRule="nonzero" />
+        <path d={CLOUD_RING} fill="url(#foc-cloud-gradient)" fillRule="nonzero" />
+      </g>
+    </svg>
+  );
+}
@@ -0,0 +1,49 @@
+import { Link } from "react-router-dom";
+import { NameLogo } from "./NameLogo";
+
+export function Footer() {
+  return (
+    <footer className="border-t bg-secondary/50">
+      <div className="mx-auto flex max-w-7xl flex-col gap-8 px-6 py-12 sm:flex-row sm:items-center sm:justify-between lg:px-8">
+        <NameLogo />
+
+        <nav
+          className="flex flex-wrap items-center gap-x-8 gap-y-2 text-sm tracking-wide text-muted-foreground"
+          aria-label="Footer"
+        >
+          <Link to="/documentation" className="transition-colors hover:text-foreground">
+            Docs
+          </Link>
+          <a
+            href="https://status.filecoin.cloud"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="transition-colors hover:text-foreground"
+          >
+            Status
+          </a>
+          <a
+            href="https://github.com/FilOzone/pdp-explorer"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="transition-colors hover:text-foreground"
+          >
+            GitHub
+          </a>
+        </nav>
+
+        <p className="text-sm text-muted-foreground">
+          Built by{" "}
+          <a
+            href="https://github.com/FilOzone"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary transition-colors hover:text-primary-hover hover:underline"
+          >
+            FilOz
+          </a>
+        </p>
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,100 @@
+import { Menu, X } from "lucide-react";
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { NetworkSelector } from "@/components/shared/NetworkSelector";
+import { useNetwork } from "@/contexts/NetworkContext";
+import { cn } from "@/lib/utils";
+import { NameLogo } from "./NameLogo";
+
+export function Header() {
+  const { network } = useNetwork();
+  const location = useLocation();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const navItems = [
+    { label: "Providers", to: `/${network}/providers` },
+    { label: "Datasets", to: `/${network}/datasets` },
+    { label: "Services", to: `/${network}/services` },
+    { label: "Docs", to: "/documentation" },
+    { label: "Gas Calculator", to: "/gas-calculator" },
+  ];
+
+  const isActive = (to: string) => location.pathname === to || location.pathname.startsWith(`${to}/`);
+
+  const desktopLinkClass = (active: boolean) =>
+    cn(
+      "text-[15px] tracking-wide transition-colors",
+      active ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground",
+    );
+
+  const mobileLinkClass = (active: boolean) =>
+    cn(
+      "rounded-md p-2 text-sm tracking-wide transition-colors",
+      active
+        ? "bg-secondary font-medium text-foreground"
+        : "text-muted-foreground hover:bg-secondary hover:text-foreground",
+    );
+
+  const closeMobileMenu = () => setMobileMenuOpen(false);
+
+  return (
+    <header className="sticky top-0 z-30 border-b bg-background/95 backdrop-blur">
+      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6 lg:h-20 lg:px-8">
+        <Link to="/" onClick={closeMobileMenu}>
+          <NameLogo />
+        </Link>
+
+        <nav className="hidden items-center gap-8 lg:flex" aria-label="Main">
+          {navItems.map((item) => (
+            <Link key={item.to} to={item.to} className={desktopLinkClass(isActive(item.to))}>
+              {item.label}
+            </Link>
+          ))}
+          <a
+            href="https://status.filecoin.cloud"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={desktopLinkClass(false)}
+            aria-label="Filecoin Cloud Status"
+          >
+            Status
+          </a>
+          <NetworkSelector />
+        </nav>
+
+        <button
+          type="button"
+          className="rounded-md p-2 text-muted-foreground transition-colors hover:bg-secondary lg:hidden"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          aria-label="Toggle menu"
+        >
+          {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+        </button>
+      </div>
+
+      {mobileMenuOpen && (
+        <nav className="border-t px-6 py-4 lg:hidden" aria-label="Main">
+          <div className="flex flex-col gap-1">
+            {navItems.map((item) => (
+              <Link key={item.to} to={item.to} className={mobileLinkClass(isActive(item.to))} onClick={closeMobileMenu}>
+                {item.label}
+              </Link>
+            ))}
+            <a
+              href="https://status.filecoin.cloud"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={mobileLinkClass(false)}
+              aria-label="Filecoin Cloud Status"
+            >
+              Status
+            </a>
+            <div className="pt-3">
+              <NetworkSelector />
+            </div>
+          </div>
+        </nav>
+      )}
+    </header>
+  );
+}
@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import { Footer } from "@/components/layout/Footer";
+import { Header } from "@/components/layout/Header";
+
+export function Layout() {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  );
+}
@@ -0,0 +1,10 @@
+import { FocMark } from "./FocMark";
+
+export function NameLogo() {
+  return (
+    <span className="flex items-center gap-1">
+      <FocMark className="h-8 w-auto" />
+      <span className="font-display text-[17px] font-bold tracking-normal">PDP Explorer</span>
+    </span>
+  );
+}