diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx
index e6f87f206..fcffca1b9 100644
--- a/ui/js/component/fileActions/view.jsx
+++ b/ui/js/component/fileActions/view.jsx
@@ -1,7 +1,7 @@
import React from "react";
import { Icon, BusyMessage } from "component/common";
import FilePrice from "component/filePrice";
-import { FormField } from "component/form";
+import { TipLink } from "component/tipLink";
import { Modal } from "component/modal";
import Link from "component/link";
import { ToolTip } from "component/tooltip";
@@ -14,8 +14,6 @@ class FileActions extends React.PureComponent {
super(props);
this.state = {
forceShowActions: false,
- showTipBox: false,
- feeAmount: "1.00",
};
}
@@ -60,37 +58,6 @@ 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,
@@ -109,8 +76,6 @@ 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")
@@ -119,40 +84,6 @@ class FileActions extends React.PureComponent {
title = metadata ? metadata.title : uri;
let content;
- let tipLink = (
-
- );
-
- let tipBox = (
-
- this.handleFeeAmountChange(event)}
- />
- {__(" ")}
-
-
-
- );
if (loading || downloading) {
const progress = fileInfo && fileInfo.written_bytes
@@ -250,7 +181,7 @@ class FileActions extends React.PureComponent {
/>
: ""}
- {showTipBox ? tipBox : tipLink}
+
}
- {modal == "insufficientBalance" &&
-
- {__(
- "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet."
- )}
- }
- {modal == "transactionSuccessful" &&
-
- {__(
- "The publisher of the content was successfully tipped " +
- this.state.feeAmount +
- " LBC. Mahalo!"
- )}
- }
- {modal == "transactionFailed" &&
-
- {__("Something went wrong")}:
- }
);
}
diff --git a/ui/js/component/tipLink/index.js b/ui/js/component/tipLink/index.js
new file mode 100644
index 000000000..41a894efb
--- /dev/null
+++ b/ui/js/component/tipLink/index.js
@@ -0,0 +1,28 @@
+import React from "react";
+import { connect } from "react-redux";
+import {
+ doSendDraftTransaction,
+ doSetDraftTransactionAmount,
+ doSetDraftTransactionAddress,
+} from "actions/wallet";
+import { selectCurrentModal } from "selectors/app";
+import { doCloseModal, doOpenModal } from "actions/app";
+import TipLink from "./view";
+
+const makeSelect = () => {
+ const select = (state, props) => ({
+ modal: selectCurrentModal(state),
+ });
+
+ return select;
+};
+
+const perform = dispatch => ({
+ closeModal: () => dispatch(doCloseModal()),
+ openModal: modal => dispatch(doOpenModal(modal)),
+ sendToAddress: () => dispatch(doSendDraftTransaction()),
+ setAmount: amount => dispatch(doSetDraftTransactionAmount(amount)),
+ setAddress: address => dispatch(doSetDraftTransactionAddress(address)),
+});
+
+export default connect(makeSelect, perform)(TipLink);
diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx
new file mode 100644
index 000000000..caa0a767b
--- /dev/null
+++ b/ui/js/component/tipLink/view.jsx
@@ -0,0 +1,123 @@
+import React from "react";
+import { Modal } from "component/modal";
+import Link from "component/link";
+import { FormField } from "component/form";
+
+class TipLink extends React.PureComponent {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ showTipBox: false,
+ feeAmount: "1.00",
+ };
+ }
+
+ 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 { showTipBox } = this.state;
+
+ let tipLink = (
+
+ );
+
+ let tipBox = (
+
+ this.handleFeeAmountChange(event)}
+ />
+ {__(" ")}
+
+
+
+ );
+
+ return (
+
+ {showTipBox ? tipBox : tipLink}
+ {modal == "insufficientBalance" &&
+
+ {__(
+ "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet."
+ )}
+ }
+ {modal == "transactionSuccessful" &&
+
+ {__(
+ "The publisher of the content was successfully tipped " +
+ this.state.feeAmount +
+ " LBC. Mahalo!"
+ )}
+ }
+ {modal == "transactionFailed" &&
+
+ {__("Something went wrong")}:
+ }
+
+ );
+ }
+}
+
+export default TipLink;