feat: adds support for schemaUrl to inspector

src/containers/App.tsx

@@ -7,11 +7,14 @@ import useDarkMode from "use-dark-mode";
 import Inspector from "./Inspector";
 import useQueryParams from "../hooks/useQueryParams";
 import * as monaco from "monaco-editor";
+import useOpenrpcDocument from "../hooks/useOpenrpcDocument";
 
 const App: React.FC = () => {
   const darkMode = useDarkMode();
   const [query] = useQueryParams();
   const theme = darkMode.value ? darkTheme : lightTheme;
+  const openrpcDocument = useOpenrpcDocument(query.openrpcDocument, query.schemaUrl);
+
   useEffect(() => {
     const t = darkMode.value ? "vs-dark" : "vs";
     monaco.editor.setTheme(t);
@@ -27,7 +30,7 @@ const App: React.FC = () => {
         customTransport={query.customTransport}
         transport={query.transport}
         url={query.url}
-        openrpcDocument={query.openrpcDocument}
+        openrpcDocument={openrpcDocument}
         request={query.request}
       />
     </MuiThemeProvider>

src/hooks/useOpenrpcDocument.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+const useOpenrpcDocument = (openrpcDocument?: string, schemaUrl?: string) => {
+
+    const [openrpcDoc, setOpenrpcDoc] = useState<any>(openrpcDocument);
+    useEffect(() => {
+      async function retrieveOpenrpcDocument() {
+        try {
+          if (!openrpcDocument && schemaUrl) {
+            const response = await fetch(schemaUrl);
+            const doc = await response.json();
+            setOpenrpcDoc(doc);
+          }
+
+        } catch (e) {
+          setOpenrpcDoc(undefined);
+        }
+      }
+      retrieveOpenrpcDocument();
+    }, [openrpcDocument, schemaUrl]);
+    return openrpcDoc;
+};
+
+export default useOpenrpcDocument;