Merge pull request #2945 from XRPLF/realm_update

Update Redocly to Realm v0.115.0 and fix some related issues

@l10n/ja/docs/concepts/tokens/fungible-tokens/stablecoins/settings.md

@@ -18,7 +18,7 @@ labels:
 ほとんどの実装では、"ウォーム"ウォレットとしてスタンバイアカウントを使用します。信頼できる人間のオペレータは、スタンバイアカウントを使用してステーブルコインを運用アカウントに配布します。
 
 <div align="center">
-<img src="img/uc-stablecoin-distribution-flow.png" height="50%" width="50%"></image>
+<img src="/docs/img/uc-stablecoin-distribution-flow.png" height="50%" width="50%"></image>
 </div>
 
 運用アカウント、または「ホット」ウォレットは、XRPL上で他のアカウントと取引します。自動化されたインターネット接続システムは、これらのアドレスの秘密鍵を使用して、顧客やパートナーへの送金などの日常業務を行います。

@l10n/ja/docs/tutorials/how-tos/manage-account-settings/use-tickets.md

@@ -8,6 +8,7 @@ filters:
   - interactive_steps
 labels:
   - アカウント
+steps: ['Generate', 'Connect', 'Check Sequence', 'Prepare & Sign', 'Submit', 'Wait', 'Intermission', 'Check Tickets', 'Prepare Ticketed Tx', 'Submit Ticketed Tx', 'Wait Again']
 ---
 # チケットの使用
 
@@ -17,7 +18,7 @@ labels:
 
 <!-- Source for this tutorial's interactive bits: -->
 <script type="application/javascript" src="/js/interactive-tutorial.js"></script>
-<script type="application/javascript" src="/js/tutorials/how-tos/use-tickets.js"></script>
+<script type="application/javascript" src="/js/tutorials/use-tickets.js"></script>
 
 このページでは、[xrpl.js](https://js.xrpl.org/)ライブラリを使用したJavaScriptのサンプルを提供しています。設定方法は、[JavaScriptを使ってみよう](../../javascript/build-apps/get-started.md)をご覧ください。
 

@theme/components/XRPLoader.tsx

@@ -2,12 +2,15 @@ import * as React from 'react';
 
 export interface XRPLoaderProps {
     message?: string
+    show: boolean
 }
 
 export default function XRPLoader(props: XRPLoaderProps) {
+  const classnames = props.show ? "loader" : "loader collapse"
   return (
-  <div className="loader">
-    <img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" />
-    {props.message}
-  </div>);
+    <div className={classnames}>
+      <img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" />
+      {props.message}
+    </div>
+  )
 }

package.json

@@ -16,7 +16,7 @@
     "@codemirror/view": "^6.22.2",
     "@docsearch/react": "^3.8.0",
     "@lezer/highlight": "^1.2.0",
-    "@redocly/realm": "0.103.1",
+    "@redocly/realm": "0.115.0",
     "@uiw/codemirror-themes": "4.21.21",
     "@uiw/react-codemirror": "^4.21.21",
     "@xrplf/isomorphic": "^1.0.0-beta.1",

resources/dev-tools/components/Loader.tsx

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

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

@@ -22,7 +22,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 { Loader } from './components/Loader';
+import XRPLoader from '../../@theme/components/XRPLoader';
 
 export const frontmatter = {
   seo: {
@@ -245,7 +245,7 @@ export function WebsocketApiTool() {
                   {sendLoading && (
                     <div className="input-group loader send-loader">
                       <span className="input-group-append">
-                        <Loader />
+                        <XRPLoader show={true} />
                       </span>
                     </div>
                   )}
@@ -274,7 +274,7 @@ export function WebsocketApiTool() {
                   {wsLoading && (
                     <div className="input-group loader connect-loader">
                       <span className="input-group-append">
-                        <Loader />
+                        <XRPLoader show={true} />
                       </span>
                     </div>
                   )}