From deb4107dd0e071df9f093763746722abca41a4ab Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Mon, 15 Jun 2020 10:04:44 -0400 Subject: [PATCH] confirmation cleanup --- package.json | 2 +- ui/component/walletSendTip/index.js | 4 +- ui/component/walletSendTip/view.jsx | 215 +++++++++++++++----------- ui/modal/modalConfirmSendTip/index.js | 11 -- ui/modal/modalConfirmSendTip/view.jsx | 61 -------- ui/modal/modalRouter/view.jsx | 3 - ui/scss/init/_gui.scss | 13 ++ yarn.lock | 4 +- 8 files changed, 146 insertions(+), 167 deletions(-) delete mode 100644 ui/modal/modalConfirmSendTip/index.js delete mode 100644 ui/modal/modalConfirmSendTip/view.jsx diff --git a/package.json b/package.json index 251d86515..1d00091da 100644 --- a/package.json +++ b/package.json @@ -135,7 +135,7 @@ "imagesloaded": "^4.1.4", "json-loader": "^0.5.4", "lbry-format": "https://github.com/lbryio/lbry-format.git", - "lbry-redux": "lbryio/lbry-redux#70c2ffc0bd8b69e44fc867b98c4763f387494c4d", + "lbry-redux": "lbryio/lbry-redux#f8ac5359d9d05fba2c3a536003a9d4c64b86c9f0", "lbryinc": "lbryio/lbryinc#3ceb09549cb5ec22927ce3bea44ae8dbe2e4a006", "lint-staged": "^7.0.2", "localforage": "^1.7.1", diff --git a/ui/component/walletSendTip/index.js b/ui/component/walletSendTip/index.js index d75fed81f..e932d738f 100644 --- a/ui/component/walletSendTip/index.js +++ b/ui/component/walletSendTip/index.js @@ -8,6 +8,7 @@ import { SETTINGS, selectMyChannelClaims, makeSelectClaimIsMine, + selectFetchingMyChannels, } from 'lbry-redux'; import WalletSendTip from './view'; import { doOpenModal, doHideModal } from 'redux/actions/app'; @@ -23,12 +24,13 @@ const select = (state, props) => ({ instantTipMax: makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_MAX)(state), channels: selectMyChannelClaims(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state), + fetchingChannels: selectFetchingMyChannels(state), }); const perform = dispatch => ({ openModal: (modal, props) => dispatch(doOpenModal(modal, props)), closeModal: () => dispatch(doHideModal()), - sendSupport: (amount, claimId, isSupport) => dispatch(doSendTip(amount, claimId, isSupport)), + sendSupport: (params, isSupport) => dispatch(doSendTip(params, isSupport)), }); export default withRouter(connect(select, perform)(WalletSendTip)); diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx index fffc71b0f..bb5371fb2 100644 --- a/ui/component/walletSendTip/view.jsx +++ b/ui/component/walletSendTip/view.jsx @@ -1,11 +1,10 @@ // @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'; -import { MINIMUM_PUBLISH_BID } from 'constants/claim'; +import { MINIMUM_PUBLISH_BID, CHANNEL_ANONYMOUS } from 'constants/claim'; import useIsMobile from 'effects/use-is-mobile'; import CreditAmount from 'component/common/credit-amount'; import I18nMessage from 'component/i18nMessage'; @@ -18,17 +17,19 @@ import usePersistedState from 'effects/use-persisted-state'; const DEFAULT_TIP_AMOUNTS = [5, 25, 100, 1000]; +type SupportParams = { amount: number, claim_id: string, channel_id?: string }; + type Props = { uri: string, claimIsMine: boolean, title: string, claim: StreamClaim, isPending: boolean, - sendSupport: (number, string, boolean) => void, + sendSupport: (SupportParams, boolean) => void, closeModal: () => void, balance: number, isSupport: boolean, - openModal: (id: string, { tipAmount: number, claimId: string, isSupport: boolean }) => void, + fetchingChannels: boolean, instantTipEnabled: boolean, instantTipMax: { amount: number, currency: string }, channels: ?Array, @@ -44,19 +45,21 @@ function WalletSendTip(props: Props) { claim = {}, instantTipEnabled, instantTipMax, - openModal, sendSupport, closeModal, channels, + fetchingChannels, } = props; const [tipAmount, setTipAmount] = React.useState(DEFAULT_TIP_AMOUNTS[0]); const [tipError, setTipError] = React.useState(); const [isSupport, setIsSupport] = React.useState(claimIsMine); const [showMore, setShowMore] = React.useState(false); + const [isConfirming, setIsConfirming] = React.useState(false); const isMobile = useIsMobile(); const [selectedChannel, setSelectedChannel] = usePersistedState('comment-support:channel'); - const { claim_id: claimId } = claim; + const { channelName } = parseURI(uri); + const channelStrings = channels && channels.map(channel => channel.permanent_url).join(','); React.useEffect(() => { if (!selectedChannel && channelStrings) { @@ -89,11 +92,27 @@ function WalletSendTip(props: Props) { }, [tipAmount, balance, setTipError]); function sendSupportOrConfirm(instantTipMaxAmount = null) { - if (!isSupport && (!instantTipMaxAmount || !instantTipEnabled || tipAmount > instantTipMaxAmount)) { - const modalProps = { uri, tipAmount, claimId, title, isSupport }; - openModal(MODALS.CONFIRM_SEND_TIP, modalProps); + 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 { - sendSupport(tipAmount, claimId, isSupport); + const supportParams: SupportParams = { amount: tipAmount, claim_id: claimId }; + if (selectedChannelId) { + supportParams.channel_id = selectedChannelId; + } + sendSupport(supportParams, isSupport); closeModal(); } } @@ -147,94 +166,114 @@ function WalletSendTip(props: Props) { } actions={ - <> -
- setSelectedChannel(newChannel)} - /> -
+ isConfirming ? ( + <> +
+
+
{__('To')}
+
{channelName || title}
+
{__('From')}
+
{selectedChannel}
+
{__(isSupport ? 'Supporting' : 'Tipping')}
+
{tipAmount} LBC
+
+
+
+
+ + ) : ( + <> +
+ setSelectedChannel(newChannel)} + /> +
-
- {DEFAULT_TIP_AMOUNTS.map(amount => ( +
+ {DEFAULT_TIP_AMOUNTS.map(amount => ( +
- - {showMore && ( -
- - {'Custom support amount'}{' '} - {isMobile && ( - }}> - (%lbc_balance% available) - - )} - - } - className="form-field--price-amount" - error={tipError} - min="0" - step="any" - type="number" - placeholder="1.23" - onChange={event => handleSupportPriceChange(event)} + label={__('Custom')} + onClick={() => setShowMore(true)} />
- )} -
-
- {DEFAULT_TIP_AMOUNTS.some(val => val > balance) && ( -
-
- )} - + {DEFAULT_TIP_AMOUNTS.some(val => val > balance) && ( +
+
+ )} + + ) } /> )} diff --git a/ui/modal/modalConfirmSendTip/index.js b/ui/modal/modalConfirmSendTip/index.js deleted file mode 100644 index f5f7c9fb6..000000000 --- a/ui/modal/modalConfirmSendTip/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import { connect } from 'react-redux'; -import { doSendTip } from 'lbry-redux'; -import { doHideModal } from 'redux/actions/app'; -import ModalConfirmSendTip from './view'; - -const perform = dispatch => ({ - closeModal: () => dispatch(doHideModal()), - sendSupport: (tipAmount, claimId, isSupport) => dispatch(doSendTip(tipAmount, claimId, isSupport)), -}); - -export default connect(null, perform)(ModalConfirmSendTip); diff --git a/ui/modal/modalConfirmSendTip/view.jsx b/ui/modal/modalConfirmSendTip/view.jsx deleted file mode 100644 index 86db7a44a..000000000 --- a/ui/modal/modalConfirmSendTip/view.jsx +++ /dev/null @@ -1,61 +0,0 @@ -// @flow -import React from 'react'; -import { parseURI } from 'lbry-redux'; -import Button from 'component/button'; -import { Form } from 'component/common/form'; -import { Modal } from 'modal/modal'; -import Card from 'component/common/card'; - -type Props = { - uri: string, - claimId: string, - title: string, - tipAmount: number, - isSupport: boolean, - closeModal: () => void, - sendSupport: (number, string, boolean) => void, -}; - -class ModalConfirmSendTip extends React.PureComponent { - onConfirmed() { - const { closeModal, sendSupport, tipAmount, claimId, isSupport } = this.props; - sendSupport(tipAmount, claimId, isSupport); - closeModal(); - } - - render() { - const { tipAmount, title, isSupport, closeModal, uri } = this.props; - const cardTitle = __(isSupport ? 'Confirm Support' : 'Confirm Tip'); - const { channelName } = parseURI(uri); - - return ( - -
this.onConfirmed()}> - -
- -
{tipAmount} LBC
-
-
- -
{title || channelName}
-
- - } - actions={ -
-
- } - /> - -
- ); - } -} - -export default ModalConfirmSendTip; diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx index 58c595ed1..475a2e461 100644 --- a/ui/modal/modalRouter/view.jsx +++ b/ui/modal/modalRouter/view.jsx @@ -19,7 +19,6 @@ import ModalFirstSubscription from 'modal/modalFirstSubscription'; import ModalConfirmTransaction from 'modal/modalConfirmTransaction'; import ModalSocialShare from 'modal/modalSocialShare'; import ModalSendTip from 'modal/modalSendTip'; -import ModalConfirmSendTip from 'modal/modalConfirmSendTip'; import ModalPublish from 'modal/modalPublish'; import ModalOpenExternalResource from 'modal/modalOpenExternalResource'; import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload'; @@ -97,8 +96,6 @@ function ModalRouter(props: Props) { return ; case MODALS.SEND_TIP: return ; - case MODALS.CONFIRM_SEND_TIP: - return ; case MODALS.SOCIAL_SHARE: return ; case MODALS.PUBLISH: diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index bd04a0fae..6829e2da4 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -288,3 +288,16 @@ textarea { .privacy-img { height: 10rem; } + +.confirm__label { + @extend label; +} + +.confirm__value { + margin-bottom: var(--spacing-m); + font-size: var(--font-large); + + &:last-child { + margin-bottom: 0; + } +} diff --git a/yarn.lock b/yarn.lock index b0ec67e87..7a03b2734 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6207,9 +6207,9 @@ lazy-val@^1.0.4: yargs "^13.2.2" zstd-codec "^0.1.1" -lbry-redux@lbryio/lbry-redux#70c2ffc0bd8b69e44fc867b98c4763f387494c4d: +lbry-redux@lbryio/lbry-redux#f8ac5359d9d05fba2c3a536003a9d4c64b86c9f0: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/70c2ffc0bd8b69e44fc867b98c4763f387494c4d" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/f8ac5359d9d05fba2c3a536003a9d4c64b86c9f0" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0"