Changed modals to use constants.

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

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 && <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/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);

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 (
+      <Modal
+        isOpen={true}
+        type="confirm"
+        contentLabel={__("Not enough credits")}
+        confirmButtonLabel={__("Get Credits")}
+        abortButtonLabel={__("Cancel")}
+        onAborted={closeModal}
+        onConfirmed={addBalance}
+      >
+        {__(
+          "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet."
+        )}
+      </Modal>
+    );
+  }
+}
+
+export default ModalInsufficientBalance;

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

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 (
+      <Modal
+        isOpen={true}
+        contentLabel={__("Transaction failed")}
+        onConfirmed={closeModal}
+      >
+        {__("Something went wrong")}:
+      </Modal>
+    );
+  }
+}
+
+export default ModalTransactionFailed;

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

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 (
+      <Modal
+        isOpen={true}
+        contentLabel={__("Transaction successful")}
+        onConfirmed={closeModal}
+      >
+        {__("Your transaction was successfully placed in the queue.")}
+      </Modal>
+    );
+  }
+}
+
+export default ModalTransactionSuccessful;

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

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 (
       <div className="menu-container">
         {showTipBox ? tipBox : tipLink}
-        {modal == "insufficientBalance" &&
-          <Modal
-            isOpen={true}
-            contentLabel={__("Insufficient balance")}
-            onConfirmed={closeModal}
-          >
-            {__(
-              "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet."
-            )}
-          </Modal>}
-        {modal == "transactionSuccessful" &&
-          <Modal
-            isOpen={true}
-            contentLabel={__("Transaction successful")}
-            onConfirmed={closeModal}
-          >
-            {__(
-              "The publisher of the content was successfully tipped " +
-                this.state.feeAmount +
-                " LBC. Mahalo!"
-            )}
-          </Modal>}
-        {modal == "transactionFailed" &&
-          <Modal
-            isOpen={true}
-            contentLabel={__("Transaction failed")}
-            onConfirmed={closeModal}
-          >
-            {__("Something went wrong")}:
-          </Modal>}
       </div>
     );
   }

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 =>

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 (
     <section className="card">
@@ -52,32 +43,6 @@ const WalletSend = props => {
           <input type="submit" className="hidden" />
         </div>
       </form>
-      {modal == "insufficientBalance" &&
-        <Modal
-          isOpen={true}
-          contentLabel={__("Insufficient balance")}
-          onConfirmed={closeModal}
-        >
-          {__(
-            "Insufficient balance: after this transaction you would have less than 1 LBC in your wallet."
-          )}
-        </Modal>}
-      {modal == "transactionSuccessful" &&
-        <Modal
-          isOpen={true}
-          contentLabel={__("Transaction successful")}
-          onConfirmed={closeModal}
-        >
-          {__("Your transaction was successfully placed in the queue.")}
-        </Modal>}
-      {modal == "transactionFailed" &&
-        <Modal
-          isOpen={true}
-          contentLabel={__("Transaction failed")}
-          onConfirmed={closeModal}
-        >
-          {__("Something went wrong")}:
-        </Modal>}
     </section>
   );
 };

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";
+export const AUTHENTICATION_FAILURE = "auth_failure";
+export const TRANSACTION_SUCCESSFUL = "transaction_successful";
+export const TRANSACTION_FAILED = "transaction_failed";
+export const INSUFFICIENT_BALANCE = "insufficient_balance";