Skip to content

Commit 93d2369

Browse files
mgrabinamgrabina
committed
improve mobile responsiveness for cancel button
1 parent e048454 commit 93d2369

File tree

3 files changed

+147
-130
lines changed

3 files changed

+147
-130
lines changed

‎src/modules/history/TransactionMobileRowItem.tsx‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
1+
import { OrderStatus } from '@cowprotocol/cow-sdk';
12
import { Trans } from '@lingui/macro';
23
import ArrowOutward from '@mui/icons-material/ArrowOutward';
34
import { Box, Button, SvgIcon, Typography, useTheme } from '@mui/material';
45
import React, { useEffect, useState } from 'react';
56
import { ListItem } from 'src/components/lists/ListItem';
7+
import { useModalContext } from 'src/hooks/useModal';
68
import { useRootStore } from 'src/store/root';
79
import { GENERAL } from 'src/utils/events';
810
import { useShallow } from 'zustand/shallow';
911

1012
import { ActionDetails, ActionTextMap } from './actions/ActionDetails';
1113
import { getExplorerLink, getTransactionAction, unixTimestampToFormattedTime } from './helpers';
12-
import { ActionName, TransactionHistoryItemUnion } from './types';
14+
import {
15+
ActionName,
16+
isCowSwapSubset,
17+
isSwapTransaction,
18+
TransactionHistoryItemUnion,
19+
} from './types';
1320

1421
function ActionTitle({ action }: { action: ActionName }) {
1522
return (
@@ -28,6 +35,7 @@ function TransactionMobileRowItem({ transaction }: TransactionHistoryItemProps)
2835
const [currentNetworkConfig, trackEvent] = useRootStore(
2936
useShallow((state) => [state.currentNetworkConfig, state.trackEvent])
3037
);
38+
const { openCancelCowOrder } = useModalContext();
3139
const theme = useTheme();
3240
const explorerLink = getExplorerLink(transaction, currentNetworkConfig);
3341
const action = getTransactionAction(transaction);
@@ -78,16 +86,33 @@ function TransactionMobileRowItem({ transaction }: TransactionHistoryItemProps)
7886
<ActionTitle action={action} />
7987
</Box>
8088

81-
<Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
82-
{' '}
89+
<Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}>
8390
<Typography variant="caption" color="text.muted">
8491
{unixTimestampToFormattedTime({ unixTimestamp: timestamp })}
8592
</Typography>
93+
{isSwapTransaction(transaction) &&
94+
isCowSwapSubset(transaction) &&
95+
transaction.status === OrderStatus.OPEN && (
96+
<Button
97+
sx={{
98+
display: 'flex',
99+
minWidth: 'auto',
100+
height: '20px',
101+
fontSize: '0.6rem',
102+
alignItems: 'center',
103+
justifyContent: 'center',
104+
px: 1.5,
105+
}}
106+
variant="contained"
107+
onClick={() => openCancelCowOrder(transaction)}
108+
>
109+
<Trans>Cancel</Trans>
110+
</Button>
111+
)}
86112
{explorerLink && (
87113
<Button
88114
sx={{
89115
display: 'flex',
90-
ml: 3,
91116
mr: 1,
92117
width: '69px',
93118
height: '20px',

‎src/modules/history/TransactionRowItem.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ function TransactionRowItem({ transaction }: TransactionHistoryItemProps) {
4545

4646
const theme = useTheme();
4747
const downToMD = useMediaQuery(theme.breakpoints.down('md'));
48+
const hideStatusBadgeForCancel = useMediaQuery('(min-width: 960px) and (max-width: 1050px)');
4849

4950
useEffect(() => {
5051
if (copyStatus) {
@@ -86,7 +87,15 @@ function TransactionRowItem({ transaction }: TransactionHistoryItemProps) {
8687
</Box>
8788

8889
<Box>
89-
<ActionDetails transaction={transaction} iconSize="20px" />
90+
<ActionDetails
91+
transaction={transaction}
92+
iconSize="20px"
93+
showStatusBadgeAsIconOnly={
94+
isSwapTransaction(transaction) &&
95+
isCowSwapSubset(transaction) &&
96+
hideStatusBadgeForCancel
97+
}
98+
/>
9099
</Box>
91100
<ListColumn align="right">
92101
<Box sx={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>

‎src/modules/history/actions/ActionDetails.tsx‎

Lines changed: 108 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
interface ActionDetailsProps {
3131
transaction: TransactionHistoryItemUnion;
3232
iconSize?: string;
33+
showStatusBadgeAsIconOnly?: boolean;
3334
}
3435

3536
export const ActionTextMap = ({ action }: { action: ActionName }) => {
@@ -65,9 +66,69 @@ export const ActionTextMap = ({ action }: { action: ActionName }) => {
6566
}
6667
};
6768

68-
export const ActionDetails = ({ transaction, iconSize = '16px' }: ActionDetailsProps) => {
69+
const StatusBadgeIconOnly = ({
70+
title,
71+
severity,
72+
}: {
73+
title: React.ReactNode;
74+
severity: 'info' | 'success' | 'error';
75+
}) => {
6976
const theme = useTheme();
77+
return (
78+
<DarkTooltip title={title} arrow enterTouchDelay={100} leaveTouchDelay={500} placement="top">
79+
<Box>
80+
<Warning
81+
severity={severity}
82+
sx={{
83+
my: 0,
84+
pt: 0.6,
85+
pb: 0.6,
86+
pr: 1.5,
87+
pl: 1.5,
88+
background: 'none',
89+
border: 'none',
90+
color: theme.palette.text.primary,
91+
}}
92+
/>
93+
</Box>
94+
</DarkTooltip>
95+
);
96+
};
97+
98+
const StatusBadgeText = ({
99+
children,
100+
severity,
101+
}: {
102+
children: React.ReactNode;
103+
severity: 'info' | 'success' | 'error';
104+
}) => {
105+
const theme = useTheme();
106+
return (
107+
<Box sx={{ display: { xs: 'none', sm: 'block' } }}>
108+
<Warning
109+
severity={severity}
110+
sx={{
111+
my: 0,
112+
pt: 0.6,
113+
pb: 0.6,
114+
pr: 1.5,
115+
pl: 1.5,
116+
background: 'none',
117+
border: `1px solid ${theme.palette.divider}`,
118+
color: theme.palette.text.primary,
119+
}}
120+
>
121+
{children}
122+
</Warning>
123+
</Box>
124+
);
125+
};
70126

127+
export const ActionDetails = ({
128+
transaction,
129+
iconSize = '16px',
130+
showStatusBadgeAsIconOnly = false,
131+
}: ActionDetailsProps) => {
71132
if (isSDKTransaction(transaction) && hasAmount(transaction)) {
72133
const { amount, reserve } = transaction;
73134
const action = transaction.__typename;
@@ -404,151 +465,73 @@ export const ActionDetails = ({ transaction, iconSize = '16px' }: ActionDetailsP
404465
{/* Status */}
405466
{isOrderLoading(swapTx.status) && (
406467
<Box sx={{ display: 'flex', alignItems: 'center', ml: 4.5 }}>
407-
<Box sx={{ display: { xs: 'block', sm: 'none' } }}>
408-
<DarkTooltip
409-
title={<Trans>In Progress</Trans>}
410-
arrow
411-
enterTouchDelay={100}
412-
leaveTouchDelay={500}
413-
placement="top"
414-
>
415-
<Box>
416-
<Warning
417-
severity="info"
418-
sx={{
419-
my: 0,
420-
pt: 0.6,
421-
pb: 0.6,
422-
pr: 1.5,
423-
pl: 1.5,
424-
background: 'none',
425-
border: 'none',
426-
color: theme.palette.text.primary,
427-
}}
428-
/>
468+
{showStatusBadgeAsIconOnly ? (
469+
<StatusBadgeIconOnly title={<Trans>In Progress</Trans>} severity="info" />
470+
) : (
471+
<>
472+
<Box sx={{ display: { xs: 'block', sm: 'none' } }}>
473+
<StatusBadgeIconOnly title={<Trans>In Progress</Trans>} severity="info" />
429474
</Box>
430-
</DarkTooltip>
431-
</Box>
432-
<Box sx={{ display: { xs: 'none', sm: 'block' } }}>
433-
<Warning
434-
severity="info"
435-
sx={{
436-
my: 0,
437-
pt: 0.6,
438-
pb: 0.6,
439-
pr: 1.5,
440-
pl: 1.5,
441-
background: 'none',
442-
border: `1px solid ${theme.palette.divider}`,
443-
color: theme.palette.text.primary,
444-
}}
445-
>
446-
<Trans>In Progress</Trans>
447-
</Warning>
448-
</Box>
475+
<StatusBadgeText severity="info">
476+
<Trans>In Progress</Trans>
477+
</StatusBadgeText>
478+
</>
479+
)}
449480
</Box>
450481
)}
451482
{isOrderFilled(swapTx.status) && (
452483
<Box sx={{ display: 'flex', alignItems: 'center', ml: 4.5 }}>
453-
<Box sx={{ display: { xs: 'block', sm: 'none' } }}>
454-
<DarkTooltip
455-
title={<Trans>Filled</Trans>}
456-
arrow
457-
enterTouchDelay={100}
458-
leaveTouchDelay={500}
459-
placement="top"
460-
>
461-
<Box>
462-
<Warning
463-
severity="success"
464-
sx={{
465-
my: 0,
466-
pt: 0.6,
467-
pb: 0.6,
468-
pr: 1.5,
469-
pl: 1.5,
470-
background: 'none',
471-
border: 'none',
472-
color: theme.palette.text.primary,
473-
}}
474-
/>
484+
{showStatusBadgeAsIconOnly ? (
485+
<StatusBadgeIconOnly title={<Trans>Filled</Trans>} severity="success" />
486+
) : (
487+
<>
488+
<Box sx={{ display: { xs: 'block', sm: 'none' } }}>
489+
<StatusBadgeIconOnly title={<Trans>Filled</Trans>} severity="success" />
475490
</Box>
476-
</DarkTooltip>
477-
</Box>
478-
<Box sx={{ display: { xs: 'none', sm: 'block' } }}>
479-
<Warning
480-
severity="success"
481-
sx={{
482-
my: 0,
483-
pt: 0.6,
484-
pb: 0.6,
485-
pr: 1.5,
486-
pl: 1.5,
487-
background: 'none',
488-
border: `1px solid ${theme.palette.divider}`,
489-
color: theme.palette.text.primary,
490-
}}
491-
>
492-
<Trans>Filled</Trans>
493-
</Warning>
494-
</Box>
491+
<StatusBadgeText severity="success">
492+
<Trans>Filled</Trans>
493+
</StatusBadgeText>
494+
</>
495+
)}
495496
</Box>
496497
)}
497498

498499
{(isOrderCancelled(swapTx.status) || isOrderExpired(swapTx.status)) && (
499500
<Box sx={{ display: 'flex', alignItems: 'center', ml: 4.5 }}>
500-
<Box sx={{ display: { xs: 'block', sm: 'none' } }}>
501-
<DarkTooltip
501+
{showStatusBadgeAsIconOnly ? (
502+
<StatusBadgeIconOnly
502503
title={
503504
isOrderCancelled(swapTx.status) ? (
504505
<Trans>Cancelled</Trans>
505506
) : (
506507
<Trans>Expired</Trans>
507508
)
508509
}
509-
arrow
510-
placement="top"
511-
enterTouchDelay={100}
512-
leaveTouchDelay={500}
513-
>
514-
<Box>
515-
<Warning
510+
severity="error"
511+
/>
512+
) : (
513+
<>
514+
<Box sx={{ display: { xs: 'block', sm: 'none' } }}>
515+
<StatusBadgeIconOnly
516+
title={
517+
isOrderCancelled(swapTx.status) ? (
518+
<Trans>Cancelled</Trans>
519+
) : (
520+
<Trans>Expired</Trans>
521+
)
522+
}
516523
severity="error"
517-
sx={{
518-
my: 0,
519-
pt: 0.6,
520-
pb: 0.6,
521-
pr: 1.5,
522-
pl: 1.5,
523-
background: 'none',
524-
border: 'none',
525-
color: theme.palette.text.primary,
526-
}}
527524
/>
528525
</Box>
529-
</DarkTooltip>
530-
</Box>
531-
<Box sx={{ display: { xs: 'none', sm: 'block' } }}>
532-
<Warning
533-
severity="error"
534-
sx={{
535-
my: 0,
536-
pt: 0.6,
537-
pb: 0.6,
538-
pr: 1.5,
539-
pl: 1.5,
540-
background: 'none',
541-
border: `1px solid ${theme.palette.divider}`,
542-
color: theme.palette.text.primary,
543-
}}
544-
>
545-
{isOrderCancelled(swapTx.status) ? (
546-
<Trans>Cancelled</Trans>
547-
) : (
548-
<Trans>Expired</Trans>
549-
)}
550-
</Warning>
551-
</Box>
526+
<StatusBadgeText severity="error">
527+
{isOrderCancelled(swapTx.status) ? (
528+
<Trans>Cancelled</Trans>
529+
) : (
530+
<Trans>Expired</Trans>
531+
)}
532+
</StatusBadgeText>
533+
</>
534+
)}
552535
</Box>
553536
)}
554537
</Box>

0 commit comments

Comments
 (0)