-
-
-
+ ) : (
+ <>
+ {showEmotes && (
+
setShowEmotes(false)}
+ />
+ )}
+ {!advancedEditor && (
+
+ )}
+
+ {isReply ? __('Replying as') + ' ' : __('Comment as') + ' '}
+
+
+ }
+ quickActionLabel={isReply ? undefined : advancedEditor ? __('Simple Editor') : __('Advanced Editor')}
+ quickActionHandler={() => setAdvancedEditor(!advancedEditor)}
+ openEmoteMenu={() => setShowEmotes(!showEmotes)}
+ onFocus={onTextareaFocus}
+ onBlur={onTextareaBlur}
+ placeholder={__('Say something about this...')}
+ value={commentValue}
+ charCount={charCount}
+ onChange={handleCommentChange}
+ autoFocus={isReply}
+ textAreaMaxLength={FF_MAX_CHARS_IN_COMMENT}
+ />
+
+ )}
+ {(isSupportComment || (isReviewingStickerComment && selectedSticker && selectedSticker.price)) && (
+ setTipAmount(amount)}
+ setConvertedAmount={setConvertedAmount}
+ setDisableSubmitButton={setDisableReviewButton}
+ setTipError={setTipError}
+ tipError={tipError}
+ />
+ )}
+
+ {/* Bottom Action Buttons */}
+
+ {/* Submit Button */}
+ {isReviewingSupportComment ? (
+ ) : isReviewingStickerComment && selectedSticker ? (
-
- );
- }
-
- return (
-
);
diff --git a/ui/component/filePrice/view.jsx b/ui/component/filePrice/view.jsx
index 352064d80..4aefbfb50 100644
--- a/ui/component/filePrice/view.jsx
+++ b/ui/component/filePrice/view.jsx
@@ -1,30 +1,30 @@
// @flow
+import 'scss/component/_file-price.scss';
import * as ICONS from 'constants/icons';
-import React from 'react';
import classnames from 'classnames';
import CreditAmount from 'component/common/credit-amount';
import Icon from 'component/common/icon';
+import React from 'react';
type Props = {
- showFullPrice: boolean,
- costInfo: ?{ includesData: boolean, cost: number },
- doFetchCostInfoForUri: (string) => void,
- uri: string,
- fetching: boolean,
claim: ?{},
- claimWasPurchased: boolean,
claimIsMine: boolean,
+ claimWasPurchased: boolean,
+ costInfo: ?{ includesData: boolean, cost: number },
+ fetching: boolean,
+ showFullPrice: boolean,
type?: string,
+ uri: string,
// below props are just passed to
- inheritStyle?: boolean,
- showLBC?: boolean,
+ customPrice: number,
hideFree?: boolean, // hide the file price if it's free
+ isFiat?: boolean,
+ showLBC?: boolean,
+ doFetchCostInfoForUri: (string) => void,
};
class FilePrice extends React.PureComponent
{
- static defaultProps = {
- showFullPrice: false,
- };
+ static defaultProps = { showFullPrice: false };
componentDidMount() {
this.fetchCost(this.props);
@@ -37,38 +37,42 @@ class FilePrice extends React.PureComponent {
fetchCost = (props: Props) => {
const { costInfo, doFetchCostInfoForUri, uri, fetching, claim } = props;
- if (costInfo === undefined && !fetching && claim) {
- doFetchCostInfoForUri(uri);
- }
+ if (uri && costInfo === undefined && !fetching && claim) doFetchCostInfoForUri(uri);
};
render() {
- const { costInfo, showFullPrice, showLBC, hideFree, claimWasPurchased, type, claimIsMine } = this.props;
+ const {
+ costInfo,
+ showFullPrice,
+ showLBC,
+ isFiat, // this goes
+ hideFree,
+ claimWasPurchased,
+ type,
+ claimIsMine,
+ customPrice,
+ } = this.props;
- if (claimIsMine || !costInfo || !costInfo.cost || (!costInfo.cost && hideFree)) {
- return null;
- }
+ if (!customPrice && (claimIsMine || !costInfo || !costInfo.cost || (!costInfo.cost && hideFree))) return null;
+
+ const className = classnames(claimWasPurchased ? 'filePrice__key' : 'filePrice', {
+ 'filePrice--filepage': type === 'filepage',
+ 'filePrice--modal': type === 'modal',
+ });
return claimWasPurchased ? (
-
+
) : (
);
}
diff --git a/ui/component/walletSendTip/index.js b/ui/component/walletSendTip/index.js
index 16d967d33..b8120be6d 100644
--- a/ui/component/walletSendTip/index.js
+++ b/ui/component/walletSendTip/index.js
@@ -5,36 +5,26 @@ import {
makeSelectClaimIsMine,
selectFetchingMyChannels,
} from 'redux/selectors/claims';
-import { selectBalance, selectIsSendingSupport } from 'redux/selectors/wallet';
+import { doHideModal } from 'redux/actions/app';
import { doSendTip } from 'redux/actions/wallet';
-import * as SETTINGS from 'constants/settings';
-import WalletSendTip from './view';
-import { doOpenModal, doHideModal } from 'redux/actions/app';
-import { withRouter } from 'react-router';
import { makeSelectClientSetting } from 'redux/selectors/settings';
import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
-import { doToast } from 'redux/actions/notifications';
-import { selectUserVerifiedEmail } from 'redux/selectors/user';
+import { selectBalance, selectIsSendingSupport } from 'redux/selectors/wallet';
+import { withRouter } from 'react-router';
+import * as SETTINGS from 'constants/settings';
+import WalletSendTip from './view';
const select = (state, props) => ({
- isPending: selectIsSendingSupport(state),
- title: selectTitleForUri(state, props.uri),
- claim: makeSelectClaimForUri(props.uri, false)(state),
+ activeChannelClaim: selectActiveChannelClaim(state),
balance: selectBalance(state),
- instantTipEnabled: makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED)(state),
- instantTipMax: makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_MAX)(state),
+ claim: makeSelectClaimForUri(props.uri, false)(state), // find this selectClaim
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
fetchingChannels: selectFetchingMyChannels(state),
- activeChannelClaim: selectActiveChannelClaim(state),
incognito: selectIncognito(state),
- isAuthenticated: Boolean(selectUserVerifiedEmail(state)),
+ instantTipEnabled: makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED)(state),
+ instantTipMax: makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_MAX)(state),
+ isPending: selectIsSendingSupport(state),
+ title: selectTitleForUri(state, props.uri),
});
-const perform = (dispatch) => ({
- openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
- closeModal: () => dispatch(doHideModal()),
- sendSupport: (params, isSupport) => dispatch(doSendTip(params, isSupport)),
- doToast: (options) => dispatch(doToast(options)),
-});
-
-export default withRouter(connect(select, perform)(WalletSendTip));
+export default withRouter(connect(select, { doHideModal, doSendTip })(WalletSendTip)); // doSendCashTip gone
diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx
index 30f24f2b0..90fd2a5b8 100644
--- a/ui/component/walletSendTip/view.jsx
+++ b/ui/component/walletSendTip/view.jsx
@@ -1,219 +1,162 @@
// @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 React from 'react';
import Button from 'component/button';
-import { FormField, Form } from 'component/common/form';
-import { MINIMUM_PUBLISH_BID } from 'constants/claim';
-import CreditAmount from 'component/common/credit-amount';
-import I18nMessage from 'component/i18nMessage';
-import { Lbryio } from 'lbryinc';
import Card from 'component/common/card';
-import classnames from 'classnames';
import ChannelSelector from 'component/channelSelector';
+import classnames from 'classnames';
+import I18nMessage from 'component/i18nMessage';
import LbcSymbol from 'component/common/lbc-symbol';
-import { parseURI } from 'util/lbryURI';
+import React from 'react';
import usePersistedState from 'effects/use-persisted-state';
-import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
-
-const DEFAULT_TIP_AMOUNTS = [1, 5, 25, 100];
+import WalletTipAmountSelector from 'component/walletTipAmountSelector';
const TAB_BOOST = 'TabBoost';
const TAB_LBC = 'TabLBC';
+const TAB_FIAT = 'TabFiat';
+
type SupportParams = { amount: number, claim_id: string, channel_id?: string };
+// REMOVE (fiat only)
+// type TipParams = { tipAmount: number, tipChannelName: string, channelClaimId: string };
+// type UserParams = { activeChannelName: ?string, activeChannelId: ?string };
type Props = {
- uri: string,
- claimIsMine: boolean,
- title: string,
- claim: StreamClaim,
- isPending: boolean,
- isSupport: boolean,
- sendSupport: (SupportParams, boolean) => void,
- closeModal: () => void,
+ activeChannelClaim: ?ChannelClaim,
balance: number,
+ claim: StreamClaim,
+ claimIsMine: boolean,
fetchingChannels: boolean,
+ incognito: boolean,
instantTipEnabled: boolean,
instantTipMax: { amount: number, currency: string },
- activeChannelClaim: ?ChannelClaim,
- incognito: boolean,
- doToast: ({ message: string }) => void,
- isAuthenticated: boolean,
+ isPending: boolean,
+ isSupport: boolean,
+ title: string,
+ uri: string,
+ doHideModal: () => void,
+ doSendTip: (SupportParams, boolean) => void,
};
function WalletSendTip(props: Props) {
const {
- uri,
- title,
- isPending,
- claimIsMine,
+ activeChannelClaim,
balance,
claim = {},
- instantTipEnabled,
- instantTipMax,
- sendSupport,
- closeModal,
+ claimIsMine,
fetchingChannels,
incognito,
- activeChannelClaim,
+ instantTipEnabled,
+ instantTipMax,
+ isPending,
+ title,
+ uri,
+ doHideModal,
+ doSendTip,
} = props;
- /** REACT STATE **/
- 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 [isConfirming, setIsConfirming] = React.useState(false);
+ /** STATE **/
- // show the tip error on the frontend
+ const [tipAmount, setTipAmount] = usePersistedState('comment-support:customTip', 1.0);
+ const [isOnConfirmationPage, setConfirmationPage] = React.useState(false);
const [tipError, setTipError] = React.useState();
-
- // denote which tab to show on the frontend
const [activeTab, setActiveTab] = usePersistedState(TAB_BOOST);
+ const [disableSubmitButton, setDisableSubmitButton] = React.useState();
- // handle default active tab
- React.useEffect(() => {
- // force to boost tab if it's someone's own upload
- if (claimIsMine) {
- setActiveTab(TAB_BOOST);
- } else {
- // or set LBC tip as the default if none is set yet
- if (!activeTab || activeTab === 'undefined') {
- setActiveTab(TAB_LBC);
- }
- }
- }, []);
+ /** CONSTS **/
- // alphanumeric claim id
- const { claim_id: claimId } = claim;
-
- // channel name used in url
- const { channelName } = parseURI(uri);
-
- // focus tip element if it exists
- React.useEffect(() => {
- const tipInputElement = document.getElementById('tip-input');
- if (tipInputElement) {
- tipInputElement.focus();
- }
- }, []);
-
- // if user has no balance, used to show conditional frontend
- const noBalance = balance === 0;
-
- // the tip amount, based on if a preset or custom tip amount is being used
- const tipAmount = useCustomTip ? customTipAmount : presetTipAmount;
-
- // get type of claim (stream/channel/repost/collection) for display on frontend
- function getClaimTypeText() {
- if (claim.value_type === 'stream') {
- return __('Content');
- } else if (claim.value_type === 'channel') {
- return __('Channel');
- } else if (claim.value_type === 'repost') {
- return __('Repost');
- } else if (claim.value_type === 'collection') {
- return __('List');
- } else {
- return __('Claim');
- }
- }
const claimTypeText = getClaimTypeText();
+ const isSupport = claimIsMine || activeTab === TAB_BOOST;
+ const titleText = claimIsMine
+ ? __('Boost Your %claimTypeText%', { claimTypeText })
+ : __('Boost This %claimTypeText%', { claimTypeText });
+ const { claim_id: claimId } = claim;
+ let channelName;
+ try {
+ ({ channelName } = parseURI(uri));
+ } catch (e) {}
+ // don't need this - fiat only, for reference REMOVE
+ // const activeChannelName = activeChannelClaim && activeChannelClaim.name;
+ // const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
+ //
+ // // setup variables for backend tip API
+ // const channelClaimId = claim.signing_channel ? claim.signing_channel.claim_id : claim.claim_id;
+ // const tipChannelName = claim.signing_channel ? claim.signing_channel.name : claim.name;
// icon to use or explainer text to show per tab
- let iconToUse;
- let explainerText = '';
- if (activeTab === TAB_BOOST) {
- iconToUse = ICONS.LBC;
- explainerText = __('This refundable boost will improve the discoverability of this %claimTypeText% while active.', {
- claimTypeText,
- });
- } else if (activeTab === TAB_LBC) {
- iconToUse = ICONS.LBC;
- explainerText = __('Show this channel your appreciation by sending a donation of Credits.');
+ 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 USD. ');
+ confirmLabel = __('Tipping Fiat (USD)');
+ break;
+ case TAB_LBC:
+ explainerText = __('Show this channel your appreciation by sending a donation of Credits. ');
+ confirmLabel = __('Tipping Credit');
+ break;
}
- const isSupport = claimIsMine || activeTab === TAB_BOOST;
+ /** FUNCTIONS **/
- React.useEffect(() => {
- // Regex for number up to 8 decimal places
- let regexp;
- let tipError;
-
- if (tipAmount === 0) {
- tipError = __('Amount must be a positive number');
- } else if (!tipAmount || typeof tipAmount !== 'number') {
- tipError = __('Amount must be a number');
+ function getClaimTypeText() {
+ switch (claim.value_type) {
+ case 'stream':
+ return __('Content');
+ case 'channel':
+ return __('Channel');
+ case 'repost':
+ return __('Repost');
+ case 'collection':
+ return __('List');
+ default:
+ return __('Claim');
}
-
- // if it's not fiat, aka it's boost or lbc tip
- else {
- regexp = RegExp(/^(\d*([.]\d{0,8})?)$/);
- const validTipInput = regexp.test(String(tipAmount));
-
- if (!validTipInput) {
- tipError = __('Amount must have no more than 8 decimal places');
- } 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');
- } else if (tipAmount < MINIMUM_PUBLISH_BID) {
- tipError = __('Amount must be higher');
- }
- // if tip fiat tab
- }
-
- setTipError(tipError);
- }, [tipAmount, balance, setTipError, activeTab]);
+ }
// make call to the backend to send lbc or fiat
function sendSupportOrConfirm(instantTipMaxAmount = null) {
- // send a tip
- if (!isConfirming && (!instantTipMaxAmount || !instantTipEnabled || tipAmount > instantTipMaxAmount)) {
- setIsConfirming(true);
+ if (!isOnConfirmationPage && (!instantTipMaxAmount || !instantTipEnabled || tipAmount > instantTipMaxAmount)) {
+ setConfirmationPage(true);
} else {
- // send a boost
- const supportParams: SupportParams = { amount: tipAmount, claim_id: claimId };
-
- // include channel name if donation not anonymous
- if (activeChannelClaim && !incognito) {
- supportParams.channel_id = activeChannelClaim.claim_id;
- }
+ const supportParams: SupportParams = {
+ amount: tipAmount,
+ claim_id: claimId,
+ channel_id: activeChannelClaim && !incognito ? activeChannelClaim.claim_id : undefined,
+ };
// send tip/boost
- sendSupport(supportParams, isSupport);
- closeModal();
+ doSendTip(supportParams, isSupport);
+ doHideModal();
}
}
// when the form button is clicked
function handleSubmit() {
- if (tipAmount && claimId) {
- // send an instant tip (no need to go to an exchange first)
- 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);
- });
- }
- // sending fiat tip
+ if (!tipAmount || !claimId) 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 {
- sendSupportOrConfirm();
+ // 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();
}
}
- function handleCustomPriceChange(event: SyntheticInputEvent<*>) {
- let tipAmountAsString = event.target.value;
-
- let tipAmount = parseFloat(tipAmountAsString);
- setCustomTipAmount(tipAmount);
- }
-
function buildButtonText() {
// test if frontend will show up as isNan
function isNan(tipAmount) {
@@ -223,100 +166,72 @@ function WalletSendTip(props: Props) {
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) ? tipAmount : '';
+ const displayAmount = !isNan(tipAmount) ? amountToShow : '';
// build button text based on tab
- if (activeTab === TAB_BOOST) {
- return claimIsMine
- ? __('Boost Your %claimTypeText%', { claimTypeText })
- : __('Boost This %claimTypeText%', { claimTypeText });
- } else if (activeTab === TAB_LBC) {
- return __('Send a %displayAmount% Credit Tip', { displayAmount });
+ switch (activeTab) {
+ case TAB_BOOST:
+ return titleText;
+ // case TAB_FIAT:
+ // return __('Send a $%displayAmount% Tip', { displayAmount });
+ case TAB_LBC:
+ return __('Send a %displayAmount% Credit Tip', { displayAmount });
}
}
- // dont allow user to click send button
- function shouldDisableAmountSelector(amount) {
- return amount > balance;
- }
+ /** RENDER **/
- // showed on confirm page above amount
- function setConfirmLabel() {
- if (activeTab === TAB_LBC) {
- return __('Tipping Credit');
- } else if (activeTab === TAB_BOOST) {
- return __('Boosting');
- }
- }
+ const getTabButton = (tabIcon: string, tabLabel: string, tabName: string) => (
+