mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-23 05:05:50 +00:00
0f53f35a2c
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
78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import * as React from 'react';
|
|
import { useState } from 'react'
|
|
import { useTranslate } from '@portal/hooks';
|
|
import { LogEntry, LogEntryItem } from './LogEntry';
|
|
|
|
/**
|
|
* A button that allows a single field to be submitted & logs displayed underneath.
|
|
*/
|
|
export interface TextLookupFormProps {
|
|
/**
|
|
* The big header above the button.
|
|
*/
|
|
title: string
|
|
/**
|
|
* Main description for what the button will do. Usually wrapped in <p> with <a>'s inside.
|
|
* All translation must be done before passing in the description.
|
|
*/
|
|
description: React.JSX.Element,
|
|
/**
|
|
* 2-3 words that appear on the button itself.
|
|
*/
|
|
buttonDescription: string
|
|
/*
|
|
* Triggered when users click the button to submit the form.
|
|
* setLogEntries is internally used to display logs to the user as handleSubmit executes.
|
|
* fieldValue represents the value they submitted with the form.
|
|
*/
|
|
handleSubmit: (
|
|
setLogEntries: React.Dispatch<React.SetStateAction<LogEntryItem[]>>,
|
|
event: React.FormEvent<HTMLFormElement>,
|
|
fieldValue: string) => void
|
|
/**
|
|
* Optionally include this as an example in the form to hint to users what they should type in.
|
|
*/
|
|
formPlaceholder?: string
|
|
}
|
|
|
|
/**
|
|
* A form to look up a single text field and display logs to the user.
|
|
*
|
|
* @param props Text fields for the form / button and a handler when the button is clicked.
|
|
* @returns A single-entry form which displays logs after submitting.
|
|
*/
|
|
export function TextLookupForm(props: TextLookupFormProps) {
|
|
const { translate } = useTranslate()
|
|
|
|
const { title, description, buttonDescription, formPlaceholder, handleSubmit } = props
|
|
|
|
const [logEntries, setLogEntries] = useState<LogEntryItem[]>([])
|
|
const [fieldValue, setFieldValue] = useState("")
|
|
|
|
return (
|
|
<div className="p-3 pb-5">
|
|
<form onSubmit={(event) => handleSubmit(setLogEntries, event, fieldValue)}>
|
|
<h4>{translate(title)}</h4>
|
|
{description}
|
|
<div className="input-group">
|
|
<input type="text" className="form-control" required
|
|
placeholder={translate(formPlaceholder)}
|
|
onChange={(event) => setFieldValue(event.target.value)}
|
|
/>
|
|
<br />
|
|
<button className="btn btn-primary form-control">{translate(buttonDescription)}</button>
|
|
</div>
|
|
</form>
|
|
<br/>
|
|
<br/>
|
|
{logEntries?.length > 0 && <div>
|
|
<h5 className="result-title">{translate(`Result`)}</h5>
|
|
<ul id="log">
|
|
{logEntries.map((log) => {
|
|
return <LogEntry message={log.message} id={log.id} key={log.id} status={log.status} />
|
|
})}
|
|
</ul>
|
|
</div>}
|
|
</div>)
|
|
}
|