Files
xrpl-dev-portal/content/resources/dev-tools/xrp-ledger-toml-checker.page.tsx
JST5000 0f53f35a2c Migrate toml checker tool
Add baseline html

Add script tags

WIP fetchWallet

Make basic page with account step 1 work

Add decodeHex and helpers to update logs

Add fetchFile to access toml from domain

Copy over code & comment out migrated pieces

Add toml parsing

WIP: Add types and uncomment new code

Update the parseToml function to share code

Mostly migrate the validateDomain function

Fix bug by using for instead of foreach

Clean up code part 1

Refactor into separate files

Translate everything

Componentize the buttons

Split out code into separate files

Update package-lock

Fix spacing and uncomment code

Fix indentation

Fix direct import of xrpl

Fix import

cleaned up log entry handling to not build an array of elements

moved to resource folder and update css.

Move shared components and fix small errors

Move file and update sidebars

Fix slow load of long list of addresses

toml checker - sidebar/width fixes
2024-01-31 16:10:31 -08:00

80 lines
3.0 KiB
TypeScript

import * as React from 'react';
import { useTranslate } from '@portal/hooks';
import { TextLookupForm, type TextLookupFormProps } from './components/TextLookupForm';
import { fetchFile, fetchWallet } from './toml-checker/ValidateTomlSteps';
import { LogEntryItem } from './components/LogEntry';
/**
* Example data to test the tool with
*
* Domains:
* - Valid: validator.xrpl-labs.com
* - Not valid: sologenic.com
*
* Addresses:
* - Valid: rSTAYKxF2K77ZLZ8GoAwTqPGaphAqMyXV
* - No toml: rsoLo2S1kiGeCcn6hCUXVrCpGMWLrRrLZz
* - No domain: rHb9CJAWyB4rj91VRWn96DkukG4bwdtyTh
*/
function handleSubmitWallet(
setAccountLogEntries: React.Dispatch<React.SetStateAction<LogEntryItem[]>>,
event: React.FormEvent<HTMLFormElement>,
addressToVerify: string) {
event.preventDefault()
setAccountLogEntries([])
fetchWallet(setAccountLogEntries, addressToVerify)
}
function handleSubmitDomain(
setDomainLogEntries: React.Dispatch<React.SetStateAction<LogEntryItem[]>>,
event: React.FormEvent<HTMLFormElement>,
domainAddress: string) {
event.preventDefault();
setDomainLogEntries([])
fetchFile(setDomainLogEntries, domainAddress)
}
export default function TomlChecker() {
const { translate } = useTranslate();
const domainButtonProps: TextLookupFormProps = {
title: `Look Up By Domain`,
description: <p>{translate(`This tool allows you to verify that your `)}<code>{translate(`xrp-ledger.toml`)}</code>
{translate(` file is syntactically correct and deployed properly.`)}</p>,
buttonDescription: `Check toml file`,
formPlaceholder: "example.com (Domain name to check)",
handleSubmit: handleSubmitDomain,
}
const addressButtonProps: TextLookupFormProps = {
title: `Look Up By Account`,
description: <p>{translate(`Enter an XRP Ledger address to see if that account is claimed by the domain it says owns it.`)}</p>,
buttonDescription: `Check account`,
formPlaceholder: `r... (${translate("Wallet Address to check")})`,
handleSubmit: handleSubmitWallet
}
return (
<div className="toml-checker row">
{/* This aside is empty but it keeps the formatting similar to other pages */}
<aside className="right-sidebar col-lg-3 order-lg-4" role="complementary"/>
<main className="main col-lg-9" role="main" id="main_content_body">
<section className="container-fluid">
<div className="p-3">
<h1>{translate(`xrp-ledger.toml Checker`)}</h1>
<p>{translate(`If you run an XRP Ledger validator or use the XRP Ledger for your business,
you can provide information about your usage of the XRP Ledger to the world in a machine-readable `)}
<a href="https://xrpl.org/xrp-ledger-toml.html"><code>{translate(`xrp-ledger.toml`)}</code>{translate(` file`)}</a>.</p>
</div>
<TextLookupForm {...domainButtonProps} />
<TextLookupForm {...addressButtonProps} />
</section>
</main>
</div>
)
}