133 lines
3.9 KiB
JavaScript
133 lines
3.9 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import Button from 'component/button';
|
|
import { FormField, Form } from 'component/common/form';
|
|
import { MINIMUM_PUBLISH_BID } from 'constants/claim';
|
|
|
|
type Props = {
|
|
uri: string,
|
|
claimIsMine: boolean,
|
|
title: string,
|
|
claim: StreamClaim,
|
|
isPending: boolean,
|
|
sendSupport: (number, string, boolean) => void,
|
|
onCancel: () => void,
|
|
sendTipCallback?: () => void,
|
|
balance: number,
|
|
isSupport: boolean,
|
|
};
|
|
|
|
type State = {
|
|
tipAmount: number,
|
|
tipError: string,
|
|
};
|
|
|
|
class WalletSendTip extends React.PureComponent<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
tipAmount: 0,
|
|
tipError: '',
|
|
};
|
|
(this: any).handleSendButtonClicked = this.handleSendButtonClicked.bind(this);
|
|
}
|
|
|
|
handleSendButtonClicked() {
|
|
const { claim, sendSupport, isSupport, sendTipCallback } = this.props;
|
|
const { claim_id: claimId } = claim;
|
|
const { tipAmount } = this.state;
|
|
|
|
sendSupport(tipAmount, claimId, isSupport);
|
|
|
|
// ex: close modal
|
|
if (sendTipCallback) {
|
|
sendTipCallback();
|
|
}
|
|
}
|
|
|
|
handleSupportPriceChange(event: SyntheticInputEvent<*>) {
|
|
const { balance } = this.props;
|
|
const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
|
|
const validTipInput = regexp.test(event.target.value);
|
|
const tipAmount = parseFloat(event.target.value);
|
|
let tipError;
|
|
|
|
if (!tipAmount) {
|
|
tipError = __('Amount must be a number');
|
|
} else if (tipAmount <= 0) {
|
|
tipError = __('Amount must be a positive number');
|
|
} else if (tipAmount < MINIMUM_PUBLISH_BID) {
|
|
tipError = __('Amount must be higher');
|
|
} else if (!validTipInput) {
|
|
tipError = __('Amount must have no more than 8 decimal places');
|
|
} else if (tipAmount === balance) {
|
|
tipError = __('Please decrease the amount to account for transaction fees');
|
|
} else if (tipAmount > balance) {
|
|
tipError = __('Not enough credits');
|
|
}
|
|
|
|
this.setState({
|
|
tipAmount,
|
|
tipError,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { title, isPending, onCancel, claimIsMine, isSupport } = this.props;
|
|
const { tipAmount, tipError } = this.state;
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Form>
|
|
<FormField
|
|
autoFocus
|
|
name="tip-input"
|
|
label={
|
|
tipAmount && tipAmount !== 0
|
|
? __(isSupport ? 'Support %amount% LBC' : 'Tip %amount% LBC', {
|
|
amount: tipAmount.toFixed(8).replace(/\.?0+$/, ''),
|
|
})
|
|
: __('Amount')
|
|
}
|
|
className="form-field--price-amount"
|
|
error={tipError}
|
|
min="0"
|
|
step="any"
|
|
type="number"
|
|
placeholder="1.23"
|
|
onChange={event => this.handleSupportPriceChange(event)}
|
|
inputButton={
|
|
<Button
|
|
button="primary"
|
|
label={__('Send')}
|
|
disabled={isPending || tipError || !tipAmount}
|
|
onClick={this.handleSendButtonClicked}
|
|
/>
|
|
}
|
|
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>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default WalletSendTip;
|