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.
This commit is contained in:
infinite-persistence 2022-06-01 16:58:09 +08:00 committed by Thomas Zarebczan
parent cfa59507ba
commit 32f0d1d7a1
5 changed files with 44 additions and 16 deletions

View file

@ -2276,5 +2276,7 @@
"Clear History": "Clear History", "Clear History": "Clear History",
"Reset homepage to defaults?": "Reset homepage to defaults?", "Reset homepage to defaults?": "Reset homepage to defaults?",
"Homepage restored to default.": "Homepage restored to default.", "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--" "--end--": "--end--"
} }

View file

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

View file

@ -1,4 +1,5 @@
export const ALREADY_CLAIMED = 'once the invite reward has been claimed the referrer cannot be changed'; 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 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 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'; export const FETCH_TIMEOUT = 'promise timeout';

View file

@ -1,6 +1,6 @@
// @flow // @flow
import analytics from 'analytics'; 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 { NO_AUTH, X_LBRY_AUTH_TOKEN } from 'constants/token';
import fetchWithTimeout from 'util/fetch'; import fetchWithTimeout from 'util/fetch';
@ -245,7 +245,7 @@ function resolveFetchErrorMsg(method: string, response: Response | string) {
return `${method}: ${response.statusText} (${response.status})`; return `${method}: ${response.statusText} (${response.status})`;
} }
} else if (response === FETCH_TIMEOUT) { } 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 { } else {
return `${method}: fetch failed.`; return `${method}: fetch failed.`;
} }

View file

@ -1,6 +1,9 @@
import * as ACTIONS from 'constants/action_types'; 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 Lbry from 'lbry';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import { doOpenModal } from 'redux/actions/app';
import { doToast } from 'redux/actions/notifications'; import { doToast } from 'redux/actions/notifications';
import { import {
selectBalance, 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) => { return (dispatch, getState) => {
const state = getState(); const state = getState();
const balance = selectBalance(state); 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 baseMsg = isSupport ? __('Boost transaction failed.') : __('Tip transaction failed.');
const errMsg = typeof err === 'object' ? err.message : err; const errMsg = typeof err === 'object' ? err.message : err;
// For now, spew to console for persistence until the Status Log component is ready. if (errMsg.endsWith(ERRORS.SDK_FETCH_TIMEOUT)) {
// eslint-disable-next-line no-console let msg;
console.log(`${baseMsg}\n${errMsg}`);
dispatch( switch (purpose) {
doToast({ case 'comment':
message: baseMsg, msg = __(
subMessage: errMsg, '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.'
isError: true, );
duration: 'long', 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({ dispatch({
type: ACTIONS.SUPPORT_TRANSACTION_FAILED, type: ACTIONS.SUPPORT_TRANSACTION_FAILED,