added tx details popup to cancelled Swap (#15273)

* added tx details popup to cancelled Swap

* removed unnecessary console statements

ui/components/app/transaction-list-item/smart-transaction-list-item.component.js

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import ListItem from '../../ui/list-item';
 import TransactionStatus from '../transaction-status/transaction-status.component';
 import TransactionIcon from '../transaction-icon';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import { useTransactionDisplayData } from '../../../hooks/useTransactionDisplayData';
 import { formatDateWithYearContext } from '../../../helpers/utils/util';
 import {
   TRANSACTION_GROUP_CATEGORIES,
@@ -15,14 +16,23 @@ import {
 import CancelButton from '../cancel-button';
 import { cancelSwapsSmartTransaction } from '../../../ducks/swaps/swaps';
 import SiteOrigin from '../../ui/site-origin';
+import TransactionListItemDetails from '../transaction-list-item-details';
 
 export default function SmartTransactionListItem({
   smartTransaction,
+  transactionGroup,
   isEarliestNonce = false,
 }) {
   const dispatch = useDispatch();
   const t = useI18nContext();
   const [cancelSwapLinkClicked, setCancelSwapLinkClicked] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
+  const {
+    primaryCurrency,
+    recipientAddress,
+    isPending,
+    senderAddress,
+  } = useTransactionDisplayData(transactionGroup);
   const {
     sourceTokenSymbol,
     destinationTokenSymbol,
@@ -45,11 +55,15 @@ export default function SmartTransactionListItem({
   const showCancelSwapLink =
     smartTransaction.cancellable && !cancelSwapLinkClicked;
   const className = 'transaction-list-item transaction-list-item--unconfirmed';
+  const toggleShowDetails = useCallback(() => {
+    setShowDetails((prev) => !prev);
+  }, []);
   return (
     <>
       <ListItem
         className={className}
         title={title}
+        onClick={toggleShowDetails}
         icon={
           <TransactionIcon category={category} status={displayedStatusKey} />
         }
@@ -83,6 +97,26 @@ export default function SmartTransactionListItem({
             </div>
           )}
       </ListItem>
+      {showDetails && (
+        <TransactionListItemDetails
+          title={title}
+          onClose={toggleShowDetails}
+          senderAddress={senderAddress}
+          recipientAddress={recipientAddress}
+          primaryCurrency={primaryCurrency}
+          isEarliestNonce={isEarliestNonce}
+          transactionGroup={transactionGroup}
+          transactionStatus={() => (
+            <TransactionStatus
+              isPending={isPending}
+              isEarliestNonce={isEarliestNonce}
+              date={date}
+              status={displayedStatusKey}
+              statusOnly
+            />
+          )}
+        />
+      )}
     </>
   );
 }
@@ -90,4 +124,5 @@ export default function SmartTransactionListItem({
 SmartTransactionListItem.propTypes = {
   smartTransaction: PropTypes.object.isRequired,
   isEarliestNonce: PropTypes.bool,
+  transactionGroup: PropTypes.object,
 };

ui/components/app/transaction-list/transaction-list.component.js

@@ -129,6 +129,7 @@ export default function TransactionList({
                 <SmartTransactionListItem
                   isEarliestNonce={index === 0}
                   smartTransaction={transactionGroup.initialTransaction}
+                  transactionGroup={transactionGroup}
                   key={`${transactionGroup.nonce}:${index}`}
                 />
               ) : (
@@ -152,6 +153,7 @@ export default function TransactionList({
                 transactionGroup.initialTransaction?.transactionType ===
                 'smart' ? (
                   <SmartTransactionListItem
+                    transactionGroup={transactionGroup}
                     smartTransaction={transactionGroup.initialTransaction}
                     key={`${transactionGroup.nonce}:${index}`}
                   />