Skip to content

Commit ab18297

Browse files
bgravenorstbgravenorst
authored
Fix/Improve OpenRPC parser display (#2136)
* Add missing styling for patterns, enums. Signed-off-by: bgravenorst <[email protected]> * Hide array dropdown for simple types. Signed-off-by: bgravenorst <[email protected]> * Remove required tag in Return parameters. Signed-off-by: bgravenorst <[email protected]> * Update the format of enums to appear as text instead of boxed descriptions. Signed-off-by: bgravenorst <[email protected]> * Expand boxes in the Parameters section by default. Signed-off-by: bgravenorst <[email protected]> * Update Pattern to be compact and inline with type and required meta. Signed-off-by: bgravenorst <[email protected]> * Flatten array of objects. Signed-off-by: bgravenorst <[email protected]> * Refactor code. Signed-off-by: bgravenorst <[email protected]> * Flatten when null in the result. Signed-off-by: bgravenorst <[email protected]> * Fix display bug for properties that don't show. Signed-off-by: bgravenorst <[email protected]> * CSS updates. Signed-off-by: bgravenorst <[email protected]> * Add ability to use local openrpc spec. Signed-off-by: bgravenorst <[email protected]> * Fix display issue preventing getTransaction methods from fully displaying results. Parser issue. Signed-off-by: bgravenorst <[email protected]> * Update drop-down and enum display. Signed-off-by: bgravenorst <[email protected]> * Minor stylesheet update. Signed-off-by: bgravenorst <[email protected]> * extraContent now formatted correctly. Signed-off-by: bgravenorst <[email protected]> * Refactor styles. Signed-off-by: bgravenorst <[email protected]> * Enhance extraContent component. Signed-off-by: bgravenorst <[email protected]> * Fix bug affecting required meta. Signed-off-by: bgravenorst <[email protected]> * Fix formatting in Wallet API section. Signed-off-by: bgravenorst <[email protected]> --------- Signed-off-by: bgravenorst <[email protected]>
1 parent 699f4a8 commit ab18297

File tree

12 files changed

+20320
-173
lines changed

12 files changed

+20320
-173
lines changed

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

Lines changed: 69 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -5,51 +5,77 @@ hide_title: true
55
hide_table_of_contents: true
66
---
77

8-
import ParserOpenRPC from "@site/src/components/ParserOpenRPC"
9-
import { NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc"
8+
import ParserOpenRPC from '@site/src/components/ParserOpenRPC'
9+
import { NETWORK_NAMES } from '@site/src/plugins/plugin-json-rpc'
10+
import Heading from '@theme/Heading'
11+
import CodeBlock from '@theme/CodeBlock'
1012

1113
<ParserOpenRPC
1214
network={NETWORK_NAMES.linea}
1315
method="eth_getLogs"
16+
extraContent={{
17+
'after-returns': (
18+
<>
19+
<Heading as="h2" className="padding-top--lg padding-bottom--md">
20+
Constraints
21+
</Heading>
22+
<div className="padding-bottom--lg">
23+
<p>The following constraints apply:</p>
24+
<p>
25+
To prevent queries from consuming too many resources, <code>eth_getLogs</code> requests
26+
are currently limited by three constraints:
27+
</p>
28+
<ul>
29+
<li>A maximum of 5,000 parameters can be included in a single request.</li>
30+
<li>A maximum of 10,000 results can be returned by a single query.</li>
31+
<li>Query duration must not exceed 10 seconds.</li>
32+
</ul>
33+
<p>
34+
If a query returns too many results or exceeds the max query duration, one of the
35+
following errors is returned:
36+
</p>
37+
<CodeBlock language="json">
38+
{JSON.stringify(
39+
{
40+
jsonrpc: '2.0',
41+
id: 1,
42+
error: {
43+
code: -32005,
44+
message: 'query returned more than 10000 results',
45+
},
46+
},
47+
null,
48+
2
49+
)}
50+
</CodeBlock>
51+
<p>or</p>
52+
<CodeBlock language="json">
53+
{JSON.stringify(
54+
{
55+
jsonrpc: '2.0',
56+
id: 1,
57+
error: {
58+
code: -32005,
59+
message: 'query timeout exceeded',
60+
},
61+
},
62+
null,
63+
2
64+
)}
65+
</CodeBlock>
66+
<p>If this happens:</p>
67+
<ul>
68+
<li>
69+
Limit your query to a smaller number of blocks using <code>fromBlock</code> and{' '}
70+
<code>toBlock</code>.
71+
</li>
72+
<li>
73+
If querying for commonly used <code>topics</code>, consider limiting to a single smart
74+
contract <code>address</code>.
75+
</li>
76+
</ul>
77+
</div>
78+
</>
79+
),
80+
}}
1481
/>
15-
16-
## Constraints
17-
18-
The following constraints apply:
19-
20-
To prevent queries from consuming too many resources, `eth_getLogs` requests are currently limited by three constraints:
21-
22-
- A maximum of 5,000 parameters can be included in a single request.
23-
- A maximum of 10,000 results can be returned by a single query.
24-
- Query duration must not exceed 10 seconds.
25-
26-
If a query returns too many results or exceeds the max query duration, one of the following errors is returned:
27-
28-
```json
29-
{
30-
"jsonrpc": "2.0",
31-
"id": 1,
32-
"error": {
33-
"code": -32005,
34-
"message": "query returned more than 10000 results"
35-
}
36-
}
37-
```
38-
39-
or
40-
41-
```json
42-
{
43-
"jsonrpc": "2.0",
44-
"id": 1,
45-
"error": {
46-
"code": -32005,
47-
"message": "query timeout exceeded"
48-
}
49-
}
50-
```
51-
52-
If this happens:
53-
54-
- Limit your query to a smaller number of blocks using `fromBlock` and `toBlock`.
55-
- If querying for commonly used `topics`, consider limiting to a single smart contract `address`.

‎src/components/ParserOpenRPC/CollapseBox/CollapseBox.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ import styles from './styles.module.scss'
88

99
interface CollapseBoxProps {
1010
children: JSX.Element
11-
isInitCollapsed?: boolean
11+
isInitExpanded?: boolean
1212
}
1313

14-
export const CollapseBox = ({ children, isInitCollapsed = false }: CollapseBoxProps) => {
14+
export const CollapseBox = ({ children, isInitExpanded = false }: CollapseBoxProps) => {
1515
const { collapsed, toggleCollapsed } = useCollapsible({ initialState: true })
1616
useEffect(() => {
17-
if (isInitCollapsed) {
17+
if (isInitExpanded) {
1818
toggleCollapsed()
1919
}
20-
}, [isInitCollapsed])
20+
}, [isInitExpanded])
2121
return (
2222
<div className={clsx(styles.collapseWrapper, !collapsed && styles.collapsedWrapperView)}>
2323
<button

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

Lines changed: 67 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,56 @@
11
.collapseWrapper {
22
overflow: hidden;
3-
margin: 0.5rem 0 0.6rem;
3+
margin: 0;
44
border-radius: 0;
55
border: 1px solid var(--general-gray-light);
6+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
7+
contain: layout;
8+
width: 100%;
9+
box-sizing: border-box;
610

711
html[data-theme='dark'] & {
812
border: 1px solid var(--general-black-light);
913
}
14+
15+
// Make both states use identical dimensions to prevent layout shifts
16+
.buttonToggle {
17+
// Common styles for both states
18+
border-radius: 0.6rem;
19+
margin: 0.5rem;
20+
width: calc(100% - 1rem);
21+
font-weight: 500;
22+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
23+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
24+
box-sizing: border-box;
25+
}
26+
27+
// Collapsed state styling (not expanded)
28+
&:not(.collapsedWrapperView) {
29+
border: none;
30+
background: transparent;
31+
32+
.buttonToggle {
33+
background-color: var(--general-gray-dark);
34+
color: var(--ifm-color-white);
35+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
36+
37+
&:hover {
38+
background-color: var(--general-black);
39+
transform: translateY(-1px);
40+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
41+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
42+
}
43+
44+
html[data-theme='dark'] & {
45+
background-color: var(--general-gray);
46+
color: var(--general-black);
47+
48+
&:hover {
49+
background-color: var(--general-gray-light);
50+
}
51+
}
52+
}
53+
}
1054
}
1155

1256
.buttonToggle {
@@ -15,9 +59,11 @@
1559
align-items: center;
1660
justify-content: space-between;
1761
gap: 0.5rem;
18-
width: 100%;
1962
padding: 1.6rem;
2063
color: var(--ifm-heading-color);
64+
font-size: inherit;
65+
border: none;
66+
background: transparent;
2167

2268
&:hover {
2369
background-color: var(--general-white-off);
@@ -32,26 +78,44 @@
3278
display: flex;
3379
width: 1.6rem;
3480
height: 1.6rem;
81+
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
3582
}
3683

3784
.arrowUp {
3885
display: flex;
3986
width: 1.6rem;
4087
height: 1.6rem;
4188
transform: scale(-1);
89+
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
4290
}
4391

4492
.collapsedWrapperView {
4593
> div {
4694
border-top: 1px solid var(--general-gray-light);
4795
border-radius: 0;
96+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
4897
}
4998

5099
> button {
51-
background-color: var(--general-white-off);
100+
background-color: var(--general-gray-light);
101+
color: var(--general-gray-dark);
102+
103+
&:hover {
104+
background-color: var(--general-gray);
105+
color: var(--general-black);
106+
transform: translateY(-1px);
107+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
108+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
109+
}
52110

53111
html[data-theme='dark'] & {
54112
background-color: var(--general-black-light);
113+
color: var(--general-gray);
114+
115+
&:hover {
116+
background-color: var(--general-gray-dark);
117+
color: var(--general-gray-light);
118+
}
55119
}
56120
}
57121

0 commit comments

Comments
 (0)