fix(extension): an appropriate error is now shown when a trezor user rejects a transaction (#725)

Author: AngelCastilloB

apps/browser-extension-wallet/src/lib/translations/en.json

@@ -708,6 +708,7 @@
       "send.footer.viewTransaction": "View transaction",
       "send.footer.view": "View",
       "send.footer.fail": "Back",
+      "send.footer.unauthorized": "Back",
       "send.footer.save": "Save",
       "send.footer.signing": "Signing in progress",
       "send.footer.confirmWithDevice": "Confirm with {{hardwareWallet}}",
@@ -726,6 +727,7 @@
         "buttonText": "Learn more"
       },
       "fail.oopsSomethingWentWrong": "Oops! Something went wrong",
+      "fail.unauthorizedTransaction": "The transaction was not authorized.",
       "fail.problemSubmittingYourTransaction": "There was a problem submitting your transaction.",
       "fail.clickBackAndTryAgain": "Click \"Back\" and try again.",
       "success.thisMayTakeAFewMinutesToProcessYouCanViewTheStatusByClickingViewTransaction": "This may take a few minutes to process. You can view the status by clicking view transaction.",

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransaction.tsx

@@ -6,6 +6,7 @@ import { SendTransactionSummary } from './SendTransactionSummary';
 import { ConfirmPassword } from './ConfirmPassword';
 import { TransactionSuccess } from './TransactionSuccess';
 import { TransactionFail } from './TransactionFail';
+import { UnauthorizedTransaction } from './UnauthorizedTransaction';
 import { AddressList } from './AddressList';
 import { AddressForm } from './AddressForm';
 import { SendTransactionLayout } from './SendTransactionLayout';
@@ -60,6 +61,7 @@ export const SendTransaction = withAddressBookContext(
       [Sections.CONFIRMATION]: <ConfirmPassword />,
       [Sections.SUCCESS_TX]: <TransactionSuccess />,
       [Sections.FAIL_TX]: <TransactionFail />,
+      [Sections.UNAUTHORIZED_TX]: <UnauthorizedTransaction />,
       [Sections.ADDRESS_LIST]: <AddressList isPopupView={isPopupView} scrollableTargetId={scrollableTargetId} />,
       [Sections.ADDRESS_FORM]: <AddressForm isPopupView={isPopupView} />,
       [Sections.ASSET_PICKER]: <AssetPicker isPopupView={isPopupView} />,

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionDrawer/Footer.tsx

@@ -52,6 +52,7 @@ export const nextStepBtnLabels: Partial<Record<Sections, string>> = {
   [Sections.CONFIRMATION]: 'browserView.transaction.send.footer.confirm',
   [Sections.SUCCESS_TX]: 'browserView.transaction.send.footer.viewTransaction',
   [Sections.FAIL_TX]: 'browserView.transaction.send.footer.fail',
+  [Sections.UNAUTHORIZED_TX]: 'browserView.transaction.send.footer.unauthorized',
   [Sections.ADDRESS_FORM]: 'browserView.transaction.send.footer.save',
   [Sections.ADDRESS_CHANGE]: 'addressBook.reviewModal.confirmUpdate.button'
 };
@@ -134,9 +135,11 @@ export const Footer = withAddressBookContext(
           sendEventToPostHog(PostHogAction.SendAllDoneViewTransactionClick);
           break;
         }
+        case Sections.UNAUTHORIZED_TX:
         case Sections.FAIL_TX: {
           sendEventToMatomo(isPopupView ? Events.FAIL_BACK_POPUP : Events.FAIL_BACK_BROWSER);
           sendEventToPostHog(PostHogAction.SendSomethingWentWrongBackClick);
+          break;
         }
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -212,7 +215,13 @@ export const Footer = withAddressBookContext(
         removePassword();
         // Error name is 'AuthenticationError' in dev build but 'W' in prod build
         if (error.message?.includes('Authentication failure')) {
-          setSubmitingTxState({ isPasswordValid: false, isSubmitingTx: false });
+          if (isHwSummary) {
+            sendEvent(isPopupView ? Events.TX_FAIL_POPUP : Events.TX_FAIL_BROWSER);
+            setSection({ currentSection: Sections.UNAUTHORIZED_TX });
+            setSubmitingTxState({ isSubmitingTx: false });
+          } else {
+            setSubmitingTxState({ isPasswordValid: false, isSubmitingTx: false });
+          }
         } else {
           // TODO: identify the errors and give them a value to send it with the event and track it [LW-6497]
           sendEvent(isPopupView ? Events.TX_FAIL_POPUP : Events.TX_FAIL_BROWSER);
@@ -235,7 +244,9 @@ export const Footer = withAddressBookContext(
       sendAnalytics();
       const isConfirmPass = currentSection.currentSection === Sections.CONFIRMATION;
       const txHasSucceeded = currentSection.currentSection === Sections.SUCCESS_TX;
-      const txHasFailed = currentSection.currentSection === Sections.FAIL_TX;
+      const txHasFailed =
+        currentSection.currentSection === Sections.FAIL_TX ||
+        currentSection.currentSection === Sections.UNAUTHORIZED_TX;
       const isReviewingAddress = currentSection.currentSection === Sections.ADDRESS_CHANGE;
 
       if (hasTempTxData()) {

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionDrawer/HeaderView.tsx

@@ -164,7 +164,8 @@ export const HeaderNavigation = ({ isPopupView }: HeaderNavigationProps): React.
   const onArrowIconClick = () => {
     sendAnalytics();
     const shouldRedirect =
-      isPopupView && [Sections.SUCCESS_TX, Sections.FORM, Sections.FAIL_TX].includes(section.currentSection);
+      isPopupView &&
+      [Sections.SUCCESS_TX, Sections.FORM, Sections.FAIL_TX, Sections.UNAUTHORIZED_TX].includes(section.currentSection);
     if (password) {
       removePassword();
       setSubmitingTxState({ isPasswordValid: true });
@@ -188,7 +189,7 @@ export const HeaderNavigation = ({ isPopupView }: HeaderNavigationProps): React.
         trigger_point: triggerPoint,
         [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
       });
-    } else if (section.currentSection === Sections.FAIL_TX) {
+    } else if (section.currentSection === Sections.FAIL_TX || section.currentSection === Sections.UNAUTHORIZED_TX) {
       analytics.sendEventToPostHog(PostHogAction.SendSomethingWentWrongXClick, {
         trigger_point: triggerPoint,
         [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
@@ -266,6 +267,7 @@ export const useGetHeaderText = (): Record<Sections, { title: string; subtitle?:
     },
     [Sections.SUCCESS_TX]: { title: '' },
     [Sections.FAIL_TX]: { title: '' },
+    [Sections.UNAUTHORIZED_TX]: { title: '' },
     [Sections.ADDRESS_LIST]: { title: 'browserView.transaction.send.drawer.addressBook' },
     [Sections.ADDRESS_FORM]: { title: 'browserView.transaction.send.drawer.addressForm' },
     [Sections.ASSET_PICKER]: { title: 'core.coinInputSelection.assetSelection' },
@@ -285,7 +287,9 @@ export const HeaderTitle = ({
   const [isMultipleSelectionAvailable, setMultipleSelection] = useMultipleSelection();
   const { selectedTokenList, resetTokenList } = useSelectedTokenList();
   const headerText = useGetHeaderText();
-  const shouldDisplayTitle = ![Sections.FORM, Sections.FAIL_TX].includes(section.currentSection);
+  const shouldDisplayTitle = ![Sections.FORM, Sections.FAIL_TX, Sections.UNAUTHORIZED_TX].includes(
+    section.currentSection
+  );
   const title = shouldDisplayTitle
     ? t(headerText[section.currentSection].title, { name: headerText[section.currentSection].name })
     : undefined;

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/UnauthorizedTransaction.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ResultMessage } from '@components/ResultMessage';
+import { useAnalyticsContext } from '@providers';
+import { PostHogAction, TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/AnalyticsProvider/analyticsTracker';
+import styles from './TransactionSuccessView.module.scss';
+import { useAnalyticsSendFlowTriggerPoint } from '../store';
+
+export const UnauthorizedTransaction = (): React.ReactElement => {
+  const { t } = useTranslation();
+  const analytics = useAnalyticsContext();
+  const { triggerPoint } = useAnalyticsSendFlowTriggerPoint();
+
+  useEffect(() => {
+    analytics.sendEventToPostHog(PostHogAction.SendSomethingWentWrongView, {
+      // eslint-disable-next-line camelcase
+      trigger_point: triggerPoint,
+      [TX_CREATION_TYPE_KEY]: TxCreationType.Internal
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div data-testid="tx-fail-container" className={styles.successTxContainer}>
+      <ResultMessage
+        status="error"
+        title={
+          <>
+            <div data-testid="send-error-title">{t('browserView.transaction.fail.oopsSomethingWentWrong')}</div>
+          </>
+        }
+        description={
+          <>
+            <div data-testid="send-error-description">{t('browserView.transaction.fail.unauthorizedTransaction')}</div>
+            <div data-testid="send-error-description2">{t('browserView.transaction.fail.clickBackAndTryAgain')}</div>
+          </>
+        }
+      />
+    </div>
+  );
+};

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/types.ts

@@ -9,6 +9,7 @@ export enum Sections {
   CONFIRMATION = 'confirmation',
   SUCCESS_TX = 'success_tx',
   FAIL_TX = 'fail_tx',
+  UNAUTHORIZED_TX = 'unauthorized_tx',
   ADDRESS_LIST = 'address_list',
   ADDRESS_FORM = 'address_form',
   ASSET_PICKER = 'asset_picker',