From e683063c192f4b2df74221ec2abf26c405267f27 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Fri, 9 Jun 2023 18:30:29 -0400 Subject: [PATCH 01/35] layout wip --- .../activity-list-item/activity-list-item.js | 137 ++++++++++++++++++ .../activity-list-item.stories.js | 69 +++++++++ .../multichain/activity-list-item/index.js | 1 + 3 files changed, 207 insertions(+) create mode 100644 ui/components/multichain/activity-list-item/activity-list-item.js create mode 100644 ui/components/multichain/activity-list-item/activity-list-item.stories.js create mode 100644 ui/components/multichain/activity-list-item/index.js diff --git a/ui/components/multichain/activity-list-item/activity-list-item.js b/ui/components/multichain/activity-list-item/activity-list-item.js new file mode 100644 index 000000000000..f24ce704af8c --- /dev/null +++ b/ui/components/multichain/activity-list-item/activity-list-item.js @@ -0,0 +1,137 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import { + BlockSize, + BorderColor, + Display, + FlexDirection, + FlexWrap, + FontWeight, + JustifyContent, + TextAlign, + TextColor, + TextVariant, +} from '../../../helpers/constants/design-system'; +import { Box, Text } from '../../component-library'; + +export const ActivityListItem = ({ + topContent, + icon, + title, + subtitle, + midContent, + children, + rightContent, + onClick, + className, + 'data-testid': dataTestId, +}) => { + const primaryClassName = classnames( + 'activity-list-item', + className, + subtitle || children ? '' : 'activity-list-item--single-content-row', + ); + + return ( + { + if (event.key === 'Enter') { + onClick(); + } + }} + display={Display.Flex} + width={BlockSize.Full} + borderColor={BorderColor.warningAlternative} + flexWrap={FlexWrap.Wrap} + gap={4} + > + {topContent ? ( + + {topContent} + + ) : null} + + {icon ? {icon} : null} + + + + {title} + + {subtitle ? ( + + {subtitle} + + ) : null} + {children ? ( + + {children} + + ) : null} + + + {midContent ? ( + + {midContent} + + ) : null} + {rightContent ? ( + + {rightContent} + + ) : null} + + + + ); +}; + +ActivityListItem.propTypes = { + topContent: PropTypes.node, + icon: PropTypes.node, + title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + subtitle: PropTypes.node, + midContent: PropTypes.node, + children: PropTypes.node, + rightContent: PropTypes.node, + onClick: PropTypes.func, + className: PropTypes.string, + 'data-testid': PropTypes.string, +}; diff --git a/ui/components/multichain/activity-list-item/activity-list-item.stories.js b/ui/components/multichain/activity-list-item/activity-list-item.stories.js new file mode 100644 index 000000000000..743179d334f9 --- /dev/null +++ b/ui/components/multichain/activity-list-item/activity-list-item.stories.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + AvatarIcon, + Box, + ButtonPrimary, + ButtonSecondary, +} from '../../component-library'; +import { Display } from '../../../helpers/constants/design-system'; +import { ActivityListItem } from './activity-list-item'; + +export default { + title: 'Components/Multichain/ActivityListItem', + argTypes: { + title: { + control: 'text', + }, + subtitle: { + control: 'text', + }, + className: { + control: 'text', + }, + topContent: { + control: 'text', + }, + midContent: { + control: 'text', + }, + children: { + control: 'element', + }, + rightContent: { + control: 'text', + }, + }, + args: { + topContent: 'Sept 20', + icon: , + title: 'Send DAI', + subtitle: 'Pending', + children: ( + + button1 + button2 + + ), + // midContent: 'midcontent', + rightContent: , + }, +}; + +function Currencies({ primary, secondary }) { + return ( +
+
{primary}
+
{secondary}
+
+ ); +} + +Currencies.propTypes = { + primary: PropTypes.string, + secondary: PropTypes.string, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/multichain/activity-list-item/index.js b/ui/components/multichain/activity-list-item/index.js new file mode 100644 index 000000000000..c07e45128df5 --- /dev/null +++ b/ui/components/multichain/activity-list-item/index.js @@ -0,0 +1 @@ +export { ActivityListItem } from './activity-list-item'; From 0d3c6f317e613a5bf2ad455c1a02893e12c6bbde 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 02/35] 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
; + return ( + + ); } - return ; + return ( + + ); } 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 ( <> - + + } + > + + } subtitle={

@@ -88,7 +122,7 @@ export default function SmartTransactionListItem({ />

)} - + {showDetails && ( - + - + ) : ( ///: END:ONLY_INCLUDE_IN - + + } + > + + ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) ) ///: END:ONLY_INCLUDE_IN } subtitle={ -

+ - {subtitleContainsOrigin ? ( - - ) : ( - - {subtitle} - - )} -

+ } rightContent={ !isSignatureReq && @@ -300,7 +333,7 @@ function TransactionListItemInner({ ///: END:ONLY_INCLUDE_IN } - + {showDetails && ( From 8ab94d643e2f602e4841ddccaa6052bf395b1a60 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Thu, 15 Jun 2023 00:19:23 -0400 Subject: [PATCH 03/35] grouping by date wip --- .../smart-transaction-list-item.component.js | 6 +- .../transaction-list-item.component.js | 22 +++-- .../transaction-list.component.js | 80 ++++++++++++++----- 3 files changed, 75 insertions(+), 33 deletions(-) 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 af01c63217a8..04699927dfe6 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 @@ -50,11 +50,7 @@ export default function SmartTransactionListItem({ destinationTokenSymbol, ]); const subtitle = 'metamask'; - const date = formatDateWithYearContext( - time, - "MMM d 'at' h:mm a", - "MMM d, y 'at' h:mm a", - ); + const date = formatDateWithYearContext(time, 'MMM d, y', 'MMM d'); let displayedStatusKey; if (status === SmartTransactionStatus.pending) { displayedStatusKey = TransactionGroupStatus.pending; 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 242871c3447a..2ba19a12810b 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 @@ -15,8 +15,11 @@ import TransactionStatusLabel from '../transaction-status-label/transaction-stat import TransactionIcon from '../transaction-icon'; import { BackgroundColor, + Color, Display, + FontWeight, Size, + TextVariant, } from '../../../helpers/constants/design-system'; import { AvatarNetwork, @@ -140,8 +143,8 @@ function TransactionListItemInner({ } = useTransactionDisplayData(transactionGroup); const date = formatDateWithYearContext( transactionGroup.primaryTransaction.time, - "MMM d 'at' h:mm a", - "MMM d, y 'at' h:mm a", + 'MMM d, y', + 'MMM d', ); const isSignatureReq = category === TransactionGroupCategory.signatureRequest; const isApproval = category === TransactionGroupCategory.approval; @@ -306,27 +309,29 @@ function TransactionListItemInner({ !isSignatureReq && !isApproval && ( <> -

{primaryCurrency} -

-

+ + {secondaryCurrency} -

+ ) } >
- {speedUpButton} {showCancelButton && ( )} + {speedUpButton}
{ ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) @@ -402,6 +407,7 @@ TransactionListItemInner.propTypes = { }; const TransactionListItem = (props) => { + debugger; const { transactionGroup } = props; const [editGasMode, setEditGasMode] = useState(); const transaction = transactionGroup.primaryTransaction; diff --git a/ui/components/app/transaction-list/transaction-list.component.js b/ui/components/app/transaction-list/transaction-list.component.js index be50d01f9a4a..a389f6317bc5 100644 --- a/ui/components/app/transaction-list/transaction-list.component.js +++ b/ui/components/app/transaction-list/transaction-list.component.js @@ -14,6 +14,8 @@ import { TOKEN_CATEGORY_HASH } from '../../../helpers/constants/transactions'; import { SWAPS_CHAINID_CONTRACT_ADDRESS_MAP } from '../../../../shared/constants/swaps'; import { TransactionType } from '../../../../shared/constants/transaction'; import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; +import { Text } from '../../component-library'; +import { date } from 'superstruct'; const PAGE_INCREMENT = 10; @@ -94,13 +96,40 @@ export default function TransactionList({ chainId, ], ); + const groupTransactionsByDate = (transactionGroups) => { + const groupedTransactions = []; + + transactionGroups.forEach((transactionGroup) => { + const date = new Date( + transactionGroup.primaryTransaction.time, + ).toDateString(); + + const existingGroup = groupedTransactions.find( + (group) => group.date === date, + ); + + if (existingGroup) { + existingGroup.transactionGroups.push(transactionGroup); + } else { + groupedTransactions.push({ + date, + transactionGroups: [transactionGroup], + }); + } + }); + + return groupedTransactions; + }; + const completedTransactions = useMemo( () => - getFilteredTransactionGroups( - unfilteredCompletedTransactions, - hideTokenTransactions, - tokenAddress, - chainId, + groupTransactionsByDate( + getFilteredTransactionGroups( + unfilteredCompletedTransactions, + hideTokenTransactions, + tokenAddress, + chainId, + ), ), [ hideTokenTransactions, @@ -167,21 +196,32 @@ export default function TransactionList({ ) ///: END:ONLY_INCLUDE_IN .slice(0, limit) - .map((transactionGroup, index) => - transactionGroup.initialTransaction?.transactionType === - 'smart' ? ( - - ) : ( - - ), - ) + .map((dateGroup) => { + return dateGroup.transactionGroups.map( + (transactionGroup, index) => + transactionGroup.initialTransaction?.transactionType === + 'smart' ? ( + <> + {dateGroup.date} + + + ) : ( + <> + {dateGroup.date} + + + ), + ); + }) ) : (
From 27a36f20c34afbdf82af334bcca9480249448bd3 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Thu, 15 Jun 2023 00:21:23 -0400 Subject: [PATCH 04/35] typo fix --- ui/components/app/transaction-list/transaction-list.component.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/components/app/transaction-list/transaction-list.component.js b/ui/components/app/transaction-list/transaction-list.component.js index a389f6317bc5..6829dce37e0a 100644 --- a/ui/components/app/transaction-list/transaction-list.component.js +++ b/ui/components/app/transaction-list/transaction-list.component.js @@ -15,7 +15,6 @@ import { SWAPS_CHAINID_CONTRACT_ADDRESS_MAP } from '../../../../shared/constants import { TransactionType } from '../../../../shared/constants/transaction'; import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; import { Text } from '../../component-library'; -import { date } from 'superstruct'; const PAGE_INCREMENT = 10; From 4393fd0da39d1def4f3166ec0d66745ba422791b Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Thu, 15 Jun 2023 17:45:47 -0400 Subject: [PATCH 05/35] group txs by date, button styling --- .../app/transaction-list-item/index.scss | 6 +- .../transaction-list-item.component.js | 14 ++- .../transaction-list.component.js | 113 ++++++++++-------- .../activity-list-item/activity-list-item.js | 28 ++--- 4 files changed, 90 insertions(+), 71 deletions(-) diff --git a/ui/components/app/transaction-list-item/index.scss b/ui/components/app/transaction-list-item/index.scss index d4aa3f1c387e..8c1296b4d23c 100644 --- a/ui/components/app/transaction-list-item/index.scss +++ b/ui/components/app/transaction-list-item/index.scss @@ -23,14 +23,12 @@ } &__pending-actions { - padding-top: 12px; display: flex; .button { - @include H8; + @include H6; - padding: 8px; - width: 75px; + width: 90px; white-space: nowrap; } 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 2ba19a12810b..23fbef154df7 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 @@ -19,6 +19,7 @@ import { Display, FontWeight, Size, + TextAlign, TextVariant, } from '../../../helpers/constants/design-system'; import { @@ -241,7 +242,6 @@ function TransactionListItemInner({ return ( <> {primaryCurrency} - + {secondaryCurrency} ) } > -
+ {showCancelButton && ( )} {speedUpButton} -
+ { ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) @@ -407,7 +412,6 @@ TransactionListItemInner.propTypes = { }; const TransactionListItem = (props) => { - debugger; const { transactionGroup } = props; const [editGasMode, setEditGasMode] = useState(); const transaction = transactionGroup.primaryTransaction; diff --git a/ui/components/app/transaction-list/transaction-list.component.js b/ui/components/app/transaction-list/transaction-list.component.js index 6829dce37e0a..99da3bf9b691 100644 --- a/ui/components/app/transaction-list/transaction-list.component.js +++ b/ui/components/app/transaction-list/transaction-list.component.js @@ -14,7 +14,12 @@ import { TOKEN_CATEGORY_HASH } from '../../../helpers/constants/transactions'; import { SWAPS_CHAINID_CONTRACT_ADDRESS_MAP } from '../../../../shared/constants/swaps'; import { TransactionType } from '../../../../shared/constants/transaction'; import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; -import { Text } from '../../component-library'; +import { Box, Text } from '../../component-library'; +import { + TextColor, + TextVariant, +} from '../../../helpers/constants/design-system'; +import { formatDateWithYearContext } from '../../../helpers/utils/util'; const PAGE_INCREMENT = 10; @@ -65,6 +70,33 @@ const getFilteredTransactionGroups = ( return transactionGroups; }; +const groupTransactionsByDate = (transactionGroups) => { + const groupedTransactions = []; + + transactionGroups.forEach((transactionGroup) => { + const date = formatDateWithYearContext( + transactionGroup.primaryTransaction.time, + 'MMM d, y', + 'MMM d', + ); + + const existingGroup = groupedTransactions.find( + (group) => group.date === date, + ); + + if (existingGroup) { + existingGroup.transactionGroups.push(transactionGroup); + } else { + groupedTransactions.push({ + date, + transactionGroups: [transactionGroup], + }); + } + }); + + return groupedTransactions; +}; + export default function TransactionList({ hideTokenTransactions, tokenAddress, @@ -95,30 +127,6 @@ export default function TransactionList({ chainId, ], ); - const groupTransactionsByDate = (transactionGroups) => { - const groupedTransactions = []; - - transactionGroups.forEach((transactionGroup) => { - const date = new Date( - transactionGroup.primaryTransaction.time, - ).toDateString(); - - const existingGroup = groupedTransactions.find( - (group) => group.date === date, - ); - - if (existingGroup) { - existingGroup.transactionGroups.push(transactionGroup); - } else { - groupedTransactions.push({ - date, - transactionGroups: [transactionGroup], - }); - } - }); - - return groupedTransactions; - }; const completedTransactions = useMemo( () => @@ -144,7 +152,7 @@ export default function TransactionList({ ); return ( -
+
{pendingTransactions.length > 0 && (
@@ -197,28 +205,39 @@ export default function TransactionList({ .slice(0, limit) .map((dateGroup) => { return dateGroup.transactionGroups.map( - (transactionGroup, index) => - transactionGroup.initialTransaction?.transactionType === - 'smart' ? ( - <> - {dateGroup.date} - - - ) : ( + (transactionGroup, index) => { + return ( <> - {dateGroup.date} - + {index === 0 && ( + + {dateGroup.date} + + )} + {transactionGroup.initialTransaction + ?.transactionType === 'smart' ? ( + + ) : ( + + )} - ), + ); + }, ); }) ) : ( @@ -239,7 +258,7 @@ export default function TransactionList({ )}
-
+ ); } 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 43058fc73197..c5a3700f9591 100644 --- a/ui/components/multichain/activity-list-item/activity-list-item.js +++ b/ui/components/multichain/activity-list-item/activity-list-item.js @@ -52,7 +52,7 @@ export const ActivityListItem = ({ flexWrap={FlexWrap.Wrap} gap={4} > - {topContent ? ( + {topContent && ( {topContent} - ) : null} + )} - {icon ? {icon} : null} + {icon && {icon}} @@ -88,7 +88,7 @@ export const ActivityListItem = ({ > {title} - {subtitle ? ( + {subtitle && ( {subtitle} - ) : null} - {children ? ( - - {children} - - ) : null} + )} + {children && ( + {children} + )} - {midContent ? ( + {midContent && ( {midContent} - ) : null} - {rightContent ? ( + )} + {rightContent && ( {rightContent} - ) : null} + )} From 5890503e30399f99badae18df101075974054979 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Fri, 16 Jun 2023 18:07:21 -0400 Subject: [PATCH 06/35] removing queue/history division, adding datestamp for pending tx, minor styling changes --- .../smart-transaction-list-item.component.js | 21 ++-- .../transaction-list-item.component.js | 2 +- .../transaction-list.component.js | 118 ++++++++++-------- 3 files changed, 76 insertions(+), 65 deletions(-) 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 04699927dfe6..0373f0d50082 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 @@ -14,18 +14,20 @@ 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'; import { ActivityListItem } from '../../multichain/activity-list-item'; import { AvatarNetwork, BadgeWrapper, BadgeWrapperAnchorElementShape, + Box, + Text, } from '../../component-library'; import { BackgroundColor, Display, Size, + TextVariant, } from '../../../helpers/constants/design-system'; import { getCurrentNetwork } from '../../../selectors'; @@ -49,7 +51,6 @@ export default function SmartTransactionListItem({ sourceTokenSymbol, destinationTokenSymbol, ]); - const subtitle = 'metamask'; const date = formatDateWithYearContext(time, 'MMM d, y', 'MMM d'); let displayedStatusKey; if (status === SmartTransactionStatus.pending) { @@ -90,24 +91,22 @@ export default function SmartTransactionListItem({ } subtitle={ -

+ - -

+ } > {displayedStatusKey === TransactionGroupStatus.pending && showCancelSwapLink && ( -
+ { @@ -116,7 +115,7 @@ export default function SmartTransactionListItem({ setCancelSwapLinkClicked(true); }} /> -
+ )} {showDetails && ( 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 23fbef154df7..1c5eb3dc83b0 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 @@ -319,7 +319,7 @@ function TransactionListItemInner({ {primaryCurrency} diff --git a/ui/components/app/transaction-list/transaction-list.component.js b/ui/components/app/transaction-list/transaction-list.component.js index 99da3bf9b691..9469eb2e7ebb 100644 --- a/ui/components/app/transaction-list/transaction-list.component.js +++ b/ui/components/app/transaction-list/transaction-list.component.js @@ -111,14 +111,29 @@ export default function TransactionList({ nonceSortedCompletedTransactionsSelector, ); const chainId = useSelector(getCurrentChainId); + const renderDateStamp = (index, dateGroup) => { + return index === 0 ? ( + + {dateGroup.date} + + ) : null; + }; const pendingTransactions = useMemo( () => - getFilteredTransactionGroups( - unfilteredPendingTransactions, - hideTokenTransactions, - tokenAddress, - chainId, + groupTransactionsByDate( + getFilteredTransactionGroups( + unfilteredPendingTransactions, + hideTokenTransactions, + tokenAddress, + chainId, + ), ), [ hideTokenTransactions, @@ -153,48 +168,54 @@ export default function TransactionList({ return ( -
+ {pendingTransactions.length > 0 && ( -
-
- {`${t('queue')} (${pendingTransactions.length})`} -
+ {pendingTransactions ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) .sort( (a, b) => b.primaryTransaction.time - a.primaryTransaction.time, ) ///: END:ONLY_INCLUDE_IN - .map((transactionGroup, index) => { - ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) - if ( - transactionGroup.initialTransaction.transactionType === - TransactionType.smart - ) { - return ( - - ); - } - ///: END:ONLY_INCLUDE_IN - return ( - + .map((dateGroup) => { + return dateGroup.transactionGroups.map( + (transactionGroup, index) => { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + if ( + transactionGroup.initialTransaction.transactionType === + TransactionType.smart + ) { + return ( + <> + {renderDateStamp(index, dateGroup)} + + + ); + } + ///: END:ONLY_INCLUDE_IN + return ( + <> + {renderDateStamp(index, dateGroup)} + + + ); + }, ); })} -
+ )} -
- {pendingTransactions.length > 0 ? ( -
{t('history')}
- ) : null} + {completedTransactions.length > 0 ? ( completedTransactions ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) @@ -208,16 +229,7 @@ export default function TransactionList({ (transactionGroup, index) => { return ( <> - {index === 0 && ( - - {dateGroup.date} - - )} + {renderDateStamp(index, dateGroup)} {transactionGroup.initialTransaction ?.transactionType === 'smart' ? ( -
+ + {t('noTransactions')} -
-
+ + )} {completedTransactions.length > limit && (
-
+ + ); } From d0f855bde478ba4138c3b936488a98c432633a68 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Tue, 20 Jun 2023 11:31:07 -0400 Subject: [PATCH 07/35] adding tests, updating snap --- .../activity-list-item.test.js.snap | 97 +++++++++++++++++++ .../activity-list-item/activity-list-item.js | 8 +- .../activity-list-item.test.js | 45 +++++++++ 3 files changed, 145 insertions(+), 5 deletions(-) create mode 100644 ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap create mode 100644 ui/components/multichain/activity-list-item/activity-list-item.test.js diff --git a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap new file mode 100644 index 000000000000..0e9aac3bcc8b --- /dev/null +++ b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap @@ -0,0 +1,97 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ActivityListItem should match snapshot with no props 1`] = ` +
+ +
+`; + +exports[`ActivityListItem should match snapshot with props 1`] = ` +
+ +
+
+
+

+ Content rendered in the middle +

+
+
+

+ Content rendered to the right +

+
+ + + + +`; 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 c5a3700f9591..7249dc3294c1 100644 --- a/ui/components/multichain/activity-list-item/activity-list-item.js +++ b/ui/components/multichain/activity-list-item/activity-list-item.js @@ -27,11 +27,9 @@ export const ActivityListItem = ({ className, 'data-testid': dataTestId, }) => { - const primaryClassName = classnames( - 'activity-list-item', - className, - subtitle || children ? '' : 'activity-list-item--single-content-row', - ); + const primaryClassName = classnames('activity-list-item', className, { + 'activity-list-item--single-content-row': !(subtitle || children), + }); return ( I am a list item

; +const CLASSNAME = 'list-item-test'; +const RIGHT_CONTENT =

Content rendered to the right

; +const CHILDREN = ; +const MID_CONTENT =

Content rendered in the middle

; +const TOP_CONTENT =

Content rendered at the top

; + +describe('ActivityListItem', () => { + const defaultProps = { + className: CLASSNAME, + title: TITLE, + 'data-testid': 'test-id', + subtitle: SUBTITLE, + rightContent: RIGHT_CONTENT, + midContent: MID_CONTENT, + topContent: TOP_CONTENT, + icon: , + onClick: jest.fn(), + }; + + it('should match snapshot with no props', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('should match snapshot with props', () => { + const { container } = render( + {CHILDREN}, + ); + + expect(container).toMatchSnapshot(); + }); + + it('calls onClick when clicked', () => { + const { getByRole } = render(); + fireEvent.click(getByRole('button')); + expect(defaultProps.onClick).toHaveBeenCalled(); + }); +}); From 4026931b36382f466f1c014eee28e70f7fc91248 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Tue, 20 Jun 2023 14:06:34 -0400 Subject: [PATCH 08/35] font size fix --- .../smart-transaction-list-item.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0373f0d50082..d0559677cb36 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 @@ -91,7 +91,7 @@ export default function SmartTransactionListItem({ } subtitle={ - + Date: Tue, 20 Jun 2023 18:07:59 -0400 Subject: [PATCH 09/35] e2e fixes --- .../transaction-list-item/transaction-list-item.component.js | 2 ++ 1 file changed, 2 insertions(+) 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 1c5eb3dc83b0..a6c367f26b57 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 @@ -315,6 +315,7 @@ function TransactionListItemInner({ color={Color.textDefault} title={primaryCurrency} textAlign={TextAlign.Right} + className="transaction-list-item__primary-currency" > {primaryCurrency} @@ -322,6 +323,7 @@ function TransactionListItemInner({ variant={TextVariant.bodyMd} color={Color.textAlternative} textAlign={TextAlign.Right} + className="transaction-list-item__secondary-currency" > {secondaryCurrency} From 473a1404c70bf9199500e02a76b2cb49b622aa34 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Thu, 22 Jun 2023 11:07:15 -0500 Subject: [PATCH 10/35] Remove unnecessary tabIndex and keypress handler --- .../__snapshots__/activity-list-item.test.js.snap | 2 -- .../multichain/activity-list-item/activity-list-item.js | 6 ------ 2 files changed, 8 deletions(-) diff --git a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap index 0e9aac3bcc8b..5618ae8b5ccb 100644 --- a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap +++ b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap @@ -4,7 +4,6 @@ exports[`ActivityListItem should match snapshot with no props 1`] = `
@@ -56,6 +57,7 @@ exports[`ActivityListItem should match snapshot with props 1`] = ` >

Hello World

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 93d4255c2afb..d4f8dd5c9ef8 100644 --- a/ui/components/multichain/activity-list-item/activity-list-item.js +++ b/ui/components/multichain/activity-list-item/activity-list-item.js @@ -77,6 +77,7 @@ export const ActivityListItem = ({ textAlign={TextAlign.Left} variant={TextVariant.bodyLgMedium} fontWeight={FontWeight.Medium} + data-testid="activity-list-item-action" > {title} From b5b9ec8d0d2ca4e7b0aae68bea2c1dd62ef3da7e Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 23 Jun 2023 09:36:42 -0500 Subject: [PATCH 17/35] More E2E --- test/e2e/nft/send-nft.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/nft/send-nft.spec.js b/test/e2e/nft/send-nft.spec.js index e08d12eb18e0..1e0ee1c05749 100644 --- a/test/e2e/nft/send-nft.spec.js +++ b/test/e2e/nft/send-nft.spec.js @@ -64,13 +64,13 @@ describe('Send NFT', function () { // When transaction complete, check the send NFT is displayed in activity tab await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); const sendNftItem = await driver.findElement({ - css: 'h2', + css: '[data-testid="activity-list-item-action"]', text: 'Send Test Dapp NFTs', }); assert.equal(await sendNftItem.isDisplayed(), true); From a150512e9d031fccc161e0675da15d6eb4ad79f9 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Fri, 23 Jun 2023 15:55:58 -0500 Subject: [PATCH 18/35] More E2Es --- test/e2e/metamask-ui.spec.js | 8 ++++---- test/e2e/mv3/multiple-restarts.spec.js | 2 +- test/e2e/nft/erc721-interaction.spec.js | 4 ++-- test/e2e/swaps/shared.js | 4 +++- test/e2e/tests/address-book.spec.js | 2 +- test/e2e/tests/contract-interactions.spec.js | 4 ++-- test/e2e/tests/edit-gas-fee.spec.js | 4 ++-- test/e2e/tests/failing-contract.spec.js | 8 ++++---- test/e2e/tests/import-flow.spec.js | 2 +- test/e2e/tests/metamask-responsive-ui.spec.js | 2 +- test/e2e/tests/multiple-transactions.spec.js | 4 ++-- test/e2e/tests/send-edit.spec.js | 4 ++-- test/e2e/tests/send-eth.spec.js | 10 +++++----- test/e2e/tests/send-hex-address.spec.js | 12 ++++++------ test/e2e/tests/stuck-approved-transaction.spec.js | 2 +- 15 files changed, 37 insertions(+), 35 deletions(-) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index b52f6d938ded..0ac251c8a007 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -466,7 +466,7 @@ describe('MetaMask', function () { await driver.wait(async () => { const pendingTxes = await driver.findElements( - '.transaction-list__pending-transactions .transaction-list-item', + '.transaction-list__pending-transactions .activity-list-item', ); return pendingTxes.length === 1; }, 10000); @@ -475,7 +475,7 @@ describe('MetaMask', function () { css: '.transaction-list-item__primary-currency', text: '-1.5 TST', }); - await driver.clickElement('.transaction-list-item'); + await driver.clickElement('.activity-list-item'); await driver.delay(regularDelayMs); }); @@ -489,12 +489,12 @@ describe('MetaMask', function () { await driver.waitForSelector({ // Select the heading of the first transaction list item in the // completed transaction list with text matching Send TST - css: '.transaction-list__completed-transactions .transaction-list-item:first-child .list-item__heading', + css: '.transaction-list__completed-transactions .activity-list-item .list-item__heading', text: 'Send TST', }); await driver.waitForSelector({ - css: '.transaction-list__completed-transactions .transaction-list-item:first-child .transaction-list-item__primary-currency', + css: '.transaction-list__completed-transactions .activity-list-item .transaction-list-item__primary-currency', text: '-1.5 TST', }); }); diff --git a/test/e2e/mv3/multiple-restarts.spec.js b/test/e2e/mv3/multiple-restarts.spec.js index c2b636c01dce..a90111d2ac77 100644 --- a/test/e2e/mv3/multiple-restarts.spec.js +++ b/test/e2e/mv3/multiple-restarts.spec.js @@ -132,7 +132,7 @@ describe('MV3 - Restart service worker multiple times', function () { await driver.clickElement('[data-testid="page-container-footer-next"]'); await driver.clickElement('[data-testid="home__activity-tab"]'); - await driver.findElement('.transaction-list-item'); + await driver.findElement('.activity-list-item'); // reset view to assets tab await driver.clickElement('[data-testid="home__asset-tab"]'); diff --git a/test/e2e/nft/erc721-interaction.spec.js b/test/e2e/nft/erc721-interaction.spec.js index 65819f0afe4c..d88f31f641c4 100644 --- a/test/e2e/nft/erc721-interaction.spec.js +++ b/test/e2e/nft/erc721-interaction.spec.js @@ -266,7 +266,7 @@ describe('ERC721 NFTs testdapp interaction', function () { await driver.switchToWindow(extension); await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); // Verify transaction @@ -405,7 +405,7 @@ describe('ERC721 NFTs testdapp interaction', function () { await driver.switchToWindow(extension); await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); // Verify transaction diff --git a/test/e2e/swaps/shared.js b/test/e2e/swaps/shared.js index deea6711acc2..8e77d2ad6b0b 100644 --- a/test/e2e/swaps/shared.js +++ b/test/e2e/swaps/shared.js @@ -124,7 +124,9 @@ const checkActivityTransaction = async (driver, options) => { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.waitForSelector('.activity-list-item'); - const transactionList = await driver.findElements('[data-testid="activity-list-item-action"]'); + const transactionList = await driver.findElements( + '[data-testid="activity-list-item-action"]', + ); const transactionText = await transactionList[options.index].getText(); assert.equal( transactionText, diff --git a/test/e2e/tests/address-book.spec.js b/test/e2e/tests/address-book.spec.js index 19f526fa2c66..2009aa310162 100644 --- a/test/e2e/tests/address-book.spec.js +++ b/test/e2e/tests/address-book.spec.js @@ -62,7 +62,7 @@ describe('Address Book', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); diff --git a/test/e2e/tests/contract-interactions.spec.js b/test/e2e/tests/contract-interactions.spec.js index c5c0e660037a..8a5cdb26006c 100644 --- a/test/e2e/tests/contract-interactions.spec.js +++ b/test/e2e/tests/contract-interactions.spec.js @@ -65,7 +65,7 @@ describe('Deploy contract and call contract methods', function () { ); await driver.clickElement({ text: 'Activity', tag: 'button' }); await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); await driver.waitForSelector({ css: '.transaction-list-item__primary-currency', @@ -84,7 +84,7 @@ describe('Deploy contract and call contract methods', function () { WINDOW_TITLES.ExtensionInFullScreenView, ); await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(2)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(2)', ); await driver.waitForSelector({ css: '.transaction-list-item__primary-currency', diff --git a/test/e2e/tests/edit-gas-fee.spec.js b/test/e2e/tests/edit-gas-fee.spec.js index b304ba2f6d33..6823f3f08be2 100644 --- a/test/e2e/tests/edit-gas-fee.spec.js +++ b/test/e2e/tests/edit-gas-fee.spec.js @@ -165,7 +165,7 @@ describe('Editing Confirm Transaction', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); @@ -254,7 +254,7 @@ describe('Editing Confirm Transaction', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); diff --git a/test/e2e/tests/failing-contract.spec.js b/test/e2e/tests/failing-contract.spec.js index cc25bc3c86ce..6a896b47eb74 100644 --- a/test/e2e/tests/failing-contract.spec.js +++ b/test/e2e/tests/failing-contract.spec.js @@ -68,12 +68,12 @@ describe('Failing contract interaction ', function () { await driver.switchToWindow(extension); await driver.clickElement({ text: 'Activity', tag: 'button' }); await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); // display the transaction status const transactionStatus = await driver.findElement( - '.transaction-list-item:nth-of-type(1) .transaction-status-label', + '.activity-list-item:nth-of-type(1) .transaction-status-label', ); assert.equal(await transactionStatus.getText(), 'Failed'); }, @@ -151,12 +151,12 @@ describe('Failing contract interaction on non-EIP1559 network', function () { await driver.switchToWindow(extension); await driver.clickElement({ text: 'Activity', tag: 'button' }); await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); // display the transaction status const transactionStatus = await driver.findElement( - '.transaction-list-item:nth-of-type(1) .transaction-status-label', + '.activity-list-item:nth-of-type(1) .transaction-status-label', ); assert.equal(await transactionStatus.getText(), 'Failed'); }, diff --git a/test/e2e/tests/import-flow.spec.js b/test/e2e/tests/import-flow.spec.js index 8003822b2fb5..b958978d49bd 100644 --- a/test/e2e/tests/import-flow.spec.js +++ b/test/e2e/tests/import-flow.spec.js @@ -124,7 +124,7 @@ describe('Import flow', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); diff --git a/test/e2e/tests/metamask-responsive-ui.spec.js b/test/e2e/tests/metamask-responsive-ui.spec.js index a930a3235508..35f607307d68 100644 --- a/test/e2e/tests/metamask-responsive-ui.spec.js +++ b/test/e2e/tests/metamask-responsive-ui.spec.js @@ -159,7 +159,7 @@ describe('MetaMask Responsive UI', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); diff --git a/test/e2e/tests/multiple-transactions.spec.js b/test/e2e/tests/multiple-transactions.spec.js index d1812057567f..b213f3dcacfb 100644 --- a/test/e2e/tests/multiple-transactions.spec.js +++ b/test/e2e/tests/multiple-transactions.spec.js @@ -72,7 +72,7 @@ describe('Multiple transactions', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); assert.equal(confirmedTxes.length, 2); @@ -137,7 +137,7 @@ describe('Multiple transactions', function () { // should not be present await driver.assertElementNotPresent( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); }, ); diff --git a/test/e2e/tests/send-edit.spec.js b/test/e2e/tests/send-edit.spec.js index 6157f2e66444..127f4ded1020 100644 --- a/test/e2e/tests/send-edit.spec.js +++ b/test/e2e/tests/send-edit.spec.js @@ -68,7 +68,7 @@ describe('Editing Confirm Transaction', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); @@ -159,7 +159,7 @@ describe('Editing Confirm Transaction', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js index 64bdaace08f2..177cf8ff556f 100644 --- a/test/e2e/tests/send-eth.spec.js +++ b/test/e2e/tests/send-eth.spec.js @@ -79,7 +79,7 @@ describe('Send ETH from inside MetaMask using default gas', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); @@ -199,7 +199,7 @@ describe('Send ETH from inside MetaMask using advanced gas modal', function () { await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); @@ -279,7 +279,7 @@ describe('Send ETH from dapp using advanced gas controls', function () { // finds the transaction in the transactions list await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); await driver.waitForSelector({ css: '.transaction-list-item__primary-currency', @@ -363,7 +363,7 @@ describe('Send ETH from dapp using advanced gas controls', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); await driver.waitForSelector({ css: '.transaction-list-item__primary-currency', @@ -432,7 +432,7 @@ describe('Send ETH from inside MetaMask to a Multisig Address', function () { await assertAccountBalanceForDOM(driver, ganacheServer); await driver.clickElement('[data-testid="home__activity-tab"]'); const txn = await driver.isElementPresent( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); assert.equal(txn, true); diff --git a/test/e2e/tests/send-hex-address.spec.js b/test/e2e/tests/send-hex-address.spec.js index f4f3c22b5faf..cd656e9963e5 100644 --- a/test/e2e/tests/send-hex-address.spec.js +++ b/test/e2e/tests/send-hex-address.spec.js @@ -50,7 +50,7 @@ describe('Send ETH to a 40 character hexadecimal address', function () { await driver.clickElement({ text: 'Confirm', tag: 'button' }); await driver.clickElement('[data-testid="home__activity-tab"]'); const sendTransactionListItem = await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); await sendTransactionListItem.click(); await driver.clickElement({ text: 'Activity log', tag: 'summary' }); @@ -95,7 +95,7 @@ describe('Send ETH to a 40 character hexadecimal address', function () { await driver.clickElement({ text: 'Confirm', tag: 'button' }); await driver.clickElement('[data-testid="home__activity-tab"]'); const sendTransactionListItem = await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); await sendTransactionListItem.click(); await driver.clickElement({ text: 'Activity log', tag: 'summary' }); @@ -166,10 +166,10 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () { await driver.clickElement({ text: 'Confirm', tag: 'button' }); await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); const sendTransactionListItem = await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); await sendTransactionListItem.click(); await driver.clickElement({ text: 'Activity log', tag: 'summary' }); @@ -227,10 +227,10 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () { await driver.clickElement({ text: 'Confirm', tag: 'button' }); await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); const sendTransactionListItem = await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); await sendTransactionListItem.click(); await driver.clickElement({ text: 'Activity log', tag: 'summary' }); diff --git a/test/e2e/tests/stuck-approved-transaction.spec.js b/test/e2e/tests/stuck-approved-transaction.spec.js index daf73265dc52..ec3de388afbd 100644 --- a/test/e2e/tests/stuck-approved-transaction.spec.js +++ b/test/e2e/tests/stuck-approved-transaction.spec.js @@ -31,7 +31,7 @@ describe('Editing Confirm Transaction', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); From 1abdf3ea3c3b104269b1bf792cd2dd2df44c2025 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Mon, 26 Jun 2023 10:11:47 -0500 Subject: [PATCH 19/35] More test fixes --- test/e2e/metamask-ui.spec.js | 6 +++--- .../smart-transaction-list-item.component.js | 4 ++-- .../transaction-list-item.component.js | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 0ac251c8a007..5a40bfb2bac9 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -344,7 +344,7 @@ describe('MetaMask', function () { }); await driver.waitForSelector({ - css: '.list-item__heading', + css: '[data-testid="activity-list-item-action"]', text: 'Send TST', }); }); @@ -420,7 +420,7 @@ describe('MetaMask', function () { }); await driver.waitForSelector({ - css: '.list-item__heading', + css: '[data-testid="activity-list-item-action"]', text: 'Send TST', }); }); @@ -489,7 +489,7 @@ describe('MetaMask', function () { await driver.waitForSelector({ // Select the heading of the first transaction list item in the // completed transaction list with text matching Send TST - css: '.transaction-list__completed-transactions .activity-list-item .list-item__heading', + css: '.transaction-list__completed-transactions .activity-list-item [data-testid="activity-list-item-action"]', text: 'Send TST', }); 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 939d86721bb8..7ea134bb9a64 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 @@ -78,8 +78,8 @@ export default function SmartTransactionListItem({ className="activity-tx__network-badge" data-testid="activity-tx-network-badge" size={Size.XS} - name={currentChain.nickname} - src={currentChain.rpcPrefs?.imageUrl} + name={currentChain?.nickname} + src={currentChain?.rpcPrefs?.imageUrl} borderWidth={1} borderColor={BackgroundColor.backgroundDefault} /> 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 95334b73ef63..e3f39ebc1b39 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 @@ -271,8 +271,8 @@ function TransactionListItemInner({ className="activity-tx__network-badge" data-testid="activity-tx-network-badge" size={Size.XS} - name={currentChain.nickname} - src={currentChain.rpcPrefs?.imageUrl} + name={currentChain?.nickname} + src={currentChain?.rpcPrefs?.imageUrl} borderWidth={1} borderColor={BackgroundColor.backgroundDefault} /> From 8c04a264d267f907eff78cfb30c044697f08b608 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Tue, 27 Jun 2023 10:56:43 -0400 Subject: [PATCH 20/35] awaiting find instead of click --- test/e2e/metamask-ui.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 5a40bfb2bac9..232c6647e5c2 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -456,11 +456,11 @@ describe('MetaMask', function () { await driver.switchToWindow(dapp); - await driver.clickElement({ + const transferButton = await driver.findElement({ text: 'Transfer Tokens Without Gas', tag: 'button', }); - + await driver.clickElement(transferButton); await driver.switchToWindow(extension); await driver.delay(regularDelayMs); From da67fca264a6e0c8bfec9c4a31cecb555cfef3c4 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Tue, 27 Jun 2023 11:30:25 -0400 Subject: [PATCH 21/35] adding regularDelayMs to flaky test --- test/e2e/metamask-ui.spec.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 232c6647e5c2..46c8b214c819 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -456,15 +456,16 @@ describe('MetaMask', function () { await driver.switchToWindow(dapp); - const transferButton = await driver.findElement({ + await driver.clickElement({ text: 'Transfer Tokens Without Gas', tag: 'button', }); - await driver.clickElement(transferButton); + await driver.switchToWindow(extension); await driver.delay(regularDelayMs); await driver.wait(async () => { + await driver.delay(regularDelayMs); const pendingTxes = await driver.findElements( '.transaction-list__pending-transactions .activity-list-item', ); From e31fb60d8a347d2f2a6fd4f4c9ba3af069c5d590 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Tue, 27 Jun 2023 17:32:46 -0400 Subject: [PATCH 22/35] removing delay --- test/e2e/metamask-ui.spec.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 46c8b214c819..cedd79c9fc68 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -462,10 +462,8 @@ describe('MetaMask', function () { }); await driver.switchToWindow(extension); - await driver.delay(regularDelayMs); await driver.wait(async () => { - await driver.delay(regularDelayMs); const pendingTxes = await driver.findElements( '.transaction-list__pending-transactions .activity-list-item', ); From 29b7c2b388af5522a3dd9ea472fb9d9d6c885296 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Wed, 28 Jun 2023 10:15:59 -0400 Subject: [PATCH 23/35] increasing delay outside of wait --- test/e2e/metamask-ui.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index cedd79c9fc68..b056f1374141 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -462,6 +462,7 @@ describe('MetaMask', function () { }); await driver.switchToWindow(extension); + await driver.delay(veryLargeDelayMs); await driver.wait(async () => { const pendingTxes = await driver.findElements( From c8148f780eac0fbbbbb361f2f0465078cd922ec2 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Wed, 28 Jun 2023 11:19:31 -0400 Subject: [PATCH 24/35] adding back first-child to selector --- test/e2e/metamask-ui.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index b056f1374141..141764240784 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -494,7 +494,7 @@ describe('MetaMask', function () { }); await driver.waitForSelector({ - css: '.transaction-list__completed-transactions .activity-list-item .transaction-list-item__primary-currency', + css: '.transaction-list__completed-transactions .activity-list-item:first-child .transaction-list-item__primary-currency', text: '-1.5 TST', }); }); From 42814c05be1c1c39013a87886613fcf052494fda Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Wed, 28 Jun 2023 15:18:02 -0400 Subject: [PATCH 25/35] test fixes --- test/e2e/metamask-ui.spec.js | 14 ++++++++------ .../transaction-list-item.component.js | 4 ++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js index 141764240784..ac5ac1861a68 100644 --- a/test/e2e/metamask-ui.spec.js +++ b/test/e2e/metamask-ui.spec.js @@ -339,7 +339,7 @@ describe('MetaMask', function () { it('finds the transaction in the transactions list', async function () { await driver.waitForSelector({ - css: '.transaction-list__completed-transactions .transaction-list-item__primary-currency', + css: '.transaction-list__completed-transactions [data-testid="transaction-list-item-primary-currency"]', text: '-1 TST', }); @@ -370,10 +370,12 @@ describe('MetaMask', function () { await driver.findElements('.transaction-list__pending-transactions'); await driver.waitForSelector({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: '-1.5 TST', }); - await driver.clickElement('.transaction-list-item__primary-currency'); + await driver.clickElement( + '[data-testid="transaction-list-item-primary-currency"]', + ); await driver.delay(regularDelayMs); const transactionAmounts = await driver.findElements( @@ -415,7 +417,7 @@ describe('MetaMask', function () { it('finds the transaction in the transactions list', async function () { await driver.waitForSelector({ - css: '.transaction-list__completed-transactions .transaction-list-item__primary-currency', + css: '.transaction-list__completed-transactions [data-testid="transaction-list-item-primary-currency"]', text: '-1.5 TST', }); @@ -472,7 +474,7 @@ describe('MetaMask', function () { }, 10000); await driver.waitForSelector({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: '-1.5 TST', }); await driver.clickElement('.activity-list-item'); @@ -494,7 +496,7 @@ describe('MetaMask', function () { }); await driver.waitForSelector({ - css: '.transaction-list__completed-transactions .activity-list-item:first-child .transaction-list-item__primary-currency', + css: '.transaction-list__completed-transactions .activity-list-item [data-testid="transaction-list-item-primary-currency"]', text: '-1.5 TST', }); }); 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 e3f39ebc1b39..364bcdca75ab 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 @@ -313,7 +313,7 @@ function TransactionListItemInner({ color={Color.textDefault} title={primaryCurrency} textAlign={TextAlign.Right} - className="transaction-list-item__primary-currency" + data-testid="transaction-list-item-primary-currency" > {primaryCurrency} @@ -321,7 +321,7 @@ function TransactionListItemInner({ variant={TextVariant.bodyMd} color={Color.textAlternative} textAlign={TextAlign.Right} - className="transaction-list-item__secondary-currency" + data-testid="transaction-list-item-secondary-currency" > {secondaryCurrency} From f958dab11dc89c79f683a8f524962a030e911e94 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Wed, 28 Jun 2023 16:18:51 -0400 Subject: [PATCH 26/35] using datatestid for primary currency --- test/e2e/swaps/shared.js | 2 +- test/e2e/tests/address-book.spec.js | 2 +- test/e2e/tests/contract-interactions.spec.js | 4 ++-- test/e2e/tests/edit-gas-fee.spec.js | 8 ++++---- test/e2e/tests/import-flow.spec.js | 2 +- test/e2e/tests/metamask-responsive-ui.spec.js | 2 +- test/e2e/tests/send-edit.spec.js | 4 ++-- test/e2e/tests/send-eth.spec.js | 12 ++++++------ test/e2e/tests/stuck-approved-transaction.spec.js | 2 +- 9 files changed, 19 insertions(+), 19 deletions(-) diff --git a/test/e2e/swaps/shared.js b/test/e2e/swaps/shared.js index 8e77d2ad6b0b..f8f149385be5 100644 --- a/test/e2e/swaps/shared.js +++ b/test/e2e/swaps/shared.js @@ -135,7 +135,7 @@ const checkActivityTransaction = async (driver, options) => { ); await driver.findElement({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: `-${options.amount} ${options.swapFrom}`, }); diff --git a/test/e2e/tests/address-book.spec.js b/test/e2e/tests/address-book.spec.js index 2009aa310162..d88ea9e20014 100644 --- a/test/e2e/tests/address-book.spec.js +++ b/test/e2e/tests/address-book.spec.js @@ -68,7 +68,7 @@ describe('Address Book', function () { }, 10000); await driver.waitForSelector({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: '-2 ETH', }); }, diff --git a/test/e2e/tests/contract-interactions.spec.js b/test/e2e/tests/contract-interactions.spec.js index 8a5cdb26006c..4a98d9d48ad9 100644 --- a/test/e2e/tests/contract-interactions.spec.js +++ b/test/e2e/tests/contract-interactions.spec.js @@ -68,7 +68,7 @@ describe('Deploy contract and call contract methods', function () { '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); await driver.waitForSelector({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: '-4 ETH', }); @@ -87,7 +87,7 @@ describe('Deploy contract and call contract methods', function () { '.transaction-list__completed-transactions .activity-list-item:nth-of-type(2)', ); await driver.waitForSelector({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: '-0 ETH', }); diff --git a/test/e2e/tests/edit-gas-fee.spec.js b/test/e2e/tests/edit-gas-fee.spec.js index 6823f3f08be2..965ffaec7054 100644 --- a/test/e2e/tests/edit-gas-fee.spec.js +++ b/test/e2e/tests/edit-gas-fee.spec.js @@ -80,13 +80,13 @@ describe('Editing Confirm Transaction', function () { await driver.clickElement('[data-testid="home__activity-tab"]'); await driver.wait(async () => { const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .transaction-list-item', + '.transaction-list__completed-transactions .activity-list-item', ); return confirmedTxes.length === 1; }, 10000); const txValues = await driver.findElements( - '.transaction-list-item__primary-currency', + '[data-testid="transaction-list-item-primary-currency"]', ); assert.equal(txValues.length, 1); assert.ok(/-1\s*ETH/u.test(await txValues[0].getText())); @@ -171,7 +171,7 @@ describe('Editing Confirm Transaction', function () { }, 10000); const txValues = await driver.findElements( - '.transaction-list-item__primary-currency', + '[data-testid="transaction-list-item-primary-currency"]', ); assert.equal(txValues.length, 1); assert.ok(/-1\s*ETH/u.test(await txValues[0].getText())); @@ -260,7 +260,7 @@ describe('Editing Confirm Transaction', function () { }, 10000); const txValues = await driver.findElements( - '.transaction-list-item__primary-currency', + '[data-testid="transaction-list-item-primary-currency"]', ); assert.equal(txValues.length, 1); assert.ok(/-0\s*ETH/u.test(await txValues[0].getText())); diff --git a/test/e2e/tests/import-flow.spec.js b/test/e2e/tests/import-flow.spec.js index b958978d49bd..dca9e2f72e22 100644 --- a/test/e2e/tests/import-flow.spec.js +++ b/test/e2e/tests/import-flow.spec.js @@ -130,7 +130,7 @@ describe('Import flow', function () { }, 10000); const txValues = await driver.findElements( - '.transaction-list-item__primary-currency', + '[data-testid="transaction-list-item-primary-currency"]', ); assert.equal(txValues.length, 1); assert.ok(/-1\s*ETH/u.test(await txValues[0].getText())); diff --git a/test/e2e/tests/metamask-responsive-ui.spec.js b/test/e2e/tests/metamask-responsive-ui.spec.js index 35f607307d68..3e89d5e25ae6 100644 --- a/test/e2e/tests/metamask-responsive-ui.spec.js +++ b/test/e2e/tests/metamask-responsive-ui.spec.js @@ -165,7 +165,7 @@ describe('MetaMask Responsive UI', function () { }, 10000); await driver.waitForSelector({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: '-1 ETH', }); }, diff --git a/test/e2e/tests/send-edit.spec.js b/test/e2e/tests/send-edit.spec.js index 127f4ded1020..4d9955660367 100644 --- a/test/e2e/tests/send-edit.spec.js +++ b/test/e2e/tests/send-edit.spec.js @@ -74,7 +74,7 @@ describe('Editing Confirm Transaction', function () { }, 10000); const txValues = await driver.findElements( - '.transaction-list-item__primary-currency', + '[data-testid="transaction-list-item-primary-currency"]', ); assert.equal(txValues.length, 1); assert.ok(/-2.2\s*ETH/u.test(await txValues[0].getText())); @@ -165,7 +165,7 @@ describe('Editing Confirm Transaction', function () { }, 10000); const txValues = await driver.findElements( - '.transaction-list-item__primary-currency', + '[data-testid="transaction-list-item-primary-currency"]', ); assert.equal(txValues.length, 1); assert.ok(/-2.2\s*ETH/u.test(await txValues[0].getText())); diff --git a/test/e2e/tests/send-eth.spec.js b/test/e2e/tests/send-eth.spec.js index 177cf8ff556f..b0c4838c62ce 100644 --- a/test/e2e/tests/send-eth.spec.js +++ b/test/e2e/tests/send-eth.spec.js @@ -85,7 +85,7 @@ describe('Send ETH from inside MetaMask using default gas', function () { }, 10000); await driver.waitForSelector({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: '-1 ETH', }); }, @@ -205,7 +205,7 @@ describe('Send ETH from inside MetaMask using advanced gas modal', function () { }, 10000); await driver.waitForSelector({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: '-1 ETH', }); }, @@ -282,13 +282,13 @@ describe('Send ETH from dapp using advanced gas controls', function () { '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); await driver.waitForSelector({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: '-0 ETH', }); // the transaction has the expected gas price const txValue = await driver.findClickableElement( - '.transaction-list-item__primary-currency', + '[data-testid="transaction-list-item-primary-currency"]', ); await txValue.click(); const gasPrice = await driver.waitForSelector({ @@ -366,13 +366,13 @@ describe('Send ETH from dapp using advanced gas controls', function () { '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', ); await driver.waitForSelector({ - css: '.transaction-list-item__primary-currency', + css: '[data-testid="transaction-list-item-primary-currency"]', text: '-0 ETH', }); // the transaction has the expected gas value const txValue = await driver.findClickableElement( - '.transaction-list-item__primary-currency', + '[data-testid="transaction-list-item-primary-currency"]', ); await txValue.click(); const baseFeeValue = await driver.waitForSelector( diff --git a/test/e2e/tests/stuck-approved-transaction.spec.js b/test/e2e/tests/stuck-approved-transaction.spec.js index ec3de388afbd..74c031385832 100644 --- a/test/e2e/tests/stuck-approved-transaction.spec.js +++ b/test/e2e/tests/stuck-approved-transaction.spec.js @@ -37,7 +37,7 @@ describe('Editing Confirm Transaction', function () { }, 10000); const txValues = await driver.findElements( - '.transaction-list-item__primary-currency', + '[data-testid="transaction-list-item-primary-currency"]', ); assert.equal(txValues.length, 1); assert.ok(/-1\s*ETH/u.test(await txValues[0].getText())); From 0b9d202528bdf09acecc83e4b92d0c7d20bb31b3 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Mon, 10 Jul 2023 09:51:12 -0400 Subject: [PATCH 27/35] sorting date txgroups --- .../app/transaction-list/transaction-list.component.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/components/app/transaction-list/transaction-list.component.js b/ui/components/app/transaction-list/transaction-list.component.js index 9469eb2e7ebb..7e9abc6dd61c 100644 --- a/ui/components/app/transaction-list/transaction-list.component.js +++ b/ui/components/app/transaction-list/transaction-list.component.js @@ -89,9 +89,11 @@ const groupTransactionsByDate = (transactionGroups) => { } else { groupedTransactions.push({ date, + dateMillis: transactionGroup.primaryTransaction.time, transactionGroups: [transactionGroup], }); } + groupedTransactions.sort((a, b) => b.dateMillis - a.dateMillis); }); return groupedTransactions; From bdb5e1ab02541d292d433fff319915a19dbdf33e Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Mon, 10 Jul 2023 11:06:19 -0400 Subject: [PATCH 28/35] wip alignment for big numbers --- .../transaction-list-item.component.js | 1 + .../activity-list-item/activity-list-item.js | 16 +++++++++------- 2 files changed, 10 insertions(+), 7 deletions(-) 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 364bcdca75ab..bc0cc29441c8 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 @@ -314,6 +314,7 @@ function TransactionListItemInner({ title={primaryCurrency} textAlign={TextAlign.Right} data-testid="transaction-list-item-primary-currency" + ellipsis={primaryCurrency.length > 20} > {primaryCurrency} 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 d4f8dd5c9ef8..5e8a7d74d7cc 100644 --- a/ui/components/multichain/activity-list-item/activity-list-item.js +++ b/ui/components/multichain/activity-list-item/activity-list-item.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { + AlignItems, BackgroundColor, BlockSize, Display, @@ -33,7 +34,6 @@ export const ActivityListItem = ({ return ( {icon && {icon}} - + )} {rightContent && ( - + {rightContent} )} From 9018d8dc044344461472aa9715ae83bb3697c3fd Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Tue, 11 Jul 2023 11:18:07 -0400 Subject: [PATCH 29/35] alignment issues fix --- .../transaction-list-item.component.js | 3 ++- .../app/transaction-list/transaction-list.component.js | 2 +- .../multichain/activity-list-item/activity-list-item.js | 1 - ui/components/multichain/activity-list-item/index.scss | 8 ++++++++ ui/components/multichain/multichain-components.scss | 1 + 5 files changed, 12 insertions(+), 3 deletions(-) create mode 100644 ui/components/multichain/activity-list-item/index.scss 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 bc0cc29441c8..e560d93daa5d 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 @@ -314,7 +314,8 @@ function TransactionListItemInner({ title={primaryCurrency} textAlign={TextAlign.Right} data-testid="transaction-list-item-primary-currency" - ellipsis={primaryCurrency.length > 20} + className="activity-list-item__primary-currency" + ellipsis > {primaryCurrency} diff --git a/ui/components/app/transaction-list/transaction-list.component.js b/ui/components/app/transaction-list/transaction-list.component.js index 7e9abc6dd61c..65649adcec1c 100644 --- a/ui/components/app/transaction-list/transaction-list.component.js +++ b/ui/components/app/transaction-list/transaction-list.component.js @@ -120,7 +120,7 @@ export default function TransactionList({ paddingInline={4} variant={TextVariant.bodyMd} color={TextColor.textDefault} - key={dateGroup.date} + key={dateGroup.dateMillis} > {dateGroup.date} 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 5e8a7d74d7cc..cf54b7ec56f6 100644 --- a/ui/components/multichain/activity-list-item/activity-list-item.js +++ b/ui/components/multichain/activity-list-item/activity-list-item.js @@ -9,7 +9,6 @@ import { FlexDirection, FlexWrap, FontWeight, - JustifyContent, TextAlign, TextColor, TextVariant, diff --git a/ui/components/multichain/activity-list-item/index.scss b/ui/components/multichain/activity-list-item/index.scss new file mode 100644 index 000000000000..eaefc39cf43c --- /dev/null +++ b/ui/components/multichain/activity-list-item/index.scss @@ -0,0 +1,8 @@ +.activity-list-item { + &__primary-currency { + max-width: 130px; + @include screen-sm-min { + max-width: max-content; + } + } +} \ No newline at end of file diff --git a/ui/components/multichain/multichain-components.scss b/ui/components/multichain/multichain-components.scss index 00cea05facf4..c67217a0f278 100644 --- a/ui/components/multichain/multichain-components.scss +++ b/ui/components/multichain/multichain-components.scss @@ -10,6 +10,7 @@ @import 'account-list-item-menu/index'; @import 'account-list-menu/index'; @import 'account-picker/index'; +@import 'activity-list-item/index'; @import 'app-header/app-header'; @import 'connected-site-menu/index'; @import 'account-list-menu/'; From 23841850b41bc76ada34dee35f06ee31093d9c05 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Tue, 11 Jul 2023 12:08:12 -0400 Subject: [PATCH 30/35] lintfix --- ui/components/multichain/activity-list-item/index.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/ui/components/multichain/activity-list-item/index.scss b/ui/components/multichain/activity-list-item/index.scss index eaefc39cf43c..7126bf266ffa 100644 --- a/ui/components/multichain/activity-list-item/index.scss +++ b/ui/components/multichain/activity-list-item/index.scss @@ -1,8 +1,9 @@ .activity-list-item { &__primary-currency { max-width: 130px; - @include screen-sm-min { - max-width: max-content; - } + + @include screen-sm-min { + max-width: max-content; + } } -} \ No newline at end of file +} From 175ff09ee15a1bb6c799acd0fc753204c7eadc98 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Tue, 11 Jul 2023 17:05:15 -0400 Subject: [PATCH 31/35] adding tabindex, cursor pointer, updating snap --- .../transaction-list-item.component.js | 1 + .../activity-list-item.test.js.snap | 16 +++++++++------- .../activity-list-item/activity-list-item.js | 6 ++++++ .../activity-list-item.test.js | 2 +- .../multichain/activity-list-item/index.scss | 2 ++ 5 files changed, 19 insertions(+), 8 deletions(-) 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 e560d93daa5d..a8b6045fd838 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 @@ -242,6 +242,7 @@ function TransactionListItemInner({ return ( <> - + `; exports[`ActivityListItem should match snapshot with props 1`] = `
-

Content rendered to the right @@ -92,6 +94,6 @@ exports[`ActivityListItem should match snapshot with props 1`] = `

- + `; 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 cf54b7ec56f6..8013d936dbd7 100644 --- a/ui/components/multichain/activity-list-item/activity-list-item.js +++ b/ui/components/multichain/activity-list-item/activity-list-item.js @@ -33,9 +33,15 @@ export const ActivityListItem = ({ return ( { + if (event.key === 'Enter') { + onClick(); + } + }} data-testid={dataTestId} padding={4} display={Display.Flex} diff --git a/ui/components/multichain/activity-list-item/activity-list-item.test.js b/ui/components/multichain/activity-list-item/activity-list-item.test.js index 3c760372b557..e158cbb683a0 100644 --- a/ui/components/multichain/activity-list-item/activity-list-item.test.js +++ b/ui/components/multichain/activity-list-item/activity-list-item.test.js @@ -39,7 +39,7 @@ describe('ActivityListItem', () => { it('calls onClick when clicked', () => { const { getByRole } = render(); - fireEvent.click(getByRole('button')); + fireEvent.click(getByRole('div')); expect(defaultProps.onClick).toHaveBeenCalled(); }); }); diff --git a/ui/components/multichain/activity-list-item/index.scss b/ui/components/multichain/activity-list-item/index.scss index 7126bf266ffa..125a7a2db9b8 100644 --- a/ui/components/multichain/activity-list-item/index.scss +++ b/ui/components/multichain/activity-list-item/index.scss @@ -1,4 +1,6 @@ .activity-list-item { + cursor: pointer; + &__primary-currency { max-width: 130px; From 79cc65cb6f4a8712ab292756be498d98adb653cf Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Tue, 11 Jul 2023 17:33:59 -0400 Subject: [PATCH 32/35] unit test fix --- .../multichain/activity-list-item/activity-list-item.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/multichain/activity-list-item/activity-list-item.test.js b/ui/components/multichain/activity-list-item/activity-list-item.test.js index e158cbb683a0..e8a554021acf 100644 --- a/ui/components/multichain/activity-list-item/activity-list-item.test.js +++ b/ui/components/multichain/activity-list-item/activity-list-item.test.js @@ -38,8 +38,8 @@ describe('ActivityListItem', () => { }); it('calls onClick when clicked', () => { - const { getByRole } = render(); - fireEvent.click(getByRole('div')); + const { getByTestId } = render(); + fireEvent.click(getByTestId('test-id')); expect(defaultProps.onClick).toHaveBeenCalled(); }); }); From 00ab43135378519be3ea57c9ddfc4b8daf723056 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Wed, 12 Jul 2023 16:28:21 -0400 Subject: [PATCH 33/35] storybook additions --- .../activity-list-item/activity-list-item.js | 1 + .../activity-list-item.stories.js | 147 +++++++++++------- 2 files changed, 91 insertions(+), 57 deletions(-) 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 8013d936dbd7..eeb88fbe62f7 100644 --- a/ui/components/multichain/activity-list-item/activity-list-item.js +++ b/ui/components/multichain/activity-list-item/activity-list-item.js @@ -84,6 +84,7 @@ export const ActivityListItem = ({ {subtitle && ( , - title: 'Send DAI', - subtitle: 'Pending', - children: ( - - button1 - button2 - - ), - // midContent: 'midcontent', - rightContent: , - }, + component: ActivityListItem, }; -function Currencies({ primary, secondary }) { - return ( -
-
{primary}
-
{secondary}
-
- ); -} +const Template = (args) => ; -Currencies.propTypes = { - primary: PropTypes.string, - secondary: PropTypes.string, +export const DefaultStory = Template.bind({}); +DefaultStory.args = { + 'data-testid': 'activity-list-item', + onClick: () => { + console.log('clicked list item'); + }, + className: 'custom-class', + title: 'Activity Title', + icon: ( + + } + > + + + ), + subtitle: ( + + ), + rightContent: ( + <> + + Primary Currency + + + Secondary Currency + + + ), + children: ( + + { + console.log('canceled'); + }} + /> + + ), }; - -export const DefaultStory = (args) => ; - -DefaultStory.storyName = 'Default'; From 81dc6c8869a15c0250c3507893c6caa8c229bd18 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Wed, 12 Jul 2023 17:24:39 -0400 Subject: [PATCH 34/35] snaphot update --- .../__snapshots__/activity-list-item.test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap index 31e28ea7cc00..46e182a64388 100644 --- a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap +++ b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap @@ -63,13 +63,13 @@ exports[`ActivityListItem should match snapshot with props 1`] = ` > Hello World

-

I am a list item

-

+
From fa3e83d7c9371023924f64f4e04c16efdf5d7846 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Mon, 17 Jul 2023 11:03:19 -0400 Subject: [PATCH 35/35] update snap --- .../__snapshots__/activity-list-item.test.js.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap index 46e182a64388..a842265304a5 100644 --- a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap +++ b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap @@ -16,7 +16,7 @@ exports[`ActivityListItem should match snapshot with no props 1`] = ` class="mm-box activity-list-item__detail-container mm-box--display-inline-flex mm-box--flex-direction-column mm-box--width-1/3 mm-box--sm:width-7/12" >

@@ -34,7 +34,7 @@ exports[`ActivityListItem should match snapshot with props 1`] = ` tabindex="0" >

Content rendered at the top @@ -58,13 +58,13 @@ exports[`ActivityListItem should match snapshot with props 1`] = ` class="mm-box activity-list-item__detail-container mm-box--display-inline-flex mm-box--flex-direction-column mm-box--width-1/3 mm-box--sm:width-7/12" >

Hello World

I am a list item