Tip: show modal instead of toast when timeout

## Issue
The toast wasn't good enough as the user might miss it and attempt to re-send.

## Change
- Change the tip timeout from Toast to Modal.
- For the case of Comments, add additional info about being unable to re-link the txid to the comment for now. Not really useful to the user, but better than nothing.

static/app-strings.json

@@ -2276,5 +2276,7 @@
   "Clear History": "Clear History",
   "Reset homepage to defaults?": "Reset homepage to defaults?",
   "Homepage restored to default.": "Homepage restored to default.",
+  "The transaction timed out, but may have been completed. Please wait a few minutes, then check your wallet transactions before attempting to retry.": "The transaction timed out, but may have been completed. Please wait a few minutes, then check your wallet transactions before attempting to retry.",
+  "The transaction timed out, but may have been completed. Please wait a few minutes, then check your wallet transactions before attempting to retry. Note that due to current limitations, we are unable to re-link the tip sent to a new comment.": "The transaction timed out, but may have been completed. Please wait a few minutes, then check your wallet transactions before attempting to retry. Note that due to current limitations, we are unable to re-link the tip sent to a new comment.",
   "--end--": "--end--"
 }

ui/component/commentCreate/view.jsx

@@ -72,7 +72,14 @@ type Props = {
     preferredCurrency: string,
     (any) => void
   ) => string,
-  doSendTip: (params: {}, isSupport: boolean, successCb: (any) => void, errorCb: (any) => void, boolean) => void,
+  doSendTip: (
+    params: {},
+    isSupport: boolean,
+    successCb: (any) => void,
+    errorCb: (any) => void,
+    boolean,
+    string
+  ) => void,
   doOpenModal: (id: string, any) => void,
   preferredCurrency: string,
   myChannelClaimIds: ?Array<string>,
@@ -314,7 +321,8 @@ export function CommentCreate(props: Props) {
           // reset the frontend so people can send a new comment
           setSubmitting(false);
         },
-        false
+        false,
+        'comment'
       );
     } else {
       const tipParams: TipParams = { tipAmount: Math.round(tipAmount * 100) / 100, tipChannelName, channelClaimId };

ui/constants/errors.js

@@ -1,4 +1,5 @@
 export const ALREADY_CLAIMED = 'once the invite reward has been claimed the referrer cannot be changed';
 export const REFERRER_NOT_FOUND = 'A odysee account could not be found for the referrer you provided.';
 export const PUBLISH_TIMEOUT_BUT_LIKELY_SUCCESSFUL = 'There was a network error, but the publish may have been completed. Wait a few minutes, then check your Uploads or Wallet page to confirm.';
+export const SDK_FETCH_TIMEOUT = 'Your action timed out, but may have been completed.';
 export const FETCH_TIMEOUT = 'promise timeout';

ui/lbry.js

@@ -1,6 +1,6 @@
 // @flow
 import analytics from 'analytics';
-import { FETCH_TIMEOUT } from 'constants/errors';
+import { FETCH_TIMEOUT, SDK_FETCH_TIMEOUT } from 'constants/errors';
 import { NO_AUTH, X_LBRY_AUTH_TOKEN } from 'constants/token';
 import fetchWithTimeout from 'util/fetch';
 
@@ -245,7 +245,7 @@ function resolveFetchErrorMsg(method: string, response: Response | string) {
         return `${method}: ${response.statusText} (${response.status})`;
     }
   } else if (response === FETCH_TIMEOUT) {
-    return `${method}: Your action timed out, but may have been completed.`;
+    return `${method}: ${SDK_FETCH_TIMEOUT}`; // Don't translate as clients will do a string match.
   } else {
     return `${method}: fetch failed.`;
   }

ui/redux/actions/wallet.js

@@ -1,6 +1,9 @@
 import * as ACTIONS from 'constants/action_types';
+import * as MODALS from 'constants/modal_types';
+import * as ERRORS from 'constants/errors';
 import Lbry from 'lbry';
 import { Lbryio } from 'lbryinc';
+import { doOpenModal } from 'redux/actions/app';
 import { doToast } from 'redux/actions/notifications';
 import {
   selectBalance,
@@ -345,7 +348,7 @@ export function doSetDraftTransactionAddress(address) {
   };
 }
 
-export function doSendTip(params, isSupport, successCallback, errorCallback, shouldNotify = true) {
+export function doSendTip(params, isSupport, successCallback, errorCallback, shouldNotify = true, purpose = '') {
   return (dispatch, getState) => {
     const state = getState();
     const balance = selectBalance(state);
@@ -395,18 +398,32 @@ export function doSendTip(params, isSupport, successCallback, errorCallback, sho
       const baseMsg = isSupport ? __('Boost transaction failed.') : __('Tip transaction failed.');
       const errMsg = typeof err === 'object' ? err.message : err;
 
-      // For now, spew to console for persistence until the Status Log component is ready.
-      // eslint-disable-next-line no-console
-      console.log(`${baseMsg}\n • ${errMsg}`);
+      if (errMsg.endsWith(ERRORS.SDK_FETCH_TIMEOUT)) {
+        let msg;
 
-      dispatch(
-        doToast({
-          message: baseMsg,
-          subMessage: errMsg,
-          isError: true,
-          duration: 'long',
-        })
-      );
+        switch (purpose) {
+          case 'comment':
+            msg = __(
+              'The transaction timed out, but may have been completed. Please wait a few minutes, then check your wallet transactions before attempting to retry. Note that due to current limitations, we are unable to re-link the tip sent to a new comment.'
+            );
+            break;
+
+          default:
+            msg = __(
+              'The transaction timed out, but may have been completed. Please wait a few minutes, then check your wallet transactions before attempting to retry.'
+            );
+            break;
+        }
+
+        dispatch(
+          doOpenModal(MODALS.CONFIRM, {
+            title: baseMsg,
+            body: msg,
+            onConfirm: (closeModal) => closeModal(),
+            hideCancel: true,
+          })
+        );
+      }
 
       dispatch({
         type: ACTIONS.SUPPORT_TRANSACTION_FAILED,