From bd149fc1535e1b3ce3cc783172728d96e3b5d2f5 Mon Sep 17 00:00:00 2001
From: shanejonas <jonas.shane@gmail.com>
Date: Wed, 27 Nov 2019 17:56:48 -0800
Subject: [PATCH 1/2] feat: add openrpc method object support

---
 src/containers/App.tsx            |  3 +-
 src/containers/Inspector.tsx      | 18 +++++-
 src/containers/JSONRPCRequest.tsx | 91 ++++++++++++++++++++++---------
 3 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index b4c1af9..bf0cdf9 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -18,8 +18,9 @@ const App: React.FC = () => {
         onToggleDarkMode={darkMode.toggle}
         darkMode={darkMode.value}
         url={query.url}
+        openrpcMethodObject={query.openrpcMethodObject}
         request={query.request}
-      />
+      />;
     </MuiThemeProvider>
   );
 };
diff --git a/src/containers/Inspector.tsx b/src/containers/Inspector.tsx
index 9461d10..c48a48c 100644
--- a/src/containers/Inspector.tsx
+++ b/src/containers/Inspector.tsx
@@ -9,12 +9,14 @@ import WbSunnyIcon from "@material-ui/icons/WbSunny";
 import { JSONRPCError } from "@open-rpc/client-js/build/Error";
 import useDarkMode from "use-dark-mode";
 import Editor from "@monaco-editor/react";
+import { MethodObject } from "@open-rpc/meta-schema";
 
 interface IProps {
   url?: string;
   request?: any;
   darkMode?: boolean;
   hideToggleTheme?: boolean;
+  openrpcMethodObject?: MethodObject;
   onToggleDarkMode?: () => void;
 }
 
@@ -68,6 +70,16 @@ const Inspector: React.FC<IProps> = (props) => {
   const [results, setResults] = useState();
   const [url, setUrl] = useState(props.url || "");
   const [client, error, setError] = useClient(url);
+  useEffect(() => {
+    if (props.openrpcMethodObject) {
+      setJson({
+        jsonrpc: "2.0",
+        method: props.openrpcMethodObject.name,
+        params: json.params,
+        id,
+      });
+    }
+  }, [props.openrpcMethodObject, json, setJson, id]);
 
   useEffect(() => {
     if (props.url) {
@@ -151,7 +163,11 @@ const Inspector: React.FC<IProps> = (props) => {
             }
           }}>
           <div style={{ width: "99%", padding: "10px" }}>
-            <JSONRPCRequest onChange={(val) => setJson(JSON.parse(val))} value={JSON.stringify(json, null, 4)} />
+            <JSONRPCRequest
+              onChange={(val) => setJson(JSON.parse(val))}
+              openrpcMethodObject={props.openrpcMethodObject}
+              value={JSON.stringify(json, null, 4)}
+            />
           </div>
           <div style={{ height: "100%", padding: "10px", overflowY: "auto", paddingBottom: "80px" }}>
             {(results || error) &&
diff --git a/src/containers/JSONRPCRequest.tsx b/src/containers/JSONRPCRequest.tsx
index f1efa28..4148d81 100644
--- a/src/containers/JSONRPCRequest.tsx
+++ b/src/containers/JSONRPCRequest.tsx
@@ -1,42 +1,81 @@
 import React from "react";
 import useDarkMode from "use-dark-mode";
 import { monaco, ControlledEditor, Monaco } from "@monaco-editor/react";
+import { MethodObject } from "@open-rpc/meta-schema";
 
 interface IProps {
   onChange?: (newValue: any) => void;
+  openrpcMethodObject?: MethodObject;
   value: any;
 }
-monaco
-  .init()
-  .then((m: Monaco) => {
-    const modelUri = m.Uri.parse(`inmemory:/${Math.random()}/model/userSpec.json`);
-    m.languages.json.jsonDefaults.setDiagnosticsOptions({
-      enableSchemaRequest: true,
-      schemas: [
-        {
-          fileMatch: ["*"],
-          schema: {
-            type: "object",
-            properties: {
-              method: {
+
+const JSONRPCRequest: React.FC<IProps> = (props) => {
+  const darkMode = useDarkMode();
+  monaco
+    .init()
+    .then((m: Monaco) => {
+      const modelUri = m.Uri.parse(`inmemory:/${Math.random()}/model/userSpec.json`);
+      let schema: any = {
+        type: "object",
+        properties: {
+          jsonrpc: {
+            type: "string",
+            enum: ["2.0"],
+          },
+          id: {
+            oneOf: [
+              {
                 type: "string",
               },
-              params: {
-                type: "array",
+              {
+                type: "number",
               },
-            },
+            ],
+          },
+          method: {
+            type: "string",
+          },
+          params: {
+            type: "array",
           },
-          uri: modelUri.toString(),
         },
-      ],
-      validate: true,
-    });
-    window.addEventListener("resize", m.editor.layout());
-  })
-  .catch((error: Error) => console.error("An error occurred during initialization of Monaco: ", error));
-
-const JSONRPCRequest: React.FC<IProps> = (props) => {
-  const darkMode = useDarkMode();
+      };
+      if (props.openrpcMethodObject) {
+        schema = {
+          ...schema,
+          additionalProperties: false,
+          properties: {
+            ...schema.properties,
+            method: {
+              type: "string",
+              enum: [props.openrpcMethodObject.name],
+            },
+            params: {
+              ...schema.properties.params,
+              items: props.openrpcMethodObject.params.map((param: any) => {
+                return {
+                  ...param.schema,
+                  additionalProperties: false,
+                };
+              }),
+            },
+          },
+        };
+      }
+      m.languages.json.jsonDefaults.setDiagnosticsOptions({
+        enableSchemaRequest: true,
+        schemas: [
+          {
+            fileMatch: ["*"],
+            schema,
+            uri: modelUri.toString(),
+          },
+        ],
+        validate: true,
+      });
+      window.addEventListener("resize", m.editor.layout());
+    })
+    .catch((error: Error) => console.error("An error occurred during initialization of Monaco: ", error));
 
   const handleChange = (ev: any, value: any) => {
     if (props.onChange) {

From faaa9471244c46165bb0d9bf48ca0c597bd6ba05 Mon Sep 17 00:00:00 2001
From: Shane <jonas.shane@gmail.com>
Date: Thu, 28 Nov 2019 12:58:16 -0800
Subject: [PATCH 2/2] Update src/containers/App.tsx

---
 src/containers/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index bf0cdf9..d96bffb 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -20,7 +20,7 @@ const App: React.FC = () => {
         url={query.url}
         openrpcMethodObject={query.openrpcMethodObject}
         request={query.request}
-      />;
+      />
     </MuiThemeProvider>
   );
 };