Skip to content

Commit 905d9a8

Browse files
alexandratranalexandratran
committed
add simplified api reference with two examples
1 parent 39b9b16 commit 905d9a8

File tree

11 files changed

+546
-1
lines changed

11 files changed

+546
-1
lines changed

‎sdk-sidebar.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,10 @@ const sdkSidebar = {
149149
collapsible: true,
150150
collapsed: true,
151151
link: { type: "doc", id: "evm/connect/reference/json-rpc-api/index" },
152-
items: [],
152+
items: [
153+
"evm/connect/reference/json-rpc-api/wallet_sendCalls",
154+
"evm/connect/reference/json-rpc-api/eth_signTypedData_v4",
155+
],
153156
},
154157
],
155158
},

‎src/components/SimplifiedApiReference/DetailsBox/index.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import React from 'react'
2+
import Heading from '@theme/Heading'
3+
import ParamField from '../ParamField'
4+
import styles from './styles.module.css'
5+
6+
interface NestedParam {
7+
name: string
8+
type: string
9+
required: boolean
10+
description: string
11+
children?: NestedParam[]
12+
}
13+
14+
interface Parameter {
15+
name: string
16+
type: string
17+
required: boolean
18+
description: string
19+
children?: NestedParam[]
20+
}
21+
22+
interface Error {
23+
code: number | string
24+
message: string
25+
description: string
26+
}
27+
28+
interface Returns {
29+
type: string
30+
description: string
31+
}
32+
33+
interface DetailsBoxProps {
34+
method: string
35+
description?: string
36+
parameters: Parameter[]
37+
returns?: Returns
38+
errors: Error[]
39+
}
40+
41+
const DetailsBox: React.FC<DetailsBoxProps> = ({
42+
method,
43+
description,
44+
parameters,
45+
returns,
46+
errors
47+
}) => {
48+
return (
49+
<>
50+
<Heading as="h1">{method}</Heading>
51+
52+
{description && (
53+
<div className={styles.description}>
54+
<p>{description}</p>
55+
</div>
56+
)}
57+
58+
<Heading as="h2" className={styles.sectionHeading}>
59+
Parameters
60+
</Heading>
61+
62+
<div className={styles.paramContainer}>
63+
{parameters.length === 0 ? (
64+
<div className={styles.noParams}>
65+
This method doesn't accept any parameters.
66+
</div>
67+
) : (
68+
<div className={styles.paramFields}>
69+
{parameters.map((param, index) => (
70+
<ParamField
71+
key={index}
72+
name={param.name}
73+
type={param.type}
74+
required={param.required}
75+
description={param.description}
76+
children={param.children}
77+
expandableTitle={param.children?.length ? `${param.name} properties` : undefined}
78+
/>
79+
))}
80+
</div>
81+
)}
82+
</div>
83+
84+
{returns && (
85+
<>
86+
<Heading as="h2" className={styles.sectionHeading}>
87+
Returns
88+
</Heading>
89+
<div className={styles.paramContainer}>
90+
<div className={styles.returnsInfo}>
91+
<p>{returns.description}</p>
92+
</div>
93+
</div>
94+
</>
95+
)}
96+
97+
{errors.length > 0 && (
98+
<>
99+
<Heading as="h2" className={styles.sectionHeading}>
100+
Errors
101+
</Heading>
102+
<div className={styles.paramContainer}>
103+
<table className={styles.paramTable}>
104+
<thead>
105+
<tr>
106+
<th>Code</th>
107+
<th>Message</th>
108+
<th>Description</th>
109+
</tr>
110+
</thead>
111+
<tbody>
112+
{errors.map((error, index) => (
113+
<tr key={index}>
114+
<td><code>{error.code}</code></td>
115+
<td>{error.message}</td>
116+
<td>{error.description}</td>
117+
</tr>
118+
))}
119+
</tbody>
120+
</table>
121+
</div>
122+
</>
123+
)}
124+
</>
125+
)
126+
}
127+
128+
export default DetailsBox

‎src/components/SimplifiedApiReference/DetailsBox/styles.module.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.sectionHeading {
2+
padding-top: 1.5rem;
3+
padding-bottom: 1rem;
4+
margin-bottom: 0;
5+
}
6+
7+
.paramContainer {
8+
margin-bottom: 1rem;
9+
}
10+
11+
.paramTable {
12+
margin-top: 1rem !important;
13+
}
14+
15+
.noParams {
16+
padding: 1rem 0;
17+
color: var(--ifm-color-emphasis-700);
18+
font-style: italic;
19+
}
20+
21+
.paramFields {
22+
display: flex;
23+
flex-direction: column;
24+
gap: 0.5rem;
25+
}
26+
27+
.returnsInfo {
28+
padding-bottom: 1rem;
29+
}
30+
31+
.returnsInfo p {
32+
margin: 0.5rem 0;
33+
}
34+
35+
.returnsInfo p:first-child {
36+
margin-top: 0;
37+
}
38+
39+
.returnsInfo p:last-child {
40+
margin-bottom: 0;
41+
}
42+
43+
html[data-theme='dark'] {
44+
.paramTable th {
45+
background: var(--ifm-color-emphasis-200);
46+
}
47+
}

‎src/components/SimplifiedApiReference/Expandable/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useState } from 'react'
2+
import styles from './styles.module.css'
3+
4+
interface ExpandableProps {
5+
title: string
6+
children: React.ReactNode
7+
}
8+
9+
const Expandable: React.FC<ExpandableProps> = ({ title, children }) => {
10+
const [isExpanded, setIsExpanded] = useState(false)
11+
12+
return (
13+
<div className={styles.expandable}>
14+
<button
15+
className={styles.expandableHeader}
16+
onClick={() => setIsExpanded(!isExpanded)}
17+
type="button"
18+
>
19+
<span className={styles.expandableTitle}>{title}</span>
20+
<span className={`${styles.expandableIcon} ${isExpanded ? styles.expanded : ''}`}>
21+
▼
22+
</span>
23+
</button>
24+
{isExpanded && (
25+
<div className={styles.expandableContent}>
26+
{children}
27+
</div>
28+
)}
29+
</div>
30+
)
31+
}
32+
33+
export default Expandable

‎src/components/SimplifiedApiReference/Expandable/styles.module.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.expandable {
2+
border: 1px solid var(--ifm-color-emphasis-200);
3+
border-radius: 0.5rem;
4+
margin: 0.5rem 0;
5+
overflow: hidden;
6+
}
7+
8+
.expandableHeader {
9+
width: 100%;
10+
background: var(--ifm-color-emphasis-100);
11+
border: none;
12+
padding: 1rem;
13+
cursor: pointer;
14+
display: flex;
15+
justify-content: space-between;
16+
align-items: center;
17+
text-align: left;
18+
font-size: 1.4rem;
19+
font-weight: 600;
20+
transition: background-color 0.2s ease;
21+
}
22+
23+
.expandableHeader:hover {
24+
background: var(--ifm-color-emphasis-200);
25+
}
26+
27+
.expandableTitle {
28+
color: var(--ifm-color-primary);
29+
}
30+
31+
.expandableIcon {
32+
font-size: 0.8rem;
33+
transition: transform 0.2s ease;
34+
color: var(--ifm-color-emphasis-700);
35+
}
36+
37+
.expandableIcon.expanded {
38+
transform: rotate(180deg);
39+
}
40+
41+
.expandableContent {
42+
padding: 1rem;
43+
background: var(--ifm-color-emphasis-50);
44+
border-top: 1px solid var(--ifm-color-emphasis-200);
45+
}
46+
47+
html[data-theme='dark'] {
48+
.expandableHeader {
49+
background: var(--ifm-color-emphasis-200);
50+
}
51+
52+
.expandableHeader:hover {
53+
background: var(--ifm-color-emphasis-300);
54+
}
55+
}

‎src/components/SimplifiedApiReference/ParamField/index.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react'
2+
import Expandable from '../Expandable'
3+
import styles from './styles.module.css'
4+
5+
interface NestedParam {
6+
name: string
7+
type: string
8+
required: boolean
9+
description: string
10+
children?: NestedParam[]
11+
}
12+
13+
interface ParamFieldProps {
14+
name: string
15+
type: string
16+
required: boolean
17+
description: string
18+
children?: NestedParam[]
19+
expandableTitle?: string
20+
}
21+
22+
const ParamField: React.FC<ParamFieldProps> = ({
23+
name,
24+
type,
25+
required,
26+
description,
27+
children = [],
28+
expandableTitle
29+
}) => {
30+
const hasChildren = children.length > 0
31+
32+
const renderNestedParams = (params: NestedParam[], title?: string) => {
33+
if (params.length === 0) return null
34+
35+
return (
36+
<Expandable title={title || `${name} properties`}>
37+
{params.map((param, index) => (
38+
<ParamField
39+
key={index}
40+
name={param.name}
41+
type={param.type}
42+
required={param.required}
43+
description={param.description}
44+
children={param.children}
45+
expandableTitle={param.children?.length ? `${param.name} properties` : undefined}
46+
/>
47+
))}
48+
</Expandable>
49+
)
50+
}
51+
52+
return (
53+
<div className={styles.paramField}>
54+
<div className={styles.paramHeader}>
55+
<div className={styles.paramName}>
56+
<code>{name}</code>
57+
<span className={styles.paramType}>({type})</span>
58+
{required && <span className={styles.required}>required</span>}
59+
</div>
60+
</div>
61+
<div className={styles.paramDescription}>
62+
{description}
63+
</div>
64+
{hasChildren && renderNestedParams(children, expandableTitle)}
65+
</div>
66+
)
67+
}
68+
69+
export default ParamField

‎src/components/SimplifiedApiReference/ParamField/styles.module.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.paramField {
2+
margin-bottom: 1rem;
3+
padding-top: 1rem;
4+
}
5+
6+
.paramHeader {
7+
margin-bottom: 0.5rem;
8+
}
9+
10+
.paramName {
11+
display: flex;
12+
align-items: center;
13+
gap: 0.5rem;
14+
margin-bottom: 0.5rem;
15+
}
16+
17+
.paramName code {
18+
font-family: var(--font-mm-sans-mono);
19+
font-size: 1.3rem;
20+
}
21+
22+
.paramType {
23+
color: var(--ifm-color-emphasis-700);
24+
font-size: 1.4rem;
25+
font-style: italic;
26+
}
27+
28+
.required {
29+
background: var(--ifm-color-primary);
30+
color: white;
31+
padding: 0rem 0.3rem;
32+
border-radius: 0.25rem;
33+
font-size: 1.2rem;
34+
font-weight: 500;
35+
}
36+
37+
.paramDescription {
38+
font-size: 1.6rem;
39+
}
40+
41+
html[data-theme='dark'] {
42+
.required {
43+
color: black;
44+
font-weight: 400;
45+
}
46+
}

0 commit comments

Comments
 (0)