mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-28 15:45:50 +00:00
Re-level non-docs content to top of repo and rename content→docs
This commit is contained in:
mDuo13
210
resources/dev-tools/xrp-faucets.page.tsx
Normal file
210
resources/dev-tools/xrp-faucets.page.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
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 '../../@theme/components/XRPLoader';
|
||||
|
||||
export const frontmatter = {
|
||||
seo: {
|
||||
title: 'XRP Faucets',
|
||||
description: "Get test XRP for use on various non-production networks.",
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user