Skip to content

Commit

Permalink
Icon changes, add badgewrapped icons to smart tx
Browse files Browse the repository at this point in the history
  • Loading branch information
@vthomas13
vthomas13 committed Jun 13, 2023
1 parent 1384246 commit acd9931
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 62 deletions.
75 changes: 48 additions & 27 deletions ui/components/app/transaction-icon/transaction-icon.js
View file
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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 = {
Expand Down
5 changes: 0 additions & 5 deletions ui/components/app/transaction-list-item/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,6 @@
text-overflow: initial;
}

.transaction-status-label::after {
content: "·";
margin: 0 4px;
}

&__address {
overflow: hidden;
text-overflow: ellipsis;
Expand Down
46 changes: 40 additions & 6 deletions ui/components/app/transaction-list-item/smart-transaction-list-item.component.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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>
Expand Down Expand Up @@ -88,7 +122,7 @@ export default function SmartTransactionListItem({
/>
</div>
)}
</ListItem>
</ActivityListItem>
{showDetails && (
<TransactionListItemDetails
title={title}
Expand Down
77 changes: 55 additions & 22 deletions ui/components/app/transaction-list-item/transaction-list-item.component.js
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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';
Expand All @@ -31,16 +44,20 @@ 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';
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,
Expand Down Expand Up @@ -113,9 +130,6 @@ function TransactionListItemInner({

const {
title,
subtitle,
subtitleContainsOrigin,
date,
category,
primaryCurrency,
recipientAddress,
Expand All @@ -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;
Expand Down Expand Up @@ -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)
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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 &&
Expand Down Expand Up @@ -300,7 +333,7 @@ function TransactionListItemInner({
<a {...debugTransactionMeta} className="test-transaction-meta" />
///: END:ONLY_INCLUDE_IN
}
</ListItem>
</ActivityListItem>
{showDetails && (
<TransactionListItemDetails
title={title}
Expand Down
Loading

0 comments on commit acd9931

Please sign in to comment.