Migrate the faucet page to Redocly

content/@i18n/ja/concepts/networks-and-servers/parallel-networks.md

@@ -18,7 +18,7 @@ XRP Ledgerコミュニティのメンバーが、メインネットに影響を
 | Devnet     | ベータ版リリース  | 次期リリースのプレビューネットワークです。XRP Ledgerのコアソフトウェアへの不安定な変更がテストされます。このAltNetを使用すると、開発者はまだMainnetで有効になっていないXRPLの計画段階の新機能やAmendmentを操作したり学習したりすることができます。 |
 | [Hooks V3 Testnet](https://hooks-testnet-v3.xrpl-labs.com/) | [Hooksサーバ](https://github.com/XRPL-Labs/xrpld-hooks) | [Hooks](https://xrpl-hooks.readme.io/)を使用したオンチェーン・スマートコントラクト機能のプレビューネットワークです。 |
 
-テスト用XRPは、XRP Ledgerの実験やアプリケーションの開発、統合に興味のある人々に[無償で提供](xrp-testnet-faucet.html)されています。テスト用のXRPは実際には価値を持たず、ネットワークがリセットされると失われます。
+テスト用XRPは、XRP Ledgerの実験やアプリケーションの開発、統合に興味のある人々に[無償で提供](/dev-tools/xrp-faucets)されています。テスト用のXRPは実際には価値を持たず、ネットワークがリセットされると失われます。
 
 **注意:** XRP Ledgerメインネットとは異なり、テストネットワークは通常「中央集権型」であり、これらのネットワークの安定性や可用性については保証されていません。これらのネットワークは、サーバ構成、ネットワークトポロジー、ネットワークパフォーマンスのさまざまな特性をテストする目的でこれまで使用され、またこれからも同様に使用されます。
 
@@ -33,7 +33,7 @@ Ripple社は、TestnetとDevnetでメインサーバーを運用しています
 ## 関連項目
 
 - **ツール:**
-  - [XRP Testnet Faucet](xrp-test-net-faucet.html)
+  - [XRP Testnet Faucet](/dev-tools/xrp-faucets)
 - **コンセプト:**
   - [コンセンサスについて](consensus.html)
   - [Amendment](amendments.html)

content/@i18n/ja/concepts/payment-types/escrow.md

@@ -69,7 +69,7 @@ Escrowは、少量の大口決済に適した大きな保証を提供してい
 
 ## Escrowの利用可能性
 
-条件付き決済は、2017-03-31以降XRP Ledgerコンセンサスプロトコルに対する[「Escrow」Amendment](known-amendments.html#escrow)により利用可能になりました。同機能の以前のバージョンは、2016年に「Suspended Payments」（SusPay）という名称で[XRP Ledger Testnet](xrp-testnet-faucet.html)で利用可能になりました。
+条件付き決済は、2017-03-31以降XRP Ledgerコンセンサスプロトコルに対する[「Escrow」Amendment](known-amendments.html#escrow)により利用可能になりました。同機能の以前のバージョンは、2016年に「Suspended Payments」（SusPay）という名称で[XRP Ledger Testnet](/dev-tools/xrp-faucets)で利用可能になりました。
 
 [スタンドアロンモード](rippled-server-modes.html#スタンドアロンモード)でのテストの際には、Amendmentのステータスに関係なく、Escrow機能をローカルで強制的に有効にできます。次のスタンザを`rippled.cfg`に追加してください。
 

content/@i18n/ja/infrastructure/rippled/configuration/connect-your-rippled-to-the-xrp-test-net.md

@@ -17,12 +17,12 @@ Rippleは[代替となるテスト用および開発用ネットワーク](paral
 
 1. `rippled.cfg`ファイルで以下の手順に従います。
 
-   a. [Testnet](xrp-testnet-faucet.html)に接続するには、以下のセクションのコメントを解除し、次のように追加します。
+   a. [Testnet](/dev-tools/xrp-faucets)に接続するには、以下のセクションのコメントを解除し、次のように追加します。
 
         [ips]
         s.altnet.rippletest.net 51235
 
-   b. [Devnet](xrp-testnet-faucet.html)に接続するには、以下のセクションのコメントを解除し、次のように追加します。
+   b. [Devnet](/dev-tools/xrp-faucets)に接続するには、以下のセクションのコメントを解除し、次のように追加します。
 
         [ips]
         s.devnet.rippletest.net 51235
@@ -94,7 +94,7 @@ Rippleは[代替となるテスト用および開発用ネットワーク](paral
 ## 関連項目
 
 - **ツール:**
-  - [XRP Faucet](xrp-testnet-faucet.html)
+  - [XRP Faucet](/dev-tools/xrp-faucets)
   - [WebSocket APIツール](websocket-api-tool.html) - 接続オプションで「Testnet公開サーバー」を選択します。
 - **コンセプト:**
   - [並列ネットワーク](parallel-networks.html)

content/@i18n/ja/tutorials/get-started/get-started-using-javascript.md

@@ -21,7 +21,7 @@ showcase_icon: static/img/logos/javascript.svg
 
 * XRP Ledgerベースのアプリケーションの基本構成要素。
 * xrpl.jsを使ったXRP Ledgerへの接続方法。
-* xrpl.jsを使った[テストネット](xrp-testnet-faucet.html)でのウォレット生成方法。
+* xrpl.jsを使った[テストネット](/dev-tools/xrp-faucets)でのウォレット生成方法。
 * `xrpl.js`ライブラリを使った、XRP Ledgerアカウント情報の検索方法。
 * How to put these steps together to create a simple JavaScript app or web-app.
 

content/@i18n/ja/tutorials/get-started/monitor-incoming-payments-with-websocket.md

@@ -65,7 +65,7 @@ socket.addEventListener('close', (event) => {
 })
 ```
 
-上記の例では、[Test Net](xrp-test-net-faucet.html)上にあるRippleの公開APIサーバーの1つに対して、安全な接続（`wss://`）を開きます。代わりにデフォルトの構成を使用してローカルで運用している`rippled`サーバーに接続するには、最初の行に以下を使用して、ローカルのポート**6006**で _安全ではない_ 接続（`ws://`）を開きます。
+上記の例では、[Test Net](/dev-tools/xrp-faucets)上にあるRippleの公開APIサーバーの1つに対して、安全な接続（`wss://`）を開きます。代わりにデフォルトの構成を使用してローカルで運用している`rippled`サーバーに接続するには、最初の行に以下を使用して、ローカルのポート**6006**で _安全ではない_ 接続（`ws://`）を開きます。
 
 ```js
 const socket = new WebSocket('ws://localhost:6006')

content/@i18n/ja/tutorials/manage-account-settings/offline-account-setup.md

@@ -84,7 +84,7 @@ Loading: "/etc/opt/ripple/rippled.cfg"
 
 オンラインマシンから、ステップ1でメモした**アカウントアドレス** に十分なXRPを送金します。詳細は、[アカウントの作成](accounts.html#アカウントの作成)を参照してください。
 
-**ヒント:** テストの目的で、[Testnet Faucet](xrp-testnet-faucet.html)を使用して、テスト用のXRPが入った新しいアカウントを取得できます。そのアカウントを使用して、オフラインで生成されたアドレスに資金を供給します。
+**ヒント:** テストの目的で、[Testnet Faucet](/dev-tools/xrp-faucets)を使用して、テスト用のXRPが入った新しいアカウントを取得できます。そのアカウントを使用して、オフラインで生成されたアドレスに資金を供給します。
 
 
 

content/@i18n/ja/tutorials/use-specialized-payment-types/use-payment-channels.md

@@ -27,7 +27,7 @@ Payment Channelは、少額の単位に分割可能な「非同期」のXRPペ
 
 また、トランザクションの送信先`rippled`サーバーも必要です。このチュートリアルの例では、`rippled`サーバーがテストマシン（`localhost`）で稼働しており、このテストマシンはポート**5005**で非暗号化JSON-RPC APIエンドポイントに接続しています。
 
-実際のXRPを送金せずにテストを実施するには、Test Net XRPを保有する[XRP Ledger Testnet](xrp-testnet-faucet.html)のアドレスを使用できます。XRP Ledger Test Netを使用する場合、`http://localhost:5005/`ではなく`https://api.altnet.rippletest.net:51234`に接続することで、Test NetサーバーのJSON-RPC APIを使用できます。
+実際のXRPを送金せずにテストを実施するには、Test Net XRPを保有する[XRP Ledger Testnet](/dev-tools/xrp-faucets)のアドレスを使用できます。XRP Ledger Test Netを使用する場合、`http://localhost:5005/`ではなく`https://api.altnet.rippletest.net:51234`に接続することで、Test NetサーバーのJSON-RPC APIを使用できます。
 
 Payment Channelに使用できるXRPの額に制限はありません。このチュートリアルで使用されているサンプルの値では、Payment Channelで100 XRP（`100000000` drop）が少なくとも1日間は確保されます。
 

content/_code-samples/get-started/py/get-acct-info.py

@@ -5,7 +5,7 @@
 
 
 # Create a wallet using the testnet faucet:
-# https://xrpl.org/xrp-testnet-faucet.html
+# https://xrpl.org//dev-tools/xrp-faucets
 from xrpl.wallet import generate_faucet_wallet
 test_wallet = generate_faucet_wallet(client, debug=True)
 

content/_code-samples/get-started/py/prepare-payment.py

@@ -6,7 +6,7 @@
 
 
 # Create a wallet using the testnet faucet:
-# https://xrpl.org/xrp-testnet-faucet.html
+# https://xrpl.org/dev-tools/xrp-faucets.html
 from xrpl.wallet import generate_faucet_wallet
 test_wallet = generate_faucet_wallet(client, debug=True)
 

content/concepts/networks-and-servers/parallel-networks.md

@@ -19,7 +19,7 @@ To help members of the XRP Ledger community interact with XRP Ledger technology
 | [Hooks V3 Testnet](https://hooks-testnet-v3.xrpl-labs.com/) | [Hooks server](https://github.com/XRPL-Labs/xrpld-hooks) | A preview of on-chain smart contract functionality using [hooks](https://xrpl-hooks.readme.io/). |
 | AMM-Devnet | [XLS-30d pre-release](https://github.com/gregtatcam/rippled/tree/amm-core-functionality/) | A preview of the [XLS-30d](https://github.com/XRPLF/XRPL-Standards/discussions/78) standard for Automated Market Makers on the XRP Ledger. <!-- SPELLING_IGNORE: 30d --> [Binary builds for testing](https://github.com/legleux/scheduled/releases) are also available. Library support: [xrpl.js 2.6.0-beta.0](https://www.npmjs.com/package/xrpl/v/2.6.0-beta.0), [xrpl-py 1.8.0b0](https://pypi.org/project/xrpl-py/1.8.0b0/) |
 
-Each altnet has its own separate supply of test XRP, which is [given away for free](xrp-testnet-faucet.html) to parties interested in experimenting with the XRP Ledger and developing applications and integrations. Test XRP does not have real-world value and is lost when the network is reset.
+Each altnet has its own separate supply of test XRP, which is [given away for free](/dev-tools/xrp-faucets) to parties interested in experimenting with the XRP Ledger and developing applications and integrations. Test XRP does not have real-world value and is lost when the network is reset.
 
 **Caution:** Unlike the XRP Ledger Mainnet, test networks are usually _centralized_ and there are no guarantees about the stability and availability of these networks. They have been and continue to be used to test various properties of server configuration, network topology, and network performance.
 

content/dev-tools/faucets.json

@@ -0,0 +1,28 @@
+{
+    "knownFaucets": [
+        {
+            "id": "faucet-select-testnet",
+            "wsUrl": "wss://s.altnet.rippletest.net:51233/",
+            "jsonRpcUrl": "https://s.altnet.rippletest.net:51234/",
+            "faucetUrl": "faucet.altnet.rippletest.net",
+            "shortName": "Testnet",
+            "desc": "Mainnet-like network for testing applications."
+        },
+        {
+            "id": "faucet-select-devnet",
+            "wsUrl": "wss://s.devnet.rippletest.net:51233/",
+            "jsonRpcUrl": "https://s.devnet.rippletest.net:51234/",
+            "faucetUrl": "faucet.devnet.rippletest.net",
+            "shortName": "Devnet",
+            "desc": "Preview of upcoming amendments."
+        },
+        {
+            "id": "faucet-select-ammdevnet",
+            "wsUrl": "wss://amm.devnet.rippletest.net:51233/",
+            "jsonRpcUrl": "https://amm.devnet.rippletest.net:51234/",
+            "faucetUrl": "ammfaucet.devnet.rippletest.net",
+            "shortName": "AMM-Devnet",
+            "desc": "XLS-30d Automated Market Makers preview network."
+        }
+    ]
+}

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

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import { useTranslate } from '@portal/hooks';
+import { useState } from 'react';
+import { type Client, type Wallet } from 'xrpl'; 
+import * as faucetData from './faucets.json'
+
+interface FaucetInfo {
+  id: string,
+  wsUrl: string,
+  jsonRpcUrl: string,
+  faucetUrl: string,
+  shortName: string,
+  desc: string,
+}
+
+async function waitForSequence(client: Client, address: string): 
+  Promise<{ sequence: string, balance: string }> 
+  {
+  let response;
+  while (true) {
+    try {
+      response = await client.request({
+        command: "account_info",
+        account: address,
+        ledger_index: "validated"
+      })
+      break
+    } catch(e) {
+      await new Promise(resolve => setTimeout(resolve, 1000))
+    }
+  }
+  console.log(response)
+
+  return { sequence: response.result.account_data.Sequence, balance: response.result.account_data.Balance}
+}
+
+function FaucetEndpoints({ faucet, givenKey } : { faucet: FaucetInfo, givenKey: string}) {
+  const { translate } = useTranslate();
+
+  return (<div key={givenKey}>
+    <h4>{translate(`${faucet.shortName} Servers`)}</h4>
+    <pre>
+      <code>
+        // WebSocket<br/>
+        {faucet.wsUrl}<br/>
+        <br/>
+        // JSON-RPC<br/>
+        {faucet.jsonRpcUrl}
+      </code>
+    </pre>
+  </div>)
+}
+
+function FaucetSidebar({ faucets }: { faucets: FaucetInfo[] }): React.JSX.Element {
+  return (<aside className="right-sidebar col-lg-6 order-lg-4" role="complementary"> 
+    {faucets.map(
+      (faucet) => <FaucetEndpoints faucet={faucet} key={faucet.shortName + " Endpoints"} givenKey={faucet.shortName + " Endpoints"}/>
+    )}
+  </aside>)
+}
+
+export default function XRPFaucets(): React.JSX.Element {
+  const { translate } = useTranslate();
+
+  const faucets: FaucetInfo[] = faucetData.knownFaucets
+
+  const [selectedFaucet, setSelectedFaucet] = useState(faucets[0])
+
+  return (
+    <div className="container-fluid" role="document" id="main_content_wrapper">
+      <div className="row">
+        <FaucetSidebar faucets={faucets}/>
+        <main className="main col-md-7 col-lg-6 order-md-3" role="main" id="main_content_body">
+          <section className="container-fluid pt-3 p-md-3">
+            <h1>{translate("XRP Faucets")}</h1>
+            <div className="content">
+                <p>{translate("These ")}<a href="parallel-networks.html">{translate("parallel XRP Ledger test networks")}</a> {translate("provide platforms for testing changes to the XRP Ledger and software built on it, without using real funds.")}</p>
+                <p>{translate("These funds are intended for")} <strong>{translate("testing")}</strong> {translate("only. Test networks' ledger history and balances are reset as necessary. Devnets may be reset without warning.")}</p>
+                <p>{translate("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>
+
+                <h3>{translate("Choose Network:")}</h3>
+                { faucets.map((net) => (
+                <div className="form-check" key={"network-" + net.shortName}>
+                    <input onChange={() => setSelectedFaucet(net)} className="form-check-input" type="radio" 
+                      name="faucet-selector" id={net.id} checked={selectedFaucet.shortName == net.shortName} />
+                    <label className="form-check-label" htmlFor={net.id}>
+                      <strong>{translate(net.shortName)}</strong>: {translate(net.desc)}
+                    </label>
+                </div>
+                )) }
+
+                <p className="mb-3"><b>{translate("Hooks Testnet")}</b>: <a href="https://hooks-testnet-v3.xrpl-labs.com/" className="external-link">{translate("See the Hooks Faucet")}</a></p>
+                <TestCredentials selectedFaucet={selectedFaucet}/>
+            </div>
+          </section>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+async function generateFaucetCredentialsAndUpdateUI(
+  selectedFaucet: FaucetInfo, 
+  setButtonClicked: React.Dispatch<React.SetStateAction<boolean>>,
+  setGeneratedCredentialsFaucet: React.Dispatch<React.SetStateAction<string>>, 
+  setAddress: React.Dispatch<React.SetStateAction<string>>, 
+  setSecret: React.Dispatch<React.SetStateAction<string>>, 
+  setBalance: React.Dispatch<React.SetStateAction<string>>, 
+  setSequence: React.Dispatch<React.SetStateAction<string>>): Promise<void> {
+
+  setButtonClicked(true)
+
+  // Clear existing credentials
+  setGeneratedCredentialsFaucet(selectedFaucet.shortName)
+  setAddress("")
+  setSecret("")
+  setBalance("")
+  setSequence("")
+  const { translate } = useTranslate();
+
+
+  // @ts-expect-error - xrpl is added via a script tag
+  const wallet: Wallet = xrpl.Wallet.generate()
+
+  // @ts-expect-error - xrpl is added via a script tag
+  const client: Client = new xrpl.Client(selectedFaucet.wsUrl)
+  await client.connect()
+
+  try {
+
+    setAddress(wallet.address)
+    setSecret(wallet.seed)
+
+    await client.fundWallet(wallet, { faucetHost: selectedFaucet.faucetUrl, usageContext: "xrpl.org-faucet" })
+
+    const response = await waitForSequence(client, wallet.address)
+
+    setSequence(response.sequence)
+    setBalance(response.balance)
+
+  } catch (e) {
+    alert(translate(`There was an error with the ${selectedFaucet.shortName} faucet. Please try again.`))
+  }
+  setButtonClicked(false)
+}
+
+function TestCredentials({selectedFaucet}) {
+  const { translate } = useTranslate();
+
+  const [generatedCredentialsFaucet, setGeneratedCredentialsFaucet] = useState("")
+  const [address, setAddress] = useState("")
+  const [secret, setSecret] = useState("")
+  const [balance, setBalance] = useState("")
+  const [sequence, setSequence] = useState("")
+  const [buttonClicked, setButtonClicked] = useState(false)
+
+return (<div>
+    {/* <XRPLGuard> TODO: Re-add this once we find a good way to avoid browser/server mismatch errors */}
+      <div className="btn-toolbar" role="toolbar" aria-label="Button"> 
+        <button id="generate-creds-button" onClick={
+            () => generateFaucetCredentialsAndUpdateUI(
+              selectedFaucet,
+              setButtonClicked, 
+              setGeneratedCredentialsFaucet, 
+              setAddress, 
+              setSecret, 
+              setBalance, 
+              setSequence)
+          } className="btn btn-primary mr-2 mb-2">
+            {translate(`Generate ${selectedFaucet.shortName} credentials`)}
+        </button>
+      </div>
+    {/* </XRPLGuard> */}
+
+
+    {generatedCredentialsFaucet && <div id="your-credentials">
+      <h2>{translate(`Your ${generatedCredentialsFaucet} Credentials`)}</h2>
+    </div>}
+
+    {(buttonClicked && address === "") &&
+      (<div>
+        <br/>
+        <div id="loader" style={{ display: "inline" }}>
+          <img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" /> {translate("Generating keys..")}
+        </div>
+      </div>)
+    }
+
+    {address && <div id="address"><h3>{translate("Address")}</h3>{address}</div>}
+
+    {secret && <div id="secret"><h3>{translate("Secret")}</h3>{secret}</div>}
+    {(address && !balance) && (<div><br/>
+        <div id="loader" style={{ display: "inline" }}>
+          <img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" /> {translate("Funding account...")}
+        </div>
+      </div>)}
+
+    {balance && <div id="balance">
+      <h3>{translate("Balance")}</h3>
+      {(Number(balance) * 0.000001).toLocaleString("en")} {translate("XRP")}
+    </div>}
+
+    {sequence && <div id="sequence">
+      <h3>{translate("Sequence Number")}</h3>
+      {sequence}
+    </div>}
+
+    {(secret && !sequence) && 
+      (<div id="loader" style={{display: sequence ? "inline" : "none"}}>
+        <img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" />{translate("Waiting...")}
+      </div>)}
+
+  </div>
+)
+}