ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-20 19:55:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

WS Tool fixes: cURL modal, Clio Only

Browse Source
This commit is contained in:
mDuo13
2025-09-09 13:35:57 -07:00
parent f31fb25420
commit c68c9f975f
9 changed files with 99 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
@theme/styles.css
View File

@@ -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;

6
resources/dev-tools/components/AlertTemplate.tsx
View File

@@ -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(
<div className={clsx("bootstrap-growl alert alert-dismissible", typeToClass(options.type))} style={{ ...alertStyle, ...style }}>

26
resources/dev-tools/components/websocket-api/ClioOnly.tsx Normal file
View File

@@ -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>
)
}

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

@@ -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,
selectedConnection,
closeCurlModal,
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}
>
{getCurl(currentBody, selectedConnection)}
</textarea>
value={getCurl(selectedConnection, currentBody)}
onChange={() => {}}
/>
</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
closeCurlModal={() => setShowCurlModal(false)}
currentBody={currentBody}
selectedConnection={selectedConnection}
/>}
{showCurlModal && (
<CurlModal
closeCurlModal={() => 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}`;
}

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

@@ -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": {

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

@@ -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)"
}

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

@@ -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) => {
const [isPermalinkModalVisible, setIsPermalinkModalVisible] = useState(false);
const openPermalinkModal = () => {
setIsPermalinkModalVisible(true);
};
const closePermalinkModal = () => {
setIsPermalinkModalVisible(false);
};
export function PermalinkButton ({currentBody, selectedConnection}: PermaLinkButtonProps) {
const [showPermalinkModal, setShowPermalinkModal] = useState(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();

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

@@ -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
className="status clio_only"
title="This method is only available from the Clio server."
>
<i className="fa fa-exclamation-circle"></i>
</span>
<ClioOnlyIcon />
)}
</Link>
</li>

11
resources/dev-tools/websocket-api-tool.page.tsx
View File

@@ -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