Migrate the WebSocket API page (https://xrpl.org/websocket-api-tool.html)

.gitignore

@@ -5,6 +5,7 @@ __pycache__
 out/
 yarn-error.log
 /.idea
+*.iml
 .venv/
 
 # PHP

content/resources/dev-tools/components/Loader.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { useTranslate } from "@portal/hooks";
+
+export const Loader = () => {
+  const { translate } = useTranslate();
+
+  return <img className="throbber" src="/img/xrp-loader-96.png" alt={translate("(loading)")} />
+
+}

content/resources/dev-tools/components/websocket-api/connection-modal.tsx

@@ -0,0 +1,75 @@
+
+import { useTranslate } from "@portal/hooks";
+import { Connection } from './types';
+
+interface ConnectionProps {
+  selectedConnection: Connection;
+  handleConnectionChange: any;
+  closeConnectionModal: any;
+  connections: Connection[];
+}
+
+export const ConnectionModal: React.FC<ConnectionProps> = ({
+                                                             selectedConnection,
+                                                             handleConnectionChange,
+                                                             closeConnectionModal,
+                                                             connections,
+                                                           }) => {
+  const { translate } = useTranslate();
+
+  return (
+    <div
+      className="modal fade"
+      id="wstool-1-connection-settings"
+      tabIndex={-1}
+      role="dialog"
+      aria-hidden="true"
+    >
+      <div className="modal-dialog modal-dialog-centered" role="document">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">{translate('Connection Settings')}</h5>
+            <button
+              type="button"
+              className="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div className="modal-body">
+            {connections.map((conn) => (
+              <div className="form-check" key={conn.id}>
+                <input
+                  className="form-check-input"
+                  type="radio"
+                  name="wstool-1-connection"
+                  id={conn.id}
+                  value={conn.id}
+                  data-jsonrpcurl={conn.jsonrpc_url}
+                  data-shortname={conn.shortname}
+                  checked={selectedConnection.id === conn.id}
+                  onChange={handleConnectionChange}
+                />
+                <label className="form-check-label" htmlFor={conn.id}>
+                  <div dangerouslySetInnerHTML={{ __html: conn.longname }} />
+                </label>
+              </div>
+            ))}
+          </div>
+          <div className="modal-footer">
+            <button
+              type="button"
+              className="btn btn-outline-secondary"
+              data-dismiss="modal"
+              onClick={closeConnectionModal}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,114 @@
+import { useTranslate } from "@portal/hooks";
+import { Connection } from './types';
+
+interface CurlProps {
+  curlRef: any;
+  closeCurlModal: any;
+  currentBody: any;
+  selectedConnection: Connection;
+}
+
+const copyToClipboard = async (textareaRef, textareaValue) => {
+  if (textareaRef.current) {
+    textareaRef.current.select();
+    textareaRef.current.focus();
+    await navigator.clipboard.writeText(textareaValue);
+  }
+};
+
+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> = ({
+                                                 curlRef,
+                                                 closeCurlModal,
+                                                 currentBody,
+                                                 selectedConnection,
+                                               }) => {
+  const { translate } = useTranslate();
+  return (
+    <div
+      className="modal fade show"
+      id="wstool-1-curl"
+      tabIndex={-1}
+      role="dialog"
+      aria-hidden="true"
+    >
+      <div className="modal-dialog modal-dialog-centered" role="document">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">{translate("cURL Syntax")}</h5>
+            <button
+              type="button"
+              className="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div className="modal-body">
+            <form>
+              <div className="form-group">
+                <label htmlFor="curl-box-1">
+                  Use the following syntax to make the equivalent JSON-RPC
+                  request using <a href="https://curl.se/">cURL</a> from a
+                  commandline interface:
+                </label>
+                <textarea
+                  id="curl-box-1"
+                  className="form-control"
+                  rows={8}
+                  ref={curlRef}
+                >
+                  {getCurl(currentBody, selectedConnection)}
+                </textarea>
+              </div>
+            </form>
+          </div>
+          <div className="modal-footer">
+            <button
+              title="Copy to clipboard"
+              className="btn btn-outline-secondary clipboard-btn"
+              data-clipboard-target="#curl-box-1"
+              id="curl-box-copy-button"
+              onClick={() =>
+                copyToClipboard(
+                  curlRef,
+                  getCurl(currentBody, selectedConnection)
+                )
+              }
+            >
+              <i className="fa fa-clipboard"></i>
+            </button>
+            <button
+              type="button"
+              className="btn btn-outline-secondary"
+              data-dismiss="modal"
+              onClick={closeCurlModal}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};