(WIP) Adds tipping feature to app.

For issue #355

CHANGELOG.md

@@ -9,6 +9,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
 ## [Unreleased]
 ### Added
   * Added a new component, `FormFieldPrice` which is now used in Publish and Settings
+  * Added a tipping button to send LBRY Credits to the publisher
   *
 
 ### Changed

ui/js/component/fileActions/index.js

@@ -6,6 +6,11 @@ import {
   makeSelectDownloadingForUri,
   makeSelectLoadingForUri,
 } from "selectors/file_info";
+import {
+  doSendDraftTransaction,
+  doSetDraftTransactionAmount,
+  doSetDraftTransactionAddress,
+} from "actions/wallet";
 import { makeSelectIsAvailableForUri } from "selectors/availability";
 import { selectCurrentModal } from "selectors/app";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
@@ -48,6 +53,9 @@ const perform = dispatch => ({
   startDownload: uri => dispatch(doPurchaseUri(uri, "affirmPurchase")),
   loadVideo: uri => dispatch(doLoadVideo(uri)),
   restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
+  sendToAddress: () => dispatch(doSendDraftTransaction()),
+  setAmount: amount => dispatch(doSetDraftTransactionAmount(amount)),
+  setAddress: address => dispatch(doSetDraftTransactionAddress(address)),
 });
 
 export default connect(makeSelect, perform)(FileActions);

ui/js/component/fileActions/view.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Icon, BusyMessage } from "component/common";
 import FilePrice from "component/filePrice";
+import { FormField } from "component/form";
 import { Modal } from "component/modal";
 import Link from "component/link";
 import { ToolTip } from "component/tooltip";
@@ -13,6 +14,8 @@ class FileActions extends React.PureComponent {
     super(props);
     this.state = {
       forceShowActions: false,
+      showTipBox: false,
+      feeAmount: "1.00",
     };
   }
 
@@ -57,6 +60,37 @@ class FileActions extends React.PureComponent {
     this.props.loadVideo(this.props.uri);
   }
 
+  handleTipPublisherButtonClicked() {
+    this.setState({
+      showTipBox: true,
+    });
+  }
+
+  handleTipButtonClicked() {
+    let address = this.props.claim.address;
+    let amount = this.state.feeAmount;
+
+    this.props.setAddress(address);
+    this.props.setAmount(amount);
+    this.props.sendToAddress();
+
+    this.setState({
+      showTipBox: false,
+    });
+  }
+
+  handleTipCancelButtonClicked() {
+    this.setState({
+      showTipBox: false,
+    });
+  }
+
+  handleFeeAmountChange(event) {
+    this.setState({
+      feeAmount: event.target.value,
+    });
+  }
+
   render() {
     const {
       fileInfo,
@@ -75,6 +109,8 @@ class FileActions extends React.PureComponent {
       claimIsMine,
     } = this.props;
 
+    const { showTipBox } = this.state;
+
     const metadata = fileInfo ? fileInfo.metadata : null,
       openInFolderMessage = platform.startsWith("Mac")
         ? __("Open in Finder")
@@ -83,6 +119,40 @@ class FileActions extends React.PureComponent {
       title = metadata ? metadata.title : uri;
 
     let content;
+    let tipLink = (
+      <Link
+        label={__("Tip Publisher")}
+        button="text"
+        icon="icon-gift"
+        onClick={this.handleTipPublisherButtonClicked.bind(this)}
+      />
+    );
+
+    let tipBox = (
+      <span>
+        <FormField
+          type="number"
+          className="form-field__input--inline"
+          step="0.1"
+          placeholder="1.00"
+          defaultValue="1.00"
+          min="0.01"
+          postfix={__("LBC")}
+          onChange={event => this.handleFeeAmountChange(event)}
+        />
+        {__("  ")}
+        <Link
+          label={__("Tip")}
+          button="primary"
+          onClick={this.handleTipButtonClicked.bind(this)}
+        />
+        <Link
+          label={__("Cancel")}
+          button="alt"
+          onClick={this.handleTipCancelButtonClicked.bind(this)}
+        />
+      </span>
+    );
 
     if (loading || downloading) {
       const progress = fileInfo && fileInfo.written_bytes
@@ -180,6 +250,7 @@ class FileActions extends React.PureComponent {
               />
             </DropDownMenu>
           : ""}
+        {showTipBox ? tipBox : tipLink}
         <Modal
           type="confirm"
           isOpen={modal == "affirmPurchase"}
@@ -206,6 +277,36 @@ class FileActions extends React.PureComponent {
             outpoint={fileInfo.outpoint}
             title={title}
           />}
+        {modal == "insufficientBalance" &&
+          <Modal
+            isOpen={true}
+            contentLabel={__("Insufficient balance")}
+            onConfirmed={closeModal}
+          >
+            {__(
+              "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet."
+            )}
+          </Modal>}
+        {modal == "transactionSuccessful" &&
+          <Modal
+            isOpen={true}
+            contentLabel={__("Transaction successful")}
+            onConfirmed={closeModal}
+          >
+            {__(
+              "The publisher of the content was successfully tipped " +
+                this.state.feeAmount +
+                " LBC. Mahalo!"
+            )}
+          </Modal>}
+        {modal == "transactionFailed" &&
+          <Modal
+            isOpen={true}
+            contentLabel={__("Transaction failed")}
+            onConfirmed={closeModal}
+          >
+            {__("Something went wrong")}:
+          </Modal>}
       </section>
     );
   }

ui/js/page/filePage/view.jsx

@@ -126,7 +126,7 @@ class FilePage extends React.PureComponent {
                   : uriIndicator}
               </div>
               <div className="card__actions">
-                <FileActions uri={uri} />
+                <FileActions uri={uri} claim={claim} />
               </div>
             </div>
             <div className="card__content card__subtext card__subtext card__subtext--allow-newlines">