feat: migrate to the realm rc version

resources/dev-tools/components/AlertTemplate.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
   
 const alertStyle = {
   position: "relative",
@@ -30,6 +30,7 @@ interface AlertTemplateProps {
 }
   
 export default function AlertTemplate ({ message, options, style, close }: AlertTemplateProps): React.JSX.Element {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate()
   return(
     <div className={clsx("bootstrap-growl alert alert-dismissible", typeToClass(options.type))} style={{ ...alertStyle, ...style }}>

resources/dev-tools/components/DestinationAddressInput.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { clsx } from 'clsx'
 import { isValidAddress } from 'xrpl'
 
@@ -27,6 +27,7 @@ export function DestinationAddressInput(
         setDestinationAddress, 
     } : DestinationAddressInputProps
 ): React.JSX.Element {
+    const { useTranslate } = useThemeHooks();
     const { translate } = useTranslate()
     const [ isValidDestinationAddress, setIsValidDestinationAddress ] = useState(true)
     

resources/dev-tools/components/InitButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { clsx } from 'clsx'
 
 import { Client, type Wallet, type TxResponse, dropsToXrp } from 'xrpl'
@@ -176,6 +176,7 @@ export function InitButton({
     isInitEnabled: boolean,
     toInit: InitializationProps
 }): React.JSX.Element {
+    const { useTranslate } = useThemeHooks();
     const { translate } = useTranslate()
 
     return (<div className="form-group">

resources/dev-tools/components/Loader.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { useTranslate } from "@portal/hooks";
+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/components/LogEntry.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { clsx } from 'clsx'
 
 export const CLASS_GOOD = "badge badge-success"
@@ -60,6 +60,7 @@ export function LogEntry({
     status
 }: LogEntryItem)
 {
+    const { useTranslate } = useThemeHooks();
     const {translate} = useTranslate()
     let icon = undefined
     if(!!(status?.icon)) {

resources/dev-tools/components/Modal.tsx

@@ -1,5 +1,5 @@
 import React, { JSX, ReactElement, ReactNode } from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 interface ModalProps {
   id: string // used for targeting animations
@@ -48,6 +48,7 @@ export const Modal = ({title, footer, children, onClose, id}: ModalProps) => {
 }
 
 export const ModalCloseBtn = ({onClick}) => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return <button
@@ -61,6 +62,7 @@ export const ModalCloseBtn = ({onClick}) => {
 }
 
 export const ModalClipboardBtn = ({textareaRef}) => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return <button

resources/dev-tools/components/StatusSidebar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { clsx } from 'clsx'
 
 import { type Wallet } from 'xrpl'
@@ -16,6 +16,7 @@ export function StatusSidebar({
     connectionReady: boolean,
     txHistory: React.JSX.Element[],
 }) {
+    const { useTranslate } = useThemeHooks();
     const { translate } = useTranslate();
 
     return (<aside className="right-sidebar col-lg-6 order-lg-4">

resources/dev-tools/components/TextLookupForm.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react'
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LogEntry, LogEntryItem } from './LogEntry';
 
 /**
@@ -42,6 +42,7 @@ export interface TextLookupFormProps {
  * @returns A single-entry form which displays logs after submitting.
  */
 export function TextLookupForm(props: TextLookupFormProps) {
+    const { useTranslate } = useThemeHooks()
     const { translate } = useTranslate()
 
     const { title, description, buttonDescription, formPlaceholder, handleSubmit } = props

resources/dev-tools/components/TransactionButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react'
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { clsx } from 'clsx'
 
 import { type Transaction, type Wallet } from 'xrpl'
@@ -65,6 +65,7 @@ export function TransactionButton({
     checkBox,
     customOnClick
 }: TransactionButtonProps ) {
+    const { useTranslate } = useThemeHooks()
     const { translate } = useTranslate()
 
     const [waitingForTransaction, setWaitingForTransaction] = useState(false)

resources/dev-tools/components/rpc-tool/rpc-response-group.tsx

@@ -1,4 +1,4 @@
-import { useTranslate } from '@portal/hooks'
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ReactElement, useState } from 'react';
 import JsonView from 'react18-json-view'
 
@@ -26,6 +26,7 @@ export const RPCResponseGroup = ({ response, anchor, customExpanded, customExpan
 }
 
 const RPCResponseGroupExpanders = ({ customExpanded, customExpandedText, setExpanded }) => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return <ul className="nav nav-pills">

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

@@ -1,4 +1,4 @@
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Connection } from './types';
 import { ChangeEvent } from 'react';
 import { Modal } from '../Modal';
@@ -19,6 +19,7 @@ export const ConnectionModal: React.FC<ConnectionProps> = ({
                                                              closeConnectionModal,
                                                              connections,
                                                            }) => {
+  const { useTranslate } = useThemeHooks();                                                  
   const { translate } = useTranslate();
   const handleConnectionChange = (event: ChangeEvent<HTMLInputElement>) => {
     const selectedValue = event.target.value;

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

@@ -1,4 +1,4 @@
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Connection } from './types';
 import { useRef, useState } from 'react';
 import { Modal, ModalClipboardBtn, ModalCloseBtn } from '../Modal';
@@ -37,6 +37,7 @@ export const CurlModal: React.FC<CurlProps> = ({
                                                  selectedConnection,
                                                }) => {
   const curlRef = useRef(null);
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const footer = <>
     <ModalClipboardBtn textareaRef={curlRef} />

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

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Connection } from './types';
 import { Modal, ModalClipboardBtn, ModalCloseBtn } from '../Modal';
 
@@ -17,6 +17,7 @@ const PermalinkModal: React.FC<PermaLinkProps> = ({
                                                     currentBody,
                                                     selectedConnection
 }) => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const permalinkRef = useRef(null);
 

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

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
-import { useTranslate } from "@portal/hooks";
-import { Link } from "@portal/Link";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Link } from "@redocly/theme/components/Link/Link";
 import { slugify } from "./slugify";
 import { CommandGroup, CommandMethod } from './types';
 
@@ -15,6 +15,7 @@ export const RightSideBar: React.FC<RightSideBarProps> = ({
                                                             currentMethod,
                                                             setCurrentMethod,
                                                           }) => {
+  const { useTranslate } = useThemeHooks();                                                          
   const { translate } = useTranslate();
   return (
     <div className="command-list-wrapper">

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { decode } from "ripple-binary-codec";
 import addressCodec, { encodeNodePublic } from "ripple-address-codec";
 import { verify as keyCodecVerify } from "ripple-keypairs";
@@ -19,6 +19,7 @@ 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>;
 
 const DomainVerificationPage = () => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const TOML_PATH = "/.well-known/xrp-ledger.toml";
   let query_param = 0;

resources/dev-tools/index.page.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const frontmatter = {
   seo: {
@@ -119,6 +119,7 @@ const other = [
 ];
 
 export default function DevTools() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (

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

@@ -1,5 +1,5 @@
-import { useTranslate } from "@portal/hooks";
-import { Link } from '@portal/Link';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Link } from '@redocly/theme/components/Link/Link';
 import { useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import JsonView from 'react18-json-view'
@@ -25,6 +25,7 @@ export default function RpcTool() {
   const [ledgerResponse, setLedgerResponse] = useState(null);
   const [inputText, setInputText] = useState(slug ? slug.slice(1) : "");
   const [errorText, setErrorText] = useState(null);
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const [inputType, setInputType] = useState("");
   const [showResult, setShowResult] = useState(false);

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import axios, { AxiosError } from "axios";
 import { parse } from "smol-toml";
 import { getListEntries } from "./ListTomlFields";
@@ -25,7 +25,8 @@ async function validateAndDisplayFields(
     domainToVerify?: string,
     filterDisplayedFieldsTo?: Function): Promise<boolean> {
 
-    const { translate } = useTranslate()
+    const { useTranslate } = useThemeHooks();
+    const { translate } = useTranslate();
 
     // If there's no data, do nothing
     if(!fields) {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react'
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 import AlertTemplate from './components/AlertTemplate';
 import { transitions, positions, Provider as AlertProvider } from 'react-alert'
@@ -104,6 +104,7 @@ async function onClickCreateEscrow(
 }
 
 function TxSenderBody(): React.JSX.Element {
+    const { useTranslate } = useThemeHooks();
     const { translate } = useTranslate();
 
     const [client, setClient] = useState<Client | undefined>(undefined)

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

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
 import { useLocation } from "react-router-dom";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import {
   JsonParam,
   StringParam,
@@ -38,6 +38,7 @@ export function WebsocketApiTool() {
   })
 
   const { hash: slug } = useLocation();
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const [isConnectionModalVisible, setIsConnectionModalVisible] =
     useState(false);

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { useState } from 'react';
 import { Client, dropsToXrp, Wallet } from 'xrpl'; 
 import * as faucetData from './faucets.json'
@@ -43,6 +43,7 @@ async function waitForSequence(client: Client, address: string):
 }
 
 function FaucetEndpoints({ faucet, givenKey } : { faucet: FaucetInfo, givenKey: string}) {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (<div key={givenKey}>
@@ -68,6 +69,7 @@ function FaucetSidebar({ faucets }: { faucets: FaucetInfo[] }): React.JSX.Elemen
 }
 
 export default function XRPFaucets(): React.JSX.Element {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   const faucets: FaucetInfo[] = faucetData.knownFaucets
@@ -124,6 +126,7 @@ async function generateFaucetCredentialsAndUpdateUI(
   setSecret("")
   setBalance("")
   setSequence("")
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
 
@@ -150,6 +153,7 @@ async function generateFaucetCredentialsAndUpdateUI(
 }
 
 function TestCredentials({selectedFaucet}) {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   const [generatedCredentialsFaucet, setGeneratedCredentialsFaucet] = useState("")

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { TextLookupForm, type TextLookupFormProps } from './components/TextLookupForm';
 import { fetchFile, fetchWallet } from './toml-checker/ValidateTomlSteps';
 import { LogEntryItem } from './components/LogEntry';
@@ -45,6 +45,7 @@ function handleSubmitDomain(
 }
 
 export default function TomlChecker() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   const domainButtonProps: TextLookupFormProps = {