mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-21 20:25:51 +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.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import * as React from 'react';
|
|
import { useTranslate } from '@portal/hooks';
|
|
import { clsx } from 'clsx'
|
|
|
|
export const CLASS_GOOD = "badge badge-success"
|
|
export const CLASS_BAD = "badge badge-danger"
|
|
|
|
export interface LogEntryStatus {
|
|
icon?: {
|
|
label: string,
|
|
type: "SUCCESS" | "ERROR"
|
|
check?: boolean
|
|
}
|
|
followUpMessage?: JSX.Element
|
|
}
|
|
|
|
export interface LogEntryItem {
|
|
message: string
|
|
id: string
|
|
status?: LogEntryStatus
|
|
}
|
|
|
|
/**
|
|
* Add entry to the end of the value that setLogEntries modifies.
|
|
*
|
|
* @param setLogEntries - A setter to modify a list of LogEntries
|
|
* @param entry - Data for a new LogEntry
|
|
*/
|
|
export function addNewLogEntry(
|
|
setLogEntries: React.Dispatch<React.SetStateAction<LogEntryItem[]>>,
|
|
entry: LogEntryItem)
|
|
{
|
|
setLogEntries((prev) => {
|
|
return [...prev, entry]
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Looks up an existing log entry from the previous value within setLogEntries which has
|
|
* the same id as entry.id. Then it updates that value to equal entry.
|
|
*
|
|
* Primarily used to update the "status" after verifying a field.
|
|
*
|
|
* @param setLogEntries - A setter to modify a list of LogEntries.
|
|
* @param entryToUpdate - Updated data for an existing LogEntry.
|
|
*/
|
|
export function updateLogEntry(
|
|
setLogEntries: React.Dispatch<React.SetStateAction<LogEntryItem[]>>,
|
|
entryToUpdate: LogEntryItem) {
|
|
setLogEntries((prev) => {
|
|
const index = prev.findIndex((entry)=> entryToUpdate.id === entry.id)
|
|
prev.splice(index, 1, entryToUpdate)
|
|
return [...prev]
|
|
})
|
|
}
|
|
|
|
export function LogEntry({
|
|
message,
|
|
id,
|
|
status
|
|
}: LogEntryItem)
|
|
{
|
|
const {translate} = useTranslate()
|
|
let icon = undefined
|
|
if(!!(status?.icon)) {
|
|
icon = <span className={
|
|
clsx(status.icon?.type === "SUCCESS" && CLASS_GOOD,
|
|
status.icon?.type === "ERROR" && CLASS_BAD)}>
|
|
{status.icon?.label}
|
|
{status.icon?.check && <i className="fa fa-check-circle"/>}
|
|
</span>
|
|
}
|
|
|
|
return (
|
|
<li id={id}>{translate(`${message} `)}{icon}{status?.followUpMessage}</li>
|
|
)
|
|
}
|