From c68c9f975f6e8666a298a5ca5be4c10adcac290c Mon Sep 17 00:00:00 2001 From: mDuo13 Date: Tue, 9 Sep 2025 13:35:57 -0700 Subject: [PATCH 1/3] WS Tool fixes: cURL modal, Clio Only --- @theme/styles.css | 7 ++ .../dev-tools/components/AlertTemplate.tsx | 6 +- .../components/websocket-api/ClioOnly.tsx | 26 +++++++ .../components/websocket-api/curl-modal.tsx | 72 ++++++++++--------- .../websocket-api/data/command-list.json | 10 +-- .../websocket-api/data/connections.json | 4 +- .../websocket-api/permalink-modal.tsx | 24 +++---- .../websocket-api/right-sidebar.tsx | 8 +-- .../dev-tools/websocket-api-tool.page.tsx | 11 +-- 9 files changed, 99 insertions(+), 69 deletions(-) create mode 100644 resources/dev-tools/components/websocket-api/ClioOnly.tsx diff --git a/@theme/styles.css b/@theme/styles.css index 8c098dae15..90b191b92d 100644 --- a/@theme/styles.css +++ b/@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; diff --git a/resources/dev-tools/components/AlertTemplate.tsx b/resources/dev-tools/components/AlertTemplate.tsx index 592309f9e9..b500b0444a 100644 --- a/resources/dev-tools/components/AlertTemplate.tsx +++ b/resources/dev-tools/components/AlertTemplate.tsx @@ -1,6 +1,6 @@ import clsx from 'clsx' -import * as React from 'react'; -import { useThemeHooks } from '@redocly/theme/core/hooks'; +import * as React from 'react' +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(
diff --git a/resources/dev-tools/components/websocket-api/ClioOnly.tsx b/resources/dev-tools/components/websocket-api/ClioOnly.tsx new file mode 100644 index 0000000000..1838f5ec5b --- /dev/null +++ b/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 ( + + + + ) +} + +export function ClioOnlyNotice() { + const { useTranslate } = useThemeHooks() + const { translate } = useTranslate() + return ( + + + {translate(" Clio only")} + + ) +} diff --git a/resources/dev-tools/components/websocket-api/curl-modal.tsx b/resources/dev-tools/components/websocket-api/curl-modal.tsx index fc718ff247..d1525f80b0 100644 --- a/resources/dev-tools/components/websocket-api/curl-modal.tsx +++ b/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 = ({ - currentBody, - selectedConnection, + closeCurlModal, + currentBody, + selectedConnection, }) => { - const curlRef = useRef(null); const { useTranslate } = useThemeHooks(); const { translate } = useTranslate(); + const curlRef = useRef(null); + const footer = <> - {}} /> + return ( @@ -63,16 +45,16 @@ export const CurlModal: React.FC = ({ className="form-control" rows={8} ref={curlRef} - > - {getCurl(currentBody, selectedConnection)} - + value={getCurl(selectedConnection, currentBody)} + onChange={() => {}} + />
); }; -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) = > - {showCurlModal && setShowCurlModal(false)} - currentBody={currentBody} - selectedConnection={selectedConnection} - />} + {showCurlModal && ( + setShowCurlModal(false)} + 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}`; +} diff --git a/resources/dev-tools/components/websocket-api/data/command-list.json b/resources/dev-tools/components/websocket-api/data/command-list.json index 6839b323c1..eca83a9dcb 100644 --- a/resources/dev-tools/components/websocket-api/data/command-list.json +++ b/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 payment channels.", + "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": { diff --git a/resources/dev-tools/components/websocket-api/data/connections.json b/resources/dev-tools/components/websocket-api/data/connections.json index 1186fe5fab..4dfed06ca9 100644 --- a/resources/dev-tools/components/websocket-api/data/connections.json +++ b/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)" } diff --git a/resources/dev-tools/components/websocket-api/permalink-modal.tsx b/resources/dev-tools/components/websocket-api/permalink-modal.tsx index fd3c44d2f0..307d5172f2 100644 --- a/resources/dev-tools/components/websocket-api/permalink-modal.tsx +++ b/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 = ({ @@ -43,6 +43,7 @@ const PermalinkModal: React.FC = ({