feat: improve errors

package.json

@@ -40,7 +40,8 @@
     "pin-to-pinata": "ts-node -P tsconfig.base.json ./scripts/pin-to-pinata.ts",
     "complete-exchange": "ts-node -P tsconfig.base.json ./scripts/complete-exchange.ts",
     "update-contract-uri": "ts-node -P tsconfig.base.json ./scripts/change-contract-uri.ts",
-    "check-offer-exchange-policy": "ts-node -P tsconfig.base.json ./scripts/checkOfferExchangePolicy.ts"
+    "check-offer-exchange-policy": "ts-node -P tsconfig.base.json ./scripts/checkOfferExchangePolicy.ts",
+    "postinstall": "patch-package"
   },
   "repository": {
     "type": "git",
@@ -84,6 +85,7 @@
     "npm": "8.11.0"
   },
   "dependencies": {
-    "clone-deep": "^4.0.1"
+    "clone-deep": "^4.0.1",
+    "patch-package": "^8.0.0"
   }
 }

packages/react-kit/package.json

@@ -26,6 +26,7 @@
     "@tippyjs/react": "4.2.6",
     "@uniswap/sdk-core": "^4.0.7",
     "dayjs": "1.11.7",
+    "eth-revert-reason": "^1.0.3",
     "formik": "2.2.9",
     "graphql-request": "5.2.0",
     "lodash.merge": "4.6.2",

packages/react-kit/src/components/magicLink/MagicContext.tsx

@@ -3,7 +3,7 @@ import React, { createContext, ReactNode, useMemo } from "react";
 import { UserProvider } from "./UserContext";
 import { CONFIG } from "../../lib/config/config";
 import { useConfigContext } from "../config/ConfigContext";
-import type { getRpcUrls } from "../../lib/constants/networks";
+import type { getRpcUrls } from "../../lib/const/networks";
 
 export const MagicContext = createContext<
   | (Magic & {

packages/react-kit/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx

@@ -41,6 +41,7 @@ import {
   RedemptionWidgetAction,
   useRedemptionContext
 } from "../../../../widgets/redemption/provider/RedemptionContext";
+import { extractUserFriendlyError } from "../../../../../lib/errors/transactions";
 const colors = theme.colors.light;
 
 const StyledGrid = styled(Grid)`
@@ -315,9 +316,9 @@ ${FormModel.formFields.phone.placeholder}: ${phoneField.value}`;
         </div>
       )}
       {redemptionInfoError && (
-        <SimpleError errorMessage={redemptionInfoError?.message} />
+        <SimpleError errorMessage={redemptionInfoError.message} />
       )}
-      {redeemError && <SimpleError errorMessage={redeemError?.message} />}
+      {redeemError && <SimpleError errorMessage={redeemError.message} />}
       <Grid padding="2rem 0 0 0" justifyContent="space-between">
         <StyledRedeemButton
           type="button"
@@ -361,9 +362,14 @@ ${FormModel.formFields.phone.placeholder}: ${phoneField.value}`;
               isLoading || (!isInitializationValid && !postDeliveryInfo)
             }
             exchangeId={exchangeId}
-            onError={(...args) => {
-              const [error] = args;
-              console.error("Error while redeeming", error);
+            onError={async (...args) => {
+              const [error, context] = args;
+              const errorMessage = await extractUserFriendlyError(error, {
+                txResponse: context.txResponse,
+                provider: signer?.provider
+              });
+              console.error("Error while redeeming", error, errorMessage);
+              error.message = errorMessage;
               // call postRedemptionSubmitted if error before the transaction is submitted OR postRedemptionConfirmed if error after
               if (isTxPending) {
                 postRedemptionConfirmed?.({

packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancelExchange.tsx

@@ -27,6 +27,7 @@ import {
   RedemptionWidgetAction,
   useRedemptionContext
 } from "../../../../../widgets/redemption/provider/RedemptionContext";
+import { extractUserFriendlyError } from "../../../../../../lib/errors/transactions";
 
 const colors = theme.colors.light;
 
@@ -185,7 +186,7 @@ export function CancelExchange({
           Your rNFT will be burned after cancellation.
         </Info>
       )}
-      {cancelError && <SimpleError />}
+      {cancelError && <SimpleError errorMessage={cancelError.message} />}
       <ButtonsSection>
         <CancelButtonWrapper>
           <CancelButton
@@ -198,9 +199,14 @@ export function CancelExchange({
             variant="accentInverted"
             exchangeId={exchange.id}
             disabled={isLoading || cancelSuccess}
-            onError={(...args) => {
-              const [error] = args;
-              console.error(error);
+            onError={async (...args) => {
+              const [error, context] = args;
+              const errorMessage = await extractUserFriendlyError(error, {
+                txResponse: context.txResponse,
+                provider: signer?.provider
+              });
+              console.error("Error while cancelling", error, errorMessage);
+              error.message = errorMessage;
               setCancelError(error);
               setIsLoading(false);
               onError?.(...args);

packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucher.tsx

@@ -21,6 +21,7 @@ import ThemedButton from "../../../../../ui/ThemedButton";
 import Typography from "../../../../../ui/Typography";
 import DetailTable from "../detail/DetailTable";
 import { useSigner } from "../../../../../../hooks/connection/connection";
+import { extractUserFriendlyError } from "../../../../../../lib/errors/transactions";
 
 const colors = theme.colors.light;
 
@@ -177,7 +178,7 @@ export default function ExpireVoucher({
               }
             ]}
           />
-          {expireError && <SimpleError />}
+          {expireError && <SimpleError errorMessage={expireError.message} />}
         </Content>
       </Grid>
       <ButtonsWrapper>
@@ -197,9 +198,18 @@ export default function ExpireVoucher({
               metaTx: coreSDK.metaTxConfig
             }}
             disabled={isLoading}
-            onError={(...args) => {
-              const [error] = args;
-              console.error(error);
+            onError={async (...args) => {
+              const [error, context] = args;
+              const errorMessage = await extractUserFriendlyError(error, {
+                txResponse: context.txResponse,
+                provider: signer?.provider
+              });
+              console.error(
+                "Error while expiring voucher",
+                error,
+                errorMessage
+              );
+              error.message = errorMessage;
               setExpireError(error);
               setIsLoading(false);
               onError?.(...args);

packages/react-kit/src/components/modal/components/SellerFinance/FinanceDeposit.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import * as Sentry from "@sentry/browser";
 
 import { BigNumber, ethers } from "ethers";
 import { useState } from "react";
@@ -23,6 +24,10 @@ import { useCoreSDKWithContext } from "../../../../hooks/useCoreSdkWithContext";
 import { useAddPendingTransactionWithContext } from "../../../../hooks/transactions/usePendingTransactionsWithContext";
 import { subgraph } from "@bosonprotocol/core-sdk";
 import { useAccount, useSigner } from "../../../../hooks/connection/connection";
+import {
+  extractUserFriendlyError,
+  getHasUserRejectedTx
+} from "../../../../lib/errors/transactions";
 
 interface Props {
   protocolBalance: string;
@@ -188,13 +193,23 @@ export default function FinanceDeposit({
             setIsBeingDeposit(false);
             hideModal();
           }}
-          onError={(error) => {
-            console.error("onError", error);
-            const hasUserRejectedTx =
-              "code" in error &&
-              (error as unknown as { code: string }).code === "ACTION_REJECTED";
+          onError={async (...args) => {
+            const [error, context] = args;
+            const errorMessage = await extractUserFriendlyError(error, {
+              txResponse: context.txResponse,
+              provider: signer?.provider
+            });
+            console.error("Error while depositing funds", error, errorMessage);
+            error.message = errorMessage;
+            const hasUserRejectedTx = getHasUserRejectedTx(error);
             if (hasUserRejectedTx) {
               showModal("CONFIRMATION_FAILED");
+            } else {
+              Sentry.captureException(error);
+              showModal("CONFIRMATION_FAILED", {
+                errorMessage: "Something went wrong",
+                detailedErrorMessage: errorMessage
+              });
             }
             setDepositError(error);
             reload();

packages/react-kit/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import * as Sentry from "@sentry/browser";
 
 import { BigNumber, ethers } from "ethers";
 import { Spinner } from "phosphor-react";
@@ -28,6 +29,10 @@ import { useEnvContext } from "../../../environment/EnvironmentContext";
 import { useAddPendingTransactionWithContext } from "../../../../hooks/transactions/usePendingTransactionsWithContext";
 import { subgraph } from "@bosonprotocol/core-sdk";
 import { useAccount, useSigner } from "../../../../hooks/connection/connection";
+import {
+  extractUserFriendlyError,
+  getHasUserRejectedTx
+} from "../../../../lib/errors/transactions";
 const colors = theme.colors.light;
 
 const MaxLimitWrapper = styled.div`
@@ -198,13 +203,23 @@ export default function FinanceWithdraw({
             reload();
             setIsBeingWithdrawn(false);
           }}
-          onError={(error) => {
-            console.error("onError", error);
-            const hasUserRejectedTx =
-              "code" in error &&
-              (error as unknown as { code: string }).code === "ACTION_REJECTED";
+          onError={async (...args) => {
+            const [error, context] = args;
+            const errorMessage = await extractUserFriendlyError(error, {
+              txResponse: context.txResponse,
+              provider: signer?.provider
+            });
+            console.error("Error while withdrawing funds", error, errorMessage);
+            error.message = errorMessage;
+            const hasUserRejectedTx = getHasUserRejectedTx(error);
             if (hasUserRejectedTx) {
               showModal("CONFIRMATION_FAILED");
+            } else {
+              Sentry.captureException(error);
+              showModal("CONFIRMATION_FAILED", {
+                errorMessage: "Something went wrong",
+                detailedErrorMessage: errorMessage
+              });
             }
             setWithdrawError(error);
             reload();

packages/react-kit/src/components/modal/components/Transactions/ConfirmationFailedModal/ConfirmationFailedModal.tsx

@@ -1,16 +1,19 @@
-import React from "react";
 import { WarningCircle } from "phosphor-react";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 
 import Grid from "../../../../ui/Grid";
 import Typography from "../../../../ui/Typography";
 import { useModal } from "../../../useModal";
 import { theme } from "../../../../../theme";
 import { GenericModalProps } from "../../../ModalContext";
-
 const colors = theme.colors.light;
-
-export default function ConfirmationFailedModal(_: Record<string, never>) {
+export default function ConfirmationFailedModal({
+  errorMessage,
+  detailedErrorMessage
+}: {
+  errorMessage: string;
+  detailedErrorMessage?: string;
+}) {
   const { updateProps, store } = useModal();
   useEffect(() => {
     updateProps<"CONFIRMATION_FAILED">({
@@ -30,15 +33,15 @@ export default function ConfirmationFailedModal(_: Record<string, never>) {
       <WarningCircle size={128} color={colors.orange} />
 
       <Typography fontWeight="600" $fontSize="1.5rem" lineHeight="150%">
-        Confirmation Failed
+        {errorMessage || "Confirmation Failed"}
       </Typography>
       <Typography
         fontWeight="400"
         $fontSize="1rem"
         lineHeight="150%"
         margin="0.5rem 0 1.5rem 0"
       >
-        Please retry this action
+        {detailedErrorMessage || "Please retry this action"}
       </Typography>
     </Grid>
   );

packages/react-kit/src/hooks/useCtaClickHandler.ts

@@ -134,6 +134,8 @@ export function useCtaClickHandler<T>({
                 );
                 receipt = error.receipt;
               }
+            } else {
+              throw error;
             }
           }
         }

packages/react-kit/src/index.tsx

@@ -44,4 +44,5 @@ export * from "./components/magicLink/MagicContext";
 export * from "./components/magicLink/UserContext";
 export * from "./lib/magicLink/logout";
 export * from "./lib/magicLink/provider";
-export * from "./lib/constants/networks";
+export * from "./lib/const/networks";
+export * from "./lib/errors/transactions";

packages/react-kit/src/lib/config/config.ts

@@ -1,4 +1,4 @@
-import { getRpcUrls } from "../constants/networks";
+import { getRpcUrls } from "../const/networks";
 
 const magicLinkKey = process.env.REACT_APP_MAGIC_API_KEY;
 if (!magicLinkKey) {

packages/react-kit/src/lib/errors/transactions.ts

@@ -0,0 +1,61 @@
+import { Provider } from "@bosonprotocol/ethers-sdk";
+import * as Sentry from "@sentry/browser";
+import getRevertReason from "eth-revert-reason";
+import { providers } from "ethers";
+
+export async function extractUserFriendlyError(
+  error: unknown,
+  {
+    defaultError = "Please retry this action",
+    txResponse,
+    provider
+  }: {
+    defaultError?: string;
+    txResponse?: providers.TransactionResponse;
+    provider?: Provider;
+  } = {}
+): Promise<string> {
+  try {
+    if (!error || typeof error !== "object") {
+      return defaultError;
+    }
+    if (txResponse) {
+      const revertReason = await getRevertReason(
+        txResponse.hash,
+        "mainnet", // mumbai is not supported
+        txResponse.blockNumber,
+        provider
+      );
+      return revertReason ?? defaultError;
+    }
+    // meta transactions
+    const m = error.toString().match(/(?<=execution reverted: ).*/)?.[0];
+    const endIndexSlash = m?.indexOf(`\\",`);
+    const endIndexWithoutSlash = m?.indexOf(`",`);
+    const details = m?.substring(
+      0,
+      endIndexSlash &&
+        endIndexSlash !== -1 &&
+        endIndexWithoutSlash &&
+        endIndexWithoutSlash !== -1
+        ? Math.min(endIndexSlash, endIndexWithoutSlash)
+        : endIndexSlash !== -1 && endIndexSlash
+        ? endIndexSlash
+        : endIndexWithoutSlash
+    );
+    return details ?? defaultError;
+  } catch (error) {
+    console.error("[extractUserFriendlyError]", error);
+    Sentry.captureException(error);
+    return defaultError;
+  }
+}
+
+export function getHasUserRejectedTx(error: unknown): boolean {
+  const hasUserRejectedTx =
+    !!error &&
+    typeof error === "object" &&
+    "code" in error &&
+    error.code === "ACTION_REJECTED";
+  return hasUserRejectedTx;
+}

patches/eth-revert-reason+1.0.3.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/eth-revert-reason/index.js b/node_modules/eth-revert-reason/index.js
+index 4e43d12..17f5cb9 100644
+--- a/node_modules/eth-revert-reason/index.js
++++ b/node_modules/eth-revert-reason/index.js
+@@ -16,7 +16,9 @@ async function getRevertReason (txHash, network = 'mainnet', blockNumber = undef
+   await validateInputPostProvider(txHash, network, blockNumber, provider)
+
+   try {
+-    const tx = await provider.getTransaction(txHash)
++    const tx = await provider.getTransaction(txHash);
++    delete tx.maxPriorityFeePerGas;
++    delete tx.maxFeePerGas;
+     const code = await getCode(tx, network, blockNumber, provider)
+     return decodeMessage(code, network)
+   } catch (err) {