From 01e0a2a5db9f503c02e9457ee25b37fe0c789533 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 9 Jun 2020 18:09:24 -0400 Subject: [PATCH] improve support/tip for 0 balance and own claims --- ui/component/selectChannel/view.jsx | 4 +- ui/component/walletSend/index.js | 10 +- ui/component/walletSendTip/index.js | 4 + ui/component/walletSendTip/view.jsx | 300 ++++++++++++----------- ui/modal/modalFirstSubscription/view.jsx | 73 +++--- ui/scss/component/_button.scss | 8 +- ui/scss/component/menu-button.scss | 4 +- 7 files changed, 212 insertions(+), 191 deletions(-) diff --git a/ui/component/selectChannel/view.jsx b/ui/component/selectChannel/view.jsx index 9e554c70f..f864b5899 100644 --- a/ui/component/selectChannel/view.jsx +++ b/ui/component/selectChannel/view.jsx @@ -47,8 +47,8 @@ class ChannelSelection extends React.PureComponent { } componentDidUpdate() { - const { channels, fetchingChannels } = this.props; - if (!fetchingChannels && !channels) { + const { channels, fetchingChannels, hideAnon } = this.props; + if (!fetchingChannels && !channels && hideAnon) { this.setState({ addingChannel: true }); } } diff --git a/ui/component/walletSend/index.js b/ui/component/walletSend/index.js index 5268337c5..b8e630d41 100644 --- a/ui/component/walletSend/index.js +++ b/ui/component/walletSend/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { selectBalance } from 'lbry-redux'; +import { selectBalance, selectMyChannelClaims } from 'lbry-redux'; import { doOpenModal } from 'redux/actions/app'; import WalletSend from './view'; import { withRouter } from 'react-router'; @@ -10,11 +10,7 @@ const perform = dispatch => ({ const select = state => ({ balance: selectBalance(state), + channels: selectMyChannelClaims(state), }); -export default withRouter( - connect( - select, - perform - )(WalletSend) -); +export default withRouter(connect(select, perform)(WalletSend)); diff --git a/ui/component/walletSendTip/index.js b/ui/component/walletSendTip/index.js index 691370c2f..d75fed81f 100644 --- a/ui/component/walletSendTip/index.js +++ b/ui/component/walletSendTip/index.js @@ -6,6 +6,8 @@ import { selectIsSendingSupport, selectBalance, SETTINGS, + selectMyChannelClaims, + makeSelectClaimIsMine, } from 'lbry-redux'; import WalletSendTip from './view'; import { doOpenModal, doHideModal } from 'redux/actions/app'; @@ -19,6 +21,8 @@ const select = (state, props) => ({ balance: selectBalance(state), instantTipEnabled: makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED)(state), instantTipMax: makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_MAX)(state), + channels: selectMyChannelClaims(state), + claimIsMine: makeSelectClaimIsMine(props.uri)(state), }); const perform = dispatch => ({ diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx index f71fe1f75..fffc71b0f 100644 --- a/ui/component/walletSendTip/view.jsx +++ b/ui/component/walletSendTip/view.jsx @@ -1,6 +1,7 @@ // @flow import * as MODALS from 'constants/modal_types'; 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'; @@ -11,12 +12,15 @@ import I18nMessage from 'component/i18nMessage'; import { Lbryio } from 'lbryinc'; import Card from 'component/common/card'; import classnames from 'classnames'; +import SelectChannel from 'component/selectChannel'; +import { parseURI } from 'lbry-redux'; +import usePersistedState from 'effects/use-persisted-state'; -const DEFAULT_TIP_AMOUNTS = [5, 10, 50]; +const DEFAULT_TIP_AMOUNTS = [5, 25, 100, 1000]; type Props = { uri: string, - // claimIsMine: boolean, + claimIsMine: boolean, title: string, claim: StreamClaim, isPending: boolean, @@ -27,6 +31,7 @@ type Props = { openModal: (id: string, { tipAmount: number, claimId: string, isSupport: boolean }) => void, instantTipEnabled: boolean, instantTipMax: { amount: number, currency: string }, + channels: ?Array, }; function WalletSendTip(props: Props) { @@ -34,7 +39,7 @@ function WalletSendTip(props: Props) { uri, title, isPending, - // claimIsMine, + claimIsMine, balance, claim = {}, instantTipEnabled, @@ -42,13 +47,46 @@ function WalletSendTip(props: Props) { openModal, sendSupport, closeModal, + channels, } = props; const [tipAmount, setTipAmount] = React.useState(DEFAULT_TIP_AMOUNTS[0]); const [tipError, setTipError] = React.useState(); - const [isSupport, setIsSupport] = React.useState(false); + const [isSupport, setIsSupport] = React.useState(claimIsMine); const [showMore, setShowMore] = React.useState(false); - const { claim_id: claimId } = claim; const isMobile = useIsMobile(); + const [selectedChannel, setSelectedChannel] = usePersistedState('comment-support:channel'); + + const { claim_id: claimId } = claim; + 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]); + + 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) { + tipError = __('Not enough credits'); + } + setTipError(tipError); + }, [tipAmount, balance, setTipError]); function sendSupportOrConfirm(instantTipMaxAmount = null) { if (!isSupport && (!instantTipMaxAmount || !instantTipEnabled || tipAmount > instantTipMaxAmount)) { @@ -78,160 +116,130 @@ function WalletSendTip(props: Props) { } function handleSupportPriceChange(event: SyntheticInputEvent<*>) { - 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'); - } - setTipAmount(tipAmount); - setTipError(tipError); } - // const label = - // tipAmount && tipAmount !== 0 - // ? __(isSupport ? 'Support %amount% LBC' : 'Tip %amount% LBC', { - // amount: tipAmount.toFixed(8).replace(/\.?0+$/, ''), - // }) - // : __('Amount'); - return (
- - {__( - 'This will increase the overall bid amount for this content, which will boost its ability to be discovered while active.' - )}{' '} -