Add Confirmation when sending Tip/Support

Closes #2714

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));

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 (
     <React.Fragment>
-      <Form onSubmit={handleSendButtonClicked}>
+      <Form onSubmit={handleSubmit}>
         <FormField
           autoFocus
           name="tip-input"

ui/constants/modal_types.js

@@ -19,6 +19,7 @@ export const AFFIRM_PURCHASE = 'affirm_purchase';
 export const CONFIRM_CLAIM_REVOKE = 'confirm_claim_revoke';
 export const FIRST_SUBSCRIPTION = 'firstSubscription';
 export const SEND_TIP = 'send_tip';
+export const CONFIRM_SEND_TIP = 'confirm_send_tip';
 export const SOCIAL_SHARE = 'social_share';
 export const PUBLISH = 'publish';
 export const SEARCH = 'search';

ui/modal/modalConfirmSendTip/index.js

@@ -0,0 +1,11 @@
+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);

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<Props> {
+  onConfirmed() {
+    const { closeModal, sendSupport, tipAmount, claimId, isSupport } = this.props;
+    sendSupport(tipAmount, claimId, isSupport);
+    closeModal();
+  }
+
+  render() {
+    const { tipAmount, title, isSupport, closeModal } = this.props;
+    return (
+      <Modal
+        isOpen
+        title={__(isSupport ? 'Support LBC' : 'Tip LBC')}
+        contentLabel={__(isSupport ? 'Confirm Support' : 'Confirm Tip')}
+        type="custom"
+        onAborted={closeModal}
+      >
+        <Form onSubmit={() => this.onConfirmed()}>
+          <p>{__(isSupport ? 'Supporting: ' : 'Tipping: ')}</p>
+          <blockquote>{tipAmount} LBC</blockquote>
+          <p>{__('To: ')}</p>
+          <blockquote>{title}</blockquote>
+          <div className="card__actions">
+            <Button autoFocus button="primary" label={__('Send')} onClick={() => this.onConfirmed()} />
+            <Button button="link" label={__('Cancel')} onClick={closeModal} />
+          </div>
+        </Form>
+      </Modal>
+    );
+  }
+}
+
+export default ModalConfirmSendTip;

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 <ModalFirstSubscription {...modalProps} />;
     case MODALS.SEND_TIP:
       return <ModalSendTip {...modalProps} />;
+    case MODALS.CONFIRM_SEND_TIP:
+      return <ModalConfirmSendTip {...modalProps} />;
     case MODALS.SOCIAL_SHARE:
       return <ModalSocialShare {...modalProps} />;
     case MODALS.PUBLISH: