Revert "move modals to app and use doToast/doError"

This reverts commit 24100fac06.

package.json

@@ -134,7 +134,7 @@
     "yarn": "^1.3"
   },
   "lbrySettings": {
-    "lbrynetDaemonVersion": "0.30.1rc1",
+    "lbrynetDaemonVersion": "0.30.0",
     "lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-OSNAME.zip",
     "lbrynetDaemonDir": "static/daemon",
     "lbrynetDaemonFileName": "lbrynet"

src/renderer/component/address/index.js

@@ -1,12 +1,12 @@
 // @flow
 
 import { connect } from 'react-redux';
-import { doToast } from 'lbry-redux';
+import { doNotify } from 'lbry-redux';
 import Address from './view';
 
 export default connect(
   null,
   {
-    doToast,
+    doNotify,
   }
 )(Address);

src/renderer/component/address/view.jsx

@@ -11,7 +11,8 @@ https://github.com/lbryio/lbry-desktop/issues/1945
 */
 type Props = {
   address: string,
-  doToast: ({ message: string }) => void,
+  noSnackbar: boolean,
+  doNotify: ({ message: string, displayType: Array<string> }) => void,
 };
 
 export default class Address extends React.PureComponent<Props> {
@@ -24,7 +25,7 @@ export default class Address extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 
   render() {
-    const { address, doToast } = this.props;
+    const { address, doNotify, noSnackbar } = this.props;
 
     return (
       <FormRow verticallyCentered padded stretch>
@@ -47,9 +48,12 @@ export default class Address extends React.PureComponent<Props> {
           icon={icons.CLIPBOARD}
           onClick={() => {
             clipboard.writeText(address);
-            doToast({
-              message: __('Address copied'),
-            });
+            if (!noSnackbar) {
+              doNotify({
+                message: __('Address copied'),
+                displayType: ['snackbar'],
+              });
+            }
           }}
         />
       </FormRow>

src/renderer/component/app/index.js

@@ -1,7 +1,8 @@
 import { connect } from 'react-redux';
-import { selectPageTitle, selectHistoryIndex, selectActiveHistoryEntry, doError } from 'lbry-redux';
+import { selectPageTitle, selectHistoryIndex, selectActiveHistoryEntry } from 'lbry-redux';
 import { doRecordScroll } from 'redux/actions/navigation';
 import { selectUser } from 'lbryinc';
+import { doAlertError } from 'redux/actions/app';
 import { selectThemePath } from 'redux/selectors/settings';
 import App from './view';
 
@@ -14,7 +15,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  alertError: errorList => dispatch(doError(errorList)),
+  alertError: errorList => dispatch(doAlertError(errorList)),
   recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)),
 });
 

src/renderer/component/copyableText/index.js

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
-import { doToast } from 'lbry-redux';
+import { doNotify } from 'lbry-redux';
 import CopyableText from './view';
 
 export default connect(
   null,
   {
-    doToast,
+    doNotify,
   }
 )(CopyableText);

src/renderer/component/copyableText/view.jsx

@@ -4,10 +4,15 @@ import { clipboard } from 'electron';
 import { FormRow } from 'component/common/form';
 import Button from 'component/button';
 import * as icons from 'constants/icons';
-
+/*
+noSnackbar added due to issue 1945
+https://github.com/lbryio/lbry-desktop/issues/1945
+"Snackbars and modals can't be displayed at the same time"
+*/
 type Props = {
   copyable: string,
-  doToast: ({ message: string }) => void,
+  noSnackbar: boolean,
+  doNotify: ({ message: string, displayType: Array<string> }) => void,
 };
 
 export default class CopyableText extends React.PureComponent<Props> {
@@ -20,7 +25,7 @@ export default class CopyableText extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 
   render() {
-    const { copyable, doToast, noSnackbar } = this.props;
+    const { copyable, doNotify, noSnackbar } = this.props;
 
     return (
       <FormRow verticallyCentered padded stretch>
@@ -44,9 +49,12 @@ export default class CopyableText extends React.PureComponent<Props> {
           icon={icons.CLIPBOARD}
           onClick={() => {
             clipboard.writeText(copyable);
-            doToast({
-              message: __('Text copied'),
-            });
+            if (!noSnackbar) {
+              doNotify({
+                message: __('Text copied'),
+                displayType: ['snackbar'],
+              });
+            }
           }}
         />
       </FormRow>

src/renderer/component/externalLink/index.js

@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
-import { doOpenModal } from 'redux/actions/app';
+import { doNotify } from 'lbry-redux';
 import { doNavigate } from 'redux/actions/navigation';
 import ExternalLink from './view';
 
 const select = () => ({});
 const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+  openModal: (modal, props) => dispatch(doNotify(modal, props)),
 });
 
 export default connect(select, perform)(ExternalLink);

src/renderer/component/externalLink/view.jsx

@@ -1,8 +1,7 @@
 // @flow
-import * as MODALS from 'constants/modal_types';
-import * as ICONS from 'constants/icons';
 import * as React from 'react';
-import { isURIValid } from 'lbry-redux';
+import { MODALS, isURIValid } from 'lbry-redux';
+import * as icons from 'constants/icons';
 import Button from 'component/button';
 
 type Props = {
@@ -10,7 +9,7 @@ type Props = {
   title?: string,
   children: React.Node,
   navigate: (string, ?{}) => void,
-  openModal: (id: string, { uri: string }) => void,
+  openModal: ({ id: string }, { uri: string }) => void,
 };
 
 class ExternalLink extends React.PureComponent<Props> {
@@ -34,11 +33,11 @@ class ExternalLink extends React.PureComponent<Props> {
       element = (
         <Button
           button="link"
-          iconRight={ICONS.EXTERNAL_LINK}
+          iconRight={icons.EXTERNAL_LINK}
           title={title || href}
           label={children}
           className="btn--external-link"
-          onClick={() => openModal(MODALS.CONFIRM_EXTERNAL_LINK, { uri: href })}
+          onClick={() => openModal({ id: MODALS.CONFIRM_EXTERNAL_LINK }, { uri: href })}
         />
       );
     }

src/renderer/component/fileActions/index.js

@@ -3,7 +3,7 @@ import {
   makeSelectCostInfoForUri,
   makeSelectFileInfoForUri,
   makeSelectClaimIsMine,
-  doOpenModal,
+  doNotify,
 } from 'lbry-redux';
 import FileActions from './view';
 
@@ -15,7 +15,7 @@ const select = (state, props) => ({
 });
 
 const perform = dispatch => ({
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+  openModal: (modal, props) => dispatch(doNotify(modal, props)),
 });
 
 export default connect(select, perform)(FileActions);

src/renderer/component/fileActions/view.jsx

@@ -1,8 +1,8 @@
 // @flow
-import * as MODALS from 'constants/modal_types';
-import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import Button from 'component/button';
+import { MODALS } from 'lbry-redux';
+import * as icons from 'constants/icons';
 import Tooltip from 'component/common/tooltip';
 
 type FileInfo = {
@@ -12,7 +12,7 @@ type FileInfo = {
 type Props = {
   uri: string,
   claimId: string,
-  openModal: (id: string, { uri: string }) => void,
+  openModal: ({ id: string }, { uri: string }) => void,
   claimIsMine: boolean,
   fileInfo: FileInfo,
 };
@@ -28,9 +28,9 @@ class FileActions extends React.PureComponent<Props> {
           <Tooltip onComponent body={__('Delete this file')}>
             <Button
               button="alt"
-              icon={ICONS.TRASH}
+              icon={icons.TRASH}
               description={__('Delete')}
-              onClick={() => openModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
+              onClick={() => openModal({ id: MODALS.CONFIRM_FILE_REMOVE }, { uri })}
             />
           </Tooltip>
         )}
@@ -38,7 +38,7 @@ class FileActions extends React.PureComponent<Props> {
           <Tooltip onComponent body={__('Report content')}>
             <Button
               button="alt"
-              icon={ICONS.REPORT}
+              icon={icons.REPORT}
               href={`https://lbry.io/dmca?claim_id=${claimId}`}
             />
           </Tooltip>

src/renderer/component/rewardTile/index.js

@@ -1,10 +1,9 @@
-import * as MODALS from 'constants/modal_types';
 import { connect } from 'react-redux';
-import { doOpenModal } from 'lbry-redux';
+import { MODALS, doNotify } from 'lbry-redux';
 import RewardTile from './view';
 
 const perform = dispatch => ({
-  openRewardCodeModal: () => dispatch(doOpenModal(MODALS.REWARD_GENERATED_CODE)),
+  openRewardCodeModal: () => dispatch(doNotify({ id: MODALS.REWARD_GENERATED_CODE })),
 });
 
 export default connect(

src/renderer/component/router/index.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
-import { selectCurrentPage, selectCurrentParams } from 'lbry-redux';
-import { doOpenModal } from 'redux/actions/app';
+import { selectCurrentPage, selectCurrentParams, doNotify } from 'lbry-redux';
 import Router from './view';
 
 const select = state => ({
@@ -8,4 +7,4 @@ const select = state => ({
   currentPage: selectCurrentPage(state),
 });
 
-export default connect(select, { doOpenModal })(Router);
+export default connect(select, { doNotify })(Router);

src/renderer/component/router/view.jsx

@@ -23,8 +23,9 @@ import UserHistoryPage from 'page/userHistory';
 const route = (props, page, routesMap) => {
   const component = routesMap[page];
   if (!component) {
-    props.doToast({
+    props.doNotify({
       message: __('Invalid page requested'),
+      displayType: ['snackbar'],
     });
   }
   return component || routesMap.discover;

src/renderer/component/selectThumbnail/index.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { doOpenModal } from 'redux/actions/app';
+import { doNotify } from 'lbry-redux';
 import SelectThumbnail from './view';
 
 const perform = dispatch => ({
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+  openModal: (modal, props) => dispatch(doNotify(modal, props)),
 });
 
 export default connect(

src/renderer/component/selectThumbnail/view.jsx

@@ -1,6 +1,5 @@
 // @flow
-import * as MODALS from 'constants/modal_types';
-import { THUMBNAIL_STATUSES } from 'lbry-redux';
+import { THUMBNAIL_STATUSES, MODALS } from 'lbry-redux';
 import * as React from 'react';
 import { FormField } from 'component/common/form';
 import FileSelector from 'component/common/file-selector';
@@ -119,7 +118,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
                 currentPath={thumbnailPath}
                 fileLabel={__('Choose Thumbnail')}
                 filters={filters}
-                onFileChosen={path => openModal(MODALS.CONFIRM_THUMBNAIL_UPLOAD, { path })}
+                onFileChosen={path => openModal({ id: MODALS.CONFIRM_THUMBNAIL_UPLOAD }, { path })}
               />
             )}
             {status === THUMBNAIL_STATUSES.COMPLETE && (

src/renderer/component/snackBar/index.js

@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
-import { selectToast, doDismissToast } from 'lbry-redux';
+import { selectSnack, doHideNotification } from 'lbry-redux';
 import SnackBar from './view';
 
 const perform = dispatch => ({
-  removeSnack: () => dispatch(doDismissToast()),
+  removeSnack: () => dispatch(doHideNotification()),
 });
 
 const select = state => ({
-  snack: selectToast(state),
+  snack: selectSnack(state),
 });
 
 export default connect(select, perform)(SnackBar);

src/renderer/component/snackBar/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
-import classnames from 'classnames';
 
 type Props = {
   removeSnack: any => void,
@@ -28,7 +27,7 @@ class SnackBar extends React.PureComponent<Props> {
       return null;
     }
 
-    const { message, linkText, linkTarget, isError } = snack;
+    const { message, linkText, linkTarget } = snack;
 
     if (this.hideTimeout === null) {
       this.hideTimeout = setTimeout(() => {
@@ -38,9 +37,7 @@ class SnackBar extends React.PureComponent<Props> {
     }
 
     return (
-      <div className={classnames("snack-bar", {
-        "snack-bar--error": isError
-      })}>
+      <div className="snack-bar">
         <div className="snack-bar__message">
           <div>&#9432;</div>
           <div>{message}</div>

src/renderer/component/socialShare/view.jsx

@@ -46,7 +46,7 @@ class SocialShare extends React.PureComponent<Props> {
         {speechShareable && (
           <div className="card__content">
             <label className="card__subtitle">{__('Web link')}</label>
-            <CopyableText copyable={speechURL} />
+            <CopyableText copyable={speechURL} noSnackbar />
             <div className="card__actions card__actions--center">
               <ToolTip onComponent body={__('Facebook')}>
                 <Button

src/renderer/component/splash/index.js

@@ -1,10 +1,11 @@
 import { connect } from 'react-redux';
-import { selectDaemonVersionMatched, selectModal } from 'redux/selectors/app';
+import { selectDaemonVersionMatched } from 'redux/selectors/app';
+import { selectNotification } from 'lbry-redux';
 import { doCheckDaemonVersion, doNotifyUnlockWallet } from 'redux/actions/app';
 import SplashScreen from './view';
 
 const select = state => ({
-  modal: selectModal(state),
+  notification: selectNotification(state),
   daemonVersionMatched: selectDaemonVersionMatched(state),
 });
 

src/renderer/component/splash/view.jsx

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react';
-import * as MODALS from 'constants/modal_types';
-import { Lbry } from 'lbry-redux';
+import { Lbry, MODALS } from 'lbry-redux';
 import ModalWalletUnlock from 'modal/modalWalletUnlock';
 import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
 import ModalUpgrade from 'modal/modalUpgrade';
@@ -14,7 +13,7 @@ type Props = {
   daemonVersionMatched: boolean,
   onReadyToLaunch: () => void,
   authenticate: () => void,
-  modal: ?{
+  notification: ?{
     id: string,
   },
 };
@@ -126,11 +125,12 @@ export class SplashScreen extends React.PureComponent<Props, State> {
   hasRecordedUser: boolean;
 
   render() {
-    const { modal } = this.props;
+    const { notification } = this.props;
     const { message, details, isRunning } = this.state;
 
-    const modalId = modal && modal.id;
+    const notificationId = notification && notification.id;
 
+    // {notificationId === MODALS.WALLET_UNLOCK && <ModalWalletUnlock />}
     return (
       <React.Fragment>
         <LoadScreen message={message} details={details} />
@@ -139,10 +139,10 @@ export class SplashScreen extends React.PureComponent<Props, State> {
             in the modals won't work. */}
         {isRunning && (
           <React.Fragment>
-            {modalId === MODALS.WALLET_UNLOCK && <ModalWalletUnlock />}
-            {modalId === MODALS.INCOMPATIBLE_DAEMON && <ModalIncompatibleDaemon />}
-            {modalId === MODALS.UPGRADE && <ModalUpgrade />}
-            {modalId === MODALS.DOWNLOADING && <ModalDownloading />}
+            {notificationId === MODALS.WALLET_UNLOCK && <ModalWalletUnlock />}
+            {notificationId === MODALS.INCOMPATIBLE_DAEMON && <ModalIncompatibleDaemon />}
+            {notificationId === MODALS.UPGRADE && <ModalUpgrade />}
+            {notificationId === MODALS.DOWNLOADING && <ModalDownloading />}
           </React.Fragment>
         )}
       </React.Fragment>

src/renderer/component/subscribeButton/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { doChannelSubscribe, doChannelUnsubscribe } from 'redux/actions/subscriptions';
-import { doOpenModal } from 'redux/actions/app';
+import { doNotify } from 'lbry-redux';
 import { selectSubscriptions, makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import SubscribeButton from './view';
 
@@ -14,6 +14,6 @@ export default connect(
   {
     doChannelSubscribe,
     doChannelUnsubscribe,
-    doOpenModal,
+    doNotify,
   }
 )(SubscribeButton);

src/renderer/component/subscribeButton/view.jsx

@@ -1,7 +1,7 @@
 // @flow
-import * as MODALS from 'constants/modal_types';
-import * as ICONS from 'constants/icons';
 import React from 'react';
+import { MODALS } from 'lbry-redux';
+import * as icons from 'constants/icons';
 import Button from 'component/button';
 
 type SubscribtionArgs = {
@@ -16,7 +16,7 @@ type Props = {
   subscriptions: Array<string>,
   doChannelSubscribe: ({ channelName: string, uri: string }) => void,
   doChannelUnsubscribe: SubscribtionArgs => void,
-  doOpenModal: ({ id: string }) => void,
+  doNotify: ({ id: string }) => void,
 };
 
 export default (props: Props) => {
@@ -25,7 +25,7 @@ export default (props: Props) => {
     uri,
     doChannelSubscribe,
     doChannelUnsubscribe,
-    doOpenModal,
+    doNotify,
     subscriptions,
     isSubscribed,
   } = props;
@@ -36,14 +36,14 @@ export default (props: Props) => {
   return channelName && uri ? (
     <Button
       iconColor="red"
-      icon={isSubscribed ? undefined : ICONS.HEART}
+      icon={isSubscribed ? undefined : icons.HEART}
       button="alt"
       label={subscriptionLabel}
       onClick={e => {
         e.stopPropagation();
 
         if (!subscriptions.length) {
-          doOpenModal(MODALS.FIRST_SUBSCRIPTION);
+          doNotify({ id: MODALS.FIRST_SUBSCRIPTION });
         }
         subscriptionHandler({
           channelName,

src/renderer/component/transactionList/index.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
 import { selectClaimedRewardsByTransactionId } from 'lbryinc';
 import { doNavigate } from 'redux/actions/navigation';
-import { doOpenModal } from 'redux/actions/app';
 import {
   selectAllMyClaimsByOutpoint,
+  doNotify,
   selectTransactionListFilter,
   doSetTransactionListFilter,
 } from 'lbry-redux';
@@ -17,7 +17,7 @@ const select = state => ({
 
 const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+  openModal: (modal, props) => dispatch(doNotify(modal, props)),
   setTransactionFilter: filterSetting => dispatch(doSetTransactionListFilter(filterSetting)),
 });
 

src/renderer/component/transactionList/view.jsx

@@ -1,11 +1,10 @@
 // @flow
-import * as ICONS from 'constants/icons';
-import * as MODALS from 'constants/modal_types';
 import * as React from 'react';
 import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import FileExporter from 'component/common/file-exporter';
-import { TRANSACTIONS } from 'lbry-redux';
+import * as icons from 'constants/icons';
+import { MODALS, TRANSACTIONS } from 'lbry-redux';
 import TransactionListItem from './internal/transaction-list-item';
 
 export type Transaction = {
@@ -62,7 +61,7 @@ class TransactionList extends React.PureComponent<Props> {
   }
 
   revokeClaim(txid: string, nout: number) {
-    this.props.openModal(MODALS.CONFIRM_CLAIM_REVOKE, { txid, nout });
+    this.props.openModal({ id: MODALS.CONFIRM_CLAIM_REVOKE }, { txid, nout });
   }
 
   render() {
@@ -101,7 +100,7 @@ class TransactionList extends React.PureComponent<Props> {
               postfix={
                 <Button
                   button="link"
-                  icon={ICONS.HELP}
+                  icon={icons.HELP}
                   href="https://lbry.io/faq/transaction-types"
                   title={__('Help')}
                 />

src/renderer/component/userVerify/index.js

@@ -1,6 +1,5 @@
-import * as MODALS from 'constants/modal_types';
 import { connect } from 'react-redux';
-import { doOpenModal } from 'redux/actions/app';
+import { doNotify, MODALS } from 'lbry-redux';
 import { doNavigate } from 'redux/actions/navigation';
 import {
   doUserIdentityVerify,
@@ -24,7 +23,7 @@ const select = state => {
 const perform = dispatch => ({
   navigate: uri => dispatch(doNavigate(uri)),
   verifyUserIdentity: token => dispatch(doUserIdentityVerify(token)),
-  verifyPhone: () => dispatch(doOpenModal(MODALS.PHONE_COLLECTION)),
+  verifyPhone: () => dispatch(doNotify({ id: MODALS.PHONE_COLLECTION })),
 });
 
 export default connect(

src/renderer/component/walletSend/index.js

@@ -1,10 +1,9 @@
 import { connect } from 'react-redux';
-import { selectBalance } from 'lbry-redux';
-import { doOpenModal } from 'redux/actions/app';
+import { selectBalance, doNotify } from 'lbry-redux';
 import WalletSend from './view';
 
 const perform = dispatch => ({
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+  openModal: (modal, props) => dispatch(doNotify(modal, props)),
 });
 
 const select = state => ({

src/renderer/component/walletSend/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import * as MODALS from 'constants/modal_types';
+import { MODALS } from 'lbry-redux';
 import Button from 'component/button';
 import { Form, FormRow, FormField } from 'component/common/form';
 import { Formik } from 'formik';
@@ -27,8 +27,9 @@ class WalletSend extends React.PureComponent<Props> {
     const { openModal } = this.props;
     const { address, amount } = values;
     if (amount && address) {
+      const notificationId = { id: MODALS.CONFIRM_TRANSACTION };
       const modalProps = { address, amount };
-      openModal(MODALS.CONFIRM_TRANSACTION, modalProps);
+      openModal(notificationId, modalProps);
     }
   }
 

src/renderer/component/wunderbar/index.js

@@ -7,7 +7,7 @@ import {
   doFocusSearchInput,
   doBlurSearchInput,
   doSearch,
-  doToast,
+  doNotify,
 } from 'lbry-redux';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import * as settings from 'constants/settings';
@@ -39,7 +39,7 @@ const perform = dispatch => ({
   updateSearchQuery: query => dispatch(doUpdateSearchQuery(query)),
   doFocus: () => dispatch(doFocusSearchInput()),
   doBlur: () => dispatch(doBlurSearchInput()),
-  doShowSnackBar: (props) => dispatch(doToast(props)),
+  doShowSnackBar: (modal, props) => dispatch(doNotify(modal, props)),
 });
 
 export default connect(

src/renderer/component/wunderbar/view.jsx

@@ -107,6 +107,7 @@ class WunderBar extends React.PureComponent<Props> {
       } else {
         this.props.doShowSnackBar({
           message: __('Invalid LBRY URL entered. Only A-Z, a-z, and - allowed.'),
+          displayType: ['snackbar'],
         });
       }
 

src/renderer/constants/action_types.js

@@ -13,8 +13,6 @@ export const DAEMON_READY = 'DAEMON_READY';
 export const DAEMON_VERSION_MATCH = 'DAEMON_VERSION_MATCH';
 export const DAEMON_VERSION_MISMATCH = 'DAEMON_VERSION_MISMATCH';
 export const VOLUME_CHANGED = 'VOLUME_CHANGED';
-export const SHOW_MODAL = 'SHOW_MODAL';
-export const HIDE_MODAL = 'HIDE_MODAL';
 
 // Navigation
 export const CHANGE_AFTER_AUTH_PATH = 'CHANGE_AFTER_AUTH_PATH';

src/renderer/constants/modal_types.js

@@ -1,30 +0,0 @@
-export const CONFIRM_FILE_REMOVE = 'confirm_file_remove';
-export const CONFIRM_EXTERNAL_LINK = 'confirm_external_link';
-export const INCOMPATIBLE_DAEMON = 'incompatible_daemon';
-export const FILE_TIMEOUT = 'file_timeout';
-export const DOWNLOADING = 'downloading';
-export const AUTO_UPDATE_DOWNLOADED = 'auto_update_downloaded';
-export const AUTO_UPDATE_CONFIRM = 'auto_update_confirm';
-export const ERROR = 'error';
-export const INSUFFICIENT_CREDITS = 'insufficient_credits';
-export const UPGRADE = 'upgrade';
-export const WELCOME = 'welcome';
-export const EMAIL_COLLECTION = 'email_collection';
-export const PHONE_COLLECTION = 'phone_collection';
-export const FIRST_REWARD = 'first_reward';
-export const AUTHENTICATION_FAILURE = 'auth_failure';
-export const TRANSACTION_FAILED = 'transaction_failed';
-export const REWARD_APPROVAL_REQUIRED = 'reward_approval_required';
-export const REWARD_GENERATED_CODE = 'reward_generated_code';
-export const AFFIRM_PURCHASE = 'affirm_purchase';
-export const CONFIRM_CLAIM_REVOKE = 'confirm_claim_revoke';
-export const FIRST_SUBSCRIPTION = 'firstSubscription';
-export const SEND_TIP = 'send_tip';
-export const SOCIAL_SHARE = 'social_share';
-export const PUBLISH = 'publish';
-export const SEARCH = 'search';
-export const CONFIRM_TRANSACTION = 'confirm_transaction';
-export const CONFIRM_THUMBNAIL_UPLOAD = 'confirm_thumbnail_upload';
-export const WALLET_ENCRYPT = 'wallet_encrypt';
-export const WALLET_DECRYPT = 'wallet_decrypt';
-export const WALLET_UNLOCK = 'wallet_unlock';

src/renderer/index.js

@@ -10,7 +10,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { doConditionalAuthNavigate, doDaemonReady, doAutoUpdate } from 'redux/actions/app';
-import { doToast, doBlackListedOutpointsSubscribe, isURIValid } from 'lbry-redux';
+import { doNotify, doBlackListedOutpointsSubscribe, isURIValid } from 'lbry-redux';
 import { doNavigate } from 'redux/actions/navigation';
 import { doDownloadLanguages, doUpdateIsNightAsync } from 'redux/actions/settings';
 import { doUserEmailVerify, doAuthenticate, Lbryio } from 'lbryinc';
@@ -74,8 +74,9 @@ ipcRenderer.on('open-uri-requested', (event, uri, newSession) => {
         app.store.dispatch(doUserEmailVerify(verification.token, verification.recaptcha));
       } else {
         app.store.dispatch(
-          doToast({
+          doNotify({
             message: 'Invalid Verification URI',
+            displayType: ['snackbar'],
           })
         );
       }
@@ -86,8 +87,9 @@ ipcRenderer.on('open-uri-requested', (event, uri, newSession) => {
       app.store.dispatch(doNavigate('/show', { uri }));
     } else {
       app.store.dispatch(
-        doToast({
+        doNotify({
           message: __('Invalid LBRY URL requested'),
+          displayType: ['snackbar'],
         })
       );
     }

src/renderer/modal/modalAffirmPurchase/index.js

@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import { doLoadVideo, doSetPlayingUri } from 'redux/actions/content';
-import { doHideModal } from 'redux/actions/app';
-import { makeSelectMetadataForUri } from 'lbry-redux';
+import { doHideNotification, makeSelectMetadataForUri } from 'lbry-redux';
 import ModalAffirmPurchase from './view';
 
 const select = (state, props) => ({
@@ -11,9 +10,9 @@ const select = (state, props) => ({
 const perform = dispatch => ({
   cancelPurchase: () => {
     dispatch(doSetPlayingUri(null));
-    dispatch(doHideModal());
+    dispatch(doHideNotification());
   },
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   loadVideo: uri => dispatch(doLoadVideo(uri)),
 });
 

src/renderer/modal/modalAuthFailure/index.js

@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import ModalAuthFailure from './view';
 
 const select = () => ({});
 
 const perform = dispatch => ({
-  close: () => dispatch(doHideModal()),
+  close: () => dispatch(doHideNotification()),
 });
 
 export default connect(

src/renderer/modal/modalAutoUpdateConfirm/index.js

@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
-import { doAutoUpdateDeclined, doHideModal } from 'redux/actions/app';
+import { doAutoUpdateDeclined } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import ModalAutoUpdateConfirm from './view';
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   declineAutoUpdate: () => dispatch(doAutoUpdateDeclined()),
 });
 

src/renderer/modal/modalAutoUpdateDownloaded/index.js

@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
-import { doAutoUpdateDeclined, doHideModal } from 'redux/actions/app';
+import { doAutoUpdateDeclined } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import ModalAutoUpdateDownloaded from './view';
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   declineAutoUpdate: () => dispatch(doAutoUpdateDeclined()),
 });
 

src/renderer/modal/modalConfirmThumbnailUpload/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import { doUploadThumbnail, doUpdatePublishForm } from 'redux/actions/publish';
 import { selectPublishFormValues } from 'redux/selectors/publish';
 import ModalConfirmThumbnailUpload from './view';
@@ -10,7 +10,7 @@ const select = state => {
 };
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   upload: (path, nsfw = false) => dispatch(doUploadThumbnail(path, nsfw)),
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
 });

src/renderer/modal/modalConfirmTransaction/index.js

@@ -1,10 +1,9 @@
 import { connect } from 'react-redux';
-import { doSendDraftTransaction } from 'lbry-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification, doSendDraftTransaction } from 'lbry-redux';
 import ModalConfirmTransaction from './view';
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   sendToAddress: (address, amount) => dispatch(doSendDraftTransaction(address, amount)),
 });
 

src/renderer/modal/modalCreditIntro/index.js

@@ -2,8 +2,7 @@ import { connect } from 'react-redux';
 import { doNavigate } from 'redux/actions/navigation';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { selectUserIsRewardApproved, selectUnclaimedRewardValue } from 'lbryinc';
-import { selectBalance } from 'lbry-redux';
-import { doHideModal } from 'redux/actions/app';
+import { selectBalance, doHideNotification } from 'lbry-redux';
 import * as settings from 'constants/settings';
 import ModalCreditIntro from './view';
 
@@ -17,11 +16,11 @@ const perform = dispatch => () => ({
   addBalance: () => {
     dispatch(doSetClientSetting(settings.CREDIT_REQUIRED_ACKNOWLEDGED, true));
     dispatch(doNavigate('/getcredits'));
-    dispatch(doHideModal());
+    dispatch(doHideNotification());
   },
   closeModal: () => {
     dispatch(doSetClientSetting(settings.CREDIT_REQUIRED_ACKNOWLEDGED, true));
-    dispatch(doHideModal());
+    dispatch(doHideNotification());
   },
 });
 

src/renderer/modal/modalDownloading/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
-import { doStartUpgrade, doCancelUpgrade, doHideModal } from 'redux/actions/app';
+import { doStartUpgrade, doCancelUpgrade } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import {
   selectDownloadProgress,
   selectDownloadComplete,
@@ -16,7 +17,7 @@ const select = state => ({
 const perform = dispatch => ({
   startUpgrade: () => dispatch(doStartUpgrade()),
   cancelUpgrade: () => {
-    dispatch(doHideModal());
+    dispatch(doHideNotification());
     dispatch(doCancelUpgrade());
   },
 });

src/renderer/modal/modalEmailCollection/index.js

@@ -1,6 +1,6 @@
 import * as settings from 'constants/settings';
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { selectEmailToVerify, selectUser } from 'lbryinc';
 import ModalEmailCollection from './view';
@@ -13,7 +13,7 @@ const select = state => ({
 const perform = dispatch => () => ({
   closeModal: () => {
     dispatch(doSetClientSetting(settings.EMAIL_COLLECTION_ACKNOWLEDGED, true));
-    dispatch(doHideModal());
+    dispatch(doHideNotification());
   },
 });
 

src/renderer/modal/modalError/index.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { doDismissError } from 'lbry-redux';
+import { doHideNotification } from 'lbry-redux';
 import ModalError from './view';
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doDismissError()),
+  closeModal: () => dispatch(doHideNotification()),
 });
 
 export default connect(null, perform)(ModalError);

src/renderer/modal/modalFileTimeout/index.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
-import { makeSelectMetadataForUri } from 'lbry-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification, makeSelectMetadataForUri } from 'lbry-redux';
 import ModalFileTimeout from './view';
 
 const select = (state, props) => ({
@@ -8,7 +7,7 @@ const select = (state, props) => ({
 });
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
 });
 
 export default connect(select, perform)(ModalFileTimeout);

src/renderer/modal/modalFirstReward/index.js

@@ -1,6 +1,6 @@
 import { rewards, makeSelectRewardByType } from 'lbryinc';
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import ModalFirstReward from './view';
 
 const select = state => {
@@ -12,7 +12,7 @@ const select = state => {
 };
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
 });
 
 export default connect(

src/renderer/modal/modalFirstSubscription/index.js

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import { doNavigate } from 'redux/actions/navigation';
 import ModalFirstSubscription from './view';
 
 const perform = dispatch => () => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   navigate: path => dispatch(doNavigate(path)),
 });
 

src/renderer/modal/modalOpenExternalLink/index.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import ModalOpenExternalLink from './view';
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
 });
 
 export default connect(null, perform)(ModalOpenExternalLink);

src/renderer/modal/modalPhoneCollection/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import { selectPhoneToVerify, selectUser } from 'lbryinc';
 import { doNavigate } from 'redux/actions/navigation';
 import ModalPhoneCollection from './view';
@@ -11,7 +11,7 @@ const select = state => ({
 
 const perform = dispatch => () => ({
   closeModal: () => {
-    dispatch(doHideModal());
+    dispatch(doHideNotification());
     dispatch(doNavigate('/rewards'));
   },
 });

src/renderer/modal/modalPublish/index.js

@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import ModalSendTip from './view';
 import { doClearPublish } from 'redux/actions/publish';
 import { doNavigate } from 'redux/actions/navigation';
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   clearPublish: () => dispatch(doClearPublish()),
   navigate: (path, params) => dispatch(doNavigate(path, params)),
 });

src/renderer/modal/modalRemoveFile/index.js

@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
 import { doDeleteFileAndGoBack } from 'redux/actions/file';
 import {
+  doHideNotification,
   makeSelectTitleForUri,
   makeSelectClaimIsMine,
   makeSelectFileInfoForUri,
 } from 'lbry-redux';
-import { doHideModal } from 'redux/actions/app';
 import ModalRemoveFile from './view';
 
 const select = (state, props) => ({
@@ -15,7 +15,7 @@ const select = (state, props) => ({
 });
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   deleteFile: (fileInfo, deleteFromComputer, abandonClaim) => {
     dispatch(doDeleteFileAndGoBack(fileInfo, deleteFromComputer, abandonClaim));
   },

src/renderer/modal/modalRevokeClaim/index.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
-import { doAbandonClaim, selectTransactionItems } from 'lbry-redux';
+import { doHideNotification, doAbandonClaim, selectTransactionItems } from 'lbry-redux';
 import ModalRevokeClaim from './view';
 
 const select = state => ({
@@ -8,7 +7,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   abandonClaim: (txid, nout) => dispatch(doAbandonClaim(txid, nout)),
 });
 

src/renderer/modal/modalRewardApprovalRequired/index.js

@@ -1,14 +1,14 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import { doAuthNavigate } from 'redux/actions/navigation';
 import ModalRewardApprovalRequired from './view';
 
 const perform = dispatch => ({
   doAuth: () => {
-    dispatch(doHideModal());
+    dispatch(doHideNotification());
     dispatch(doAuthNavigate());
   },
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
 });
 
 export default connect(null, perform)(ModalRewardApprovalRequired);

src/renderer/modal/modalRewardCode/index.js

@@ -1,6 +1,6 @@
 // @flow
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import {
   makeSelectClaimRewardError,
   doClaimRewardType,
@@ -17,7 +17,7 @@ const select = (state): {} => ({
 });
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   submitRewardCode: (code: string) =>
     dispatch(doClaimRewardType(REWARD_TYPES.TYPE_REWARD_CODE, { params: { code } })),
 });

src/renderer/modal/modalRouter/index.js

@@ -1,15 +1,15 @@
 import { connect } from 'react-redux';
 import * as settings from 'constants/settings';
 import {
+  doNotify,
   selectCostForCurrentPageUri,
   selectBalance,
   selectCurrentPage,
-  selectError,
-  doToast
+  selectNotification,
+  selectNotificationProps,
 } from 'lbry-redux';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { selectUser, selectUserIsVerificationCandidate } from 'lbryinc';
-import { selectModal } from 'redux/selectors/app';
 
 import ModalRouter from './view';
 
@@ -24,12 +24,12 @@ const select = state => ({
   ),
   isWelcomeAcknowledged: makeSelectClientSetting(settings.NEW_USER_ACKNOWLEDGED)(state),
   user: selectUser(state),
-  modal: selectModal(state),
-  error: selectError(state),
+  notification: selectNotification(state),
+  notificationProps: selectNotificationProps(state),
 });
 
 const perform = dispatch => ({
-  showToast: props => dispatch(doToast(props)),
+  openModal: notification => dispatch(doNotify(notification)),
 });
 
 export default connect(

src/renderer/modal/modalRouter/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import * as MODALS from 'constants/modal_types';
+import { MODALS } from 'lbry-redux';
 import ModalError from 'modal/modalError';
 import ModalAuthFailure from 'modal/modalAuthFailure';
 import ModalDownloading from 'modal/modalDownloading';
@@ -70,7 +70,7 @@ class ModalRouter extends React.PureComponent<Props> {
       transitionModal &&
       (transitionModal !== this.state.lastTransitionModal || page !== this.state.lastTransitionPage)
     ) {
-      openModal(transitionModal);
+      openModal({ id: transitionModal });
       this.setState({
         lastTransitionModal: transitionModal,
         lastTransitionPage: page,
@@ -121,75 +121,73 @@ class ModalRouter extends React.PureComponent<Props> {
   }
 
   render() {
-    const { modal, error } = this.props;
+    const { notification, notificationProps } = this.props;
 
-    if (error) {
-      return <ModalError {...error} />;
-    }
-
-    if (!modal) {
+    if (!notification) {
       return null;
     }
 
-    const { id, modalProps } = modal;
+    if (notification.error) {
+      return <ModalError {...notification} {...notificationProps} />;
+    }
 
-    switch (id) {
+    switch (notification.id) {
       case MODALS.UPGRADE:
-        return <ModalUpgrade {...modalProps} />;
+        return <ModalUpgrade {...notificationProps} />;
       case MODALS.DOWNLOADING:
-        return <ModalDownloading {...modalProps} />;
+        return <ModalDownloading {...notificationProps} />;
       case MODALS.AUTO_UPDATE_DOWNLOADED:
-        return <ModalAutoUpdateDownloaded {...modalProps} />;
+        return <ModalAutoUpdateDownloaded {...notificationProps} />;
       case MODALS.AUTO_UPDATE_CONFIRM:
-        return <ModalAutoUpdateConfirm {...modalProps} />;
+        return <ModalAutoUpdateConfirm {...notificationProps} />;
       case MODALS.ERROR:
-        return <ModalError {...modalProps} />;
+        return <ModalError {...notificationProps} />;
       case MODALS.FILE_TIMEOUT:
-        return <ModalFileTimeout {...modalProps} />;
+        return <ModalFileTimeout {...notificationProps} />;
       case MODALS.INSUFFICIENT_CREDITS:
-        return <ModalCreditIntro {...modalProps} />;
+        return <ModalCreditIntro {...notificationProps} />;
       case MODALS.WELCOME:
-        return <ModalWelcome {...modalProps} />;
+        return <ModalWelcome {...notificationProps} />;
       case MODALS.FIRST_REWARD:
-        return <ModalFirstReward {...modalProps} />;
+        return <ModalFirstReward {...notificationProps} />;
       case MODALS.AUTHENTICATION_FAILURE:
-        return <ModalAuthFailure {...modalProps} />;
+        return <ModalAuthFailure {...notificationProps} />;
       case MODALS.TRANSACTION_FAILED:
-        return <ModalTransactionFailed {...modalProps} />;
+        return <ModalTransactionFailed {...notificationProps} />;
       case MODALS.REWARD_APPROVAL_REQUIRED:
-        return <ModalRewardApprovalRequired {...modalProps} />;
+        return <ModalRewardApprovalRequired {...notificationProps} />;
       case MODALS.CONFIRM_FILE_REMOVE:
-        return <ModalRemoveFile {...modalProps} />;
+        return <ModalRemoveFile {...notificationProps} />;
       case MODALS.AFFIRM_PURCHASE:
-        return <ModalAffirmPurchase {...modalProps} />;
+        return <ModalAffirmPurchase {...notificationProps} />;
       case MODALS.CONFIRM_CLAIM_REVOKE:
-        return <ModalRevokeClaim {...modalProps} />;
+        return <ModalRevokeClaim {...notificationProps} />;
       case MODALS.PHONE_COLLECTION:
-        return <ModalPhoneCollection {...modalProps} />;
+        return <ModalPhoneCollection {...notificationProps} />;
       case MODALS.EMAIL_COLLECTION:
-        return <ModalEmailCollection {...modalProps} />;
+        return <ModalEmailCollection {...notificationProps} />;
       case MODALS.FIRST_SUBSCRIPTION:
-        return <ModalFirstSubscription {...modalProps} />;
+        return <ModalFirstSubscription {...notificationProps} />;
       case MODALS.SEND_TIP:
-        return <ModalSendTip {...modalProps} />;
+        return <ModalSendTip {...notificationProps} />;
       case MODALS.SOCIAL_SHARE:
-        return <ModalSocialShare {...modalProps} />;
+        return <ModalSocialShare {...notificationProps} />;
       case MODALS.PUBLISH:
-        return <ModalPublish {...modalProps} />;
+        return <ModalPublish {...notificationProps} />;
       case MODALS.CONFIRM_EXTERNAL_LINK:
-        return <ModalOpenExternalLink {...modalProps} />;
+        return <ModalOpenExternalLink {...notificationProps} />;
       case MODALS.CONFIRM_TRANSACTION:
-        return <ModalConfirmTransaction {...modalProps} />;
+        return <ModalConfirmTransaction {...notificationProps} />;
       case MODALS.CONFIRM_THUMBNAIL_UPLOAD:
-        return <ModalConfirmThumbnailUpload {...modalProps} />;
+        return <ModalConfirmThumbnailUpload {...notificationProps} />;
       case MODALS.WALLET_ENCRYPT:
-        return <ModalWalletEncrypt {...modalProps} />;
+        return <ModalWalletEncrypt {...notificationProps} />;
       case MODALS.WALLET_DECRYPT:
-        return <ModalWalletDecrypt {...modalProps} />;
+        return <ModalWalletDecrypt {...notificationProps} />;
       case MODALS.WALLET_UNLOCK:
-        return <ModalWalletUnlock {...modalProps} />;
+        return <ModalWalletUnlock {...notificationProps} />;
       case MODALS.REWARD_GENERATED_CODE:
-        return <ModalRewardCode {...modalProps} />;
+        return <ModalRewardCode {...notificationProps} />;
       default:
         return null;
     }

src/renderer/modal/modalSendTip/index.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import ModalSendTip from './view';
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
 });
 
 export default connect(null, perform)(ModalSendTip);

src/renderer/modal/modalSocialShare/index.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import ModalSocialShare from './view';
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
 });
 
 export default connect(

src/renderer/modal/modalTransactionFailed/index.js

@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import ModalTransactionFailed from './view';
 
 const select = () => ({});
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
 });
 
 export default connect(

src/renderer/modal/modalUpgrade/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
-import { doDownloadUpgrade, doSkipUpgrade, doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
+import { doDownloadUpgrade, doSkipUpgrade } from 'redux/actions/app';
 import ModalUpgrade from './view';
 
 const select = () => ({});
@@ -7,7 +8,7 @@ const select = () => ({});
 const perform = dispatch => ({
   downloadUpgrade: () => dispatch(doDownloadUpgrade()),
   skipUpgrade: () => {
-    dispatch(doHideModal());
+    dispatch(doHideNotification());
     dispatch(doSkipUpgrade());
   },
 });

src/renderer/modal/modalWalletDecrypt/index.js

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
 import {
+  doHideNotification,
   doWalletStatus,
   doWalletDecrypt,
   selectWalletDecryptSucceeded,
 } from 'lbry-redux';
-import { doHideModal } from 'redux/actions/app';
 import ModalWalletDecrypt from './view';
 
 const select = state => ({
@@ -12,7 +12,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   decryptWallet: password => dispatch(doWalletDecrypt(password)),
   updateWalletStatus: () => dispatch(doWalletStatus()),
 });

src/renderer/modal/modalWalletEncrypt/index.js

@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
 import {
+  doHideNotification,
   doWalletStatus,
   doWalletEncrypt,
   selectWalletEncryptPending,
   selectWalletEncryptSucceeded,
   selectWalletEncryptResult,
 } from 'lbry-redux';
-import { doHideModal } from 'redux/actions/app';
 import ModalWalletEncrypt from './view';
 
 const select = state => ({
@@ -15,7 +15,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   encryptWallet: password => dispatch(doWalletEncrypt(password)),
   updateWalletStatus: () => dispatch(doWalletStatus()),
 });

src/renderer/modal/modalWalletUnlock/index.js

@@ -1,10 +1,11 @@
 import { connect } from 'react-redux';
 import {
+  doHideNotification,
   doWalletUnlock,
   selectWalletUnlockPending,
   selectWalletUnlockSucceeded,
 } from 'lbry-redux';
-import { doQuit, doHideModal } from 'redux/actions/app';
+import { doQuit } from 'redux/actions/app';
 import ModalWalletUnlock from './view';
 
 const select = state => ({
@@ -12,7 +13,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideModal()),
+  closeModal: () => dispatch(doHideNotification()),
   quit: () => dispatch(doQuit()),
   unlockWallet: password => dispatch(doWalletUnlock(password)),
 });

src/renderer/modal/modalWelcome/index.js

@@ -1,13 +1,13 @@
 import * as settings from 'constants/settings';
 import { connect } from 'react-redux';
-import { doHideModal } from 'redux/actions/app';
+import { doHideNotification } from 'lbry-redux';
 import { doSetClientSetting } from 'redux/actions/settings';
 import ModalWelcome from './view';
 
 const perform = dispatch => () => ({
   closeModal: () => {
     dispatch(doSetClientSetting(settings.NEW_USER_ACKNOWLEDGED, true));
-    dispatch(doHideModal());
+    dispatch(doHideNotification());
   },
 });
 

src/renderer/page/file/index.js

@@ -14,12 +14,12 @@ import {
   makeSelectClaimForUri,
   makeSelectContentTypeForUri,
   makeSelectMetadataForUri,
+  doNotify,
   makeSelectChannelForClaimUri,
 } from 'lbry-redux';
 import { selectShowNsfw, makeSelectClientSetting } from 'redux/selectors/settings';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import { doPrepareEdit } from 'redux/actions/publish';
-import { doOpenModal } from 'redux/actions/app';
 import FilePage from './view';
 
 const select = (state, props) => ({
@@ -41,7 +41,7 @@ const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
   fetchFileInfo: uri => dispatch(doFetchFileInfo(uri)),
   fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+  openModal: (modal, props) => dispatch(doNotify(modal, props)),
   prepareEdit: (publishData, uri) => dispatch(doPrepareEdit(publishData, uri)),
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
   setViewed: uri => dispatch(doSetContentHistoryItem(uri)),

src/renderer/page/file/view.jsx

@@ -3,8 +3,7 @@ import type { Claim, Metadata } from 'types/claim';
 import type { FileInfo } from 'types/file_info';
 import * as React from 'react';
 import * as settings from 'constants/settings';
-import * as MODALS from 'constants/modal_types';
-import { buildURI, normalizeURI } from 'lbry-redux';
+import { buildURI, normalizeURI, MODALS } from 'lbry-redux';
 import FileViewer from 'component/fileViewer';
 import Thumbnail from 'component/common/thumbnail';
 import FilePrice from 'component/filePrice';
@@ -43,7 +42,7 @@ type Props = {
   channelUri: string,
   prepareEdit: ({}, string) => void,
   navigate: (string, ?{}) => void,
-  openModal: (id: string, { uri: string }) => void,
+  openModal: ({ id: string }, { uri: string }) => void,
   setClientSetting: (string, string | boolean | number) => void,
   markSubscriptionRead: (string, string) => void,
 };
@@ -215,14 +214,14 @@ class FilePage extends React.Component<Props> {
                     button="alt"
                     icon={icons.GIFT}
                     label={__('Send a tip')}
-                    onClick={() => openModal(MODALS.SEND_TIP, { uri })}
+                    onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
                   />
                 )}
                 <Button
                   button="alt"
                   icon={icons.GLOBE}
                   label={__('Share')}
-                  onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, speechShareable })}
+                  onClick={() => openModal({ id: MODALS.SOCIAL_SHARE }, { uri, speechShareable })}
                 />
               </div>
 

src/renderer/page/report/view.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from 'component/button';
 import { FormRow, FormField } from 'component/common/form';
-import { Lbry, doToast } from 'lbry-redux';
+import { Lbry, doNotify } from 'lbry-redux';
 import Page from 'component/page';
 
 class ReportPage extends React.Component {
@@ -32,7 +32,7 @@ class ReportPage extends React.Component {
         });
 
         // Display global notice
-        const action = doToast({
+        const action = doNotify({
           displayType: ['snackbar'],
           message: __('Message received! Thanks for helping.'),
           isError: false,

src/renderer/redux/actions/app.js

@@ -2,13 +2,15 @@ import { execSync } from 'child_process';
 import isDev from 'electron-is-dev';
 import path from 'path';
 import { ipcRenderer, remote } from 'electron';
-import * as ACTIONS from 'constants/action_types';
-import * as MODALS from 'constants/modal_types';
 import {
+  ACTIONS,
   Lbry,
   doBalanceSubscribe,
   doFetchFileInfosAndPublishedClaims,
+  doNotify,
   selectNotification,
+  MODALS,
+  doHideNotification,
 } from 'lbry-redux';
 import Native from 'native';
 import { doFetchDaemonSettings } from 'redux/actions/settings';
@@ -87,9 +89,11 @@ export function doDownloadUpgrade() {
     dispatch({
       type: ACTIONS.UPGRADE_DOWNLOAD_STARTED,
     });
-    dispatch(doHideModal());
+    dispatch(doHideNotification());
     dispatch(
-      doOpenModal(MODALS.DOWNLOADING)
+      doNotify({
+        id: MODALS.DOWNLOADING,
+      })
     );
   };
 }
@@ -110,13 +114,17 @@ export function doDownloadUpgradeRequested() {
       if (autoUpdateDeclined) {
         // The user declined an update before, so show the "confirm" dialog
         dispatch(
-          doOpenModal(MODALS.AUTO_UPDATE_CONFIRM)
+          doNotify({
+            id: MODALS.AUTO_UPDATE_CONFIRM,
+          })
         );
       } else {
         // The user was never shown the original update dialog (e.g. because they were
         // watching a video). So show the inital "update downloaded" dialog.
         dispatch(
-          doOpenModal(MODALS.AUTO_UPDATE_DOWNLOADED)
+          doNotify({
+            id: MODALS.AUTO_UPDATE_DOWNLOADED,
+          })
         );
       }
     } else {
@@ -146,7 +154,9 @@ export function doAutoUpdate() {
     });
 
     dispatch(
-      doOpenModal(MODALS.AUTO_UPDATE_DOWNLOADED)
+      doNotify({
+        id: MODALS.AUTO_UPDATE_DOWNLOADED,
+      })
     );
 
     dispatch(doClearUpgradeTimer());
@@ -220,7 +230,9 @@ export function doCheckUpgradeAvailable() {
         (!selectIsUpgradeSkipped(state) || remoteVersion !== selectRemoteVersion(state))
       ) {
         dispatch(
-          doOpenModal(MODALS.UPGRADE)
+          doNotify({
+            id: MODALS.UPGRADE,
+          })
         );
       }
     };
@@ -267,7 +279,9 @@ export function doCheckDaemonVersion() {
       });
 
       return dispatch(
-        doOpenModal(MODALS.INCOMPATIBLE_DAEMON)
+        doNotify({
+          id: MODALS.INCOMPATIBLE_DAEMON,
+        })
       );
     });
   };
@@ -276,7 +290,9 @@ export function doCheckDaemonVersion() {
 export function doNotifyEncryptWallet() {
   return dispatch => {
     dispatch(
-      doOpenModal(MODALS.WALLET_ENCRYPT)
+      doNotify({
+        id: MODALS.WALLET_ENCRYPT,
+      })
     );
   };
 }
@@ -284,7 +300,9 @@ export function doNotifyEncryptWallet() {
 export function doNotifyDecryptWallet() {
   return dispatch => {
     dispatch(
-      doOpenModal(MODALS.WALLET_DECRYPT)
+      doNotify({
+        id: MODALS.WALLET_DECRYPT,
+      })
     );
   };
 }
@@ -292,7 +310,9 @@ export function doNotifyDecryptWallet() {
 export function doNotifyUnlockWallet() {
   return dispatch => {
     dispatch(
-      doOpenModal(MODALS.WALLET_UNLOCK)
+      doNotify({
+        id: MODALS.WALLET_UNLOCK,
+      })
     );
   };
 }
@@ -300,7 +320,10 @@ export function doNotifyUnlockWallet() {
 export function doAlertError(errorList) {
   return dispatch => {
     dispatch(
-      doError(errorList)
+      doNotify({
+        id: MODALS.ERROR,
+        error: errorList,
+      })
     );
   };
 }
@@ -374,19 +397,3 @@ export function doConditionalAuthNavigate(newSession) {
     }
   };
 }
-
-export function doOpenModal(id, modalProps = {}) {
-  return {
-    type: ACTIONS.SHOW_MODAL,
-    data: {
-      id,
-      modalProps,
-    },
-  };
-}
-
-export function doHideModal() {
-  return {
-    type: ACTIONS.HIDE_MODAL
-  }
-}

src/renderer/redux/actions/content.js

@@ -1,8 +1,7 @@
 // @flow
 import * as NOTIFICATION_TYPES from 'constants/subscriptions';
-import * as MODALS from 'constants/modal_types';
 import { ipcRenderer } from 'electron';
-import { doOpenModal } from 'redux/actions/app';
+import { doAlertError } from 'redux/actions/app';
 import { doNavigate } from 'redux/actions/navigation';
 import { setSubscriptionLatest, doUpdateUnreadSubscriptions } from 'redux/actions/subscriptions';
 import { makeSelectUnreadByChannel } from 'redux/selectors/subscriptions';
@@ -20,9 +19,10 @@ import {
   selectDownloadingByOutpoint,
   selectTotalDownloadProgress,
   selectBalance,
+  MODALS,
+  doNotify,
   makeSelectChannelForClaimUri,
   parseURI,
-  doError,
 } from 'lbry-redux';
 import { makeSelectClientSetting, selectosNotificationsEnabled } from 'redux/selectors/settings';
 import setBadge from 'util/setBadge';
@@ -180,10 +180,10 @@ function handleLoadVideoError(uri, errorType = '') {
       });
       dispatch(doSetPlayingUri(null));
       if (errorType === 'timeout') {
-        doOpenModal(MODALS.FILE_TIMEOUT, { uri });
+        doNotify({ id: MODALS.FILE_TIMEOUT }, { uri });
       } else {
         dispatch(
-          doError(
+          doAlertError(
             `Failed to download ${uri}, please try again. If this problem persists, visit https://lbry.io/faq/support for support.`
           )
         );
@@ -236,7 +236,7 @@ export function doPurchaseUri(uri, specificCostInfo, shouldRecordViewEvent) {
 
     function attemptPlay(cost, instantPurchaseMax = null) {
       if (cost > 0 && (!instantPurchaseMax || cost > instantPurchaseMax)) {
-        dispatch(doOpenModal(MODALS.AFFIRM_PURCHASE, { uri }));
+        dispatch(doNotify({ id: MODALS.AFFIRM_PURCHASE }, { uri }));
       } else {
         dispatch(doLoadVideo(uri, shouldRecordViewEvent));
       }
@@ -264,7 +264,7 @@ export function doPurchaseUri(uri, specificCostInfo, shouldRecordViewEvent) {
 
     if (cost > balance) {
       dispatch(doSetPlayingUri(null));
-      dispatch(doOpenModal(MODALS.INSUFFICIENT_CREDITS));
+      dispatch(doNotify({ id: MODALS.INSUFFICIENT_CREDITS }));
       Promise.resolve();
       return;
     }

src/renderer/redux/actions/file.js

@@ -7,8 +7,8 @@ import {
   selectMyClaimsOutpoints,
   selectFileInfosByOutpoint,
   selectTotalDownloadProgress,
+  doHideNotification,
 } from 'lbry-redux';
-import { doHideModal } from 'redux/actions/app';
 import { doHistoryBack } from 'redux/actions/navigation';
 import setProgressBar from 'util/setProgressBar';
 
@@ -65,7 +65,7 @@ export function doDeleteFile(outpoint, deleteFromComputer, abandonClaim) {
 export function doDeleteFileAndGoBack(fileInfo, deleteFromComputer, abandonClaim) {
   return dispatch => {
     const actions = [];
-    actions.push(doHideModal());
+    actions.push(doHideNotification());
     actions.push(doHistoryBack());
     actions.push(doDeleteFile(fileInfo, deleteFromComputer, abandonClaim));
     dispatch(batchActions(...actions));

src/renderer/redux/actions/publish.js

@@ -6,17 +6,17 @@ import type {
   UpdatePublishFormAction,
   PublishParams,
 } from 'redux/reducers/publish';
-import * as MODALS from 'constants/modal_types';
 import {
   ACTIONS,
   Lbry,
+  doNotify,
+  MODALS,
   selectMyChannelClaims,
   THUMBNAIL_STATUSES,
   batchActions,
   creditsToString,
   selectPendingById,
 } from 'lbry-redux';
-import { doOpenModal } from 'redux/actions/app';
 import { selectosNotificationsEnabled } from 'redux/selectors/settings';
 import { doNavigate } from 'redux/actions/navigation';
 import fs from 'fs';
@@ -97,7 +97,7 @@ export const doUploadThumbnail = (filePath: string, nsfw: boolean) => (
           type: ACTIONS.UPDATE_PUBLISH_FORM,
           data: { uploadThumbnailStatus: THUMBNAIL_STATUSES.API_DOWN },
         },
-        dispatch(doOpenModal({ id: MODALS.ERROR, error }))
+        dispatch(doNotify({ id: MODALS.ERROR, error }))
       )
     );
 
@@ -266,12 +266,12 @@ export const doPublish = (params: PublishParams) => (
     dispatch({
       type: ACTIONS.PUBLISH_SUCCESS,
     });
-    dispatch(doOpenModal(MODALS.PUBLISH, { uri }));
+    dispatch(doNotify({ id: MODALS.PUBLISH }, { uri }));
   };
 
   const failure = error => {
     dispatch({ type: ACTIONS.PUBLISH_FAIL });
-    dispatch(doError(error.message));
+    dispatch(doNotify({ id: MODALS.ERROR, error: error.message }));
   };
 
   return Lbry.publish(publishPayload).then(success, failure);

src/renderer/redux/reducers/app.js

@@ -189,18 +189,6 @@ reducers[ACTIONS.CLEAR_UPGRADE_TIMER] = state =>
     checkUpgradeTimer: undefined,
   });
 
-reducers[ACTIONS.SHOW_MODAL] = (state, action) =>
-  Object.assign({}, state, {
-    modal: action.data.id,
-    modalProps: action.data.modalProps,
-  });
-
-reducers[ACTIONS.HIDE_MODAL] = (state, action) =>
-  Object.assign({}, state, {
-    modal: null,
-    modalProps: null,
-  });
-
 export default function reducer(state: AppState = defaultState, action: any) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

src/renderer/redux/selectors/app.js

@@ -247,14 +247,3 @@ export const selectNavLinks = createSelector(
     return navLinks;
   }
 );
-
-export const selectModal = createSelector(selectState, state => {
-  if (!state.modal) {
-    return null;
-  }
-
-  return {
-    id: state.modal,
-    modalProps: state.modalProps,
-  };
-});

src/renderer/scss/component/_snack-bar.scss

@@ -19,10 +19,6 @@
   z-index: 10000; // hack to get it over react modal
 }
 
-.snack-bar--error {
-  background-color: $lbry-red-5;
-}
-
 .snack-bar__action {
   display: inline-block;
   margin-bottom: 4px;