WS Tool fixes: cURL modal, Clio Only

@theme/styles.css

@@ -11,6 +11,13 @@ ul.nav.navbar-nav {
   flex-grow: 1;
 }
 
+.clio-only-notice {
+	background-color: var(--admonition-info-bg-color);
+	margin-left: var(--spacing-sm);
+	padding: var(--spacing-xs);
+	border-radius: var(--border-radius);
+}
+
 :root, :root.dark {
   --navbar-height: 80px;
 

resources/dev-tools/components/AlertTemplate.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
-import * as React from 'react';
+import * as React from 'react'
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks'
   
 const alertStyle = {
   position: "relative",
@@ -30,7 +30,7 @@ interface AlertTemplateProps {
 }
   
 export default function AlertTemplate ({ message, options, style, close }: AlertTemplateProps): React.JSX.Element {
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate } = useThemeHooks()
   const { translate } = useTranslate()
   return(
     <div className={clsx("bootstrap-growl alert alert-dismissible", typeToClass(options.type))} style={{ ...alertStyle, ...style }}>

resources/dev-tools/components/websocket-api/ClioOnly.tsx

@@ -0,0 +1,26 @@
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export function ClioOnlyIcon () {
+  const { useTranslate } = useThemeHooks()
+  const { translate } = useTranslate()
+  return (
+      <span
+        className="status clio_only"
+        title={translate("This method is only available from the Clio server.")}
+      >
+        <i className="fa fa-exclamation-circle"></i>
+      </span>
+  )
+}
+
+export function ClioOnlyNotice() {
+  const { useTranslate } = useThemeHooks()
+  const { translate } = useTranslate()
+  return (
+    <span className="clio-only-notice"
+    >
+      <ClioOnlyIcon />
+      {translate(" Clio only")}
+    </span>
+  )
+}

resources/dev-tools/components/websocket-api/curl-modal.tsx

@@ -1,6 +1,6 @@
+import React, { useRef, useState } from 'react';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Connection } from './types';
-import { useRef, useState } from 'react';
 import { Modal, ModalClipboardBtn, ModalCloseBtn } from '../Modal';
 
 interface CurlButtonProps {
@@ -12,36 +12,18 @@ interface CurlProps extends CurlButtonProps{
   closeCurlModal: () => void;
 }
 
-const getCurl = function (currentBody, selectedConnection: Connection) {
-  let body;
-  try {
-    // change WS to JSON-RPC syntax
-    const params = JSON.parse(currentBody);
-    delete params.id;
-    const method = params.command;
-    delete params.command;
-    const body_json = { method: method, params: [params] };
-    body = JSON.stringify(body_json, null, null);
-  } catch (e) {
-    alert("Can't provide curl format of invalid JSON syntax");
-    return;
-  }
-
-  const server = selectedConnection.jsonrpc_url;
-
-  return `curl -H 'Content-Type: application/json' -d '${body}' ${server}`;
-};
-
 export const CurlModal: React.FC<CurlProps> = ({
-                                                 currentBody,
+                                                  closeCurlModal,
-                                                 selectedConnection,
+                                                  currentBody,
+                                                  selectedConnection,
                                                }) => {
-  const curlRef = useRef(null);
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
+  const curlRef = useRef(null);
+
   const footer = <>
     <ModalClipboardBtn textareaRef={curlRef} />
-    <ModalCloseBtn onClick={() => {}} />
+    <ModalCloseBtn onClick={closeCurlModal} />
   </>
 
   return (
@@ -63,16 +45,16 @@ export const CurlModal: React.FC<CurlProps> = ({
             className="form-control"
             rows={8}
             ref={curlRef}
-          >
+            value={getCurl(selectedConnection, currentBody)}
-            {getCurl(currentBody, selectedConnection)}
+            onChange={() => {}}
-          </textarea>
+          />
         </div>
       </form>
     </Modal>
   );
 };
 
-export const CurlButton = ({selectedConnection, currentBody}: CurlButtonProps) => {
+export function CurlButton ({selectedConnection, currentBody}: CurlButtonProps) {
   const [showCurlModal, setShowCurlModal] = useState(false);
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -87,10 +69,32 @@ export const CurlButton = ({selectedConnection, currentBody}: CurlButtonProps) =
       >
         <i className="fa fa-terminal"></i>
       </button>
-      {showCurlModal && <CurlModal
+      {showCurlModal && (
-        closeCurlModal={() => setShowCurlModal(false)}
+        <CurlModal
-        currentBody={currentBody}
+          closeCurlModal={() => setShowCurlModal(false)}
-        selectedConnection={selectedConnection}
+          currentBody={currentBody}
-      />}
+          selectedConnection={selectedConnection}
+        />
+      )}
   </>
 }
+
+function getCurl(selectedConnection: Connection, currentBody) {
+  let body : string;
+  try {
+    // change WS to JSON-RPC syntax
+    const params = JSON.parse(currentBody);
+    delete params.id;
+    const method = params.command;
+    delete params.command;
+    const body_json = { method: method, params: [params] };
+    body = JSON.stringify(body_json, null, null);
+  } catch (e) {
+    alert("Can't provide curl format of invalid JSON syntax");
+    return;
+  }
+
+  const server = selectedConnection.jsonrpc_url;
+
+  return `curl -H 'Content-Type: application/json' -d '${body}' ${server}`;
+}

resources/dev-tools/components/websocket-api/data/command-list.json

@@ -4,7 +4,7 @@
     "methods": [
       {
         "name": "account_channels",
-        "description": "Returns information about an account's <a href='/docs/concepts/payment-types/payment-channels/'>payment channels</a>.",
+        "description": "Returns information about an account's payment channels.",
         "link": "/docs/references/http-websocket-apis/public-api-methods/account-methods/account_channels",
         "body": {
           "command": "account_channels",
@@ -414,7 +414,7 @@
     "methods": [
       {
         "name": "mpt_holders",
-        "description": "Return all holders of an MPT and their balance (Clio only).",
+        "description": "Return all holders of an MPT and their balance.",
         "link": "/docs/references/http-websocket-apis/public-api-methods/clio-methods/mpt_holders",
         "clio_only": true,
         "body": {
@@ -431,7 +431,7 @@
     "methods": [
       {
         "name": "nft_history",
-        "description": "Get past transaction metadata for an NFT (Clio only).",
+        "description": "Get past transaction metadata for an NFT.",
         "link": "/docs/references/http-websocket-apis/public-api-methods/clio-methods/nft_history",
         "clio_only": true,
         "body": {
@@ -442,7 +442,7 @@
       },
       {
         "name": "nft_info",
-        "description": "Get info about an NFT (Clio only).",
+        "description": "Get info about an NFT.",
         "clio_only": true,
         "link": "/docs/references/http-websocket-apis/public-api-methods/clio-methods/nft_info",
         "body": {
@@ -453,7 +453,7 @@
       },
       {
         "name": "nfts_by_issuer",
-        "description": "Get a list of NFTs issued by a specific account, optionally filtered by taxon (Clio only).",
+        "description": "Get a list of NFTs issued by a specific account, optionally filtered by taxon.",
         "clio_only": true,
         "link": "/docs/references/http-websocket-apis/public-api-methods/clio-methods/nfts_by_issuer",
         "body": {

resources/dev-tools/components/websocket-api/data/connections.json

@@ -45,14 +45,14 @@
   {
     "id": "connection-testnet-clio",
     "ws_url": "wss://clio.altnet.rippletest.net:51233/",
-    "jsonrpc-url": "https://clio.altnet.rippletest.net:51234/",
+    "jsonrpc_url": "https://clio.altnet.rippletest.net:51234/",
     "shortname": "Testnet-clio",
     "longname": "clio.altnet.rippletest.net (Testnet Public Cluster with Clio)"
   },
   {
     "id": "connection-devnet-clio",
     "ws_url": "wss://clio.devnet.rippletest.net:51233/",
-    "jsonrpc-url": "https://clio.devnet.rippletest.net:51234/",
+    "jsonrpc_url": "https://clio.devnet.rippletest.net:51234/",
     "shortname": "Devnet-clio",
     "longname": "clio.devnet.rippletest.net (Devnet Public Cluster with Clio)"
   }

resources/dev-tools/components/websocket-api/permalink-modal.tsx

@@ -9,7 +9,7 @@ interface PermaLinkButtonProps {
 }
 
 interface PermaLinkProps extends PermaLinkButtonProps {
-  closePermalinkModal: any;
+  closePermalinkModal: () => void;
 }
 
 const PermalinkModal: React.FC<PermaLinkProps> = ({
@@ -43,6 +43,7 @@ const PermalinkModal: React.FC<PermaLinkProps> = ({
           <textarea
             id="permalink-box-1"
             className="form-control"
+            rows={8}
             ref={permalinkRef}
             value={getPermalink(selectedConnection, currentBody)}
             onChange={() => {}}
@@ -53,15 +54,8 @@ const PermalinkModal: React.FC<PermaLinkProps> = ({
   );
 };
 
-export const PermalinkButton = ({currentBody, selectedConnection}: PermaLinkButtonProps) => {
+export function PermalinkButton ({currentBody, selectedConnection}: PermaLinkButtonProps) {
-  const [isPermalinkModalVisible, setIsPermalinkModalVisible] = useState(false);
+  const [showPermalinkModal, setShowPermalinkModal] = useState(false);
-
-  const openPermalinkModal = () => {
-    setIsPermalinkModalVisible(true);
-  };
-  const closePermalinkModal = () => {
-    setIsPermalinkModalVisible(false);
-  };
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -71,13 +65,13 @@ export const PermalinkButton = ({currentBody, selectedConnection}: PermaLinkButt
       data-toggle="modal"
       data-target="#wstool-1-permalink"
       title={translate("Permalink")}
-      onClick={openPermalinkModal}
+      onClick={() => setShowPermalinkModal(true)}
     >
       <i className="fa fa-link"></i>
     </button>
-    {isPermalinkModalVisible && (
+    {showPermalinkModal && (
       <PermalinkModal
-        closePermalinkModal={closePermalinkModal}
+        closePermalinkModal={() => setShowPermalinkModal(false)}
         currentBody={currentBody}
         selectedConnection={selectedConnection}
       />
@@ -85,12 +79,12 @@ export const PermalinkButton = ({currentBody, selectedConnection}: PermaLinkButt
   </>
 }
 
-const getPermalink = (selectedConnection, currentBody) => {
+function getPermalink (selectedConnection: Connection, currentBody) {
   const startHref = window.location.origin + window.location.pathname;
   const encodedBody = encodeURIComponent(get_compressed_body(currentBody));
   const encodedServer = encodeURIComponent(selectedConnection.ws_url);
   return `${startHref}?server=${encodedServer}&req=${encodedBody}`;
-};
+}
 
 function get_compressed_body(currentBody) {
   return currentBody.replace("\n", "").trim();

resources/dev-tools/components/websocket-api/right-sidebar.tsx

@@ -3,6 +3,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from "@redocly/theme/components/Link/Link";
 import { slugify } from "./slugify";
 import { CommandGroup, CommandMethod } from './types';
+import { ClioOnlyIcon } from './ClioOnly';
 
 interface RightSideBarProps {
   commandList: CommandGroup[];
@@ -53,12 +54,7 @@ export const RightSideBar: React.FC<RightSideBarProps> = ({
                     </span>
                   )}
                   {method.clio_only && (
-                    <span
+                    <ClioOnlyIcon />
-                      className="status clio_only"
-                      title="This method is only available from the Clio server."
-                    >
-                      <i className="fa fa-exclamation-circle"></i>
-                    </span>
                   )}
                 </Link>
               </li>

resources/dev-tools/websocket-api-tool.page.tsx

@@ -23,6 +23,7 @@ import { CommandGroup, CommandMethod } from './components/websocket-api/types';
 import commandList from "./components/websocket-api/data/command-list.json";
 import connections from "./components/websocket-api/data/connections.json";
 import XRPLoader from '../../@theme/components/XRPLoader';
+import { ClioOnlyNotice } from './components/websocket-api/ClioOnly';
 
 export const frontmatter = {
   seo: {
@@ -208,10 +209,12 @@ export function WebsocketApiTool() {
               {currentMethod.description && (
                 <p
                   className="blurb"
-                  dangerouslySetInnerHTML={{
+                >
-                    __html: currentMethod.description,
+                  {currentMethod.description}
-                  }}
+                  {currentMethod.clio_only ? 
-                />
+                    <ClioOnlyNotice /> : ""
+                  }
+                </p>
               )}
               {currentMethod.link && (
                 <Link