import { useCallback , useMemo , useState } from 'react' ; import { useField } from 'formik' ; import { Input , InputGroup , Stack , Text } from '@stacks/ui' ; import { microStxToStx , stxToMicroStx } from '@stacks/ui-utils' ; import { ErrorLabel } from '@app/components/error-label' ; import { FeeMultiplier } from './fee-multiplier' ; interface IncreaseFeeFieldProps { currentFee : number ; } export function IncreaseFeeField ( props ) { const { currentFee } = props ; const [ field , meta , helpers ] = useField ( 'fee' ) ; const [ modified , setModified ] = useState ( false ) ; const showResetMultiplier = useMemo ( ( ) => { if ( modified ) return true ; if ( ! currentFee ) return false ; return stxToMicroStx ( field . value ) !== currentFee ; } , [ currentFee , modified , field . value ] ) ; const onSelectMultiplier = useCallback ( ( multiplier ) => { if ( ! currentFee ) return ; setModified ( multiplier !== 1 ) ; helpers . setValue ( microStxToStx ( currentFee * multiplier ) ) ; } , [ currentFee , helpers ] ) ; return ( < > < Stack width = "100%" position = "relative" > < FeeMultiplier pt = "base-loose" pr = "base-tight" height = "100%" top = { 0 } right = { 0 } zIndex = { 99 } position = "absolute" showReset = { showResetMultiplier } onSelectMultiplier = { onSelectMultiplier } / > < InputGroup flexDirection = "column" > < Text as = "label" display = "block" mb = "tight" fontSize = { 1 } fontWeight = "500" htmlFor = "fee" > Fee < /Text> < Input display = "block" type = "number" width = "100%" placeholder = "Enter a custom fee" autoComplete = "off" { ... field } /> < /InputGroup> < /Stack> { meta . error && ( < ErrorLabel > < Text textStyle = "caption" lineHeight = "18px" > { meta . error } < /Text> < /ErrorLabel>)} < />); }