diff --git a/src/components/ParserOpenRPC/RequestBox/index.tsx b/src/components/ParserOpenRPC/RequestBox/index.tsx
index d4fadb818f4..c55b9ad1770 100644
--- a/src/components/ParserOpenRPC/RequestBox/index.tsx
+++ b/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({
}
- {response !== undefined && (
+ {exampleResponse && (
-
Response
+
+ {defExampleResponse && response === undefined ? "Example response" : "Response"}
+
+ {defExampleResponse && response !== undefined && (
+
+
+
+ )}
diff --git a/src/components/ParserOpenRPC/RequestBox/styles.module.css b/src/components/ParserOpenRPC/RequestBox/styles.module.css
index 30fd67c786d..78f14a484a6 100644
--- a/src/components/ParserOpenRPC/RequestBox/styles.module.css
+++ b/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;
+}
diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx
index 110af47180b..f665172c525 100644
--- a/src/components/ParserOpenRPC/index.tsx
+++ b/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}
/>