added error handling for transfer and stakes

make-software · Nov 22, 2023 · 4e94ccf · 4e94ccf
1 parent 5261e37
commit 4e94ccf
Show file tree

Hide file tree

Showing 6 changed files with 784 additions and 11 deletions.
diff --git 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() {
       />
       <Route path={RouterPath.Delegate} element={<StakesPage />} />
       <Route path={RouterPath.Undelegate} element={<StakesPage />} />
+      <Route
+        path={ErrorPath}
+        element={
+          <WindowErrorPage
+            createTypedLocation={useTypedLocation}
+            createTypedNavigate={useTypedNavigate}
+          />
+        }
+      />
     </Routes>
   );
 }
diff --git 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
@@ -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
@@ -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
@@ -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;
   };
-};
+}