feat(ref): act-1538 - added response example to ref pages (#1579)

Author: TrofimovAnton85

src/components/ParserOpenRPC/RequestBox/index.tsx

@@ -15,6 +15,8 @@ interface RequestBoxProps {
   openModal: () => void;
   submitRequest: () => void;
   isMetamaskNetwork?: boolean;
+  defExampleResponse?: any;
+  resetResponseHandle: () => void;
 }
 
 export default function RequestBox({
@@ -26,6 +28,8 @@ export default function RequestBox({
   openModal,
   submitRequest,
   isMetamaskNetwork = false,
+  defExampleResponse,
+  resetResponseHandle,
 }: RequestBoxProps) {
 
   const exampleRequest = useMemo(() => {
@@ -40,8 +44,18 @@ export default function RequestBox({
   }, [method, paramsData]);
 
   const exampleResponse = useMemo(() => {
-    return JSON.stringify(response, null, 2);
-  }, [response]);
+    if (defExampleResponse && response === undefined) {
+      return JSON.stringify(
+        defExampleResponse === "null" ? null : defExampleResponse,
+        null,
+        2
+      );
+    }
+    if (response !== undefined) {
+      return JSON.stringify(response, null, 2);
+    }
+    return false
+  }, [response, defExampleResponse]);
 
   const methodsWithRequiredWalletConnection = ["eth_accounts", "eth_sendTransaction", "personal_sign", "eth_signTypedData_v4"];
   const isRunAndCustomizeRequestDisabled = methodsWithRequiredWalletConnection.includes(method) ?
@@ -93,10 +107,22 @@ export default function RequestBox({
           }
         </div>
       </div>
-      {response !== undefined && (
+      {exampleResponse && (
         <div className={styles.cardWrapper}>
           <div className={styles.cardHeader}>
-            <strong className={styles.cardHeading}>Response</strong>
+            <strong className={styles.cardHeading}>
+              {defExampleResponse && response === undefined ? "Example response" : "Response"}
+            </strong>
+            {defExampleResponse && response !== undefined && (
+              <Tooltip message="Reset response">
+                <button
+                  className={styles.resetResponseBtn}
+                  onClick={resetResponseHandle}
+                >
+                  <img src="/img/icons/reset-icon.svg" />
+                </button>
+              </Tooltip>
+            )}
           </div>
           <div>
             <CodeBlock language="javascript" className={clsx(styles.responseBlock, "margin-bottom--none")}>

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

@@ -9,6 +9,9 @@
 .cardHeader {
   border-bottom: 1px solid #848c96;
   padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .cardHeading {
@@ -31,3 +34,9 @@
   max-height: 400px;
   overflow-y: auto;
 }
+
+.resetResponseBtn {
+  display: block;
+  background: none;
+  border: 0;
+}

src/components/ParserOpenRPC/index.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo, useState } from "react";
+import React, { createContext, useContext, useMemo, useState, useEffect } from "react";
 import { usePluginData } from "@docusaurus/useGlobalData";
 import { useLocation } from "@docusaurus/router";
 import { ResponseItem, NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc";
@@ -51,6 +51,7 @@ export default function ParserOpenRPC({
   const [isDrawerContentFixed, setIsDrawerContentFixed] = useState(false);
   const [drawerLabel, setDrawerLabel] = useState(null);
   const [isComplexTypeView, setIsComplexTypeView] = useState(false);
+  const [defExampleResponse, setDefExampleResponse] = useState(undefined);
   const { metaMaskAccount, metaMaskProvider } = useContext(
     MetamaskProviderContext
   );
@@ -120,6 +121,27 @@ export default function ParserOpenRPC({
 
   const isMetamaskNetwork = network === NETWORK_NAMES.metamask;
 
+  useEffect(() => {
+    const example = currentMethodData?.examples?.[0];
+    if (example?.result) {
+      if (example.id && example.jsonrpc) {
+        setDefExampleResponse({
+          id: example.id,
+          jsonrpc: example.jsonrpc,
+          result: example.result.value,
+        });
+      } else {
+        setDefExampleResponse(example.result.value);
+      }
+    } else {
+      setDefExampleResponse(undefined);
+    }
+  }, [currentMethodData]);
+
+  const resetResponseHandle = () => {
+    setReqResult(undefined);
+  }
+
   const onParamsChangeHandle = (data) => {
     trackInputChangeForSegment({
       eventName: "Request Configuration Started",
@@ -254,6 +276,8 @@ export default function ParserOpenRPC({
               openModal={openModal}
               submitRequest={onSubmitRequestHandle}
               isMetamaskNetwork={isMetamaskNetwork}
+              defExampleResponse={defExampleResponse}
+              resetResponseHandle={resetResponseHandle}
             />
           </div>
         </div>