move modals to app and use doToast/doError

src/renderer/component/address/index.js

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

src/renderer/component/address/view.jsx

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

src/renderer/component/app/index.js

@@ -4,10 +4,10 @@ import {
   selectHistoryIndex,
   selectActiveHistoryEntry,
   doUpdateBlockHeight,
+  doError,
 } 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';
 
@@ -20,7 +20,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  alertError: errorList => dispatch(doAlertError(errorList)),
+  alertError: errorList => dispatch(doError(errorList)),
   recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)),
   updateBlockHeight: () => dispatch(doUpdateBlockHeight()),
 });

src/renderer/component/copyableText/index.js

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

src/renderer/component/copyableText/view.jsx

@@ -4,15 +4,10 @@ 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,
-  noSnackbar: boolean,
-  doNotify: ({ message: string, displayType: Array<string> }) => void,
+  doToast: ({ message: string }) => void,
 };
 
 export default class CopyableText extends React.PureComponent<Props> {
@@ -25,7 +20,7 @@ export default class CopyableText extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 
   render() {
-    const { copyable, doNotify, noSnackbar } = this.props;
+    const { copyable, doToast, noSnackbar } = this.props;
 
     return (
       <FormRow verticallyCentered padded stretch>
@@ -49,12 +44,9 @@ export default class CopyableText extends React.PureComponent<Props> {
           icon={icons.CLIPBOARD}
           onClick={() => {
             clipboard.writeText(copyable);
-            if (!noSnackbar) {
-              doNotify({
-                message: __('Text copied'),
-                displayType: ['snackbar'],
-              });
-            }
+            doToast({
+              message: __('Text copied'),
+            });
           }}
         />
       </FormRow>

src/renderer/component/externalLink/index.js

@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
-import { doNotify } from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
 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(doNotify(modal, props)),
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
 });
 
 export default connect(

src/renderer/component/externalLink/view.jsx

@@ -1,7 +1,8 @@
 // @flow
+import * as MODALS from 'constants/modal_types';
+import * as ICONS from 'constants/icons';
 import * as React from 'react';
-import { MODALS, isURIValid } from 'lbry-redux';
-import * as icons from 'constants/icons';
+import { isURIValid } from 'lbry-redux';
 import Button from 'component/button';
 
 type Props = {
@@ -9,7 +10,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> {
@@ -33,11 +34,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({ id: MODALS.CONFIRM_EXTERNAL_LINK }, { uri: href })}
+          onClick={() => openModal(MODALS.CONFIRM_EXTERNAL_LINK, { uri: href })}
         />
       );
     }

src/renderer/component/fileActions/index.js

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

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

src/renderer/component/router/index.js

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

src/renderer/component/router/view.jsx

@@ -23,9 +23,8 @@ import UserHistoryPage from 'page/userHistory';
 const route = (props, page, routesMap) => {
   const component = routesMap[page];
   if (!component) {
-    props.doNotify({
+    props.doToast({
       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 { doNotify } from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
 import SelectThumbnail from './view';
 
 const perform = dispatch => ({
-  openModal: (modal, props) => dispatch(doNotify(modal, props)),
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
 });
 
 export default connect(

src/renderer/component/selectThumbnail/view.jsx

@@ -1,5 +1,6 @@
 // @flow
-import { THUMBNAIL_STATUSES, MODALS } from 'lbry-redux';
+import * as MODALS from 'constants/modal_types';
+import { THUMBNAIL_STATUSES } from 'lbry-redux';
 import * as React from 'react';
 import { FormField } from 'component/common/form';
 import FileSelector from 'component/common/file-selector';
@@ -118,7 +119,7 @@ class SelectThumbnail extends React.PureComponent<Props, State> {
                 currentPath={thumbnailPath}
                 fileLabel={__('Choose Thumbnail')}
                 filters={filters}
-                onFileChosen={path => openModal({ id: MODALS.CONFIRM_THUMBNAIL_UPLOAD }, { path })}
+                onFileChosen={path => openModal(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 { selectSnack, doHideNotification } from 'lbry-redux';
+import { selectToast, doDismissToast } from 'lbry-redux';
 import SnackBar from './view';
 
 const perform = dispatch => ({
-  removeSnack: () => dispatch(doHideNotification()),
+  removeSnack: () => dispatch(doDismissToast()),
 });
 
 const select = state => ({
-  snack: selectSnack(state),
+  snack: selectToast(state),
 });
 
 export default connect(

src/renderer/component/snackBar/view.jsx

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

src/renderer/component/socialShare/view.jsx

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

src/renderer/component/splash/index.js

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

src/renderer/component/splash/view.jsx

@@ -1,7 +1,8 @@
 // @flow
 import type { Status } from 'types/status';
 import * as React from 'react';
-import { Lbry, MODALS } from 'lbry-redux';
+import * as MODALS from 'constants/modal_types';
+import { Lbry } from 'lbry-redux';
 import ModalWalletUnlock from 'modal/modalWalletUnlock';
 import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
 import ModalUpgrade from 'modal/modalUpgrade';
@@ -16,7 +17,7 @@ type Props = {
   daemonVersionMatched: boolean,
   onReadyToLaunch: () => void,
   authenticate: () => void,
-  notification: ?{
+  modal: ?{
     id: string,
   },
 };
@@ -170,12 +171,11 @@ export class SplashScreen extends React.PureComponent<Props, State> {
   timeout: ?TimeoutID;
 
   render() {
-    const { notification } = this.props;
+    const { modal } = this.props;
     const { message, details, isRunning, error } = this.state;
 
-    const notificationId = notification && notification.id;
+    const modalId = modal && modal.id;
 
-    // {notificationId === MODALS.WALLET_UNLOCK && <ModalWalletUnlock />}
     return (
       <React.Fragment>
         <LoadScreen message={message} details={details} error={error} />
@@ -184,10 +184,10 @@ export class SplashScreen extends React.PureComponent<Props, State> {
             in the modals won't work. */}
         {isRunning && (
           <React.Fragment>
-            {notificationId === MODALS.WALLET_UNLOCK && <ModalWalletUnlock />}
-            {notificationId === MODALS.INCOMPATIBLE_DAEMON && <ModalIncompatibleDaemon />}
-            {notificationId === MODALS.UPGRADE && <ModalUpgrade />}
-            {notificationId === MODALS.DOWNLOADING && <ModalDownloading />}
+            {modalId === MODALS.WALLET_UNLOCK && <ModalWalletUnlock />}
+            {modalId === MODALS.INCOMPATIBLE_DAEMON && <ModalIncompatibleDaemon />}
+            {modalId === MODALS.UPGRADE && <ModalUpgrade />}
+            {modalId === 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 { doNotify } from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
 import { selectSubscriptions, makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import SubscribeButton from './view';
 
@@ -14,6 +14,6 @@ export default connect(
   {
     doChannelSubscribe,
     doChannelUnsubscribe,
-    doNotify,
+    doOpenModal,
   }
 )(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,
-  doNotify: ({ id: string }) => void,
+  doOpenModal: ({ id: string }) => void,
 };
 
 export default (props: Props) => {
@@ -25,7 +25,7 @@ export default (props: Props) => {
     uri,
     doChannelSubscribe,
     doChannelUnsubscribe,
-    doNotify,
+    doOpenModal,
     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) {
-          doNotify({ id: MODALS.FIRST_SUBSCRIPTION });
+          doOpenModal(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(doNotify(modal, props)),
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   setTransactionFilter: filterSetting => dispatch(doSetTransactionListFilter(filterSetting)),
 });
 

src/renderer/component/transactionList/view.jsx

@@ -1,10 +1,11 @@
 // @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 * as icons from 'constants/icons';
-import { MODALS, TRANSACTIONS } from 'lbry-redux';
+import { TRANSACTIONS } from 'lbry-redux';
 import TransactionListItem from './internal/transaction-list-item';
 
 export type Transaction = {
@@ -61,7 +62,7 @@ class TransactionList extends React.PureComponent<Props> {
   }
 
   revokeClaim(txid: string, nout: number) {
-    this.props.openModal({ id: MODALS.CONFIRM_CLAIM_REVOKE }, { txid, nout });
+    this.props.openModal(MODALS.CONFIRM_CLAIM_REVOKE, { txid, nout });
   }
 
   render() {

src/renderer/component/userVerify/index.js

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

src/renderer/component/walletSend/index.js

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

src/renderer/component/walletSend/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { MODALS } from 'lbry-redux';
+import * as MODALS from 'constants/modal_types';
 import Button from 'component/button';
 import { Form, FormRow, FormField } from 'component/common/form';
 import { Formik } from 'formik';
@@ -27,9 +27,8 @@ 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(notificationId, modalProps);
+      openModal(MODALS.CONFIRM_TRANSACTION, modalProps);
     }
   }
 

src/renderer/component/wunderbar/index.js

@@ -7,7 +7,7 @@ import {
   doFocusSearchInput,
   doBlurSearchInput,
   doSearch,
-  doNotify,
+  doToast,
 } 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: (modal, props) => dispatch(doNotify(modal, props)),
+  doShowSnackBar: (props) => dispatch(doToast(props)),
 });
 
 export default connect(

src/renderer/component/wunderbar/view.jsx

@@ -107,7 +107,6 @@ 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

@@ -14,6 +14,8 @@ export const DAEMON_VERSION_MATCH = 'DAEMON_VERSION_MATCH';
 export const DAEMON_VERSION_MISMATCH = 'DAEMON_VERSION_MISMATCH';
 export const VOLUME_CHANGED = 'VOLUME_CHANGED';
 export const ADD_COMMENT = 'ADD_COMMENT';
+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

@@ -0,0 +1,30 @@
+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 { doNotify, doBlackListedOutpointsSubscribe, isURIValid } from 'lbry-redux';
+import { doToast, 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,9 +74,8 @@ ipcRenderer.on('open-uri-requested', (event, uri, newSession) => {
         app.store.dispatch(doUserEmailVerify(verification.token, verification.recaptcha));
       } else {
         app.store.dispatch(
-          doNotify({
+          doToast({
             message: 'Invalid Verification URI',
-            displayType: ['snackbar'],
           })
         );
       }
@@ -87,9 +86,8 @@ ipcRenderer.on('open-uri-requested', (event, uri, newSession) => {
       app.store.dispatch(doNavigate('/show', { uri }));
     } else {
       app.store.dispatch(
-        doNotify({
+        doToast({
           message: __('Invalid LBRY URL requested'),
-          displayType: ['snackbar'],
         })
       );
     }

src/renderer/modal/modalAffirmPurchase/index.js

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

src/renderer/modal/modalAuthFailure/index.js

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

src/renderer/modal/modalAutoUpdateConfirm/index.js

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

src/renderer/modal/modalAutoUpdateDownloaded/index.js

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

src/renderer/modal/modalConfirmThumbnailUpload/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doHideNotification } from 'lbry-redux';
+import { doHideModal } from 'redux/actions/app';
 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(doHideNotification()),
+  closeModal: () => dispatch(doHideModal()),
   upload: (path, nsfw = false) => dispatch(doUploadThumbnail(path, nsfw)),
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
 });

src/renderer/modal/modalConfirmTransaction/index.js

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

src/renderer/modal/modalCreditIntro/index.js

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

src/renderer/modal/modalDownloading/index.js

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

src/renderer/modal/modalEmailCollection/index.js

@@ -1,6 +1,6 @@
 import * as settings from 'constants/settings';
 import { connect } from 'react-redux';
-import { doHideNotification } from 'lbry-redux';
+import { doHideModal } from 'redux/actions/app';
 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(doHideNotification());
+    dispatch(doHideModal());
   },
 });
 

src/renderer/modal/modalError/index.js

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

src/renderer/modal/modalFileTimeout/index.js

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

src/renderer/modal/modalFirstReward/index.js

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

src/renderer/modal/modalFirstSubscription/index.js

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

src/renderer/modal/modalOpenExternalLink/index.js

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

src/renderer/modal/modalPhoneCollection/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doHideNotification } from 'lbry-redux';
+import { doHideModal } from 'redux/actions/app';
 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(doHideNotification());
+    dispatch(doHideModal());
     dispatch(doNavigate('/rewards'));
   },
 });

src/renderer/modal/modalPublish/index.js

@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
-import { doHideNotification } from 'lbry-redux';
+import { doHideModal } from 'redux/actions/app';
 import ModalSendTip from './view';
 import { doClearPublish } from 'redux/actions/publish';
 import { doNavigate } from 'redux/actions/navigation';
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideNotification()),
+  closeModal: () => dispatch(doHideModal()),
   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(doHideNotification()),
+  closeModal: () => dispatch(doHideModal()),
   deleteFile: (fileInfo, deleteFromComputer, abandonClaim) => {
     dispatch(doDeleteFileAndGoBack(fileInfo, deleteFromComputer, abandonClaim));
   },

src/renderer/modal/modalRevokeClaim/index.js

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

src/renderer/modal/modalRewardApprovalRequired/index.js

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

src/renderer/modal/modalRewardCode/index.js

@@ -1,6 +1,6 @@
 // @flow
 import { connect } from 'react-redux';
-import { doHideNotification } from 'lbry-redux';
+import { doHideModal } from 'redux/actions/app';
 import {
   makeSelectClaimRewardError,
   doClaimRewardType,
@@ -17,7 +17,7 @@ const select = (state): {} => ({
 });
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideNotification()),
+  closeModal: () => dispatch(doHideModal()),
   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,
-  selectNotification,
-  selectNotificationProps,
+  selectError,
+  doToast
 } 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),
-  notification: selectNotification(state),
-  notificationProps: selectNotificationProps(state),
+  modal: selectModal(state),
+  error: selectError(state),
 });
 
 const perform = dispatch => ({
-  openModal: notification => dispatch(doNotify(notification)),
+  showToast: props => dispatch(doToast(props)),
 });
 
 export default connect(

src/renderer/modal/modalRouter/view.jsx

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

src/renderer/modal/modalSendTip/index.js

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

src/renderer/modal/modalSocialShare/index.js

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

src/renderer/modal/modalTransactionFailed/index.js

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

src/renderer/modal/modalUpgrade/index.js

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
-import { doHideNotification } from 'lbry-redux';
-import { doDownloadUpgrade, doSkipUpgrade } from 'redux/actions/app';
+import { doDownloadUpgrade, doSkipUpgrade, doHideModal } from 'redux/actions/app';
 import ModalUpgrade from './view';
 
 const select = () => ({});
@@ -8,7 +7,7 @@ const select = () => ({});
 const perform = dispatch => ({
   downloadUpgrade: () => dispatch(doDownloadUpgrade()),
   skipUpgrade: () => {
-    dispatch(doHideNotification());
+    dispatch(doHideModal());
     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(doHideNotification()),
+  closeModal: () => dispatch(doHideModal()),
   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(doHideNotification()),
+  closeModal: () => dispatch(doHideModal()),
   encryptWallet: password => dispatch(doWalletEncrypt(password)),
   updateWalletStatus: () => dispatch(doWalletStatus()),
 });

src/renderer/modal/modalWalletUnlock/index.js

@@ -1,11 +1,10 @@
 import { connect } from 'react-redux';
 import {
-  doHideNotification,
   doWalletUnlock,
   selectWalletUnlockPending,
   selectWalletUnlockSucceeded,
 } from 'lbry-redux';
-import { doQuit } from 'redux/actions/app';
+import { doQuit, doHideModal } from 'redux/actions/app';
 import ModalWalletUnlock from './view';
 
 const select = state => ({
@@ -13,7 +12,7 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  closeModal: () => dispatch(doHideNotification()),
+  closeModal: () => dispatch(doHideModal()),
   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 { doHideNotification } from 'lbry-redux';
+import { doHideModal } from 'redux/actions/app';
 import { doSetClientSetting } from 'redux/actions/settings';
 import ModalWelcome from './view';
 
 const perform = dispatch => () => ({
   closeModal: () => {
     dispatch(doSetClientSetting(settings.NEW_USER_ACKNOWLEDGED, true));
-    dispatch(doHideNotification());
+    dispatch(doHideModal());
   },
 });
 

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(doNotify(modal, props)),
+  openModal: (modal, props) => dispatch(doOpenModal(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,7 +3,8 @@ 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 { buildURI, normalizeURI, MODALS } from 'lbry-redux';
+import * as MODALS from 'constants/modal_types';
+import { buildURI, normalizeURI } from 'lbry-redux';
 import FileViewer from 'component/fileViewer';
 import Thumbnail from 'component/common/thumbnail';
 import FilePrice from 'component/filePrice';
@@ -42,7 +43,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,
 };
@@ -214,14 +215,14 @@ class FilePage extends React.Component<Props> {
                     button="alt"
                     icon={icons.GIFT}
                     label={__('Send a tip')}
-                    onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
+                    onClick={() => openModal(MODALS.SEND_TIP, { uri })}
                   />
                 )}
                 <Button
                   button="alt"
                   icon={icons.GLOBE}
                   label={__('Share')}
-                  onClick={() => openModal({ id: MODALS.SOCIAL_SHARE }, { uri, speechShareable })}
+                  onClick={() => openModal(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, doNotify } from 'lbry-redux';
+import { Lbry, doToast } 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 = doNotify({
+        const action = doToast({
           displayType: ['snackbar'],
           message: __('Message received! Thanks for helping.'),
           isError: false,

src/renderer/redux/actions/app.js

@@ -3,14 +3,12 @@ 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 {
   Lbry,
   doBalanceSubscribe,
   doFetchFileInfosAndPublishedClaims,
-  doNotify,
   selectNotification,
-  MODALS,
-  doHideNotification,
 } from 'lbry-redux';
 import Native from 'native';
 import { doFetchDaemonSettings } from 'redux/actions/settings';
@@ -89,11 +87,9 @@ export function doDownloadUpgrade() {
     dispatch({
       type: ACTIONS.UPGRADE_DOWNLOAD_STARTED,
     });
-    dispatch(doHideNotification());
+    dispatch(doHideModal());
     dispatch(
-      doNotify({
-        id: MODALS.DOWNLOADING,
-      })
+      doOpenModal(MODALS.DOWNLOADING)
     );
   };
 }
@@ -114,17 +110,13 @@ export function doDownloadUpgradeRequested() {
       if (autoUpdateDeclined) {
         // The user declined an update before, so show the "confirm" dialog
         dispatch(
-          doNotify({
-            id: MODALS.AUTO_UPDATE_CONFIRM,
-          })
+          doOpenModal(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(
-          doNotify({
-            id: MODALS.AUTO_UPDATE_DOWNLOADED,
-          })
+          doOpenModal(MODALS.AUTO_UPDATE_DOWNLOADED)
         );
       }
     } else {
@@ -154,9 +146,7 @@ export function doAutoUpdate() {
     });
 
     dispatch(
-      doNotify({
-        id: MODALS.AUTO_UPDATE_DOWNLOADED,
-      })
+      doOpenModal(MODALS.AUTO_UPDATE_DOWNLOADED)
     );
 
     dispatch(doClearUpgradeTimer());
@@ -230,9 +220,7 @@ export function doCheckUpgradeAvailable() {
         (!selectIsUpgradeSkipped(state) || remoteVersion !== selectRemoteVersion(state))
       ) {
         dispatch(
-          doNotify({
-            id: MODALS.UPGRADE,
-          })
+          doOpenModal(MODALS.UPGRADE)
         );
       }
     };
@@ -279,9 +267,7 @@ export function doCheckDaemonVersion() {
       });
 
       return dispatch(
-        doNotify({
-          id: MODALS.INCOMPATIBLE_DAEMON,
-        })
+        doOpenModal(MODALS.INCOMPATIBLE_DAEMON)
       );
     });
   };
@@ -290,9 +276,7 @@ export function doCheckDaemonVersion() {
 export function doNotifyEncryptWallet() {
   return dispatch => {
     dispatch(
-      doNotify({
-        id: MODALS.WALLET_ENCRYPT,
-      })
+      doOpenModal(MODALS.WALLET_ENCRYPT)
     );
   };
 }
@@ -300,9 +284,7 @@ export function doNotifyEncryptWallet() {
 export function doNotifyDecryptWallet() {
   return dispatch => {
     dispatch(
-      doNotify({
-        id: MODALS.WALLET_DECRYPT,
-      })
+      doOpenModal(MODALS.WALLET_DECRYPT)
     );
   };
 }
@@ -310,9 +292,7 @@ export function doNotifyDecryptWallet() {
 export function doNotifyUnlockWallet() {
   return dispatch => {
     dispatch(
-      doNotify({
-        id: MODALS.WALLET_UNLOCK,
-      })
+      doOpenModal(MODALS.WALLET_UNLOCK)
     );
   };
 }
@@ -320,10 +300,7 @@ export function doNotifyUnlockWallet() {
 export function doAlertError(errorList) {
   return dispatch => {
     dispatch(
-      doNotify({
-        id: MODALS.ERROR,
-        error: errorList,
-      })
+      doError(errorList)
     );
   };
 }
@@ -403,3 +380,19 @@ 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,9 @@
 // @flow
 import * as NOTIFICATION_TYPES from 'constants/subscriptions';
 import { PAGE_SIZE } from 'constants/claim';
+import * as MODALS from 'constants/modal_types';
 import { ipcRenderer } from 'electron';
-import { doAlertError } from 'redux/actions/app';
+import { doOpenModal } from 'redux/actions/app';
 import { doNavigate } from 'redux/actions/navigation';
 import { setSubscriptionLatest, doUpdateUnreadSubscriptions } from 'redux/actions/subscriptions';
 import { makeSelectUnreadByChannel } from 'redux/selectors/subscriptions';
@@ -20,11 +21,10 @@ import {
   selectDownloadingByOutpoint,
   selectTotalDownloadProgress,
   selectBalance,
-  MODALS,
-  doNotify,
   makeSelectChannelForClaimUri,
   parseURI,
   creditsToString,
+  doError
 } from 'lbry-redux';
 import { makeSelectClientSetting, selectosNotificationsEnabled } from 'redux/selectors/settings';
 import setBadge from 'util/setBadge';
@@ -182,10 +182,10 @@ function handleLoadVideoError(uri, errorType = '') {
       });
       dispatch(doSetPlayingUri(null));
       if (errorType === 'timeout') {
-        doNotify({ id: MODALS.FILE_TIMEOUT }, { uri });
+        doOpenModal(MODALS.FILE_TIMEOUT, { uri });
       } else {
         dispatch(
-          doAlertError(
+          doError(
             `Failed to download ${uri}, please try again. If this problem persists, visit https://lbry.io/faq/support for support.`
           )
         );
@@ -238,7 +238,7 @@ export function doPurchaseUri(uri, specificCostInfo, shouldRecordViewEvent) {
 
     function attemptPlay(cost, instantPurchaseMax = null) {
       if (cost > 0 && (!instantPurchaseMax || cost > instantPurchaseMax)) {
-        dispatch(doNotify({ id: MODALS.AFFIRM_PURCHASE }, { uri }));
+        dispatch(doOpenModal(MODALS.AFFIRM_PURCHASE, { uri }));
       } else {
         dispatch(doLoadVideo(uri, shouldRecordViewEvent));
       }
@@ -266,7 +266,7 @@ export function doPurchaseUri(uri, specificCostInfo, shouldRecordViewEvent) {
 
     if (cost > balance) {
       dispatch(doSetPlayingUri(null));
-      dispatch(doNotify({ id: MODALS.INSUFFICIENT_CREDITS }));
+      dispatch(doOpenModal(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(doHideNotification());
+    actions.push(doHideModal());
     actions.push(doHistoryBack());
     actions.push(doDeleteFile(fileInfo, deleteFromComputer, abandonClaim));
     dispatch(batchActions(...actions));

src/renderer/redux/actions/publish.js

@@ -6,18 +6,19 @@ 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,
   selectMyClaimsWithoutChannels,
+  doError
 } 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';
@@ -98,7 +99,7 @@ export const doUploadThumbnail = (filePath: string, nsfw: boolean) => (
           type: ACTIONS.UPDATE_PUBLISH_FORM,
           data: { uploadThumbnailStatus: THUMBNAIL_STATUSES.API_DOWN },
         },
-        dispatch(doNotify({ id: MODALS.ERROR, error }))
+        dispatch(doOpenModal({ id: MODALS.ERROR, error }))
       )
     );
 
@@ -274,7 +275,7 @@ export const doPublish = (params: PublishParams) => (
       type: ACTIONS.PUBLISH_SUCCESS,
     });
 
-    actions.push(doNotify({ id: MODALS.PUBLISH }, { uri }));
+    actions.push(doOpenModal(MODALS.PUBLISH, { uri }));
 
     // We have to fake a temp claim until the new pending one is returned by claim_list_mine
     // We can't rely on claim_list_mine because there might be some delay before the new claims are returned
@@ -297,7 +298,7 @@ export const doPublish = (params: PublishParams) => (
 
   const failure = error => {
     dispatch({ type: ACTIONS.PUBLISH_FAIL });
-    dispatch(doNotify({ id: MODALS.ERROR, error: error.message }));
+    dispatch(doError(error.message))
   };
 
   return Lbry.publish(publishPayload).then(success, failure);

src/renderer/redux/reducers/app.js

@@ -193,6 +193,18 @@ reducers[ACTIONS.ADD_COMMENT] = state =>
     hasClickedComment: true,
   });
 
+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

@@ -252,3 +252,14 @@ 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,6 +19,10 @@
   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;