Merge pull request #3 from MetaMask/fix/general-fixups

Fix/general fixups

Author: BelfordZ

.circleci/config.yml

@@ -20,7 +20,6 @@
     "@rjsf/core": "^5.6.2",
     "@rjsf/utils": "^5.6.2",
     "@rjsf/validator-ajv8": "^5.6.2",
-    "@stoplight/json-schema-viewer": "^4.9.0",
     "@stoplight/markdown-viewer": "^5",
     "@stoplight/mosaic": "^1.32",
     "@stoplight/mosaic-code-viewer": "^1.32",
@@ -29,6 +28,7 @@
     "jest-transform-css": "^2.0.0",
     "json-schema": "^0.2.3",
     "lodash": "^4.17.15",
+    "mm-json-schema-viewer": "^0.0.1",
     "qs": "^6.11.1",
     "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.4.3"

package.json

@@ -46,3 +46,7 @@ select, input {
 #interactive-box input[type=text] {
   width: 100%
 }
+
+.method section {
+  margin-bottom: var(--ifm-heading-margin-bottom);
+}

src/ContentDescriptor/ContentDescriptor.css

@@ -4,8 +4,7 @@ import ReactMarkdown from "react-markdown";
 import { ContentDescriptorObject } from "@open-rpc/meta-schema";
 import "./ContentDescriptor.css";
 import MarkdownDescription from "../MarkdownDescription/MarkdownDescription";
-import { JsonSchemaViewer } from "@stoplight/json-schema-viewer";
-
+import { JsonSchemaViewer } from "mm-json-schema-viewer/dist/index";
 
 interface IProps {
   contentDescriptor?: ContentDescriptorObject;
@@ -20,21 +19,20 @@ class ContentDescriptor extends Component<IProps> {
     const entries = Object.entries(contentDescriptor);
     if (entries.length === 0) { return null; }
     return (
-      <>
+      <div style={{ paddingLeft: 'var(--ifm-list-left-padding)' }}>
         {contentDescriptor.description &&
          <MarkdownDescription
            uiSchema={uiSchema}
            source={contentDescriptor.description}
            className="content-descriptor-description"
          />
         }
-        <h4 style={{marginBottom: "0px"}}>Schema:</h4>
         {contentDescriptor.schema &&
          <JsonSchemaViewer
            schema={contentDescriptor.schema}
          />
         }
-      </>
+      </div>
     );
 
     /* return (

src/ContentDescriptor/ContentDescriptor.tsx

@@ -15,7 +15,7 @@ class Errors extends Component<IProps> {
       return null;
     }
     return (
-      <ExpansionTable headers={["Code", "Message", "Data"]}>
+      <ExpansionTable headers={["Code", "Message"]}>
         {errors.map((row) => (
           <tr>
             <td>{row.code}</td>

src/Errors/Errors.tsx

@@ -244,7 +244,9 @@ const InteractiveMethod: React.FC<Props> = (props) => {
         }
       </div>}
       <div>
-        <button className="button button--primary button--block" onClick={handleExec}>Execute</button>
+        <button className="button button--primary button--block" onClick={handleExec}>
+          Send Request
+        </button>
       </div>
     </>
   );

src/InteractiveMethod/InteractiveMethod.tsx

@@ -54,43 +54,48 @@ const Method = ({method, uiSchema, key, methodPlugins, reactJsonOptions, onExamp
     <div
       id={method.name}
       key={key}
-      className="margin-bottom--sm"
-      >
+      className="method margin-bottom--sm"
+    >
 
-      <div style={{marginBottom: "var(--ifm-heading-margin-bottom)"}}>
-        <h1 key={method.name} className="method-name" style={{display: "inline", marginRight: "3px"}}>{method.name}</h1>
+      <h1 key={method.name} className="method-name" style={{ display: "inline", marginRight: "3px"}}>{method.name}</h1>
 
-        <span key={method.summary} className="method-summary">
-          {method.summary}
-        </span>
-      </div>
-
-      {method.tags && method.tags.length > 0 &&
-       <section key="tags">
-         <Tags tags={method.tags as any} />
-       </section>
+      {method.tags && method.tags.length > 0 && <section key="tags">
+        <Tags tags={method.tags as any} />
+      </section>
       }
-      {method.description &&
+
+      {method.description ?
        <section key="description">
          <MarkdownDescription
            uiSchema={uiSchema}
            source={method.description}
            className="method-description"
          />
        </section>
+      : method.summary ?
+       <p key={method.summary} className="method-summary">
+         {method.summary}
+       </p>
+      : null
       }
-      {method.params && method.params.length > 0 &&
-       <section key="params">
+      <section key="params">
         <div style={{marginBottom: "var(--ifm-heading-margin-bottom)"}}>
-         <h2 style={{ display: 'inline', marginRight: '3px' }}>Params</h2>
-         <span>({method.params.length})</span>
+          <h2 style={{ display: 'inline', marginRight: '3px' }}>Params</h2>
+          <span>({method.params.length})</span>
         </div>
+
+        {method.params && method.params.length > 0 &&
          <Params params={method.params as ContentDescriptorObject[]} uiSchema={uiSchema} />
-       </section>
-      }
+        }
+      </section>
+
       {method.result &&
        <section key="result-title">
-         <h2>Result</h2>
+         <div style={{marginBottom: "var(--ifm-heading-margin-bottom)"}}>
+           <h2 style={{ display: 'inline', marginRight: '3px' }}>Result</h2>
+           <span><i>({(method.result as ContentDescriptorObject).name})</i></span>
+         </div>
+
          <ContentDescriptor
            contentDescriptor={method.result as ContentDescriptorObject}
            hideRequired={true} uiSchema={uiSchema} />
@@ -103,19 +108,21 @@ const Method = ({method, uiSchema, key, methodPlugins, reactJsonOptions, onExamp
        </section>
       }
 
-      <br />
-
       {method.examples && method.examples.length > 0 &&
        <section key="examples">
-         <h2>Examples</h2>
-          <ExamplePairings
-            uiSchema={uiSchema}
-            components={components}
-            examples={method.examples as ExamplePairingObject[]}
-            onExamplePairingChange={onExamplePairingChange}
-            method={method}
-            reactJsonOptions={reactJsonOptions} />
-        </section>
+         <div style={{marginBottom: "var(--ifm-heading-margin-bottom)"}}>
+           <h2 style={{ marginRight: '3px' }}>
+             { (method.examples as ExamplePairingObject[]).length > 1 ? "Examples" : "Example" }
+           </h2>
+         </div>
+         <ExamplePairings
+           uiSchema={uiSchema}
+           components={components}
+           examples={method.examples as ExamplePairingObject[]}
+           onExamplePairingChange={onExamplePairingChange}
+           method={method}
+           reactJsonOptions={reactJsonOptions} />
+       </section>
       }
 
       {links && links.length > 0 &&

src/Method/Method.tsx

@@ -17,7 +17,7 @@ class Params extends Component<IProps> {
     }
     return (
       params.map((row, i) =>
-        <>
+        <section>
           <h3>
             {i + 1}. {row.name}
             {
@@ -35,7 +35,7 @@ class Params extends Component<IProps> {
             contentDescriptor={row}
             uiSchema={uiSchema}
           />
-        </>
+        </section>
       )
     );
   }

src/Params/Params.tsx

@@ -859,20 +859,6 @@
     "@types/json-schema" "^7.0.7"
     magic-error "0.0.1"
 
-"@stoplight/json-schema-viewer@^4.9.0":
-  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/@stoplight/json-schema-viewer/-/json-schema-viewer-4.9.0.tgz#3009e6a9af77756017f48ea3f1ee3e3012f63da0"
-  integrity sha512-xuOt1FFeFxiy/bJrD0++9rjKY0NlaxH7y6jDZGCMGmH0y2vykpC2ZbHji+ol7/rB5TvVp7oE0NwlpK8TVizinw==
-  dependencies:
-    "@stoplight/json" "^3.20.1"
-    "@stoplight/json-schema-tree" "^2.2.2"
-    "@stoplight/react-error-boundary" "^2.0.0"
-    "@types/json-schema" "^7.0.7"
-    classnames "^2.2.6"
-    fnv-plus "^1.3.1"
-    jotai "^1.4.5"
-    lodash "^4.17.19"
-
 "@stoplight/json@^3.12.0", "@stoplight/json@^3.20.1":
   version "3.20.2"
   resolved "https://registry.yarnpkg.com/@stoplight/json/-/json-3.20.2.tgz#466ba5c6381cfd141f1726439442fbd579804c8e"
@@ -3800,6 +3786,20 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+mm-json-schema-viewer@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/mm-json-schema-viewer/-/mm-json-schema-viewer-0.0.1.tgz#995b60f211ecfeee604fa24cc965340a251f8ad3"
+  integrity sha512-Nmly2cwMyIxNIBEPO7Bu9TzcdeuL0gj3ogfB+SWZPGjiXqwHBphMHkR2uPgnL+RPDycs6bS8j/qXDkMN8FYWPw==
+  dependencies:
+    "@stoplight/json" "^3.20.1"
+    "@stoplight/json-schema-tree" "^2.2.2"
+    "@stoplight/react-error-boundary" "^2.0.0"
+    "@types/json-schema" "^7.0.7"
+    classnames "^2.2.6"
+    fnv-plus "^1.3.1"
+    jotai "^1.4.5"
+    lodash "^4.17.19"
+
 mri@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"