update table and feedlist to support accordian streams verifier table

Author: dev-dist

src/features/feeds/components/FeedList.tsx

@@ -31,11 +31,15 @@ export const FeedList = ({
   dataFeedType = "default",
   ecosystem = "",
   initialCache,
+  allowNetworkTableExpansion = false,
+  defaultNetworkTableExpanded = false,
 }: {
   initialNetwork: string
   dataFeedType: DataFeedType
   ecosystem?: string
   initialCache?: Record<string, ChainMetadata>
+  allowNetworkTableExpansion?: boolean
+  defaultNetworkTableExpanded?: boolean
 }) => {
   const chains = ecosystem === "deprecating" ? ALL_CHAINS : CHAINS
   const isStreams =
@@ -610,9 +614,21 @@ export const FeedList = ({
 
     return (
       <>
-        <SectionWrapper title="Streams Verifier Network Addresses" depth={2}>
-          <StreamsNetworkAddressesTable />
-        </SectionWrapper>
+        {allowNetworkTableExpansion ? (
+          <div style={{ marginBottom: "var(--space-2x)" }}>
+            <StreamsNetworkAddressesTable 
+              allowExpansion={allowNetworkTableExpansion}
+              defaultExpanded={defaultNetworkTableExpanded}
+            />
+          </div>
+        ) : (
+          <SectionWrapper title="Streams Verifier Network Addresses" depth={2}>
+            <StreamsNetworkAddressesTable 
+              allowExpansion={allowNetworkTableExpansion}
+              defaultExpanded={defaultNetworkTableExpanded}
+            />
+          </SectionWrapper>
+        )}
 
         <SectionWrapper
           title={streamsMainnetSectionTitle}

src/features/feeds/components/FeedPage.astro

@@ -15,13 +15,15 @@ export type Props = {
     | "smartdata"
     | "default"
     | "rates"
+  allowNetworkTableExpansion?: boolean
+  defaultNetworkTableExpanded?: boolean
 }
 import { getServerSideChainMetadata } from "~/features/data/api/backend"
 import { CHAINS, ALL_CHAINS } from "~/features/data/chains"
 import { CheckHeartbeat } from "./pause-notice/CheckHeartbeat"
 import { FeedDataItem, monitoredFeeds } from "~/features/data"
 
-const { initialNetwork, ecosystem, dataFeedType } = Astro.props
+const { initialNetwork, ecosystem, dataFeedType, allowNetworkTableExpansion, defaultNetworkTableExpanded } = Astro.props
 
 const initialCache = await getServerSideChainMetadata([...CHAINS, ...ALL_CHAINS])
 const feedItems: FeedDataItem[] = monitoredFeeds.mainnet
@@ -90,6 +92,7 @@ const feedItems: FeedDataItem[] = monitoredFeeds.mainnet
             For LINK token and Faucet details, see the{" "}
             <a href="/resources/link-token-contracts?parent=dataFeeds">LINK Token Contracts</a> page.
           </p>
+
           <Aside type="note" title="Talk to an expert">
             <p>
               <a href="https://chainlinkcommunity.typeform.com/datastreams?#ref_id=docs">Contact us</a> to talk to an
@@ -211,4 +214,6 @@ const feedItems: FeedDataItem[] = monitoredFeeds.mainnet
   dataFeedType={dataFeedType ?? "default"}
   ecosystem={ecosystem ?? ""}
   initialCache={initialCache}
+  allowNetworkTableExpansion={allowNetworkTableExpansion}
+  defaultNetworkTableExpanded={defaultNetworkTableExpanded}
 />

src/features/feeds/components/Tables.module.css

@@ -49,6 +49,67 @@
   margin-right: var(--space-1x);
 }
 
+/* Expandable header */
+.expandableHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2x);
+  padding: var(--space-3x);
+  cursor: pointer;
+  background-color: var(--gray-50);
+  border-radius: var(--border-radius);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: box-shadow 0.2s ease;
+  user-select: none;
+}
+
+.expandableHeader:hover {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.expandableHeader:active {
+  transform: translateY(1px);
+}
+
+.expandableHeaderContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.expandableHeaderContent h2 {
+  margin: 0 0 var(--space-1x) 0;
+}
+
+.expandableDescription {
+  font-size: var(--font-size-sm, 0.875rem);
+  color: var(--gray-600);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.expandableArrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-6x);
+  height: var(--space-6x);
+  flex-shrink: 0;
+  background-image: url("/images/quickstarts/arrow-down.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 20px 20px;
+  filter: brightness(0);
+  transition: transform 0.2s ease;
+}
+
+.expandableArrow span {
+  display: none;
+}
+
+.expandableArrowExpanded {
+  transform: rotate(180deg);
+}
+
 .assetPair {
   color: var(--color-text-heading);
   width: 100%;
@@ -228,10 +289,13 @@
 /* Compact & full networks table */
 .compactNetworksTable {
   width: 100%;
-  margin: 0 auto 2rem;
+  margin: var(--space-4x) auto 2rem;
   overflow-x: auto;
-  border: 1px solid var(--border-color, #e5e7eb);
-  border-radius: 4px;
+}
+
+.staticHeader {
+  font-size: var(--font-size-h3);
+  margin: 0 0 var(--space-2x) 0;
 }
 
 .networksTable {
@@ -240,6 +304,8 @@
   font-size: 0.875rem;
   margin-bottom: 0;
   table-layout: fixed !important;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 4px;
 }
 
 .networksTable,