ID-1051: Error handling improvements

Author: haydenfowler

packages/passport/sdk-sample-app/src/components/imx/Order.tsx

@@ -108,6 +108,10 @@ function Order({ showModal, setShowModal }: ModalProps) {
         tokenId: asset.token_id,
         tokenAddress: asset.token_address,
       },
+      fees: [{
+        address: '0x8e70719571e87a328696ad099a7d9f6adc120892',
+        fee_percentage: 1,
+      }],
     };
     try {
       await imxProvider.createOrder(request);

packages/passport/sdk-sample-app/src/components/imx/Trade.tsx

@@ -54,17 +54,21 @@ function Trade({ showModal: showTradeModal, setShowModal: setShowTradeModal }: M
       const request: GetSignableTradeRequest = {
         order_id: id,
         user,
+        fees: [{
+          address: '0x8e70719571e87a328696ad099a7d9f6adc120892',
+          fee_percentage: 1,
+        }],
       };
       const createTradeResponse = await imxProvider?.createTrade(request);
       if (createTradeResponse) {
         setLoadingTrade(false);
         setTradeIndex(null);
-        addMessage(`Successfully purchased with Order ID ${id}`);
+        addMessage('CreateTrade', `Successfully purchased with Order ID ${id}`);
         handleCloseTrade();
       }
     } catch (err) {
       if (err instanceof Error) {
-        addMessage(err.toString());
+        addMessage('CreateTrade', err);
         handleCloseTrade();
       }
     }

packages/passport/sdk-sample-app/src/components/zkevm/Request.tsx

@@ -147,7 +147,7 @@ function Request({ showModal, setShowModal }: ModalProps) {
     try {
       const result = await zkEvmProvider?.request(request);
       setLoadingRequest(false);
-      addMessage(selectedEthMethod?.name, result);
+      addMessage(request.method, result);
       handleClose();
     } catch (err) {
       addMessage('Request', err);

packages/passport/sdk-sample-app/src/context/PassportProvider.tsx

@@ -129,7 +129,7 @@ export function PassportProvider({
       setZkEvmProvider(undefined);
     } catch (err) {
       if (err instanceof Error) {
-        addMessage(err.toString());
+        addMessage('Logout', err);
       }
       console.error(err);
     } finally {

packages/passport/sdk-sample-app/src/context/StatusProvider.tsx

@@ -1,6 +1,7 @@
 import React, {
   createContext, useCallback, useContext, useMemo, useState,
 } from 'react';
+import { PassportError } from '@imtbl/passport';
 
 const MessageContext = createContext<{
   messages: string[],
@@ -21,12 +22,17 @@ export function StatusProvider({
   const [isLoading, setIsLoading] = useState(false);
 
   const addMessage = useCallback((operation: string, ...args: any[]) => {
-    const messageString = args.map((arg) => {
-      if (arg instanceof Error) {
-        return arg.toString();
-      }
-      return JSON.stringify(arg, null, 2);
-    }).join(': ');
+    let messageString: string;
+    if (args[0] instanceof PassportError) {
+      messageString = `${args[0].type}: ${args[0].message}`;
+    } else {
+      messageString = args.map((arg) => {
+        if (arg instanceof Error) {
+          return arg.toString();
+        }
+        return JSON.stringify(arg, null, 2);
+      }).join(': ');
+    }
     setMessages((prevMessages) => [...prevMessages, `${operation}: ${messageString}`]);
   }, []);
 

packages/passport/sdk/src/authManager.test.ts

@@ -225,7 +225,7 @@ describe('AuthManager', () => {
 
       await expect(() => authManager.login()).rejects.toThrow(
         new PassportError(
-          `${PassportErrorType.AUTHENTICATION_ERROR}: ${mockErrorMsg}`,
+          mockErrorMsg,
           PassportErrorType.AUTHENTICATION_ERROR,
         ),
       );
@@ -308,7 +308,7 @@ describe('AuthManager', () => {
 
       await expect(() => manager.logout()).rejects.toThrow(
         new PassportError(
-          `${PassportErrorType.LOGOUT_ERROR}: ${mockErrorMsg}`,
+          mockErrorMsg,
           PassportErrorType.LOGOUT_ERROR,
         ),
       );

packages/passport/sdk/src/confirmation/confirmation.test.ts

@@ -81,7 +81,7 @@ describe('confirmation', () => {
       confirmationScreen.loading();
 
       expect(res.confirmed).toEqual(false);
-      expect(mockNewWindow.location.href).toEqual('https://passport.sandbox.immutable.com/transaction-confirmation/transaction.html?transactionId=transactionId123&imxEtherAddress=0x1234&chainType=starkex');
+      expect(mockNewWindow.location.href).toEqual('https://passport.sandbox.immutable.com/transaction-confirmation/transaction?transactionId=transactionId123&imxEtherAddress=0x1234&chainType=starkex');
     });
   });
 

packages/passport/sdk/src/confirmation/confirmation.ts

@@ -62,7 +62,7 @@ export default class ConfirmationScreen {
       let href = '';
       if (chainType === TransactionApprovalRequestChainTypeEnum.Starkex) {
         // eslint-disable-next-line max-len
-        href = `${this.config.passportDomain}/transaction-confirmation/transaction.html?transactionId=${transactionId}&imxEtherAddress=${imxEtherAddress}&chainType=starkex`;
+        href = `${this.config.passportDomain}/transaction-confirmation/transaction?transactionId=${transactionId}&imxEtherAddress=${imxEtherAddress}&chainType=starkex`;
       } else {
         // eslint-disable-next-line max-len
         href = `${this.config.passportDomain}/transaction-confirmation/zkevm?transactionId=${transactionId}&imxEtherAddress=${imxEtherAddress}&chainType=evm&chainId=${chainId}`;
@@ -116,7 +116,7 @@ export default class ConfirmationScreen {
     }
 
     this.confirmationWindow = openPopupCenter({
-      url: `${this.config.passportDomain}/transaction-confirmation/loading.html`,
+      url: `${this.config.passportDomain}/transaction-confirmation/loading`,
       title: CONFIRMATION_WINDOW_TITLE,
       width: popupOptions?.width || CONFIRMATION_WINDOW_WIDTH,
       height: popupOptions?.height || CONFIRMATION_WINDOW_HEIGHT,

packages/passport/sdk/src/errors/passportError.test.ts

@@ -26,7 +26,7 @@ describe('passportError', () => {
         withPassportError(errorFunction, PassportErrorType.AUTHENTICATION_ERROR),
       ).rejects.toThrow(
         new PassportError(
-          'AUTHENTICATION_ERROR: SOMETHINGWRONG',
+          'SOMETHINGWRONG',
           PassportErrorType.AUTHENTICATION_ERROR,
         ),
       );

packages/passport/sdk/src/errors/passportError.ts

@@ -1,3 +1,6 @@
+import { isAxiosError } from 'axios';
+import { APIError } from '@imtbl/core-sdk';
+
 export enum PassportErrorType {
   AUTHENTICATION_ERROR = 'AUTHENTICATION_ERROR',
   INVALID_CONFIGURATION = 'INVALID_CONFIGURATION',
@@ -15,6 +18,10 @@ export enum PassportErrorType {
   OPERATION_NOT_SUPPORTED_ERROR = 'OPERATION_NOT_SUPPORTED_ERROR',
 }
 
+function isAPIError(error: any): error is APIError {
+  return 'code' in error && 'message' in error;
+}
+
 export class PassportError extends Error {
   public type: PassportErrorType;
 
@@ -31,7 +38,14 @@ export const withPassportError = async <T>(
   try {
     return await fn();
   } catch (error) {
-    const errorMessage = `${customErrorType}: ${(error as Error).message}` || 'UnknownError';
+    let errorMessage: string;
+
+    if (isAxiosError(error) && error.response?.data && isAPIError(error.response.data)) {
+      errorMessage = error.response.data.message;
+    } else {
+      errorMessage = (error as Error).message;
+    }
+
     throw new PassportError(errorMessage, customErrorType);
   }
 };