From 660888f53329bd182d0a8c3c62399d8141227675 Mon Sep 17 00:00:00 2001
From: Anton Sauchyk <antonsauchyk@gmail.com>
Date: Mon, 25 May 2026 11:59:12 +0200
Subject: [PATCH 1/8] SEC-359: Replace compare app with server-rendered Grafana
 API overview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Home page rewritten as server-rendered RPC provider overview via Grafana Cloud Prometheus API; ISR revalidate=60
- Streaming SSR: per-ChainCard + Headline + ChainTOC <Suspense> boundaries so cards stream as their PromQL resolves
- Bullet bars: p50/p95/p99 layered horizontal bars per provider, leader emerald, others slate
- Inline-SVG 24h sparkline per provider row, no chart library
- Regional heatmap per chain: provider × region p95 grid, HSL-tinted from chain-wide min/max
- Headline strip: fastest-right-now, most-p95-wins, tail-latency leader across all chains
- Mini-sparkline TOC: 4×2 chain grid with leader trend + anchor jumps
- lib/grafana.js: runPromQuery + runPromRangeQuery
- lib/chain-data.js: React.cache-wrapped per-chain fetcher, parallel queries, partial-data tolerant; TOC/Headline/Cards share results
- lib/queries.js: providerByRegionQuery(chain, q) for any quantile + providerTrendQuery for range data
- Route deletions: compare-single/, compare-double/, injection-start/, injection-result-double/ — all hit the backend's /scenarios/* SSRF surface; legacy URLs 301 to / in next.config.js
- next.config.js: dropped wide-open /api/* CORS; CSP with frame-ancestors 'none', HSTS, nosniff, Referrer-Policy
- store/store.js emptied; .env.sample drops NEXT_PUBLIC_BACKEND_APP_URL and adds GRAFANA_API_TOKEN
- Dead components removed: Bento, Faq, Performance, ProtocolIcon (+ SVGs), ResultCard, orphaned icons
---
 .env.sample                                  |  11 +-
 next.config.js                               |  43 +-
 package-lock.json                            |   7 +
 package.json                                 |   1 +
 src/app/compare-double/page.js               | 401 -------------------
 src/app/compare-single/page.js               | 183 ---------
 src/app/injection-result-double/page.js      | 284 -------------
 src/app/injection-start/page.js              |  95 -----
 src/app/page.js                              | 287 +++----------
 src/app/store/store.js                       | 178 +-------
 src/components/Bento/Bento.js                | 114 ------
 src/components/Chain/BulletBar.js            |  22 +
 src/components/Chain/ChainCard.js            | 104 +++++
 src/components/Chain/ChainCardSkeleton.js    |  25 ++
 src/components/Chain/RegionHeatmap.js        |  68 ++++
 src/components/Chain/Sparkline.js            |  43 ++
 src/components/ChainTOC.js                   |  54 +++
 src/components/ChainTOCSkeleton.js           |  19 +
 src/components/Faq/FaqAccordion.js           |  70 ----
 src/components/Faq/FaqBasic.js               |  31 --
 src/components/Faq/post.mdx                  |  11 -
 src/components/Header/Header.js              |   6 -
 src/components/Headline.js                   |  73 ++++
 src/components/HeadlineSkeleton.js           |   7 +
 src/components/Icons/BarChartIcon.js         |  22 -
 src/components/Icons/Customization.js        |  22 -
 src/components/Icons/ExplainResultsIcon.js   |  21 -
 src/components/Icons/GrafanaIcon.js          |  21 -
 src/components/Icons/Profiling.js            |  22 -
 src/components/Performance/Compare.js        |  54 ---
 src/components/Performance/Preformance.js    |  50 ---
 src/components/ProtocolIcon/ProtocolIcon.js  | 129 ------
 src/components/ProtocolIcon/aptos.svg        |   1 -
 src/components/ProtocolIcon/arbitrum.svg     |   1 -
 src/components/ProtocolIcon/aurora.svg       |   1 -
 src/components/ProtocolIcon/avalanche.svg    |   1 -
 src/components/ProtocolIcon/base.svg         |   1 -
 src/components/ProtocolIcon/bitcoin.svg      |   1 -
 src/components/ProtocolIcon/bnb.svg          |   1 -
 src/components/ProtocolIcon/cronos.svg       |   1 -
 src/components/ProtocolIcon/ethereum.svg     |   1 -
 src/components/ProtocolIcon/fantom.svg       |   1 -
 src/components/ProtocolIcon/filecoin.svg     |   1 -
 src/components/ProtocolIcon/fuse.svg         |   1 -
 src/components/ProtocolIcon/gnosis.svg       |   1 -
 src/components/ProtocolIcon/harmony.svg      |   1 -
 src/components/ProtocolIcon/near.svg         |   1 -
 src/components/ProtocolIcon/optimism.svg     |   1 -
 src/components/ProtocolIcon/polygonPOS.svg   |   1 -
 src/components/ProtocolIcon/polygonZkEvm.svg |   1 -
 src/components/ProtocolIcon/ronin.svg        |   1 -
 src/components/ProtocolIcon/scroll.svg       |   1 -
 src/components/ProtocolIcon/solana.svg       |   1 -
 src/components/ProtocolIcon/starknet.svg     |   1 -
 src/components/ProtocolIcon/tezos.svg        |   1 -
 src/components/ProtocolIcon/zkSync.svg       |   1 -
 src/components/ResultCard/ResultCard.js      | 161 --------
 src/lib/chain-data.js                        | 126 ++++++
 src/lib/format.js                            |  15 +
 src/lib/grafana.js                           |  45 +++
 src/lib/queries.js                           |  50 +++
 61 files changed, 745 insertions(+), 2154 deletions(-)
 delete mode 100644 src/app/compare-double/page.js
 delete mode 100644 src/app/compare-single/page.js
 delete mode 100644 src/app/injection-result-double/page.js
 delete mode 100644 src/app/injection-start/page.js
 delete mode 100644 src/components/Bento/Bento.js
 create mode 100644 src/components/Chain/BulletBar.js
 create mode 100644 src/components/Chain/ChainCard.js
 create mode 100644 src/components/Chain/ChainCardSkeleton.js
 create mode 100644 src/components/Chain/RegionHeatmap.js
 create mode 100644 src/components/Chain/Sparkline.js
 create mode 100644 src/components/ChainTOC.js
 create mode 100644 src/components/ChainTOCSkeleton.js
 delete mode 100644 src/components/Faq/FaqAccordion.js
 delete mode 100644 src/components/Faq/FaqBasic.js
 delete mode 100644 src/components/Faq/post.mdx
 create mode 100644 src/components/Headline.js
 create mode 100644 src/components/HeadlineSkeleton.js
 delete mode 100644 src/components/Icons/BarChartIcon.js
 delete mode 100644 src/components/Icons/Customization.js
 delete mode 100644 src/components/Icons/ExplainResultsIcon.js
 delete mode 100644 src/components/Icons/GrafanaIcon.js
 delete mode 100644 src/components/Icons/Profiling.js
 delete mode 100644 src/components/Performance/Compare.js
 delete mode 100644 src/components/Performance/Preformance.js
 delete mode 100644 src/components/ProtocolIcon/ProtocolIcon.js
 delete mode 100644 src/components/ProtocolIcon/aptos.svg
 delete mode 100644 src/components/ProtocolIcon/arbitrum.svg
 delete mode 100644 src/components/ProtocolIcon/aurora.svg
 delete mode 100644 src/components/ProtocolIcon/avalanche.svg
 delete mode 100644 src/components/ProtocolIcon/base.svg
 delete mode 100644 src/components/ProtocolIcon/bitcoin.svg
 delete mode 100644 src/components/ProtocolIcon/bnb.svg
 delete mode 100644 src/components/ProtocolIcon/cronos.svg
 delete mode 100644 src/components/ProtocolIcon/ethereum.svg
 delete mode 100644 src/components/ProtocolIcon/fantom.svg
 delete mode 100644 src/components/ProtocolIcon/filecoin.svg
 delete mode 100644 src/components/ProtocolIcon/fuse.svg
 delete mode 100644 src/components/ProtocolIcon/gnosis.svg
 delete mode 100644 src/components/ProtocolIcon/harmony.svg
 delete mode 100644 src/components/ProtocolIcon/near.svg
 delete mode 100644 src/components/ProtocolIcon/optimism.svg
 delete mode 100644 src/components/ProtocolIcon/polygonPOS.svg
 delete mode 100644 src/components/ProtocolIcon/polygonZkEvm.svg
 delete mode 100644 src/components/ProtocolIcon/ronin.svg
 delete mode 100644 src/components/ProtocolIcon/scroll.svg
 delete mode 100644 src/components/ProtocolIcon/solana.svg
 delete mode 100644 src/components/ProtocolIcon/starknet.svg
 delete mode 100644 src/components/ProtocolIcon/tezos.svg
 delete mode 100644 src/components/ProtocolIcon/zkSync.svg
 delete mode 100644 src/components/ResultCard/ResultCard.js
 create mode 100644 src/lib/chain-data.js
 create mode 100644 src/lib/format.js
 create mode 100644 src/lib/grafana.js
 create mode 100644 src/lib/queries.js

diff --git a/.env.sample b/.env.sample
index 28af456..1828737 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1,5 +1,8 @@
-# requires full url
-NEXT_PUBLIC_BACKEND_APP_URL = 'http://0.0.0.0:8000/api/...'
+# client app public URL (used in og:image and og:url metadata)
+NEXT_PUBLIC_CLIENT_DOMAIN =
 
-# client app public URL
-NEXT_PUBLIC_CLIENT_DOMAIN = 
\ No newline at end of file
+# Grafana Cloud service account token, Viewer role on chainstack.grafana.net.
+# Server-side only — never exposed to the client bundle. Create at:
+# chainstack.grafana.net → Administration → Service accounts → Add token.
+# Set this in .env.local for local dev and in Vercel project env vars for deploys.
+GRAFANA_API_TOKEN =
diff --git a/next.config.js b/next.config.js
index 9099da9..af67520 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,32 +1,39 @@
 /** @type {import('next').NextConfig} */
+const GRAFANA_DASHBOARD_URL =
+  'https://chainstack.grafana.net/public-dashboards/65c0fcb02f994faf845d4ec095771bd0?orgId=1';
+
+const cspDirectives = [
+  "default-src 'self'",
+  "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.segment.com https://www.googletagmanager.com https://www.google-analytics.com",
+  "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
+  "font-src 'self' https://fonts.gstatic.com data:",
+  "img-src 'self' data: https:",
+  "frame-src https://chainstack.grafana.net",
+  "connect-src 'self' https://api.segment.io https://*.segment.io https://www.google-analytics.com",
+  "frame-ancestors 'none'",
+  "base-uri 'self'",
+  "form-action 'self'",
+].join('; ');
+
 const nextConfig = {
   async headers() {
     return [
       {
-        source: '/api/:path*',
+        source: '/(.*)',
         headers: [
-          { key: 'Access-Control-Allow-Credentials', value: 'true' },
-          { key: 'Access-Control-Allow-Origin', value: '*' },
-          {
-            key: 'Access-Control-Allow-Methods',
-            value: 'GET,DELETE,PATCH,POST,PUT',
-          },
-          {
-            key: 'Access-Control-Allow-Headers',
-            value:
-              'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
-          },
+          { key: 'Content-Security-Policy', value: cspDirectives },
+          { key: 'X-Content-Type-Options', value: 'nosniff' },
+          { key: 'Referrer-Policy', value: 'no-referrer-when-downgrade' },
+          { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
         ],
       },
     ];
   },
   async redirects() {
     return [
-      {
-        source: '/dashboard',
-        destination: 'https://chainstack.grafana.net/public-dashboards/65c0fcb02f994faf845d4ec095771bd0?orgId=1',
-        permanent: true
-      }
+      { source: '/compare-single', destination: '/', permanent: true },
+      { source: '/compare-double', destination: '/', permanent: true },
+      { source: '/dashboard', destination: GRAFANA_DASHBOARD_URL, permanent: true },
     ];
   },
   reactStrictMode: false,
@@ -39,4 +46,4 @@ const withMDX = require('@next/mdx')({
   },
 });
 
-module.exports = withMDX(nextConfig);
\ No newline at end of file
+module.exports = withMDX(nextConfig);
diff --git a/package-lock.json b/package-lock.json
index c1e6d77..b315b0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "react-dom": "^18",
         "react-google-charts": "^4.0.1",
         "react-type-animation": "^3.2.0",
+        "server-only": "^0.0.1",
         "simpler-state": "^1.2.1"
       },
       "devDependencies": {
@@ -6741,6 +6742,12 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/server-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
+      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
diff --git a/package.json b/package.json
index f1d4879..a4eed98 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react-dom": "^18",
     "react-google-charts": "^4.0.1",
     "react-type-animation": "^3.2.0",
+    "server-only": "^0.0.1",
     "simpler-state": "^1.2.1"
   },
   "devDependencies": {
diff --git a/src/app/compare-double/page.js b/src/app/compare-double/page.js
deleted file mode 100644
index 64efc4a..0000000
--- a/src/app/compare-double/page.js
+++ /dev/null
@@ -1,401 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-
-import Header from '@/components/Header/Header';
-import ResultCard from '@/components/ResultCard/ResultCard';
-import ExplainResultsIcon from '../../components/Icons/ExplainResultsIcon';
-
-import { CodeIcon, ShareIcon } from '@iconicicons/react';
-import { Button, Loading, Badge } from '@lemonsqueezy/wedges';
-import { ClipboardIcon, CheckIcon, PlusIcon } from '@iconicicons/react';
-import { Chart } from 'react-google-charts';
-import Link from 'next/link';
-
-import {
-  NODE_ENDPOINT,
-  NODE_ENDPOINT_2,
-  SET_NODE_ENDPOINT,
-  SET_NODE_ENDPOINT_2,
-  METHODS,
-  METHODS_2,
-  SET_METHOD_RESPONSE_DATA,
-  SET_METHOD_RESPONSE_DATA_2,
-  GET_METHODS_NAMES,
-} from '../store/store';
-
-import { useSearchParams } from 'next/navigation';
-
-const Result = () => {
-  const searchParams = useSearchParams();
-  let url1 = searchParams.get('url1');
-  let url2 = searchParams.get('url2');
-
-  const nodeEndpoint = url1 ? url1 : NODE_ENDPOINT.use();
-  const nodeEndpoint2 = url2 ? url2 : NODE_ENDPOINT_2.use();
-  const methods = METHODS.use();
-  const methods2 = METHODS_2.use();
-  const methodsNames = GET_METHODS_NAMES.use();
-
-  const [copiedToClipboard, setCopiedToClipboard] = useState(false);
-  const [copiedToClipboard2, setCopiedToClipboard2] = useState(false);
-  const [compareLinkCopiedToClipboard, setCompareLinkCopiedToClipboard] =
-    useState(false);
-  const [chartData, setChartData] = useState(null);
-  const [chartData2, setChartData2] = useState(null);
-  const [explainIsDisabled, setExplainIsDisabled] = useState(false);
-
-  const downloadJson = () => {
-    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify([
-        {
-          endpoint: nodeEndpoint,
-          results: methods.map((method) => {
-            return {
-              method: method.method_used,
-              results: method.data,
-            };
-          }),
-        },
-        {
-          endpoint: nodeEndpoint2,
-          results: methods2.map((method) => {
-            return {
-              method: method.method_used,
-              results: method.data,
-            };
-          }),
-        },
-      ])
-    )}`;
-    const link = document.createElement('a');
-    link.href = jsonString;
-    link.download = 'data.json';
-
-    link.click();
-  };
-
-  useEffect(() => {
-    if (
-      methods.every((item) => Object.keys(item.data).length != 0) === true &&
-      methods2.every((item) => Object.keys(item.data).length != 0) === true
-    ) {
-      let chart = [methods[1], methods2[1]];
-      2;
-      let chart2 = [methods[0], methods2[0]];
-
-      setChartData([
-        [
-          '',
-          ...chart.map((item, index) => {
-            return `Endpoint ${index + 1}`;
-          }),
-        ],
-        [
-          '',
-          ...chart.map((item) => {
-            if (
-              Object.keys(item.data).length != 0 &&
-              item.data.hasOwnProperty('error') === false
-            ) {
-              return +item.data.blocks_per_seconds.toFixed(2);
-            } else {
-              return 0;
-            }
-          }),
-        ],
-      ]);
-
-      setChartData2([
-        [
-          '',
-          ...chart2.map((item, index) => {
-            return `Endpoint ${index + 1}`;
-          }),
-        ],
-        [
-          '',
-          ...chart2.map((item) => {
-            if (
-              Object.keys(item.data).length != 0 &&
-              item.data.hasOwnProperty('error') === false
-            ) {
-              return +item.data.blocks_per_seconds.toFixed(2);
-            } else {
-              return 0;
-            }
-          }),
-        ],
-      ]);
-    }
-  }, [methods, methods2]);
-
-  let grid = 'grid grid-cols-2 gap-10';
-
-  return (
-    <div className="lg:m-auto lg:max-w-6xl ">
-      <Header />
-
-      {/* URLS */}
-      <div className={grid + ' mt-8'}>
-        {[
-          {
-            endpoint: nodeEndpoint,
-            copied: copiedToClipboard,
-            clip(value) {
-              setCopiedToClipboard(value);
-            },
-          },
-          {
-            endpoint: nodeEndpoint2,
-            copied: copiedToClipboard2,
-            clip(value) {
-              setCopiedToClipboard2(value);
-            },
-          },
-        ].map((item, index) => {
-          return (
-            <div
-              key={index}
-              className="mb-4 px-4 border-gray-800 border-r border-l flex items-center"
-            >
-              <div className="mr-2 font-mono">[{index + 1}]</div>
-              <div className="w-full truncate mr-4 font-mono">
-                {item.endpoint}
-              </div>
-              <Button
-                before={
-                  item.copied === true ? (
-                    <CheckIcon style={{ color: 'rgba(52, 211, 153, 1)' }} />
-                  ) : (
-                    <ClipboardIcon />
-                  )
-                }
-                variant="transparent"
-                onClick={() => {
-                  navigator.clipboard.writeText(item.endpoint);
-                  item.clip(true);
-                  setTimeout(() => {
-                    item.clip(false);
-                  }, 1000);
-                }}
-              />
-            </div>
-          );
-        })}
-      </div>
-      {/* URLS */}
-
-      {/* eth_getBlockByNumber */}
-      <div className={grid}>
-        {[
-          {
-            config: methods[0],
-            endpoint: nodeEndpoint,
-            setResponse: SET_METHOD_RESPONSE_DATA,
-          },
-          {
-            config: methods2[0],
-            endpoint: nodeEndpoint2,
-            setResponse: SET_METHOD_RESPONSE_DATA_2,
-          },
-        ].map((item, index) => {
-          return (
-            <ResultCard
-              key={index}
-              endpoint={item.endpoint}
-              config={item.config}
-              setMethodResponseData={item.setResponse}
-            />
-          );
-        })}
-      </div>
-      {/* eth_getBlockByNumber */}
-
-      {/* eth_call */}
-      <div className={grid}>
-        {[
-          {
-            config: { ...methods[1] },
-            endpoint: nodeEndpoint,
-            setResponse: SET_METHOD_RESPONSE_DATA,
-          },
-          {
-            config: { ...methods2[1] },
-            endpoint: nodeEndpoint2,
-            setResponse: SET_METHOD_RESPONSE_DATA_2,
-          },
-        ].map((item, index) => {
-          return (
-            <ResultCard
-              key={index}
-              endpoint={item.endpoint}
-              config={item.config}
-              setMethodResponseData={item.setResponse}
-            />
-          );
-        })}
-      </div>
-      {/* eth_call */}
-
-      <main className="m-auto mt-8">
-        <h2 className="text-5xl font-bold text-accent text-left mt-20 mb-10">
-          Compare results
-        </h2>
-
-        <div className="custom-bento-card rounded-xl border-2 px-6 py-2 mt-4">
-          <div className="flex flex-row my-4 items-center">
-            <Badge before={<CodeIcon />} color="blue" stroke className="">
-              {methodsNames[1]}
-            </Badge>
-            <div className="text-sm ml-4">Blocks per second</div>
-          </div>
-          {!chartData ? (
-            <div
-              style={{ width: '100%', height: '200px' }}
-              className="flex justify-around items-center"
-            >
-              <Loading type="spinner" size="xxs" />
-            </div>
-          ) : (
-            <Chart
-              chartType="BarChart"
-              width="100%"
-              data={chartData}
-              options={{
-                chartArea: { width: '100%' },
-                backgroundColor: 'transparent',
-                colors: ['#0162F3', '#74ACFF', '#6100AE', '#D29AFF'],
-
-                hAxis: {
-                  // title: 'Blocks per second',
-                  titleTextStyle: { color: '#fff' },
-                  minValue: 0,
-                  textStyle: { color: '#EEF8FB' },
-                  gridlines: {
-                    color: '#333645',
-                  },
-                },
-                vAxis: {
-                  textStyle: { color: '#ff00d0' },
-                },
-                legend: {
-                  position: 'top',
-                  textStyle: { color: '#fff' },
-                },
-              }}
-            />
-          )}
-        </div>
-        <div className="custom-bento-card rounded-xl border-2 px-6 py-2 mt-4">
-          <div className="flex flex-row my-4 items-center">
-            <Badge before={<CodeIcon />} color="blue" stroke className="">
-              {methodsNames[0]}
-            </Badge>
-            <div className="text-sm ml-4">Blocks per second</div>
-          </div>
-          {!chartData2 ? (
-            <div
-              style={{ width: '100%', height: '200px' }}
-              className="flex justify-around items-center"
-            >
-              <Loading type="spinner" size="xxs" />
-            </div>
-          ) : (
-            <Chart
-              chartType="BarChart"
-              width="100%"
-              data={chartData2}
-              options={{
-                chartArea: { width: '100%' },
-                backgroundColor: 'transparent',
-                colors: ['#0162F3', '#74ACFF', '#6100AE', '#D29AFF'],
-                // colors: ['#6100AE', '#D29AFF'],
-
-                hAxis: {
-                  // title: 'Blocks per second',
-                  titleTextStyle: { color: '#fff' },
-                  minValue: 0,
-                  textStyle: { color: '#EEF8FB' },
-                  gridlines: {
-                    color: '#333645',
-                  },
-                },
-                vAxis: {
-                  textStyle: { color: '#ff00d0' },
-                },
-                legend: {
-                  position: 'top',
-                  textStyle: { color: '#fff' },
-                },
-              }}
-            />
-          )}
-        </div>
-
-        <div className="flex flex-col sm:flex-row gap-4 flex-grow my-10 ">
-          <Button
-            className="w-full sm:w-[calc(33.3%-8px)]"
-            before={<ExplainResultsIcon />}
-            variant="tertiary"
-            disabled={explainIsDisabled}
-            onClick={downloadJson}
-          >
-            Download JSON
-          </Button>
-          <Button
-            className="w-full sm:w-[calc(33.3%-8px)]"
-            before={
-              compareLinkCopiedToClipboard === true ? (
-                <CheckIcon style={{ color: 'rgba(52, 211, 153, 1)' }} />
-              ) : (
-                <ClipboardIcon />
-              )
-            }
-            variant="tertiary"
-            disabled={explainIsDisabled}
-            onClick={() => {
-              navigator.clipboard.writeText(
-                `https://compare.chainstack.com/compare-double?url1=${nodeEndpoint}&url2=${nodeEndpoint2}`
-              );
-              setCompareLinkCopiedToClipboard(true);
-              setTimeout(() => {
-                setCompareLinkCopiedToClipboard(false);
-              }, 1000);
-            }}
-          >
-            Copy link
-          </Button>
-          <Link
-            className="w-full sm:w-[calc(33.3%-8px)]"
-            href={{
-              pathname: '/',
-            }}
-          >
-            <Button
-              className="w-full"
-              before={<PlusIcon />}
-              variant="tertiary"
-              disabled={explainIsDisabled}
-            >
-              New test
-            </Button>
-          </Link>
-        </div>
-
-        <a
-          href="https://docs.chainstack.com/docs/chainstack-compare-rpc-node-performance"
-          className="text-blue-500 hover:text-blue-700"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <p className="text-center w-full text-s mt-8 font-mono">
-            Learn how Chainstack Compare works
-            <br /> under the hood and why we built it ↗.
-          </p>
-        </a>
-      </main>
-    </div>
-  );
-};
-
-export default Result;
diff --git a/src/app/compare-single/page.js b/src/app/compare-single/page.js
deleted file mode 100644
index 1f6b8d8..0000000
--- a/src/app/compare-single/page.js
+++ /dev/null
@@ -1,183 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-
-import Header from '@/components/Header/Header';
-import ResultCard from '@/components/ResultCard/ResultCard';
-import ExplainResultsIcon from '../../components/Icons/ExplainResultsIcon';
-
-import { Button, Loading } from '@lemonsqueezy/wedges';
-import { ClipboardIcon, CheckIcon, PlusIcon } from '@iconicicons/react';
-import { Chart } from 'react-google-charts';
-import Link from 'next/link';
-
-import {
-  NODE_ENDPOINT,
-  METHODS,
-  SET_METHOD_RESPONSE_DATA,
-} from '../store/store';
-
-const Result = () => {
-  const nodeEndpoint = NODE_ENDPOINT.use();
-  const methods = METHODS.use();
-
-  const [copiedToClipboard, setCopiedToClipboard] = useState(false);
-  const [chartData, setChartData] = useState(null);
-  const [explainIsDisabled, setExplainIsDisabled] = useState(true);
-
-  const downloadJson = () => {
-    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify(
-        methods.map((method) => {
-          return {
-            method: method.method_used,
-            results: method.data,
-          };
-        })
-      )
-    )}`;
-    const link = document.createElement('a');
-    link.href = jsonString;
-    link.download = 'data.json';
-
-    link.click();
-  };
-
-  useEffect(() => {
-    if (methods.every((item) => Object.keys(item.data).length != 0) === true) {
-      setChartData([
-        ['', ...methods.map((item) => item.method_used)],
-        [
-          '',
-          ...methods.map((item) => {
-            if (
-              Object.keys(item.data).length != 0 &&
-              item.data.hasOwnProperty('error') === false
-            ) {
-              return +item.data.blocks_per_seconds.toFixed(2);
-            } else {
-              return 0;
-            }
-          }),
-        ],
-      ]);
-      setExplainIsDisabled(false);
-    }
-  }, [methods]);
-
-  return (
-    <div className="lg:m-auto lg:max-w-6xl sm:mx-4 mx-4">
-      <Header />
-      <main className="max-w-lg m-auto">
-        <div className="mb-10 px-4 border-gray-800 border-r border-l flex items-center">
-          <div className="w-full truncate mr-4 font-mono">{nodeEndpoint}</div>
-          <Button
-            before={
-              copiedToClipboard === true ? (
-                <CheckIcon style={{ color: 'rgba(52, 211, 153, 1)' }} />
-              ) : (
-                <ClipboardIcon />
-              )
-            }
-            variant="transparent"
-            onClick={() => {
-              navigator.clipboard.writeText(nodeEndpoint);
-              setCopiedToClipboard(true);
-              setTimeout(() => {
-                setCopiedToClipboard(false);
-              }, 1000);
-            }}
-          />
-        </div>
-        {methods.map((item, index) => {
-          return (
-            <ResultCard
-              key={index}
-              endpoint={nodeEndpoint}
-              config={item}
-              setMethodResponseData={SET_METHOD_RESPONSE_DATA}
-            />
-          );
-        })}
-
-        <div className="custom-bento-card rounded-xl border-2 px-6 py-2">
-          {!chartData ? (
-            <div
-              style={{ width: '100%', height: '200px' }}
-              className="flex justify-around items-center"
-            >
-              <Loading type="spinner" size="xxs" />
-            </div>
-          ) : (
-            <Chart
-              chartType="BarChart"
-              width="100%"
-              data={chartData}
-              options={{
-                chartArea: { width: '100%' },
-                backgroundColor: 'transparent',
-                colors: ['#0BB6FF', '#0162F3', '#005C89', '#008960'],
-                hAxis: {
-                  title: 'Blocks per second',
-                  titleTextStyle: { color: '#fff' },
-                  minValue: 0,
-                  textStyle: { color: '#EEF8FB' },
-                  gridlines: {
-                    color: '#333645',
-                  },
-                },
-                vAxis: {
-                  textStyle: { color: '#ff00d0' },
-                },
-                legend: {
-                  position: 'top',
-                  textStyle: { color: '#fff' },
-                },
-              }}
-            />
-          )}
-        </div>
-
-        <div className="flex flex-col sm:flex-row gap-4 flex-grow my-8 sm:mt-4">
-          <Button
-            className="w-full sm:w-[calc(50%-8px)]"
-            before={<ExplainResultsIcon />}
-            variant="tertiary"
-            disabled={explainIsDisabled}
-            onClick={downloadJson}
-          >
-            Download JSON
-          </Button>
-          <Link
-            className="w-full sm:w-[calc(50%-8px)]"
-            href={{
-              pathname: '/',
-            }}
-          >
-            <Button
-              className="w-full"
-              before={<PlusIcon />}
-              variant="tertiary"
-              disabled={explainIsDisabled}
-            >
-              New test
-            </Button>
-          </Link>
-        </div>
-
-        <a
-          href="https://docs.chainstack.com/docs/chainstack-compare-rpc-node-performance"
-          className="text-blue-500 hover:text-blue-700"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <p className="text-center w-full text-s mt-8 font-mono">
-            Learn how Chainstack Compare works
-            <br /> under the hood and why we built it ↗.
-          </p>
-        </a>
-      </main>
-    </div>
-  );
-};
-
-export default Result;
diff --git a/src/app/injection-result-double/page.js b/src/app/injection-result-double/page.js
deleted file mode 100644
index 8db746d..0000000
--- a/src/app/injection-result-double/page.js
+++ /dev/null
@@ -1,284 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import ResultCard from '@/components/ResultCard/ResultCard';
-import { Button } from '@lemonsqueezy/wedges';
-import { ClipboardIcon, CheckIcon } from '@iconicicons/react';
-
-import Link from 'next/link';
-import Script from 'next/script';
-
-import {
-  NODE_ENDPOINT,
-  NODE_ENDPOINT_2,
-  METHODS,
-  METHODS_2,
-  SET_METHOD_RESPONSE_DATA,
-  SET_METHOD_RESPONSE_DATA_2,
-  GET_METHODS_NAMES,
-} from '../store/store';
-
-const Result = () => {
-  const nodeEndpoint = NODE_ENDPOINT.use();
-  const nodeEndpoint2 = NODE_ENDPOINT_2.use();
-  const methods = METHODS.use();
-  const methods2 = METHODS_2.use();
-  const methodsNames = GET_METHODS_NAMES.use();
-
-  const [copiedToClipboard, setCopiedToClipboard] = useState(false);
-  const [copiedToClipboard2, setCopiedToClipboard2] = useState(false);
-  const [chartData, setChartData] = useState(null);
-  const [chartData2, setChartData2] = useState(null);
-  const [explainIsDisabled, setExplainIsDisabled] = useState(false);
-
-  const downloadJson = () => {
-    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify([
-        {
-          endpoint: nodeEndpoint,
-          results: methods.map((method) => {
-            return {
-              method: method.method_used,
-              results: method.data,
-            };
-          }),
-        },
-        {
-          endpoint: nodeEndpoint2,
-          results: methods2.map((method) => {
-            return {
-              method: method.method_used,
-              results: method.data,
-            };
-          }),
-        },
-      ])
-    )}`;
-    const link = document.createElement('a');
-    link.href = jsonString;
-    link.download = 'data.json';
-
-    link.click();
-  };
-
-  useEffect(() => {
-    if (
-      methods.every((item) => Object.keys(item.data).length != 0) === true &&
-      methods2.every((item) => Object.keys(item.data).length != 0) === true
-    ) {
-      let chart = [methods[1], methods2[1]];
-      let chart2 = [methods[0], methods2[0]];
-
-      setChartData([
-        [
-          '',
-          ...chart.map((item, index) => {
-            return `Endpoint ${index + 1}`;
-          }),
-        ],
-        [
-          '',
-          ...chart.map((item) => {
-            if (
-              Object.keys(item.data).length != 0 &&
-              item.data.hasOwnProperty('error') === false
-            ) {
-              return +item.data.blocks_per_seconds.toFixed(2);
-            } else {
-              return 0;
-            }
-          }),
-        ],
-      ]);
-
-      setChartData2([
-        [
-          '',
-          ...chart2.map((item, index) => {
-            return `Endpoint ${index + 1}`;
-          }),
-        ],
-        [
-          '',
-          ...chart2.map((item) => {
-            if (
-              Object.keys(item.data).length != 0 &&
-              item.data.hasOwnProperty('error') === false
-            ) {
-              return +item.data.blocks_per_seconds.toFixed(2);
-            } else {
-              return 0;
-            }
-          }),
-        ],
-      ]);
-    }
-  }, [methods, methods2]);
-
-  let grid = 'grid grid-cols-2 gap-10';
-
-  return (
-    // <div className="lg:m-auto lg:max-w-6xl ">
-    <>
-      <div className="mx-auto max-w-[1000px]">
-        {/* URLS */}
-        <div className={grid + ' mt-8'}>
-          {[
-            {
-              endpoint: nodeEndpoint,
-              copied: copiedToClipboard,
-              clip(value) {
-                setCopiedToClipboard(value);
-              },
-            },
-            {
-              endpoint: nodeEndpoint2,
-              copied: copiedToClipboard2,
-              clip(value) {
-                setCopiedToClipboard2(value);
-              },
-            },
-          ].map((item, index) => {
-            return (
-              <div
-                key={index}
-                className="mb-4 px-4 border-gray-800 border-r border-l flex items-center"
-              >
-                <div className="mr-2 font-mono">[{index + 1}]</div>
-                <div className="w-full truncate mr-4 font-mono">
-                  {item.endpoint}
-                </div>
-                <Button
-                  before={
-                    item.copied === true ? (
-                      <CheckIcon style={{ color: 'rgba(52, 211, 153, 1)' }} />
-                    ) : (
-                      <ClipboardIcon />
-                    )
-                  }
-                  variant="transparent"
-                  onClick={() => {
-                    navigator.clipboard.writeText(item.endpoint);
-                    item.clip(true);
-                    setTimeout(() => {
-                      item.clip(false);
-                    }, 1000);
-                  }}
-                />
-              </div>
-            );
-          })}
-        </div>
-        {/* URLS */}
-
-        {/* eth_getBlockByNumber */}
-        <div className={grid}>
-          {[
-            {
-              config: methods[0],
-              endpoint: nodeEndpoint,
-              setResponse: SET_METHOD_RESPONSE_DATA,
-            },
-            {
-              config: methods2[0],
-              endpoint: nodeEndpoint2,
-              setResponse: SET_METHOD_RESPONSE_DATA_2,
-            },
-          ].map((item, index) => {
-            return (
-              <ResultCard
-                key={index}
-                endpoint={item.endpoint}
-                config={item.config}
-                setMethodResponseData={item.setResponse}
-              />
-            );
-          })}
-        </div>
-        {/* eth_getBlockByNumber */}
-
-        {/* eth_call */}
-        <div className={grid}>
-          {[
-            {
-              config: { ...methods[1] },
-              endpoint: nodeEndpoint,
-              setResponse: SET_METHOD_RESPONSE_DATA,
-            },
-            {
-              config: { ...methods2[1] },
-              endpoint: nodeEndpoint2,
-              setResponse: SET_METHOD_RESPONSE_DATA_2,
-            },
-          ].map((item, index) => {
-            return (
-              <ResultCard
-                key={index}
-                endpoint={item.endpoint}
-                config={item.config}
-                setMethodResponseData={item.setResponse}
-              />
-            );
-          })}
-        </div>
-        {/* eth_call */}
-
-        <main className="m-auto mt-8">
-          {/* <h2 className="text-5xl font-bold text-accent text-left mt-20 mb-10">
-          Full results
-        </h2> */}
-          <Link
-            className="w-full sm:w-[calc(50%-8px)]"
-            target="_blank"
-            href={{
-              pathname: '/compare-double',
-              query: { url1: nodeEndpoint, url2: nodeEndpoint2 },
-            }}
-          >
-            <Button
-              className="w-full"
-              // before={<PlusIcon />}
-              variant="primary"
-              disabled={explainIsDisabled}
-            >
-              See full results
-            </Button>
-          </Link>
-          {/* <Link
-          className="w-full sm:w-[calc(50%-8px)]"
-          href={{
-            pathname: '/injection-start',
-          }}
-        >
-          <Button
-            className="w-full"
-            before={<PlusIcon />}
-            variant="tertiary"
-            disabled={explainIsDisabled}
-          >
-            New test
-          </Button>
-        </Link> */}
-        </main>
-      </div>
-      <Script
-        id="iframe-message"
-        dangerouslySetInnerHTML={{
-          __html: `
-          window.onload = function () {
-            let h = document.body.scrollHeight;
-
-            window.parent.postMessage(
-              {
-                height: h,
-              },
-              '*'
-            );
-          }
-        `,
-        }}
-      />
-    </>
-  );
-};
-
-export default Result;
diff --git a/src/app/injection-start/page.js b/src/app/injection-start/page.js
deleted file mode 100644
index 13c24be..0000000
--- a/src/app/injection-start/page.js
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { Button, Input } from '@lemonsqueezy/wedges';
-import Link from 'next/link';
-
-import {
-  NODE_ENDPOINT,
-  NODE_ENDPOINT_2,
-  SET_NODE_ENDPOINT,
-  SET_NODE_ENDPOINT_2,
-  CLEAR_METHODS_DATA,
-} from '../store/store';
-
-export default function Home() {
-  const nodeEndpoint = NODE_ENDPOINT.use();
-  const nodeEndpoint2 = NODE_ENDPOINT_2.use();
-
-  // error state for input
-  const [input1, setInput1] = useState(false);
-  const [input2, setInput2] = useState(false);
-
-  useEffect(() => {
-    CLEAR_METHODS_DATA();
-  }, []);
-
-  let emptyInput = { border: '1px solid red' };
-
-  return (
-    <div
-      className="mx-4 my-4"
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <div>
-        <div className="flex gap-4">
-          <div className="flex-grow">
-            <Input
-              style={input1 === true ? emptyInput : {}}
-              className="fix-input-bg"
-              placeholder="Endpoint 1"
-              value={nodeEndpoint}
-              onChange={(e) => {
-                setInput1(false);
-                SET_NODE_ENDPOINT(e.target.value);
-              }}
-            />
-          </div>
-          <div className="flex-grow">
-            <Input
-              style={input2 === true ? emptyInput : {}}
-              className="flex-1 fix-input-bg"
-              placeholder="Endpoint 2"
-              value={nodeEndpoint2}
-              onChange={(e) => {
-                setInput2(false);
-                SET_NODE_ENDPOINT_2(e.target.value);
-              }}
-            />
-          </div>
-        </div>
-
-        <Link
-          href={
-            input1 === false &&
-            input2 === false &&
-            nodeEndpoint.length !== 0 &&
-            nodeEndpoint2.length !== 0
-              ? {
-                  pathname: '/injection-result-double',
-                }
-              : { pathname: 'javascript:void(0);' }
-          }
-        >
-          <Button
-            variant="primary"
-            className="fix-cta-button w-full mt-4"
-            onClick={() => {
-              if (nodeEndpoint.length === 0) {
-                setInput1(true);
-              }
-              if (nodeEndpoint2.length === 0) {
-                setInput2(true);
-              }
-            }}
-          >
-            Run test →
-          </Button>
-        </Link>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/page.js b/src/app/page.js
index 3baa3e5..3fb8eff 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,256 +1,69 @@
-'use client';
-import { useEffect } from 'react';
-import { Button, Badge, Tabs, Input } from '@lemonsqueezy/wedges';
-import Bento from '@/components/Bento/Bento';
-import FaqBasic from '@/components/Faq/FaqBasic';
-import Footer from '@/components/Footer/Footer';
+import { Suspense } from 'react';
 import Header from '@/components/Header/Header';
-import ProtocolIcon from '@/components/ProtocolIcon/ProtocolIcon';
-import Link from 'next/link';
-
-import { ColumnsIcon, StopIcon } from '@iconicicons/react';
+import Footer from '@/components/Footer/Footer';
+import Headline from '@/components/Headline';
+import HeadlineSkeleton from '@/components/HeadlineSkeleton';
+import ChainTOC from '@/components/ChainTOC';
+import ChainTOCSkeleton from '@/components/ChainTOCSkeleton';
+import ChainCard from '@/components/Chain/ChainCard';
+import ChainCardSkeleton from '@/components/Chain/ChainCardSkeleton';
+import { CHAINS } from '@/lib/queries';
 
-import {
-  NODE_ENDPOINT,
-  NODE_ENDPOINT_2,
-  SET_NODE_ENDPOINT,
-  SET_NODE_ENDPOINT_2,
-  CLEAR_METHODS_DATA,
-  SUPPORTED_NETWORKS,
-  COMPARE_MODE,
-  SET_COMPARE_MODE,
-} from './store/store';
+export const revalidate = 60;
 
 export default function Home() {
-  const nodeEndpoint = NODE_ENDPOINT.use();
-  const nodeEndpoint2 = NODE_ENDPOINT_2.use();
-  const supportedNetworks = SUPPORTED_NETWORKS.use();
-  const compareMode = COMPARE_MODE.use();
-
-useEffect(() => {
-  CLEAR_METHODS_DATA();
-
-  // Inject GA4 script
-  const script = document.createElement('script');
-  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-8R3NNPM8SV';
-  script.async = true;
-  document.head.appendChild(script);
-
-  const inlineScript = document.createElement('script');
-  inlineScript.innerHTML = `
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-    gtag('config', 'G-8R3NNPM8SV');
-  `;
-  document.head.appendChild(inlineScript);
-
-  return () => {
-    // Cleanup if necessary
-    document.head.removeChild(script);
-    document.head.removeChild(inlineScript);
-  };
-}, []);
-
   return (
-    <div className="lg:m-auto lg:max-w-6xl sm:mx-4 mx-4">
-      <Header />
+    <>
+      <div className="lg:m-auto lg:max-w-6xl sm:mx-4 mx-4">
+        <Header />
+      </div>
 
       <main>
-        <h1 className="uppercase text-center text-6xl tracking-wide mt-48 mb-4 font-black heading-gradient ">
-          Test RPC endpoint
-          <br />
-          performance
-        </h1>
-        <div className="text-base mb-10 text-gray-400 text-center">
-          Chainstack Compare runs profiles based on standard
-          <br />
-          Ethereum RPC methods that fetch blockchain data.
-        </div>
-
-        <div className="flex lg:flex-row sm:flex-col flex-col justify-between lg:items-center sm:items-center p-8 sm:p-12 lg:p-12 mb-10 justify-around">
-          {/* <div className="w-8/12"> */}
-          <div className="hidden lg:w-8/12 lg:flex sm:flex w-fit max-w-full flex-col gap-10 text-left p-12 custom-bento-card ">
-            <Tabs
-              variant="underlined"
-              defaultValue={compareMode}
-              onValueChange={(value) => SET_COMPARE_MODE(value)}
-            >
-              <Tabs.List stretch>
-                <Tabs.Trigger value="double" before={<ColumnsIcon />}>
-                  Two endpoints comparison
-                </Tabs.Trigger>
-                <Tabs.Trigger value="single" before={<StopIcon />}>
-                  Single endpoint performance
-                </Tabs.Trigger>
-              </Tabs.List>
-
-              {/* // CONTENT 1 */}
-
-              <Tabs.Content value="single">
-                <div className="mt-10">
-                  <Input
-                    required
-                    className="fix-input-bg w-full"
-                    placeholder="Your endpoint URL"
-                    value={nodeEndpoint}
-                    onChange={(e) => {
-                      SET_NODE_ENDPOINT(e.target.value);
-                    }}
-                  />
-                  <Link
-                    href={{
-                      pathname: '/compare-single',
-                    }}
-                  >
-                    <Button
-                      variant="primary"
-                      className="fix-cta-button w-full mt-4"
-                    >
-                      Run test →
-                    </Button>
-                  </Link>
-                </div>
-              </Tabs.Content>
-
-              {/* // CONTENT 2 */}
-
-              <Tabs.Content value="double">
-                <div className="flex gap-4 mt-10">
-                  <div className="flex-grow">
-                    <Input
-                      required
-                      className="fix-input-bg"
-                      placeholder="Endpoint 1"
-                      value={nodeEndpoint}
-                      onChange={(e) => {
-                        SET_NODE_ENDPOINT(e.target.value);
-                      }}
-                    />
-                  </div>
-                  <div className="flex-grow">
-                    <Input
-                      required
-                      className="flex-1 fix-input-bg"
-                      placeholder="Endpoint 2"
-                      value={nodeEndpoint2}
-                      onChange={(e) => {
-                        SET_NODE_ENDPOINT_2(e.target.value);
-                      }}
-                    />
-                  </div>
-                </div>
-
-                <Link
-                  href={{
-                    pathname: '/compare-double',
-                  }}
-                >
-                  <Button
-                    variant="primary"
-                    className="fix-cta-button w-full mt-4"
-                  >
-                    Run test →
-                  </Button>
-                </Link>
-              </Tabs.Content>
-            </Tabs>
+        <div className="lg:m-auto lg:max-w-6xl sm:mx-4 mx-4">
+          <h1 className="uppercase text-center text-5xl sm:text-6xl tracking-wide mt-16 mb-4 font-black heading-gradient">
+            RPC provider
+            <br />
+            performance overview
+          </h1>
+
+          <div className="text-base mb-10 text-gray-400 text-center">
+            Live p50 / p95 / p99 across chains, providers, and regions.
+            <br />
+            Trailing 24 hours · data refreshed every minute.
           </div>
-          {/* </div> */}
-        </div>
-        <div>
-          <h2 className="text-5xl font-bold text-accent text-left sm:text-center lg:text-center mt-40 mb-10">
-            Supported networks
-          </h2>
 
-          <div className="[&>span]:mb-2 [&>span]:mr-2 [&>span]:!bg-[#121d3a]">
-            {supportedNetworks.map((item, i) => (
-              <>
-                {item.networks.map((network, idx) => {
-                  return (
-                    <Badge
-                      key={idx}
-                      before={<ProtocolIcon protocolName={item.protocol} />}
-                    >
-                      {network}
-                    </Badge>
-                  );
-                })}
-              </>
-            ))}
+          <div className="mb-10">
+            <Suspense fallback={<HeadlineSkeleton />}>
+              <Headline />
+            </Suspense>
           </div>
-        </div>
-        <div className="grid lg:grid-cols-2 lg:grid-rows-1 sm:grid-cols-1 sm:grid-rows-2 gap-4 lg:gap-8 sm:gap-4 my-20 text-gray-400 font-mono">
-          <div>
-            <p className="mb-4">
-              Chainstack Compare is tool to measure the node performance metrics
-              that make sense.
-            </p>
 
-            <p className="mb-4">
-              The tool runs server-side on an instance maintained by Chainstack.
-            </p>
-            <div className="mb-4">
-              <p>Server-side instance specs:</p>
-              <p>2 vCPUs with 2GB of RAM</p>
-            </div>
-            <div className="mb-4">
-              <p>Contract:</p>
-              <a
-                href="https://etherscan.io/address/0x087CDFb5D353395Cff09d986295d59A0B9E15D77#code"
-                className="text-blue-500 hover:text-blue-700"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                CompareNodePerformance
-              </a>
-            </div>
+          <div className="mb-12">
+            <Suspense fallback={<ChainTOCSkeleton />}>
+              <ChainTOC />
+            </Suspense>
           </div>
 
-          <div>
-            <p className="mb-2">
-              The tool does a few calls to the exact same dummy contracts
-              deployed on a few EVM networks. The tool measures the performance
-              from three data points:
-            </p>
-
-            <ul className="list-disc list-inside mb-4">
-              <li>the number of processed blocks with the calls;</li>
-              <li>the time it takes to process the blocks with the calls;</li>
-              <li>
-                the resulting blocks-per-second metric, or the expected data
-                throughput.
-              </li>
-            </ul>
-            <p className="mb-2">
-              As you can see, all the parameters are uniform except for the one
-              you care about and feed to the tool — your node endpoint.
-            </p>
-            <p>
-              <a
-                href="https://docs.chainstack.com/docs/chainstack-compare-rpc-node-performance"
-                className="text-blue-500 hover:text-blue-700"
-                target="_blank"
-                rel="noopener noreferrer"
+          <div className="grid gap-6 mb-16">
+            {CHAINS.map((chain) => (
+              <Suspense
+                key={chain.promName}
+                fallback={<ChainCardSkeleton chain={chain} />}
               >
-                Learn how Chainstack Compare works under the hood and why we
-                built it ↗.
-              </a>
-            </p>
+                <ChainCard chain={chain} />
+              </Suspense>
+            ))}
           </div>
-        </div>
-
-        {/* FORM */}
-
-        {/* BENTO */}
-
-        <Bento />
 
-        {/* FAQ */}
-
-        <FaqBasic />
+          <p className="text-center text-gray-500 font-mono text-sm mb-16">
+            For per-method breakdowns, open any chain&apos;s Grafana dashboard.
+          </p>
+        </div>
       </main>
-      <Footer />
-    </div>
+
+      <div className="lg:m-auto lg:max-w-6xl sm:mx-4 mx-4">
+        <Footer />
+      </div>
+    </>
   );
 }
diff --git a/src/app/store/store.js b/src/app/store/store.js
index eea4d25..7404b94 100644
--- a/src/app/store/store.js
+++ b/src/app/store/store.js
@@ -1,175 +1,5 @@
 'use client';
-// state management https://simpler-state.js.org/quick-start.html
-import { entity } from 'simpler-state';
-import { produce } from 'immer';
-
-export const NODE_ENDPOINT = entity('');
-
-export const SET_NODE_ENDPOINT = (value) => {
-  NODE_ENDPOINT.set(value);
-};
-
-export const NODE_ENDPOINT_2 = entity('');
-
-export const SET_NODE_ENDPOINT_2 = (value) => {
-  NODE_ENDPOINT_2.set(value);
-};
-
-// single or double
-export const COMPARE_MODE = entity('double');
-
-export const SET_COMPARE_MODE = (value) => {
-  COMPARE_MODE.set(value);
-};
-
-export const METHODS = entity([
-  {
-    id: 0,
-    order: 1,
-    method_used: 'eth_getBlockByNumber',
-    method_url: process.env.NEXT_PUBLIC_BACKEND_APP_URL + 'test-get-block',
-    perform: true,
-    isLoading: true,
-    data: {},
-  },
-  {
-    id: 1,
-    order: 1,
-    method_used: 'eth_call',
-    method_url: process.env.NEXT_PUBLIC_BACKEND_APP_URL + 'test-eth-call',
-    perform: true,
-    isLoading: true,
-    data: {},
-  },
-]);
-
-export const METHODS_2 = entity([
-  {
-    id: 0,
-    order: 2,
-    method_used: 'eth_getBlockByNumber',
-    method_url: process.env.NEXT_PUBLIC_BACKEND_APP_URL + 'test-get-block',
-    perform: true,
-    isLoading: true,
-    data: {},
-  },
-  {
-    id: 1,
-    order: 2,
-    method_used: 'eth_call',
-    method_url: process.env.NEXT_PUBLIC_BACKEND_APP_URL + 'test-eth-call',
-    perform: true,
-    isLoading: true,
-    data: {},
-  },
-]);
-
-export const GET_METHODS_NAMES = entity(
-  METHODS.get().map((item) => item.method_used)
-);
-
-export const SET_METHOD_RESPONSE_DATA = (id, payload) => {
-  METHODS.set(
-    produce((value) => {
-      value[id].data = payload;
-      // keep this code to test rate limits
-      // let x = payload;
-      // x.blocks_processed_successfully = 78;
-      // value[id].data = x;
-    })
-  );
-};
-
-export const SET_METHOD_RESPONSE_DATA_2 = (id, payload) => {
-  METHODS_2.set(
-    produce((value) => {
-      value[id].data = payload;
-      // keep this code to test rate limits
-      // let x = payload;
-      // x.blocks_processed_successfully = 78;
-      // value[id].data = x;
-    })
-  );
-};
-
-// export const SET_METHOD_IS_LOADING = (id, payload) => {
-//   METHODS.set(
-//     produce((value) => {
-//       value[id].isLoading = payload;
-//     })
-//   );
-// };
-
-export const CLEAR_METHODS_DATA = () => {
-  METHODS.get().forEach((item) => {
-    METHODS.set(
-      produce((value) => {
-        value[item.id].data = {};
-        value[item.id].isLoading = true;
-      })
-    );
-  });
-  METHODS_2.get().forEach((item) => {
-    METHODS_2.set(
-      produce((value) => {
-        value[item.id].data = {};
-        value[item.id].isLoading = true;
-      })
-    );
-  });
-};
-
-export const SUPPORTED_NETWORKS = entity([
-  {
-    protocol: 'Ethereum',
-    networks: ['Mainnet', 'Holešky Testnet', 'Sepolia Testnet'],
-  },
-  {
-    protocol: 'Polygon',
-    networks: ['Mainnet', 'Mumbai Testnet'],
-  },
-  {
-    protocol: 'BNB Smart Chain',
-    networks: ['Mainnet', 'Testnet'],
-  },
-  {
-    protocol: 'Base',
-    networks: ['Mainnet', 'Sepolia Testnet'],
-  },
-  {
-    protocol: 'Avalanche',
-    networks: ['Mainnet', 'Fuji Testnet'],
-  },
-  {
-    protocol: 'Arbitrum',
-    networks: ['Mainnet', 'Sepolia Testnet'],
-  },
-  {
-    protocol: 'Optimism',
-    networks: ['Mainnet', 'Sepolia Testnet'],
-  },
-  {
-    protocol: 'Scroll',
-    networks: ['Mainnet', 'Sepolia Testnet'],
-  },
-  {
-    protocol: 'Ronin',
-    networks: ['Saigon Testnet'],
-  },
-  {
-    protocol: 'Gnosis Chain',
-    networks: ['Mainnet', 'Chiado Testnet'],
-  },
-  {
-    protocol: 'Cronos',
-    networks: ['Mainnet', 'Testnet'],
-  },
-  {
-    protocol: 'Fantom',
-    networks: ['Mainnet', 'Testnet'],
-  },
-  {
-    protocol: 'Harmony',
-    networks: ['Mainnet', 'Testnet'],
-  },
-]);
+// Store kept intentionally empty after the SEC-359 deprecation of the
+// in-app comparison flow. The landing page now embeds a Grafana dashboard
+// and no longer needs client-side state for endpoint inputs or method
+// results. Reintroduce entities here if a future feature needs them.
diff --git a/src/components/Bento/Bento.js b/src/components/Bento/Bento.js
deleted file mode 100644
index ce56864..0000000
--- a/src/components/Bento/Bento.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from 'react';
-
-import GithubIcon from '@/components/Icons/GithubIcon';
-import BarChartIcon from '@/components/Icons/BarChartIcon';
-import Customization from '@/components/Icons/Customization';
-import Profiling from '@/components/Icons/Profiling';
-
-import Image from 'next/image';
-
-import { Badge } from '@lemonsqueezy/wedges';
-
-const Bento = () => {
-  const bentoConfig = [
-    {
-      badge: {
-        color: 'blue',
-        stroke: false,
-        text: 'Data',
-        icon: <BarChartIcon width={16} height={16} />,
-      },
-      heading: 'Metrics that make sense',
-      copy: 'No random latency numbers.\nChainstack Compare measures how your node performs based on real data-fetching.',
-      image: {
-        url: '/bento-[0].png',
-        size: [360, 233],
-        alt: '',
-        style: 'mt-8 hidden lg:block absolute lg:-right-2 lg:-bottom-10',
-      },
-    },
-    {
-      badge: {
-        color: 'green',
-        stroke: false,
-        text: 'Multiple modes',
-        icon: <Customization width={16} height={16} />,
-      },
-      heading: 'Different testing methods',
-      copy: 'Test a single endpoint or compare a few different ones. Do an eth_call, trace a transaction (upcoming), and more.',
-    },
-    {
-      badge: {
-        color: '',
-        stroke: false,
-        text: 'GitHub',
-        icon: <GithubIcon width={16} height={16} />,
-      },
-      heading: 'Open source',
-      copy: 'We believe in giving back to the community. Our tool will be open source, accessible to all.',
-    },
-    {
-      badge: {
-        color: 'pink',
-        stroke: false,
-        text: 'Realistic scenarios',
-        icon: <Profiling width={16} height={16} />,
-      },
-      heading: "Different profiles",
-      copy: 'Profiles based on the most common industry scenarios.',
-      image: {
-        url: '/bento-[3].png',
-        size: [463, 242],
-        alt: '',
-        style: 'mt-8 hidden lg:block absolute -right-20 -bottom-14',
-      },
-    },
-  ];
-
-  return (
-    <div className="">
-      <h2 className="text-5xl font-bold text-accent text-left sm:text-center lg:text-center mt-20 mb-10">
-        Performance
-      </h2>
-      <div className="grid lg:auto-rows-[235px] sm:auto-rows-auto lg:grid-cols-3 sm:grid-cols-1 gap-8">
-        {bentoConfig.map((item, i) => (
-          <div
-            key={i}
-            className={`custom-bento-card row-span-1 rounded-xl border-2 px-6 py-6 sm:px-8 lg:px-8 sm:py-10 overflow-hidden ${
-              i === 0 || i === 3 ? 'col-span-1 lg:col-span-2' : ''
-            }`}
-          >
-            <Badge
-              before={item.badge.icon}
-              color={item.badge.color}
-              stroke={item.badge.stroke}
-            >
-              {item.badge.text}
-            </Badge>
-            <h2 className="text-xl mt-5 font-semibold">{item.heading}</h2>
-            <p
-              className={
-                item.hasOwnProperty('image')
-                  ? 'lg:w-2/4 sm:w-full text-base mt-2 text-gray-400'
-                  : 'text-base mt-2 text-gray-400'
-              }
-            >
-              {item.copy}
-            </p>
-            {item.hasOwnProperty('image') && (
-              <Image
-                src={item.image.url}
-                width={item.image.size[0]}
-                height={item.image.size[1]}
-                alt={item.image.alt}
-                className={item.image.style}
-              />
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Bento;
diff --git a/src/components/Chain/BulletBar.js b/src/components/Chain/BulletBar.js
new file mode 100644
index 0000000..914f754
--- /dev/null
+++ b/src/components/Chain/BulletBar.js
@@ -0,0 +1,22 @@
+function pct(v, max) {
+  if (!Number.isFinite(v) || !max) return 0;
+  return Math.min(100, (v / max) * 100);
+}
+
+export default function BulletBar({ p50, p95, p99, max, isLeader = false }) {
+  const palette = isLeader
+    ? { p99: 'bg-emerald-950', p95: 'bg-emerald-700', p50: 'bg-emerald-500' }
+    : { p99: 'bg-slate-800',   p95: 'bg-slate-600',   p50: 'bg-slate-400' };
+
+  return (
+    <div
+      className="relative h-6 w-full rounded overflow-hidden"
+      style={{ background: '#0a0d18' }}
+      aria-hidden
+    >
+      <div className={`absolute inset-y-0 left-0 ${palette.p99}`} style={{ width: `${pct(p99, max)}%` }} />
+      <div className={`absolute inset-y-0 left-0 ${palette.p95}`} style={{ width: `${pct(p95, max)}%` }} />
+      <div className={`absolute inset-y-1 left-0 ${palette.p50}`} style={{ width: `${pct(p50, max)}%` }} />
+    </div>
+  );
+}
diff --git a/src/components/Chain/ChainCard.js b/src/components/Chain/ChainCard.js
new file mode 100644
index 0000000..26e4c7f
--- /dev/null
+++ b/src/components/Chain/ChainCard.js
@@ -0,0 +1,104 @@
+import { fetchChainData } from '@/lib/chain-data';
+import { formatLatency, formatPercent, chainAnchor } from '@/lib/format';
+import BulletBar from './BulletBar';
+import Sparkline from './Sparkline';
+import RegionHeatmap from './RegionHeatmap';
+
+export default async function ChainCard({ chain }) {
+  const data = await fetchChainData(chain);
+  const { providers, regions, successRate, error } = data;
+
+  const maxP99 = providers.reduce((m, p) => Math.max(m, p.p99 ?? p.p95 ?? 0), 0);
+  const dashboardUrl = `https://chainstack.grafana.net/public-dashboards/${chain.publicToken}?orgId=1&theme=dark`;
+
+  return (
+    <section
+      id={chainAnchor(chain.promName)}
+      className="border border-gray-800 rounded-xl p-6 scroll-mt-6"
+      style={{ background: '#0b0f1f' }}
+    >
+      <div className="flex justify-between items-baseline mb-5 flex-wrap gap-3">
+        <h2 className="text-2xl font-bold text-white">{chain.name}</h2>
+        <div className="flex gap-5 items-baseline">
+          {successRate !== null && Number.isFinite(successRate) && (
+            <span className="text-gray-400 text-sm font-mono">
+              Success {formatPercent(successRate)}
+            </span>
+          )}
+          <a
+            href={dashboardUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:text-blue-400 text-sm font-mono"
+          >
+            Open in Grafana ↗
+          </a>
+        </div>
+      </div>
+
+      {error && (
+        <div className="text-red-400 text-sm font-mono mb-3">
+          Data unavailable: {error}
+        </div>
+      )}
+
+      {!error && providers.length === 0 && (
+        <div className="text-gray-500 text-sm font-mono">
+          No successful samples in the last 24h.
+        </div>
+      )}
+
+      {providers.length > 0 && (
+        <>
+          <div className="flex items-center text-[10px] uppercase tracking-wider text-gray-500 font-mono mb-2 gap-3 sm:gap-4">
+            <div className="w-32 sm:w-44 shrink-0">Provider</div>
+            <div className="flex-1">p50 / p95 / p99 · 24h</div>
+            <div className="hidden sm:block w-20 text-center">Trend</div>
+            <div className="w-16 sm:w-20 text-right">p50</div>
+            <div className="w-16 sm:w-20 text-right">p95</div>
+            <div className="w-16 sm:w-20 text-right hidden sm:block">p99</div>
+          </div>
+
+          <div className="space-y-2">
+            {providers.map((p, i) => (
+              <div
+                key={p.name}
+                className="flex items-center gap-3 sm:gap-4 text-sm"
+              >
+                <div className="w-32 sm:w-44 text-gray-300 font-mono shrink-0 truncate">
+                  {p.name}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <BulletBar
+                    p50={p.p50}
+                    p95={p.p95}
+                    p99={p.p99}
+                    max={maxP99}
+                    isLeader={i === 0}
+                  />
+                </div>
+                <div className="hidden sm:block w-20">
+                  <Sparkline
+                    values={p.trend}
+                    stroke={i === 0 ? '#10b981' : '#475569'}
+                  />
+                </div>
+                <div className="w-16 sm:w-20 text-right text-gray-300 font-mono shrink-0">
+                  {formatLatency(p.p50)}
+                </div>
+                <div className="w-16 sm:w-20 text-right text-gray-100 font-mono shrink-0">
+                  {formatLatency(p.p95)}
+                </div>
+                <div className="w-16 sm:w-20 text-right text-gray-500 font-mono shrink-0 hidden sm:block">
+                  {formatLatency(p.p99)}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <RegionHeatmap providers={providers} regions={regions} />
+        </>
+      )}
+    </section>
+  );
+}
diff --git a/src/components/Chain/ChainCardSkeleton.js b/src/components/Chain/ChainCardSkeleton.js
new file mode 100644
index 0000000..bf12b5d
--- /dev/null
+++ b/src/components/Chain/ChainCardSkeleton.js
@@ -0,0 +1,25 @@
+export default function ChainCardSkeleton({ chain, rows = 4 }) {
+  return (
+    <section
+      className="border border-gray-800 rounded-xl p-6 animate-pulse"
+      style={{ background: '#0b0f1f' }}
+    >
+      <div className="flex justify-between items-baseline mb-5">
+        <div className="h-7 w-32 bg-gray-800 rounded" />
+        <div className="h-4 w-24 bg-gray-800 rounded" />
+      </div>
+      <div className="space-y-3">
+        {Array.from({ length: rows }).map((_, i) => (
+          <div key={i} className="flex items-center gap-4">
+            <div className="w-32 sm:w-44 h-4 bg-gray-800 rounded" />
+            <div className="flex-1 h-6 bg-gray-800/70 rounded" />
+            <div className="hidden sm:block w-20 h-4 bg-gray-800 rounded" />
+            <div className="w-16 sm:w-20 h-4 bg-gray-800 rounded" />
+            <div className="w-16 sm:w-20 h-4 bg-gray-800 rounded" />
+          </div>
+        ))}
+      </div>
+      <span className="sr-only">Loading {chain?.name ?? 'chain'}…</span>
+    </section>
+  );
+}
diff --git a/src/components/Chain/RegionHeatmap.js b/src/components/Chain/RegionHeatmap.js
new file mode 100644
index 0000000..9d0b2cf
--- /dev/null
+++ b/src/components/Chain/RegionHeatmap.js
@@ -0,0 +1,68 @@
+import { formatLatency } from '@/lib/format';
+
+function heatColor(value, min, max) {
+  if (!Number.isFinite(value)) return 'transparent';
+  if (max === min) return 'hsl(140 40% 22%)';
+  const t = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  // hue 140 (green) → 0 (red), darker at the high end for dark theme legibility.
+  const hue = 140 - 140 * t;
+  const sat = 45;
+  const light = 28 - 6 * t;
+  return `hsl(${hue.toFixed(0)} ${sat}% ${light}%)`;
+}
+
+export default function RegionHeatmap({ providers, regions }) {
+  if (!providers?.length || !regions?.length) return null;
+
+  const allValues = [];
+  for (const p of providers) {
+    for (const r of regions) {
+      const v = p.regions?.[r];
+      if (Number.isFinite(v)) allValues.push(v);
+    }
+  }
+  if (!allValues.length) return null;
+  const min = Math.min(...allValues);
+  const max = Math.max(...allValues);
+
+  return (
+    <div className="mt-5">
+      <div className="text-xs font-mono text-gray-500 mb-2 uppercase tracking-wider">
+        p95 by region · 24h
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full text-xs font-mono border-separate border-spacing-y-1">
+          <thead>
+            <tr className="text-gray-500">
+              <th className="text-left font-normal pr-3 pb-1">Provider</th>
+              {regions.map((r) => (
+                <th key={r} className="text-right font-normal pl-3 pb-1">
+                  {r}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {providers.map((p) => (
+              <tr key={p.name}>
+                <td className="text-gray-300 pr-3 truncate max-w-[180px]">{p.name}</td>
+                {regions.map((r) => {
+                  const v = p.regions?.[r];
+                  return (
+                    <td
+                      key={r}
+                      className="text-right text-gray-100 px-2 py-1 rounded"
+                      style={{ background: heatColor(v, min, max) }}
+                    >
+                      {formatLatency(v)}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Chain/Sparkline.js b/src/components/Chain/Sparkline.js
new file mode 100644
index 0000000..2c36731
--- /dev/null
+++ b/src/components/Chain/Sparkline.js
@@ -0,0 +1,43 @@
+export default function Sparkline({
+  values,
+  width = 80,
+  height = 24,
+  stroke = '#64748b',
+  strokeWidth = 1.5,
+}) {
+  if (!values?.length || values.length < 2) {
+    return <div style={{ width, height }} aria-hidden />;
+  }
+
+  const max = Math.max(...values);
+  const min = Math.min(...values);
+  const range = max - min || 1;
+  const stepX = width / (values.length - 1);
+
+  const points = values
+    .map((v, i) => {
+      const x = i * stepX;
+      const y = height - ((v - min) / range) * height;
+      return `${x.toFixed(2)},${y.toFixed(2)}`;
+    })
+    .join(' ');
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio="none"
+      aria-hidden
+    >
+      <polyline
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        points={points}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/ChainTOC.js b/src/components/ChainTOC.js
new file mode 100644
index 0000000..08be57d
--- /dev/null
+++ b/src/components/ChainTOC.js
@@ -0,0 +1,54 @@
+import { CHAINS } from '@/lib/queries';
+import { fetchChainData } from '@/lib/chain-data';
+import { formatLatency, chainAnchor } from '@/lib/format';
+import Sparkline from './Chain/Sparkline';
+
+export default async function ChainTOC() {
+  const chainsData = await Promise.all(CHAINS.map(fetchChainData));
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+      {chainsData.map((data) => {
+        const leader = data.leader;
+        return (
+          <a
+            key={data.chain.promName}
+            href={`#${chainAnchor(data.chain.promName)}`}
+            className="block border border-gray-800 rounded-lg p-3 hover:border-gray-700 hover:bg-gray-900/40 transition-colors"
+            style={{ background: '#0a0d18' }}
+          >
+            <div className="flex items-baseline justify-between mb-1">
+              <div className="text-sm font-semibold text-white">
+                {data.chain.name}
+              </div>
+              <div className="text-[10px] font-mono text-gray-500">
+                {data.providers.length} prov
+              </div>
+            </div>
+            <div className="h-6 -mx-1">
+              <Sparkline
+                values={leader?.trend ?? []}
+                width={140}
+                height={24}
+                stroke="#10b981"
+                strokeWidth={1.25}
+              />
+            </div>
+            {leader ? (
+              <div className="flex items-baseline justify-between mt-1">
+                <div className="text-xs font-mono text-gray-300 truncate pr-2">
+                  {leader.name}
+                </div>
+                <div className="text-xs font-mono text-emerald-400">
+                  {formatLatency(leader.p95)}
+                </div>
+              </div>
+            ) : (
+              <div className="text-xs font-mono text-gray-600 mt-1">No data</div>
+            )}
+          </a>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/ChainTOCSkeleton.js b/src/components/ChainTOCSkeleton.js
new file mode 100644
index 0000000..714aa1a
--- /dev/null
+++ b/src/components/ChainTOCSkeleton.js
@@ -0,0 +1,19 @@
+import { CHAINS } from '@/lib/queries';
+
+export default function ChainTOCSkeleton() {
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 animate-pulse">
+      {CHAINS.map((c) => (
+        <div
+          key={c.promName}
+          className="border border-gray-800 rounded-lg p-3"
+          style={{ background: '#0a0d18' }}
+        >
+          <div className="h-4 w-20 bg-gray-800 rounded mb-2" />
+          <div className="h-6 bg-gray-800/70 rounded mb-2" />
+          <div className="h-3 w-24 bg-gray-800 rounded" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/Faq/FaqAccordion.js b/src/components/Faq/FaqAccordion.js
deleted file mode 100644
index 2c0c299..0000000
--- a/src/components/Faq/FaqAccordion.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { useState } from 'react';
-
-const FaqAccordion = () => {
-  const [accordions, setAccordion] = useState([
-    {
-      key: 1,
-      title: 'Q?',
-      data: `ANSWER`,
-      isOpen: false,
-    },
-    {
-      key: 2,
-      title: 'Questions?',
-      data: `Free Tutorials, Millions of Articles, Live, Online and Classroom Courses.`,
-      isOpen: false,
-    },
-  ]);
-
-  const toggleAccordion = (accordionkey) => {
-    const updatedAccordions = accordions.map((accord) => {
-      if (accord.key === accordionkey) {
-        return { ...accord, isOpen: !accord.isOpen };
-      } else {
-        return { ...accord, isOpen: false };
-      }
-    });
-
-    setAccordion(updatedAccordions);
-  };
-
-  function Accordion(props) {
-    return (
-      <div className="border border-gray-700 rounded-xl mb-3">
-        <button
-          className="w-full px-5 py-6 text-xl text-left transition duration-300 font-medium"
-          onClick={props.toggleAccordion}
-        >
-          {props.title}
-          <span
-            className={`float-right transform ${
-              props.isOpen ? 'rotate-180' : 'rotate-0'
-            } transition-transform duration-300`}
-          >
-            ↓
-          </span>
-        </button>
-        {props.isOpen && <div className="p-4">{props.data}</div>}
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <h2 className="text-5xl font-bold text-accent text-center">FAQ</h2>
-      <div>
-        {accordions.map((accordion) => (
-          <Accordion
-            key={accordion.key}
-            title={accordion.title}
-            data={accordion.data}
-            isOpen={accordion.isOpen}
-            toggleAccordion={() => toggleAccordion(accordion.key)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default FaqAccordion;
diff --git a/src/components/Faq/FaqBasic.js b/src/components/Faq/FaqBasic.js
deleted file mode 100644
index 3076566..0000000
--- a/src/components/Faq/FaqBasic.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { MDXProvider } from '@mdx-js/react';
-import Post from './post.mdx';
-
-const FaqBasic = () => {
-  return (
-    <div>
-      <h2 className="text-5xl font-bold text-accent text-left sm:text-center lg:text-center mt-20 mb-10">
-        FAQ
-      </h2>
-      <div className="max-w-lg m-auto">
-        <MDXProvider
-          components={{
-            h2(props) {
-              return (
-                <h2 className="text-2xl mt-10 mb-2 font-semibold" {...props} />
-              );
-            },
-            p(props) {
-              return <p className="text-m text-gray-400" {...props} />;
-            },
-          }}
-        >
-          <Post />
-        </MDXProvider>
-      </div>
-    </div>
-  );
-};
-
-export default FaqBasic;
diff --git a/src/components/Faq/post.mdx b/src/components/Faq/post.mdx
deleted file mode 100644
index cdd7623..0000000
--- a/src/components/Faq/post.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-## What is your stack?
-
-We selected Python to leverage its concurrency capabilities, aiming to highlight how RPC nodes perform in fetching data efficiently while keeping a developer-friendly approach.
-
-## Which chains/protocols/networks are supported?
-
-Chainstack Compare is designed to test EVM-based RPC nodes. If you have a network that's not supported by the tool yet, let us know!
-
-## Which methods are used for measurements?
-
-Chainstack Compare runs profiles based on standard Ethereum RPC methods that fetch blockchain data. Currently, it tests RPC endpoints using `eth_getBlockByNumber` and `eth_call`. More methods coming up.
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 128e3b2..9cd7447 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -3,7 +3,6 @@ import Logo from '@/components/Logo/Logo';
 import { Button } from '@lemonsqueezy/wedges';
 import GithubIcon from '@/components/Icons/GithubIcon';
 import ChainstackIcon from '@/components/Icons/ChainstackIcon';
-import GrafanaIcon from '@/components/Icons/GrafanaIcon';
 
 const Header = () => {
   return (
@@ -25,11 +24,6 @@ const Header = () => {
           </Button>
         </a>
 */}
-        <a href="/dashboard" target="_blank" className="sm:block lg:block hidden">
-          <Button variant="transparent" before={<GrafanaIcon width={24} height={24} />} className="mr-4">
-            Dashboard
-          </Button>
-        </a>
         <a href="https://chainstack.com/" target="_blank">
           <Button before={<ChainstackIcon width={24} height={24} />}>
             Start for free
diff --git a/src/components/Headline.js b/src/components/Headline.js
new file mode 100644
index 0000000..5bcb91f
--- /dev/null
+++ b/src/components/Headline.js
@@ -0,0 +1,73 @@
+import { CHAINS } from '@/lib/queries';
+import { fetchChainData } from '@/lib/chain-data';
+import { formatLatency } from '@/lib/format';
+
+function countWinsBy(chainsData, key) {
+  const wins = new Map();
+  for (const data of chainsData) {
+    const sorted = [...data.providers]
+      .filter((p) => Number.isFinite(p[key]))
+      .sort((a, b) => a[key] - b[key]);
+    const winner = sorted[0];
+    if (winner) wins.set(winner.name, (wins.get(winner.name) ?? 0) + 1);
+  }
+  return [...wins.entries()].sort((a, b) => b[1] - a[1]);
+}
+
+export default async function Headline() {
+  const chainsData = await Promise.all(CHAINS.map(fetchChainData));
+
+  const totalProviders = new Set(
+    chainsData.flatMap((c) => c.providers.map((p) => p.name))
+  ).size;
+
+  const allP95 = chainsData.flatMap((c) =>
+    c.providers.map((p) => ({ name: p.name, p95: p.p95, chain: c.chain.name }))
+  );
+  const fastest = allP95
+    .filter((p) => Number.isFinite(p.p95))
+    .sort((a, b) => a.p95 - b.p95)[0];
+
+  const p95Wins = countWinsBy(chainsData, 'p95');
+  const p99Wins = countWinsBy(chainsData, 'p99');
+
+  const topByWins = p95Wins[0];
+  const tailLeader = p99Wins[0];
+
+  if (!fastest && !topByWins) {
+    return (
+      <div className="text-center text-gray-500 font-mono text-sm">
+        Provider stats unavailable.
+      </div>
+    );
+  }
+
+  return (
+    <div className="text-center text-gray-300 text-base sm:text-lg leading-relaxed">
+      Across <b className="text-white">{chainsData.length}</b> chains and{' '}
+      <b className="text-white">{totalProviders}</b> providers.
+      {fastest && (
+        <>
+          {' '}Fastest right now:{' '}
+          <b className="text-emerald-400">{fastest.name}</b>{' '}
+          on <span className="text-gray-200">{fastest.chain}</span>{' '}
+          at <span className="font-mono">{formatLatency(fastest.p95)}</span>.
+        </>
+      )}
+      {topByWins && (
+        <>
+          {' '}Most p95 wins:{' '}
+          <b className="text-emerald-400">{topByWins[0]}</b>{' '}
+          <span className="text-gray-500">({topByWins[1]}/{chainsData.length})</span>.
+        </>
+      )}
+      {tailLeader && tailLeader[0] !== topByWins?.[0] && (
+        <>
+          {' '}Tail-latency leader:{' '}
+          <b className="text-emerald-400">{tailLeader[0]}</b>{' '}
+          <span className="text-gray-500">({tailLeader[1]} p99 wins)</span>.
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/HeadlineSkeleton.js b/src/components/HeadlineSkeleton.js
new file mode 100644
index 0000000..eadb739
--- /dev/null
+++ b/src/components/HeadlineSkeleton.js
@@ -0,0 +1,7 @@
+export default function HeadlineSkeleton() {
+  return (
+    <div className="flex justify-center animate-pulse">
+      <div className="h-6 w-3/4 max-w-3xl bg-gray-800 rounded" />
+    </div>
+  );
+}
diff --git a/src/components/Icons/BarChartIcon.js b/src/components/Icons/BarChartIcon.js
deleted file mode 100644
index b14cce7..0000000
--- a/src/components/Icons/BarChartIcon.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-const BarChartIcon = (props) => {
-  return (
-    <svg
-      width={props.width}
-      height={props.height}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11.9759 4.01032C11.859 4.00078 11.6965 4.00001 11.4 4.00001H5V8.00001H12V4.6001C12 4.30394 11.9991 4.14159 11.9896 4.02517C11.9892 4.02031 11.9887 4.01572 11.9883 4.0114C11.9844 4.01103 11.9802 4.01067 11.9759 4.01032ZM14 8.00001L14 4.57199C14 4.31793 14 4.0707 13.9828 3.86123C13.964 3.63247 13.9198 3.36299 13.7816 3.09191C13.591 2.71783 13.2873 2.41087 12.9088 2.21799C12.6371 2.07958 12.367 2.03559 12.1385 2.01694C11.9302 1.99994 11.6843 1.99997 11.4318 2L4 2.00001C3.44772 2.00001 3 2.44772 3 3.00001V21C3 21.5523 3.44772 22 4 22L14.4339 22C14.6858 22 14.9313 22.0001 15.1393 21.9831C15.3676 21.9644 15.6374 21.9204 15.9088 21.7821C16.2882 21.5888 16.5915 21.281 16.7816 20.9078C16.9197 20.6368 16.964 20.3675 16.9828 20.1387C17 19.9293 17 19.6822 17 19.4282L17 16L18.4339 16C18.6858 16 18.9313 16.0001 19.1393 15.9831C19.3676 15.9644 19.6374 15.9204 19.9088 15.7821C20.2884 15.5887 20.5916 15.2807 20.7816 14.9077C20.9197 14.6368 20.964 14.3676 20.9828 14.1388C21 13.9294 21 13.6823 21 13.4283V10.572C21 10.3179 21 10.0707 20.9828 9.86123C20.964 9.63247 20.9198 9.36299 20.7816 9.09191C20.591 8.71783 20.2873 8.41087 19.9088 8.21799C19.6371 8.07958 19.367 8.03559 19.1385 8.01694C18.9302 7.99994 18.6843 7.99997 18.4318 8L14 8.00001ZM15 16H5V20H14.402C14.698 20 14.86 19.9992 14.9764 19.9897C14.9806 19.9894 14.9846 19.989 14.9883 19.9887C14.9887 19.9843 14.9891 19.9796 14.9896 19.9747C14.9991 19.8584 15 19.6962 15 19.4V16ZM5 14H18.402C18.698 14 18.86 13.9992 18.9764 13.9897C18.9806 13.9894 18.9846 13.989 18.9883 13.9887C18.9887 13.9843 18.9891 13.9796 18.9896 13.9747C18.9991 13.8584 19 13.6963 19 13.4001V10.6001C19 10.3039 18.9991 10.1416 18.9896 10.0252C18.9892 10.0203 18.9887 10.0157 18.9883 10.0114C18.9844 10.011 18.9802 10.0107 18.9759 10.0103C18.859 10.0008 18.6965 10 18.4 10H5V14Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default BarChartIcon;
diff --git a/src/components/Icons/Customization.js b/src/components/Icons/Customization.js
deleted file mode 100644
index 8d81a08..0000000
--- a/src/components/Icons/Customization.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-const Customization = (props) => {
-  return (
-    <svg
-      width={props.width}
-      height={props.height}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10 3C10.5523 3 11 3.44772 11 4V8C11 8.55228 10.5523 9 10 9C9.44772 9 9 8.55228 9 8V7H3C2.44772 7 2 6.55228 2 6C2 5.44772 2.44772 5 3 5H9V4C9 3.44772 9.44772 3 10 3ZM13 6C13 5.44772 13.4477 5 14 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H14C13.4477 7 13 6.55228 13 6ZM16 9C16.5523 9 17 9.44772 17 10V14C17 14.5523 16.5523 15 16 15C15.4477 15 15 14.5523 15 14V13H3C2.44772 13 2 12.5523 2 12C2 11.4477 2.44772 11 3 11H15V10C15 9.44772 15.4477 9 16 9ZM19 12C19 11.4477 19.4477 11 20 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H20C19.4477 13 19 12.5523 19 12ZM6 15C6.55228 15 7 15.4477 7 16V20C7 20.5523 6.55228 21 6 21C5.44772 21 5 20.5523 5 20V19H3C2.44772 19 2 18.5523 2 18C2 17.4477 2.44772 17 3 17H5V16C5 15.4477 5.44772 15 6 15ZM9 18C9 17.4477 9.44772 17 10 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H10C9.44772 19 9 18.5523 9 18Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default Customization;
diff --git a/src/components/Icons/ExplainResultsIcon.js b/src/components/Icons/ExplainResultsIcon.js
deleted file mode 100644
index d7c39e6..0000000
--- a/src/components/Icons/ExplainResultsIcon.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-const ExplainResultsIcon = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.75 4C5.23122 4 4 5.23122 4 6.75V15.25C4 16.7688 5.23122 18 6.75 18H9.12184L11.5455 19.8466C11.814 20.0511 12.186 20.0511 12.4545 19.8466L14.8782 18H17.25C18.7688 18 20 16.7688 20 15.25V6.75C20 5.23122 18.7688 4 17.25 4H6.75ZM5.5 6.75C5.5 6.05964 6.05964 5.5 6.75 5.5H17.25C17.9404 5.5 18.5 6.05964 18.5 6.75V15.25C18.5 15.9404 17.9404 16.5 17.25 16.5H14.625C14.4608 16.5 14.3011 16.5539 14.1705 16.6534L12 18.3071L9.82953 16.6534C9.6989 16.5539 9.53922 16.5 9.375 16.5H6.75C6.05964 16.5 5.5 15.9404 5.5 15.25V6.75ZM9 10C8.44772 10 8 10.4477 8 11C8 11.5523 8.44772 12 9 12C9.55228 12 10 11.5523 10 11C10 10.4477 9.55228 10 9 10ZM11 11C11 10.4477 11.4477 10 12 10C12.5523 10 13 10.4477 13 11C13 11.5523 12.5523 12 12 12C11.4477 12 11 11.5523 11 11ZM15 10C14.4477 10 14 10.4477 14 11C14 11.5523 14.4477 12 15 12C15.5523 12 16 11.5523 16 11C16 10.4477 15.5523 10 15 10Z"
-      />
-    </svg>
-  );
-};
-
-export default ExplainResultsIcon;
diff --git a/src/components/Icons/GrafanaIcon.js b/src/components/Icons/GrafanaIcon.js
deleted file mode 100644
index 8078166..0000000
--- a/src/components/Icons/GrafanaIcon.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-const GrafanaIcon = (props) => {
-  return (
-    <svg 
-      width={props.width} 
-      height={props.height} 
-      viewBox="0 0 85.12 92.46" 
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M85.01 40.8a33.05 33.05 0 00-3.32-11.69 34.33 34.33 0 00-6.89-9.42c1.3-5.17-1.59-9.65-1.59-9.65-4.98-.31-8.14 1.54-9.31 2.39l-.59-.25a39.35 39.35 0 00-8.21-2.26l-.51-.07C52.41 2.9 46.18 0 46.18 0c-6.95 4.41-8.27 10.57-8.27 10.57l-.07.36-1.15.34c-.53.16-1.06.36-1.59.55-.53.21-1.06.41-1.58.64a31.81 31.81 0 00-6 3.35l-.24-.11c-9.62-3.68-18.17.75-18.17.75-.78 10.24 3.84 16.68 4.76 17.86a44.72 44.72 0 00-2.34 10.15C2.63 48.84 0 57.84 0 57.84c7.42 8.53 16.07 9.06 16.07 9.06l.02-.02a38.29 38.29 0 005.68 7.68c-2.71 7.74.38 14.18.38 14.18a23.03 23.03 0 0014.83-4.52 37.7 37.7 0 0012.19 1.93h.31l.21-.01.41-.01.4-.02.01.01c3.89 5.55 10.74 6.34 10.74 6.34 4.87-5.13 5.15-10.22 5.15-11.33v-.07-.15l-.01-.23a30.34 30.34 0 008.37-8.86c5.51.32 9.39-3.41 9.39-3.41-.91-5.74-4.18-8.54-4.87-9.07l-.07-.05a.61.61 0 01-.06-.05l-.12-.08.08-1.04c.04-.62.06-1.24.06-1.85v-.81-.16l-.02-.38-.03-.52a7.25 7.25 0 00-.09-.98l-.06-.48-.07-.47a23.94 23.94 0 00-7.83-14.37 23.17 23.17 0 00-15.69-5.81l-.41.01H54.73l-.17.01-.4.03-.45.04a18.4 18.4 0 00-12.4 6.49 18.02 18.02 0 00-4.14 10.35 14.54 14.54 0 00-.02 1.65l.01.35.05.63a13.93 13.93 0 005.97 10.16 13.6 13.6 0 003.76 1.79c1.27.38 2.54.54 3.74.53l.44-.01.24-.01.24-.01.38-.04.11-.01.12-.02.23-.03.43-.08.42-.09a10.46 10.46 0 002.26-.83c.45-.23.87-.5 1.26-.77l.33-.25a.96.96 0 00.15-1.35.94.94 0 00-1.19-.23l-.3.16c-.35.17-.71.32-1.09.45a9.54 9.54 0 01-1.83.37l-.32.02-.32.01-.31-.01-.39-.02h-.05l-.09.02-.17-.02-.35-.04a9.98 9.98 0 01-5.36-2.51 9.71 9.71 0 01-3.21-7.39l.02-.47v-.09l.01-.12.02-.23a12.18 12.18 0 016.94-9.8 12.02 12.02 0 014.87-1.07h.23l.27.01.17.01h.1l.27.02a15.57 15.57 0 016.3 1.89 15.18 15.18 0 016.17 6.4 14.52 14.52 0 011.53 5.45l.02.29.01.29.01.29v.52l-.01.28-.03.67a24.8 24.8 0 01-.31 2.46 19.65 19.65 0 01-11.12 14.22 19.46 19.46 0 01-7.28 1.72l-.15.01h-1.02-.09a25.45 25.45 0 01-6.61-1.02 26.1 26.1 0 01-18.72-23.19l-.02-.32-.01-.08V49.57l-.01-.28v-.37l-.01-.4v-.08-.19l.01-.63a29.56 29.56 0 01.65-5.24 34.3 34.3 0 012.46-7.51 27.12 27.12 0 015.61-8.09 22.83 22.83 0 015.69-4.12c.34-.19.7-.35 1.05-.52l.53-.24.54-.23c.72-.3 1.46-.56 2.21-.8l.56-.17.57-.16c.38-.11.76-.2 1.14-.29l.58-.13.58-.12.58-.11.29-.05.29-.04.59-.09.66-.09.65-.08.41-.04.28-.03.14-.01.16-.01.66-.04.33-.02H51.17l.14-.01.56-.03a30.82 30.82 0 016.58.48 30.5 30.5 0 017.89 2.62 31.8 31.8 0 016.44 4.2l.35.3.34.3.66.61.64.62.61.63a33.4 33.4 0 015.43 7.62l.16.3.15.3.29.6c.09.2.19.39.27.59l.25.58a34.09 34.09 0 011.73 5.16c.09.35.42.58.78.55a.72.72 0 00.66-.71c.04-.95.01-2.05-.09-3.3z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default GrafanaIcon;
\ No newline at end of file
diff --git a/src/components/Icons/Profiling.js b/src/components/Icons/Profiling.js
deleted file mode 100644
index 2084c5c..0000000
--- a/src/components/Icons/Profiling.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-const Profiling = (props) => {
-  return (
-    <svg
-      width={props.width}
-      height={props.height}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.3828 3.2978C12.1378 3.19631 11.8625 3.19631 11.6174 3.2978C11.5758 3.31503 11.4956 3.35761 11.3234 3.50784C11.1444 3.66398 10.925 3.88254 10.5859 4.22168C10.2469 4.56074 10.0283 4.78007 9.87212 4.9591C9.72185 5.13137 9.67927 5.2116 9.66206 5.25316C9.56056 5.49818 9.56056 5.77355 9.66206 6.01858C9.67929 6.06019 9.72187 6.14041 9.87209 6.31263C10.0282 6.49164 10.2468 6.71097 10.5859 7.05011C10.9249 7.38906 11.1442 7.60765 11.3233 7.76386C11.4957 7.91422 11.576 7.95682 11.6174 7.974C11.8624 8.07549 12.1378 8.07549 12.3828 7.97399C12.4245 7.95676 12.5047 7.91418 12.6769 7.76396C12.8559 7.60782 13.0752 7.38926 13.4144 7.05011C13.7533 6.71123 13.9716 6.4919 14.1273 6.31313C14.2771 6.14119 14.3198 6.06074 14.3373 6.01858C14.4388 5.77355 14.4388 5.49818 14.3373 5.25316C14.3198 5.21101 14.2771 5.13059 14.1273 4.95866C13.9716 4.77989 13.7533 4.56058 13.4144 4.22168C13.0752 3.88254 12.8559 3.66398 12.6769 3.50784C12.5047 3.35761 12.4244 3.31504 12.3828 3.2978ZM10.8521 1.45004C11.5872 1.14556 12.4131 1.14556 13.1482 1.45004C13.4741 1.58505 13.7424 1.78333 13.9916 2.00064C14.2282 2.20703 14.4958 2.47466 14.8059 2.78482L14.8286 2.80747L14.8446 2.82349C15.1578 3.1367 15.4276 3.40643 15.6353 3.64493C15.8526 3.89434 16.0503 4.16239 16.185 4.48779C16.4895 5.22287 16.4895 6.04886 16.185 6.78395C16.0503 7.10933 15.8526 7.37738 15.6354 7.62681C15.4275 7.86543 15.1576 8.13531 14.8442 8.4487L14.806 8.48692C14.4958 8.79711 14.2282 9.06476 13.9916 9.27116C13.7424 9.48847 13.4741 9.68675 13.1482 9.82175C12.4131 10.1262 11.5871 10.1262 10.852 9.82176C10.5261 9.68673 10.2577 9.48829 10.0086 9.27101C9.77195 9.06458 9.50433 8.79695 9.19433 8.48693L9.1491 8.4417C8.83892 8.13154 8.57128 7.86392 8.36489 7.6273C8.14758 7.37816 7.9493 7.10988 7.8143 6.78395C7.50982 6.04886 7.50982 5.22287 7.8143 4.48779C7.94931 4.16185 8.14765 3.89352 8.36494 3.64441C8.57134 3.40779 8.83897 3.14017 9.14908 2.83008L9.1717 2.80747L9.19431 2.78485C9.50447 2.47468 9.77209 2.20704 10.0087 2.00064C10.2579 1.78333 10.5261 1.58505 10.8521 1.45004ZM6.01858 9.66157C5.77355 9.56008 5.49821 9.56008 5.25318 9.66157C5.21157 9.67881 5.13135 9.72138 4.95913 9.87161C4.78012 10.0277 4.5608 10.2463 4.22165 10.5854C3.88261 10.9245 3.66404 11.1438 3.50787 11.3229C3.35759 11.4951 3.31501 11.5754 3.2978 11.6169C3.19631 11.862 3.19631 12.1373 3.2978 12.3823C3.31504 12.424 3.35761 12.5042 3.50784 12.6764C3.66398 12.8554 3.88254 13.0747 4.22168 13.4139C4.56062 13.7528 4.77999 13.9714 4.95906 14.1276C5.13143 14.278 5.2117 14.3206 5.25316 14.3378C5.49818 14.4393 5.77355 14.4393 6.01858 14.3378C6.0602 14.3205 6.14042 14.2779 6.31263 14.1277C6.49164 13.9716 6.71097 13.753 7.05011 13.4139C7.38899 13.075 7.60731 12.8557 7.76304 12.6769C7.91281 12.505 7.95556 12.4245 7.97302 12.3824C8.07451 12.1373 8.07451 11.862 7.97302 11.6169C7.95556 11.5748 7.91284 11.4944 7.76306 11.3224C7.60733 11.1437 7.38901 10.9243 7.05011 10.5854C6.71097 10.2463 6.49164 10.0277 6.31263 9.8716C6.14041 9.72139 6.06019 9.67881 6.01858 9.66157ZM4.48782 7.81381C5.2229 7.50933 6.04886 7.50933 6.78395 7.81381C7.10988 7.94881 7.37816 8.14709 7.6273 8.3644C7.86392 8.5708 8.13154 8.83843 8.4417 9.14861L8.48037 9.18728C8.79357 9.50048 9.06331 9.77021 9.27108 10.0087C9.48835 10.2581 9.686 10.5262 9.82078 10.8516C10.1253 11.5866 10.1253 12.4126 9.82078 13.1477C9.686 13.4731 9.48838 13.7412 9.2711 13.9906C9.06323 14.2292 8.79334 14.4991 8.47992 14.8125L8.44167 14.8507C8.13152 15.1609 7.86391 15.4285 7.6273 15.6349C7.37816 15.8522 7.10988 16.0505 6.78395 16.1855C6.04887 16.49 5.22288 16.49 4.48779 16.1855C4.16181 16.0505 3.89341 15.8521 3.64433 15.6348C3.40768 15.4283 3.14006 15.1607 2.83006 14.8507L2.80747 14.8281L2.78482 14.8055C2.47466 14.4953 2.20703 14.2277 2.00064 13.9911C1.78333 13.7419 1.58505 13.4736 1.45004 13.1477C1.14556 12.4126 1.14556 11.5866 1.45004 10.8516C1.58505 10.5256 1.7834 10.2573 2.00069 10.0082C2.2071 9.77155 2.47472 9.50394 2.78481 9.19386L2.80744 9.17124L2.83007 9.14861C3.14022 8.83843 3.40785 8.5708 3.64446 8.36441C3.8936 8.14709 4.16189 7.94881 4.48782 7.81381ZM18.7471 9.66157C18.5021 9.56008 18.2267 9.56008 17.9817 9.66157C17.9401 9.6788 17.8599 9.72138 17.6876 9.87161C17.5086 10.0277 17.2893 10.2463 16.9502 10.5854C16.6111 10.9245 16.3925 11.1438 16.2364 11.3229C16.0861 11.4951 16.0435 11.5754 16.0263 11.6169C15.9248 11.862 15.9248 12.1373 16.0263 12.3824C16.0436 12.424 16.0861 12.5042 16.2364 12.6764C16.3925 12.8554 16.6111 13.0747 16.9502 13.4139C17.2891 13.7528 17.5085 13.9714 17.6876 14.1276C17.8599 14.278 17.9402 14.3206 17.9817 14.3378C18.2267 14.4393 18.5021 14.4393 18.7471 14.3378C18.7887 14.3205 18.8689 14.2779 19.0411 14.1277C19.2202 13.9716 19.4395 13.753 19.7786 13.4139C20.1175 13.075 20.3358 12.8557 20.4916 12.6769C20.6413 12.505 20.6841 12.4245 20.7015 12.3824C20.803 12.1373 20.803 11.862 20.7015 11.6169C20.6841 11.5748 20.6414 11.4944 20.4916 11.3224C20.3358 11.1437 20.1175 10.9243 19.7786 10.5854C19.4395 10.2463 19.2202 10.0277 19.0411 9.8716C18.8689 9.72138 18.7887 9.67881 18.7471 9.66157ZM17.2163 7.81381C17.9514 7.50933 18.7774 7.50933 19.5125 7.81381C19.8384 7.94881 20.1067 8.14709 20.3558 8.36441C20.5924 8.57079 20.86 8.83842 21.1702 9.14858L21.2089 9.18728C21.5221 9.50047 21.7918 9.7702 21.9996 10.0087C22.2169 10.2581 22.4145 10.5262 22.5493 10.8516C22.8538 11.5866 22.8538 12.4126 22.5493 13.1477C22.4145 13.4731 22.2169 13.7412 21.9996 13.9906C21.7917 14.2292 21.5219 14.4991 21.2085 14.8125L21.1701 14.8508C20.86 15.161 20.5924 15.4286 20.3558 15.6349C20.1067 15.8522 19.8384 16.0505 19.5125 16.1855C18.7774 16.49 17.9514 16.49 17.2163 16.1855C16.8903 16.0505 16.6219 15.8521 16.3728 15.6348C16.1362 15.4283 15.8686 15.1607 15.5586 14.8507L15.5134 14.8055C15.2032 14.4953 14.9356 14.2277 14.7292 13.9911C14.5118 13.7419 14.3136 13.4736 14.1786 13.1477C13.8741 12.4126 13.8741 11.5866 14.1786 10.8516C14.3136 10.5256 14.5119 10.2573 14.7292 10.0082C14.9356 9.77156 15.2032 9.50395 15.5133 9.19387L15.5586 9.14861C15.8687 8.83844 16.1364 8.5708 16.373 8.36441C16.6221 8.1471 16.8904 7.94881 17.2163 7.81381ZM12.3828 16.0258C12.1378 15.9243 11.8625 15.9243 11.6174 16.0258C11.5758 16.0431 11.4956 16.0856 11.3234 16.2359C11.1444 16.392 10.9251 16.6106 10.5859 16.9497C10.2469 17.2888 10.0283 17.5081 9.87213 17.6871C9.72185 17.8594 9.67927 17.9396 9.66206 17.9812C9.56056 18.2262 9.56056 18.5016 9.66206 18.7466C9.67929 18.7882 9.72187 18.8684 9.87209 19.0407C10.0282 19.2197 10.2468 19.439 10.5859 19.7781C10.9249 20.1171 11.1442 20.3357 11.3233 20.4919C11.4957 20.6423 11.576 20.6849 11.6174 20.702C11.8624 20.8035 12.1378 20.8035 12.3828 20.702C12.4245 20.6848 12.5047 20.6422 12.6769 20.492C12.8559 20.3358 13.0752 20.1173 13.4144 19.7781C13.7533 19.4393 13.9716 19.2199 14.1273 19.0412C14.2771 18.8692 14.3198 18.7888 14.3373 18.7466C14.4388 18.5016 14.4388 18.2262 14.3373 17.9812C14.3198 17.939 14.2771 17.8586 14.1273 17.6867C13.9716 17.5079 13.7533 17.2886 13.4144 16.9497C13.0752 16.6106 12.8559 16.392 12.6769 16.2359C12.5047 16.0856 12.4245 16.0431 12.3828 16.0258ZM10.8521 14.1781C11.5872 13.8736 12.4131 13.8736 13.1482 14.1781C13.4741 14.3131 13.7424 14.5114 13.9916 14.7287C14.2282 14.9351 14.4958 15.2027 14.806 15.5129L14.8446 15.5515C15.1578 15.8647 15.4276 16.1345 15.6353 16.373C15.8526 16.6224 16.0503 16.8904 16.185 17.2158C16.4895 17.9509 16.4895 18.7769 16.185 19.512C16.0503 19.8374 15.8526 20.1054 15.6354 20.3548C15.4275 20.5935 15.1576 20.8633 14.8442 21.1767L14.806 21.215C14.4958 21.5252 14.2282 21.7928 13.9916 21.9992C13.7424 22.2165 13.4741 22.4148 13.1482 22.5498C12.4131 22.8543 11.5871 22.8543 10.852 22.5498C10.5261 22.4148 10.2577 22.2163 10.0086 21.999C9.77194 21.7926 9.50432 21.525 9.19432 21.2149L9.17173 21.1924L9.14907 21.1697C8.83891 20.8596 8.57128 20.5919 8.36489 20.3553C8.14758 20.1062 7.9493 19.8379 7.8143 19.512C7.50982 18.7769 7.50982 17.9509 7.8143 17.2158C7.94931 16.8899 8.14765 16.6215 8.36495 16.3724C8.57136 16.1358 8.83901 15.8682 9.14914 15.5581L9.19427 15.5129C9.50445 15.2027 9.77209 14.9351 10.0087 14.7287C10.2579 14.5114 10.5261 14.3131 10.8521 14.1781Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};
-
-export default Profiling;
diff --git a/src/components/Performance/Compare.js b/src/components/Performance/Compare.js
deleted file mode 100644
index 048a623..0000000
--- a/src/components/Performance/Compare.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-
-const Compare = () => {
-  return (
-    <svg
-      className="my-3 hidden sm:inline lg:inline"
-      width="100%"
-      height="100%"
-      viewBox="0 0 1266 132"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      style={{
-        filter: 'drop-shadow(0px 0px 250px rgba(0, 123, 255, 0.75))',
-      }}
-    >
-      <path
-        fill="url(#a)"
-        fillRule="evenodd"
-        d="M130.838 81.633H96.98c-2.052 4.446-10.26 21.375-30.438 21.375-21.033 0-34.029-18.468-34.029-37.62 0-17.955 12.141-36.936 33.858-36.936 17.442 0 27.018 12.654 30.61 22.06h33.857C127.418 30.674 106.214.065 66.542.065 25.16.066.194 33.24.194 65.56c0 34.2 27.018 65.835 66.69 65.835 30.61 0 56.601-19.836 63.954-49.76Zm14.541-41.382C152.048 23.835 171.713.066 207.11.066c38.988 0 66.861 30.438 66.861 65.664s-27.702 65.664-67.032 65.664c-39.843 0-66.519-31.635-66.519-64.125 0-8.379 1.197-17.784 4.959-27.018Zm27.36 25.137c0 19.494 13.167 37.62 34.884 37.62 22.914 0 34.029-20.862 34.029-37.107 0-16.416-11.115-37.449-34.371-37.449-22.401 0-34.542 19.152-34.542 36.936ZM289.633 2.46V129h29.754l-1.026-94.734.342-.342L345.721 129h21.375l27.018-95.076.342.342L393.43 129h29.754V2.46H381.46l-24.795 83.277h-.342L331.186 2.46h-41.553ZM444.394 129V2.46h41.382c23.427 0 32.148 3.591 38.988 9.234 9.918 8.208 14.877 20.691 14.877 33.516s-5.301 26.334-13.338 33.174c-8.721 7.353-17.271 10.944-36.936 10.944h-14.022V129h-30.951Zm30.951-98.154v30.096h13.167c6.156 0 20.178 0 20.178-15.219 0-14.877-14.364-14.877-21.375-14.877h-11.97Zm90.481 79.857h43.947L615.929 129h35.055L600.71 2.46h-25.479L524.444 129h34.713l6.669-18.297Zm8.892-25.65 12.996-43.263h.513l12.996 43.263h-26.505ZM662.238 129V2.46h40.014c22.23 0 30.78 2.736 38.988 9.063 10.431 8.208 15.561 21.546 15.561 34.542 0 14.535-7.524 35.91-31.464 39.843L759.708 129h-36.936l-29.241-40.869h-.342V129h-30.951Zm30.951-98.154v35.226h11.457c18.981 0 21.204-11.97 21.204-18.126 0-11.457-8.379-17.1-20.862-17.1h-11.799ZM772.246 129V2.46h70.281v28.386h-39.33v19.665h38.133v28.386h-38.133v21.717h39.33V129h-70.281Z"
-        clipRule="evenodd"
-      />
-      <defs>
-        <linearGradient
-          id="a"
-          x1={-8.504}
-          x2={691.679}
-          y1={129.001}
-          y2={-272.752}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop
-            offset={0.188}
-            stopColor="#007BFF"
-            style={{
-              stopColor: '#007bff',
-              stopColor: 'color(display-p3 0 .4824 1)',
-              stopOpacity: 1,
-            }}
-          />
-          <stop
-            offset={0.849}
-            stopColor="#fff"
-            style={{
-              stopColor: 'white',
-              stopOpacity: 1,
-            }}
-          />
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-};
-
-export default Compare;
diff --git a/src/components/Performance/Preformance.js b/src/components/Performance/Preformance.js
deleted file mode 100644
index 29f9d8f..0000000
--- a/src/components/Performance/Preformance.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-
-const Preformance = () => {
-  return (
-    <svg
-      className="my-3"
-      width="100%"
-      height="100%"
-      viewBox="0 0 1266 132"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      style={{
-        filter: 'drop-shadow(0px 0px 250px rgba(0, 123, 255, 0.75))',
-      }}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M451.723 0.065918C416.326 0.065918 396.661 23.8349 389.992 40.2509C386.23 49.4849 385.033 58.8899 385.033 67.2689C385.033 99.7589 411.709 131.394 451.552 131.394C490.882 131.394 518.584 100.956 518.584 65.7299C518.584 30.5039 490.711 0.065918 451.723 0.065918ZM452.236 103.008C430.519 103.008 417.352 84.8819 417.352 65.3879C417.352 47.6039 429.493 28.4519 451.894 28.4519C475.15 28.4519 486.265 49.4849 486.265 65.9009C486.265 82.1459 475.15 103.008 452.236 103.008ZM1146.59 81.6329H1180.45C1173.09 111.558 1147.1 131.394 1116.49 131.394C1076.82 131.394 1049.8 99.7589 1049.8 65.5589C1049.8 33.2399 1074.77 0.065918 1116.15 0.065918C1155.82 0.065918 1177.03 30.6749 1180.45 50.5109H1146.59C1143 41.1059 1133.42 28.4519 1115.98 28.4519C1094.26 28.4519 1082.12 47.4329 1082.12 65.3879C1082.12 84.5399 1095.12 103.008 1116.15 103.008C1136.33 103.008 1144.54 86.0789 1146.59 81.6329ZM1195.5 129V2.45996H1265.78V30.846H1226.45V50.511H1264.58V78.897H1226.45V100.614H1265.78V129H1195.5ZM926.891 2.45996V129H957.842L956.987 52.221L957.329 52.05L1005.55 129H1033.59V2.45996H1002.64L1004.01 81.633L1003.67 81.975L954.764 2.45996H926.891ZM874.426 110.703H830.479L823.81 129H789.097L839.884 2.45996H865.363L915.637 129H880.582L874.426 110.703ZM852.367 41.79L839.371 85.053H865.876L852.88 41.79H852.709H852.367ZM644.253 2.45996V129H674.007L672.981 34.266L673.323 33.924L700.341 129H721.716L748.734 33.924L749.076 34.266L748.05 129H777.804V2.45996H736.08L711.285 85.737H710.943L685.806 2.45996H644.253ZM534.245 129V2.45996H574.259C596.489 2.45996 605.039 5.19596 613.247 11.523C623.678 19.731 628.808 33.069 628.808 46.065C628.808 60.6 621.284 81.975 597.344 85.908L631.715 129H594.779L565.538 88.131H565.196V129H534.245ZM565.196 30.846V66.072H576.653C595.634 66.072 597.857 54.102 597.857 47.946C597.857 36.489 589.478 30.846 576.995 30.846H565.196ZM305.713 129V2.45996H374.797V30.846H336.664V52.392H373.429V80.778H336.664V129H305.713ZM195.705 2.45996V129H226.656V88.131H226.998L256.239 129H293.175L258.804 85.908C282.744 81.975 290.268 60.6 290.268 46.065C290.268 33.069 285.138 19.731 274.707 11.523C266.499 5.19596 257.949 2.45996 235.719 2.45996H195.705ZM226.656 66.072V30.846H238.455C250.938 30.846 259.317 36.489 259.317 47.946C259.317 54.102 257.094 66.072 238.113 66.072H226.656ZM107.072 129V2.45996H177.353V30.846H138.023V50.511H176.156V78.897H138.023V100.614H177.353V129H107.072ZM0.0703125 2.45996V129H31.0213V89.328H45.0433C64.7083 89.328 73.2583 85.737 81.9793 78.384C90.0163 71.544 95.3173 58.035 95.3173 45.21C95.3173 32.385 90.3583 19.902 80.4403 11.694C73.6003 6.05096 64.8793 2.45996 41.4523 2.45996H0.0703125ZM31.0213 60.942V30.846H42.9913C50.0023 30.846 64.3663 30.846 64.3663 45.723C64.3663 60.942 50.3443 60.942 44.1883 60.942H31.0213Z"
-        fill="url(#paint0_linear_1086_2826)"
-      />
-      <defs>
-        <linearGradient
-          id="paint0_linear_1086_2826"
-          x1="-13"
-          y1="129"
-          x2="789.186"
-          y2="-562.63"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop
-            offset="0.1875"
-            stopColor="#007BFF"
-            style={{
-              stopColor: 'color(display-p3 0.0000 0.4824 1.0000)',
-              stopOpacity: '1',
-            }}
-          />
-          <stop
-            offset="0.848958"
-            stopColor="white"
-            style={{ stopColor: 'white', stopOpacity: '1' }}
-          />
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-};
-
-export default Preformance;
diff --git a/src/components/ProtocolIcon/ProtocolIcon.js b/src/components/ProtocolIcon/ProtocolIcon.js
deleted file mode 100644
index cbe9d17..0000000
--- a/src/components/ProtocolIcon/ProtocolIcon.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import React from 'react';
-import Image from 'next/image';
-// import { ReactComponent as Aptos } from './aptos.svg';
-// import { ReactComponent as Arbitrum } from './arbitrum.svg';
-// import { ReactComponent as Aurora } from './aurora.svg';
-// import { ReactComponent as Avalanche } from './avalanche.svg';
-// import { ReactComponent as Base } from './base.svg';
-// import { ReactComponent as Bitcoin } from './bitcoin.svg';
-// import { ReactComponent as Bnb } from './bnb.svg';
-// import { ReactComponent as Cronos } from './cronos.svg';
-// import { ReactComponent as Ethereum } from './ethereum.svg';
-// import { ReactComponent as Fantom } from './fantom.svg';
-// import { ReactComponent as Filecoin } from './filecoin.svg';
-// import { ReactComponent as Fuse } from './fuse.svg';
-// import { ReactComponent as Gnosis } from './gnosis.svg';
-// import { ReactComponent as Harmony } from './harmony.svg';
-// import { ReactComponent as Near } from './near.svg';
-// import { ReactComponent as Optimism } from './optimism.svg';
-// import { ReactComponent as PolygonPOS } from './polygonPOS.svg';
-// import { ReactComponent as PolygonZkEvm } from './polygonZkEvm.svg';
-// import { ReactComponent as Ronin } from './ronin.svg';
-// import { ReactComponent as Scroll } from './scroll.svg';
-// import { ReactComponent as Solana } from './solana.svg';
-// import { ReactComponent as Starknet } from './starknet.svg';
-// import { ReactComponent as Tezos } from './tezos.svg';
-// import { ReactComponent as ZkSync } from './zkSync.svg';
-
-import Aptos from './aptos.svg';
-import Arbitrum from './arbitrum.svg';
-import Aurora from './aurora.svg';
-import Avalanche from './avalanche.svg';
-import Base from './base.svg';
-import Bitcoin from './bitcoin.svg';
-import Bnb from './bnb.svg';
-import Cronos from './cronos.svg';
-import Ethereum from './ethereum.svg';
-import Fantom from './fantom.svg';
-import Filecoin from './filecoin.svg';
-import Fuse from './fuse.svg';
-import Gnosis from './gnosis.svg';
-import Harmony from './harmony.svg';
-import Near from './near.svg';
-import Optimism from './optimism.svg';
-import PolygonPOS from './polygonPOS.svg';
-import PolygonZkEvm from './polygonZkEvm.svg';
-import Ronin from './ronin.svg';
-import Scroll from './scroll.svg';
-import Solana from './solana.svg';
-import Starknet from './starknet.svg';
-import Tezos from './tezos.svg';
-import ZkSync from './zkSync.svg';
-
-// const iconTypes = {
-//   Aptos: <Aptos />,
-//   Arbitrum: <Arbitrum />,
-//   Aurora: <Aurora />,
-//   Avalanche: <Avalanche />,
-//   Base: <Base />,
-//   Bitcoin: <Bitcoin />,
-
-//   'BNB Chain': <Bnb />,
-//   'BNB Smart Chain': <Bnb />,
-
-//   Cronos: <Cronos />,
-//   Ethereum: <Ethereum />,
-//   Fantom: <Fantom />,
-//   Filecoin: <Filecoin />,
-//   Fuse: <Fuse />,
-
-//   Gnosis: <Gnosis />,
-//   'Gnosis Chain': <Gnosis />,
-
-//   Harmony: <Harmony />,
-//   Near: <Near />,
-//   Optimism: <Optimism />,
-
-//   Polygon: <PolygonPOS />,
-//   'Polygon POS': <PolygonPOS />,
-//   'Polygon zkEVM': <PolygonZkEvm />,
-
-//   Ronin: <Ronin />,
-//   Scroll: <Scroll />,
-//   Solana: <Solana />,
-//   Starknet: <Starknet />,
-//   Tezos: <Tezos />,
-//   zkSync: <ZkSync />,
-// };
-const iconTypes = {
-  Aptos: Aptos,
-  Arbitrum: Arbitrum,
-  Aurora: Aurora,
-  Avalanche: Avalanche,
-  Base: Base,
-  Bitcoin: Bitcoin,
-
-  'BNB Chain': Bnb,
-  'BNB Smart Chain': Bnb,
-
-  Cronos: Cronos,
-  Ethereum: Ethereum,
-  Fantom: Fantom,
-  Filecoin: Filecoin,
-  Fuse: Fuse,
-
-  Gnosis: Gnosis,
-  'Gnosis Chain': Gnosis,
-
-  Harmony: Harmony,
-  Near: Near,
-  Optimism: Optimism,
-
-  Polygon: PolygonPOS,
-  'Polygon POS': PolygonPOS,
-  'Polygon zkEVM': PolygonZkEvm,
-
-  Ronin: Ronin,
-  Scroll: Scroll,
-  Solana: Solana,
-  Starknet: Starknet,
-  Tezos: Tezos,
-  zkSync: ZkSync,
-};
-
-const ProtocolIcon = ({ protocolName }) => {
-  // return iconTypes[protocolName];
-  return <Image src={iconTypes[protocolName]} alt="" />;
-};
-
-export default ProtocolIcon;
diff --git a/src/components/ProtocolIcon/aptos.svg b/src/components/ProtocolIcon/aptos.svg
deleted file mode 100644
index 5792e2b..0000000
--- a/src/components/ProtocolIcon/aptos.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M10.165 3.193a.48.48 0 0 0 .342-.145l.68-.706a.45.45 0 0 1 .325-.14h.03a.44.44 0 0 1 .335.153l.575.645a.59.59 0 0 0 .431.193h1.538a8 8 0 0 0-2.832-2.35 8.06 8.06 0 0 0-7.177 0 8 8 0 0 0-2.832 2.35zm.812 2.157h4.602c.225.637.366 1.3.421 1.973h-5.968a.57.57 0 0 1-.43-.195l-.575-.645a.46.46 0 0 0-.339-.15h-.026a.45.45 0 0 0-.326.137l-.683.708a.47.47 0 0 1-.338.145H0A8 8 0 0 1 .42 5.35h7.75a.85.85 0 0 0 .635-.287l.492-.553a.452.452 0 0 1 .675 0l.574.645a.57.57 0 0 0 .431.195M4.61 11.434a.5.5 0 0 1-.184.038l-3.657.005a7.9 7.9 0 0 1-.66-1.994h5.209a.86.86 0 0 0 .637-.284l.493-.553a.44.44 0 0 1 .522-.113q.088.04.153.113l.574.645a.58.58 0 0 0 .429.192h7.767a7.9 7.9 0 0 1-.662 1.99H7.14a.58.58 0 0 1-.431-.196l-.572-.645a.46.46 0 0 0-.339-.15H5.77a.46.46 0 0 0-.325.137l-.68.708a.5.5 0 0 1-.155.107m.361 2.014h2.104l6.799.01a8 8 0 0 1-2.67 1.88 8.06 8.06 0 0 1-9.072-1.88h.031a.85.85 0 0 0 .636-.287l.494-.563a.455.455 0 0 1 .678 0l.571.645a.57.57 0 0 0 .43.195" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/arbitrum.svg b/src/components/ProtocolIcon/arbitrum.svg
deleted file mode 100644
index d97dfba..0000000
--- a/src/components/ProtocolIcon/arbitrum.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" fill="none"><path fill="#2D374B" d="m8.93 7.331 1.176-1.994 3.168 4.933.001.947-.01-6.515a.49.49 0 0 0-.227-.39l-5.704-3.28a.5.5 0 0 0-.487.031l-.02.013-5.536 3.207-.021.01a.489.489 0 0 0-.286.417l.009 5.308 2.95-4.572c.372-.607 1.181-.802 1.933-.791l.882.023-5.197 8.331.613.353 5.258-8.676 2.325-.008-5.245 8.894 2.185 1.257.262.15c.11.045.24.048.352.007l5.783-3.35-1.106.64zm.449 6.457L7.17 10.324 8.52 8.038l2.899 4.568z"/><path fill="#28A0F0" d="m7.171 10.324 2.208 3.464 2.039-1.181-2.9-4.57zM13.275 11.217l-.001-.947-3.168-4.933L8.93 7.331l3.059 4.945 1.105-.64a.5.5 0 0 0 .181-.357z"/><path fill="#fff" d="m0 12.11 1.562.9 5.196-8.332-.882-.023c-.751-.01-1.561.185-1.933.79l-2.95 4.573L0 11.543zM9.757 4.678l-2.324.008-5.259 8.676 1.838 1.058.5-.848z"/><path fill="#96BEDC" d="M14.255 4.666a1.48 1.48 0 0 0-.695-1.19L7.782.154a1.5 1.5 0 0 0-1.326 0C6.408.178.836 3.409.836 3.409A1.47 1.47 0 0 0 0 4.663v6.88l.993-1.525L.984 4.71l.007-.058a.5.5 0 0 1 .197-.311c.027-.02 5.692-3.298 5.71-3.307a.5.5 0 0 1 .436-.002l5.704 3.28c.135.085.22.231.227.39v6.576a.48.48 0 0 1-.17.357l-1.107.64-.57.332-2.04 1.181-2.067 1.198a.5.5 0 0 1-.352-.007l-2.447-1.407-.5.848 2.199 1.265.349.195c.156.076.38.12.584.12q.279 0 .538-.101l6.007-3.478c.345-.267.547-.67.566-1.106z"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/aurora.svg b/src/components/ProtocolIcon/aurora.svg
deleted file mode 100644
index 9d00bc6..0000000
--- a/src/components/ProtocolIcon/aurora.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#70D44B" d="M8 1.222a1.77 1.77 0 0 1 1.59.982l5 10A1.78 1.78 0 0 1 13 14.778H3a1.778 1.778 0 0 1-1.59-2.574l5-10A1.77 1.77 0 0 1 8 1.222M8 0a3 3 0 0 0-2.683 1.658l-5 10A3 3 0 0 0 3 16h10a3 3 0 0 0 2.683-4.342l-5-10A3 3 0 0 0 8 0"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/avalanche.svg b/src/components/ProtocolIcon/avalanche.svg
deleted file mode 100644
index 28acb21..0000000
--- a/src/components/ProtocolIcon/avalanche.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g clip-path="url(#a)"><path fill="#E84142" fill-rule="evenodd" d="M15.995 8c0 4.413-3.58 7.99-7.994 7.99C3.585 15.99.006 12.413.006 8 .006 3.589 3.586.012 8 .012s7.994 3.577 7.994 7.99m-10.26 3.18H4.184c-.326 0-.488 0-.586-.063a.4.4 0 0 1-.178-.308c-.006-.115.074-.257.235-.54l3.831-6.748c.163-.286.246-.43.35-.482a.4.4 0 0 1 .357 0c.104.053.187.196.35.482l.787 1.374.004.007c.176.308.266.464.305.627.043.179.043.367 0 .546-.04.165-.128.322-.307.634L7.32 10.264l-.005.009c-.177.31-.267.467-.392.585-.135.13-.298.224-.477.277-.163.045-.346.045-.71.045m3.918 0h2.223c.328 0 .493 0 .592-.064a.4.4 0 0 0 .178-.31c.006-.113-.073-.248-.227-.515l-.016-.027-1.114-1.904-.012-.022c-.157-.264-.236-.398-.337-.45a.39.39 0 0 0-.356 0c-.102.054-.184.193-.348.474l-1.11 1.904-.003.006c-.162.28-.244.42-.238.535a.4.4 0 0 0 .179.31c.096.063.261.063.59.063" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/base.svg b/src/components/ProtocolIcon/base.svg
deleted file mode 100644
index 4885897..0000000
--- a/src/components/ProtocolIcon/base.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#fff" d="M7.986 16C12.412 16 16 12.418 16 8s-3.588-8-8.014-8C3.786 0 .342 3.224 0 7.328h10.593v1.344H0C.342 12.776 3.787 16 7.986 16"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/bitcoin.svg b/src/components/ProtocolIcon/bitcoin.svg
deleted file mode 100644
index 2a14e3d..0000000
--- a/src/components/ProtocolIcon/bitcoin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#F7931A" fill-rule="evenodd" d="M6.064 15.76A7.999 7.999 0 1 0 9.935.239a7.999 7.999 0 0 0-3.871 15.523M9.768 4.843c1.108.382 1.919.954 1.76 2.018-.116.78-.548 1.157-1.121 1.29.787.41 1.188 1.038.806 2.128-.473 1.354-1.599 1.468-3.096 1.185l-.363 1.455-.878-.218.358-1.437q-.34-.084-.7-.181l-.359 1.443-.877-.219.364-1.458-.248-.065-.378-.097-1.143-.285.436-1.004s.647.172.638.159c.249.061.359-.1.403-.209l.574-2.3.092.022a1 1 0 0 0-.09-.03l.409-1.642c.01-.186-.054-.422-.41-.51.014-.01-.637-.159-.637-.159l.234-.937 1.21.302v.004q.272.068.56.132l.36-1.441.877.218-.353 1.414q.356.08.704.165l.35-1.404.877.219zM6.991 10.07c.717.19 2.282.603 2.531-.397.255-1.023-1.263-1.364-2.004-1.53q-.125-.027-.216-.05l-.482 1.933zm.676-2.823c.597.159 1.9.506 2.127-.402.231-.93-1.035-1.21-1.653-1.347l-.181-.042-.437 1.753z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/bnb.svg b/src/components/ProtocolIcon/bnb.svg
deleted file mode 100644
index 2eec090..0000000
--- a/src/components/ProtocolIcon/bnb.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" fill="none"><path fill="#F0B90B" d="M2.663 2.45 6.9 0l4.236 2.45-1.558.906L6.9 1.811 4.22 3.356zm8.473 3.091-1.558-.905L6.9 6.181 4.22 4.636l-1.557.905v1.811l2.68 1.546v3.09l1.557.906 1.557-.906v-3.09l2.679-1.546zm0 4.902v-1.81l-1.558.905v1.81zm1.106.64-2.68 1.545v1.811l4.237-2.45V7.086l-1.557.905zm-1.558-7.087 1.558.905v1.811l1.557-.905v-1.81l-1.557-.906zm-5.342 9.288v1.81L6.9 16l1.557-.905v-1.811l-1.557.905zm-2.679-2.841 1.558.905v-1.81l-1.558-.906zm2.68-6.447 1.557.905 1.557-.905L6.9 3.091zm-3.786.905 1.558-.905-1.558-.905L0 3.996v1.81l1.557.906zm0 3.091L0 7.087v4.901l4.236 2.451v-1.81l-2.679-1.546z"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/cronos.svg b/src/components/ProtocolIcon/cronos.svg
deleted file mode 100644
index 342386e..0000000
--- a/src/components/ProtocolIcon/cronos.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" fill="none"><path fill="#fff" fill-rule="evenodd" d="M6.925 0 0 3.999v8L6.925 16v-2.373l-4.873-2.814V5.181l4.873-2.81zm.005 16 6.925-3.999v-8L6.93 0v2.373l4.873 2.814v5.632l-4.873 2.81zm-.003-4.264 3.235-1.867-1.347-.78-1.888 1.091L5.04 9.09V6.91L6.927 5.82 8.815 6.91l1.347-.778-3.235-1.869-3.237 1.87v3.735z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/ethereum.svg b/src/components/ProtocolIcon/ethereum.svg
deleted file mode 100644
index b4cb9cc..0000000
--- a/src/components/ProtocolIcon/ethereum.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g fill="#fff" clip-path="url(#a)"><path d="M8.46 0v11.111l4.459-2.889z" opacity=".5" style="fill:#fff;fill-opacity:1"/><path d="M8.46 0 4 8.222l4.46 2.89z" opacity=".7" style="fill:#fff;fill-opacity:1"/><path d="m8.46 12 .001 4 4.458-6.889z" opacity=".5" style="fill:#fff;fill-opacity:1"/><path d="M8.46 16v-4L4 9.111z" opacity=".7" style="fill:#fff;fill-opacity:1"/><path d="m8.46 11.11 4.459-2.888-4.46-2.445z" opacity=".5" style="fill:#fff;fill-opacity:1"/><path d="m4 8.222 4.46 2.889V5.777z" opacity=".7" style="fill:#fff;fill-opacity:1"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z" style="fill:#fff;fill-opacity:1"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/fantom.svg b/src/components/ProtocolIcon/fantom.svg
deleted file mode 100644
index 34b9052..0000000
--- a/src/components/ProtocolIcon/fantom.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#1969FF" d="M7.31.153a1.6 1.6 0 0 1 1.363 0l3.952 2.086a.67.67 0 0 1 .384.495h.004v10.482a.65.65 0 0 1-.388.546l-3.951 2.085a1.6 1.6 0 0 1-1.364 0l-3.951-2.085a.64.64 0 0 1-.38-.545V2.734a.65.65 0 0 1 .38-.495zm5.08 8.43-3.716 1.96a1.6 1.6 0 0 1-1.364 0L3.6 8.587v4.61l3.71 1.947c.184.111.386.19.597.23l.085.006c.231-.024.455-.098.655-.219l3.744-1.982zM2.337 12.987c-.018.29.03.582.14.852.094.172.233.316.402.415l.012.008q.067.046.159.102l.073.045.224.135-.32.532-.252-.152-.042-.026a6 6 0 0 1-.19-.12c-.6-.405-.823-.846-.828-1.763v-.028zM7.68 5.773a1 1 0 0 0-.08.034L3.65 7.892l-.013.007-.003.002.006.003.009.005L7.6 9.995a1 1 0 0 0 .08.034zm.624 0v4.255a1 1 0 0 0 .079-.034l3.951-2.085.012-.007.003-.002-.006-.003-.009-.005-3.95-2.085a1 1 0 0 0-.08-.034m4.086-2.295-3.543 1.87 3.544 1.87zm-8.79.004v3.732l3.536-1.866zM8.383.702a.98.98 0 0 0-.783 0L3.65 2.789l-.013.007-.003.002.006.003.009.005L7.6 4.891a.98.98 0 0 0 .783 0l3.951-2.086.012-.006.003-.002-.006-.004-.009-.005zm4.592.23.25.151.043.026.19.12c.6.405.823.846.828 1.763v.028h-.622a1.9 1.9 0 0 0-.14-.851 1.1 1.1 0 0 0-.402-.416l-.012-.009-.159-.102-.073-.045-.224-.135z"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/filecoin.svg b/src/components/ProtocolIcon/filecoin.svg
deleted file mode 100644
index a6224da..0000000
--- a/src/components/ProtocolIcon/filecoin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#0090FF" fill-rule="evenodd" d="M8 16c-4.4 0-8-3.6-8-8.04.04-4.4 3.6-8 8.04-7.96C12.44.04 16 3.6 16 8.08 15.96 12.44 12.4 16 8 16m.76-8.96-.24 1.28 2.28.32-.16.6-2.24-.32c-.16.52-.24 1.08-.44 1.56-.2.56-.4 1.12-.64 1.64-.32.68-.88 1.16-1.64 1.28-.44.08-.92.04-1.28-.24-.12-.08-.24-.24-.24-.36 0-.16.08-.36.2-.44.08-.04.28 0 .4.04.12.12.24.28.32.44.24.32.56.36.88.12.36-.32.56-.76.68-1.2.24-.96.48-1.88.68-2.84v-.16L5.2 8.44l.08-.6 2.2.32.28-1.24-2.28-.36.08-.64 2.36.32c.08-.24.12-.44.2-.64.2-.72.4-1.44.88-2.08s1.04-1.04 1.88-1c.36 0 .72.12.96.4.04.04.12.12.12.2 0 .16 0 .36-.12.48-.16.12-.36.08-.52-.08-.12-.12-.2-.24-.32-.36-.24-.32-.6-.36-.88-.08-.2.2-.4.48-.52.76-.28.84-.48 1.72-.76 2.6l2.2.32-.16.6z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/fuse.svg b/src/components/ProtocolIcon/fuse.svg
deleted file mode 100644
index 1a666df..0000000
--- a/src/components/ProtocolIcon/fuse.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M4.311 1.501 6.86.031a.24.24 0 0 1 .235 0l6.716 3.873c.073.042.117.12.118.203l.009 2.663a.24.24 0 0 1-.118.205l-2.545 1.467a.235.235 0 0 1-.353-.203l-.008-2.39a.24.24 0 0 0-.118-.203L4.31 1.908a.235.235 0 0 1 0-.407M2.666 13.566l-2.548-1.47A.23.23 0 0 1 0 11.894V4.148c0-.084.045-.161.117-.204l2.306-1.34a.23.23 0 0 1 .236 0l2.544 1.468a.235.235 0 0 1 .001.407L3.136 5.68a.23.23 0 0 0-.117.204v7.478a.235.235 0 0 1-.353.203m11.272-1.674V8.955a.235.235 0 0 0-.354-.204L7.1 12.49a.24.24 0 0 1-.235 0L4.79 11.302a.236.236 0 0 0-.353.204v2.934c0 .085.045.163.119.205l2.314 1.324a.23.23 0 0 0 .235 0l6.716-3.873a.23.23 0 0 0 .118-.203" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/gnosis.svg b/src/components/ProtocolIcon/gnosis.svg
deleted file mode 100644
index f00a561..0000000
--- a/src/components/ProtocolIcon/gnosis.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#fff" fill-rule="evenodd" d="M8.004 0c2.278 0 4.335.955 5.787 2.48.202.202.391.429.55.649l-6.343 6.35-6.345-6.344a10 10 0 0 1 .564-.655A7.98 7.98 0 0 1 8.004 0m4.917 3.08a6.86 6.86 0 0 0-4.917-2.039A6.87 6.87 0 0 0 3.086 3.08l4.918 4.917zm1.929.778L13.558 5.15a2.94 2.94 0 0 1-4.14 4.14l-1.414 1.413L6.589 9.29a2.94 2.94 0 0 1-4.14-4.14l-.66-.66-.632-.631A7.995 7.995 0 0 0 7.997 16a8 8 0 0 0 7.998-7.997 7.8 7.8 0 0 0-1.145-4.145M12.945 5.75c.276.355.435.796.435 1.273A2.07 2.07 0 0 1 11.304 9.1a2.04 2.04 0 0 1-1.273-.435zM5.983 8.67a2.07 2.07 0 0 1-1.274.435A2.07 2.07 0 0 1 2.633 7.03c0-.483.16-.924.435-1.273z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/harmony.svg b/src/components/ProtocolIcon/harmony.svg
deleted file mode 100644
index ee92b9c..0000000
--- a/src/components/ProtocolIcon/harmony.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="url(#a)" d="M6.885 7.249h2.152V3.475a3.46 3.46 0 0 1 .673-2.07A3.44 3.44 0 0 1 11.485.15a3.43 3.43 0 0 1 3.879 1.402c.366.541.56 1.18.559 1.835v9.182c0 1.853-1.504 3.4-3.305 3.415-1.998.018-3.558-1.442-3.58-3.37-.015-1.284 0-2.57 0-3.863H6.886v3.774a3.46 3.46 0 0 1-.673 2.07 3.44 3.44 0 0 1-1.775 1.255 3.434 3.434 0 0 1-3.879-1.402A3.26 3.26 0 0 1 0 12.613q.008-4.59 0-9.182C0 1.574 1.494.031 3.301.015 5.3-.002 6.86 1.458 6.881 3.387c.019 1.283.004 2.568.004 3.862M5.44 7.46c0-1.419.057-2.791-.018-4.159-.063-1.157-1.021-1.93-2.116-1.863-1.094.069-1.887.957-1.89 2.119v5.38C2.666 8.08 4.022 7.72 5.44 7.46m5.028 1.081c0 1.388-.051 2.733.016 4.072.061 1.215 1.01 2.018 2.135 1.947 1.103-.068 1.887-.962 1.887-2.166V7.056c-1.252.875-2.615 1.22-4.038 1.486m.005-1.412c.735-.224 1.423-.38 2.069-.64 1.243-.505 2.09-1.12 1.978-2.905-.076-1.188-.81-2.089-1.917-2.148-1.108-.06-2.045.728-2.115 1.92-.07 1.193-.015 2.417-.015 3.774zm-5.07 1.758c-.652.193-1.307.348-1.933.581-1.655.621-2.148 1.398-2.055 3.153.025.5.231.972.58 1.33a2.04 2.04 0 0 0 1.311.61c.99.06 2.003-.635 2.072-1.603.095-1.312.024-2.643.024-4.07"/><defs><linearGradient id="a" x1="1.008" x2="14.928" y1="14.808" y2=".955" gradientUnits="userSpaceOnUse"><stop stop-color="#00AEE9"/><stop offset="1" stop-color="#69FABD"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/near.svg b/src/components/ProtocolIcon/near.svg
deleted file mode 100644
index 7330ea0..0000000
--- a/src/components/ProtocolIcon/near.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="currentColor" d="m12.821.818-3.338 4.96c-.231.338.213.746.532.462l3.286-2.862c.089-.071.213-.018.213.106v8.943c0 .124-.16.178-.231.088L3.339.605A1.64 1.64 0 0 0 2.042 0h-.355C.764 0 0 .764 0 1.707v12.586C0 15.236.764 16 1.705 16c.586 0 1.136-.302 1.456-.818l3.338-4.96c.231-.338-.213-.746-.532-.462L2.68 12.605c-.088.07-.213.017-.213-.107V3.573c0-.124.16-.177.231-.089l9.945 11.912c.32.39.799.604 1.296.604h.355c.941 0 1.705-.764 1.705-1.707V1.707A1.733 1.733 0 0 0 14.277 0c-.586 0-1.136.302-1.456.818"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/optimism.svg b/src/components/ProtocolIcon/optimism.svg
deleted file mode 100644
index 1771918..0000000
--- a/src/components/ProtocolIcon/optimism.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#FF0420" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path fill="#fff" d="M5.668 10.126q-.714 0-1.17-.336-.45-.342-.45-.973 0-.132.03-.324.077-.432.221-1.039.408-1.65 2.108-1.65.462 0 .828.155.367.15.577.457.21.3.21.72 0 .126-.03.318a14 14 0 0 1-.216 1.04q-.21.821-.727 1.23-.516.402-1.38.402m.084-.864a.85.85 0 0 0 .57-.199q.24-.198.343-.606.138-.564.21-.985.024-.126.024-.258 0-.546-.57-.546a.88.88 0 0 0-.577.198q-.234.198-.336.606-.108.403-.216.985-.024.12-.024.252 0 .553.576.553M8.298 10.066a.13.13 0 0 1-.102-.042.14.14 0 0 1-.018-.108l.828-3.903a.17.17 0 0 1 .066-.108.2.2 0 0 1 .114-.042h1.597q.667 0 1.07.276.407.277.408.799 0 .15-.036.312-.15.69-.607 1.02-.45.331-1.237.331h-.81l-.277 1.315a.17.17 0 0 1-.066.108.2.2 0 0 1-.114.042zm2.125-2.293a.7.7 0 0 0 .438-.139.65.65 0 0 0 .253-.396q.018-.102.018-.18 0-.174-.102-.264-.103-.096-.349-.096h-.72l-.228 1.075z"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/polygonPOS.svg b/src/components/ProtocolIcon/polygonPOS.svg
deleted file mode 100644
index 55956ab..0000000
--- a/src/components/ProtocolIcon/polygonPOS.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="16" fill="none"><path fill="url(#a)" d="m13.36 11.268 4.267-2.474a.74.74 0 0 0 .366-.637V3.21a.74.74 0 0 0-.366-.637L13.36.098a.73.73 0 0 0-.732 0L8.36 2.572a.74.74 0 0 0-.366.637v8.843L5 13.786l-2.993-1.734v-3.47L5 6.848l1.974 1.145V5.665l-1.608-.933a.74.74 0 0 0-.732 0L.366 7.207A.74.74 0 0 0 0 7.843v4.948c0 .262.14.506.366.637l4.268 2.474c.226.13.506.13.732 0l4.268-2.474a.74.74 0 0 0 .366-.637V3.95l.053-.03 2.939-1.704 2.993 1.734v3.47l-2.993 1.733-1.971-1.142v2.328l1.605.93c.226.13.507.13.732 0z"/><defs><linearGradient id="a" x1="-.058" x2="17.255" y1="13.276" y2="3.267" gradientUnits="userSpaceOnUse"><stop stop-color="#A726C1"/><stop offset=".88" stop-color="#803BDF"/><stop offset="1" stop-color="#7B3FE4"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/polygonZkEvm.svg b/src/components/ProtocolIcon/polygonZkEvm.svg
deleted file mode 100644
index 3ef2255..0000000
--- a/src/components/ProtocolIcon/polygonZkEvm.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="15" height="17" fill="none"><path fill="#7B4EE7" fill-rule="evenodd" d="m7.14 1.356 5.986 3.455v.608l-.605 1.149a1.91 1.91 0 0 1-1.686 1.018H3.49c-.922 0-1.775.423-2.334 1.119V4.81zm-5.984 9.852v.514l5.985 3.456 5.985-3.456V7.609a3 3 0 0 1-2.291 1.066H3.49c-.779 0-1.48.475-1.77 1.198l-.472 1.183a.5.5 0 0 1-.092.152M14.215 5.62v6.101c0 .39-.208.749-.545.943l-5.985 3.456a1.09 1.09 0 0 1-1.089 0L.611 12.665a1.09 1.09 0 0 1-.544-.943v-6.91c0-.39.207-.75.544-.944L6.596.413a1.09 1.09 0 0 1 1.09 0l5.984 3.455c.337.195.545.554.545.943v.656a.5.5 0 0 1 0 .154M3.329 5.135c0-.601.487-1.089 1.089-1.089h1.361c.602 0 1.09.488 1.09 1.09v1.633h-1.09V5.135H4.418V6.77h-1.09zm1.089 7.216a1.09 1.09 0 0 1-1.09-1.09V9.629h1.09v1.634h1.361V9.628h1.09v1.634a1.09 1.09 0 0 1-1.09 1.089zm3.267-7.216c0-.601.488-1.089 1.09-1.089h1.36c.602 0 1.09.488 1.09 1.09v1.633h-1.09V5.135h-1.36V6.77h-1.09zm1.09 7.216a1.09 1.09 0 0 1-1.09-1.09V9.629h1.09v1.634h1.36V9.628h1.09v1.634a1.09 1.09 0 0 1-1.09 1.089z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/ronin.svg b/src/components/ProtocolIcon/ronin.svg
deleted file mode 100644
index a482c47..0000000
--- a/src/components/ProtocolIcon/ronin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#004DE5" fill-rule="evenodd" d="M2 1.23v9.872c0 .184.044.366.128.532s.207.313.358.428l4.906 3.736c.172.13.387.202.608.202s.436-.071.608-.203l4.906-3.735c.151-.115.274-.261.358-.428s.128-.348.128-.532V1.23a1.2 1.2 0 0 0-.38-.87A1.33 1.33 0 0 0 12.703 0H3.297c-.344 0-.674.13-.917.36a1.2 1.2 0 0 0-.38.87" clip-rule="evenodd" style="fill:#004de5;fill:color(display-p3 0 .302 .898);fill-opacity:1"/><path fill="url(#a)" d="M11.998 5.727V3.242c0-.33-.135-.645-.375-.878A1.3 1.3 0 0 0 10.718 2H5.28a1.3 1.3 0 0 0-.905.364c-.24.233-.375.549-.375.878v7.21c0 .187.043.37.126.538s.204.315.354.432l1.98 1.543q.037.028.082.034a.16.16 0 0 0 .154-.072.15.15 0 0 0 .025-.083V7.746c0-.04.017-.08.047-.11q.047-.044.113-.045h1.44c.254 0 .498.098.678.273s.281.412.281.659v4.321q0 .045.025.083a.164.164 0 0 0 .235.038l1.98-1.543c.15-.117.27-.264.354-.432s.126-.351.126-.538v-2.24c0-.33-.135-.645-.375-.878a1.3 1.3 0 0 0-.905-.364 1.3 1.3 0 0 0 .904-.365c.24-.233.374-.549.374-.878m-3.68.622H6.88a.16.16 0 0 1-.113-.046.15.15 0 0 1-.047-.11V3.398q.001-.063.047-.11.047-.045.113-.046h2.24c.042 0 .083.017.113.046q.045.047.046.11v2.019a.92.92 0 0 1-.28.659.98.98 0 0 1-.68.273"/><defs><linearGradient id="a" x1="8" x2="8" y1="2" y2="13" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" style="stop-color:white;stop-opacity:1"/><stop offset=".458" stop-color="#fff" style="stop-color:white;stop-opacity:1"/><stop offset="1" stop-color="#fff" style="stop-color:white;stop-opacity:1"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/scroll.svg b/src/components/ProtocolIcon/scroll.svg
deleted file mode 100644
index a84e97b..0000000
--- a/src/components/ProtocolIcon/scroll.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill="#CBA68D" d="M1.795 1.019c-.26-.013-.53-.027-.76.162-.115.095-.26.244-.205.437q.009.028.022.055l.008.014.022.034q.005.007.012.013.012.015.026.028l.015.01q.015.013.032.023l.018.009.037.017.021.006.042.011.026.005.044.006.034.001.034.002h.02a31 31 0 0 1 1.053-.002h.078l-.006.04-.008.047-.01.046-.009.045-.012.044-.011.042-.014.043-.014.04-.016.04-.016.037-.018.038-.018.035-.02.036-.02.033-.023.033-.022.03-.025.032-.024.028-.028.03-.025.025-.03.028-.027.023-.034.026-.028.02q-.018.013-.038.024l-.029.019q-.02.012-.042.022l-.028.015-.05.023-.026.01a1.3 1.3 0 0 1-.192.062l-.036.007-.078.015-.052.007-.061.007-.062.003-.051.003h-.113q-.036 0-.07-.003l-.042-.002q-.036-.002-.07-.006-.02 0-.041-.003l-.062-.007-.045-.005c-.6-.477-.802-1.16-.542-1.826C.455.366 1.03.029 1.852.079q.277.093.534.233l.083.05q.042.027.08.055h.002l.076.058.002.002q.036.03.071.062l.004.004q.033.03.065.064l.007.008q.03.032.058.066l.011.015q.025.03.048.064l.017.026q.02.028.037.058l.024.042.025.047.03.065.01.024-1.107.003z"/><path fill="#2B2129" d="M1.146 2.983h-.09L.998 2.98l-.3-.026L.68 2.94C.055 2.442-.156 1.727.117 1.03.398.307 1-.047 1.857.005l.02.004A3.2 3.2 0 0 1 2.508.3a2 2 0 0 1 .241.185 2 2 0 0 1 .141.15l.012.015q.027.032.051.068l.012.018A2 2 0 0 1 3.03.84l-.056.051.065-.035a1 1 0 0 1 .055.112l.053.126L1.93 1.1l-.135-.006h-.004c-.258-.013-.502-.026-.709.145-.159.132-.214.243-.18.36q.007.022.016.042l.023.036c.016.018.021.024.028.03l.035.025.014.007q.015.008.03.013l-.004.076.022-.07.034.01.023.003.039.005.062.003h.017c.28-.006.566-.004.82-.003l.398.001-.017.118-.068.009.065.01-.014.075-.077.007.073.015-.017.071-.078.003.072.019-.02.067-.078-.002.07.023-.024.064-.077-.007.07.027-.028.06-.076-.012.066.032-.014.027-.016.03-.075-.019.064.037-.016.026-.018.027-.074-.024.061.041-.017.024q-.01.014-.02.026l-.072-.03.058.047-.018.021-.023.025-.069-.036.054.051-.02.02-.025.022-.065-.04.05.055-.021.018-.028.02-.063-.045.045.059-.021.015-.03.02-.06-.05.04.062-.021.014-.035.018-.055-.054.035.065-.02.01q-.022.012-.046.021l-.047-.06.03.068-.018.007a1.4 1.4 0 0 1-.203.065l-.025.005-.028-.07.005.075-.071.014-.037.004-.036.004a1 1 0 0 1-.093.009l-.07.003zm-.042-.149h.065l.067-.003.041-.002.04-.005.069-.008.063-.013.045-.009a1.3 1.3 0 0 0 .182-.058l.023-.01.047-.02.037-.02.03-.016.249-.215.148-.257.077-.274H2.06a31 31 0 0 0-.816.002h-.02l-.028-.001-.017-.075-.003.074a.55.55 0 0 1-.285-.092.2.2 0 0 1-.052-.048.2.2 0 0 1-.043-.06l-.01-.018a.4.4 0 0 1-.027-.067c-.076-.262.153-.452.229-.515.25-.207.548-.192.81-.179l-.003.074L1.8.945h.004l.128.006.99-.003-.012-.02-.025-.046-.035-.055-.016-.025-.046-.06.047-.06-.058.046a1.3 1.3 0 0 0-.194-.193A1.5 1.5 0 0 0 2.35.377a3 3 0 0 0-.513-.225C1.057.108.51.43.255 1.082c-.246.63-.058 1.274.502 1.73l.235.02.068.002h.044"/><path fill="#2B2129" d="m1.964 1.09.022.018q.01.007.021.017l.022.018.02.018.02.017.022.021V1.2q.104.095.176.214.015.024.028.049v.002l.023.048.002.004.018.049.002.006.014.049.003.009.009.047.002.014.005.045.002.019.001.042v.02l-.317-.001-.227-.001q-.295-.001-.59.004c-.213.003-.337-.065-.38-.21-.05-.175.087-.313.194-.402a.7.7 0 0 1 .123-.08l.004-.002a.7.7 0 0 1 .126-.047l.008-.002a1 1 0 0 1 .129-.023l.01-.001.061-.005h.017l.051-.001h.012l.094.001h.005l.098.005q.064.004.13.006l.018.014z"/><path fill="#2B2129" d="M1.227 1.893q-.358 0-.436-.264c-.07-.24.147-.42.218-.479l.061-.045.016-.01a.7.7 0 0 1 .129-.064l.017-.007A1 1 0 0 1 1.364.99L1.38.987a1 1 0 0 1 .133-.014h.015a2 2 0 0 1 .166 0l.103.005.128.006h.024l.032.025-.033.068.045-.058.033.026-.033.068.046-.058.031.026-.035.068.048-.057.029.026-.038.066.05-.055.018.017a1.1 1.1 0 0 1 .218.283.8.8 0 0 1 .087.3l.002.021.001.042v.099l-.619-.002a24 24 0 0 0-.604.004m.15-.83.013.072a.7.7 0 0 0-.174.056l-.05.029-.014.008-.049.036c-.147.122-.2.222-.17.324.022.075.077.16.308.157q.295-.006.59-.004l.521.002.021-.007-.074.006a.7.7 0 0 0-.03-.147 1 1 0 0 0-.065-.142 1 1 0 0 0-.163-.2l-.144-.122-.107-.005-.097-.005a3 3 0 0 0-.157 0l-.02-.074.004.074a1 1 0 0 0-.115.012z"/><path fill="#BB9168" d="M2.604 3.214a5.8 5.8 0 0 1-1.323-.067 1.03 1.03 0 0 1-.514-.226q.01 0 .02.002a4 4 0 0 0 .208.016l.06.002.045.001h.045a2 2 0 0 0 .201-.014l.046-.006q.041-.006.082-.015l.04-.007a1.4 1.4 0 0 0 .203-.064c.397-.161.623-.485.69-.986h.002v-.015l.003-.018H2.41v-.052l-.003-.022q0-.022-.004-.043-.001-.014-.004-.026l-.007-.037-.006-.026-.01-.034-.008-.025-.011-.032-.01-.025-.014-.03-.012-.023a.8.8 0 0 0-.133-.19l-.02-.022-.019-.02-.021-.021-.02-.019-.022-.02-.02-.018-.022-.02-.02-.017L2 1.075l-.02-.015-.002-.002 1.074-.003q.014.022.027.043l.024.039.023.047.019.04.017.049.015.04.012.05q.006.02.01.04.006.026.01.05l.007.04.006.054.004.034.004.063.002.024.002.084c.004.347.004.7.004 1.042v.415c-.211-.006-.426 0-.634.005"/><path fill="#2B2129" d="M2.165 3.295a4.5 4.5 0 0 1-.899-.076 1.1 1.1 0 0 1-.55-.244l-.164-.153.223.025.009.055.006-.006.005-.047.306.02.015.073.001-.074h.027l.075-.003.045-.003.073-.007.044-.006.078-.014.038-.008a1.3 1.3 0 0 0 .192-.06c.37-.15.581-.453.645-.926l.002-.014V1.77l.071-.026-.074.006q0-.023-.003-.04l-.05-.18-.113-.187-.233-.224-.167-.131.21-.003L3.09.981l.023.032.023.036.014.022a1 1 0 0 1 .037.07l.012.024a1 1 0 0 1 .029.07l.009.026a1 1 0 0 1 .021.07l.007.027a1 1 0 0 1 .015.07l.01.054.005.046-.071.033.073-.01.003.023.004.064.002.027.002.086c.004.346.004.697.004 1.037v.497l-.076-.002c-.21-.006-.424 0-.63.005l-.002-.074v.074q-.217.006-.439.007m.436-.155.003.074zq.276-.01.562-.007v-.339a81 81 0 0 0-.006-1.123l.072-.027-.074.004q0-.032-.004-.06l-.003-.033-.006-.052-.007-.037-.008-.047-.01-.038-.012-.046-.014-.038c-.008-.024-.011-.034-.016-.044l-.01-.022-.007-.015-.021-.044-.013-.021-.01-.014-.004-.008-.836.002.162.193.09.169.01.033.01.03.01.033.008.032.006.036.006.033.004.044v.01h.013l-.01.1v.009l-.003.071h-.01c-.081.494-.32.815-.726.98a1.4 1.4 0 0 1-.215.068l-.028.005c-.042.009-.07.014-.1.019l-.045.006-.082.008-.048.003-.081.002-.03.001h-.04q.108.037.22.058c.431.071.869.094 1.305.066"/><path fill="#E5D1B8" d="m5.62 15.887-.01.02q-.008.01-.012.019h-.681a1 1 0 0 1-.277-.048l-.026-.007c-.851-.205-1.375-.914-1.367-1.85a818 818 0 0 0 .015-7.834l-.003-2.93v-.449c0-.34 0-.694-.004-1.04a1.3 1.3 0 0 0-.135-.633 1 1 0 0 0-.054-.088 1 1 0 0 0-.043-.099L3.006.917Q2.991.885 2.973.855 2.963.837 2.952.82 2.936.792 2.919.768L2.894.733 2.86.687 2.832.654 2.796.612l-.03-.031a1.4 1.4 0 0 0-.3-.24 2 2 0 0 0-.212-.116l-.042-.02-.044-.02-.044-.02L2.08.148l-.047-.02-.038-.014-.052-.02L1.94.093 1.971.09q.122-.007.246-.008l2.966.001C7.58.087 10.06.09 12.497.074h.01a1.73 1.73 0 0 1 1.236.528c.34.338.532.797.534 1.276-.022 2.642-.017 5.329-.012 7.927l.005 2.938-.13.003q-.155.003-.312.004l-7.137.002H5.74l-.04-.002a1 1 0 0 1-.088-.005 1.36 1.36 0 0 0-1.32.514 1.4 1.4 0 0 0-.164.287 1.4 1.4 0 0 0 .41 1.681l.042.04.005.004-.005-.004.108.03h-.078a.92.92 0 0 0 .567.249q.083.009.167.014l.06.003.108.005h.006q.165.005.326.005h.03q.11 0 .218.003a.3.3 0 0 1-.041.037l-.008.006-.045.03-.01.005-.048.025-.01.005-.05.022h-.001l-.058.027-.024.011-.015.009-.025.013-.016.01-.022.014-.016.012-.02.016-.014.014-.019.018-.013.017z"/><path fill="#2B2129" d="M5.598 16h-.681q-.151-.006-.295-.05l-.027-.007c-.885-.214-1.43-.95-1.422-1.922.022-2.61.018-5.263.015-7.83l-.003-2.934V2.81c0-.346 0-.696-.004-1.04a1.25 1.25 0 0 0-.126-.599 1 1 0 0 0-.05-.08l-.009-.016-.04-.094L2.94.95 2.91.891 2.888.858 2.858.81 2.83.771 2.802.733 2.782.71l-.04-.048-.024-.024-.041-.041-.03-.028-.038-.033-.033-.027-.039-.03-.272-.166-.347-.15L1.58.038l.387-.02c.18-.01.364-.01.546-.01l2.67.002h.05c2.38.003 4.843.005 7.264-.01a1.81 1.81 0 0 1 1.298.55c.354.352.554.83.556 1.33-.022 2.639-.017 5.323-.012 7.92l.005 2.943v.073l-.203.004q-.158.004-.313.004l-8.089.002-.04-.002a1 1 0 0 1-.099-.006 1.29 1.29 0 0 0-1.232.462l-.017.023a1.3 1.3 0 0 0-.156.272 1.33 1.33 0 0 0 .389 1.595l.033.03.637.183-.413-.008a1 1 0 0 0 .343.097q.081.009.164.014l.081.004.084.004q.172.005.33.005h.016c.088 0 .16.002.234.003l.164.003-.112.121a.4.4 0 0 1-.11.086l-.064.034-.142.064-.048-.058.034.066-.022.012-.053-.054.04.063-.02.012-.058-.05.045.06-.017.012-.063-.041.052.053-.014.014-.069-.032.058.045-.048.076zM3.131 1.012q.03.042.054.087c.103.207.152.437.144.668.004.345.004.696.004 1.035v.455q0 1.466.003 2.93c.003 2.571.007 5.225-.015 7.836-.007.899.495 1.58 1.31 1.777l.028.007q.125.038.258.045h.638l.004-.005.016-.023a.4.4 0 0 1 .038-.042l.02-.02.021-.017.13-.077.046-.021c-.112 0-.213-.002-.315-.005q-.052 0-.094-.004l-.083-.004-.17-.014a1 1 0 0 1-.612-.271l-.071-.069a2 2 0 0 1-.144-.133l-.033-.031.006.001a1.46 1.46 0 0 1-.255-1.6 1.5 1.5 0 0 1 .173-.301l.02-.026a1.43 1.43 0 0 1 1.369-.518 1 1 0 0 0 .078.005l.044.001 8.085-.002q.154 0 .306-.004l.062-.001q0-1.432-.005-2.866c-.005-2.602-.01-5.287.012-7.927-.003-.46-.187-.9-.513-1.224a1.66 1.66 0 0 0-1.183-.506c-2.431.015-4.894.013-7.275.01h-.049l-2.9-.001.26.147.045.03.037.026.043.033.036.03.041.035.034.032q.02.019.04.04l.032.032.035.041.032.038.032.043-.048.06.06-.044.018.026.03.048-.05.058.062-.04.016.026.032.06-.057.051.065-.035.011.022q.023.047.042.096"/><path fill="#BB9168" d="M5.977 14.457q.011-.08.013-.161a.55.55 0 0 0-.145-.451l-.035-.05-.009-.014-.024-.037-.011-.019-.019-.034-.01-.022-.01-.021h.005l.832-.014q.014.024.026.048l.036.066.024.057q.016.03.027.063.012.033.02.065l.02.059.016.075.01.05q.008.048.011.096l.004.03a1.52 1.52 0 0 1-.394 1.1l-.038.04q-.03.031-.06.062-.051.05-.107.098l-.279-.004q-.162 0-.326-.005h-.009q-.04 0-.08-.003a4 4 0 0 1-.332-.03q-.012 0-.024-.004l-.049-.01-.027-.007-.042-.012-.027-.01a.8.8 0 0 1-.237-.125l-.02-.017-.02-.018h.112a1.5 1.5 0 0 0 .598-.082q.078-.032.151-.077a.92.92 0 0 0 .429-.682"/><path fill="#2B2129" d="M6.185 15.617h-.028q-.135-.003-.271-.004-.17 0-.335-.005l-.09-.004a4 4 0 0 1-.34-.03l-.017-.003-.06-.012-.021-.006-.054-.015-.023-.007-.048-.018-.025-.01-.043-.02-.028-.014-.036-.02-.026-.017-.034-.023-.07-.057-.135-.126.185-.002.113-.001c.193.012.387-.013.57-.075a.84.84 0 0 0 .535-.7q.01-.078.012-.154a.5.5 0 0 0-.132-.407l-.044-.065-.026-.04-.008-.014-.025-.043-.062-.148.107-.003.88-.015.021.037.02.034.017.032a1 1 0 0 1 .047.096l.015.035a1 1 0 0 1 .037.1l.012.036a1 1 0 0 1 .027.108l.007.033.007.035q.009.05.012.101l.004.032a1.6 1.6 0 0 1-.438 1.18l-.025.028-.05.052a2 2 0 0 1-.113.101zM4.94 15.37l.013.006.036.013.025.008.039.011.026.007.045.01.01.077.013-.073.072.01q.124.013.25.018l.08.003q.174.005.333.005.13 0 .251.003.043-.037.083-.076l.045-.047.027-.03.021-.021a1.44 1.44 0 0 0 .376-1.046l-.003-.028a1 1 0 0 0-.016-.118l-.008-.037q-.005-.028-.012-.055l-.011-.035-.013-.04-.013-.041-.017-.041-.017-.04-.015-.033-.024-.045-.015-.026-.67.01.013.021-.053.055.062-.041.033.048a.62.62 0 0 1 .158.509q0 .079-.013.157a.99.99 0 0 1-.625.817c-.155.058-.32.087-.486.085m.86-1.65-.022.024.038-.024z"/><path fill="#2B2129" d="M5.96 14.278h-.238l-.702-.004h-.021c-.113 0-.22 0-.258-.133a.31.31 0 0 1 .091-.314l.053-.05.017-.015.039-.03.018-.013.045-.027.012-.008.057-.026.02-.008a1 1 0 0 1 .104-.028l.023-.005.06-.007.026-.002.04-.001h.029q.022 0 .046.002h.023l.073.008h.008l.076.012h.004l.085.017.014.03q.004.014.01.024l.02.037.012.02.025.039.01.015.037.053q.016.024.033.047.003.006.007.01l.025.039.006.01.022.039.004.009.02.042.003.008q.008.022.015.044l.002.01.009.045v.015l.001.043-.002.026z"/><path fill="#2B2129" d="M6.021 14.352h-.3l-.702-.004H5c-.117 0-.276-.001-.33-.187a.38.38 0 0 1 .11-.384l.057-.056.015-.012.046-.037.021-.014.05-.03.014-.009.063-.03.017-.006.05-.017.027-.007.044-.01.026-.005.065-.008.02-.001.051-.002h.03q.026 0 .05.002l.025.001a2 2 0 0 1 .255.037l.04.009.031.075.02.04.008.012c.013.022.02.034.029.046l-.052.056.062-.041.07.1.033.05a1 1 0 0 1 .058.111.6.6 0 0 1 .033.128l.001.018a.4.4 0 0 1-.006.114zm-.062-.127v.001l.007-.001zm-1.074-.448.05.055-.049.046a.24.24 0 0 0-.074.242c.02.07.056.08.187.08h.021l.702.003h.17a.4.4 0 0 0-.009-.064.3.3 0 0 0-.033-.087l-.025-.043-.116-.173-.026-.04-.009-.016-.026-.046-.009-.02.004-.002-.127-.02-.077-.008-.022-.002-.044-.001h-.026l-.037.001-.024.002-.054.006-.021.005-.035.007-.022.007-.035.011-.046-.062.028.069a.6.6 0 0 0-.1.054l-.015.01-.037.028zm.8-.102-.002.006.017-.013z"/><path fill="#CBA58C" d="M5.704 13.615c-.312-.065-.636-.087-.896.19a.34.34 0 0 0-.1.345c.045.156.176.157.29.157h.022q.34.003.683.003l.253.001-.002.032-.002.039-.005.039-.004.037-.007.037-.006.036-.01.036-.008.034-.01.035-.012.032-.013.033-.012.03-.016.032-.014.03-.018.03-.016.027-.02.028-.019.026-.021.026-.02.025-.025.025-.022.022-.027.023-.023.02-.03.023-.024.018-.034.022-.024.015-.04.02q-.01.008-.022.013l-.066.03c-.188.064-.387.09-.585.078l-.148.001-.018-.017.019.017-.069-.063a1.36 1.36 0 0 1-.357-1.744l.017-.03.036-.063.023-.034.037-.053.026-.033a1 1 0 0 1 .113-.124q.013-.015.028-.027.024-.023.052-.044l.025-.021q.034-.026.07-.05l.013-.009q.044-.028.089-.053l.016-.007q.037-.02.076-.037l.03-.012.066-.026.035-.01a1.3 1.3 0 0 1 .28-.058l.036-.004.081-.004h.03q.04 0 .083.002l.034.001.118.012q.045.006.092.006l.028.001.004.015.004.017.008.02.008.014.01.016.01.013.014.014.01.01.016.012.011.008.019.01.01.007.022.011.01.005.03.014.02.009a1 1 0 0 1 .1.052l.03.02q.033.018.063.04l.03.024q.029.02.055.044l.028.026q.026.024.05.05l.024.029.045.054.023.034.039.058.023.042.03.056.027.06.016.036z"/><path fill="#2B2129" d="m4.623 15.34-.022-.02-.068-.064a1.43 1.43 0 0 1-.373-1.833l.012-.021.045-.077.017-.027.046-.065.027-.034.042-.052.03-.032.047-.048.03-.028.055-.047.027-.022.074-.053.014-.01q.045-.028.094-.055l.017-.008q.04-.021.08-.039l.022-.009.08-.03.03-.01.076-.023.04-.01.07-.014.04-.007.075-.009.039-.004.084-.004h.031q.044 0 .088.002l.034.001q.062.004.124.013a1 1 0 0 0 .083.005l.085.003.036.11.032.031.11.059q.056.025.108.055l.02.013-.021.074.039-.063.06.04.022.017-.035.067.054-.053.05.041.02.02-.041.062.057-.048a1 1 0 0 1 .065.069l-.044.062.056-.048a1 1 0 0 1 .061.078l-.053.054.064-.038q.02.028.038.057l.018.032-.058.049.07-.028a1 1 0 0 1 .052.107l-.05.037v.004l.057-.025.052.13-.96.015-.008-.002c-.336-.07-.605-.068-.827.168a.27.27 0 0 0-.082.275c.026.093.087.103.22.103h.02q.341.003.683.003l.33.002-.011.183-.076.009.074.008-.01.062-.075.004.073.013-.013.06-.076-.001.071.018-.016.056-.076-.005.07.022-.019.054-.075-.011.069.027-.023.051-.075-.016.067.032-.027.048-.073-.022.064.038-.03.045-.07-.027.06.042-.033.043-.069-.033.057.047-.036.04-.066-.038.053.051-.039.037-.063-.043.049.055-.019.016-.024.018-.06-.047.045.059-.02.014-.028.018-.056-.052.04.062-.018.012-.034.018-.051-.056.036.064-.017.01-.07.03a2 2 0 0 1-.76.086zm.03-2.361.04.062-.065.046-.014.012-.059.05-.02.02-.049.047-.025.029-.039.046-.024.03-.035.051-.021.032-.035.06-.016.028q-.024.045-.045.093a1.29 1.29 0 0 0 .383 1.56l.05.045a1.8 1.8 0 0 0 .677-.073l.061-.028.021-.01.036-.02.252-.232.115-.246.036-.196h-.175l-.683-.004h-.02c-.12 0-.301-.001-.362-.21a.41.41 0 0 1 .117-.417c.283-.301.642-.278.957-.213l.724-.012-.02-.036-.011-.022-.015-.026q-.015-.025-.033-.05l-.024-.036-.038-.046-.027-.032-.04-.04-.032-.03-.043-.034-.036-.03-.052-.033-.035-.022a1 1 0 0 0-.094-.05l-.134-.07-.02-.016-.012-.01-.022-.022-.01-.014-.018-.026-.009-.018-.005-.013-.075-.006a2 2 0 0 0-.114-.011l-.031-.001-.08-.003-.028.001q-.04 0-.077.004l-.023.002-.08.01-.034.005-.065.014-.036.009-.062.018-.033.01-.062.024-.028.011-.072.035-.05-.058.035.065a1 1 0 0 0-.084.05z"/><path fill="#D7AF94" d="M15.975 14.667c-.114.736-.743 1.09-1.251 1.259H5.67l.005-.009a.3.3 0 0 1 .054-.066l.014-.012.018-.014.015-.011.02-.012.016-.01.022-.012.015-.007.027-.013.012-.006.09-.04a.54.54 0 0 0 .199-.143q.059-.049.111-.1l.003-.003c.5-.489.642-1.17.363-1.739a1 1 0 0 0-.065-.118 1.17 1.17 0 0 0-.61-.666l-.02-.009-.029-.013-.006-.003-.022-.011-.01-.006-.016-.01-.01-.006-.014-.01-.01-.01-.011-.011-.008-.01-.01-.014-.006-.012-.01-.03-.002-.009h.94l7.203-.001q.159 0 .315-.005l.147-.002c.853.036 1.44.504 1.57 1.252.036.212.038.429.005.641"/><path fill="#2B2129" d="M14.735 16H5.544l.062-.11a.4.4 0 0 1 .073-.093l.017-.015.021-.017.128-.072.102-.046a.5.5 0 0 0 .17-.12l.012-.013q.056-.047.108-.096c.478-.468.615-1.117.35-1.656a1 1 0 0 0-.062-.113 1.1 1.1 0 0 0-.576-.636l-.126-.066-.018-.014-.013-.011-.017-.017-.01-.013-.015-.022-.01-.018-.01-.023-.005-.02-.018-.089.088-.013 8.143-.001q.156 0 .31-.004l.151-.003c.894.038 1.507.529 1.644 1.313.038.22.04.445.005.666-.119.773-.773 1.144-1.301 1.318zm-8.878-.148h8.854c.487-.163 1.084-.502 1.19-1.197q.049-.309-.004-.618c-.124-.71-.685-1.155-1.5-1.19l-.14.002q-.163.005-.319.005l-7.977.001.05.023q.092.044.176.1c.217.148.382.36.47.606q.036.055.064.113c.293.597.144 1.313-.378 1.824a2 2 0 0 1-.113.101l-.025.03a.6.6 0 0 1-.197.13l-.126.057-.048-.059.034.066zm-.03 0h.017l-.048-.05zm-.046 0h.01l-.03-.027z"/><path fill="#C2956D" d="M13.103 7.45a.54.54 0 0 1-.3.055c-.929-.007-1.873-.006-2.786-.005h-2.72c-.678-.001-1.368 0-2.05.005a.57.57 0 0 1-.315-.056.24.24 0 0 1-.086-.22.22.22 0 0 1 .081-.197l.024-.013a.7.7 0 0 1 .29-.042h.006c2.68.006 5.151.006 7.555 0 .104-.01.209.008.303.055a.23.23 0 0 1 .082.208.23.23 0 0 1-.084.21"/><path fill="#2B2129" d="M5.235 7.579a.6.6 0 0 1-.344-.07.32.32 0 0 1-.12-.28.29.29 0 0 1 .115-.258l.031-.018a.7.7 0 0 1 .324-.05c2.678.006 5.149.006 7.56 0 .12-.012.24.012.345.068a.374.374 0 0 1-.002.54.6.6 0 0 1-.342.068c-.932-.007-1.874-.006-2.785-.005H7.298c-.679-.001-1.369 0-2.05.005zm.012-.528a.7.7 0 0 0-.263.034l-.015.009c-.023.015-.049.044-.05.136 0 .106.028.14.055.157a.53.53 0 0 0 .273.044c.682-.005 1.372-.006 2.051-.006l1.694.002h1.025c.911-.002 1.853-.003 2.786.004a.5.5 0 0 0 .259-.042c.025-.017.05-.048.05-.15 0-.098-.024-.129-.05-.146a.5.5 0 0 0-.26-.043c-2.412.007-4.883.007-7.555 0"/><path fill="#C2956D" d="M5.22 9.903h.004c2.542.007 5.095.007 7.588 0h.005c.31 0 .365.085.37.273a.22.22 0 0 1-.08.203.56.56 0 0 1-.315.056c-.922-.006-1.86-.005-2.766-.004H8l-.684-.001c-.689 0-1.388 0-2.08.005a.56.56 0 0 1-.31-.055.22.22 0 0 1-.08-.206c.003-.183.06-.271.373-.271"/><path fill="#2B2129" d="M5.22 10.51a.6.6 0 0 1-.335-.07.3.3 0 0 1-.113-.267c.004-.25.125-.344.447-.344h.005c2.54.007 5.093.007 7.588 0 .327 0 .443.09.448.346a.29.29 0 0 1-.11.265.6.6 0 0 1-.359.07c-.925-.007-1.86-.006-2.764-.005H8l-.684-.001c-.689 0-1.388 0-2.079.005zm0-.607v.074c-.297 0-.298.074-.3.198 0 .096.024.127.049.144a.5.5 0 0 0 .267.042c.691-.005 1.391-.005 2.08-.005h2.71c.905 0 1.84-.001 2.766.005a.5.5 0 0 0 .274-.043c.022-.016.049-.046.046-.14-.003-.13-.004-.201-.295-.201-2.5.007-5.053.007-7.593 0z"/><path fill="#C2956D" d="M5.218 8.44h.005c2.537.007 5.09.007 7.588 0h.005c.312 0 .366.084.37.27a.22.22 0 0 1-.08.202.57.57 0 0 1-.313.056c-.932-.006-1.878-.006-2.794-.005H7.977c-.898 0-1.827-.002-2.74.005a.56.56 0 0 1-.31-.056.22.22 0 0 1-.08-.203c.002-.182.058-.269.371-.269"/><path fill="#2B2129" d="M5.217 9.042a.6.6 0 0 1-.332-.069.29.29 0 0 1-.113-.265c.004-.25.125-.342.446-.342h.005c2.538.007 5.09.007 7.588 0 .328 0 .444.09.45.343a.29.29 0 0 1-.112.264.62.62 0 0 1-.357.069c-.938-.007-1.88-.006-2.793-.005H7.955c-.89 0-1.812-.002-2.717.005zm.001-.602v.074c-.295 0-.296.074-.298.196-.001.095.025.125.049.141a.5.5 0 0 0 .268.043c.906-.007 1.827-.006 2.718-.005H10c.912 0 1.856-.002 2.794.005a.54.54 0 0 0 .272-.043c.023-.016.05-.046.047-.14-.002-.127-.004-.197-.296-.197-2.502.007-5.055.007-7.593 0z"/><path fill="#C2956D" d="M13.107 11.842a.5.5 0 0 1-.257.056h-.057c-.923-.007-1.86-.006-2.767-.005H8.004c-.907 0-1.844-.002-2.766.005a.57.57 0 0 1-.312-.055.22.22 0 0 1-.08-.203c.003-.183.06-.27.372-.27h.005a1379 1379 0 0 0 7.588 0h.005c.312 0 .366.084.37.27a.22.22 0 0 1-.079.202"/><path fill="#2B2129" d="M5.22 11.972a.6.6 0 0 1-.336-.068.29.29 0 0 1-.112-.265c.004-.25.125-.342.446-.342a1384 1384 0 0 0 7.593 0c.328 0 .444.09.45.342a.28.28 0 0 1-.112.264.54.54 0 0 1-.298.069h-.06c-.917-.006-1.85-.005-2.752-.005H8.003c-.909 0-1.845-.002-2.765.005zm.003-.527c-.3 0-.3.073-.303.196-.001.095.025.125.048.14a.5.5 0 0 0 .269.043c.92-.006 1.857-.005 2.762-.005h2.027a345 345 0 0 1 2.822.005q.114.007.217-.043c.023-.015.05-.045.047-.139-.002-.127-.004-.197-.296-.197a1329 1329 0 0 1-7.593 0"/><path fill="#C2956D" d="M13.107 5.986a.5.5 0 0 1-.257.055h-.057c-.923-.006-1.86-.005-2.767-.004H8.004c-.907-.001-1.844-.002-2.766.004a.57.57 0 0 1-.312-.055.22.22 0 0 1-.08-.203c.003-.182.06-.27.372-.27h.005a1367 1367 0 0 0 7.588 0h.005c.312 0 .366.084.37.271a.22.22 0 0 1-.079.202"/><path fill="#2B2129" d="M5.22 6.115a.6.6 0 0 1-.336-.068.29.29 0 0 1-.112-.265c.004-.25.125-.342.446-.342a1369 1369 0 0 0 7.593 0c.328 0 .444.09.45.343a.28.28 0 0 1-.112.264.54.54 0 0 1-.298.068h-.06c-.917-.006-1.85-.005-2.752-.004H8.003c-.909-.001-1.845-.002-2.765.004zm.003-.527c-.3 0-.3.074-.303.196-.001.095.025.125.048.141a.5.5 0 0 0 .269.042c.92-.006 1.857-.005 2.762-.004h2.027c.915-.001 1.849-.002 2.767.004h.055q.114.007.217-.042c.023-.016.05-.046.047-.14-.002-.127-.004-.197-.296-.197a1356 1356 0 0 1-7.593 0"/><path fill="#C2956D" d="M13.107 4.523a.5.5 0 0 1-.257.055h-.057c-.923-.006-1.86-.005-2.767-.004H8.004c-.907 0-1.844-.002-2.766.005a.57.57 0 0 1-.312-.056.22.22 0 0 1-.08-.203c.003-.182.06-.269.372-.269h.005a1371 1371 0 0 0 7.588 0h.005c.312 0 .366.084.37.27a.22.22 0 0 1-.079.202"/><path fill="#2B2129" d="M5.22 4.653a.6.6 0 0 1-.336-.068.29.29 0 0 1-.112-.266c.004-.249.125-.342.446-.342a1377 1377 0 0 0 7.593 0c.328 0 .444.09.45.343a.28.28 0 0 1-.112.264.54.54 0 0 1-.298.068h-.06c-.917-.006-1.85-.005-2.752-.004H8.003a345 345 0 0 0-2.782.005m.003-.528c-.3 0-.3.074-.303.197-.001.094.025.125.048.14a.5.5 0 0 0 .269.043c.92-.007 1.857-.006 2.762-.005h2.027c.915 0 1.849-.002 2.767.005h.055q.114.006.217-.043c.023-.016.05-.045.047-.139-.002-.127-.004-.198-.296-.198a1347 1347 0 0 1-7.593 0"/><path fill="#C2956D" d="M13.107 3.06a.5.5 0 0 1-.257.056h-.057c-.923-.006-1.86-.005-2.767-.004H8.004c-.907-.001-1.844-.002-2.766.004a.57.57 0 0 1-.312-.055.22.22 0 0 1-.08-.203c.003-.182.06-.27.372-.27h.005a1371 1371 0 0 0 7.588 0h.005c.312 0 .366.084.37.271a.22.22 0 0 1-.079.201"/><path fill="#2B2129" d="M5.22 3.19a.6.6 0 0 1-.336-.068.29.29 0 0 1-.112-.265c.004-.25.125-.342.446-.342a1373 1373 0 0 0 7.593 0c.328 0 .444.09.45.342a.28.28 0 0 1-.112.264.54.54 0 0 1-.298.069h-.06c-.917-.006-1.851-.005-2.754-.004H8.003c-.909-.001-1.845-.002-2.765.004zm.003-.527c-.3 0-.3.074-.303.196-.001.095.025.125.048.14a.5.5 0 0 0 .269.043c.92-.006 1.857-.005 2.762-.004h2.027a348 348 0 0 1 2.822.004q.114.007.217-.043c.023-.015.05-.045.047-.138-.002-.128-.004-.198-.296-.198a1347 1347 0 0 1-7.593 0"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/solana.svg b/src/components/ProtocolIcon/solana.svg
deleted file mode 100644
index 79f3597..0000000
--- a/src/components/ProtocolIcon/solana.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="19" height="16" fill="none"><path fill="url(#a)" d="m18.509 12.615-3.071 3.167a.72.72 0 0 1-.522.218H.356a.37.37 0 0 1-.195-.056.35.35 0 0 1-.131-.15.33.33 0 0 1 .066-.37l3.073-3.168a.71.71 0 0 1 .52-.218h14.56c.069 0 .137.02.195.056a.35.35 0 0 1 .131.15.33.33 0 0 1-.066.37m-3.071-6.378a.72.72 0 0 0-.522-.218H.356c-.069 0-.137.02-.195.056a.35.35 0 0 0-.131.15.33.33 0 0 0 .066.37l3.073 3.168a.71.71 0 0 0 .52.218h14.56c.069 0 .137-.02.195-.056a.35.35 0 0 0 .131-.15.33.33 0 0 0-.066-.37zM.357 3.962h14.559a.74.74 0 0 0 .522-.218l3.07-3.167a.331.331 0 0 0 .066-.37.35.35 0 0 0-.13-.15.37.37 0 0 0-.196-.057H3.69a.74.74 0 0 0-.52.218L.096 3.385a.33.33 0 0 0-.066.37.35.35 0 0 0 .13.15.37.37 0 0 0 .196.057"/><defs><linearGradient id="a" x1="1.57" x2="16.172" y1="16.381" y2="-.737" gradientUnits="userSpaceOnUse"><stop offset=".08" stop-color="#9945FF"/><stop offset=".3" stop-color="#8752F3"/><stop offset=".5" stop-color="#5497D5"/><stop offset=".6" stop-color="#43B4CA"/><stop offset=".72" stop-color="#28E0B9"/><stop offset=".97" stop-color="#19FB9B"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/starknet.svg b/src/components/ProtocolIcon/starknet.svg
deleted file mode 100644
index c272a3a..0000000
--- a/src/components/ProtocolIcon/starknet.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill="#29296E" d="M16.457 8c0 4.418-3.684 8-8.228 8C3.684 16 0 12.418 0 8s3.684-8 8.229-8 8.228 3.582 8.228 8"/><path fill="#FAFAFA" d="m12.058 5.861-.21-.628a.42.42 0 0 0-.278-.267l-.65-.194a.093.093 0 0 1 0-.178l.646-.204a.42.42 0 0 0 .274-.27l.2-.632c.027-.087.154-.088.183-.001l.209.628a.42.42 0 0 0 .278.267l.65.194c.09.027.09.15.001.178l-.646.204a.42.42 0 0 0-.274.27l-.2.632c-.027.087-.154.088-.183.001"/><path fill="#FF4F0A" d="M.748 7.873c.196-.372.583-.653.985-.83a4.1 4.1 0 0 1 1.29-.319c.886-.077 1.748.066 2.533.315.405.117.767.28 1.141.445.182.085.353.181.529.274l.486.274c.534.318 1.05.6 1.537.818s.928.364 1.343.439a3.3 3.3 0 0 0 1.355-.04c.515-.114 1.094-.358 1.7-.671.609-.313 1.233-.698 1.946-1.073-.072.785-.3 1.52-.657 2.23-.365.703-.874 1.388-1.615 1.942a5.1 5.1 0 0 1-2.742 1.007c-1.017.067-1.985-.15-2.808-.478a9.3 9.3 0 0 1-2.173-1.252 12 12 0 0 1-.398-.315l-.36-.307c-.243-.185-.478-.406-.718-.589-.48-.39-.954-.78-1.474-1.118a6.4 6.4 0 0 0-.84-.473 4 4 0 0 0-.488-.182 2 2 0 0 0-.572-.097"/><path fill="#FAFAFA" d="M.748 7.873c.1-.807.487-1.564 1.108-2.209.617-.638 1.581-1.13 2.651-1.196a4.8 4.8 0 0 1 1.557.156c.491.132.95.325 1.365.552.207.114.4.239.594.365l.514.378.803.616c.52.403 1.018.777 1.478 1.085.464.308.859.534 1.236.666.374.144.847.18 1.471.028.31-.07.634-.196.979-.334.343-.14.7-.309 1.089-.475-.047.406-.132.81-.293 1.188a4.3 4.3 0 0 1-.644 1.107c-.146.17-.302.341-.484.499-.182.154-.384.3-.607.429-.445.25-.973.433-1.515.499a5 5 0 0 1-1.58-.07c-.498-.099-.951-.259-1.367-.443a9.7 9.7 0 0 1-2.138-1.346q-.461-.376-.87-.774l-.324-.316a10 10 0 0 0-.293-.267c-.393-.338-.757-.596-1.159-.757-.398-.168-.908-.238-1.534-.124-.624.113-1.307.375-2.037.743M4.037 12.037c0 .238-.2.432-.445.432a.44.44 0 0 1-.445-.432c0-.24.2-.433.445-.433.246 0 .445.194.445.433"/><path fill="#FAFAFA" d="M4.037 12.037c0 .238-.2.432-.445.432a.44.44 0 0 1-.445-.432c0-.24.2-.433.445-.433.246 0 .445.194.445.433"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/tezos.svg b/src/components/ProtocolIcon/tezos.svg
deleted file mode 100644
index 443e3e6..0000000
--- a/src/components/ProtocolIcon/tezos.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#2C7DF7" d="M9.64 16q-1.727 0-2.517-.825t-.79-1.777q0-.349.138-.587c.09-.157.22-.286.377-.376a1.16 1.16 0 0 1 .588-.137q.348 0 .587.137.24.138.377.376.138.238.137.587 0 .42-.202.687a.94.94 0 0 1-.477.348q.24.33.753.467.514.147 1.028.147.717 0 1.295-.385t.854-1.136q.275-.752.275-1.705 0-1.035-.303-1.768-.293-.743-.872-1.1a2.33 2.33 0 0 0-1.249-.357q-.44 0-1.102.366l-.808.403v-.403l3.636-4.838H6.334v5.021q0 .624.275 1.027.276.403.845.403.44 0 .845-.293c.27-.198.507-.44.697-.715a.27.27 0 0 1 .092-.12.18.18 0 0 1 .12-.045q.1 0 .238.101.129.146.129.339-.015.13-.046.257-.312.696-.863 1.063c-.358.24-.78.369-1.212.366q-1.635 0-2.259-.641-.624-.643-.624-1.741V4.124H2v-.935h2.571V1.063L3.983.476V0h1.708l.643.33v2.859l6.647-.018.661.66-4.076 4.068q.372-.148.771-.183.66 0 1.488.421.835.413 1.285 1.137.45.714.578 1.374.138.66.138 1.173 0 1.174-.496 2.182a3.2 3.2 0 0 1-1.505 1.502A4.9 4.9 0 0 1 9.639 16"/></svg>
\ No newline at end of file
diff --git a/src/components/ProtocolIcon/zkSync.svg b/src/components/ProtocolIcon/zkSync.svg
deleted file mode 100644
index 6f2c434..0000000
--- a/src/components/ProtocolIcon/zkSync.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="29" height="16" fill="none"><path fill="#4E529A" fill-rule="evenodd" d="M28.585 8.001 20.477.003V5.86l-8.052 5.865 8.052.005V16z" clip-rule="evenodd"/><path fill="#8C8DFC" fill-rule="evenodd" d="m0 7.999 8.109 7.998v-5.81l8.05-5.913-8.05-.005V0z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/ResultCard/ResultCard.js b/src/components/ResultCard/ResultCard.js
deleted file mode 100644
index b0e49f1..0000000
--- a/src/components/ResultCard/ResultCard.js
+++ /dev/null
@@ -1,161 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import { CodeIcon } from '@iconicicons/react';
-import { Badge, Loading, Tooltip } from '@lemonsqueezy/wedges';
-
-import {
-  SET_METHOD_RESPONSE_DATA,
-  SET_METHOD_RESPONSE_DATA_2,
-} from '../../app/store/store';
-
-const ResultCard = ({ config, endpoint, setMethodResponseData }) => {
-  const [cardData, setCardData] = useState(config);
-
-  const [normalResult, setNormalResult] = useState(false);
-  const [rateLimitResult, setRateLimitResult] = useState(false);
-  const [fetchErrorResult, setFetchErrorResult] = useState(false);
-
-  const fetchData = async () => {
-    const response = await fetch(cardData.method_url, {
-      body: JSON.stringify({ rpc_url: endpoint }),
-      headers: {
-        accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-
-      method: 'POST',
-    });
-    if (!response.ok) {
-      throw new Error(
-        'Fetch failed. ' + response.status + ' ' + response.statusText
-      );
-    }
-    const body = await response.json();
-    return body;
-  };
-
-  useEffect(() => {
-    if (endpoint === '' || config.data.length === 0) {
-      window.location.replace('/');
-    } else {
-      Object.keys(cardData.data).length === 0 &&
-        fetchData()
-          .then((res) => {
-            setCardData((prev) => {
-              return {
-                ...prev,
-                isLoading: false,
-                data: res,
-              };
-            });
-            setMethodResponseData(cardData.id, res);
-          })
-          .catch((error) => {
-            setCardData((prev) => {
-              return {
-                ...prev,
-                isLoading: false,
-                data: { error: error.message },
-              };
-            });
-            setMethodResponseData(cardData.id, {
-              error: error.message,
-            });
-          });
-    }
-  }, []);
-
-  useEffect(() => {
-    // no errors
-    if (
-      Object.keys(cardData.data).length != 0 &&
-      cardData.data.hasOwnProperty('error') === false
-    ) {
-      setNormalResult(true);
-    }
-
-    // show rate limit warning
-    if (
-      cardData.data.target_blocks !==
-      cardData.data.blocks_processed_successfully
-    ) {
-      setRateLimitResult(true);
-    }
-
-    // fetch error
-    if (cardData.data.hasOwnProperty('error') === true) {
-      setFetchErrorResult(cardData.data.error);
-    }
-  }, [cardData]);
-
-  return (
-    <div className="custom-bento-card rounded-xl border-2 p-6 mb-4">
-      <div className="flex justify-between items-center mb-6">
-        <Badge before={<CodeIcon />} color="blue" stroke>
-          {cardData.method_used}
-        </Badge>
-        {cardData.isLoading === true && <Loading type="spinner" size="xxs" />}
-      </div>
-
-      {normalResult && (
-        <div className="grid grid-cols-3">
-          <div>
-            <div
-              className={
-                rateLimitResult
-                  ? 'text-xl font-bold text-yellow-500 '
-                  : 'text-xl font-bold'
-              }
-            >
-              {cardData.data.blocks_processed_successfully}/
-              {cardData.data.target_blocks}
-            </div>
-
-            <div className="flex items-center">
-              <p className="text-xs leading-6 mr-1">Blocks</p>
-              <Tooltip
-                align="center"
-                animation={true}
-                content="Blocks processed / Target blocks"
-                delayDuration={0}
-                side="right"
-              />
-            </div>
-          </div>
-          <div>
-            <div className="text-xl font-bold">
-              {cardData.data.time_taken_in_seconds.toFixed(2)} s
-            </div>
-            <p className="text-xs leading-6">Time taken</p>
-          </div>
-          <div>
-            <div className="text-xl font-bold">
-              {cardData.data.blocks_per_seconds.toFixed(2)}
-            </div>
-            <p className="text-xs leading-6">Blocks per second</p>
-          </div>
-        </div>
-      )}
-
-      {rateLimitResult && (
-        <div className="text-xs text-yellow-500 font-mono mt-6">
-          Rate limit exceeded. Success rate{' '}
-          {(
-            (cardData.data.blocks_processed_successfully /
-              cardData.data.target_blocks) *
-            100
-          ).toFixed(2)}
-          %.
-        </div>
-      )}
-
-      {fetchErrorResult !== false && (
-        <div className="text-xs text-red-500 font-mono mt-6">
-          {fetchErrorResult}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ResultCard;
diff --git a/src/lib/chain-data.js b/src/lib/chain-data.js
new file mode 100644
index 0000000..58ac331
--- /dev/null
+++ b/src/lib/chain-data.js
@@ -0,0 +1,126 @@
+import 'server-only';
+import { cache } from 'react';
+import { runPromQuery, runPromRangeQuery } from './grafana';
+import {
+  providerByRegionQuery,
+  providerTrendQuery,
+  successRateQuery,
+} from './queries';
+
+const TREND_STEP_SECONDS = 3600;
+const TREND_WINDOW_SECONDS = 24 * 3600;
+
+// Minute-aligned `now` keeps fetch cache stable within each 60s revalidate window.
+function minuteAlignedEnd() {
+  return Math.floor(Date.now() / 60000) * 60;
+}
+
+async function safe(label, promise) {
+  try {
+    return { ok: true, value: await promise };
+  } catch (err) {
+    return { ok: false, error: `${label}: ${err.message}` };
+  }
+}
+
+function quantileByRegionToMap(rows) {
+  const m = new Map();
+  for (const r of rows ?? []) {
+    const provider = r.metric.provider;
+    const region = r.metric.source_region ?? 'unknown';
+    const v = parseFloat(r.value[1]);
+    if (!Number.isFinite(v)) continue;
+    if (!m.has(provider)) m.set(provider, new Map());
+    m.get(provider).set(region, v);
+  }
+  return m;
+}
+
+function avgOfMap(regionMap) {
+  if (!regionMap?.size) return null;
+  let sum = 0;
+  let n = 0;
+  for (const v of regionMap.values()) {
+    sum += v;
+    n += 1;
+  }
+  return n ? sum / n : null;
+}
+
+function trendToMap(rows) {
+  const m = new Map();
+  for (const r of rows ?? []) {
+    const provider = r.metric.provider;
+    const values = (r.values ?? [])
+      .map(([, v]) => parseFloat(v))
+      .filter((v) => Number.isFinite(v));
+    m.set(provider, values);
+  }
+  return m;
+}
+
+export const fetchChainData = cache(async (chain) => {
+  const end = minuteAlignedEnd();
+  const start = end - TREND_WINDOW_SECONDS;
+
+  const [p50, p95, p99, success, trend] = await Promise.all([
+    safe('p50', runPromQuery(providerByRegionQuery(chain.promName, 0.5))),
+    safe('p95', runPromQuery(providerByRegionQuery(chain.promName, 0.95))),
+    safe('p99', runPromQuery(providerByRegionQuery(chain.promName, 0.99))),
+    safe('success', runPromQuery(successRateQuery(chain.promName))),
+    safe(
+      'trend',
+      runPromRangeQuery(providerTrendQuery(chain.promName), {
+        start,
+        end,
+        step: TREND_STEP_SECONDS,
+      })
+    ),
+  ]);
+
+  const errors = [p50, p95, p99, success, trend]
+    .filter((r) => !r.ok)
+    .map((r) => r.error);
+
+  const p50Map = p50.ok ? quantileByRegionToMap(p50.value) : new Map();
+  const p95Map = p95.ok ? quantileByRegionToMap(p95.value) : new Map();
+  const p99Map = p99.ok ? quantileByRegionToMap(p99.value) : new Map();
+  const trendMap = trend.ok ? trendToMap(trend.value) : new Map();
+
+  const providerNames = new Set([
+    ...p50Map.keys(),
+    ...p95Map.keys(),
+    ...p99Map.keys(),
+  ]);
+
+  const regions = new Set();
+  for (const m of [p50Map, p95Map, p99Map]) {
+    for (const regionMap of m.values()) {
+      for (const r of regionMap.keys()) regions.add(r);
+    }
+  }
+
+  const providers = [...providerNames]
+    .map((name) => ({
+      name,
+      p50: avgOfMap(p50Map.get(name)),
+      p95: avgOfMap(p95Map.get(name)),
+      p99: avgOfMap(p99Map.get(name)),
+      regions: Object.fromEntries(p95Map.get(name) ?? []),
+      trend: trendMap.get(name) ?? [],
+    }))
+    .filter((p) => p.p95 !== null)
+    .sort((a, b) => a.p95 - b.p95);
+
+  const successRate =
+    success.ok && success.value[0] ? parseFloat(success.value[0].value[1]) : null;
+
+  return {
+    chain,
+    providers,
+    regions: [...regions].sort(),
+    successRate,
+    leader: providers[0] ?? null,
+    error: providers.length === 0 && errors.length ? errors.join('; ') : null,
+  };
+});
diff --git a/src/lib/format.js b/src/lib/format.js
new file mode 100644
index 0000000..0e53fd1
--- /dev/null
+++ b/src/lib/format.js
@@ -0,0 +1,15 @@
+export function formatLatency(seconds) {
+  if (!Number.isFinite(seconds)) return '—';
+  if (seconds < 1) return `${Math.round(seconds * 1000)} ms`;
+  return `${seconds.toFixed(2)} s`;
+}
+
+export function formatPercent(x, digits = 1) {
+  if (!Number.isFinite(x)) return '—';
+  return `${(x * 100).toFixed(digits)}%`;
+}
+
+// Anchor id for in-page jumps from the TOC.
+export function chainAnchor(promName) {
+  return `chain-${promName.toLowerCase()}`;
+}
diff --git a/src/lib/grafana.js b/src/lib/grafana.js
new file mode 100644
index 0000000..75a95db
--- /dev/null
+++ b/src/lib/grafana.js
@@ -0,0 +1,45 @@
+import 'server-only';
+
+const GRAFANA_URL = 'https://chainstack.grafana.net';
+const PROM_DS_UID = 'grafanacloud-prom';
+
+function authHeaders() {
+  const token = process.env.GRAFANA_API_TOKEN;
+  if (!token) {
+    throw new Error('GRAFANA_API_TOKEN env var is not set');
+  }
+  return { Authorization: `Bearer ${token}` };
+}
+
+async function fetchProm(path, params, { revalidate = 60 } = {}) {
+  const url = new URL(`${GRAFANA_URL}/api/datasources/proxy/uid/${PROM_DS_UID}${path}`);
+  for (const [k, v] of Object.entries(params)) {
+    url.searchParams.set(k, String(v));
+  }
+
+  const res = await fetch(url.toString(), {
+    headers: authHeaders(),
+    next: { revalidate },
+  });
+
+  if (!res.ok) {
+    throw new Error(`Grafana ${path} HTTP ${res.status}: ${res.statusText}`);
+  }
+  const json = await res.json();
+  if (json.status !== 'success') {
+    throw new Error(`Grafana ${path} error: ${JSON.stringify(json).slice(0, 200)}`);
+  }
+  return json.data.result;
+}
+
+export function runPromQuery(promql, opts = {}) {
+  return fetchProm('/api/v1/query', { query: promql }, opts);
+}
+
+export function runPromRangeQuery(promql, { start, end, step, ...opts } = {}) {
+  return fetchProm(
+    '/api/v1/query_range',
+    { query: promql, start, end, step },
+    opts
+  );
+}
diff --git a/src/lib/queries.js b/src/lib/queries.js
new file mode 100644
index 0000000..ee28012
--- /dev/null
+++ b/src/lib/queries.js
@@ -0,0 +1,50 @@
+// promName matches the `blockchain` label in Prometheus.
+// publicToken is the access token for the chain's public Grafana dashboard,
+// audited from the dashboards themselves on 2026-05-22.
+export const CHAINS = [
+  { name: 'Ethereum',    promName: 'Ethereum',    publicToken: '65c0fcb02f994faf845d4ec095771bd0' },
+  { name: 'Arbitrum',    promName: 'Arbitrum',    publicToken: 'b8f98de094e84c17becb38a1b318e2f2' },
+  { name: 'Base',        promName: 'Base',        publicToken: '11861148d82247128307025fac628b6e' },
+  { name: 'BNB Chain',   promName: 'BNB',         publicToken: '059a680a502a4d8782e93fcc1f2f1be9' },
+  { name: 'Hyperliquid', promName: 'Hyperliquid', publicToken: '5f957bbcc3ae4c9d8d9669a299a24676' },
+  { name: 'Monad',       promName: 'Monad',       publicToken: 'ae4e8ccc089b460f95d5d2f29dd0d022' },
+  { name: 'Solana',      promName: 'Solana',      publicToken: '254601572d9a4b7a90122e46248f82b0' },
+  { name: 'TON',         promName: 'TON',         publicToken: 'deeaf524ea264f42a12718f675511b13' },
+];
+
+const baseSelector = (chain) =>
+  `response_latency_seconds{metric_type="response_time",blockchain="${chain}",response_status="success",provider!~"TEST_.*"}`;
+
+// Per-provider, per-region quantile latency over 24h. Aggregating by
+// `avg by (provider)` on the result gives the global per-provider number
+// (matches the source dashboard's regional p95 panel aggregation).
+export const providerByRegionQuery = (chain, q) => `
+avg by (provider, source_region) (
+  quantile_over_time(${q},
+    (${baseSelector(chain)} > 0)[24h:1m]
+  )
+)`.trim();
+
+// Aggregate success rate across providers and regions for the chain.
+export const successRateQuery = (chain) => `
+sum(count_over_time(response_latency_seconds{
+  metric_type="response_time",
+  blockchain="${chain}",
+  response_status="success",
+  provider!~"TEST_.*"
+}[24h]))
+/
+sum(count_over_time(response_latency_seconds{
+  metric_type="response_time",
+  blockchain="${chain}",
+  provider!~"TEST_.*"
+}[24h]))`.trim();
+
+// Per-provider p95 latency, evaluated at each step over a time range.
+// Used for inline sparklines — 1h lookback at 1h step gives 24 points/24h.
+export const providerTrendQuery = (chain) => `
+avg by (provider) (
+  quantile_over_time(0.95,
+    (${baseSelector(chain)} > 0)[1h:1m]
+  )
+)`.trim();

From 3a847225dc182899a5ec52e98901cb40ec63e279 Mon Sep 17 00:00:00 2001
From: Anton Sauchyk <antonsauchyk@gmail.com>
Date: Wed, 27 May 2026 09:23:05 +0200
Subject: [PATCH 2/8] Refine overview copy and per-chain card layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Subtitle: drop jargon and middle dot, cap line width
- Remove the dynamic headline stat line
- Per-provider success rate (sum by provider) replaces the chain aggregate;
  shown under each provider, amber below 99.9%
- Region codes shown as short country labels (US, DE, SG …) with full
  name in the column tooltip
- Merge the region heatmap into the provider table as right-hand columns,
  sticky provider column; no duplicated provider names
- Rename Trend column to "p95, 24h"; fix trend query comment
---
 src/app/page.js                       |  14 +-
 src/components/Chain/ChainCard.js     | 202 +++++++++++++++++---------
 src/components/Chain/RegionHeatmap.js |  68 ---------
 src/components/Headline.js            |  73 ----------
 src/components/HeadlineSkeleton.js    |   7 -
 src/lib/chain-data.js                 |  19 ++-
 src/lib/format.js                     |  46 ++++++
 src/lib/queries.js                    |  11 +-
 8 files changed, 201 insertions(+), 239 deletions(-)
 delete mode 100644 src/components/Chain/RegionHeatmap.js
 delete mode 100644 src/components/Headline.js
 delete mode 100644 src/components/HeadlineSkeleton.js

diff --git a/src/app/page.js b/src/app/page.js
index 3fb8eff..4fe77ff 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -1,8 +1,6 @@
 import { Suspense } from 'react';
 import Header from '@/components/Header/Header';
 import Footer from '@/components/Footer/Footer';
-import Headline from '@/components/Headline';
-import HeadlineSkeleton from '@/components/HeadlineSkeleton';
 import ChainTOC from '@/components/ChainTOC';
 import ChainTOCSkeleton from '@/components/ChainTOCSkeleton';
 import ChainCard from '@/components/Chain/ChainCard';
@@ -26,16 +24,10 @@ export default function Home() {
             performance overview
           </h1>
 
-          <div className="text-base mb-10 text-gray-400 text-center">
-            Live p50 / p95 / p99 across chains, providers, and regions.
+          <div className="text-base mb-12 text-gray-400 text-center max-w-xl mx-auto">
+            Latency percentiles for public RPC providers
             <br />
-            Trailing 24 hours · data refreshed every minute.
-          </div>
-
-          <div className="mb-10">
-            <Suspense fallback={<HeadlineSkeleton />}>
-              <Headline />
-            </Suspense>
+            Last 24 hours, updated every minute
           </div>
 
           <div className="mb-12">
diff --git a/src/components/Chain/ChainCard.js b/src/components/Chain/ChainCard.js
index 26e4c7f..e9fee43 100644
--- a/src/components/Chain/ChainCard.js
+++ b/src/components/Chain/ChainCard.js
@@ -1,39 +1,52 @@
 import { fetchChainData } from '@/lib/chain-data';
-import { formatLatency, formatPercent, chainAnchor } from '@/lib/format';
+import { formatLatency, formatPercent, chainAnchor, regionLabels, regionTitle } from '@/lib/format';
 import BulletBar from './BulletBar';
 import Sparkline from './Sparkline';
-import RegionHeatmap from './RegionHeatmap';
+
+const CARD_BG = '#0b0f1f';
+
+// Per-region p95 cell shading: hue 140 (green) → 0 (red), darker at the high
+// end for dark-theme legibility. Scaled against the chain's full range so a
+// colour means the same thing in every row.
+function heatColor(value, min, max) {
+  if (!Number.isFinite(value)) return 'transparent';
+  if (max === min) return 'hsl(140 40% 22%)';
+  const t = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  const hue = 140 - 140 * t;
+  const light = 28 - 6 * t;
+  return `hsl(${hue.toFixed(0)} 45% ${light}%)`;
+}
 
 export default async function ChainCard({ chain }) {
   const data = await fetchChainData(chain);
-  const { providers, regions, successRate, error } = data;
+  const { providers, regions, error } = data;
 
   const maxP99 = providers.reduce((m, p) => Math.max(m, p.p99 ?? p.p95 ?? 0), 0);
   const dashboardUrl = `https://chainstack.grafana.net/public-dashboards/${chain.publicToken}?orgId=1&theme=dark`;
 
+  const regionLabel = regionLabels(regions);
+  const regionValues = providers.flatMap((p) =>
+    regions.map((r) => p.regions?.[r]).filter(Number.isFinite)
+  );
+  const regionMin = regionValues.length ? Math.min(...regionValues) : 0;
+  const regionMax = regionValues.length ? Math.max(...regionValues) : 0;
+
   return (
     <section
       id={chainAnchor(chain.promName)}
       className="border border-gray-800 rounded-xl p-6 scroll-mt-6"
-      style={{ background: '#0b0f1f' }}
+      style={{ background: CARD_BG }}
     >
       <div className="flex justify-between items-baseline mb-5 flex-wrap gap-3">
         <h2 className="text-2xl font-bold text-white">{chain.name}</h2>
-        <div className="flex gap-5 items-baseline">
-          {successRate !== null && Number.isFinite(successRate) && (
-            <span className="text-gray-400 text-sm font-mono">
-              Success {formatPercent(successRate)}
-            </span>
-          )}
-          <a
-            href={dashboardUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-500 hover:text-blue-400 text-sm font-mono"
-          >
-            Open in Grafana ↗
-          </a>
-        </div>
+        <a
+          href={dashboardUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-500 hover:text-blue-400 text-sm font-mono"
+        >
+          Open in Grafana ↗
+        </a>
       </div>
 
       {error && (
@@ -44,60 +57,111 @@ export default async function ChainCard({ chain }) {
 
       {!error && providers.length === 0 && (
         <div className="text-gray-500 text-sm font-mono">
-          No successful samples in the last 24h.
+          No successful samples in the last 24 hours
         </div>
       )}
 
       {providers.length > 0 && (
-        <>
-          <div className="flex items-center text-[10px] uppercase tracking-wider text-gray-500 font-mono mb-2 gap-3 sm:gap-4">
-            <div className="w-32 sm:w-44 shrink-0">Provider</div>
-            <div className="flex-1">p50 / p95 / p99 · 24h</div>
-            <div className="hidden sm:block w-20 text-center">Trend</div>
-            <div className="w-16 sm:w-20 text-right">p50</div>
-            <div className="w-16 sm:w-20 text-right">p95</div>
-            <div className="w-16 sm:w-20 text-right hidden sm:block">p99</div>
-          </div>
-
-          <div className="space-y-2">
-            {providers.map((p, i) => (
-              <div
-                key={p.name}
-                className="flex items-center gap-3 sm:gap-4 text-sm"
-              >
-                <div className="w-32 sm:w-44 text-gray-300 font-mono shrink-0 truncate">
-                  {p.name}
-                </div>
-                <div className="flex-1 min-w-0">
-                  <BulletBar
-                    p50={p.p50}
-                    p95={p.p95}
-                    p99={p.p99}
-                    max={maxP99}
-                    isLeader={i === 0}
-                  />
-                </div>
-                <div className="hidden sm:block w-20">
-                  <Sparkline
-                    values={p.trend}
-                    stroke={i === 0 ? '#10b981' : '#475569'}
-                  />
-                </div>
-                <div className="w-16 sm:w-20 text-right text-gray-300 font-mono shrink-0">
-                  {formatLatency(p.p50)}
-                </div>
-                <div className="w-16 sm:w-20 text-right text-gray-100 font-mono shrink-0">
-                  {formatLatency(p.p95)}
-                </div>
-                <div className="w-16 sm:w-20 text-right text-gray-500 font-mono shrink-0 hidden sm:block">
-                  {formatLatency(p.p99)}
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <RegionHeatmap providers={providers} regions={regions} />
-        </>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm border-separate border-spacing-0">
+            <thead>
+              <tr className="text-[10px] uppercase tracking-wider text-gray-500 font-mono">
+                <th
+                  className="sticky left-0 z-10 text-left font-normal py-2 pr-4"
+                  style={{ background: CARD_BG }}
+                >
+                  Provider
+                </th>
+                <th className="text-left font-normal px-3 min-w-[140px]">
+                  p50 / p95 / p99
+                </th>
+                <th className="font-normal px-2 hidden sm:table-cell">p95, 24h</th>
+                <th className="text-right font-normal px-2">p50</th>
+                <th className="text-right font-normal px-2">p95</th>
+                <th className="text-right font-normal px-2 hidden sm:table-cell">
+                  p99
+                </th>
+                {regions.map((r, idx) => (
+                  <th
+                    key={r}
+                    title={regionTitle(r)}
+                    className={`text-right font-normal px-2 whitespace-nowrap ${
+                      idx === 0 ? 'border-l border-gray-800' : ''
+                    }`}
+                  >
+                    {regionLabel[r]}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {providers.map((p, i) => (
+                <tr key={p.name}>
+                  <td
+                    className="sticky left-0 z-10 py-2 pr-4 align-middle"
+                    style={{ background: CARD_BG }}
+                  >
+                    <div
+                      className={`font-mono truncate max-w-[160px] ${
+                        i === 0 ? 'text-white' : 'text-gray-200'
+                      }`}
+                    >
+                      {p.name}
+                    </div>
+                    {Number.isFinite(p.success) && (
+                      <div
+                        title="Success rate, last 24 hours"
+                        className={`text-[10px] font-mono ${
+                          p.success < 0.999 ? 'text-amber-400' : 'text-gray-600'
+                        }`}
+                      >
+                        {formatPercent(p.success, 2)} ok
+                      </div>
+                    )}
+                  </td>
+                  <td className="px-3 min-w-[140px]">
+                    <BulletBar
+                      p50={p.p50}
+                      p95={p.p95}
+                      p99={p.p99}
+                      max={maxP99}
+                      isLeader={i === 0}
+                    />
+                  </td>
+                  <td className="px-2 hidden sm:table-cell">
+                    <Sparkline
+                      values={p.trend}
+                      stroke={i === 0 ? '#10b981' : '#475569'}
+                    />
+                  </td>
+                  <td className="text-right px-2 py-2 font-mono text-gray-300 whitespace-nowrap">
+                    {formatLatency(p.p50)}
+                  </td>
+                  <td className="text-right px-2 py-2 font-mono text-gray-100 whitespace-nowrap">
+                    {formatLatency(p.p95)}
+                  </td>
+                  <td className="text-right px-2 py-2 font-mono text-gray-500 whitespace-nowrap hidden sm:table-cell">
+                    {formatLatency(p.p99)}
+                  </td>
+                  {regions.map((r, idx) => {
+                    const v = p.regions?.[r];
+                    return (
+                      <td
+                        key={r}
+                        className={`text-right px-2 py-2 font-mono text-gray-100 whitespace-nowrap ${
+                          idx === 0 ? 'border-l border-gray-800' : ''
+                        }`}
+                        style={{ background: heatColor(v, regionMin, regionMax) }}
+                      >
+                        {formatLatency(v)}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
       )}
     </section>
   );
diff --git a/src/components/Chain/RegionHeatmap.js b/src/components/Chain/RegionHeatmap.js
deleted file mode 100644
index 9d0b2cf..0000000
--- a/src/components/Chain/RegionHeatmap.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { formatLatency } from '@/lib/format';
-
-function heatColor(value, min, max) {
-  if (!Number.isFinite(value)) return 'transparent';
-  if (max === min) return 'hsl(140 40% 22%)';
-  const t = Math.max(0, Math.min(1, (value - min) / (max - min)));
-  // hue 140 (green) → 0 (red), darker at the high end for dark theme legibility.
-  const hue = 140 - 140 * t;
-  const sat = 45;
-  const light = 28 - 6 * t;
-  return `hsl(${hue.toFixed(0)} ${sat}% ${light}%)`;
-}
-
-export default function RegionHeatmap({ providers, regions }) {
-  if (!providers?.length || !regions?.length) return null;
-
-  const allValues = [];
-  for (const p of providers) {
-    for (const r of regions) {
-      const v = p.regions?.[r];
-      if (Number.isFinite(v)) allValues.push(v);
-    }
-  }
-  if (!allValues.length) return null;
-  const min = Math.min(...allValues);
-  const max = Math.max(...allValues);
-
-  return (
-    <div className="mt-5">
-      <div className="text-xs font-mono text-gray-500 mb-2 uppercase tracking-wider">
-        p95 by region · 24h
-      </div>
-      <div className="overflow-x-auto">
-        <table className="w-full text-xs font-mono border-separate border-spacing-y-1">
-          <thead>
-            <tr className="text-gray-500">
-              <th className="text-left font-normal pr-3 pb-1">Provider</th>
-              {regions.map((r) => (
-                <th key={r} className="text-right font-normal pl-3 pb-1">
-                  {r}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {providers.map((p) => (
-              <tr key={p.name}>
-                <td className="text-gray-300 pr-3 truncate max-w-[180px]">{p.name}</td>
-                {regions.map((r) => {
-                  const v = p.regions?.[r];
-                  return (
-                    <td
-                      key={r}
-                      className="text-right text-gray-100 px-2 py-1 rounded"
-                      style={{ background: heatColor(v, min, max) }}
-                    >
-                      {formatLatency(v)}
-                    </td>
-                  );
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Headline.js b/src/components/Headline.js
deleted file mode 100644
index 5bcb91f..0000000
--- a/src/components/Headline.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { CHAINS } from '@/lib/queries';
-import { fetchChainData } from '@/lib/chain-data';
-import { formatLatency } from '@/lib/format';
-
-function countWinsBy(chainsData, key) {
-  const wins = new Map();
-  for (const data of chainsData) {
-    const sorted = [...data.providers]
-      .filter((p) => Number.isFinite(p[key]))
-      .sort((a, b) => a[key] - b[key]);
-    const winner = sorted[0];
-    if (winner) wins.set(winner.name, (wins.get(winner.name) ?? 0) + 1);
-  }
-  return [...wins.entries()].sort((a, b) => b[1] - a[1]);
-}
-
-export default async function Headline() {
-  const chainsData = await Promise.all(CHAINS.map(fetchChainData));
-
-  const totalProviders = new Set(
-    chainsData.flatMap((c) => c.providers.map((p) => p.name))
-  ).size;
-
-  const allP95 = chainsData.flatMap((c) =>
-    c.providers.map((p) => ({ name: p.name, p95: p.p95, chain: c.chain.name }))
-  );
-  const fastest = allP95
-    .filter((p) => Number.isFinite(p.p95))
-    .sort((a, b) => a.p95 - b.p95)[0];
-
-  const p95Wins = countWinsBy(chainsData, 'p95');
-  const p99Wins = countWinsBy(chainsData, 'p99');
-
-  const topByWins = p95Wins[0];
-  const tailLeader = p99Wins[0];
-
-  if (!fastest && !topByWins) {
-    return (
-      <div className="text-center text-gray-500 font-mono text-sm">
-        Provider stats unavailable.
-      </div>
-    );
-  }
-
-  return (
-    <div className="text-center text-gray-300 text-base sm:text-lg leading-relaxed">
-      Across <b className="text-white">{chainsData.length}</b> chains and{' '}
-      <b className="text-white">{totalProviders}</b> providers.
-      {fastest && (
-        <>
-          {' '}Fastest right now:{' '}
-          <b className="text-emerald-400">{fastest.name}</b>{' '}
-          on <span className="text-gray-200">{fastest.chain}</span>{' '}
-          at <span className="font-mono">{formatLatency(fastest.p95)}</span>.
-        </>
-      )}
-      {topByWins && (
-        <>
-          {' '}Most p95 wins:{' '}
-          <b className="text-emerald-400">{topByWins[0]}</b>{' '}
-          <span className="text-gray-500">({topByWins[1]}/{chainsData.length})</span>.
-        </>
-      )}
-      {tailLeader && tailLeader[0] !== topByWins?.[0] && (
-        <>
-          {' '}Tail-latency leader:{' '}
-          <b className="text-emerald-400">{tailLeader[0]}</b>{' '}
-          <span className="text-gray-500">({tailLeader[1]} p99 wins)</span>.
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/src/components/HeadlineSkeleton.js b/src/components/HeadlineSkeleton.js
deleted file mode 100644
index eadb739..0000000
--- a/src/components/HeadlineSkeleton.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function HeadlineSkeleton() {
-  return (
-    <div className="flex justify-center animate-pulse">
-      <div className="h-6 w-3/4 max-w-3xl bg-gray-800 rounded" />
-    </div>
-  );
-}
diff --git a/src/lib/chain-data.js b/src/lib/chain-data.js
index 58ac331..2556a9a 100644
--- a/src/lib/chain-data.js
+++ b/src/lib/chain-data.js
@@ -4,7 +4,7 @@ import { runPromQuery, runPromRangeQuery } from './grafana';
 import {
   providerByRegionQuery,
   providerTrendQuery,
-  successRateQuery,
+  providerSuccessQuery,
 } from './queries';
 
 const TREND_STEP_SECONDS = 3600;
@@ -47,6 +47,15 @@ function avgOfMap(regionMap) {
   return n ? sum / n : null;
 }
 
+function successByProviderToMap(rows) {
+  const m = new Map();
+  for (const r of rows ?? []) {
+    const v = parseFloat(r.value[1]);
+    if (Number.isFinite(v)) m.set(r.metric.provider, v);
+  }
+  return m;
+}
+
 function trendToMap(rows) {
   const m = new Map();
   for (const r of rows ?? []) {
@@ -67,7 +76,7 @@ export const fetchChainData = cache(async (chain) => {
     safe('p50', runPromQuery(providerByRegionQuery(chain.promName, 0.5))),
     safe('p95', runPromQuery(providerByRegionQuery(chain.promName, 0.95))),
     safe('p99', runPromQuery(providerByRegionQuery(chain.promName, 0.99))),
-    safe('success', runPromQuery(successRateQuery(chain.promName))),
+    safe('success', runPromQuery(providerSuccessQuery(chain.promName))),
     safe(
       'trend',
       runPromRangeQuery(providerTrendQuery(chain.promName), {
@@ -86,6 +95,7 @@ export const fetchChainData = cache(async (chain) => {
   const p95Map = p95.ok ? quantileByRegionToMap(p95.value) : new Map();
   const p99Map = p99.ok ? quantileByRegionToMap(p99.value) : new Map();
   const trendMap = trend.ok ? trendToMap(trend.value) : new Map();
+  const successMap = success.ok ? successByProviderToMap(success.value) : new Map();
 
   const providerNames = new Set([
     ...p50Map.keys(),
@@ -108,18 +118,15 @@ export const fetchChainData = cache(async (chain) => {
       p99: avgOfMap(p99Map.get(name)),
       regions: Object.fromEntries(p95Map.get(name) ?? []),
       trend: trendMap.get(name) ?? [],
+      success: successMap.get(name) ?? null,
     }))
     .filter((p) => p.p95 !== null)
     .sort((a, b) => a.p95 - b.p95);
 
-  const successRate =
-    success.ok && success.value[0] ? parseFloat(success.value[0].value[1]) : null;
-
   return {
     chain,
     providers,
     regions: [...regions].sort(),
-    successRate,
     leader: providers[0] ?? null,
     error: providers.length === 0 && errors.length ? errors.join('; ') : null,
   };
diff --git a/src/lib/format.js b/src/lib/format.js
index 0e53fd1..fa16715 100644
--- a/src/lib/format.js
+++ b/src/lib/format.js
@@ -13,3 +13,49 @@ export function formatPercent(x, digits = 1) {
 export function chainAnchor(promName) {
   return `chain-${promName.toLowerCase()}`;
 }
+
+// source_region codes are DigitalOcean slugs. `short` is the column header,
+// `country`/`city` feed the header tooltip.
+const REGIONS = {
+  fra1: { short: 'DE', country: 'Germany', city: 'Frankfurt' },
+  sfo1: { short: 'US', country: 'United States', city: 'San Francisco' },
+  sfo2: { short: 'US', country: 'United States', city: 'San Francisco' },
+  sfo3: { short: 'US', country: 'United States', city: 'San Francisco' },
+  nyc1: { short: 'US', country: 'United States', city: 'New York' },
+  nyc2: { short: 'US', country: 'United States', city: 'New York' },
+  nyc3: { short: 'US', country: 'United States', city: 'New York' },
+  ams2: { short: 'NL', country: 'Netherlands', city: 'Amsterdam' },
+  ams3: { short: 'NL', country: 'Netherlands', city: 'Amsterdam' },
+  sgp1: { short: 'SG', country: 'Singapore', city: 'Singapore' },
+  lon1: { short: 'UK', country: 'United Kingdom', city: 'London' },
+  tor1: { short: 'CA', country: 'Canada', city: 'Toronto' },
+  blr1: { short: 'IN', country: 'India', city: 'Bangalore' },
+  syd1: { short: 'AU', country: 'Australia', city: 'Sydney' },
+};
+
+function regionInfo(code) {
+  const up = code.toUpperCase();
+  return REGIONS[code] ?? { short: up, country: up, city: up };
+}
+
+// Full name for the header tooltip, e.g. "United States, San Francisco".
+export function regionTitle(code) {
+  const { country, city } = regionInfo(code);
+  return city && city !== country ? `${country}, ${city}` : country;
+}
+
+// Short column labels (DE, US, SG …), qualified with the city only when two
+// codes in the set share a short code (e.g. US San Francisco vs US New York).
+export function regionLabels(codes) {
+  const seen = new Map();
+  for (const c of codes) {
+    const { short } = regionInfo(c);
+    seen.set(short, (seen.get(short) ?? 0) + 1);
+  }
+  const out = {};
+  for (const c of codes) {
+    const { short, city } = regionInfo(c);
+    out[c] = seen.get(short) > 1 ? `${short} ${city}` : short;
+  }
+  return out;
+}
diff --git a/src/lib/queries.js b/src/lib/queries.js
index ee28012..744060b 100644
--- a/src/lib/queries.js
+++ b/src/lib/queries.js
@@ -25,23 +25,24 @@ avg by (provider, source_region) (
   )
 )`.trim();
 
-// Aggregate success rate across providers and regions for the chain.
-export const successRateQuery = (chain) => `
-sum(count_over_time(response_latency_seconds{
+// Per-provider success rate over 24h (successful samples / all samples).
+export const providerSuccessQuery = (chain) => `
+sum by (provider) (count_over_time(response_latency_seconds{
   metric_type="response_time",
   blockchain="${chain}",
   response_status="success",
   provider!~"TEST_.*"
 }[24h]))
 /
-sum(count_over_time(response_latency_seconds{
+sum by (provider) (count_over_time(response_latency_seconds{
   metric_type="response_time",
   blockchain="${chain}",
   provider!~"TEST_.*"
 }[24h]))`.trim();
 
 // Per-provider p95 latency, evaluated at each step over a time range.
-// Used for inline sparklines — 1h lookback at 1h step gives 24 points/24h.
+// Used for inline sparklines — each point is p95 over a trailing 1h window;
+// the 24h range at a 1h step yields ~24 points.
 export const providerTrendQuery = (chain) => `
 avg by (provider) (
   quantile_over_time(0.95,

From 73daa764d64a072c9f9b48904e6a8101132b52be Mon Sep 17 00:00:00 2001
From: Anton Sauchyk <antonsauchyk@gmail.com>
Date: Wed, 27 May 2026 09:27:46 +0200
Subject: [PATCH 3/8] Label region columns 'p95 by region'; add sin1/hnd1
 regions

---
 src/components/Chain/ChainCard.js | 16 ++++++++++++++++
 src/lib/format.js                 |  2 ++
 2 files changed, 18 insertions(+)

diff --git a/src/components/Chain/ChainCard.js b/src/components/Chain/ChainCard.js
index e9fee43..d294773 100644
--- a/src/components/Chain/ChainCard.js
+++ b/src/components/Chain/ChainCard.js
@@ -65,6 +65,22 @@ export default async function ChainCard({ chain }) {
         <div className="overflow-x-auto">
           <table className="w-full text-sm border-separate border-spacing-0">
             <thead>
+              {regions.length > 0 && (
+                <tr className="text-[10px] uppercase tracking-wider text-gray-500 font-mono">
+                  <th className="sticky left-0 z-10" style={{ background: CARD_BG }} />
+                  <th />
+                  <th className="hidden sm:table-cell" />
+                  <th />
+                  <th />
+                  <th className="hidden sm:table-cell" />
+                  <th
+                    colSpan={regions.length}
+                    className="text-left font-normal px-2 pb-1 border-l border-gray-800"
+                  >
+                    p95 by region
+                  </th>
+                </tr>
+              )}
               <tr className="text-[10px] uppercase tracking-wider text-gray-500 font-mono">
                 <th
                   className="sticky left-0 z-10 text-left font-normal py-2 pr-4"
diff --git a/src/lib/format.js b/src/lib/format.js
index fa16715..cc4091b 100644
--- a/src/lib/format.js
+++ b/src/lib/format.js
@@ -27,6 +27,8 @@ const REGIONS = {
   ams2: { short: 'NL', country: 'Netherlands', city: 'Amsterdam' },
   ams3: { short: 'NL', country: 'Netherlands', city: 'Amsterdam' },
   sgp1: { short: 'SG', country: 'Singapore', city: 'Singapore' },
+  sin1: { short: 'SG', country: 'Singapore', city: 'Singapore' },
+  hnd1: { short: 'JP', country: 'Japan', city: 'Tokyo' },
   lon1: { short: 'UK', country: 'United Kingdom', city: 'London' },
   tor1: { short: 'CA', country: 'Canada', city: 'Toronto' },
   blr1: { short: 'IN', country: 'India', city: 'Bangalore' },

From d2d9db9f50edcbaa00365f26d30a70a75042e349 Mon Sep 17 00:00:00 2001
From: Anton Sauchyk <antonsauchyk@gmail.com>
Date: Wed, 27 May 2026 11:01:20 +0200
Subject: [PATCH 4/8] Log detailed Grafana errors server-side, show generic
 message to client

---
 src/components/Chain/ChainCard.js |  2 +-
 src/lib/chain-data.js             | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Chain/ChainCard.js b/src/components/Chain/ChainCard.js
index d294773..c764ee4 100644
--- a/src/components/Chain/ChainCard.js
+++ b/src/components/Chain/ChainCard.js
@@ -51,7 +51,7 @@ export default async function ChainCard({ chain }) {
 
       {error && (
         <div className="text-red-400 text-sm font-mono mb-3">
-          Data unavailable: {error}
+          Data unavailable
         </div>
       )}
 
diff --git a/src/lib/chain-data.js b/src/lib/chain-data.js
index 2556a9a..767a9e9 100644
--- a/src/lib/chain-data.js
+++ b/src/lib/chain-data.js
@@ -19,7 +19,10 @@ async function safe(label, promise) {
   try {
     return { ok: true, value: await promise };
   } catch (err) {
-    return { ok: false, error: `${label}: ${err.message}` };
+    // Keep the detailed Grafana/Prometheus error server-side only; the client
+    // gets a generic "Data unavailable" message (see ChainCard).
+    console.error(`[grafana] ${label}: ${err.message}`);
+    return { ok: false };
   }
 }
 
@@ -87,9 +90,7 @@ export const fetchChainData = cache(async (chain) => {
     ),
   ]);
 
-  const errors = [p50, p95, p99, success, trend]
-    .filter((r) => !r.ok)
-    .map((r) => r.error);
+  const hadError = [p50, p95, p99, success, trend].some((r) => !r.ok);
 
   const p50Map = p50.ok ? quantileByRegionToMap(p50.value) : new Map();
   const p95Map = p95.ok ? quantileByRegionToMap(p95.value) : new Map();
@@ -128,6 +129,6 @@ export const fetchChainData = cache(async (chain) => {
     providers,
     regions: [...regions].sort(),
     leader: providers[0] ?? null,
-    error: providers.length === 0 && errors.length ? errors.join('; ') : null,
+    error: providers.length === 0 && hadError,
   };
 });

From 83e2108d3b1b6af920dd3947052e04b2a4871722 Mon Sep 17 00:00:00 2001
From: Anton Sauchyk <antonsauchyk@gmail.com>
Date: Fri, 29 May 2026 23:59:08 +0200
Subject: [PATCH 5/8] Address CodeRabbit review: env syntax, stricter referrer
 policy, fetch timeout, range param validation

---
 .env.sample        |  4 ++--
 next.config.js     |  2 +-
 src/lib/grafana.js | 19 +++++++++++++++----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/.env.sample b/.env.sample
index 1828737..6748e89 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1,8 +1,8 @@
 # client app public URL (used in og:image and og:url metadata)
-NEXT_PUBLIC_CLIENT_DOMAIN =
+NEXT_PUBLIC_CLIENT_DOMAIN=
 
 # Grafana Cloud service account token, Viewer role on chainstack.grafana.net.
 # Server-side only — never exposed to the client bundle. Create at:
 # chainstack.grafana.net → Administration → Service accounts → Add token.
 # Set this in .env.local for local dev and in Vercel project env vars for deploys.
-GRAFANA_API_TOKEN =
+GRAFANA_API_TOKEN=
diff --git a/next.config.js b/next.config.js
index af67520..8055444 100644
--- a/next.config.js
+++ b/next.config.js
@@ -23,7 +23,7 @@ const nextConfig = {
         headers: [
           { key: 'Content-Security-Policy', value: cspDirectives },
           { key: 'X-Content-Type-Options', value: 'nosniff' },
-          { key: 'Referrer-Policy', value: 'no-referrer-when-downgrade' },
+          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
           { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
         ],
       },
diff --git a/src/lib/grafana.js b/src/lib/grafana.js
index 75a95db..ce8d834 100644
--- a/src/lib/grafana.js
+++ b/src/lib/grafana.js
@@ -17,10 +17,18 @@ async function fetchProm(path, params, { revalidate = 60 } = {}) {
     url.searchParams.set(k, String(v));
   }
 
-  const res = await fetch(url.toString(), {
-    headers: authHeaders(),
-    next: { revalidate },
-  });
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 10_000);
+  let res;
+  try {
+    res = await fetch(url.toString(), {
+      headers: authHeaders(),
+      next: { revalidate },
+      signal: controller.signal,
+    });
+  } finally {
+    clearTimeout(timeout);
+  }
 
   if (!res.ok) {
     throw new Error(`Grafana ${path} HTTP ${res.status}: ${res.statusText}`);
@@ -37,6 +45,9 @@ export function runPromQuery(promql, opts = {}) {
 }
 
 export function runPromRangeQuery(promql, { start, end, step, ...opts } = {}) {
+  if (![start, end, step].every(Number.isFinite)) {
+    throw new Error('runPromRangeQuery requires numeric start, end, and step');
+  }
   return fetchProm(
     '/api/v1/query_range',
     { query: promql, start, end, step },

From c5aae6bdd7f3677e705ade1f93ca1282e81fda5b Mon Sep 17 00:00:00 2001
From: Anton Sauchyk <anton.sauchyk@chainstack.com>
Date: Sun, 31 May 2026 09:35:07 +0200
Subject: [PATCH 6/8] Allow Vercel toolbar on preview deployments in CSP

The CSP added in this PR blocked the Vercel toolbar (vercel.live + Pusher
websockets), so comments/live feedback couldn't load or be submitted on
preview deployments. Allowlist vercel.live and Pusher in script/style/font/
frame/connect-src, gated to VERCEL_ENV=preview so production stays locked down.
---
 next.config.js | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/next.config.js b/next.config.js
index 8055444..00d84a1 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,14 +2,19 @@
 const GRAFANA_DASHBOARD_URL =
   'https://chainstack.grafana.net/public-dashboards/65c0fcb02f994faf845d4ec095771bd0?orgId=1';
 
+// Allow the Vercel toolbar (comments/live feedback) on preview deployments only,
+// so production stays locked down. The toolbar loads from vercel.live and uses
+// Pusher websockets for live feedback.
+const isPreview = process.env.VERCEL_ENV === 'preview';
+
 const cspDirectives = [
   "default-src 'self'",
-  "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.segment.com https://www.googletagmanager.com https://www.google-analytics.com",
-  "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
-  "font-src 'self' https://fonts.gstatic.com data:",
+  `script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.segment.com https://www.googletagmanager.com https://www.google-analytics.com${isPreview ? ' https://vercel.live' : ''}`,
+  `style-src 'self' 'unsafe-inline' https://fonts.googleapis.com${isPreview ? ' https://vercel.live' : ''}`,
+  `font-src 'self' https://fonts.gstatic.com data:${isPreview ? ' https://vercel.live/fonts' : ''}`,
   "img-src 'self' data: https:",
-  "frame-src https://chainstack.grafana.net",
-  "connect-src 'self' https://api.segment.io https://*.segment.io https://www.google-analytics.com",
+  `frame-src https://chainstack.grafana.net${isPreview ? ' https://vercel.live' : ''}`,
+  `connect-src 'self' https://api.segment.io https://*.segment.io https://www.google-analytics.com${isPreview ? ' https://vercel.live wss://ws-us3.pusher.com https://*.pusher.com' : ''}`,
   "frame-ancestors 'none'",
   "base-uri 'self'",
   "form-action 'self'",

From d407aa4eac18ab05a9bda8fa6c0a7cee15352e21 Mon Sep 17 00:00:00 2001
From: Anton Sauchyk <anton.sauchyk@chainstack.com>
Date: Sun, 31 May 2026 10:10:27 +0200
Subject: [PATCH 7/8] Fix per-chain column alignment in provider table

The latency table is w-full with auto layout, and the BulletBar column was
the only flexible one, so it absorbed all leftover width. Chains with fewer
region columns (e.g. TON) left more slack, stretching the bar and pushing the
p50/p95/p99 numbers further from the provider name. Add a flexible spacer
column before the region block so slack lands there instead, pinning every
data column to a consistent width across all chains and keeping the region
heatmap flush-right.
---
 src/components/Chain/ChainCard.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Chain/ChainCard.js b/src/components/Chain/ChainCard.js
index c764ee4..aa23789 100644
--- a/src/components/Chain/ChainCard.js
+++ b/src/components/Chain/ChainCard.js
@@ -73,6 +73,7 @@ export default async function ChainCard({ chain }) {
                   <th />
                   <th />
                   <th className="hidden sm:table-cell" />
+                  <th aria-hidden className="w-full" />
                   <th
                     colSpan={regions.length}
                     className="text-left font-normal px-2 pb-1 border-l border-gray-800"
@@ -97,6 +98,7 @@ export default async function ChainCard({ chain }) {
                 <th className="text-right font-normal px-2 hidden sm:table-cell">
                   p99
                 </th>
+                <th aria-hidden className="w-full" />
                 {regions.map((r, idx) => (
                   <th
                     key={r}
@@ -159,6 +161,7 @@ export default async function ChainCard({ chain }) {
                   <td className="text-right px-2 py-2 font-mono text-gray-500 whitespace-nowrap hidden sm:table-cell">
                     {formatLatency(p.p99)}
                   </td>
+                  <td aria-hidden className="w-full" />
                   {regions.map((r, idx) => {
                     const v = p.regions?.[r];
                     return (

From 7a597f8c9114e7536fca0a21de6703ba59493916 Mon Sep 17 00:00:00 2001
From: Anton Sauchyk <anton.sauchyk@chainstack.com>
Date: Sun, 31 May 2026 10:43:55 +0200
Subject: [PATCH 8/8] Align provider table columns across all chain cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each chain rendered its own auto-layout table, so column widths were computed
per-card from content: chains with long provider names (TON) pushed the bars
and numbers further right, and slack pooled unpredictably. The earlier spacer
column made it worse by parking all slack between p99 and the heatmap.

Switch to table-fixed with a generated colgroup: fixed widths on the metric
columns (provider/bar/sparkline/p50/p95/p99) so they're identical in every
card — bars start at the same x and numbers line up regardless of name length
(long names truncate) — and auto-width region columns that split the remaining
space, keeping the heatmap flush-right with no gap. Sparkline/p99 columns
collapse to 0 width on mobile in step with their hidden cells.
---
 src/components/Chain/ChainCard.js | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/components/Chain/ChainCard.js b/src/components/Chain/ChainCard.js
index aa23789..8876b2e 100644
--- a/src/components/Chain/ChainCard.js
+++ b/src/components/Chain/ChainCard.js
@@ -63,7 +63,25 @@ export default async function ChainCard({ chain }) {
 
       {providers.length > 0 && (
         <div className="overflow-x-auto">
-          <table className="w-full text-sm border-separate border-spacing-0">
+          <table className="w-full text-sm border-separate border-spacing-0 table-fixed">
+            {/* Fixed widths on the metric columns keep them identical across
+                every chain (so bars start and numbers line up card-to-card,
+                regardless of provider-name length); the region columns are
+                auto-width and split the remaining space, keeping the heatmap
+                flush-right with no gap. */}
+            <colgroup>
+              <col className="w-[200px]" />
+              <col className="w-40" />
+              <col className="w-0 sm:w-24" />
+              <col className="w-16" />
+              <col className="w-16" />
+              <col className="w-0 sm:w-16" />
+              {regions.length > 0 ? (
+                regions.map((r) => <col key={r} />)
+              ) : (
+                <col className="w-full" />
+              )}
+            </colgroup>
             <thead>
               {regions.length > 0 && (
                 <tr className="text-[10px] uppercase tracking-wider text-gray-500 font-mono">
@@ -73,7 +91,6 @@ export default async function ChainCard({ chain }) {
                   <th />
                   <th />
                   <th className="hidden sm:table-cell" />
-                  <th aria-hidden className="w-full" />
                   <th
                     colSpan={regions.length}
                     className="text-left font-normal px-2 pb-1 border-l border-gray-800"
@@ -89,7 +106,7 @@ export default async function ChainCard({ chain }) {
                 >
                   Provider
                 </th>
-                <th className="text-left font-normal px-3 min-w-[140px]">
+                <th className="text-left font-normal px-3">
                   p50 / p95 / p99
                 </th>
                 <th className="font-normal px-2 hidden sm:table-cell">p95, 24h</th>
@@ -98,7 +115,6 @@ export default async function ChainCard({ chain }) {
                 <th className="text-right font-normal px-2 hidden sm:table-cell">
                   p99
                 </th>
-                <th aria-hidden className="w-full" />
                 {regions.map((r, idx) => (
                   <th
                     key={r}
@@ -120,7 +136,7 @@ export default async function ChainCard({ chain }) {
                     style={{ background: CARD_BG }}
                   >
                     <div
-                      className={`font-mono truncate max-w-[160px] ${
+                      className={`font-mono truncate ${
                         i === 0 ? 'text-white' : 'text-gray-200'
                       }`}
                     >
@@ -137,7 +153,7 @@ export default async function ChainCard({ chain }) {
                       </div>
                     )}
                   </td>
-                  <td className="px-3 min-w-[140px]">
+                  <td className="px-3">
                     <BulletBar
                       p50={p.p50}
                       p95={p.p95}
@@ -161,7 +177,6 @@ export default async function ChainCard({ chain }) {
                   <td className="text-right px-2 py-2 font-mono text-gray-500 whitespace-nowrap hidden sm:table-cell">
                     {formatLatency(p.p99)}
                   </td>
-                  <td aria-hidden className="w-full" />
                   {regions.map((r, idx) => {
                     const v = p.regions?.[r];
                     return (