mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-23 10:30:04 +01:00
4dcde1e216
* layout wip * Icon changes, add badgewrapped icons to smart tx * grouping by date wip * typo fix * group txs by date, button styling * removing queue/history division, adding datestamp for pending tx, minor styling changes * adding tests, updating snap * font size fix * e2e fixes * Remove unnecessary tabIndex and keypress handler * Fix typo for fontWeight * Fix nesting warning by removing unnecessary Text * Fix tests * Fix import and exports * Remove unused verbiage * Update E2E selectors * More E2E * More E2Es * More test fixes * awaiting find instead of click * adding regularDelayMs to flaky test * removing delay * increasing delay outside of wait * adding back first-child to selector * test fixes * using datatestid for primary currency * sorting date txgroups * wip alignment for big numbers * alignment issues fix * lintfix * adding tabindex, cursor pointer, updating snap * unit test fix * storybook additions * snaphot update * update snap --------- Co-authored-by: David Walsh <davidwalsh83@gmail.com>
103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import TransactionStatusLabel from '../../app/transaction-status-label';
|
|
import TransactionIcon from '../../app/transaction-icon';
|
|
import CancelButton from '../../app/cancel-button';
|
|
import {
|
|
BackgroundColor,
|
|
Color,
|
|
Display,
|
|
FontWeight,
|
|
Size,
|
|
TextAlign,
|
|
TextVariant,
|
|
} from '../../../helpers/constants/design-system';
|
|
import {
|
|
AvatarNetwork,
|
|
BadgeWrapper,
|
|
BadgeWrapperAnchorElementShape,
|
|
Box,
|
|
Text,
|
|
} from '../../component-library';
|
|
import { ActivityListItem } from './activity-list-item';
|
|
|
|
export default {
|
|
title: 'Components/Multichain/ActivityListItem',
|
|
component: ActivityListItem,
|
|
};
|
|
|
|
const Template = (args) => <ActivityListItem {...args} />;
|
|
|
|
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: (
|
|
<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="Network Name"
|
|
src="./images/eth_logo.png"
|
|
borderWidth={1}
|
|
borderColor={BackgroundColor.backgroundDefault}
|
|
/>
|
|
}
|
|
>
|
|
<TransactionIcon category="interaction" status="failed" />
|
|
</BadgeWrapper>
|
|
),
|
|
subtitle: (
|
|
<TransactionStatusLabel
|
|
statusOnly
|
|
isPending
|
|
isEarliestNonce
|
|
error={{}}
|
|
date={new Date().toDateString()}
|
|
status="pending"
|
|
/>
|
|
),
|
|
rightContent: (
|
|
<>
|
|
<Text
|
|
variant={TextVariant.bodyLgMedium}
|
|
fontWeight={FontWeight.Medium}
|
|
color={Color.textDefault}
|
|
title="Primary Currency"
|
|
textAlign={TextAlign.Right}
|
|
data-testid="transaction-list-item-primary-currency"
|
|
className="activity-list-item__primary-currency"
|
|
ellipsis
|
|
>
|
|
Primary Currency
|
|
</Text>
|
|
<Text
|
|
variant={TextVariant.bodyMd}
|
|
color={Color.textAlternative}
|
|
textAlign={TextAlign.Right}
|
|
data-testid="transaction-list-item-secondary-currency"
|
|
>
|
|
Secondary Currency
|
|
</Text>
|
|
</>
|
|
),
|
|
children: (
|
|
<Box paddingTop={4} className="transaction-list-item__pending-actions">
|
|
<CancelButton
|
|
transaction={{}}
|
|
cancelTransaction={() => {
|
|
console.log('canceled');
|
|
}}
|
|
/>
|
|
</Box>
|
|
),
|
|
};
|