From 4e94ccf53e82886e514c4c4b653f0a1b0da48dbd Mon Sep 17 00:00:00 2001 From: ost-ptk Date: Wed, 22 Nov 2023 17:25:09 +0200 Subject: [PATCH] added error handling for transfer and stakes --- src/apps/popup/app-router.tsx | 12 +- src/apps/popup/pages/stakes/index.tsx | 17 +- src/apps/popup/pages/transfer-nft/index.tsx | 17 +- src/apps/popup/pages/transfer/index.tsx | 33 +- src/apps/popup/router/types.ts | 5 +- src/assets/illustrations/error.svg | 711 ++++++++++++++++++++ 6 files changed, 784 insertions(+), 11 deletions(-) create mode 100644 src/assets/illustrations/error.svg diff --git a/src/apps/popup/app-router.tsx b/src/apps/popup/app-router.tsx index 10691c271..2d9c6cf6a 100644 --- a/src/apps/popup/app-router.tsx +++ b/src/apps/popup/app-router.tsx @@ -21,7 +21,7 @@ import { CreateAccountPage } from '@src/apps/popup/pages/create-account'; import { DownloadSecretKeysPage } from '@popup/pages/download-secret-keys'; import { DownloadedSecretKeysPage } from '@popup/pages/downloaded-secret-keys'; -import { RouterPath, useTypedLocation } from '@popup/router'; +import { RouterPath, useTypedLocation, useTypedNavigate } from '@popup/router'; import { selectVaultHasAccounts } from '@background/redux/vault/selectors'; @@ -38,6 +38,7 @@ import { WalletQrCodePage } from '@popup/pages/wallet-qr-code'; import { TransferNftPage } from '@popup/pages/transfer-nft'; import { ChangePasswordPage } from '@popup/pages/change-password'; import { StakesPage } from '@popup/pages/stakes'; +import { ErrorPath, WindowErrorPage } from '@layout/error'; export function AppRouter() { const isLocked = useSelector(selectVaultIsLocked); @@ -255,6 +256,15 @@ function AppRoutes() { /> } /> } /> + + } + /> ); } diff --git a/src/apps/popup/pages/stakes/index.tsx b/src/apps/popup/pages/stakes/index.tsx index 0eaae0a29..c1be096b7 100644 --- a/src/apps/popup/pages/stakes/index.tsx +++ b/src/apps/popup/pages/stakes/index.tsx @@ -42,6 +42,7 @@ import { dispatchFetchValidatorsDetailsDataRequest } from '@libs/services/validators-service'; import { NoDelegations } from '@popup/pages/stakes/no-delegations'; +import { createErrorLocationState, ErrorPath } from '@layout/error'; export const StakesPage = () => { const [stakeStep, setStakeStep] = useState(StakeSteps.Validator); @@ -204,10 +205,22 @@ export const StakesPage = () => { triesLeft--; // Note: this timeout is needed because the deploy is not immediately visible in the explorer }, 2000); + + setStakeStep(StakeSteps.Success); + } else { + navigate( + ErrorPath, + createErrorLocationState({ + errorHeaderText: t('Something went wrong'), + errorContentText: t( + 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' + ), + errorPrimaryButtonLabel: t('Close'), + errorRedirectPath: RouterPath.Home + }) + ); } }); - // TODO: need UI in case when the delegation request is failed - setStakeStep(StakeSteps.Success); } }; diff --git a/src/apps/popup/pages/transfer-nft/index.tsx b/src/apps/popup/pages/transfer-nft/index.tsx index 4304bef96..770b11ac8 100644 --- a/src/apps/popup/pages/transfer-nft/index.tsx +++ b/src/apps/popup/pages/transfer-nft/index.tsx @@ -36,6 +36,7 @@ import { accountTrackingIdOfSentNftTokensChanged } from '@background/redux/account-info/actions'; import { createAsymmetricKey } from '@libs/crypto/create-asymmetric-key'; +import { createErrorLocationState, ErrorPath } from '@layout/error'; export const TransferNftPage = () => { const [showSuccessScreen, setShowSuccessScreen] = useState(false); @@ -153,10 +154,22 @@ export const TransferNftPage = () => { triesLeft--; // Note: this timeout is needed because the deploy is not immediately visible in the explorer }, 2000); + + setShowSuccessScreen(true); + } else { + navigate( + ErrorPath, + createErrorLocationState({ + errorHeaderText: t('Something went wrong'), + errorContentText: t( + 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' + ), + errorPrimaryButtonLabel: t('Close'), + errorRedirectPath: RouterPath.Home + }) + ); } }); - - setShowSuccessScreen(true); } }; diff --git a/src/apps/popup/pages/transfer/index.tsx b/src/apps/popup/pages/transfer/index.tsx index 306ff1a3d..f29143c0f 100644 --- a/src/apps/popup/pages/transfer/index.tsx +++ b/src/apps/popup/pages/transfer/index.tsx @@ -39,6 +39,7 @@ import { useActiveAccountErc20Tokens } from '@src/hooks/use-active-account-erc20 import { selectAccountBalance } from '@src/background/redux/account-info/selectors'; import { dispatchFetchExtendedDeploysInfo } from '@src/libs/services/account-activity-service'; import { accountPendingTransactionsChanged } from '@src/background/redux/account-info/actions'; +import { createErrorLocationState, ErrorPath } from '@layout/error'; import { getIsErc20Transfer, TransactionSteps } from './utils'; @@ -224,9 +225,21 @@ export const TransferPage = () => { triesLeft--; // Note: this timeout is needed because the deploy is not immediately visible in the explorer }, 2000); + + setTransferStep(TransactionSteps.Success); + } else { + navigate( + ErrorPath, + createErrorLocationState({ + errorHeaderText: t('Something went wrong'), + errorContentText: t( + 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' + ), + errorPrimaryButtonLabel: t('Close'), + errorRedirectPath: RouterPath.Home + }) + ); } - // TODO: need UI in case when the transfer is failed - setTransferStep(TransactionSteps.Success); }); } else { // CSPR transfer @@ -265,9 +278,21 @@ export const TransferPage = () => { triesLeft--; // Note: this timeout is needed because the deploy is not immediately visible in the explorer }, 2000); + + setTransferStep(TransactionSteps.Success); + } else { + navigate( + ErrorPath, + createErrorLocationState({ + errorHeaderText: t('Something went wrong'), + errorContentText: t( + 'Please check browser console for error details, this will be a valuable for our team to fix the issue.' + ), + errorPrimaryButtonLabel: t('Close'), + errorRedirectPath: RouterPath.Home + }) + ); } - // TODO: need UI in case when the transfer is failed - setTransferStep(TransactionSteps.Success); }); } } diff --git a/src/apps/popup/router/types.ts b/src/apps/popup/router/types.ts index 1156cf0f5..a8336b22a 100644 --- a/src/apps/popup/router/types.ts +++ b/src/apps/popup/router/types.ts @@ -1,7 +1,8 @@ import { ActivityType } from '@src/constants'; import { TokenType } from '@src/hooks'; +import { ErrorLocationState } from '@layout/error'; -export type LocationState = { +export interface LocationState extends ErrorLocationState { showNavigationMenu?: boolean; activityDetailsData?: { fromAccount: string; @@ -18,4 +19,4 @@ export type LocationState = { contentType: string; url?: string; }; -}; +} diff --git a/src/assets/illustrations/error.svg b/src/assets/illustrations/error.svg new file mode 100644 index 000000000..3657d2e53 --- /dev/null +++ b/src/assets/illustrations/error.svg @@ -0,0 +1,711 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +