SOV-1606: fix ugly liquality error message (#2510)

* fix: SOV-1606 ugly liquality error message * fix: error message * chore: resolve review comment * chore: remove top error text for user declined txs * Fix error message in tx dialog * fix: try to find out liquality wallet error --------- Co-authored-by: soulBit <[email protected]> Co-authored-by: tiltom <[email protected]>
DistributedCollective · Mar 30, 2023 · 2ec70af · 2ec70af
1 parent f9b1ecd
commit 2ec70af
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 10 deletions.
diff --git a/src/app/components/TransactionDialog/TxRequestDialog.tsx b/src/app/components/TransactionDialog/TxRequestDialog.tsx
@@ -16,6 +16,7 @@ import {
   TxType,
 } from 'store/global/transactions-store/types';
 import { Dialog } from 'app/containers/Dialog';
+import { useGetNormalizedError } from './hooks/useGetNormalizedError';
 
 export const TxRequestDialog: React.FC<RequestDialogState> = ({
   open,
@@ -28,6 +29,9 @@ export const TxRequestDialog: React.FC<RequestDialogState> = ({
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const wallet = useMemo(() => detectWeb3Wallet(), [address]);
+
+  const { hasUserDeclinedTx, normalizedError } = useGetNormalizedError();
+
   return (
     <>
       <Dialog
@@ -50,12 +54,16 @@ export const TxRequestDialog: React.FC<RequestDialogState> = ({
                   alt="failed"
                   className="tw-w-8 tw-mx-auto tw-mb-4 tw-opacity-75"
                 />
-                <p className="tw-text-center tw-px-3 tw-text-warning">
-                  <Trans
-                    i18nKey={translations.transactionDialog.txStatus.aborted}
-                  />
-                  <div>{error}</div>
-                </p>
+                <div className="tw-text-center tw-px-3 tw-text-warning">
+                  {!hasUserDeclinedTx && (
+                    <Trans
+                      i18nKey={translations.transactionDialog.txStatus.aborted}
+                    />
+                  )}
+                  {normalizedError && (
+                    <div className="tw-mb-8">{normalizedError}</div>
+                  )}
+                </div>
                 <ActionButton
                   onClick={() =>
                     dispatch(actions.closeTransactionRequestDialog())

diff --git a/src/app/components/TransactionDialog/hooks/useGetNormalizedError.ts b/src/app/components/TransactionDialog/hooks/useGetNormalizedError.ts
@@ -0,0 +1,44 @@
+import { translations } from 'locales/i18n';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { selectRequestDialogState } from 'store/global/transactions-store/selectors';
+
+export const useGetNormalizedError = () => {
+  const { t } = useTranslation();
+  const { error } = useSelector(selectRequestDialogState);
+
+  const hasUserDeclinedTx = useMemo(
+    () =>
+      error?.includes('User denied transaction signature') ||
+      error?.includes('UserDeclinedError'),
+    [error],
+  );
+
+  const normalizedError = useMemo(() => {
+    if (hasUserDeclinedTx) {
+      return t(translations.walletProvider.userDenied);
+    }
+    if (error?.includes('LIQUALITY_ERROR_FROM_ERROR_PARSER_PACKAGE')) {
+      const searchReason = error.match(
+        /(?<=\\"reason\\":\\")([A-Za-z0-9 ]+)(?=\\")/g,
+      );
+      if (searchReason?.length) {
+        return searchReason[0];
+      }
+
+      const searchErrorName = error.match(
+        /(?<=\\"name\\":\\")([A-Za-z0-9 ]+)(?=\\")/g,
+      );
+      if (searchErrorName?.length) {
+        return searchErrorName[0];
+      }
+    }
+    return error;
+  }, [hasUserDeclinedTx, error, t]);
+
+  return {
+    hasUserDeclinedTx,
+    normalizedError,
+  };
+};
diff --git a/src/app/components/TransactionDialog/index.tsx b/src/app/components/TransactionDialog/index.tsx
@@ -14,6 +14,7 @@ import { getStatusImage } from './utils';
 import { WalletLogo } from './WalletLogo';
 import { getWalletName } from './utils';
 import { WalletContext } from '@sovryn/react-wallet';
+import { useGetNormalizedError } from './hooks/useGetNormalizedError';
 
 interface ITransactionDialogProps {
   tx: ResetTxResponseInterface;
@@ -38,6 +39,9 @@ export const TransactionDialog: React.FC<ITransactionDialogProps> = ({
 }) => {
   const { t } = useTranslation();
   const { address } = useContext(WalletContext);
+
+  const { hasUserDeclinedTx, normalizedError } = useGetNormalizedError();
+
   const onCloseHandler = useCallback(() => {
     onClose?.();
     if (tx.status === TxStatus.CONFIRMED) {
@@ -86,9 +90,20 @@ export const TransactionDialog: React.FC<ITransactionDialogProps> = ({
             alt="failed"
             className="tw-w-8 tw-mx-auto tw-mb-4 tw-opacity-75"
           />
-          <p className="tw-text-center tw-text-warning">
-            <Trans i18nKey={translations.transactionDialog.txStatus.aborted} />
-          </p>
+          {!hasUserDeclinedTx && (
+            <p className="tw-text-center tw-text-warning">
+              <Trans
+                i18nKey={translations.transactionDialog.txStatus.aborted}
+              />
+            </p>
+          )}
+
+          {normalizedError && (
+            <div className="tw-text-center tw-text-warning">
+              {normalizedError}
+            </div>
+          )}
+
           {wallet === 'ledger' && (
             <p className="tw-text-center tw-text-warning">
               {t(translations.transactionDialog.txStatus.abortedLedger)}

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -1187,7 +1187,8 @@
         "description": "Confirm transaction in your wallet to approve token spending in this smart-contract.",
         "error": "Approve request failed:"
       }
-    }
+    },
+    "userDenied": "Transaction rejected"
   },
   "sendTxProgress": {
     "pending_for_user": {