diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx index 67b855b3b..17b323fdf 100644 --- a/src/features/zap/components/zap-pay-request-form.tsx +++ b/src/features/zap/components/zap-pay-request-form.tsx @@ -15,7 +15,8 @@ interface IZapPayRequestForm { } const messages = defineMessages({ - zap_button: { id: 'status.zap', defaultMessage: 'Zap' }, + zap_button_rounded: { id: 'zap.button.text.rounded', defaultMessage: 'Zap' }, + zap_button: { id: 'zap.button.text.raw', defaultMessage: 'Zap' }, zap_commentPlaceholder: { id: 'zap.comment_input.placeholder', defaultMessage: 'Optional comment' }, }); @@ -23,11 +24,13 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => { const intl = useIntl(); const dispatch = useAppDispatch(); const [zapComment, setZapComment] = useState(''); - const [zapAmount, setZapAmount] = useState(500); + // amount in millisatoshi + const [zapAmount, setZapAmount] = useState(50); const handleSubmit = async (e?: React.FormEvent) => { e?.preventDefault(); if (status) { + // multiply by 1000 to convert from satoshi to millisatoshi const invoice = await dispatch(zap(status, zapAmount * 1000, zapComment)); // If invoice is undefined it means the user has paid through his extension // In this case, we simply close the modal @@ -40,26 +43,45 @@ const ZapPayRequestForm = ({ account, status }: IZapPayRequestForm) => { } }; + const handleCustomAmount = (e: React.ChangeEvent) => { + e?.preventDefault(); + const inputAmount = e.target.value.replace(/[^0-9]/g, ''); + + const maxSendable = 250000000; + // multiply by 1000 to convert from satoshi to millisatoshi + if (maxSendable * 1000 > Number(inputAmount)) { + setZapAmount(Number(inputAmount)); + } + }; + + const renderZapButtonText = () => { + if (zapAmount >= 1000) { + return intl.formatMessage(messages.zap_button_rounded, { amount: Math.round((zapAmount / 1000) * 10) / 10 }); + } + return intl.formatMessage(messages.zap_button, { amount: zapAmount }); + }; + return ( - -
- +
-
-
- setZapComment(e.target.value)} type='text' placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} /> -