Merge pull request #2901 from XRPLF/fix_devtool_links

Update broken leagcy links in dev tools

Author: mDuo13

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

@@ -40,7 +40,7 @@
     "jsonrpc_url": "http://localhost:5005/",
     "shortname": "Local server",
     "longname":
-    "localhost:6006 (Local <code>rippled</code> Server on port 6006) <br/>\n              <small>(Requires that you <a href=\"install-rippled.html\">run <code>rippled</code></a> on this machine with default WebSocket settings)</small>"
+    "localhost:6006 (Local <code>rippled</code> Server on port 6006) <br/>\n              <small>(Requires that you <a href=\"../../docs/infrastructure/installation\">run <code>rippled</code></a> on this machine with default WebSocket settings)</small>"
   },
   {
     "id": "connection-testnet-clio",

resources/dev-tools/domain-verifier.page.tsx

@@ -5,8 +5,9 @@ import addressCodec, { encodeNodePublic } from "ripple-address-codec";
 import { verify as keyCodecVerify } from "ripple-keypairs";
 import { parse } from "smol-toml";
 import { TextLookupForm } from "./components/TextLookupForm";
-import { addNewLogEntry, LogEntryItem, updateLogEntry } from './components/LogEntry'
-import { hexToBytes, hexToString, stringToHex } from "@xrplf/isomorphic/utils"
+import { addNewLogEntry, LogEntryItem, updateLogEntry } from "./components/LogEntry";
+import { hexToBytes, hexToString, stringToHex } from "@xrplf/isomorphic/utils";
+import { Link } from "@redocly/theme/components/Link/Link";
 
 export const frontmatter = {
   seo: {
@@ -16,7 +17,7 @@ export const frontmatter = {
 };
 
 const TIPS =
-  <p>Check if the xrp-ledger.toml file is actually hosted in the /.well-known/ location at the domain in your manifest. Check your server\'s HTTPS settings and certificate, and make sure your server provides the required <a href="xrp-ledger-toml.html#cors-setup">CORS header.</a></p>;
+  <p>Check if the xrp-ledger.toml file is actually hosted in the /.well-known/ location at the domain in your manifest. Check your server\'s HTTPS settings and certificate, and make sure your server provides the required <Link to="../../docs/references/xrp-ledger-toml#cors-setup">CORS header.</Link></p>;
 
 const DomainVerificationPage = () => {
   const { useTranslate } = useThemeHooks();

resources/dev-tools/rpc-tool.page.tsx

@@ -278,7 +278,7 @@ export default function RpcTool() {
                   )}
                   {txResponse && (
                     <RPCResponseGroup response={txResponse}
-                                      anchor={<a href="tx.html">tx</a>}
+                                      anchor={<Link to="../../docs/references/http-websocket-apis/public-api-methods/transaction-methods/tx">tx</Link>}
                                       customExpanded={3}
                                       customExpandedText={translate("expand tx")}
                     />
@@ -287,7 +287,7 @@ export default function RpcTool() {
                     {accountInfoResponse && (
                       <>
                         <h3>
-                          <a href="account_info.html">account_info</a>
+                          <Link to="../../docs/references/http-websocket-apis/public-api-methods/account-methods/account_info">account_info</Link>
                         </h3>
                         <JsonView
                           src={accountInfoResponse}
@@ -299,25 +299,25 @@ export default function RpcTool() {
                     )}
                     {accountLinesResponse && (
                       <RPCResponseGroup response={accountLinesResponse}
-                                        anchor={<a href="account_lines.html">account_lines</a>}
+                                        anchor={<Link to="../../docs/references/http-websocket-apis/public-api-methods/account-methods/account_lines">account_lines</Link>}
                       />)
                     }
                     {accountTxResponse && (
                       <RPCResponseGroup response={accountTxResponse}
-                                        anchor={<><a href="account_tx.html">account_tx</a>{" "} {translate("(last 20)")}</>}
+                                        anchor={<><Link to="../../docs/references/http-websocket-apis/public-api-methods/account-methods/account_tx">account_tx</Link>{" "} {translate("(last 20)")}</>}
                                         customExpanded={3}
                                         customExpandedText={translate("expand tx")}
                       />)
                     }
                     {accountObjectsResponse && (
                         <RPCResponseGroup response={accountObjectsResponse}
-                                          anchor={<a href="account_objects.html">account_objects</a>}
+                                          anchor={<Link to="../../docs/references/http-websocket-apis/public-api-methods/account-methods/account_objects">account_objects</Link>}
                         />)
                     }
                   </div>
                   {ledgerResponse && (
                     <RPCResponseGroup response={ledgerResponse}
-                                      anchor={<a href="ledger.html">ledger</a>}
+                                      anchor={<Link to="../../docs/references/http-websocket-apis/public-api-methods/ledger-methods/ledger">ledger</Link>}
                     />)
                   }
                 </div>

resources/dev-tools/toml-checker/ValidateTomlSteps.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Link } from "@redocly/theme/components/Link/Link";
 import axios, { AxiosError } from "axios";
 import { parse } from "smol-toml";
 import { getListEntries } from "./ListTomlFields";
@@ -299,7 +300,7 @@ export async function fetchFile(
             followUpMessage: (<p>
                 {"Check if the file is actually hosted at the URL above, "
                 + "check your server's HTTPS settings and certificate, and make sure your server provides the required "}
-                <a href="xrp-ledger-toml.html#cors-setup">CORS header.</a>
+                <Link to="../../docs/references/xrp-ledger-toml#cors-setup">CORS header.</Link>
             </p>)
         }}
         updateLogEntry(setLogEntries, errorUpdate)

resources/dev-tools/tx-sender.page.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react'
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Link } from '@redocly/theme/components/Link/Link';
 
 import AlertTemplate from './components/AlertTemplate';
 import { transitions, positions, Provider as AlertProvider } from 'react-alert'
@@ -223,7 +224,7 @@ function TxSenderBody(): React.JSX.Element {
                                 {{
                                     buttonText: "Send XRP Payment",
                                     units: "drops of XRP",
-                                    longerDescription: (<div>{translate("resources.dev-tool.tx-sender.send-xrp-desc.part1", "Send a ")}<a href="send-xrp.html">{translate("resources.dev-tool.tx-sender.send-xrp-desc.part2", "simple XRP-to-XRP payment")}</a>{translate("resources.dev-tool.tx-sender.send-xrp-desc.part3", ".")}</div>),
+                                    longerDescription: (<div>{translate("resources.dev-tool.tx-sender.send-xrp-desc.part1", "Send a ")}<Link to="../../docs/tutorials/how-tos/send-xrp">{translate("resources.dev-tool.tx-sender.send-xrp-desc.part2", "simple XRP-to-XRP payment")}</Link>{translate("resources.dev-tool.tx-sender.send-xrp-desc.part3", ".")}</div>),
                                 }}
                                 inputSettings={
                                 {
@@ -259,7 +260,7 @@ function TxSenderBody(): React.JSX.Element {
                                     units: "drops of XRP",
                                     longerDescription: <div>{translate("Deliver a small amount of XRP with a large ")}
                                     <code>{translate("Amount")}</code>{translate(" value, to test your handling of ")}
-                                    <a href="partial-payments.html">{translate("partial payments")}</a>{translate(".")}</div>,
+                                    <Link to="../../docs/concepts/payment-types/partial-payments">{translate("partial payments")}</Link>{translate(".")}</div>,
                                     buttonTitle: "(Please wait for partial payments setup to finish)",
                                 }}
                                 loadingBar={{
@@ -287,7 +288,7 @@ function TxSenderBody(): React.JSX.Element {
                                 {{
                                     buttonText: translate("Create Escrow"),
                                     units: translate("seconds"),
-                                    longerDescription: (<div>{translate("Create a ")}<a href="escrow.html">{translate("time-based escrow")}</a>
+                                    longerDescription: (<div>{translate("Create a ")}<Link to="../../docs/concepts/payment-types/escrow">{translate("time-based escrow")}</Link>
                                     {translate(" of 1 XRP for the specified number of seconds.")}</div>),
                                 }}
                                 inputSettings={
@@ -338,7 +339,7 @@ function TxSenderBody(): React.JSX.Element {
                                 content={{
                                     buttonText: translate("Create Payment Channel"),
                                     units: translate("drops of XRP"),
-                                    longerDescription: (<div>{translate("Create a ")}<a href="payment-channels.html">{translate("payment channel")}</a>
+                                    longerDescription: (<div>{translate("Create a ")}<Link to="../../docs/concepts/payment-types/payment-channels">{translate("payment channel")}</Link>
                                     {translate(" and fund it with the specified amount of XRP.")}</div>),
                                 }}
                                 inputSettings={
@@ -372,7 +373,7 @@ function TxSenderBody(): React.JSX.Element {
                                     buttonText: translate("Send Issued Currency"),
                                     units: translate(trustCurrencyCode),
                                     longerDescription: (<div>{translate("Your destination address needs a ")}
-                                    <a href="trust-lines-and-issuing.html">{translate("trust line")}</a>{translate(" to ")}
+                                    <Link to="../../docs/concepts/tokens/fungible-tokens#trust-lines">{translate("trust line")}</Link>{translate(" to ")}
                                     <span className="sending-address-item">{translate("(the test sender)")}</span>
                                     {translate(" for the currency in question. Otherwise, you'll get tecPATH_DRY.")}</div>),
                                 }}
@@ -404,7 +405,7 @@ function TxSenderBody(): React.JSX.Element {
                                     buttonText: translate("Trust for"),
                                     units: translate(trustCurrencyCode),
                                     longerDescription: (<div>{translate("The test sender creates a ")}
-                                    <a href="trust-lines-and-issuing.html">{translate("trust line")}</a>
+                                    <Link to="../../docs/concepts/tokens/fungible-tokens#trust-lines">{translate("trust line")}</Link>
                                     {translate(" to your account for the given currency.")}</div>),
                                 }}
                                 inputSettings={

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

@@ -198,12 +198,12 @@ export function WebsocketApiTool() {
             <h1>{translate("WebSocket Tool")}</h1>
             <div className="api-method-description-wrapper">
               <h3>
-                <a
-                  href={`${currentMethod.name.split(" ")[0]}.html`}
+                <Link
+                  to={currentMethod.link}
                   className="selected_command"
                 >
                   {currentMethod.name}
-                </a>
+                </Link>
               </h3>
               {currentMethod.description && (
                 <p

resources/dev-tools/xrp-faucets.page.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Link } from "@redocly/theme/components/Link/Link";
 import { useState } from 'react';
 import { Client, dropsToXrp, Wallet } from 'xrpl'; 
 import * as faucetData from './faucets.json'
@@ -84,7 +85,7 @@ export default function XRPFaucets(): React.JSX.Element {
           <section className="container-fluid pt-3 p-md-3">
             <h1>{translate("XRP Faucets")}</h1>
             <div className="content">
-                <p>{translate("resources.dev-tool.faucet.content.part1", "These ")}<a href="parallel-networks.html">{translate("resources.dev-tool.faucet.content.part2", "parallel XRP Ledger test networks")}</a> {translate("resources.dev-tool.faucet.content.part3", "provide platforms for testing changes to the XRP Ledger and software built on it, without using real funds.")}</p>
+                <p>{translate("resources.dev-tool.faucet.content.part1", "These ")}<Link to="../../docs/concepts/networks-and-servers/parallel-networks">{translate("resources.dev-tool.faucet.content.part2", "parallel XRP Ledger test networks")}</Link> {translate("resources.dev-tool.faucet.content.part3", "provide platforms for testing changes to the XRP Ledger and software built on it, without using real funds.")}</p>
                 <p>{translate("resources.dev-tool.faucet.content.part4", "These funds are intended for")} <strong>{translate("resources.dev-tool.faucet.content.part5", "testing")}</strong> {translate("resources.dev-tool.faucet.content.part6", "only. Test networks' ledger history and balances are reset as necessary. Devnets may be reset without warning.")}</p>
                 <p>{translate("resources.dev-tool.faucet.content.part7", "All balances and XRP on these networks are separate from Mainnet. As a precaution, do not use the Testnet or Devnet credentials on the Mainnet.")}</p>
 

resources/dev-tools/xrp-ledger-toml-checker.page.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Link } from "@redocly/theme/components/Link/Link";
 import { TextLookupForm, type TextLookupFormProps } from './components/TextLookupForm';
 import { fetchFile, fetchWallet } from './toml-checker/ValidateTomlSteps';
 import { LogEntryItem } from './components/LogEntry';
@@ -76,7 +77,7 @@ export default function TomlChecker() {
                     <h1>{translate(`xrp-ledger.toml Checker`)}</h1>
                     <p>{translate('resources.dev-tools.toml-checker.p.part1', `If you run an XRP Ledger validator or use the XRP Ledger for your business,
                     you can provide information about your usage of the XRP Ledger to the world in a machine-readable `)}
-                    <a href="https://xrpl.org/xrp-ledger-toml.html"><code>{translate(`xrp-ledger.toml`)}</code>{translate('resources.dev-tools.toml-checker.p.part2', ` file`)}</a>{translate('resources.dev-tools.toml-checker.p.part3', `.`)}</p>
+                    <Link to="../../docs/references/xrp-ledger-toml"><code>{translate(`xrp-ledger.toml`)}</code>{translate('resources.dev-tools.toml-checker.p.part2', ` file`)}</Link>{translate('resources.dev-tools.toml-checker.p.part3', `.`)}</p>
                 </div>
 
                 <TextLookupForm {...domainButtonProps} />

static/css/devportal2024-v1.css

@@ -82,3 +82,7 @@
     display: none;
   }
 }
+
+.form-text a {
+  text-decoration: underline;
+}