107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
import { FormControl } from 'components/FormControl'
|
|
import { NumberInput, TextInput } from 'components/forms/FormInput'
|
|
import { useEffect, useId, useMemo } from 'react'
|
|
import { FaMinus, FaPlus } from 'react-icons/fa'
|
|
import { useWallet } from 'utils/wallet'
|
|
|
|
import { useInputState, useNumberInputState } from './FormInput.hooks'
|
|
|
|
export interface DenomUnit {
|
|
denom: string
|
|
exponent: number
|
|
aliases: string
|
|
}
|
|
|
|
export interface DenomUnitsProps {
|
|
title: string
|
|
subtitle?: string
|
|
isRequired?: boolean
|
|
attributes: [string, DenomUnit][]
|
|
onAdd: () => void
|
|
onChange: (key: string, attribute: DenomUnit) => void
|
|
onRemove: (key: string) => void
|
|
}
|
|
|
|
export function DenomUnits(props: DenomUnitsProps) {
|
|
const { title, subtitle, isRequired, attributes, onAdd, onChange, onRemove } = props
|
|
|
|
return (
|
|
<FormControl isRequired={isRequired} subtitle={subtitle} title={title}>
|
|
{attributes.map(([id], i) => (
|
|
<DenomUnit
|
|
key={`ma-${id}`}
|
|
defaultAttribute={attributes[i][1]}
|
|
id={id}
|
|
isLast={i === attributes.length - 1}
|
|
onAdd={onAdd}
|
|
onChange={onChange}
|
|
onRemove={onRemove}
|
|
/>
|
|
))}
|
|
</FormControl>
|
|
)
|
|
}
|
|
|
|
export interface DenomUnitProps {
|
|
id: string
|
|
isLast: boolean
|
|
onAdd: DenomUnitsProps['onAdd']
|
|
onChange: DenomUnitsProps['onChange']
|
|
onRemove: DenomUnitsProps['onRemove']
|
|
defaultAttribute: DenomUnit
|
|
}
|
|
|
|
export function DenomUnit({ id, isLast, onAdd, onChange, onRemove, defaultAttribute }: DenomUnitProps) {
|
|
const wallet = useWallet()
|
|
const Icon = useMemo(() => (isLast ? FaPlus : FaMinus), [isLast])
|
|
|
|
const htmlId = useId()
|
|
|
|
const denomState = useInputState({
|
|
id: `ma-denom-${htmlId}`,
|
|
name: `ma-denom-${htmlId}`,
|
|
title: `Denom`,
|
|
defaultValue: defaultAttribute.denom,
|
|
})
|
|
|
|
const exponentState = useNumberInputState({
|
|
id: `mint-exponent-${htmlId}`,
|
|
name: `mint-exponent-${htmlId}`,
|
|
title: `Exponent`,
|
|
defaultValue: defaultAttribute.exponent,
|
|
})
|
|
|
|
const aliasesState = useInputState({
|
|
id: `ma-aliases-${htmlId}`,
|
|
name: `ma-aliases-${htmlId}`,
|
|
title: `Aliases`,
|
|
defaultValue: defaultAttribute.aliases,
|
|
placeholder: 'Comma separated aliases',
|
|
})
|
|
|
|
useEffect(() => {
|
|
onChange(id, { denom: denomState.value, exponent: exponentState.value, aliases: aliasesState.value })
|
|
}, [id, denomState.value, exponentState.value, aliasesState.value])
|
|
|
|
return (
|
|
<div className="grid relative md:grid-cols-[40%_18%_35_7%] lg:grid-cols-[55%_13%_25%_7%] 2xl:grid-cols-[55%_13%_25%_7%] 2xl:space-x-2">
|
|
<TextInput {...denomState} />
|
|
<NumberInput className="ml-2" {...exponentState} />
|
|
<TextInput className="ml-2" {...aliasesState} />
|
|
|
|
<div className="flex justify-end items-end pb-2 w-8">
|
|
<button
|
|
className="flex justify-center items-center p-2 bg-stargaze-80 hover:bg-plumbus-60 rounded-full"
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
isLast ? onAdd() : onRemove(id)
|
|
}}
|
|
type="button"
|
|
>
|
|
<Icon className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|