From 7ce5d596b89aa7e3dbbf176aa8c2a46eca8c4c25 Mon Sep 17 00:00:00 2001
From: hackrush <atulshyan96@gmail.com>
Date: Sat, 29 Jul 2017 12:20:17 +0530
Subject: [PATCH] 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 && <ModalWelcome />}
         {modal == modals.FIRST_REWARD && <ModalFirstReward />}
         {modal == modals.AUTHENTICATION_FAILURE && <ModalAuthFailure />}
-        {modal == modals.TRANSACTION_SUCCESSFUL &&
-          <ModalTransactionSuccessful />}
         {modal == modals.TRANSACTION_FAILED && <ModalTransactionFailed />}
         {modal == modals.INSUFFICIENT_BALANCE && <ModalInsufficientBalance />}
       </div>
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 (
-      <Modal
-        isOpen={true}
-        contentLabel={__("Transaction successful")}
-        onConfirmed={closeModal}
-      >
-        {__("Your transaction was successfully placed in the queue.")}
-      </Modal>
-    );
-  }
-}
-
-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 (
-    <span>
+    <span className={"form-field " + (isTip ? "form-field--tip " : " ")}>
       <FormField
         type="number"
         min={min}
diff --git a/ui/js/component/tipLink/view.jsx b/ui/js/component/tipLink/view.jsx
index 25740298a..3f710007f 100644
--- a/ui/js/component/tipLink/view.jsx
+++ b/ui/js/component/tipLink/view.jsx
@@ -14,6 +14,7 @@ class TipLink extends React.PureComponent {
   }
 
   handleTipPublisherButtonClicked() {
+    this.resetDefaults();
     this.props.onTipShow();
   }
 
@@ -44,6 +45,13 @@ class TipLink extends React.PureComponent {
     });
   }
 
+  resetDefaults() {
+    this.setState({
+      feeAmount: "1.00",
+      currency: "LBC",
+    });
+  }
+
   render() {
     const { showTipBox } = this.props;
 
@@ -59,15 +67,15 @@ class TipLink extends React.PureComponent {
     let tipBox = (
       <span>
         <PriceForm
+          isTip={true}
           min="0.01"
           placeholder="1.00"
           step="0.1"
           onFeeChange={event => this.handleFeeAmountChange(event)}
-          defaultFeeValue="1.00"
+          defaultFeeValue={this.state.feeAmount}
           onCurrencyChange={event => this.handleCurrencyChange(event)}
           defaultCurrencyValue="LBC"
         />
-        {__("  ")}
         <Link
           label={__("Tip")}
           button="primary"
diff --git a/ui/js/constants/modal_types.js b/ui/js/constants/modal_types.js
index 9c2d25af0..63568f6bd 100644
--- a/ui/js/constants/modal_types.js
+++ b/ui/js/constants/modal_types.js
@@ -7,6 +7,5 @@ export const UPGRADE = "upgrade";
 export const WELCOME = "welcome";
 export const FIRST_REWARD = "first_reward";
 export const AUTHENTICATION_FAILURE = "auth_failure";
-export const TRANSACTION_SUCCESSFUL = "transaction_successful";
 export const TRANSACTION_FAILED = "transaction_failed";
 export const INSUFFICIENT_BALANCE = "insufficient_balance";
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 9dee7240b..a6631c0f5 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -165,4 +165,8 @@ 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