Add & use component for 'Try it!' button & related

This commit is contained in:
mDuo13
2025-01-28 16:38:58 -08:00
parent e637346701
commit 9d8cfc88cb
117 changed files with 378 additions and 172 deletions

View File

@@ -5,6 +5,7 @@ import dynamicReact from '@markdoc/markdoc/dist/react';
import { Link } from '@redocly/theme/components/Link/Link';
import { useThemeHooks } from '@redocly/theme/core/hooks'
import { idify } from '../helpers';
import { Button } from '@redocly/theme/components/Button/Button';
export {default as XRPLoader} from '../components/XRPLoader';
export { XRPLCard, CardGrid } from '../components/XRPLCard';
@@ -144,6 +145,58 @@ export function Badge(props: {
}
}
type TryItServer = 's1' | 's2' | 'xrplcluster' | 'testnet' | 'devnet'
export function TryIt(props: {
method: string,
server?: TryItServer
}) {
const { useTranslate } = useThemeHooks()
const { translate } = useTranslate()
let use_server = "";
if (props.server == "s1") {
use_server = "?server=wss%3A%2F%2Fs1.ripple.com%2F"
} else if (props.server == "s2") {
use_server = "?server=wss%3A%2F%2Fs2.ripple.com%2F"
} else if (props.server == "xrplcluster") {
use_server = "?server=wss%3A%2F%2Fxrplcluster.com%2F"
} else if (props.server == 'devnet') {
use_server = "?server=wss%3A%2F%2Fs.devnet.rippletest.net%3A51233%2F"
} else if (props.server == 'testnet') {
use_server = "?server=wss%3A%2F%2Fs.altnet.rippletest.net%3A51233%2F"
}
const to_path = `/resources/dev-tools/websocket-api-tool${use_server}#${props.method}`
return (
<Link style={{marginBottom: "1rem", textDecoration: "none"}} className="btn btn-primary btn-arrow" to={to_path} target="_blank" role="button">{translate("component.tryit", "Try it!")}</Link>
)
}
export function TxExample(props: {
txid: string,
server?: TryItServer
}) {
const { useTranslate } = useThemeHooks()
const { translate } = useTranslate()
let use_server = "";
if (props.server == "s1") {
use_server = "&server=wss%3A%2F%2Fs1.ripple.com%2F"
} else if (props.server == "s2") {
use_server = "&server=wss%3A%2F%2Fs2.ripple.com%2F"
} else if (props.server == "xrplcluster") {
use_server = "&server=wss%3A%2F%2Fxrplcluster.com%2F"
} else if (props.server == 'devnet') {
use_server = "&server=wss%3A%2F%2Fs.devnet.rippletest.net%3A51233%2F"
} else if (props.server == 'testnet') {
use_server = "&server=wss%3A%2F%2Fs.altnet.rippletest.net%3A51233%2F"
}
const ws_req = `req=%7B%22id%22%3A%22example_tx_lookup%22%2C%22command%22%3A%22tx%22%2C%22transaction%22%3A%22${props.txid}%22%2C%22binary%22%3Afalse%2C%22api_version%22%3A2%7D`
const to_path = `/resources/dev-tools/websocket-api-tool?${ws_req}${use_server}`
return (
<Link style={{marginBottom: "1rem", textDecoration: "none"}} className="btn btn-primary btn-arrow" to={to_path} target="_blank" role="button">{translate("component.queryexampletx", "Query example transaction")}</Link>
)
}
function shieldsIoEscape(s: string) {
return s.trim().replaceAll('-', '--').replaceAll('_', '__')
}

View File

@@ -181,3 +181,37 @@ export const cardGrid: Schema & { tagName: string } = {
},
render: 'CardGrid'
}
export const tryIt: Schema & { tagName: string } = {
tagName: 'try-it',
attributes: {
method: {
type: 'String',
required: true
},
server: {
type: 'String',
required: false,
default: ""
}
},
render: 'TryIt',
selfClosing: true
}
export const txExample: Schema & { tagName: string } = {
tagName: 'tx-example',
attributes: {
txid: {
type: 'String',
required: true
},
server: {
type: 'String',
required: false,
default: ""
}
},
render: 'TxExample',
selfClosing: true
}