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

@@ -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,

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>

ui/js/component/modalTransactionSuccessful/index.js

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

ui/js/component/modalTransactionSuccessful/view.jsx

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

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}

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"

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

ui/scss/component/_form-field.scss

@@ -166,3 +166,7 @@ input[type="text"].input-copyable {
 .form-field__input.form-field__input-SimpleMDE .CodeMirror-scroll {
   height: auto;
 }
+
+.form-field--tip {
+  padding-right: 15px;
+}