add simplified api reference with two examples

sdk-sidebar.js

@@ -149,7 +149,10 @@ const sdkSidebar = {
           collapsible: true,
           collapsed: true,
           link: { type: "doc",  id: "evm/connect/reference/json-rpc-api/index" },
-          items: [],
+          items: [
+            "evm/connect/reference/json-rpc-api/wallet_sendCalls",
+            "evm/connect/reference/json-rpc-api/eth_signTypedData_v4",
+          ],
         },
       ],
     },

src/components/SimplifiedApiReference/DetailsBox/index.tsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import Heading from '@theme/Heading'
+import ParamField from '../ParamField'
+import styles from './styles.module.css'
+
+interface NestedParam {
+  name: string
+  type: string
+  required: boolean
+  description: string
+  children?: NestedParam[]
+}
+
+interface Parameter {
+  name: string
+  type: string
+  required: boolean
+  description: string
+  children?: NestedParam[]
+}
+
+interface Error {
+  code: number | string
+  message: string
+  description: string
+}
+
+interface Returns {
+  type: string
+  description: string
+}
+
+interface DetailsBoxProps {
+  method: string
+  description?: string
+  parameters: Parameter[]
+  returns?: Returns
+  errors: Error[]
+}
+
+const DetailsBox: React.FC<DetailsBoxProps> = ({
+  method,
+  description,
+  parameters,
+  returns,
+  errors
+}) => {
+  return (
+    <>
+      <Heading as="h1">{method}</Heading>
+
+      {description && (
+        <div className={styles.description}>
+          <p>{description}</p>
+        </div>
+      )}
+
+      <Heading as="h2" className={styles.sectionHeading}>
+        Parameters
+      </Heading>
+
+      <div className={styles.paramContainer}>
+        {parameters.length === 0 ? (
+          <div className={styles.noParams}>
+            This method doesn't accept any parameters.
+          </div>
+        ) : (
+          <div className={styles.paramFields}>
+            {parameters.map((param, index) => (
+              <ParamField
+                key={index}
+                name={param.name}
+                type={param.type}
+                required={param.required}
+                description={param.description}
+                children={param.children}
+                expandableTitle={param.children?.length ? `${param.name} properties` : undefined}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {returns && (
+        <>
+          <Heading as="h2" className={styles.sectionHeading}>
+            Returns
+          </Heading>
+          <div className={styles.paramContainer}>
+            <div className={styles.returnsInfo}>
+              <p>{returns.description}</p>
+            </div>
+          </div>
+        </>
+      )}
+
+      {errors.length > 0 && (
+        <>
+          <Heading as="h2" className={styles.sectionHeading}>
+            Errors
+          </Heading>
+          <div className={styles.paramContainer}>
+            <table className={styles.paramTable}>
+              <thead>
+                <tr>
+                  <th>Code</th>
+                  <th>Message</th>
+                  <th>Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                {errors.map((error, index) => (
+                  <tr key={index}>
+                    <td><code>{error.code}</code></td>
+                    <td>{error.message}</td>
+                    <td>{error.description}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
+    </>
+  )
+}
+
+export default DetailsBox

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

@@ -0,0 +1,47 @@
+.sectionHeading {
+  padding-top: 1.5rem;
+  padding-bottom: 1rem;
+  margin-bottom: 0;
+}
+
+.paramContainer {
+  margin-bottom: 1rem;
+}
+
+.paramTable {
+  margin-top: 1rem !important;
+}
+
+.noParams {
+  padding: 1rem 0;
+  color: var(--ifm-color-emphasis-700);
+  font-style: italic;
+}
+
+.paramFields {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.returnsInfo {
+  padding-bottom: 1rem;
+}
+
+.returnsInfo p {
+  margin: 0.5rem 0;
+}
+
+.returnsInfo p:first-child {
+  margin-top: 0;
+}
+
+.returnsInfo p:last-child {
+  margin-bottom: 0;
+}
+
+html[data-theme='dark'] {
+  .paramTable th {
+    background: var(--ifm-color-emphasis-200);
+  }
+}

src/components/SimplifiedApiReference/Expandable/index.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import styles from './styles.module.css'
+
+interface ExpandableProps {
+  title: string
+  children: React.ReactNode
+}
+
+const Expandable: React.FC<ExpandableProps> = ({ title, children }) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <div className={styles.expandable}>
+      <button
+        className={styles.expandableHeader}
+        onClick={() => setIsExpanded(!isExpanded)}
+        type="button"
+      >
+        <span className={styles.expandableTitle}>{title}</span>
+        <span className={`${styles.expandableIcon} ${isExpanded ? styles.expanded : ''}`}>
+          ▼
+        </span>
+      </button>
+      {isExpanded && (
+        <div className={styles.expandableContent}>
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Expandable

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

@@ -0,0 +1,55 @@
+.expandable {
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 0.5rem;
+  margin: 0.5rem 0;
+  overflow: hidden;
+}
+
+.expandableHeader {
+  width: 100%;
+  background: var(--ifm-color-emphasis-100);
+  border: none;
+  padding: 1rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  font-size: 1.4rem;
+  font-weight: 600;
+  transition: background-color 0.2s ease;
+}
+
+.expandableHeader:hover {
+  background: var(--ifm-color-emphasis-200);
+}
+
+.expandableTitle {
+  color: var(--ifm-color-primary);
+}
+
+.expandableIcon {
+  font-size: 0.8rem;
+  transition: transform 0.2s ease;
+  color: var(--ifm-color-emphasis-700);
+}
+
+.expandableIcon.expanded {
+  transform: rotate(180deg);
+}
+
+.expandableContent {
+  padding: 1rem;
+  background: var(--ifm-color-emphasis-50);
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+html[data-theme='dark'] {
+  .expandableHeader {
+    background: var(--ifm-color-emphasis-200);
+  }
+
+  .expandableHeader:hover {
+    background: var(--ifm-color-emphasis-300);
+  }
+}

src/components/SimplifiedApiReference/ParamField/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import Expandable from '../Expandable'
+import styles from './styles.module.css'
+
+interface NestedParam {
+  name: string
+  type: string
+  required: boolean
+  description: string
+  children?: NestedParam[]
+}
+
+interface ParamFieldProps {
+  name: string
+  type: string
+  required: boolean
+  description: string
+  children?: NestedParam[]
+  expandableTitle?: string
+}
+
+const ParamField: React.FC<ParamFieldProps> = ({
+  name,
+  type,
+  required,
+  description,
+  children = [],
+  expandableTitle
+}) => {
+  const hasChildren = children.length > 0
+
+  const renderNestedParams = (params: NestedParam[], title?: string) => {
+    if (params.length === 0) return null
+
+    return (
+      <Expandable title={title || `${name} properties`}>
+        {params.map((param, index) => (
+          <ParamField
+            key={index}
+            name={param.name}
+            type={param.type}
+            required={param.required}
+            description={param.description}
+            children={param.children}
+            expandableTitle={param.children?.length ? `${param.name} properties` : undefined}
+          />
+        ))}
+      </Expandable>
+    )
+  }
+
+  return (
+    <div className={styles.paramField}>
+      <div className={styles.paramHeader}>
+        <div className={styles.paramName}>
+          <code>{name}</code>
+          <span className={styles.paramType}>({type})</span>
+          {required && <span className={styles.required}>required</span>}
+        </div>
+      </div>
+      <div className={styles.paramDescription}>
+        {description}
+      </div>
+      {hasChildren && renderNestedParams(children, expandableTitle)}
+    </div>
+  )
+}
+
+export default ParamField

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

@@ -0,0 +1,46 @@
+.paramField {
+  margin-bottom: 1rem;
+  padding-top: 1rem;
+}
+
+.paramHeader {
+  margin-bottom: 0.5rem;
+}
+
+.paramName {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.paramName code {
+  font-family: var(--font-mm-sans-mono);
+  font-size: 1.3rem;
+}
+
+.paramType {
+  color: var(--ifm-color-emphasis-700);
+  font-size: 1.4rem;
+  font-style: italic;
+}
+
+.required {
+  background: var(--ifm-color-primary);
+  color: white;
+  padding: 0rem 0.3rem;
+  border-radius: 0.25rem;
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+.paramDescription {
+  font-size: 1.6rem;
+}
+
+html[data-theme='dark'] {
+  .required {
+    color: black;
+    font-weight: 400;
+  }
+}