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

324 lines
12 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2020-06-08 20:42:29 +02:00
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
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, CHANNEL_ANONYMOUS, CHANNEL_NEW } from 'constants/claim';
import CreditAmount from 'component/common/credit-amount';
import I18nMessage from 'component/i18nMessage';
import { Lbryio } from 'lbryinc';
2020-06-08 20:42:29 +02:00
import Card from 'component/common/card';
import classnames from 'classnames';
import SelectChannel from 'component/selectChannel';
2020-09-02 22:08:37 +02:00
import LbcSymbol from 'component/common/lbc-symbol';
import { parseURI } from 'lbry-redux';
import usePersistedState from 'effects/use-persisted-state';
2020-06-08 20:42:29 +02:00
const DEFAULT_TIP_AMOUNTS = [5, 25, 100, 1000];
2017-09-17 22:33:52 +02:00
2020-06-15 16:04:44 +02:00
type SupportParams = { amount: number, claim_id: string, channel_id?: string };
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,
2020-06-15 16:04:44 +02:00
sendSupport: (SupportParams, boolean) => void,
2020-04-30 00:02:53 +02:00
closeModal: () => void,
balance: number,
isSupport: boolean,
2020-06-15 16:04:44 +02:00
fetchingChannels: boolean,
instantTipEnabled: boolean,
instantTipMax: { amount: number, currency: string },
channels: ?Array<ChannelClaim>,
2018-03-26 23:32:43 +02:00
};
function WalletSendTip(props: Props) {
const {
uri,
title,
isPending,
claimIsMine,
balance,
2020-06-08 20:42:29 +02:00
claim = {},
instantTipEnabled,
instantTipMax,
sendSupport,
2020-04-30 00:02:53 +02:00
closeModal,
channels,
2020-06-15 16:04:44 +02:00
fetchingChannels,
} = props;
const [presetTipAmount, setPresetTipAmount] = usePersistedState('comment-support:presetTip', DEFAULT_TIP_AMOUNTS[0]);
const [customTipAmount, setCustomTipAmount] = usePersistedState('comment-support:customTip', 1.0);
const [useCustomTip, setUseCustomTip] = usePersistedState('comment-support:useCustomTip', false);
const [tipError, setTipError] = React.useState();
const [sendAsTip, setSendAsTip] = usePersistedState('comment-support:sendAsTip', true);
2020-06-15 16:04:44 +02:00
const [isConfirming, setIsConfirming] = React.useState(false);
const [selectedChannel, setSelectedChannel] = usePersistedState('comment-support:channel');
const { claim_id: claimId } = claim;
2020-06-15 16:04:44 +02:00
const { channelName } = parseURI(uri);
2020-08-26 22:28:33 +02:00
const noBalance = balance === 0;
2020-06-15 16:04:44 +02:00
const channelStrings = channels && channels.map(channel => channel.permanent_url).join(',');
React.useEffect(() => {
if (!selectedChannel && channelStrings) {
const channels = channelStrings.split(',');
const newChannelUrl = channels[0];
const { claimName } = parseURI(newChannelUrl);
setSelectedChannel(claimName);
}
}, [channelStrings]);
const tipAmount = useCustomTip ? customTipAmount : presetTipAmount;
const isSupport = claimIsMine ? true : !sendAsTip;
React.useEffect(() => {
const regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
const validTipInput = regexp.test(String(tipAmount));
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) {
2020-09-04 19:14:48 +02:00
tipError = __('Not enough Credits');
}
setTipError(tipError);
}, [tipAmount, balance, setTipError]);
2018-03-26 23:32:43 +02:00
function sendSupportOrConfirm(instantTipMaxAmount = null) {
2020-06-15 16:04:44 +02:00
let selectedChannelId;
if (selectedChannel !== CHANNEL_ANONYMOUS) {
const selectedChannelClaim = channels && channels.find(channelClaim => channelClaim.name === selectedChannel);
if (selectedChannelClaim) {
selectedChannelId = selectedChannelClaim.claim_id;
}
}
if (
!isSupport &&
!isConfirming &&
(!instantTipMaxAmount || !instantTipEnabled || tipAmount > instantTipMaxAmount)
) {
setIsConfirming(true);
} else {
2020-06-15 16:04:44 +02:00
const supportParams: SupportParams = { amount: tipAmount, claim_id: claimId };
if (selectedChannelId) {
supportParams.channel_id = selectedChannelId;
}
sendSupport(supportParams, isSupport);
2020-04-30 00:02:53 +02:00
closeModal();
}
}
function handleSubmit() {
if (selectedChannel === CHANNEL_NEW) {
// This is the submission to create a new channel, and would
// be handled by <ChannelSelection>, so do nothing here.
return;
}
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 handleCustomPriceChange(event: SyntheticInputEvent<*>) {
const tipAmount = parseFloat(event.target.value);
setCustomTipAmount(tipAmount);
2017-09-17 22:33:52 +02:00
}
return (
2020-06-08 20:42:29 +02:00
<Form onSubmit={handleSubmit}>
2020-08-26 22:28:33 +02:00
{noBalance ? (
<Card
2020-09-02 22:08:37 +02:00
title={<I18nMessage tokens={{ lbc: <LbcSymbol size={22} /> }}>Supporting content requires %lbc%</I18nMessage>}
subtitle={
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>
With %lbc%, you can send tips to your favorite creators, or help boost their content for more people to
see.
</I18nMessage>
}
actions={
<div className="section__actions">
2020-08-26 22:28:33 +02:00
<Button
icon={ICONS.REWARDS}
button="primary"
label={__('Earn Rewards')}
navigate={`/$/${PAGES.REWARDS}`}
/>
<Button icon={ICONS.BUY} button="secondary" label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
<Button button="link" label={__('Nevermind')} onClick={closeModal} />
</div>
}
/>
) : (
<Card
2020-09-10 17:54:41 +02:00
title={claimIsMine ? __('Boost your content') : isSupport ? __('Support this content') : __('Support')}
subtitle={
<React.Fragment>
{isSupport
? __(
'This will increase the overall bid amount for this content, which will boost its ability to be discovered while active.'
)
2020-09-10 17:54:41 +02:00
: __('Show this channel your appreciation by sending a donation.')}{' '}
<Button label={__('Learn more')} button="link" href="https://lbry.com/faq/tipping" />.
</React.Fragment>
}
actions={
2020-06-15 16:04:44 +02:00
isConfirming ? (
<>
<div className="section section--padded card--inline confirm__wrapper">
<div className="section">
<div className="confirm__label">{__('To --[the tip recipient]--')}</div>
2020-06-15 16:04:44 +02:00
<div className="confirm__value">{channelName || title}</div>
<div className="confirm__label">{__('From --[the tip sender]--')}</div>
2020-06-15 16:04:44 +02:00
<div className="confirm__value">{selectedChannel}</div>
<div className="confirm__label">{__(isSupport ? 'Supporting' : 'Tipping')}</div>
2020-09-02 22:08:37 +02:00
<div className="confirm__value">
2020-09-10 17:54:41 +02:00
<LbcSymbol postfix={tipAmount} size={22} />
2020-09-02 22:08:37 +02:00
</div>
2020-06-15 16:04:44 +02:00
</div>
</div>
<div className="section__actions">
2020-06-15 16:11:29 +02:00
<Button
autoFocus
onClick={handleSubmit}
button="primary"
disabled={isPending}
label={__('Confirm')}
/>
2020-06-15 16:04:44 +02:00
<Button button="link" label={__('Cancel')} onClick={() => setIsConfirming(false)} />
</div>
</>
) : (
<>
<div className="section">
<SelectChannel
label={__('Channel to show support as')}
2020-06-15 16:04:44 +02:00
channel={selectedChannel}
onChannelChange={newChannel => setSelectedChannel(newChannel)}
/>
</div>
<div className="section">
{DEFAULT_TIP_AMOUNTS.map(amount => (
<Button
key={amount}
disabled={amount > balance}
button="alt"
2020-06-15 16:41:59 +02:00
className={classnames('button-toggle button-toggle--expandformobile', {
2020-06-15 16:04:44 +02:00
'button-toggle--active': tipAmount === amount,
'button-toggle--disabled': amount > balance,
})}
2020-09-02 22:08:37 +02:00
label={amount}
2020-09-10 17:54:41 +02:00
icon={ICONS.LBC}
onClick={() => {
setPresetTipAmount(amount);
setUseCustomTip(false);
}}
2020-06-15 16:04:44 +02:00
/>
))}
<Button
button="alt"
2020-06-15 16:41:59 +02:00
className={classnames('button-toggle button-toggle--expandformobile', {
2020-06-15 16:04:44 +02:00
'button-toggle--active': !DEFAULT_TIP_AMOUNTS.includes(tipAmount),
})}
2020-09-10 17:54:41 +02:00
icon={ICONS.LBC}
2020-06-15 16:04:44 +02:00
label={__('Custom')}
onClick={() => setUseCustomTip(true)}
/>
{DEFAULT_TIP_AMOUNTS.some(val => val > balance) && (
<Button
button="secondary"
className="button-toggle-group-action"
icon={ICONS.BUY}
2020-09-02 22:08:37 +02:00
title={__('Buy more LBRY Credits')}
navigate={`/$/${PAGES.BUY}`}
/>
)}
2020-06-15 16:04:44 +02:00
</div>
{useCustomTip && (
2020-06-15 16:04:44 +02:00
<div className="section">
<FormField
autoFocus
name="tip-input"
label={
<React.Fragment>
{__('Custom support amount')}{' '}
2020-09-10 17:54:41 +02:00
<I18nMessage
tokens={{ lbc_balance: <CreditAmount precision={4} amount={balance} showLBC={false} /> }}
>
(%lbc_balance% Credits available)
</I18nMessage>
2020-06-15 16:04:44 +02:00
</React.Fragment>
}
className="form-field--price-amount"
error={tipError}
min="0"
step="any"
type="number"
placeholder="1.23"
value={customTipAmount}
onChange={event => handleCustomPriceChange(event)}
2020-06-15 16:04:44 +02:00
/>
</div>
)}
<div className="section__actions">
<Button
autoFocus
2020-06-15 16:04:44 +02:00
icon={isSupport ? undefined : ICONS.SUPPORT}
button="primary"
type="submit"
disabled={fetchingChannels || isPending || tipError || !tipAmount}
label={
2020-06-15 16:04:44 +02:00
isSupport
? __('Send Revocable Support')
2020-09-02 22:08:37 +02:00
: __('Send a %amount% Tip', { amount: tipAmount ? `${tipAmount} Credit` : '' })
}
/>
2020-06-15 16:04:44 +02:00
{fetchingChannels && <span className="help">{__('Loading your channels...')}</span>}
2020-09-30 02:57:35 +02:00
{!claimIsMine && !fetchingChannels && (
2020-06-15 16:04:44 +02:00
<FormField
name="toggle-is-support"
type="checkbox"
2020-06-23 23:56:41 +02:00
label={__('Make this a tip')}
checked={sendAsTip}
onChange={() => setSendAsTip(!sendAsTip)}
2020-06-15 16:04:44 +02:00
/>
)}
</div>
2020-06-15 16:04:44 +02:00
</>
)
}
/>
)}
2020-06-08 20:42:29 +02:00
</Form>
);
2017-09-17 22:33:52 +02:00
}
export default WalletSendTip;