lbry-desktop/ui/component/walletSendTip/view.jsx

156 lines
4.9 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import React from 'react';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-02-13 17:27:20 +01:00
import { FormField, Form } from 'component/common/form';
import { MINIMUM_PUBLISH_BID } from 'constants/claim';
import useIsMobile from 'effects/use-is-mobile';
import CreditAmount from 'component/common/credit-amount';
import I18nMessage from 'component/i18nMessage';
import * as MODALS from 'constants/modal_types';
import { Lbryio } from 'lbryinc';
2017-09-17 22:33:52 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
uri: string,
claimIsMine: boolean,
2018-03-26 23:32:43 +02:00
title: string,
2019-04-24 16:02:08 +02:00
claim: StreamClaim,
2018-03-26 23:32:43 +02:00
isPending: boolean,
sendSupport: (number, string, boolean) => void,
2018-03-26 23:32:43 +02:00
onCancel: () => void,
2020-04-30 00:02:53 +02:00
closeModal: () => void,
balance: number,
isSupport: boolean,
openModal: (id: string, { tipAmount: number, claimId: string, isSupport: boolean }) => void,
instantTipEnabled: boolean,
instantTipMax: { amount: number, currency: string },
2018-03-26 23:32:43 +02:00
};
function WalletSendTip(props: Props) {
const {
title,
isPending,
onCancel,
claimIsMine,
isSupport,
balance,
claim,
instantTipEnabled,
instantTipMax,
openModal,
sendSupport,
2020-04-30 00:02:53 +02:00
closeModal,
} = props;
const [tipAmount, setTipAmount] = React.useState(0);
const [tipError, setTipError] = React.useState();
const { claim_id: claimId } = claim;
const isMobile = useIsMobile();
2018-03-26 23:32:43 +02:00
function sendSupportOrConfirm(instantTipMaxAmount = null) {
if (!isSupport && (!instantTipMaxAmount || !instantTipEnabled || tipAmount > instantTipMaxAmount)) {
const modalProps = { tipAmount, claimId, title, isSupport };
openModal(MODALS.CONFIRM_SEND_TIP, modalProps);
} else {
sendSupport(tipAmount, claimId, isSupport);
2020-04-30 00:02:53 +02:00
closeModal();
}
}
function handleSubmit() {
if (tipAmount && claimId) {
if (instantTipEnabled) {
if (instantTipMax.currency === 'LBC') {
sendSupportOrConfirm(instantTipMax.amount);
} else {
// Need to convert currency of instant purchase maximum before trying to send support
Lbryio.getExchangeRates().then(({ LBC_USD }) => {
sendSupportOrConfirm(instantTipMax.amount / LBC_USD);
});
}
} else {
sendSupportOrConfirm();
}
2018-03-26 23:32:43 +02:00
}
2017-09-17 22:33:52 +02:00
}
function handleSupportPriceChange(event: SyntheticInputEvent<*>) {
2018-09-12 21:27:22 +02:00
const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
const validTipInput = regexp.test(event.target.value);
const tipAmount = parseFloat(event.target.value);
2018-09-12 21:27:22 +02:00
let tipError;
if (!tipAmount) {
tipError = __('Amount must be a number');
2018-09-12 21:27:22 +02:00
} else if (tipAmount <= 0) {
tipError = __('Amount must be a positive number');
} else if (tipAmount < MINIMUM_PUBLISH_BID) {
tipError = __('Amount must be higher');
2018-09-12 21:27:22 +02:00
} else if (!validTipInput) {
tipError = __('Amount must have no more than 8 decimal places');
2018-09-12 21:27:22 +02:00
} else if (tipAmount === balance) {
tipError = __('Please decrease the amount to account for transaction fees');
} else if (tipAmount > balance) {
2018-09-12 21:27:22 +02:00
tipError = __('Not enough credits');
}
setTipAmount(tipAmount);
setTipError(tipError);
2017-09-17 22:33:52 +02:00
}
const label =
tipAmount && tipAmount !== 0
? __(isSupport ? 'Support %amount% LBC' : 'Tip %amount% LBC', {
amount: tipAmount.toFixed(8).replace(/\.?0+$/, ''),
})
: __('Amount');
2017-09-17 22:33:52 +02:00
return (
<React.Fragment>
<Form onSubmit={handleSubmit}>
<FormField
autoFocus
name="tip-input"
label={
<React.Fragment>
{label}{' '}
{isMobile && (
<I18nMessage tokens={{ lbc_balance: <CreditAmount badge={false} amount={balance} /> }}>
(%lbc_balance% available)
</I18nMessage>
)}
</React.Fragment>
}
className="form-field--price-amount"
error={tipError}
min="0"
step="any"
type="number"
placeholder="1.23"
onChange={event => handleSupportPriceChange(event)}
inputButton={
<Button button="primary" type="submit" label={__('Send')} disabled={isPending || tipError || !tipAmount} />
}
helper={
<React.Fragment>
{claimIsMine || isSupport
? __(
'This will increase the overall bid amount for %title%, which will boost its ability to be discovered while active.',
{ title }
)
: __(
'This will appear as a tip for %title%, which will boost its ability to be discovered while active.',
{ title }
)}{' '}
<Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
</React.Fragment>
}
/>
</Form>
<div className="card__actions">
<Button button="link" label={__('Cancel')} onClick={onCancel} />
</div>
</React.Fragment>
);
2017-09-17 22:33:52 +02:00
}
export default WalletSendTip;