fix: Revert "feat(14507): improve error message for failed txn in activity… (#31137)

… details view (#29338)"

This reverts commit d510d5c.

> ### NOTE
>
[transaction-status-label.test.js](https://github.com/MetaMask/metamask-extension/blob/ba134eed8a231112008116aec1bc1e40ddf9e808/ui/components/app/transaction-status-label/transaction-status-label.test.js)
was full of conflicts. I rewrote the tests based on what I could piece
together.


<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This change was intentional, but it turned out to be incorrect.
@DDDDDanica based her PR on this ticket linked below, which refers to a
Figma file. However, the missing context is that the Figma file included
designs specifically for Smart Transactions.

[[UX Improvement]: Transaction Failure Message Not Easily Found
#14507](#14507):
> Expected final result
>
https://www.figma.com/design/ZzVQ6iu13C67K807Z1bg5I/Smart-Transactions-1.0?node-id=4296-25303&t=XN3hVQrE3oWM0lCA-1

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/31137?quickstart=1)

## **Related issues**

* Related: MetaMask/MetaMask-planning#4198
* Related: #14507

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: dbrans

app/_locales/de/messages.json

@@ -49,8 +49,6 @@
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    height: 42px;
-    justify-content: space-between;
 
     .btn-link {
       font-size: 12px;
@@ -64,10 +62,9 @@
   }
 
   &__operations {
-    margin: 0 16px 16px 16px;
+    margin: 0 0 16px 16px;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    justify-content: flex-end;
   }
 
   &__header {

app/_locales/el/messages.json

@@ -13,12 +13,6 @@ import Tooltip from '../../ui/tooltip';
 import CancelButton from '../cancel-button';
 import Popover from '../../ui/popover';
 import { Box } from '../../component-library/box';
-import { Text } from '../../component-library/text';
-import {
-  BannerAlert,
-  BannerAlertSeverity,
-} from '../../component-library/banner-alert';
-import { TextVariant } from '../../../helpers/constants/design-system';
 import { SECOND } from '../../../../shared/constants/time';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import { getURLHostName } from '../../../helpers/utils/util';
@@ -52,7 +46,6 @@ export default class TransactionListItemDetails extends PureComponent {
     senderNickname: PropTypes.string.isRequired,
     transactionStatus: PropTypes.func,
     isCustomNetwork: PropTypes.bool,
-    showErrorBanner: PropTypes.bool,
     history: PropTypes.object,
     blockExplorerLinkText: PropTypes.object,
     chainId: PropTypes.string,
@@ -163,7 +156,6 @@ export default class TransactionListItemDetails extends PureComponent {
       title,
       onClose,
       showCancel,
-      showErrorBanner,
       transactionStatus: TransactionStatus,
       blockExplorerLinkText,
     } = this.props;
@@ -177,17 +169,6 @@ export default class TransactionListItemDetails extends PureComponent {
       <Popover title={title} onClose={onClose}>
         <div className="transaction-list-item-details">
           <div className="transaction-list-item-details__operations">
-            {showErrorBanner && (
-              <BannerAlert severity={BannerAlertSeverity.Warning}>
-                <Text
-                  variant={TextVariant.bodyMd}
-                  as="h6"
-                  data-testid="transaction-list-item-details-banner-error-message"
-                >
-                  {t('transactionFailedBannerMessage')}
-                </Text>
-              </BannerAlert>
-            )}
             <div className="transaction-list-item-details__header-buttons">
               {showSpeedUp && (
                 <Button
@@ -214,7 +195,7 @@ export default class TransactionListItemDetails extends PureComponent {
                     className="transaction-list-item-details__header-button"
                     data-testid="rety-button"
                   >
-                    <i className="fa fa-sync" />
+                    <i className="fa fa-sync"></i>
                   </Button>
                 </Tooltip>
               )}
@@ -226,18 +207,22 @@ export default class TransactionListItemDetails extends PureComponent {
               data-testid="transaction-list-item-details-tx-status"
             >
               <div>{t('status')}</div>
-              <TransactionStatus />
+              <div>
+                <TransactionStatus />
+              </div>
             </div>
             <div className="transaction-list-item-details__tx-hash">
-              <Button
-                type="link"
-                onClick={this.handleBlockExplorerClick}
-                disabled={!hash}
-              >
-                {blockExplorerLinkText.firstPart === 'addBlockExplorer'
-                  ? t('addBlockExplorer')
-                  : t('viewOnBlockExplorer')}
-              </Button>
+              <div>
+                <Button
+                  type="link"
+                  onClick={this.handleBlockExplorerClick}
+                  disabled={!hash}
+                >
+                  {blockExplorerLinkText.firstPart === 'addBlockExplorer'
+                    ? t('addBlockExplorer')
+                    : t('viewOnBlockExplorer')}
+                </Button>
+              </div>
               <div>
                 <Tooltip
                   wrapperClassName="transaction-list-item-details__header-button"

app/_locales/en/messages.json

@@ -2,6 +2,7 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { TransactionStatus } from '@metamask/transaction-controller';
+import { act, waitFor } from '@testing-library/react';
 import { GAS_LIMITS } from '../../../../shared/constants/gas';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import mockState from '../../../../test/data/mock-state.json';
@@ -44,7 +45,7 @@ const transactionGroup = {
   hasCancelled: false,
 };
 
-const render = (overrideProps) => {
+const render = async (overrideProps) => {
   const rpcPrefs = {
     blockExplorerUrl: 'https://customblockexplorer.com/',
   };
@@ -61,54 +62,56 @@ const render = (overrideProps) => {
     senderAddress: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
     tryReverseResolveAddress: jest.fn(),
     transactionGroup,
-    transactionStatus: () => <div />,
+    transactionStatus: () => <div></div>,
     blockExplorerLinkText,
     rpcPrefs,
     ...overrideProps,
   };
 
   const mockStore = configureMockStore([thunk])(mockState);
 
-  const result = renderWithProvider(
-    <TransactionListItemDetails {...props} />,
-    mockStore,
+  let result;
+
+  await act(
+    async () =>
+      (result = renderWithProvider(
+        <TransactionListItemDetails {...props} />,
+        mockStore,
+      )),
   );
 
   return result;
 };
 
 describe('TransactionListItemDetails Component', () => {
-  describe('matches snapshot', () => {
-    it('for non-error details', async () => {
-      const { queryByText, queryByTestId } = render();
-      expect(queryByText('Test Transaction Details')).toBeInTheDocument();
-      expect(
-        queryByTestId('transaction-list-item-details-banner-error-message'),
-      ).not.toBeInTheDocument();
-    });
+  it('should render title with title prop', async () => {
+    const { queryByText } = await render();
 
-    it('for error details', async () => {
-      const { queryByText, queryByTestId } = render({ showErrorBanner: true });
+    await waitFor(() => {
       expect(queryByText('Test Transaction Details')).toBeInTheDocument();
-      expect(
-        queryByTestId('transaction-list-item-details-banner-error-message'),
-      ).toBeInTheDocument();
     });
   });
 
-  describe('Action buttons', () => {
-    it('renders retry button with showRetry prop', async () => {
-      const { queryByTestId } = render({ showRetry: true });
+  describe('Retry button', () => {
+    it('should render retry button with showRetry prop', async () => {
+      const { queryByTestId } = await render({ showRetry: true });
+
       expect(queryByTestId('rety-button')).toBeInTheDocument();
     });
+  });
+
+  describe('Cancel button', () => {
+    it('should render cancel button with showCancel prop', async () => {
+      const { queryByTestId } = await render({ showCancel: true });
 
-    it('renders cancel button with showCancel prop', async () => {
-      const { queryByTestId } = render({ showCancel: true });
       expect(queryByTestId('cancel-button')).toBeInTheDocument();
     });
+  });
+
+  describe('Speedup button', () => {
+    it('should render speedup button with showSpeedUp prop', async () => {
+      const { queryByTestId } = await render({ showSpeedUp: true });
 
-    it('renders speedup button with showSpeedUp prop', async () => {
-      const { queryByTestId } = render({ showSpeedUp: true });
       expect(queryByTestId('speedup-button')).toBeInTheDocument();
     });
   });

app/_locales/en_GB/messages.json

@@ -126,7 +126,6 @@ export default function SmartTransactionListItem({
               date={date}
               status={displayedStatusKey}
               statusOnly
-              shouldShowTooltip={false}
             />
           )}
           chainId={chainId}

app/_locales/es/messages.json

@@ -372,8 +372,6 @@ function TransactionListItemInner({
           showSpeedUp={shouldShowSpeedUp}
           isEarliestNonce={isEarliestNonce}
           onCancel={cancelTransaction}
-          showCancel={isPending && !hasCancelled && !isBridgeTx}
-          showErrorBanner={Boolean(error)}
           transactionStatus={() => (
             <TransactionStatusLabel
               isPending={isPending}
@@ -382,7 +380,6 @@ function TransactionListItemInner({
               date={date}
               status={displayedStatusKey}
               statusOnly
-              shouldShowTooltip={false}
             />
           )}
           chainId={chainId}