70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
import { Button, InputGroup } from 'react-bootstrap'
|
|
import React, { useState, useRef, useEffect } from 'react'
|
|
import * as Yup from 'yup'
|
|
import { Form, Input, SubmitButton } from './form'
|
|
import { useMe } from './me'
|
|
import UpBolt from '../svgs/bolt.svg'
|
|
|
|
export const ActSchema = Yup.object({
|
|
amount: Yup.number().typeError('must be a number').required('required')
|
|
.positive('must be positive').integer('must be whole')
|
|
})
|
|
|
|
export default function ItemAct ({ onClose, itemId, act, strike }) {
|
|
const inputRef = useRef(null)
|
|
const me = useMe()
|
|
const [oValue, setOValue] = useState()
|
|
|
|
useEffect(() => {
|
|
inputRef.current?.focus()
|
|
}, [onClose, itemId])
|
|
|
|
return (
|
|
<Form
|
|
initial={{
|
|
amount: me?.tipDefault,
|
|
default: false
|
|
}}
|
|
schema={ActSchema}
|
|
onSubmit={async ({ amount }) => {
|
|
await act({
|
|
variables: {
|
|
id: itemId,
|
|
sats: Number(amount)
|
|
}
|
|
})
|
|
await strike()
|
|
onClose()
|
|
}}
|
|
>
|
|
<Input
|
|
label='amount'
|
|
name='amount'
|
|
innerRef={inputRef}
|
|
overrideValue={oValue}
|
|
required
|
|
autoFocus
|
|
append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
|
|
/>
|
|
<div>
|
|
{[1, 10, 100, 1000, 10000].map(num =>
|
|
<Button
|
|
size='sm'
|
|
className={`${num > 1 ? 'ml-2' : ''} mb-2`}
|
|
key={num}
|
|
onClick={() => { setOValue(num) }}
|
|
>
|
|
<UpBolt
|
|
className='mr-1'
|
|
width={14}
|
|
height={14}
|
|
/>{num}
|
|
</Button>)}
|
|
</div>
|
|
<div className='d-flex'>
|
|
<SubmitButton variant='success' className='ml-auto mt-1 px-4' value='TIP'>tip</SubmitButton>
|
|
</div>
|
|
</Form>
|
|
)
|
|
}
|