From f403260598982b0a0bdd598c15c28748b976d231 Mon Sep 17 00:00:00 2001 From: hackrush Date: Tue, 25 Jul 2017 21:10:46 +0530 Subject: [PATCH 01/21] (WIP) Adds tipping feature to app. For issue #355 --- CHANGELOG.md | 1 + ui/js/component/fileActions/index.js | 8 +++ ui/js/component/fileActions/view.jsx | 101 +++++++++++++++++++++++++++ ui/js/page/filePage/view.jsx | 2 +- 4 files changed, 111 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c4dd3b55..6aa02b84d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js index 4311823d1..fdfeacf61 100644 --- a/ui/js/component/fileActions/index.js +++ b/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); diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index df624a345..e6f87f206 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/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 = ( + + ); + + let tipBox = ( + + this.handleFeeAmountChange(event)} + /> + {__(" ")} + + + + ); if (loading || downloading) { const progress = fileInfo && fileInfo.written_bytes @@ -180,6 +250,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/page/filePage/view.jsx b/ui/js/page/filePage/view.jsx index 3ca23aadc..8bd952a60 100644 --- a/ui/js/page/filePage/view.jsx +++ b/ui/js/page/filePage/view.jsx @@ -126,7 +126,7 @@ class FilePage extends React.PureComponent { : uriIndicator}
- +
-- 2.45.2 From f54f8a4e105d55d581c0a2a48cead088e89d2bbb Mon Sep 17 00:00:00 2001 From: hackrush Date: Thu, 27 Jul 2017 20:18:18 +0530 Subject: [PATCH 02/21] Testing with tip link in different file. --- ui/js/component/fileActions/view.jsx | 103 +--------------------- ui/js/component/tipLink/index.js | 28 ++++++ ui/js/component/tipLink/view.jsx | 123 +++++++++++++++++++++++++++ 3 files changed, 153 insertions(+), 101 deletions(-) create mode 100644 ui/js/component/tipLink/index.js create mode 100644 ui/js/component/tipLink/view.jsx 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; -- 2.45.2 From a74d61d6856b12386d5e1104702b79b8b8f5ef75 Mon Sep 17 00:00:00 2001 From: hackrush Date: Thu, 27 Jul 2017 22:25:51 +0530 Subject: [PATCH 03/21] Added tip related code in different file. --- ui/js/component/fileActions/index.js | 8 -------- ui/js/component/fileActions/view.jsx | 2 +- ui/js/component/tipLink/view.jsx | 5 +++-- 3 files changed, 4 insertions(+), 11 deletions(-) diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js index fdfeacf61..4311823d1 100644 --- a/ui/js/component/fileActions/index.js +++ b/ui/js/component/fileActions/index.js @@ -6,11 +6,6 @@ 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"; @@ -53,9 +48,6 @@ 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); diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index fcffca1b9..0f006ad60 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 { TipLink } from "component/tipLink"; +import TipLink from "component/tipLink"; import { Modal } from "component/modal"; import Link from "component/link"; import { ToolTip } from "component/tooltip"; diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx index caa0a767b..68452b085 100644 --- a/ui/js/component/tipLink/view.jsx +++ b/ui/js/component/tipLink/view.jsx @@ -45,6 +45,7 @@ class TipLink extends React.PureComponent { } render() { + const { modal, closeModal } = this.props; const { showTipBox } = this.state; let tipLink = ( @@ -83,7 +84,7 @@ class TipLink extends React.PureComponent { ); return ( -
+
{showTipBox ? tipBox : tipLink} {modal == "insufficientBalance" && {__("Something went wrong")}: } -
+
); } } -- 2.45.2 From b8b3a6ffd2093d891789ba7590e8688ba562f03a Mon Sep 17 00:00:00 2001 From: hackrush Date: Fri, 28 Jul 2017 01:45:13 +0530 Subject: [PATCH 04/21] Changed modals to use constants. --- ui/js/actions/wallet.js | 9 +++-- ui/js/component/app/view.jsx | 7 ++++ .../modalInsufficientBalance/index.js | 16 ++++++++ .../modalInsufficientBalance/view.jsx | 26 +++++++++++++ .../component/modalTransactionFailed/index.js | 12 ++++++ .../component/modalTransactionFailed/view.jsx | 20 ++++++++++ .../modalTransactionSuccessful/index.js | 12 ++++++ .../modalTransactionSuccessful/view.jsx | 20 ++++++++++ ui/js/component/tipLink/index.js | 14 +------ ui/js/component/tipLink/view.jsx | 32 ---------------- ui/js/component/walletSend/index.js | 4 -- ui/js/component/walletSend/view.jsx | 37 +------------------ ui/js/constants/modal_types.js | 5 ++- 13 files changed, 125 insertions(+), 89 deletions(-) create mode 100644 ui/js/component/modalInsufficientBalance/index.js create mode 100644 ui/js/component/modalInsufficientBalance/view.jsx create mode 100644 ui/js/component/modalTransactionFailed/index.js create mode 100644 ui/js/component/modalTransactionFailed/view.jsx create mode 100644 ui/js/component/modalTransactionSuccessful/index.js create mode 100644 ui/js/component/modalTransactionSuccessful/view.jsx diff --git a/ui/js/actions/wallet.js b/ui/js/actions/wallet.js index 17c4be201..3eeb3810f 100644 --- a/ui/js/actions/wallet.js +++ b/ui/js/actions/wallet.js @@ -6,6 +6,7 @@ import { selectBalance, } from "selectors/wallet"; import { doOpenModal } from "actions/app"; +import * as modals from "constants/modal_types"; export function doUpdateBalance(balance) { return { @@ -73,7 +74,7 @@ export function doSendDraftTransaction() { const amount = selectDraftTransactionAmount(state); if (balance - amount < 1) { - return dispatch(doOpenModal("insufficientBalance")); + return dispatch(doOpenModal(modals.INSUFFICIENT_BALANCE)); } dispatch({ @@ -85,13 +86,13 @@ export function doSendDraftTransaction() { dispatch({ type: types.SEND_TRANSACTION_COMPLETED, }); - dispatch(doOpenModal("transactionSuccessful")); + dispatch(doOpenModal(modals.TRANSACTION_SUCCESSFUL)); } else { dispatch({ type: types.SEND_TRANSACTION_FAILED, data: { error: results }, }); - dispatch(doOpenModal("transactionFailed")); + dispatch(doOpenModal(modals.TRANSACTION_FAILED)); } }; @@ -100,7 +101,7 @@ export function doSendDraftTransaction() { type: types.SEND_TRANSACTION_FAILED, data: { error: error.message }, }); - dispatch(doOpenModal("transactionFailed")); + dispatch(doOpenModal(modals.TRANSACTION_FAILED)); }; lbry diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index e8ebbcd09..b2782151e 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -8,6 +8,9 @@ import ModalInsufficientCredits from "component/modalInsufficientCredits"; import ModalUpgrade from "component/modalUpgrade"; import ModalWelcome from "component/modalWelcome"; import ModalFirstReward from "component/modalFirstReward"; +import ModalTransactionSuccessful from "component/modalTransactionSuccessful"; +import ModalTransactionFailed from "component/modalTransactionFailed"; +import ModalInsufficientBalance from "component/modalInsufficientBalance"; import lbry from "lbry"; import * as modals from "constants/modal_types"; @@ -78,6 +81,10 @@ class App extends React.PureComponent { {modal == modals.WELCOME && } {modal == modals.FIRST_REWARD && } {modal == modals.AUTHENTICATION_FAILURE && } + {modal == modals.TRANSACTION_SUCCESSFUL && + } + {modal == modals.TRANSACTION_FAILED && } + {modal == modals.INSUFFICIENT_BALANCE && } ); } diff --git a/ui/js/component/modalInsufficientBalance/index.js b/ui/js/component/modalInsufficientBalance/index.js new file mode 100644 index 000000000..c56232caf --- /dev/null +++ b/ui/js/component/modalInsufficientBalance/index.js @@ -0,0 +1,16 @@ +import React from "react"; +import { connect } from "react-redux"; +import { doCloseModal, doNavigate } from "actions/app"; +import ModalInsufficientBalance from "./view"; + +const select = state => ({}); + +const perform = dispatch => ({ + addBalance: () => { + dispatch(doNavigate("/wallet")); + dispatch(doCloseModal()); + }, + closeModal: () => dispatch(doCloseModal()), +}); + +export default connect(select, perform)(ModalInsufficientBalance); diff --git a/ui/js/component/modalInsufficientBalance/view.jsx b/ui/js/component/modalInsufficientBalance/view.jsx new file mode 100644 index 000000000..f9ac56138 --- /dev/null +++ b/ui/js/component/modalInsufficientBalance/view.jsx @@ -0,0 +1,26 @@ +import React from "react"; +import { Modal } from "component/modal"; + +class ModalInsufficientBalance extends React.PureComponent { + render() { + const { addBalance, closeModal } = this.props; + + return ( + + {__( + "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet." + )} + + ); + } +} + +export default ModalInsufficientBalance; diff --git a/ui/js/component/modalTransactionFailed/index.js b/ui/js/component/modalTransactionFailed/index.js new file mode 100644 index 000000000..4b370a7c8 --- /dev/null +++ b/ui/js/component/modalTransactionFailed/index.js @@ -0,0 +1,12 @@ +import React from "react"; +import { connect } from "react-redux"; +import { doCloseModal } from "actions/app"; +import ModalTransactionFailed from "./view"; + +const select = state => ({}); + +const perform = dispatch => ({ + closeModal: () => dispatch(doCloseModal()), +}); + +export default connect(select, perform)(ModalTransactionFailed); diff --git a/ui/js/component/modalTransactionFailed/view.jsx b/ui/js/component/modalTransactionFailed/view.jsx new file mode 100644 index 000000000..f22038e78 --- /dev/null +++ b/ui/js/component/modalTransactionFailed/view.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import { Modal } from "component/modal"; + +class ModalTransactionFailed extends React.PureComponent { + render() { + const { closeModal } = this.props; + + return ( + + {__("Something went wrong")}: + + ); + } +} + +export default ModalTransactionFailed; diff --git a/ui/js/component/modalTransactionSuccessful/index.js b/ui/js/component/modalTransactionSuccessful/index.js new file mode 100644 index 000000000..3e239d997 --- /dev/null +++ b/ui/js/component/modalTransactionSuccessful/index.js @@ -0,0 +1,12 @@ +import React from "react"; +import { connect } from "react-redux"; +import { doCloseModal } from "actions/app"; +import ModalTransactionSuccessful from "./view"; + +const select = state => ({}); + +const perform = dispatch => ({ + closeModal: () => dispatch(doCloseModal()), +}); + +export default connect(select, perform)(ModalTransactionSuccessful); diff --git a/ui/js/component/modalTransactionSuccessful/view.jsx b/ui/js/component/modalTransactionSuccessful/view.jsx new file mode 100644 index 000000000..6f9f68f81 --- /dev/null +++ b/ui/js/component/modalTransactionSuccessful/view.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import { Modal } from "component/modal"; + +class ModalTransactionSuccessful extends React.PureComponent { + render() { + const { closeModal } = this.props; + + return ( + + {__("Your transaction was successfully placed in the queue.")} + + ); + } +} + +export default ModalTransactionSuccessful; diff --git a/ui/js/component/tipLink/index.js b/ui/js/component/tipLink/index.js index 41a894efb..3e093833e 100644 --- a/ui/js/component/tipLink/index.js +++ b/ui/js/component/tipLink/index.js @@ -5,24 +5,14 @@ import { 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 select = state => ({}); 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); +export default connect(select, perform)(TipLink); diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx index 68452b085..4003cd25d 100644 --- a/ui/js/component/tipLink/view.jsx +++ b/ui/js/component/tipLink/view.jsx @@ -1,5 +1,4 @@ import React from "react"; -import { Modal } from "component/modal"; import Link from "component/link"; import { FormField } from "component/form"; @@ -45,7 +44,6 @@ class TipLink extends React.PureComponent { } render() { - const { modal, closeModal } = this.props; const { showTipBox } = this.state; let tipLink = ( @@ -86,36 +84,6 @@ class TipLink extends React.PureComponent { 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")}: - }
); } diff --git a/ui/js/component/walletSend/index.js b/ui/js/component/walletSend/index.js index ab13440db..50712e14c 100644 --- a/ui/js/component/walletSend/index.js +++ b/ui/js/component/walletSend/index.js @@ -1,12 +1,10 @@ import React from "react"; import { connect } from "react-redux"; -import { doCloseModal } from "actions/app"; import { doSendDraftTransaction, doSetDraftTransactionAmount, doSetDraftTransactionAddress, } from "actions/wallet"; -import { selectCurrentModal } from "selectors/app"; import { selectDraftTransactionAmount, selectDraftTransactionAddress, @@ -15,13 +13,11 @@ import { import WalletSend from "./view"; const select = state => ({ - modal: selectCurrentModal(state), address: selectDraftTransactionAddress(state), amount: selectDraftTransactionAmount(state), }); const perform = dispatch => ({ - closeModal: () => dispatch(doCloseModal()), sendToAddress: () => dispatch(doSendDraftTransaction()), setAmount: event => dispatch(doSetDraftTransactionAmount(event.target.value)), setAddress: event => diff --git a/ui/js/component/walletSend/view.jsx b/ui/js/component/walletSend/view.jsx index 4d4de0fd6..28e62de68 100644 --- a/ui/js/component/walletSend/view.jsx +++ b/ui/js/component/walletSend/view.jsx @@ -1,18 +1,9 @@ import React from "react"; import Link from "component/link"; -import Modal from "component/modal"; import { FormRow } from "component/form"; const WalletSend = props => { - const { - sendToAddress, - closeModal, - modal, - setAmount, - setAddress, - amount, - address, - } = props; + const { sendToAddress, setAmount, setAddress, amount, address } = props; return (
@@ -52,32 +43,6 @@ const WalletSend = props => { - {modal == "insufficientBalance" && - - {__( - "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet." - )} - } - {modal == "transactionSuccessful" && - - {__("Your transaction was successfully placed in the queue.")} - } - {modal == "transactionFailed" && - - {__("Something went wrong")}: - }
); }; diff --git a/ui/js/constants/modal_types.js b/ui/js/constants/modal_types.js index 153996e00..9c2d25af0 100644 --- a/ui/js/constants/modal_types.js +++ b/ui/js/constants/modal_types.js @@ -6,4 +6,7 @@ export const INSUFFICIENT_CREDITS = "insufficient_credits"; export const UPGRADE = "upgrade"; export const WELCOME = "welcome"; export const FIRST_REWARD = "first_reward"; -export const AUTHENTICATION_FAILURE = "auth_failure"; \ No newline at end of file +export const AUTHENTICATION_FAILURE = "auth_failure"; +export const TRANSACTION_SUCCESSFUL = "transaction_successful"; +export const TRANSACTION_FAILED = "transaction_failed"; +export const INSUFFICIENT_BALANCE = "insufficient_balance"; -- 2.45.2 From ba6d093d1c3e02c5f8eb177a978ea1db387c9ac3 Mon Sep 17 00:00:00 2001 From: hackrush Date: Fri, 28 Jul 2017 05:04:42 +0530 Subject: [PATCH 05/21] Added new component form for price, also only tipping form is shown when clicked. --- ui/js/component/fileActions/view.jsx | 26 +++++++++++++++--- ui/js/component/priceForm/index.js | 5 ++++ ui/js/component/priceForm/view.jsx | 39 +++++++++++++++++++++++++++ ui/js/component/tipLink/view.jsx | 40 ++++++++++++++-------------- 4 files changed, 87 insertions(+), 23 deletions(-) create mode 100644 ui/js/component/priceForm/index.js create mode 100644 ui/js/component/priceForm/view.jsx diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index 0f006ad60..216202205 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -14,6 +14,7 @@ class FileActions extends React.PureComponent { super(props); this.state = { forceShowActions: false, + showTipBox: false, }; } @@ -58,6 +59,18 @@ class FileActions extends React.PureComponent { this.props.loadVideo(this.props.uri); } + handleTipShow() { + this.setState({ + showTipBox: true, + }); + } + + handleTipHide() { + this.setState({ + showTipBox: false, + }); + } + render() { const { fileInfo, @@ -76,6 +89,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") @@ -166,8 +181,14 @@ class FileActions extends React.PureComponent { return (
- {content} - {showMenu + {showTipBox ? "" : content} + + {showMenu && !showTipBox ? : ""} - { + const { + onFeeChange, + onCurrencyChange, + defaultFeeValue, + defaultCurrencyValue, + placeholder, + min, + step, + } = props; + + return ( + + + + + + + + ); +}; + +export default PriceForm; diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx index 4003cd25d..25740298a 100644 --- a/ui/js/component/tipLink/view.jsx +++ b/ui/js/component/tipLink/view.jsx @@ -1,21 +1,20 @@ import React from "react"; import Link from "component/link"; import { FormField } from "component/form"; +import PriceForm from "component/priceForm"; class TipLink extends React.PureComponent { constructor(props) { super(props); this.state = { - showTipBox: false, feeAmount: "1.00", + currency: "LBC", }; } handleTipPublisherButtonClicked() { - this.setState({ - showTipBox: true, - }); + this.props.onTipShow(); } handleTipButtonClicked() { @@ -26,15 +25,11 @@ class TipLink extends React.PureComponent { this.props.setAmount(amount); this.props.sendToAddress(); - this.setState({ - showTipBox: false, - }); + this.props.onTipHide(); } handleTipCancelButtonClicked() { - this.setState({ - showTipBox: false, - }); + this.props.onTipHide(); } handleFeeAmountChange(event) { @@ -43,12 +38,18 @@ class TipLink extends React.PureComponent { }); } + handleCurrencyChange(event) { + this.setState({ + currency: event.target.value, + }); + } + render() { - const { showTipBox } = this.state; + const { showTipBox } = this.props; let tipLink = ( - this.handleFeeAmountChange(event)} + placeholder="1.00" + step="0.1" + onFeeChange={event => this.handleFeeAmountChange(event)} + defaultFeeValue="1.00" + onCurrencyChange={event => this.handleCurrencyChange(event)} + defaultCurrencyValue="LBC" /> {__(" ")} Date: Sat, 29 Jul 2017 12:20:17 +0530 Subject: [PATCH 06/21] Displays snackBar for any successful trasaction. Also, minor changes to tip form css, to increase gap between select box and tip button. --- ui/js/actions/wallet.js | 10 ++++++++-- ui/js/component/app/view.jsx | 3 --- .../modalTransactionSuccessful/index.js | 12 ----------- .../modalTransactionSuccessful/view.jsx | 20 ------------------- ui/js/component/priceForm/view.jsx | 3 ++- ui/js/component/tipLink/view.jsx | 12 +++++++++-- ui/js/constants/modal_types.js | 1 - ui/scss/component/_form-field.scss | 4 ++++ 8 files changed, 24 insertions(+), 41 deletions(-) delete mode 100644 ui/js/component/modalTransactionSuccessful/index.js delete mode 100644 ui/js/component/modalTransactionSuccessful/view.jsx diff --git a/ui/js/actions/wallet.js b/ui/js/actions/wallet.js index 3eeb3810f..565ca478d 100644 --- a/ui/js/actions/wallet.js +++ b/ui/js/actions/wallet.js @@ -5,7 +5,7 @@ import { selectDraftTransactionAmount, selectBalance, } from "selectors/wallet"; -import { doOpenModal } from "actions/app"; +import { doOpenModal, doShowSnackBar } from "actions/app"; import * as modals from "constants/modal_types"; export function doUpdateBalance(balance) { @@ -86,7 +86,13 @@ export function doSendDraftTransaction() { dispatch({ type: types.SEND_TRANSACTION_COMPLETED, }); - dispatch(doOpenModal(modals.TRANSACTION_SUCCESSFUL)); + dispatch( + doShowSnackBar({ + message: __(`You sent ${amount} LBC`), + linkText: __("History"), + linkTarget: __("/wallet"), + }) + ); } else { dispatch({ type: types.SEND_TRANSACTION_FAILED, diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index b2782151e..6cedc6096 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -8,7 +8,6 @@ import ModalInsufficientCredits from "component/modalInsufficientCredits"; import ModalUpgrade from "component/modalUpgrade"; import ModalWelcome from "component/modalWelcome"; import ModalFirstReward from "component/modalFirstReward"; -import ModalTransactionSuccessful from "component/modalTransactionSuccessful"; import ModalTransactionFailed from "component/modalTransactionFailed"; import ModalInsufficientBalance from "component/modalInsufficientBalance"; import lbry from "lbry"; @@ -81,8 +80,6 @@ class App extends React.PureComponent { {modal == modals.WELCOME && } {modal == modals.FIRST_REWARD && } {modal == modals.AUTHENTICATION_FAILURE && } - {modal == modals.TRANSACTION_SUCCESSFUL && - } {modal == modals.TRANSACTION_FAILED && } {modal == modals.INSUFFICIENT_BALANCE && } diff --git a/ui/js/component/modalTransactionSuccessful/index.js b/ui/js/component/modalTransactionSuccessful/index.js deleted file mode 100644 index 3e239d997..000000000 --- a/ui/js/component/modalTransactionSuccessful/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "actions/app"; -import ModalTransactionSuccessful from "./view"; - -const select = state => ({}); - -const perform = dispatch => ({ - closeModal: () => dispatch(doCloseModal()), -}); - -export default connect(select, perform)(ModalTransactionSuccessful); diff --git a/ui/js/component/modalTransactionSuccessful/view.jsx b/ui/js/component/modalTransactionSuccessful/view.jsx deleted file mode 100644 index 6f9f68f81..000000000 --- a/ui/js/component/modalTransactionSuccessful/view.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import { Modal } from "component/modal"; - -class ModalTransactionSuccessful extends React.PureComponent { - render() { - const { closeModal } = this.props; - - return ( - - {__("Your transaction was successfully placed in the queue.")} - - ); - } -} - -export default ModalTransactionSuccessful; diff --git a/ui/js/component/priceForm/view.jsx b/ui/js/component/priceForm/view.jsx index b4c8318c0..bba0173f5 100644 --- a/ui/js/component/priceForm/view.jsx +++ b/ui/js/component/priceForm/view.jsx @@ -10,10 +10,11 @@ const PriceForm = props => { placeholder, min, step, + isTip, } = props; return ( - + this.handleFeeAmountChange(event)} - defaultFeeValue="1.00" + defaultFeeValue={this.state.feeAmount} onCurrencyChange={event => this.handleCurrencyChange(event)} defaultCurrencyValue="LBC" /> - {__(" ")} Date: Sat, 29 Jul 2017 13:51:03 +0530 Subject: [PATCH 07/21] Removed useless passing of claim arg in filePage --- ui/js/component/fileActions/index.js | 7 ++++++- ui/js/component/fileActions/view.jsx | 3 ++- ui/js/component/tipLink/view.jsx | 2 +- ui/js/page/filePage/view.jsx | 2 +- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js index 4311823d1..5802526af 100644 --- a/ui/js/component/fileActions/index.js +++ b/ui/js/component/fileActions/index.js @@ -12,7 +12,10 @@ import { makeSelectCostInfoForUri } from "selectors/cost_info"; import { doCloseModal, doOpenModal } from "actions/app"; import { doFetchAvailability } from "actions/availability"; import { doOpenFileInShell, doOpenFileInFolder } from "actions/file_info"; -import { makeSelectClaimForUriIsMine } from "selectors/claims"; +import { + makeSelectClaimForUriIsMine, + makeSelectClaimForUri, +} from "selectors/claims"; import { doPurchaseUri, doLoadVideo, doStartDownload } from "actions/content"; import FileActions from "./view"; @@ -23,6 +26,7 @@ const makeSelect = () => { const selectCostInfoForUri = makeSelectCostInfoForUri(); const selectLoadingForUri = makeSelectLoadingForUri(); const selectClaimForUriIsMine = makeSelectClaimForUriIsMine(); + const selectClaimForUri = makeSelectClaimForUri(); const select = (state, props) => ({ fileInfo: selectFileInfoForUri(state, props), @@ -34,6 +38,7 @@ const makeSelect = () => { costInfo: selectCostInfoForUri(state, props), loading: selectLoadingForUri(state, props), claimIsMine: selectClaimForUriIsMine(state, props), + claimInfo: selectClaimForUri(state, props), }); return select; diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index 216202205..79bfbf506 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -87,6 +87,7 @@ class FileActions extends React.PureComponent { costInfo, loading, claimIsMine, + claimInfo, } = this.props; const { showTipBox } = this.state; @@ -186,7 +187,7 @@ class FileActions extends React.PureComponent { onTipShow={this.handleTipShow.bind(this)} onTipHide={this.handleTipHide.bind(this)} showTipBox={showTipBox} - claim={this.props.claim} + address={claimInfo.address} /> {showMenu && !showTipBox ? diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx index 3f710007f..7138e95aa 100644 --- a/ui/js/component/tipLink/view.jsx +++ b/ui/js/component/tipLink/view.jsx @@ -19,7 +19,7 @@ class TipLink extends React.PureComponent { } handleTipButtonClicked() { - let address = this.props.claim.address; + let address = this.props.address; let amount = this.state.feeAmount; this.props.setAddress(address); diff --git a/ui/js/page/filePage/view.jsx b/ui/js/page/filePage/view.jsx index 8bd952a60..3ca23aadc 100644 --- a/ui/js/page/filePage/view.jsx +++ b/ui/js/page/filePage/view.jsx @@ -126,7 +126,7 @@ class FilePage extends React.PureComponent { : uriIndicator}
- +
-- 2.45.2 From 4d60f96b85154adc4b8f35df14e1090dbc9d3af7 Mon Sep 17 00:00:00 2001 From: hackrush Date: Sat, 29 Jul 2017 14:06:42 +0530 Subject: [PATCH 08/21] The form now displays a help message. --- ui/js/component/tipLink/view.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx index 7138e95aa..373f46257 100644 --- a/ui/js/component/tipLink/view.jsx +++ b/ui/js/component/tipLink/view.jsx @@ -86,6 +86,9 @@ class TipLink extends React.PureComponent { button="alt" onClick={this.handleTipCancelButtonClicked.bind(this)} /> +
+ {__("This sends the entered amount of LBCs to the publisher.")} +
); -- 2.45.2 From 03ee864af0bef0372551f6e31c215e1a360eb116 Mon Sep 17 00:00:00 2001 From: hackrush Date: Tue, 8 Aug 2017 03:43:58 +0530 Subject: [PATCH 09/21] (WIP) Tip as support Functionality Only. --- ui/js/actions/claims.js | 76 ++++++++++++++++++++++++++++ ui/js/component/fileActions/view.jsx | 2 +- ui/js/component/priceForm/index.js | 5 -- ui/js/component/priceForm/view.jsx | 40 --------------- ui/js/component/tipLink/index.js | 14 ++--- ui/js/component/tipLink/view.jsx | 48 ++++++++---------- ui/js/constants/action_types.js | 10 +++- ui/js/reducers/claims.js | 58 ++++++++++++++++++++- ui/js/selectors/claims.js | 10 ++++ 9 files changed, 179 insertions(+), 84 deletions(-) create mode 100644 ui/js/actions/claims.js delete mode 100644 ui/js/component/priceForm/index.js delete mode 100644 ui/js/component/priceForm/view.jsx diff --git a/ui/js/actions/claims.js b/ui/js/actions/claims.js new file mode 100644 index 000000000..5d72a9f5f --- /dev/null +++ b/ui/js/actions/claims.js @@ -0,0 +1,76 @@ +import lbry from "lbry"; +import { selectBalance } from "selectors/wallet"; +import { + selectSupportTransaction, + selectSupportTransactionAmount, +} from "selectors/claims"; +import { doOpenModal, doShowSnackBar } from "actions/app"; +import * as types from "constants/action_types"; +import * as modals from "constants/modal_types"; + +export function doSendSupport() { + return function(dispatch, getState) { + const state = getState(); + const supportTx = selectSupportTransaction(state); + const balance = selectBalance(state); + const amount = selectSupportTransactionAmount(state); + + if (balance - amount < 1) { + return dispatch(doOpenModal(modals.INSUFFICIENT_BALANCE)); + } + + dispatch({ + type: types.SUPPORT_TRANSACTION_STARTED, + }); + + const successCallback = results => { + if (results.txid) { + dispatch({ + type: types.SUPPORT_TRANSACTION_COMPLETED, + }); + dispatch( + doShowSnackBar({ + message: __(`You sent ${amount} LBC as support, Mahalo!`), + linkText: __("History"), + linkTarget: __("/wallet"), + }) + ); + } else { + dispatch({ + type: types.SUPPORT_TRANSACTION_FAILED, + data: { error: results }, + }); + dispatch(doOpenModal(modals.TRANSACTION_FAILED)); + } + }; + + const errorCallback = error => { + dispatch({ + type: types.SUPPORT_TRANSACTION_FAILED, + data: { error: error.message }, + }); + dispatch(doOpenModal(modals.TRANSACTION_FAILED)); + }; + + lbry + .claim_send_tip({ + claim_id: supportTx.claim_id, + amount: supportTx.amount, + }) + .then(successCallback, errorCallback); + }; +} + +export function doSetSupportAmount(amount) { + return { + type: types.SET_SUPPORT_AMOUNT, + data: { amount }, + }; +} + +export function doSetSupportClaimID(claim_id) { + return { + type: types.SET_SUPPORT_CLAIMID, + data: { claim_id }, + }; +} diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index 79bfbf506..1b0c2670a 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -187,7 +187,7 @@ class FileActions extends React.PureComponent { onTipShow={this.handleTipShow.bind(this)} onTipHide={this.handleTipHide.bind(this)} showTipBox={showTipBox} - address={claimInfo.address} + claim_id={claimInfo.claim_id} /> {showMenu && !showTipBox ? diff --git a/ui/js/component/priceForm/index.js b/ui/js/component/priceForm/index.js deleted file mode 100644 index 5370b8ed1..000000000 --- a/ui/js/component/priceForm/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import PriceForm from "./view"; - -export default connect(null, null)(PriceForm); diff --git a/ui/js/component/priceForm/view.jsx b/ui/js/component/priceForm/view.jsx deleted file mode 100644 index bba0173f5..000000000 --- a/ui/js/component/priceForm/view.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import { FormField } from "component/form"; - -const PriceForm = props => { - const { - onFeeChange, - onCurrencyChange, - defaultFeeValue, - defaultCurrencyValue, - placeholder, - min, - step, - isTip, - } = props; - - return ( - - - - - - - - ); -}; - -export default PriceForm; diff --git a/ui/js/component/tipLink/index.js b/ui/js/component/tipLink/index.js index 3e093833e..b969bfb57 100644 --- a/ui/js/component/tipLink/index.js +++ b/ui/js/component/tipLink/index.js @@ -1,18 +1,18 @@ import React from "react"; import { connect } from "react-redux"; import { - doSendDraftTransaction, - doSetDraftTransactionAmount, - doSetDraftTransactionAddress, -} from "actions/wallet"; + doSendSupport, + doSetSupportAmount, + doSetSupportClaimID, +} from "actions/claims"; import TipLink from "./view"; const select = state => ({}); const perform = dispatch => ({ - sendToAddress: () => dispatch(doSendDraftTransaction()), - setAmount: amount => dispatch(doSetDraftTransactionAmount(amount)), - setAddress: address => dispatch(doSetDraftTransactionAddress(address)), + sendSupport: () => dispatch(doSendSupport()), + setAmount: amount => dispatch(doSetSupportAmount(amount)), + setClaimID: claim_id => dispatch(doSetSupportClaimID(claim_id)), }); export default connect(select, perform)(TipLink); diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx index 373f46257..295afc3db 100644 --- a/ui/js/component/tipLink/view.jsx +++ b/ui/js/component/tipLink/view.jsx @@ -1,7 +1,6 @@ import React from "react"; import Link from "component/link"; -import { FormField } from "component/form"; -import PriceForm from "component/priceForm"; +import FormFieldPrice from "component/formFieldPrice"; class TipLink extends React.PureComponent { constructor(props) { @@ -13,35 +12,30 @@ class TipLink extends React.PureComponent { }; } - handleTipPublisherButtonClicked() { + handleSupportButtonClicked() { this.resetDefaults(); this.props.onTipShow(); } - handleTipButtonClicked() { - let address = this.props.address; + handleSendButtonClicked() { + let claim_id = this.props.claim_id; let amount = this.state.feeAmount; - this.props.setAddress(address); + this.props.setClaimID(claim_id); this.props.setAmount(amount); - this.props.sendToAddress(); + this.props.sendSupport(); this.props.onTipHide(); } - handleTipCancelButtonClicked() { + handleSupportCancelButtonClicked() { this.props.onTipHide(); } - handleFeeAmountChange(event) { + handleSupportPriceChange(newValue) { this.setState({ - feeAmount: event.target.value, - }); - } - - handleCurrencyChange(event) { - this.setState({ - currency: event.target.value, + feeAmount: newValue.amount, + feeCurrency: newValue.currency, }); } @@ -54,37 +48,35 @@ class TipLink extends React.PureComponent { render() { const { showTipBox } = this.props; + const { feeAmount, currency } = this.state; let tipLink = ( ); let tipBox = ( - this.handleFeeAmountChange(event)} - defaultFeeValue={this.state.feeAmount} - onCurrencyChange={event => this.handleCurrencyChange(event)} - defaultCurrencyValue="LBC" + onChange={value => this.handleSupportPriceChange(value)} + defaultValue={{ amount: feeAmount, currency: currency }} />
{__("This sends the entered amount of LBCs to the publisher.")} diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 71d6d8072..8d53d0806 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -112,5 +112,11 @@ export const CLAIM_REWARD_STARTED = "CLAIM_REWARD_STARTED"; export const CLAIM_REWARD_SUCCESS = "CLAIM_REWARD_SUCCESS"; export const CLAIM_REWARD_FAILURE = "CLAIM_REWARD_FAILURE"; export const CLAIM_REWARD_CLEAR_ERROR = "CLAIM_REWARD_CLEAR_ERROR"; -export const FETCH_REWARD_CONTENT_COMPLETED = - "FETCH_REWARD_CONTENT_COMPLETED"; +export const FETCH_REWARD_CONTENT_COMPLETED = "FETCH_REWARD_CONTENT_COMPLETED"; + +// Supports +export const SET_SUPPORT_CLAIMID = "SET_SUPPORT_CLAIMID"; +export const SET_SUPPORT_AMOUNT = "SET_SUPPORT_AMOUNT"; +export const SUPPORT_TRANSACTION_STARTED = "SUPPORT_TRANSACTION_STARTED"; +export const SUPPORT_TRANSACTION_COMPLETED = "SUPPORT_TRANSACTION_COMPLETED"; +export const SUPPORT_TRANSACTION_FAILED = "SUPPORT_TRANSACTION_FAILED"; diff --git a/ui/js/reducers/claims.js b/ui/js/reducers/claims.js index c70fd45e0..8d913438d 100644 --- a/ui/js/reducers/claims.js +++ b/ui/js/reducers/claims.js @@ -2,7 +2,14 @@ import * as types from "constants/action_types"; import lbryuri from "lbryuri"; const reducers = {}; -const defaultState = {}; +const buildSupportTransaction = () => ({ + claim_id: undefined, + amount: undefined, +}); + +const defaultState = { + supportTransaction: buildSupportTransaction(), +}; reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) { const { uri, certificate, claim } = action.data; @@ -190,6 +197,55 @@ reducers[types.CREATE_CHANNEL_COMPLETED] = function(state, action) { }); }; +reducers[types.SET_SUPPORT_AMOUNT] = function(state, action) { + const oldDraft = state.supportTransaction; + const newDraft = Object.assign({}, oldDraft, { + amount: parseFloat(action.data.amount), + }); + + return Object.assign({}, state, { + supportTransaction: newDraft, + }); +}; + +reducers[types.SET_SUPPORT_CLAIMID] = function(state, action) { + const oldDraft = state.supportTransaction; + const newDraft = Object.assign({}, oldDraft, { + claim_id: action.data.claim_id, + }); + + return Object.assign({}, state, { + supportTransaction: newDraft, + }); +}; + +reducers[types.SUPPORT_TRANSACTION_STARTED] = function(state, action) { + const newSupportTransaction = Object.assign({}, state.supportTransaction, { + sendingSupport: true, + }); + + return Object.assign({}, state, { + supportTransaction: newSupportTransaction, + }); +}; + +reducers[types.SUPPORT_TRANSACTION_COMPLETED] = function(state, action) { + return Object.assign({}, state, { + supportTransaction: buildSupportTransaction(), + }); +}; + +reducers[types.SUPPORT_TRANSACTION_FAILED] = function(state, action) { + const newSupportTransaction = Object.assign({}, state.supportTransaction, { + sendingSupport: false, + error: action.data.error, + }); + + return Object.assign({}, state, { + supportTransaction: newSupportTransaction, + }); +}; + export default function reducer(state = defaultState, action) { const handler = reducers[action.type]; if (handler) return handler(state, action); diff --git a/ui/js/selectors/claims.js b/ui/js/selectors/claims.js index 2c4b4b511..4676eb77a 100644 --- a/ui/js/selectors/claims.js +++ b/ui/js/selectors/claims.js @@ -215,3 +215,13 @@ export const selectMyChannelClaims = createSelector( return claims; } ); + +export const selectSupportTransaction = createSelector( + _selectState, + state => state.supportTransaction || {} +); + +export const selectSupportTransactionAmount = createSelector( + selectSupportTransaction, + supportTxAmount => supportTxAmount.amount +); -- 2.45.2 From de4057860867125d6dc9aa7d23beee4d07a4d848 Mon Sep 17 00:00:00 2001 From: hackrush Date: Mon, 14 Aug 2017 15:13:40 +0530 Subject: [PATCH 10/21] Passing params directly w/o using redux store --- ui/js/actions/claims.js | 28 ++++--------------------- ui/js/component/tipLink/index.js | 10 ++------- ui/js/component/tipLink/view.jsx | 4 +--- ui/js/constants/action_types.js | 2 -- ui/js/reducers/claims.js | 35 ++------------------------------ ui/js/selectors/claims.js | 10 --------- 6 files changed, 9 insertions(+), 80 deletions(-) diff --git a/ui/js/actions/claims.js b/ui/js/actions/claims.js index 5d72a9f5f..46557da57 100644 --- a/ui/js/actions/claims.js +++ b/ui/js/actions/claims.js @@ -1,21 +1,15 @@ import lbry from "lbry"; import { selectBalance } from "selectors/wallet"; -import { - selectSupportTransaction, - selectSupportTransactionAmount, -} from "selectors/claims"; import { doOpenModal, doShowSnackBar } from "actions/app"; import * as types from "constants/action_types"; import * as modals from "constants/modal_types"; -export function doSendSupport() { +export function doSendSupport(amount, claim_id) { return function(dispatch, getState) { const state = getState(); - const supportTx = selectSupportTransaction(state); const balance = selectBalance(state); - const amount = selectSupportTransactionAmount(state); - if (balance - amount < 1) { + if (balance - amount <= 0) { return dispatch(doOpenModal(modals.INSUFFICIENT_BALANCE)); } @@ -54,23 +48,9 @@ export function doSendSupport() { lbry .claim_send_tip({ - claim_id: supportTx.claim_id, - amount: supportTx.amount, + claim_id: claim_id, + amount: amount, }) .then(successCallback, errorCallback); }; } - -export function doSetSupportAmount(amount) { - return { - type: types.SET_SUPPORT_AMOUNT, - data: { amount }, - }; -} - -export function doSetSupportClaimID(claim_id) { - return { - type: types.SET_SUPPORT_CLAIMID, - data: { claim_id }, - }; -} diff --git a/ui/js/component/tipLink/index.js b/ui/js/component/tipLink/index.js index b969bfb57..b43f225ac 100644 --- a/ui/js/component/tipLink/index.js +++ b/ui/js/component/tipLink/index.js @@ -1,18 +1,12 @@ import React from "react"; import { connect } from "react-redux"; -import { - doSendSupport, - doSetSupportAmount, - doSetSupportClaimID, -} from "actions/claims"; +import { doSendSupport } from "actions/claims"; import TipLink from "./view"; const select = state => ({}); const perform = dispatch => ({ - sendSupport: () => dispatch(doSendSupport()), - setAmount: amount => dispatch(doSetSupportAmount(amount)), - setClaimID: claim_id => dispatch(doSetSupportClaimID(claim_id)), + sendSupport: (amount, claim_id) => dispatch(doSendSupport(amount, claim_id)), }); export default connect(select, perform)(TipLink); diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx index 295afc3db..432e24004 100644 --- a/ui/js/component/tipLink/view.jsx +++ b/ui/js/component/tipLink/view.jsx @@ -21,9 +21,7 @@ class TipLink extends React.PureComponent { let claim_id = this.props.claim_id; let amount = this.state.feeAmount; - this.props.setClaimID(claim_id); - this.props.setAmount(amount); - this.props.sendSupport(); + this.props.sendSupport(amount, claim_id); this.props.onTipHide(); } diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index 8d53d0806..6333ab11c 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -115,8 +115,6 @@ export const CLAIM_REWARD_CLEAR_ERROR = "CLAIM_REWARD_CLEAR_ERROR"; export const FETCH_REWARD_CONTENT_COMPLETED = "FETCH_REWARD_CONTENT_COMPLETED"; // Supports -export const SET_SUPPORT_CLAIMID = "SET_SUPPORT_CLAIMID"; -export const SET_SUPPORT_AMOUNT = "SET_SUPPORT_AMOUNT"; export const SUPPORT_TRANSACTION_STARTED = "SUPPORT_TRANSACTION_STARTED"; export const SUPPORT_TRANSACTION_COMPLETED = "SUPPORT_TRANSACTION_COMPLETED"; export const SUPPORT_TRANSACTION_FAILED = "SUPPORT_TRANSACTION_FAILED"; diff --git a/ui/js/reducers/claims.js b/ui/js/reducers/claims.js index 8d913438d..46a0db309 100644 --- a/ui/js/reducers/claims.js +++ b/ui/js/reducers/claims.js @@ -2,14 +2,7 @@ import * as types from "constants/action_types"; import lbryuri from "lbryuri"; const reducers = {}; -const buildSupportTransaction = () => ({ - claim_id: undefined, - amount: undefined, -}); - -const defaultState = { - supportTransaction: buildSupportTransaction(), -}; +const defaultState = {}; reducers[types.RESOLVE_URI_COMPLETED] = function(state, action) { const { uri, certificate, claim } = action.data; @@ -197,28 +190,6 @@ reducers[types.CREATE_CHANNEL_COMPLETED] = function(state, action) { }); }; -reducers[types.SET_SUPPORT_AMOUNT] = function(state, action) { - const oldDraft = state.supportTransaction; - const newDraft = Object.assign({}, oldDraft, { - amount: parseFloat(action.data.amount), - }); - - return Object.assign({}, state, { - supportTransaction: newDraft, - }); -}; - -reducers[types.SET_SUPPORT_CLAIMID] = function(state, action) { - const oldDraft = state.supportTransaction; - const newDraft = Object.assign({}, oldDraft, { - claim_id: action.data.claim_id, - }); - - return Object.assign({}, state, { - supportTransaction: newDraft, - }); -}; - reducers[types.SUPPORT_TRANSACTION_STARTED] = function(state, action) { const newSupportTransaction = Object.assign({}, state.supportTransaction, { sendingSupport: true, @@ -230,9 +201,7 @@ reducers[types.SUPPORT_TRANSACTION_STARTED] = function(state, action) { }; reducers[types.SUPPORT_TRANSACTION_COMPLETED] = function(state, action) { - return Object.assign({}, state, { - supportTransaction: buildSupportTransaction(), - }); + return Object.assign({}, state); }; reducers[types.SUPPORT_TRANSACTION_FAILED] = function(state, action) { diff --git a/ui/js/selectors/claims.js b/ui/js/selectors/claims.js index 4676eb77a..2c4b4b511 100644 --- a/ui/js/selectors/claims.js +++ b/ui/js/selectors/claims.js @@ -215,13 +215,3 @@ export const selectMyChannelClaims = createSelector( return claims; } ); - -export const selectSupportTransaction = createSelector( - _selectState, - state => state.supportTransaction || {} -); - -export const selectSupportTransactionAmount = createSelector( - selectSupportTransaction, - supportTxAmount => supportTxAmount.amount -); -- 2.45.2 From a2cc9afe0504b707b1eb476c10b1bab185f59968 Mon Sep 17 00:00:00 2001 From: hackrush Date: Sun, 20 Aug 2017 15:21:57 +0530 Subject: [PATCH 11/21] Displays additional fields in the transaction list --- ui/js/actions/claims.js | 2 +- ui/js/component/transactionList/index.js | 2 ++ ui/js/component/transactionList/view.jsx | 30 +++++++++++++++++++++++- ui/js/selectors/wallet.js | 4 ++++ 4 files changed, 36 insertions(+), 2 deletions(-) diff --git a/ui/js/actions/claims.js b/ui/js/actions/claims.js index 46557da57..71f94852c 100644 --- a/ui/js/actions/claims.js +++ b/ui/js/actions/claims.js @@ -47,7 +47,7 @@ export function doSendSupport(amount, claim_id) { }; lbry - .claim_send_tip({ + .wallet_send({ claim_id: claim_id, amount: amount, }) diff --git a/ui/js/component/transactionList/index.js b/ui/js/component/transactionList/index.js index 7e15a67b4..c650e9eac 100644 --- a/ui/js/component/transactionList/index.js +++ b/ui/js/component/transactionList/index.js @@ -1,5 +1,6 @@ import React from "react"; import { connect } from "react-redux"; +import { doNavigate } from "actions/app"; import { doFetchTransactions } from "actions/wallet"; import { selectBalance, @@ -15,6 +16,7 @@ const select = state => ({ }); const perform = dispatch => ({ + navigate: (path, params) => dispatch(doNavigate(path, params)), fetchTransactions: () => dispatch(doFetchTransactions()), }); diff --git a/ui/js/component/transactionList/view.jsx b/ui/js/component/transactionList/view.jsx index db913eea6..6879e3349 100644 --- a/ui/js/component/transactionList/view.jsx +++ b/ui/js/component/transactionList/view.jsx @@ -7,13 +7,38 @@ class TransactionList extends React.PureComponent { } render() { - const { fetchingTransactions, transactionItems } = this.props; + const { fetchingTransactions, transactionItems, navigate } = this.props; + + function findTypeOfTx(type, is_tip) { + if (is_tip && type === "support") return "tip"; + else return type; + } + + function getClaimLink(claim_name, claim_id) { + if (claim_id !== "----" && claim_name !== "----") { + let uri = `lbry://${claim_name}#${claim_id}`; + + return ( + + navigate("/show", { uri })} + > + {claim_name} + + + ); + } + + return {__("N/A")}; + } const rows = []; if (transactionItems.length > 0) { transactionItems.forEach(function(item) { rows.push( + {findTypeOfTx(item.type, item.is_tip)} {(item.amount > 0 ? "+" : "") + item.amount} {item.date @@ -25,6 +50,7 @@ class TransactionList extends React.PureComponent { ? item.date.toLocaleTimeString() : {__("(Transaction pending)")}} + {getClaimLink(item.claim_name, item.claim_id)} + {__("Type")} {__("Amount")} {__("Date")} {__("Time")} + {__("Claim")} {__("Transaction")} diff --git a/ui/js/selectors/wallet.js b/ui/js/selectors/wallet.js index 1027bb6e7..f5aa533d2 100644 --- a/ui/js/selectors/wallet.js +++ b/ui/js/selectors/wallet.js @@ -29,6 +29,10 @@ export const selectTransactionItems = createSelector( id: txid, date: tx.timestamp ? new Date(parseInt(tx.timestamp) * 1000) : null, amount: parseFloat(tx.value), + type: tx.type, + claim_id: tx.claim_id, + claim_name: tx.claim_name, + is_tip: tx.is_tip, }); }); return transactionItems.reverse(); -- 2.45.2 From 0054723ed6ac72aa9f821c05fd30ee0e02970d34 Mon Sep 17 00:00:00 2001 From: hackrush Date: Fri, 25 Aug 2017 18:56:43 +0530 Subject: [PATCH 12/21] Added Fee column --- ui/js/component/transactionList/view.jsx | 6 ++++-- ui/js/selectors/wallet.js | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/ui/js/component/transactionList/view.jsx b/ui/js/component/transactionList/view.jsx index 6879e3349..5b06f5f8f 100644 --- a/ui/js/component/transactionList/view.jsx +++ b/ui/js/component/transactionList/view.jsx @@ -10,12 +10,12 @@ class TransactionList extends React.PureComponent { const { fetchingTransactions, transactionItems, navigate } = this.props; function findTypeOfTx(type, is_tip) { - if (is_tip && type === "support") return "tip"; + if (is_tip && type === "Support") return "Tip"; else return type; } function getClaimLink(claim_name, claim_id) { - if (claim_id !== "----" && claim_name !== "----") { + if (claim_id !== "" && claim_name !== "") { let uri = `lbry://${claim_name}#${claim_id}`; return ( @@ -40,6 +40,7 @@ class TransactionList extends React.PureComponent { {findTypeOfTx(item.type, item.is_tip)} {(item.amount > 0 ? "+" : "") + item.amount} + {item.fee} {item.date ? item.date.toLocaleDateString() @@ -81,6 +82,7 @@ class TransactionList extends React.PureComponent { {__("Type")} {__("Amount")} + {__("Fee")} {__("Date")} {__("Time")} {__("Claim")} diff --git a/ui/js/selectors/wallet.js b/ui/js/selectors/wallet.js index f5aa533d2..6637c8bff 100644 --- a/ui/js/selectors/wallet.js +++ b/ui/js/selectors/wallet.js @@ -30,6 +30,7 @@ export const selectTransactionItems = createSelector( date: tx.timestamp ? new Date(parseInt(tx.timestamp) * 1000) : null, amount: parseFloat(tx.value), type: tx.type, + fee: tx.fee, claim_id: tx.claim_id, claim_name: tx.claim_name, is_tip: tx.is_tip, -- 2.45.2 From e8c5ba5536f445b99e221ff4828e4d03eec62a1d Mon Sep 17 00:00:00 2001 From: hackrush Date: Fri, 25 Aug 2017 23:33:33 +0530 Subject: [PATCH 13/21] Tipping UI is rendered in FilePage --- ui/js/component/fileActions/view.jsx | 26 +++----- ui/js/component/tipLink/view.jsx | 92 ++++++++++------------------ ui/js/page/filePage/view.jsx | 38 +++++++++++- 3 files changed, 74 insertions(+), 82 deletions(-) diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index 1b0c2670a..cd5700e86 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -1,7 +1,6 @@ import React from "react"; import { Icon, BusyMessage } from "component/common"; import FilePrice from "component/filePrice"; -import TipLink from "component/tipLink"; import { Modal } from "component/modal"; import Link from "component/link"; import { ToolTip } from "component/tooltip"; @@ -14,7 +13,6 @@ class FileActions extends React.PureComponent { super(props); this.state = { forceShowActions: false, - showTipBox: false, }; } @@ -59,16 +57,8 @@ class FileActions extends React.PureComponent { this.props.loadVideo(this.props.uri); } - handleTipShow() { - this.setState({ - showTipBox: true, - }); - } - - handleTipHide() { - this.setState({ - showTipBox: false, - }); + handleSupportButtonClicked() { + this.props.onTipShow(); } render() { @@ -90,8 +80,6 @@ class FileActions extends React.PureComponent { claimInfo, } = this.props; - const { showTipBox } = this.state; - const metadata = fileInfo ? fileInfo.metadata : null, openInFolderMessage = platform.startsWith("Mac") ? __("Open in Finder") @@ -183,11 +171,11 @@ class FileActions extends React.PureComponent { return (
{showTipBox ? "" : content} - {showMenu && !showTipBox ? diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx index 432e24004..4fbd111c3 100644 --- a/ui/js/component/tipLink/view.jsx +++ b/ui/js/component/tipLink/view.jsx @@ -1,28 +1,20 @@ import React from "react"; import Link from "component/link"; -import FormFieldPrice from "component/formFieldPrice"; +import { FormRow } from "component/form"; class TipLink extends React.PureComponent { constructor(props) { super(props); this.state = { - feeAmount: "1.00", - currency: "LBC", + tipAmount: "1.00", }; } - handleSupportButtonClicked() { - this.resetDefaults(); - this.props.onTipShow(); - } - handleSendButtonClicked() { let claim_id = this.props.claim_id; - let amount = this.state.feeAmount; - + let amount = this.state.tipAmount; this.props.sendSupport(amount, claim_id); - this.props.onTipHide(); } @@ -30,61 +22,41 @@ class TipLink extends React.PureComponent { this.props.onTipHide(); } - handleSupportPriceChange(newValue) { + handleSupportPriceChange(event) { this.setState({ - feeAmount: newValue.amount, - feeCurrency: newValue.currency, - }); - } - - resetDefaults() { - this.setState({ - feeAmount: "1.00", - currency: "LBC", + tipAmount: event.target.value, }); } render() { - const { showTipBox } = this.props; - const { feeAmount, currency } = this.state; - - let tipLink = ( - - ); - - let tipBox = ( - - this.handleSupportPriceChange(value)} - defaultValue={{ amount: feeAmount, currency: currency }} - /> - - -
- {__("This sends the entered amount of LBCs to the publisher.")} -
- - ); - return ( -
- {showTipBox ? tipBox : tipLink} +
+
+

{__("Support Claim")}

+
+
+ this.handleSupportPriceChange(event)} + /> +
+
+ + +
); } diff --git a/ui/js/page/filePage/view.jsx b/ui/js/page/filePage/view.jsx index 3ca23aadc..d3c633015 100644 --- a/ui/js/page/filePage/view.jsx +++ b/ui/js/page/filePage/view.jsx @@ -3,6 +3,7 @@ import ReactMarkdown from "react-markdown"; import lbry from "lbry.js"; import lbryuri from "lbryuri.js"; import Video from "component/video"; +import TipLink from "component/tipLink"; import { Thumbnail } from "component/common"; import FilePrice from "component/filePrice"; import FileActions from "component/fileActions"; @@ -33,6 +34,13 @@ const FormatItem = props => { }; class FilePage extends React.PureComponent { + constructor(props) { + super(props); + this.state = { + showTipBox: false, + }; + } + componentDidMount() { this.fetchFileInfo(this.props); this.fetchCostInfo(this.props); @@ -54,6 +62,18 @@ class FilePage extends React.PureComponent { } } + handleTipShow() { + this.setState({ + showTipBox: true, + }); + } + + handleTipHide() { + this.setState({ + showTipBox: false, + }); + } + render() { const { claim, @@ -64,6 +84,8 @@ class FilePage extends React.PureComponent { rewardedContentClaimIds, } = this.props; + const { showTipBox } = this.state; + if (!claim || !metadata) { return ( {__("Empty claim or metadata info.")} @@ -111,7 +133,7 @@ class FilePage extends React.PureComponent { {!fileInfo || fileInfo.written_bytes <= 0 ? - {isRewardContent && {" "} } + {isRewardContent && {" "}} : null}

{title}

@@ -126,7 +148,10 @@ class FilePage extends React.PureComponent { : uriIndicator}
- +
@@ -137,11 +162,18 @@ class FilePage extends React.PureComponent { />
- {metadata + {metadata && !showTipBox ?
: ""} + {showTipBox + ? + : ""}
Date: Sat, 26 Aug 2017 00:11:31 +0530 Subject: [PATCH 14/21] Fix the Mega Breaking change --- ui/js/component/fileActions/view.jsx | 4 ++-- ui/js/component/tipLink/view.jsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index cd5700e86..cd2df769c 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -170,14 +170,14 @@ class FileActions extends React.PureComponent { return (
- {showTipBox ? "" : content} + {content} - {showMenu && !showTipBox + {showMenu ? Date: Sat, 26 Aug 2017 00:55:53 +0530 Subject: [PATCH 15/21] Removed useless css --- ui/scss/component/_form-field.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index a6631c0f5..9dee7240b 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -165,8 +165,4 @@ input[type="text"].input-copyable { .form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll { height: auto; -} - -.form-field--tip { - padding-right: 15px; } \ No newline at end of file -- 2.45.2 From b9735249015c0a09745b059a9aeea94754b38616 Mon Sep 17 00:00:00 2001 From: hackrush Date: Thu, 31 Aug 2017 09:45:13 +0530 Subject: [PATCH 16/21] Fixed modals --- ui/js/modal/modalInsufficientBalance/index.js | 16 ++++++++++++ ui/js/modal/modalInsufficientBalance/view.jsx | 26 +++++++++++++++++++ ui/js/modal/modalRouter/view.jsx | 8 +++++- ui/js/modal/modalTransactionFailed/index.js | 12 +++++++++ ui/js/modal/modalTransactionFailed/view.jsx | 20 ++++++++++++++ 5 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 ui/js/modal/modalInsufficientBalance/index.js create mode 100644 ui/js/modal/modalInsufficientBalance/view.jsx create mode 100644 ui/js/modal/modalTransactionFailed/index.js create mode 100644 ui/js/modal/modalTransactionFailed/view.jsx diff --git a/ui/js/modal/modalInsufficientBalance/index.js b/ui/js/modal/modalInsufficientBalance/index.js new file mode 100644 index 000000000..c56232caf --- /dev/null +++ b/ui/js/modal/modalInsufficientBalance/index.js @@ -0,0 +1,16 @@ +import React from "react"; +import { connect } from "react-redux"; +import { doCloseModal, doNavigate } from "actions/app"; +import ModalInsufficientBalance from "./view"; + +const select = state => ({}); + +const perform = dispatch => ({ + addBalance: () => { + dispatch(doNavigate("/wallet")); + dispatch(doCloseModal()); + }, + closeModal: () => dispatch(doCloseModal()), +}); + +export default connect(select, perform)(ModalInsufficientBalance); diff --git a/ui/js/modal/modalInsufficientBalance/view.jsx b/ui/js/modal/modalInsufficientBalance/view.jsx new file mode 100644 index 000000000..d1287d9c5 --- /dev/null +++ b/ui/js/modal/modalInsufficientBalance/view.jsx @@ -0,0 +1,26 @@ +import React from "react"; +import { Modal } from "modal/modal"; + +class ModalInsufficientBalance extends React.PureComponent { + render() { + const { addBalance, closeModal } = this.props; + + return ( + + {__( + "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet." + )} + + ); + } +} + +export default ModalInsufficientBalance; diff --git a/ui/js/modal/modalRouter/view.jsx b/ui/js/modal/modalRouter/view.jsx index d2280821e..6d8ca4017 100644 --- a/ui/js/modal/modalRouter/view.jsx +++ b/ui/js/modal/modalRouter/view.jsx @@ -6,8 +6,10 @@ import ModalInsufficientCredits from "modal/modalInsufficientCredits"; import ModalUpgrade from "modal/modalUpgrade"; import ModalWelcome from "modal/modalWelcome"; import ModalFirstReward from "modal/modalFirstReward"; -import * as modals from "constants/modal_types"; import ModalCreditIntro from "modal/modalCreditIntro"; +import ModalTransactionFailed from "modal/modalTransactionFailed"; +import ModalInsufficientBalance from "modal/modalInsufficientBalance"; +import * as modals from "constants/modal_types"; class ModalRouter extends React.PureComponent { componentWillMount() { @@ -51,6 +53,10 @@ class ModalRouter extends React.PureComponent { return ; case modals.CREDIT_INTRO: return ; + case modals.TRANSACTION_FAILED: + return ; + case modals.INSUFFICIENT_BALANCE: + return ; default: return null; } diff --git a/ui/js/modal/modalTransactionFailed/index.js b/ui/js/modal/modalTransactionFailed/index.js new file mode 100644 index 000000000..4b370a7c8 --- /dev/null +++ b/ui/js/modal/modalTransactionFailed/index.js @@ -0,0 +1,12 @@ +import React from "react"; +import { connect } from "react-redux"; +import { doCloseModal } from "actions/app"; +import ModalTransactionFailed from "./view"; + +const select = state => ({}); + +const perform = dispatch => ({ + closeModal: () => dispatch(doCloseModal()), +}); + +export default connect(select, perform)(ModalTransactionFailed); diff --git a/ui/js/modal/modalTransactionFailed/view.jsx b/ui/js/modal/modalTransactionFailed/view.jsx new file mode 100644 index 000000000..b2d4a3558 --- /dev/null +++ b/ui/js/modal/modalTransactionFailed/view.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import { Modal } from "modal/modal"; + +class ModalTransactionFailed extends React.PureComponent { + render() { + const { closeModal } = this.props; + + return ( + + {__("Something went wrong")}: + + ); + } +} + +export default ModalTransactionFailed; -- 2.45.2 From 997c8930c1a7662fb6babf95fe015496639abc7b Mon Sep 17 00:00:00 2001 From: hackrush Date: Fri, 1 Sep 2017 21:37:06 +0530 Subject: [PATCH 17/21] Fixed the feature breaking change, I don't how I could have skipped this --- ui/js/page/file/view.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/js/page/file/view.jsx b/ui/js/page/file/view.jsx index d3c633015..a77042ff3 100644 --- a/ui/js/page/file/view.jsx +++ b/ui/js/page/file/view.jsx @@ -171,7 +171,7 @@ class FilePage extends React.PureComponent { ? : ""}
-- 2.45.2 From 5b96039b99489fc8b567a665a3f18710f4cf545a Mon Sep 17 00:00:00 2001 From: hackrush Date: Sat, 2 Sep 2017 21:06:27 +0530 Subject: [PATCH 18/21] Transaction list now displays additional information Removed older modal files --- ui/js/actions/wallet.js | 2 +- ui/js/component/bodyTransactionList/index.js | 5 + ui/js/component/bodyTransactionList/view.jsx | 97 +++++++++++++++++++ .../component/headerTransactionList/index.js | 5 + .../component/headerTransactionList/view.jsx | 20 ++++ .../modalInsufficientBalance/index.js | 16 --- .../modalInsufficientBalance/view.jsx | 26 ----- .../component/modalTransactionFailed/index.js | 12 --- .../component/modalTransactionFailed/view.jsx | 20 ---- ui/js/component/transactionList/view.jsx | 95 +++++++++--------- ui/js/selectors/wallet.js | 7 +- 11 files changed, 178 insertions(+), 127 deletions(-) create mode 100644 ui/js/component/bodyTransactionList/index.js create mode 100644 ui/js/component/bodyTransactionList/view.jsx create mode 100644 ui/js/component/headerTransactionList/index.js create mode 100644 ui/js/component/headerTransactionList/view.jsx delete mode 100644 ui/js/component/modalInsufficientBalance/index.js delete mode 100644 ui/js/component/modalInsufficientBalance/view.jsx delete mode 100644 ui/js/component/modalTransactionFailed/index.js delete mode 100644 ui/js/component/modalTransactionFailed/view.jsx diff --git a/ui/js/actions/wallet.js b/ui/js/actions/wallet.js index 364c7e9d5..2575c5285 100644 --- a/ui/js/actions/wallet.js +++ b/ui/js/actions/wallet.js @@ -23,7 +23,7 @@ export function doFetchTransactions() { type: types.FETCH_TRANSACTIONS_STARTED, }); - lbry.transaction_list().then(results => { + lbry.transaction_list({ include_tip_info: true }).then(results => { dispatch({ type: types.FETCH_TRANSACTIONS_COMPLETED, data: { diff --git a/ui/js/component/bodyTransactionList/index.js b/ui/js/component/bodyTransactionList/index.js new file mode 100644 index 000000000..48db597ed --- /dev/null +++ b/ui/js/component/bodyTransactionList/index.js @@ -0,0 +1,5 @@ +import React from "react"; +import { connect } from "react-redux"; +import TransactionTableBody from "./view"; + +export default connect(null, null)(TransactionTableBody); diff --git a/ui/js/component/bodyTransactionList/view.jsx b/ui/js/component/bodyTransactionList/view.jsx new file mode 100644 index 000000000..dcabf00ec --- /dev/null +++ b/ui/js/component/bodyTransactionList/view.jsx @@ -0,0 +1,97 @@ +import React from "react"; +import LinkTransaction from "component/linkTransaction"; +import { CreditAmount } from "component/common"; + +class TransactionTableBody extends React.PureComponent { + constructor(props) { + super(props); + } + + filterList(transaction) { + if (this.filter == "claim") { + return transaction.claim_info.length > 0; + } else if (this.filter == "support") { + return transaction.support_info.length > 0; + } else if (this.filter == "update") { + return transaction.update_info.length > 0; + } else { + return transaction; + } + } + + renderBody(transaction, index) { + const txid = transaction.id; + const date = transaction.date; + const fee = transaction.fee; + const filter = this.filter; + + return filter != "unfiltered" + ? transaction[`${filter}_info`].map(item => { + return ( + + + {date + ? date.toLocaleDateString() + " " + date.toLocaleTimeString() + : + {__("(Transaction pending)")} + } + + + {" "} + + + {" "} + + + {item.claim_name} + + + + + + ); + }) + : + + {date + ? date.toLocaleDateString() + " " + date.toLocaleTimeString() + : + {__("(Transaction pending)")} + } + + + {" "} + + + {" "} + + + + + ; + } + + render() { + const { transactions, filter } = this.props; + + return ( + + {transactions + .filter(this.filterList, this.props) + .map(this.renderBody, this.props)} + + ); + } +} + +export default TransactionTableBody; diff --git a/ui/js/component/headerTransactionList/index.js b/ui/js/component/headerTransactionList/index.js new file mode 100644 index 000000000..60ae880d7 --- /dev/null +++ b/ui/js/component/headerTransactionList/index.js @@ -0,0 +1,5 @@ +import React from "react"; +import { connect } from "react-redux"; +import TransactionTableHeader from "./view"; + +export default connect(null, null)(TransactionTableHeader); diff --git a/ui/js/component/headerTransactionList/view.jsx b/ui/js/component/headerTransactionList/view.jsx new file mode 100644 index 000000000..23fd61965 --- /dev/null +++ b/ui/js/component/headerTransactionList/view.jsx @@ -0,0 +1,20 @@ +import React from "react"; + +class TransactionTableHeader extends React.PureComponent { + render() { + const { filter } = this.props; + return ( + + + {__("Date")} + {__("Amount")} + {__("Fee")} + {filter != "unfiltered" && {__("Claim Name")} } + {__("Transaction")} + + + ); + } +} + +export default TransactionTableHeader; diff --git a/ui/js/component/modalInsufficientBalance/index.js b/ui/js/component/modalInsufficientBalance/index.js deleted file mode 100644 index c56232caf..000000000 --- a/ui/js/component/modalInsufficientBalance/index.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal, doNavigate } from "actions/app"; -import ModalInsufficientBalance from "./view"; - -const select = state => ({}); - -const perform = dispatch => ({ - addBalance: () => { - dispatch(doNavigate("/wallet")); - dispatch(doCloseModal()); - }, - closeModal: () => dispatch(doCloseModal()), -}); - -export default connect(select, perform)(ModalInsufficientBalance); diff --git a/ui/js/component/modalInsufficientBalance/view.jsx b/ui/js/component/modalInsufficientBalance/view.jsx deleted file mode 100644 index f9ac56138..000000000 --- a/ui/js/component/modalInsufficientBalance/view.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { Modal } from "component/modal"; - -class ModalInsufficientBalance extends React.PureComponent { - render() { - const { addBalance, closeModal } = this.props; - - return ( - - {__( - "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet." - )} - - ); - } -} - -export default ModalInsufficientBalance; diff --git a/ui/js/component/modalTransactionFailed/index.js b/ui/js/component/modalTransactionFailed/index.js deleted file mode 100644 index 4b370a7c8..000000000 --- a/ui/js/component/modalTransactionFailed/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doCloseModal } from "actions/app"; -import ModalTransactionFailed from "./view"; - -const select = state => ({}); - -const perform = dispatch => ({ - closeModal: () => dispatch(doCloseModal()), -}); - -export default connect(select, perform)(ModalTransactionFailed); diff --git a/ui/js/component/modalTransactionFailed/view.jsx b/ui/js/component/modalTransactionFailed/view.jsx deleted file mode 100644 index f22038e78..000000000 --- a/ui/js/component/modalTransactionFailed/view.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import { Modal } from "component/modal"; - -class ModalTransactionFailed extends React.PureComponent { - render() { - const { closeModal } = this.props; - - return ( - - {__("Something went wrong")}: - - ); - } -} - -export default ModalTransactionFailed; diff --git a/ui/js/component/transactionList/view.jsx b/ui/js/component/transactionList/view.jsx index 0ad7f4eeb..374c6887d 100644 --- a/ui/js/component/transactionList/view.jsx +++ b/ui/js/component/transactionList/view.jsx @@ -1,57 +1,56 @@ import React from "react"; -import LinkTransaction from "component/linkTransaction"; -import { CreditAmount } from "component/common"; +import TransactionTableHeader from "component/headerTransactionList"; +import TransactionTableBody from "component/bodyTransactionList"; +import FormField from "component/formField"; -const TransactionList = props => { - const { emptyMessage, transactions } = props; +class TransactionList extends React.PureComponent { + constructor(props) { + super(props); + + this.state = { + filter: "unfiltered", + }; + } + + handleFilterChanged(event) { + this.setState({ + filter: event.target.value, + }); + } + + render() { + const { emptyMessage, transactions } = this.props; + const { filter } = this.state; + + if (!transactions || !transactions.length) { + return ( +
+ {emptyMessage || __("No transactions to list.")} +
+ ); + } - if (!transactions || !transactions.length) { return ( -
- {emptyMessage || __("No transactions to list.")} +
+ + {__("Filter")} {" "} + + + + + + + + + + +
); } - - return ( - - - - - - - - - - {transactions.map(item => { - return ( - - - - - - ); - })} - -
{__("Date")}{__("Amount")}{__("Transaction")}
- {item.date - ? item.date.toLocaleDateString() + - " " + - item.date.toLocaleTimeString() - : - {__("(Transaction pending)")} - } - - {" "} - - -
- ); -}; +} export default TransactionList; diff --git a/ui/js/selectors/wallet.js b/ui/js/selectors/wallet.js index dbf32639f..60e0dd1aa 100644 --- a/ui/js/selectors/wallet.js +++ b/ui/js/selectors/wallet.js @@ -28,11 +28,10 @@ export const selectTransactionItems = createSelector( id: txid, date: tx.timestamp ? new Date(parseInt(tx.timestamp) * 1000) : null, amount: parseFloat(tx.value), - type: tx.type, + claim_info: tx.claim_info, + support_info: tx.support_info, + update_info: tx.update_info, fee: tx.fee, - claim_id: tx.claim_id, - claim_name: tx.claim_name, - is_tip: tx.is_tip, }); }); return transactionItems.reverse(); -- 2.45.2 From 7a328f185a856fafb0ea5f77dac854bc11aadd0f Mon Sep 17 00:00:00 2001 From: hackrush Date: Sat, 2 Sep 2017 23:20:40 +0530 Subject: [PATCH 19/21] Clickable claims and filter for tips --- ui/js/component/bodyTransactionList/index.js | 7 +++- ui/js/component/bodyTransactionList/view.jsx | 41 ++++++++++++++++---- ui/js/component/transactionList/view.jsx | 7 ++-- 3 files changed, 43 insertions(+), 12 deletions(-) diff --git a/ui/js/component/bodyTransactionList/index.js b/ui/js/component/bodyTransactionList/index.js index 48db597ed..95fcdaf11 100644 --- a/ui/js/component/bodyTransactionList/index.js +++ b/ui/js/component/bodyTransactionList/index.js @@ -1,5 +1,10 @@ import React from "react"; import { connect } from "react-redux"; +import { doNavigate } from "actions/navigation"; import TransactionTableBody from "./view"; -export default connect(null, null)(TransactionTableBody); +const perform = dispatch => ({ + navigate: (path, params) => dispatch(doNavigate(path, params)), +}); + +export default connect(null, perform)(TransactionTableBody); diff --git a/ui/js/component/bodyTransactionList/view.jsx b/ui/js/component/bodyTransactionList/view.jsx index dcabf00ec..fa15d1619 100644 --- a/ui/js/component/bodyTransactionList/view.jsx +++ b/ui/js/component/bodyTransactionList/view.jsx @@ -7,23 +7,41 @@ class TransactionTableBody extends React.PureComponent { super(props); } + getClaimLink(claim_name, claim_id) { + let uri = `lbry://${claim_name}#${claim_id}`; + + return ( + this.props.navigate("/show", { uri })} + > + {claim_name} + + ); + } + filterList(transaction) { - if (this.filter == "claim") { + if (this.props.filter == "claim") { return transaction.claim_info.length > 0; - } else if (this.filter == "support") { + } else if (this.props.filter == "support") { return transaction.support_info.length > 0; - } else if (this.filter == "update") { + } else if (this.props.filter == "update") { return transaction.update_info.length > 0; } else { return transaction; } } - renderBody(transaction, index) { + renderBody(transaction) { const txid = transaction.id; const date = transaction.date; const fee = transaction.fee; - const filter = this.filter; + const filter = this.props.filter; + + if (filter == "tipSupport") + transaction["tipSupport_info"] = transaction["support_info"].filter( + tx => tx.is_tip + ); return filter != "unfiltered" ? transaction[`${filter}_info`].map(item => { @@ -48,7 +66,7 @@ class TransactionTableBody extends React.PureComponent { {" "} - {item.claim_name} + {this.getClaimLink(item.claim_name, item.claim_id)} @@ -81,14 +99,21 @@ class TransactionTableBody extends React.PureComponent { ; } + removeFeeTx(transaction) { + if (this.props.filter == "unfiltered") + return Math.abs(transaction.amount) != Math.abs(transaction.fee); + else return true; + } + render() { const { transactions, filter } = this.props; return ( {transactions - .filter(this.filterList, this.props) - .map(this.renderBody, this.props)} + .filter(this.filterList, this) + .filter(this.removeFeeTx, this) + .map(this.renderBody, this)} ); } diff --git a/ui/js/component/transactionList/view.jsx b/ui/js/component/transactionList/view.jsx index 374c6887d..361b54395 100644 --- a/ui/js/component/transactionList/view.jsx +++ b/ui/js/component/transactionList/view.jsx @@ -39,9 +39,10 @@ class TransactionList extends React.PureComponent { onChange={this.handleFilterChanged.bind(this)} > - - - + + + + -- 2.45.2 From f1bdb5e20d63d653398d9653409baf18c58366e7 Mon Sep 17 00:00:00 2001 From: hackrush Date: Sat, 2 Sep 2017 23:32:13 +0530 Subject: [PATCH 20/21] Removes inconsistencies in wallet.js and Insuff. Balance Modal --- ui/js/actions/wallet.js | 2 +- ui/js/modal/modalInsufficientBalance/view.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/js/actions/wallet.js b/ui/js/actions/wallet.js index 2575c5285..368247d16 100644 --- a/ui/js/actions/wallet.js +++ b/ui/js/actions/wallet.js @@ -73,7 +73,7 @@ export function doSendDraftTransaction() { const balance = selectBalance(state); const amount = selectDraftTransactionAmount(state); - if (balance - amount < 1) { + if (balance - amount <= 0) { return dispatch(doOpenModal(modals.INSUFFICIENT_BALANCE)); } diff --git a/ui/js/modal/modalInsufficientBalance/view.jsx b/ui/js/modal/modalInsufficientBalance/view.jsx index d1287d9c5..5b43583cd 100644 --- a/ui/js/modal/modalInsufficientBalance/view.jsx +++ b/ui/js/modal/modalInsufficientBalance/view.jsx @@ -16,7 +16,7 @@ class ModalInsufficientBalance extends React.PureComponent { onConfirmed={addBalance} > {__( - "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet." + "Insufficient balance: after this transaction you would have less than 0 LBCs in your wallet." )} ); -- 2.45.2 From 065d699a2df10e355b225644eb2685b7291fd9d6 Mon Sep 17 00:00:00 2001 From: hackrush Date: Mon, 4 Sep 2017 23:05:41 +0530 Subject: [PATCH 21/21] Small changes Clicking support hides everything below fileActions Title of form is Support now One line helper sentence Moved Tx related component to internal Unfiltered -> Show All -> All Claims -> Publishes Fee below Amount(class meta) Dropped Credits everywhere. --- ui/js/component/bodyTransactionList/index.js | 10 ---- ui/js/component/common.js | 7 ++- .../component/headerTransactionList/index.js | 5 -- ui/js/component/tipLink/view.jsx | 8 +++- ui/js/component/transactionList/index.js | 7 ++- .../internal/TransactionListBody.jsx} | 46 +++++++++++++------ .../internal/TransactionListHeader.jsx} | 3 +- ui/js/component/transactionList/view.jsx | 18 ++++++-- ui/js/page/file/view.jsx | 30 ++++++------ 9 files changed, 81 insertions(+), 53 deletions(-) delete mode 100644 ui/js/component/bodyTransactionList/index.js delete mode 100644 ui/js/component/headerTransactionList/index.js rename ui/js/component/{bodyTransactionList/view.jsx => transactionList/internal/TransactionListBody.jsx} (75%) rename ui/js/component/{headerTransactionList/view.jsx => transactionList/internal/TransactionListHeader.jsx} (85%) diff --git a/ui/js/component/bodyTransactionList/index.js b/ui/js/component/bodyTransactionList/index.js deleted file mode 100644 index 95fcdaf11..000000000 --- a/ui/js/component/bodyTransactionList/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import { doNavigate } from "actions/navigation"; -import TransactionTableBody from "./view"; - -const perform = dispatch => ({ - navigate: (path, params) => dispatch(doNavigate(path, params)), -}); - -export default connect(null, perform)(TransactionTableBody); diff --git a/ui/js/component/common.js b/ui/js/component/common.js index d92669262..8af8733c2 100644 --- a/ui/js/component/common.js +++ b/ui/js/component/common.js @@ -71,6 +71,7 @@ export class CreditAmount extends React.PureComponent { showFullPrice: React.PropTypes.bool, showPlus: React.PropTypes.bool, look: React.PropTypes.oneOf(["indicator", "plain"]), + fee: React.PropTypes.bool, }; static defaultProps = { @@ -81,6 +82,7 @@ export class CreditAmount extends React.PureComponent { showFree: false, showFullPrice: false, showPlus: false, + fee: false, }; render() { @@ -117,7 +119,10 @@ export class CreditAmount extends React.PureComponent { return ( diff --git a/ui/js/component/headerTransactionList/index.js b/ui/js/component/headerTransactionList/index.js deleted file mode 100644 index 60ae880d7..000000000 --- a/ui/js/component/headerTransactionList/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; -import { connect } from "react-redux"; -import TransactionTableHeader from "./view"; - -export default connect(null, null)(TransactionTableHeader); diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx index 03f7685ec..831806d48 100644 --- a/ui/js/component/tipLink/view.jsx +++ b/ui/js/component/tipLink/view.jsx @@ -32,7 +32,13 @@ class TipLink extends React.PureComponent { return (
-

{__("Support Claim")}

+

{__("Support")}

+
+
+ {__( + "Support the creator and the success of their content by sending a tip. " + )} +
({ + navigate: (path, params) => dispatch(doNavigate(path, params)), +}); + +export default connect(null, perform)(TransactionList); diff --git a/ui/js/component/bodyTransactionList/view.jsx b/ui/js/component/transactionList/internal/TransactionListBody.jsx similarity index 75% rename from ui/js/component/bodyTransactionList/view.jsx rename to ui/js/component/transactionList/internal/TransactionListBody.jsx index fa15d1619..12beb2e8d 100644 --- a/ui/js/component/bodyTransactionList/view.jsx +++ b/ui/js/component/transactionList/internal/TransactionListBody.jsx @@ -11,10 +11,7 @@ class TransactionTableBody extends React.PureComponent { let uri = `lbry://${claim_name}#${claim_id}`; return ( - this.props.navigate("/show", { uri })} - > + this.props.navigate(uri)}> {claim_name} ); @@ -37,6 +34,15 @@ class TransactionTableBody extends React.PureComponent { const date = transaction.date; const fee = transaction.fee; const filter = this.props.filter; + const options = { + weekday: "short", + year: "2-digit", + month: "short", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + }; if (filter == "tipSupport") transaction["tipSupport_info"] = transaction["support_info"].filter( @@ -49,7 +55,7 @@ class TransactionTableBody extends React.PureComponent {
- - - - + {filter != "unfiltered" && } diff --git a/ui/js/component/transactionList/view.jsx b/ui/js/component/transactionList/view.jsx index 361b54395..ee78e2acc 100644 --- a/ui/js/component/transactionList/view.jsx +++ b/ui/js/component/transactionList/view.jsx @@ -1,6 +1,6 @@ import React from "react"; -import TransactionTableHeader from "component/headerTransactionList"; -import TransactionTableBody from "component/bodyTransactionList"; +import TransactionTableHeader from "./internal/TransactionListHeader"; +import TransactionTableBody from "./internal/TransactionListBody"; import FormField from "component/formField"; class TransactionList extends React.PureComponent { @@ -18,6 +18,10 @@ class TransactionList extends React.PureComponent { }); } + handleClaimNameClicked(uri) { + this.props.navigate("/show", { uri }); + } + render() { const { emptyMessage, transactions } = this.props; const { filter } = this.state; @@ -38,8 +42,8 @@ class TransactionList extends React.PureComponent { type="select" onChange={this.handleFilterChanged.bind(this)} > - - + + @@ -47,7 +51,11 @@ class TransactionList extends React.PureComponent {
{date - ? date.toLocaleDateString() + " " + date.toLocaleTimeString() + ? date.toLocaleDateString("en-US", options) : {__("(Transaction pending)")} } @@ -58,12 +64,18 @@ class TransactionTableBody extends React.PureComponent { {" "} - - {" "} + /> +
+ 		{this.getClaimLink(item.claim_name, item.claim_id)} @@ -77,7 +89,7 @@ class TransactionTableBody extends React.PureComponent { :
{date - ? date.toLocaleDateString() + " " + date.toLocaleTimeString() + ? date.toLocaleDateString("en-US", options) : {__("(Transaction pending)")} } @@ -86,12 +98,18 @@ class TransactionTableBody extends React.PureComponent { {" "} - - {" "} + /> +
+ 		diff --git a/ui/js/component/headerTransactionList/view.jsx b/ui/js/component/transactionList/internal/TransactionListHeader.jsx similarity index 85% rename from ui/js/component/headerTransactionList/view.jsx rename to ui/js/component/transactionList/internal/TransactionListHeader.jsx index 23fd61965..52f735fb9 100644 --- a/ui/js/component/headerTransactionList/view.jsx +++ b/ui/js/component/transactionList/internal/TransactionListHeader.jsx @@ -7,8 +7,7 @@ class TransactionTableHeader extends React.PureComponent {
{__("Date")}{__("Amount")}{__("Fee")}{__("Amount(Fee)")} {__("Claim Name")} {__("Transaction")}
- +
); diff --git a/ui/js/page/file/view.jsx b/ui/js/page/file/view.jsx index a77042ff3..08568c5b5 100644 --- a/ui/js/page/file/view.jsx +++ b/ui/js/page/file/view.jsx @@ -154,13 +154,14 @@ class FilePage extends React.PureComponent { />
-
- -
+ {!showTipBox && +
+ +
} {metadata && !showTipBox ?
@@ -174,13 +175,14 @@ class FilePage extends React.PureComponent { claim_id={claim.claim_id} /> : ""} -
- -
+ {!showTipBox && +
+ +
}
); -- 2.45.2