xrpl-dev-portal/resources/dev-tools/components/DestinationAddressInput.tsx

import * as React from 'react'
import { useState } from 'react'
import { useThemeHooks } from '@redocly/theme/core/hooks'
import { clsx } from 'clsx'
import { isValidAddress } from 'xrpl'

function onDestinationAddressChange(
  event: React.ChangeEvent<HTMLInputElement>,
  setDestinationAddress: React.Dispatch<React.SetStateAction<string>>,
  setIsValidDestinationAddress: React.Dispatch<React.SetStateAction<boolean>>,
): void {
  const newAddress = event.target.value
  setDestinationAddress(newAddress)
  setIsValidDestinationAddress(isValidAddress(newAddress))
}

export interface DestinationAddressInputProps {
  defaultDestinationAddress: string
  destinationAddress: string
  setDestinationAddress: React.Dispatch<React.SetStateAction<string>>
}

export function DestinationAddressInput({
  defaultDestinationAddress,
  destinationAddress,
  setDestinationAddress,
}: DestinationAddressInputProps): React.JSX.Element {
  const { useTranslate } = useThemeHooks()
  const { translate } = useTranslate()
  const [isValidDestinationAddress, setIsValidDestinationAddress] = useState(true)

  return (
    <div>
      <div className="form-group">
        <label htmlFor="destination_address">{translate('Destination Address')}</label>
        <input
          type="text"
          className={clsx(
            'form-control',
            // Defaults to not having "is-valid" / "is-invalid" classes
            destinationAddress !== defaultDestinationAddress && (isValidDestinationAddress ? 'is-valid' : 'is-invalid'),
          )}
          id="destination_address"
          onChange={(event) => onDestinationAddressChange(event, setDestinationAddress, setIsValidDestinationAddress)}
          aria-describedby="destination_address_help"
          defaultValue={destinationAddress}
        />
        <small id="destination_address_help" className="form-text text-muted">
          {translate('Send transactions to this XRP Testnet address')}
        </small>
      </div>
      <p
        className={clsx('devportal-callout caution', !(isValidDestinationAddress && destinationAddress[0] === 'X') && 'collapse')}
        id="x-address-warning"
      >
        <strong>{translate('Caution:')}</strong>
        {translate(' This X-address is intended for use on Mainnet. Testnet X-addresses have a "T" prefix instead.')}
      </p>
    </div>
  )
}