feat: Add link to pending transaction alert

MetaMask · Nov 29, 2024 · 0120ce4 · 0120ce4
1 parent 7d252e9
commit 0120ce4
Show file tree

Hide file tree

Showing 20 changed files with 57 additions and 64 deletions.
diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json
diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json
diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json
diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json
diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json
diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json
diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json
diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json
diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json
diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json
diff --git a/ui/components/app/alert-system/alert-modal/alert-modal.tsx b/ui/components/app/alert-system/alert-modal/alert-modal.tsx
@@ -164,12 +164,16 @@ function AlertDetails({
     >
       {customDetails ?? (
         <Box>
-          <Text
-            variant={TextVariant.bodyMd}
-            data-testid="alert-modal__selected-alert"
-          >
-            {selectedAlert.message}
-          </Text>
+          {typeof selectedAlert.message === 'string' ? (
+            <Text
+              variant={TextVariant.bodyMd}
+              data-testid="alert-modal__selected-alert"
+            >
+              {selectedAlert.message}
+            </Text>
+          ) : (
+            selectedAlert.message
+          )}
           {selectedAlert.alertDetails?.length ? (
             <Text variant={TextVariant.bodyMdBold} marginTop={1}>
               {t('alertModalDetails')}

diff --git a/ui/ducks/confirm-alerts/confirm-alerts.ts b/ui/ducks/confirm-alerts/confirm-alerts.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { SecurityProvider } from '../../../shared/constants/security-provider';
 import { Severity } from '../../helpers/constants/design-system';
 
@@ -36,7 +37,7 @@ export type Alert = {
   /**
    * The message is a summary of the alert details.
    */
-  message: string;
+  message: string | ReactNode;
 
   /**
    * The security provider associated with the alert.

diff --git a/ui/pages/confirmations/hooks/alerts/transactions/PendingTransactionAlertMessage.tsx b/ui/pages/confirmations/hooks/alerts/transactions/PendingTransactionAlertMessage.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Text } from '../../../../../components/component-library';
+import { TextVariant } from '../../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import ZENDESK_URLS from '../../../../../helpers/constants/zendesk-url';
+
+export const PendingTransactionAlertMessage = () => {
+  const t = useI18nContext();
+
+  return (
+    <Text
+      variant={TextVariant.bodyMd}
+      data-testid="alert-modal__selected-alert"
+    >
+      {t('pendingTransactionAlertMessage', [
+        <a
+          href={ZENDESK_URLS.SPEEDUP_CANCEL}
+          key="link"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          {t('pendingTransactionAlertMessageHyperlink')}
+        </a>,
+      ])}
+    </Text>
+  );
+};
diff --git a/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts b/ui/pages/confirmations/hooks/alerts/transactions/usePendingTransactionAlerts.ts
@@ -1,14 +1,14 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-
-import { submittedPendingTransactionsSelector } from '../../../../../selectors';
-import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { isCorrectDeveloperTransactionType } from '../../../../../../shared/lib/confirmation.utils';
+import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants';
 import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
 import { Severity } from '../../../../../helpers/constants/design-system';
-import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { submittedPendingTransactionsSelector } from '../../../../../selectors';
 import { useConfirmContext } from '../../../context/confirm';
-import { isCorrectDeveloperTransactionType } from '../../../../../../shared/lib/confirmation.utils';
+import { PendingTransactionAlertMessage } from './PendingTransactionAlertMessage';
 
 export function usePendingTransactionAlerts(): Alert[] {
   const t = useI18nContext();
@@ -18,8 +18,10 @@ export function usePendingTransactionAlerts(): Alert[] {
 
   const isValidType = isCorrectDeveloperTransactionType(type);
 
-  const hasPendingTransactions =
-    isValidType && Boolean(pendingTransactions.length);
+  // const hasPendingTransactions =
+  //   isValidType && Boolean(pendingTransactions.length);
+
+  const hasPendingTransactions = true;
 
   return useMemo(() => {
     if (!hasPendingTransactions) {
@@ -30,7 +32,7 @@ export function usePendingTransactionAlerts(): Alert[] {
       {
         field: RowAlertKey.Speed,
         key: 'pendingTransactions',
-        message: t('alertMessagePendingTransactions'),
+        message: PendingTransactionAlertMessage(),
         reason: t('alertReasonPendingTransactions'),
         severity: Severity.Warning,
       },