mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-27 07:05:51 +00:00
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
80 lines
3.0 KiB
TypeScript
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>
|
|
)
|
|
}
|