Fix/Improve OpenRPC parser display

services/reference/linea/json-rpc-methods/eth_getlogs.mdx

@@ -5,51 +5,77 @@ hide_title: true
 hide_table_of_contents: true
 ---
 
-import ParserOpenRPC from "@site/src/components/ParserOpenRPC"
-import { NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc"
+import ParserOpenRPC from '@site/src/components/ParserOpenRPC'
+import { NETWORK_NAMES } from '@site/src/plugins/plugin-json-rpc'
+import Heading from '@theme/Heading'
+import CodeBlock from '@theme/CodeBlock'
 
 <ParserOpenRPC
   network={NETWORK_NAMES.linea}
   method="eth_getLogs"
+  extraContent={{
+    'after-returns': (
+      <>
+        <Heading as="h2" className="padding-top--lg padding-bottom--md">
+          Constraints
+        </Heading>
+        <div className="padding-bottom--lg">
+          <p>The following constraints apply:</p>
+          <p>
+            To prevent queries from consuming too many resources, <code>eth_getLogs</code> requests
+            are currently limited by three constraints:
+          </p>
+          <ul>
+            <li>A maximum of 5,000 parameters can be included in a single request.</li>
+            <li>A maximum of 10,000 results can be returned by a single query.</li>
+            <li>Query duration must not exceed 10 seconds.</li>
+          </ul>
+          <p>
+            If a query returns too many results or exceeds the max query duration, one of the
+            following errors is returned:
+          </p>
+          <CodeBlock language="json">
+            {JSON.stringify(
+              {
+                jsonrpc: '2.0',
+                id: 1,
+                error: {
+                  code: -32005,
+                  message: 'query returned more than 10000 results',
+                },
+              },
+              null,
+              2
+            )}
+          </CodeBlock>
+          <p>or</p>
+          <CodeBlock language="json">
+            {JSON.stringify(
+              {
+                jsonrpc: '2.0',
+                id: 1,
+                error: {
+                  code: -32005,
+                  message: 'query timeout exceeded',
+                },
+              },
+              null,
+              2
+            )}
+          </CodeBlock>
+          <p>If this happens:</p>
+          <ul>
+            <li>
+              Limit your query to a smaller number of blocks using <code>fromBlock</code> and{' '}
+              <code>toBlock</code>.
+            </li>
+            <li>
+              If querying for commonly used <code>topics</code>, consider limiting to a single smart
+              contract <code>address</code>.
+            </li>
+          </ul>
+        </div>
+      </>
+    ),
+  }}
 />
-
-## Constraints
-
-The following constraints apply:
-
-To prevent queries from consuming too many resources, `eth_getLogs` requests are currently limited by three constraints:
-
-- A maximum of 5,000 parameters can be included in a single request.
-- A maximum of 10,000 results can be returned by a single query.
-- Query duration must not exceed 10 seconds.
-
-If a query returns too many results or exceeds the max query duration, one of the following errors is returned:
-
-```json
-{
-  "jsonrpc": "2.0",
-  "id": 1,
-  "error": {
-    "code": -32005,
-    "message": "query returned more than 10000 results"
-  }
-}
-```
-
-or
-
-```json
-{
-  "jsonrpc": "2.0",
-  "id": 1,
-  "error": {
-    "code": -32005,
-    "message": "query timeout exceeded"
-  }
-}
-```
-
-If this happens:
-
-- Limit your query to a smaller number of blocks using `fromBlock` and `toBlock`.
-- If querying for commonly used `topics`, consider limiting to a single smart contract `address`.

src/components/ParserOpenRPC/CollapseBox/CollapseBox.tsx

@@ -8,16 +8,16 @@ import styles from './styles.module.scss'
 
 interface CollapseBoxProps {
   children: JSX.Element
-  isInitCollapsed?: boolean
+  isInitExpanded?: boolean
 }
 
-export const CollapseBox = ({ children, isInitCollapsed = false }: CollapseBoxProps) => {
+export const CollapseBox = ({ children, isInitExpanded = false }: CollapseBoxProps) => {
   const { collapsed, toggleCollapsed } = useCollapsible({ initialState: true })
   useEffect(() => {
-    if (isInitCollapsed) {
+    if (isInitExpanded) {
       toggleCollapsed()
     }
-  }, [isInitCollapsed])
+  }, [isInitExpanded])
   return (
     <div className={clsx(styles.collapseWrapper, !collapsed && styles.collapsedWrapperView)}>
       <button

src/components/ParserOpenRPC/CollapseBox/styles.module.scss

@@ -1,12 +1,56 @@
 .collapseWrapper {
   overflow: hidden;
-  margin: 0.5rem 0 0.6rem;
+  margin: 0;
   border-radius: 0;
   border: 1px solid var(--general-gray-light);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  contain: layout;
+  width: 100%;
+  box-sizing: border-box;
 
   html[data-theme='dark'] & {
     border: 1px solid var(--general-black-light);
   }
+
+  // Make both states use identical dimensions to prevent layout shifts
+  .buttonToggle {
+    // Common styles for both states
+    border-radius: 0.6rem;
+    margin: 0.5rem;
+    width: calc(100% - 1rem);
+    font-weight: 500;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    box-sizing: border-box;
+  }
+
+  // Collapsed state styling (not expanded)
+  &:not(.collapsedWrapperView) {
+    border: none;
+    background: transparent;
+
+    .buttonToggle {
+      background-color: var(--general-gray-dark);
+      color: var(--ifm-color-white);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+      &:hover {
+        background-color: var(--general-black);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      html[data-theme='dark'] & {
+        background-color: var(--general-gray);
+        color: var(--general-black);
+
+        &:hover {
+          background-color: var(--general-gray-light);
+        }
+      }
+    }
+  }
 }
 
 .buttonToggle {
@@ -15,9 +59,11 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  width: 100%;
   padding: 1.6rem;
   color: var(--ifm-heading-color);
+  font-size: inherit;
+  border: none;
+  background: transparent;
 
   &:hover {
     background-color: var(--general-white-off);
@@ -32,26 +78,44 @@
   display: flex;
   width: 1.6rem;
   height: 1.6rem;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .arrowUp {
   display: flex;
   width: 1.6rem;
   height: 1.6rem;
   transform: scale(-1);
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .collapsedWrapperView {
   > div {
     border-top: 1px solid var(--general-gray-light);
     border-radius: 0;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   > button {
-    background-color: var(--general-white-off);
+    background-color: var(--general-gray-light);
+    color: var(--general-gray-dark);
+
+    &:hover {
+      background-color: var(--general-gray);
+      color: var(--general-black);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
 
     html[data-theme='dark'] & {
       background-color: var(--general-black-light);
+      color: var(--general-gray);
+
+      &:hover {
+        background-color: var(--general-gray-dark);
+        color: var(--general-gray-light);
+      }
     }
   }