428 lines
14 KiB
JavaScript
428 lines
14 KiB
JavaScript
// @flow
|
|
import { Form } from 'component/common/form';
|
|
import { Lbryio } from 'lbryinc';
|
|
import { parseURI } from 'util/lbryURI';
|
|
import * as ICONS from 'constants/icons';
|
|
import * as PAGES from 'constants/pages';
|
|
import Button from 'component/button';
|
|
import Card from 'component/common/card';
|
|
import ChannelSelector from 'component/channelSelector';
|
|
import classnames from 'classnames';
|
|
import I18nMessage from 'component/i18nMessage';
|
|
import LbcSymbol from 'component/common/lbc-symbol';
|
|
import React from 'react';
|
|
import usePersistedState from 'effects/use-persisted-state';
|
|
import WalletTipAmountSelector from 'component/walletTipAmountSelector';
|
|
|
|
import { getStripeEnvironment } from 'util/stripe';
|
|
const stripeEnvironment = getStripeEnvironment();
|
|
|
|
const TAB_BOOST = 'TabBoost';
|
|
const TAB_FIAT = 'TabFiat';
|
|
const TAB_LBC = 'TabLBC';
|
|
|
|
type SupportParams = { amount: number, claim_id: string, channel_id?: string };
|
|
type TipParams = { tipAmount: number, tipChannelName: string, channelClaimId: string };
|
|
type UserParams = { activeChannelName: ?string, activeChannelId: ?string };
|
|
|
|
type Props = {
|
|
activeChannelId?: string,
|
|
activeChannelName?: string,
|
|
balance: number,
|
|
claimId?: string,
|
|
claimType?: string,
|
|
channelClaimId?: string,
|
|
tipChannelName?: string,
|
|
claimIsMine: boolean,
|
|
fetchingChannels: boolean,
|
|
incognito: boolean,
|
|
instantTipEnabled: boolean,
|
|
instantTipMax: { amount: number, currency: string },
|
|
isPending: boolean,
|
|
isSupport: boolean,
|
|
title: string,
|
|
uri: string,
|
|
isTipOnly?: boolean,
|
|
hasSelectedTab?: string,
|
|
customText?: string,
|
|
doHideModal: () => void,
|
|
doSendCashTip: (
|
|
TipParams,
|
|
anonymous: boolean,
|
|
UserParams,
|
|
claimId: string,
|
|
stripe: ?string,
|
|
preferredCurrency: string,
|
|
?(any) => void
|
|
) => string,
|
|
doSendTip: (SupportParams, boolean) => void, // function that comes from lbry-redux
|
|
setAmount?: (number) => void,
|
|
preferredCurrency: string,
|
|
};
|
|
|
|
export default function WalletSendTip(props: Props) {
|
|
const {
|
|
activeChannelId,
|
|
activeChannelName,
|
|
balance,
|
|
claimId,
|
|
claimType,
|
|
channelClaimId,
|
|
tipChannelName,
|
|
claimIsMine,
|
|
fetchingChannels,
|
|
incognito,
|
|
instantTipEnabled,
|
|
instantTipMax,
|
|
isPending,
|
|
title,
|
|
uri,
|
|
isTipOnly,
|
|
hasSelectedTab,
|
|
customText,
|
|
doHideModal,
|
|
doSendCashTip,
|
|
doSendTip,
|
|
setAmount,
|
|
preferredCurrency,
|
|
} = props;
|
|
|
|
/** WHAT TAB TO SHOW **/
|
|
// if it's your content, we show boost, otherwise default is LBC
|
|
const defaultTabToShow = claimIsMine ? TAB_BOOST : TAB_FIAT;
|
|
|
|
// loads the default tab if nothing else is there yet
|
|
const [persistentTab, setPersistentTab] = usePersistedState('send-tip-modal', defaultTabToShow);
|
|
const [activeTab, setActiveTab] = React.useState(persistentTab);
|
|
const [hasSelected, setSelected] = React.useState(false);
|
|
|
|
/** STATE **/
|
|
const [tipAmount, setTipAmount] = usePersistedState('comment-support:customTip', 1.0);
|
|
const [isOnConfirmationPage, setConfirmationPage] = React.useState(false);
|
|
const [tipError, setTipError] = React.useState();
|
|
const [disableSubmitButton, setDisableSubmitButton] = React.useState();
|
|
|
|
/** CONSTS **/
|
|
const claimTypeText = getClaimTypeText();
|
|
const isSupport = claimIsMine || activeTab === TAB_BOOST;
|
|
|
|
// text for modal header
|
|
const titleText = isSupport
|
|
? __(claimIsMine ? 'Boost Your %claimTypeText%' : 'Boost This %claimTypeText%', { claimTypeText })
|
|
: __('Tip This %claimTypeText%', { claimTypeText });
|
|
|
|
let channelName;
|
|
try {
|
|
({ channelName } = parseURI(uri));
|
|
} catch (e) {}
|
|
|
|
// icon to use or explainer text to show per tab
|
|
let explainerText = '',
|
|
confirmLabel = '';
|
|
switch (activeTab) {
|
|
case TAB_BOOST:
|
|
explainerText = __(
|
|
'This refundable boost will improve the discoverability of this %claimTypeText% while active. ',
|
|
{ claimTypeText }
|
|
);
|
|
confirmLabel = __('Boosting');
|
|
break;
|
|
case TAB_FIAT:
|
|
explainerText = __('Show this channel your appreciation by sending a donation in %currencyToUse%. ', {
|
|
currencyToUse: preferredCurrency,
|
|
});
|
|
confirmLabel = __('Tipping %currencyToUse%', { currencyToUse: preferredCurrency });
|
|
break;
|
|
case TAB_LBC:
|
|
explainerText = __('Show this channel your appreciation by sending a donation of Credits. ');
|
|
confirmLabel = __('Tipping Credit');
|
|
break;
|
|
}
|
|
|
|
/** FUNCTIONS **/
|
|
|
|
function getClaimTypeText() {
|
|
switch (claimType) {
|
|
case 'stream':
|
|
return __('Content');
|
|
case 'channel':
|
|
return __('Channel');
|
|
case 'repost':
|
|
return __('Repost');
|
|
case 'collection':
|
|
return __('List');
|
|
default:
|
|
return __('Claim');
|
|
}
|
|
}
|
|
|
|
// make call to the backend to send lbc or fiat
|
|
function sendSupportOrConfirm(instantTipMaxAmount = null) {
|
|
if (!isOnConfirmationPage && (!instantTipMaxAmount || !instantTipEnabled || tipAmount > instantTipMaxAmount)) {
|
|
setConfirmationPage(true);
|
|
} else {
|
|
const supportParams: SupportParams = {
|
|
amount: tipAmount,
|
|
claim_id: claimId || '',
|
|
channel_id: (!incognito && activeChannelId) || undefined,
|
|
};
|
|
|
|
// send tip/boost
|
|
doSendTip(supportParams, isSupport);
|
|
doHideModal();
|
|
}
|
|
}
|
|
|
|
// when the form button is clicked
|
|
function handleSubmit() {
|
|
if (!tipAmount || !claimId) return;
|
|
|
|
if (setAmount) {
|
|
setAmount(tipAmount);
|
|
doHideModal();
|
|
return;
|
|
}
|
|
|
|
// send an instant tip (no need to go to an exchange first)
|
|
if (instantTipEnabled && activeTab !== TAB_FIAT) {
|
|
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));
|
|
}
|
|
// sending fiat tip
|
|
} else if (activeTab === TAB_FIAT) {
|
|
if (!isOnConfirmationPage) {
|
|
setConfirmationPage(true);
|
|
} else {
|
|
const tipParams: TipParams = {
|
|
tipAmount,
|
|
tipChannelName: tipChannelName || '',
|
|
channelClaimId: channelClaimId || '',
|
|
};
|
|
const userParams: UserParams = { activeChannelName, activeChannelId };
|
|
|
|
// hit backend to send tip
|
|
doSendCashTip(
|
|
tipParams,
|
|
!activeChannelId || incognito,
|
|
userParams,
|
|
claimId,
|
|
stripeEnvironment,
|
|
preferredCurrency
|
|
);
|
|
doHideModal();
|
|
}
|
|
// if it's a boost (?)
|
|
} else {
|
|
sendSupportOrConfirm();
|
|
}
|
|
}
|
|
|
|
function buildButtonText() {
|
|
// test if frontend will show up as isNan
|
|
function isNan(tipAmount) {
|
|
// testing for NaN ES5 style https://stackoverflow.com/a/35912757/3973137
|
|
// also sometimes it's returned as a string
|
|
// eslint-disable-next-line
|
|
return tipAmount !== tipAmount || tipAmount === 'NaN';
|
|
}
|
|
|
|
function convertToTwoDecimals(number) {
|
|
return (Math.round(number * 100) / 100).toFixed(2);
|
|
}
|
|
|
|
const amountToShow = activeTab === TAB_FIAT ? convertToTwoDecimals(tipAmount) : tipAmount;
|
|
|
|
// if it's a valid number display it, otherwise do an empty string
|
|
const displayAmount = !isNan(tipAmount) ? amountToShow : '';
|
|
|
|
// build button text based on tab
|
|
switch (activeTab) {
|
|
case TAB_BOOST:
|
|
return titleText;
|
|
case TAB_FIAT:
|
|
return __('Send a %fiatSymbolToUse%%displayAmount% Tip', { displayAmount, fiatSymbolToUse });
|
|
case TAB_LBC:
|
|
return __('Send a %displayAmount% Credit Tip', { displayAmount });
|
|
}
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
if (!hasSelected && hasSelectedTab && activeTab !== hasSelectedTab) {
|
|
setActiveTab(hasSelectedTab);
|
|
setSelected(true);
|
|
}
|
|
}, [activeTab, hasSelected, hasSelectedTab, setActiveTab]);
|
|
|
|
React.useEffect(() => {
|
|
if (!hasSelectedTab && activeTab !== hasSelectedTab) {
|
|
setPersistentTab(activeTab);
|
|
}
|
|
}, [activeTab, hasSelectedTab, setPersistentTab]);
|
|
|
|
/** RENDER **/
|
|
|
|
const tabButtonProps = { isOnConfirmationPage, activeTab, setActiveTab };
|
|
|
|
let fiatIconToUse = ICONS.FINANCE;
|
|
let fiatSymbolToUse = '$';
|
|
if (preferredCurrency === 'EUR') {
|
|
fiatIconToUse = ICONS.EURO;
|
|
fiatSymbolToUse = '€';
|
|
}
|
|
|
|
return (
|
|
<Form onSubmit={handleSubmit}>
|
|
{/* if there is no LBC balance, show user frontend to get credits */}
|
|
{/* if there is lbc, the main tip/boost gui with the 3 tabs at the top */}
|
|
<Card
|
|
title={titleText}
|
|
className={'wallet-send-tip-modal'}
|
|
subtitle={
|
|
<>
|
|
{!claimIsMine && (
|
|
<div className="section">
|
|
{/* tip fiat tab button */}
|
|
{stripeEnvironment && (
|
|
<TabSwitchButton icon={fiatIconToUse} label={__('Tip')} name={TAB_FIAT} {...tabButtonProps} />
|
|
)}
|
|
|
|
{/* tip LBC tab button */}
|
|
<TabSwitchButton icon={ICONS.LBC} label={__('Tip')} name={TAB_LBC} {...tabButtonProps} />
|
|
|
|
{/* support LBC tab button */}
|
|
{!isTipOnly && (
|
|
<TabSwitchButton icon={ICONS.TRENDING} label={__('Boost')} name={TAB_BOOST} {...tabButtonProps} />
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* short explainer under the button */}
|
|
<div className="section__subtitle">
|
|
{explainerText}
|
|
{/* {activeTab === TAB_FIAT && !hasCardSaved && <Button navigate={`/$/${PAGES.SETTINGS_STRIPE_CARD}`} label={__('Add A Card')} button="link" />} */}
|
|
<Button
|
|
label={__('Learn more')}
|
|
button="link"
|
|
href="https://odysee.com/@OdyseeHelp:b/Monetization-of-Content:3"
|
|
/>
|
|
</div>
|
|
</>
|
|
}
|
|
actions={
|
|
// confirmation modal, allow user to confirm or cancel transaction
|
|
isOnConfirmationPage ? (
|
|
<>
|
|
<div className="section section--padded card--inline confirm__wrapper">
|
|
<div className="section">
|
|
<div className="confirm__label">{__('To --[the tip recipient]--')}</div>
|
|
<div className="confirm__value">{channelName || title}</div>
|
|
<div className="confirm__label">{__('From --[the tip sender]--')}</div>
|
|
<div className="confirm__value">{(!incognito && activeChannelName) || __('Anonymous')}</div>
|
|
<div className="confirm__label">{confirmLabel}</div>
|
|
<div className="confirm__value">
|
|
{activeTab === TAB_FIAT ? (
|
|
<p>{`${fiatSymbolToUse} ${(Math.round(tipAmount * 100) / 100).toFixed(2)}`}</p>
|
|
) : (
|
|
<LbcSymbol postfix={tipAmount} size={22} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="section__actions">
|
|
<Button autoFocus onClick={handleSubmit} button="primary" disabled={isPending} label={__('Confirm')} />
|
|
<Button button="link" label={__('Cancel')} onClick={() => setConfirmationPage(false)} />
|
|
</div>
|
|
</>
|
|
) : !((activeTab === TAB_LBC || activeTab === TAB_BOOST) && balance === 0) ? (
|
|
<>
|
|
<ChannelSelector />
|
|
|
|
{/* section to pick tip/boost amount */}
|
|
<WalletTipAmountSelector
|
|
setTipError={setTipError}
|
|
tipError={tipError}
|
|
uri={uri}
|
|
activeTab={activeTab === TAB_BOOST ? TAB_LBC : activeTab}
|
|
amount={tipAmount}
|
|
onChange={(amount) => setTipAmount(amount)}
|
|
setDisableSubmitButton={setDisableSubmitButton}
|
|
/>
|
|
|
|
{/* send tip/boost button */}
|
|
<div className="section__actions">
|
|
<Button
|
|
autoFocus
|
|
icon={isSupport ? ICONS.TRENDING : ICONS.SUPPORT}
|
|
button="primary"
|
|
type="submit"
|
|
disabled={fetchingChannels || isPending || tipError || !tipAmount || disableSubmitButton}
|
|
label={customText || buildButtonText()}
|
|
/>
|
|
{fetchingChannels && <span className="help">{__('Loading your channels...')}</span>}
|
|
</div>
|
|
</>
|
|
) : (
|
|
// if it's LBC and there is no balance, you can prompt to purchase LBC
|
|
<Card
|
|
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">
|
|
<Button
|
|
icon={ICONS.REWARDS}
|
|
button="primary"
|
|
label={__('Earn Rewards')}
|
|
navigate={`/$/${PAGES.REWARDS}`}
|
|
/>
|
|
<Button
|
|
icon={ICONS.BUY}
|
|
button="secondary"
|
|
label={__('Buy/Swap Credits')}
|
|
navigate={`/$/${PAGES.BUY}`}
|
|
/>
|
|
</div>
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
/>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
type TabButtonProps = {
|
|
icon: string,
|
|
label: string,
|
|
name: string,
|
|
isOnConfirmationPage: boolean,
|
|
activeTab: string,
|
|
setActiveTab: (string) => void,
|
|
};
|
|
|
|
const TabSwitchButton = (tabButtonProps: TabButtonProps) => {
|
|
const { icon, label, name, isOnConfirmationPage, activeTab, setActiveTab } = tabButtonProps;
|
|
return (
|
|
<Button
|
|
key={name}
|
|
icon={icon}
|
|
label={label}
|
|
button="alt"
|
|
onClick={() => {
|
|
const tipInputElement = document.getElementById('tip-input');
|
|
if (tipInputElement) tipInputElement.focus();
|
|
if (!isOnConfirmationPage) setActiveTab(name);
|
|
}}
|
|
className={classnames('button-toggle', { 'button-toggle--active': activeTab === name })}
|
|
/>
|
|
);
|
|
};
|