Migrate the faucet page to Redocly

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

@@ -33,7 +33,7 @@ Ripple社は、TestnetとDevnetでメインサーバーを運用しています
 ## 関連項目
 
 - **ツール:**
-  - [XRP Testnet Faucet](xrp-test-net-faucet.html)
+  - [XRP Testnet Faucet](xrp-testnet-faucet.html)
 - **コンセプト:**
   - [コンセンサスについて](consensus.html)
   - [Amendment](amendments.html)

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

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

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](xrp-test-net-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.
 
 **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-xahau",
+            "wsUrl": "wss://xahau-test.net/",
+            "jsonRpcUrl": "https://xahau-test.net/",
+            "faucetUrl": "xahau-test.net",
+            "shortName": "Xahau-Testnet",
+            "desc": "Hooks (L1 smart contracts) enabled Xahau testnet."
+        }
+    ]
+}

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

@@ -0,0 +1,203 @@
+import * as React from 'react';
+import { useTranslate } from '@portal/hooks';
+import { useState } from 'react';
+import { Client, dropsToXrp, Wallet } from 'xrpl'; 
+import * as faucetData from './faucets.json'
+import XRPLoader from 'content/static/components/XRPLoader';
+
+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>
+                )) }
+
+                <br/>
+                <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();
+
+
+  const wallet = Wallet.generate()
+
+  const client = new 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 === "") && <XRPLoader message={translate("Generating keys..")}/>}
+
+      {address && <div id="address"><h3>{translate("Address")}</h3>{address}</div>}
+
+      {secret && <div id="secret"><h3>{translate("Secret")}</h3>{secret}</div>}
+
+      {(address && !balance) && (<div>
+        <br/>
+        <XRPLoader message={translate("Funding account...")}/>
+      </div>)}
+
+      {balance && <div id="balance">
+        <h3>{translate("Balance")}</h3>
+        {dropsToXrp(balance).toLocaleString("en")} {translate("XRP")}
+      </div>}
+
+      {sequence && <div id="sequence">
+        <h3>{translate("Sequence Number")}</h3>
+        {sequence}
+      </div>}
+
+      {(secret && !sequence) && <XRPLoader message={translate("Waiting...")}/>}
+
+    </div>
+  )
+}

content/docs.page.tsx

@@ -8,7 +8,7 @@ const recommendedPages = [
   },
   {
     description: 'XRP Faucet',
-    link: './xrp-testnet-faucet.html',
+    link: '..xrp-testnet-faucet.html',
   },
   {
     description: 'Getting Started with Python',
@@ -123,7 +123,7 @@ const getStartedVideos = [
 const devTools = [
   {
     title: 'Faucets',
-    link: './xrp-testnet-faucet.html',
+    link: '..xrp-testnet-faucet.html',
     description: 'Get credentials and test-XRP for XRP Ledger Testnet or Devnet.',
   },
   {
@@ -407,7 +407,7 @@ export default function Docs() {
                       'Connect to the XRP Ledger Testnet network to develop and test your apps built on the XRP Ledger, without risking real money or impacting production XRP Ledger users.'
                     )}
                   </p>
-                  <a className="btn btn-primary btn-arrow" href="xrp-testnet-faucet.html">
+                  <a className="btn btn-primary btn-arrow" href="..xrp-testnet-faucet.html">
                     {translate('Generate Testnet Credentials')}
                   </a>
                 </div>

content/sidebars.yaml

@@ -666,6 +666,8 @@
           - label: xrp-ledger.toml Checker
           - label: Domain Verification Checker
           - label: XRP Faucets
+            href: /dev-tools/xrp-faucets
+            page: /dev-tools/xrp-faucets.page.tsx
           - label: Transaction Sender
       - label: XRPL Learning Portal
         href: https://learn.xrpl.org/

content/static/components/XRPLoader.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export interface XRPLoaderProps {
+    message?: string
+}
+
+export default function XRPLoader(props: XRPLoaderProps) {
+  return (
+  <div id="loader" style={{ display: "inline" }}>
+    <img alt="(loading)" className="throbber" src="/img/xrp-loader-96.png" />
+    {props.message}
+  </div>);
+}

content/static/js/type-helpers.ts

@@ -0,0 +1,27 @@
+type TypeofType =
+  | 'bigint'
+  | 'boolean'
+  | 'function'
+  | 'number'
+  | 'object'
+  | 'string'
+  | 'undefined'
+
+type TypeCheckFn = (thing: unknown) => boolean
+
+
+/**
+ * Curried function for creating typeof checker functions.
+ * @param {string} type The type to check against (eg 'string', 'number')
+ * @param {function} [secondaryTest] Optional additional test function to run in cases where a type match isn't always a sure indicator.
+ * @returns {boolean} Whether the value matches the type
+ */
+const isTypeof =
+  <T>(type: TypeofType, secondaryTest?: TypeCheckFn) =>
+  (thing: unknown): thing is T => {
+    const matches = typeof thing === type
+    if (matches && secondaryTest) return secondaryTest(thing)
+    return matches
+  }
+
+export const isFunction = isTypeof<(...args: unknown[]) => unknown>('function')