feat(docs): act-1397 - synced params with request section

src/components/ParserOpenRPC/InteractiveBox/index.tsx

@@ -15,9 +15,10 @@ interface InteractiveBoxProps {
   params: MethodParam[];
   components: SchemaComponents;
   examples: MethodExample[];
+  onParamChange: (data) => void;
 }
 
-export default function InteractiveBox({ params, components, examples }: InteractiveBoxProps) {
+export default function InteractiveBox({ params, components, examples, onParamChange }: InteractiveBoxProps) {
   const [parsedSchema, setParsedSchema] = useState<RJSFSchema>(null);
   const [defaultFormData, setDefaultFormData] = useState<any>({});
   const [isFormReseted, setIsFormReseted] = useState(false);
@@ -68,9 +69,14 @@ export default function InteractiveBox({ params, components, examples }: Interac
     dereferenceSchema();
     if (examples) {
       setDefaultFormData(defaultExampleFormData);
+      onParamChange(defaultExampleFormData);
     }
   }, []);
 
+  const onChangeHandler = (data) => {
+    onParamChange(data);
+  };
+
   return parsedSchema ? (
     <>
       <div className={styles.tableHeadingRow}>
@@ -88,7 +94,10 @@ export default function InteractiveBox({ params, components, examples }: Interac
         validator={validator}
         liveValidate
         noHtml5Validate
-        onChange={log("changed")}
+        onChange={(data) => {
+          onChangeHandler(data.formData);
+          setDefaultFormData(data.formData);
+        }}
         onSubmit={() => {log("submitted");}}
         onError={log("errors")}
         templates={{

src/components/ParserOpenRPC/ModalDrawer/styles.module.css

@@ -54,5 +54,5 @@
 
 .modalContent {
   height: 394px;
-  overflow-y: scroll;
+  overflow-y: auto;
 }

src/components/ParserOpenRPC/RequestBox/index.tsx

@@ -11,14 +11,16 @@ interface RequestBoxProps {
   method: string;
   params: MethodParam[];
   response?: any;
+  paramsData: any;
   openModal: () => void;
   submitRequest: () => void;
 }
 
-export default function RequestBox({ isMetamaskInstalled, method, params, response, openModal, submitRequest }: RequestBoxProps) {
+export default function RequestBox({ isMetamaskInstalled, method, params, response, paramsData, openModal, submitRequest }: RequestBoxProps) {
   const exampleRequest = useMemo(() => {
-    return `await window.ethereum.request({\n "method": "${method}",\n "params": [${params}],\n});`;
-  }, [method, params]);
+    const preparedParams = JSON.stringify(paramsData, null, 2);
+    return `await window.ethereum.request({\n "method": "${method}",\n "params": ${preparedParams},\n});`;
+  }, [method, paramsData]);
 
   const exampleResponse = useMemo(() => {
     if (!response || response === null) return false

src/components/ParserOpenRPC/index.tsx

@@ -18,7 +18,8 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
   if (!method || !network) return null;
   const [metamaskInstalled, setMetamaskInstalled] = useState(false);
   const [isModalOpen, setModalOpen] = useState(false);
-  const [reqResult, setReqResult] = useState(null)
+  const [reqResult, setReqResult] = useState(null);
+  const [paramsData, setParamsData] = useState([]);
   const openModal = () => setModalOpen(true);
   const closeModal = () => setModalOpen(false);
 
@@ -63,11 +64,18 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
     setMetamaskInstalled(installed);
   }, []);
 
+  const onParamsChangeHandle = (data) => {
+    if (typeof data !== 'object' || data === null || Object.keys(data).length === 0) {
+      setParamsData([]);
+    }
+    setParamsData(Object.values(data));
+  }
+
   const onSubmitRequestHandle = async () => {
     try {
       const response = await (window as any).ethereum.request({
         method: method,
-        params: []
+        params: paramsData
       })
       setReqResult(response);
     } catch (e) {
@@ -96,6 +104,7 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
             params={currentMethodData.params}
             components={currentMethodData.components.schemas}
             examples={currentMethodData.examples}
+            onParamChange={onParamsChangeHandle}
           />
         </ModalDrawer>
       </div>
@@ -106,6 +115,7 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
             isMetamaskInstalled={metamaskInstalled}
             method={method}
             params={currentMethodData.params}
+            paramsData={paramsData}
             response={reqResult}
             openModal={openModal}
             submitRequest={onSubmitRequestHandle}

wallet/reference/new-reference.mdx

@@ -8,4 +8,4 @@ sidebar_class_name: "hidden"
 import ParserOpenRPC from "@site/src/components/ParserOpenRPC";
 import { NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc";
 
-<ParserOpenRPC network={NETWORK_NAMES.metamask} method="eth_getBlockByHash" />
+<ParserOpenRPC network={NETWORK_NAMES.metamask} method="wallet_switchEthereumChain" />