From acd99318b3d8eddaaa2a9b100ef55968e0f6bb80 Mon Sep 17 00:00:00 2001
From: Victor Thomas <10986371+vthomas13@users.noreply.github.com>
Date: Tue, 13 Jun 2023 17:49:53 -0400
Subject: [PATCH] Icon changes, add badgewrapped icons to smart tx

---
 .../app/transaction-icon/transaction-icon.js  | 75 +++++++++++-------
 .../app/transaction-list-item/index.scss      |  5 --
 .../smart-transaction-list-item.component.js  | 46 +++++++++--
 .../transaction-list-item.component.js        | 77 +++++++++++++------
 .../activity-list-item/activity-list-item.js  |  5 +-
 5 files changed, 146 insertions(+), 62 deletions(-)

diff --git a/ui/components/app/transaction-icon/transaction-icon.js b/ui/components/app/transaction-icon/transaction-icon.js
index bb42a71b9589..820c4969dd12 100644
--- a/ui/components/app/transaction-icon/transaction-icon.js
+++ b/ui/components/app/transaction-icon/transaction-icon.js
@@ -1,47 +1,56 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
-import Approve from '../../ui/icon/approve-icon.component';
-import Interaction from '../../ui/icon/interaction-icon.component';
-import Receive from '../../ui/icon/receive-icon.component';
-import Send from '../../ui/icon/send-icon.component';
-import Sign from '../../ui/icon/sign-icon.component';
-import Swap from '../../ui/icon/swap-icon-for-list.component';
 import {
   TransactionGroupCategory,
   TransactionGroupStatus,
   TransactionStatus,
 } from '../../../../shared/constants/transaction';
 import { captureSingleException } from '../../../store/actions';
+import { AvatarIcon, IconName } from '../../component-library';
+import {
+  BackgroundColor,
+  IconColor,
+  Size,
+} from '../../../helpers/constants/design-system';
 
 const ICON_MAP = {
-  [TransactionGroupCategory.approval]: Approve,
-  [TransactionGroupCategory.interaction]: Interaction,
-  [TransactionGroupCategory.receive]: Receive,
-  [TransactionGroupCategory.send]: Send,
-  [TransactionGroupCategory.signatureRequest]: Sign,
-  [TransactionGroupCategory.swap]: Swap,
+  [TransactionGroupCategory.approval]: IconName.Check,
+  [TransactionGroupCategory.interaction]: IconName.ProgrammingArrows,
+  [TransactionGroupCategory.receive]: IconName.Received,
+  [TransactionGroupCategory.send]: IconName.Arrow2UpRight,
+  [TransactionGroupCategory.signatureRequest]: IconName.SecurityTick,
+  [TransactionGroupCategory.swap]: IconName.SwapHorizontal,
 };
 
-const FAIL_COLOR = 'var(--color-error-default)';
-const PENDING_COLOR = 'var(--color-icon-default)';
-const OK_COLOR = 'var(--color-primary-default)';
-
 const COLOR_MAP = {
-  [TransactionGroupStatus.pending]: PENDING_COLOR,
-  [TransactionGroupStatus.cancelled]: FAIL_COLOR,
-  [TransactionStatus.approved]: PENDING_COLOR,
-  [TransactionStatus.dropped]: FAIL_COLOR,
-  [TransactionStatus.failed]: FAIL_COLOR,
-  [TransactionStatus.rejected]: FAIL_COLOR,
-  [TransactionStatus.submitted]: PENDING_COLOR,
-  [TransactionStatus.unapproved]: PENDING_COLOR,
+  [TransactionGroupStatus.pending]: IconColor.primaryDefault,
+  [TransactionGroupStatus.cancelled]: IconColor.errorDefault,
+  [TransactionStatus.approved]: IconColor.primaryDefault,
+  [TransactionStatus.dropped]: IconColor.errorDefault,
+  [TransactionStatus.failed]: IconColor.errorDefault,
+  [TransactionStatus.rejected]: IconColor.errorDefault,
+  [TransactionStatus.submitted]: IconColor.primaryDefault,
+  [TransactionStatus.unapproved]: IconColor.primaryDefault,
+};
+
+const BACKGROUND_COLOR_MAP = {
+  [TransactionGroupStatus.pending]: BackgroundColor.primaryMuted,
+  [TransactionGroupStatus.cancelled]: BackgroundColor.errorMuted,
+  [TransactionStatus.approved]: BackgroundColor.primaryMuted,
+  [TransactionStatus.dropped]: BackgroundColor.errorMuted,
+  [TransactionStatus.failed]: BackgroundColor.errorMuted,
+  [TransactionStatus.rejected]: BackgroundColor.errorMuted,
+  [TransactionStatus.submitted]: BackgroundColor.primaryMuted,
+  [TransactionStatus.unapproved]: BackgroundColor.primaryMuted,
 };
 
 export default function TransactionIcon({ status, category }) {
   const dispatch = useDispatch();
 
-  const color = COLOR_MAP[status] || OK_COLOR;
+  const color = COLOR_MAP[status] || IconColor.primaryDefault;
+  const backgroundColor =
+    BACKGROUND_COLOR_MAP[status] || BackgroundColor.primaryMuted;
   const Icon = ICON_MAP[category];
 
   if (!Icon) {
@@ -50,10 +59,22 @@ export default function TransactionIcon({ status, category }) {
         `The category prop passed to TransactionIcon is not supported. The prop is: ${category}`,
       ),
     );
-    return <div className="transaction-icon__grey-circle" />;
+    return (
+      <AvatarIcon
+        backgroundColor={BackgroundColor.backgroundAlternative}
+        size={Size.MD}
+      />
+    );
   }
 
-  return <Icon color={color} size={28} />;
+  return (
+    <AvatarIcon
+      backgroundColor={backgroundColor}
+      iconName={Icon}
+      size={Size.MD}
+      color={color}
+    />
+  );
 }
 
 TransactionIcon.propTypes = {
diff --git a/ui/components/app/transaction-list-item/index.scss b/ui/components/app/transaction-list-item/index.scss
index 069510062a1c..d4aa3f1c387e 100644
--- a/ui/components/app/transaction-list-item/index.scss
+++ b/ui/components/app/transaction-list-item/index.scss
@@ -57,11 +57,6 @@
     text-overflow: initial;
   }
 
-  .transaction-status-label::after {
-    content: "·";
-    margin: 0 4px;
-  }
-
   &__address {
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/ui/components/app/transaction-list-item/smart-transaction-list-item.component.js b/ui/components/app/transaction-list-item/smart-transaction-list-item.component.js
index 7c71e3a442d6..af01c63217a8 100644
--- a/ui/components/app/transaction-list-item/smart-transaction-list-item.component.js
+++ b/ui/components/app/transaction-list-item/smart-transaction-list-item.component.js
@@ -1,7 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
-import ListItem from '../../ui/list-item';
+import { useDispatch, useSelector } from 'react-redux';
 import TransactionStatusLabel from '../transaction-status-label/transaction-status-label';
 import TransactionIcon from '../transaction-icon';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -17,6 +16,18 @@ import CancelButton from '../cancel-button';
 import { cancelSwapsSmartTransaction } from '../../../ducks/swaps/swaps';
 import SiteOrigin from '../../ui/site-origin';
 import TransactionListItemDetails from '../transaction-list-item-details';
+import { ActivityListItem } from '../../multichain/activity-list-item';
+import {
+  AvatarNetwork,
+  BadgeWrapper,
+  BadgeWrapperAnchorElementShape,
+} from '../../component-library';
+import {
+  BackgroundColor,
+  Display,
+  Size,
+} from '../../../helpers/constants/design-system';
+import { getCurrentNetwork } from '../../../selectors';
 
 export default function SmartTransactionListItem({
   smartTransaction,
@@ -29,6 +40,8 @@ export default function SmartTransactionListItem({
   const [showDetails, setShowDetails] = useState(false);
   const { primaryCurrency, recipientAddress, isPending, senderAddress } =
     useTransactionDisplayData(transactionGroup);
+  const currentChain = useSelector(getCurrentNetwork);
+
   const { sourceTokenSymbol, destinationTokenSymbol, time, status } =
     smartTransaction;
   const category = TransactionGroupCategory.swap;
@@ -37,7 +50,11 @@ export default function SmartTransactionListItem({
     destinationTokenSymbol,
   ]);
   const subtitle = 'metamask';
-  const date = formatDateWithYearContext(time);
+  const date = formatDateWithYearContext(
+    time,
+    "MMM d 'at' h:mm a",
+    "MMM d, y 'at' h:mm a",
+  );
   let displayedStatusKey;
   if (status === SmartTransactionStatus.pending) {
     displayedStatusKey = TransactionGroupStatus.pending;
@@ -52,12 +69,29 @@ export default function SmartTransactionListItem({
   }, []);
   return (
     <>
-      <ListItem
+      <ActivityListItem
         className={className}
         title={title}
         onClick={toggleShowDetails}
         icon={
-          <TransactionIcon category={category} status={displayedStatusKey} />
+          <BadgeWrapper
+            anchorElementShape={BadgeWrapperAnchorElementShape.circular}
+            positionObj={{ top: -4, right: -4 }}
+            display={Display.Block}
+            badge={
+              <AvatarNetwork
+                className="activity-tx__network-badge"
+                data-testid="activity-tx-network-badge"
+                size={Size.XS}
+                name={currentChain.nickname}
+                src={currentChain.rpcPrefs?.imageUrl}
+                borderWidth={1}
+                borderColor={BackgroundColor.backgroundDefault}
+              />
+            }
+          >
+            <TransactionIcon category={category} status={displayedStatusKey} />
+          </BadgeWrapper>
         }
         subtitle={
           <h3>
@@ -88,7 +122,7 @@ export default function SmartTransactionListItem({
               />
             </div>
           )}
-      </ListItem>
+      </ActivityListItem>
       {showDetails && (
         <TransactionListItemDetails
           title={title}
diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.js b/ui/components/app/transaction-list-item/transaction-list-item.component.js
index 5fca0cd85d4d..242871c3447a 100644
--- a/ui/components/app/transaction-list-item/transaction-list-item.component.js
+++ b/ui/components/app/transaction-list-item/transaction-list-item.component.js
@@ -1,10 +1,10 @@
+/* eslint-disable import/no-duplicates */
 import React, { useMemo, useState, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 
-import ListItem from '../../ui/list-item';
 import { useTransactionDisplayData } from '../../../hooks/useTransactionDisplayData';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
@@ -13,6 +13,19 @@ import { CONFIRM_TRANSACTION_ROUTE } from '../../../helpers/constants/routes';
 import { useShouldShowSpeedUp } from '../../../hooks/useShouldShowSpeedUp';
 import TransactionStatusLabel from '../transaction-status-label/transaction-status-label';
 import TransactionIcon from '../transaction-icon';
+import {
+  BackgroundColor,
+  Display,
+  Size,
+} from '../../../helpers/constants/design-system';
+import {
+  AvatarNetwork,
+  BadgeWrapper,
+  BadgeWrapperAnchorElementShape,
+  Box,
+  Text,
+} from '../../component-library';
+
 ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
 import { IconColor } from '../../../helpers/constants/design-system';
 import { Icon, IconName, IconSize } from '../../component-library';
@@ -31,8 +44,12 @@ import {
   TransactionModalContextProvider,
   useTransactionModalContext,
 } from '../../../contexts/transaction-modal';
-import { checkNetworkAndAccountSupports1559 } from '../../../selectors';
+import {
+  checkNetworkAndAccountSupports1559,
+  getCurrentNetwork,
+} from '../../../selectors';
 import { isLegacyTransaction } from '../../../helpers/utils/transactions.util';
+import { formatDateWithYearContext } from '../../../helpers/utils/util';
 import Button from '../../ui/button';
 import AdvancedGasFeePopover from '../advanced-gas-fee-popover';
 import CancelButton from '../cancel-button';
@@ -40,7 +57,7 @@ import CancelSpeedupPopover from '../cancel-speedup-popover';
 import EditGasFeePopover from '../edit-gas-fee-popover';
 import EditGasPopover from '../edit-gas-popover';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import SiteOrigin from '../../ui/site-origin';
+import { ActivityListItem } from '../../multichain/activity-list-item';
 
 function TransactionListItemInner({
   transactionGroup,
@@ -113,9 +130,6 @@ function TransactionListItemInner({
 
   const {
     title,
-    subtitle,
-    subtitleContainsOrigin,
-    date,
     category,
     primaryCurrency,
     recipientAddress,
@@ -124,7 +138,11 @@ function TransactionListItemInner({
     isPending,
     senderAddress,
   } = useTransactionDisplayData(transactionGroup);
-
+  const date = formatDateWithYearContext(
+    transactionGroup.primaryTransaction.time,
+    "MMM d 'at' h:mm a",
+    "MMM d, y 'at' h:mm a",
+  );
   const isSignatureReq = category === TransactionGroupCategory.signatureRequest;
   const isApproval = category === TransactionGroupCategory.approval;
   const isUnapproved = status === TransactionStatus.unapproved;
@@ -195,7 +213,7 @@ function TransactionListItemInner({
     isCustodian,
     ///: END:ONLY_INCLUDE_IN
   ]);
-
+  const currentChain = useSelector(getCurrentNetwork);
   let showCancelButton = !hasCancelled && isPending && !isUnapproved;
 
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
@@ -219,14 +237,15 @@ function TransactionListItemInner({
 
   return (
     <>
-      <ListItem
+      <ActivityListItem
+        topContent={date}
         onClick={toggleShowDetails}
         className={className}
         title={title}
         icon={
           ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
           isCustodian ? (
-            <div style={{ position: 'relative' }} data-testid="custody-icon">
+            <Box style={{ position: 'relative' }} data-testid="custody-icon">
               <TransactionIcon
                 category={category}
                 status={displayedStatusKey}
@@ -237,17 +256,38 @@ function TransactionListItemInner({
                 color={getTransactionColor(status)}
                 size={IconSize.Xs}
               />
-            </div>
+            </Box>
           ) : (
             ///: END:ONLY_INCLUDE_IN
-            <TransactionIcon category={category} status={displayedStatusKey} />
+            <BadgeWrapper
+              anchorElementShape={BadgeWrapperAnchorElementShape.circular}
+              positionObj={{ top: -4, right: -4 }}
+              display={Display.Block}
+              badge={
+                <AvatarNetwork
+                  className="activity-tx__network-badge"
+                  data-testid="activity-tx-network-badge"
+                  size={Size.XS}
+                  name={currentChain.nickname}
+                  src={currentChain.rpcPrefs?.imageUrl}
+                  borderWidth={1}
+                  borderColor={BackgroundColor.backgroundDefault}
+                />
+              }
+            >
+              <TransactionIcon
+                category={category}
+                status={displayedStatusKey}
+              />
+            </BadgeWrapper>
             ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
           )
           ///: END:ONLY_INCLUDE_IN
         }
         subtitle={
-          <h3>
+          <Text>
             <TransactionStatusLabel
+              statusOnly
               isPending={isPending}
               isEarliestNonce={isEarliestNonce}
               error={err}
@@ -260,14 +300,7 @@ function TransactionListItemInner({
               }
               ///: END:ONLY_INCLUDE_IN
             />
-            {subtitleContainsOrigin ? (
-              <SiteOrigin siteOrigin={subtitle} />
-            ) : (
-              <span className="transaction-list-item__address" title={subtitle}>
-                {subtitle}
-              </span>
-            )}
-          </h3>
+          </Text>
         }
         rightContent={
           !isSignatureReq &&
@@ -300,7 +333,7 @@ function TransactionListItemInner({
           <a {...debugTransactionMeta} className="test-transaction-meta" />
           ///: END:ONLY_INCLUDE_IN
         }
-      </ListItem>
+      </ActivityListItem>
       {showDetails && (
         <TransactionListItemDetails
           title={title}
diff --git a/ui/components/multichain/activity-list-item/activity-list-item.js b/ui/components/multichain/activity-list-item/activity-list-item.js
index f24ce704af8c..43058fc73197 100644
--- a/ui/components/multichain/activity-list-item/activity-list-item.js
+++ b/ui/components/multichain/activity-list-item/activity-list-item.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import {
+  BackgroundColor,
   BlockSize,
-  BorderColor,
   Display,
   FlexDirection,
   FlexWrap,
@@ -36,6 +36,7 @@ export const ActivityListItem = ({
   return (
     <Box
       as="button"
+      backgroundColor={BackgroundColor.backgroundDefault}
       className={primaryClassName}
       onClick={onClick}
       data-testid={dataTestId}
@@ -45,9 +46,9 @@ export const ActivityListItem = ({
           onClick();
         }
       }}
+      padding={4}
       display={Display.Flex}
       width={BlockSize.Full}
-      borderColor={BorderColor.warningAlternative}
       flexWrap={FlexWrap.Wrap}
       gap={4}
     >