diff --git a/ui/component/walletSendTip/index.js b/ui/component/walletSendTip/index.js index 6b00122f1..97a880c44 100644 --- a/ui/component/walletSendTip/index.js +++ b/ui/component/walletSendTip/index.js @@ -1,12 +1,8 @@ import { connect } from 'react-redux'; -import { - doSendTip, - makeSelectTitleForUri, - makeSelectClaimForUri, - selectIsSendingSupport, - selectBalance, -} from 'lbry-redux'; +import { makeSelectTitleForUri, makeSelectClaimForUri, selectIsSendingSupport, selectBalance } from 'lbry-redux'; import WalletSendTip from './view'; +import { doOpenModal } from 'redux/actions/app'; +import { withRouter } from 'react-router'; const select = (state, props) => ({ isPending: selectIsSendingSupport(state), @@ -16,10 +12,7 @@ const select = (state, props) => ({ }); const perform = dispatch => ({ - sendSupport: (amount, claimId, isSupport) => dispatch(doSendTip(amount, claimId, isSupport)), + openModal: (modal, props) => dispatch(doOpenModal(modal, props)), }); -export default connect( - select, - perform -)(WalletSendTip); +export default withRouter(connect(select, perform)(WalletSendTip)); diff --git a/ui/component/walletSendTip/view.jsx b/ui/component/walletSendTip/view.jsx index 432874358..90716a479 100644 --- a/ui/component/walletSendTip/view.jsx +++ b/ui/component/walletSendTip/view.jsx @@ -6,6 +6,7 @@ import { MINIMUM_PUBLISH_BID } from 'constants/claim'; import useIsMobile from 'effects/use-is-mobile'; import CreditAmount from 'component/common/credit-amount'; import I18nMessage from 'component/i18nMessage'; +import * as MODALS from 'constants/modal_types'; type Props = { uri: string, @@ -18,21 +19,21 @@ type Props = { sendTipCallback?: () => void, balance: number, isSupport: boolean, + openModal: (id: string, { tipAmount: number, claimId: string, isSupport: boolean }) => void, }; function WalletSendTip(props: Props) { - const { title, isPending, onCancel, claimIsMine, isSupport, balance, claim, sendTipCallback, sendSupport } = props; + const { title, isPending, onCancel, claimIsMine, isSupport, balance, claim } = props; const [tipAmount, setTipAmount] = React.useState(0); const [tipError, setTipError] = React.useState(); const { claim_id: claimId } = claim; const isMobile = useIsMobile(); - function handleSendButtonClicked() { - sendSupport(tipAmount, claimId, isSupport); - - // ex: close modal - if (sendTipCallback) { - sendTipCallback(); + function handleSubmit() { + const { openModal } = props; + if (tipAmount && claimId) { + const modalProps = { tipAmount, claimId, title, isSupport }; + openModal(MODALS.CONFIRM_SEND_TIP, modalProps); } } @@ -69,7 +70,7 @@ function WalletSendTip(props: Props) { return ( -
+ ({ + 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 new file mode 100644 index 000000000..2cbf452a5 --- /dev/null +++ b/ui/modal/modalConfirmSendTip/view.jsx @@ -0,0 +1,48 @@ +// @flow +import React from 'react'; +import Button from 'component/button'; +import { Form } from 'component/common/form'; +import { Modal } from 'modal/modal'; + +type Props = { + 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 } = this.props; + return ( + + this.onConfirmed()}> +

{__(isSupport ? 'Supporting: ' : 'Tipping: ')}

+
{tipAmount} LBC
+

{__('To: ')}

+
{title}
+
+
+ +
+ ); + } +} + +export default ModalConfirmSendTip; diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx index 72c88b420..b81243901 100644 --- a/ui/modal/modalRouter/view.jsx +++ b/ui/modal/modalRouter/view.jsx @@ -19,6 +19,7 @@ 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'; @@ -94,6 +95,8 @@ function ModalRouter(props: Props) { return ; case MODALS.SEND_TIP: return ; + case MODALS.CONFIRM_SEND_TIP: + return ; case MODALS.SOCIAL_SHARE: return ; case MODALS.PUBLISH: