Skip to content

Commit

Permalink
update ui cancel
Browse files Browse the repository at this point in the history
  • Loading branch information
@nguyenhoaidanh
nguyenhoaidanh committed Sep 28, 2023
1 parent 0434b2e commit 60365c6
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 90 deletions.
215 changes: 132 additions & 83 deletions src/components/swapv2/LimitOrder/Modals/CancelButtons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,64 @@
import { Trans } from '@lingui/macro'
import React, { ReactNode, useEffect, useState } from 'react'
import { ReactNode, useEffect, useState } from 'react'
import { Check } from 'react-feather'
import { Text } from 'rebass'
import styled from 'styled-components'
import styled, { CSSProperties } from 'styled-components'

import { ReactComponent as GasLessIcon } from 'assets/svg/gas_less_icon.svg'
import { ButtonLight, ButtonOutlined, ButtonPrimary } from 'components/Button'
import Column from 'components/Column'
import { GasStation } from 'components/Icons'
import { useGetEncodeLimitOrder } from 'components/swapv2/LimitOrder/ListOrder/useRequestCancelOrder'
import { CancelStatus } from 'components/swapv2/LimitOrder/Modals/CancelOrderModal'
import { LimitOrder } from 'components/swapv2/LimitOrder/type'
import { CancelOrderType, LimitOrder } from 'components/swapv2/LimitOrder/type'
import { EMPTY_ARRAY } from 'constants/index'
import useTheme from 'hooks/useTheme'
import { ExternalLink } from 'theme'
import { formatDisplayNumber } from 'utils/numbers'
import useEstimateGasTxs from 'utils/useEstimateGasTxs'

const ButtonGroup = ({
isEdit,
buttonGasless,
buttonHardEdit,
gasAmountDisplay,
style,
}: {
isEdit?: boolean
buttonGasless: ReactNode
buttonHardEdit: ReactNode
gasAmountDisplay: string
style?: CSSProperties
}) => {
const theme = useTheme()
return (
<ButtonWrapper style={style}>
<Column width={'100%'} gap="8px">
{buttonGasless}
<Text color={theme.subText} fontSize={'10px'} lineHeight={'14px'}>
{isEdit ? <Trans>Edit the order without paying gas.</Trans> : <Trans>Cancel without paying gas.</Trans>}
<Trans>
<br /> Cancellation may not be instant. <ExternalLink href="/todo">Learn more ↗︎</ExternalLink>
</Trans>
</Text>
</Column>
<Column width={'100%'} gap="8px">
{buttonHardEdit}
<Text color={theme.subText} fontSize={'10px'} lineHeight={'14px'}>
{isEdit ? (
<Trans>Edit immediately by paying {gasAmountDisplay} gas fees. </Trans>
) : (
<Trans>Cancel immediately by paying {gasAmountDisplay} gas fees. </Trans>
)}{' '}
<ExternalLink href="/todo">
<Trans>Learn more ↗︎</Trans>
</ExternalLink>
</Text>
</Column>
</ButtonWrapper>
)
}

const ButtonWrapper = styled.div`
display: flex;
align-items: flex-start;
Expand Down Expand Up @@ -54,10 +96,15 @@ const CancelButtons = ({
orders?: LimitOrder[]
}) => {
const theme = useTheme()
const isWaiting = cancelStatus === CancelStatus.WAITING
const isCountDown = cancelStatus === CancelStatus.COUNTDOWN
const isTimeout = cancelStatus === CancelStatus.TIMEOUT
const isCancelDone = cancelStatus === CancelStatus.CANCEL_DONE

const [cancelType, setCancelType] = useState(
supportCancelGasless ? CancelOrderType.GAS_LESS_CANCEL : CancelOrderType.HARD_CANCEL,
)

const getEncodeData = useGetEncodeLimitOrder()
const estimateGas = useEstimateGasTxs()
const [gasFeeHardCancel, setGasFeeHardCancel] = useState('')
Expand Down Expand Up @@ -95,98 +142,100 @@ const CancelButtons = ({
})}`
: ''

const renderGroupButtons = () => {
const props = {
color: theme.primary,
disabled: disabledGasLessCancel || (isCountDown ? false : !supportCancelGasless || loading),
onClick: isCountDown ? onOkay : onClickGaslessCancel,
height: '40px',
width: '100%',
children: (
<>
{isCountDown ? <Check size={18} /> : <GasLessIcon />}
&nbsp;
{isCountDown ? (
<Trans>Close</Trans>
) : isCancelAll ? (
totalOrder
) : isEdit ? (
<Trans>Gasless Edit</Trans>
) : (
<Trans>Gasless Cancel</Trans>
)}
</>
),
}
const buttonGasless = React.createElement(isCountDown ? ButtonPrimary : ButtonOutlined, props)
if (isCancelDone)
return (
<ButtonWrapper>
<ButtonLight onClick={onOkay} height={'40px'} width={'100%'}>
<Check size={18} /> &nbsp;<Trans>Close</Trans>
</ButtonLight>
</ButtonWrapper>
)

if (isTimeout)
return (
<>
<Column width={'100%'} gap="8px">
{buttonGasless}
<Text color={theme.subText} fontSize={'10px'} lineHeight={'14px'}>
{isEdit ? <Trans>Edit the order without paying gas.</Trans> : <Trans>Cancel without paying gas.</Trans>}
<Trans>
<br /> Cancellation may not be instant. <ExternalLink href="/todo">Learn more ↗︎</ExternalLink>
</Trans>
</Text>
</Column>
<Column width={'100%'} gap="8px">
<ButtonWrapper style={{ justifyContent: 'flex-end' }}>
<ButtonLight onClick={onClickGaslessCancel} height={'40px'} width={'100px'}>
<Trans>Try Again</Trans>
</ButtonLight>
</ButtonWrapper>
)

const propsGasless = {
color: cancelType === CancelOrderType.GAS_LESS_CANCEL ? theme.primary : undefined,
height: '40px',
width: '100%',
}
const propsHardCancel = { style: { height: '40px', width: '100%' }, disabled: loading || disabledHardCancel }

if (isCountDown)
return (
<ButtonGroup
style={{ flexDirection: 'row-reverse' }}
isEdit={isEdit}
gasAmountDisplay={gasAmountDisplay}
buttonGasless={
<ButtonPrimary {...propsGasless} onClick={onOkay}>
<Check size={18} />
&nbsp;
<Trans>Close</Trans>
</ButtonPrimary>
}
buttonHardEdit={
<ButtonOutlined {...propsHardCancel} onClick={onClickHardCancel} color={theme.red}>
<GasStation size={20} />
&nbsp;
{isEdit ? <Trans>Hard Edit Instead</Trans> : <Trans>Hard Cancel Instead</Trans>}
</ButtonOutlined>
}
/>
)

return (
<>
<ButtonGroup
style={{ flexDirection: isCountDown ? 'row-reverse' : undefined }}
isEdit={isEdit}
gasAmountDisplay={gasAmountDisplay}
buttonGasless={
<ButtonOutlined
{...propsGasless}
onClick={() => setCancelType(CancelOrderType.GAS_LESS_CANCEL)}
disabled={disabledGasLessCancel || !supportCancelGasless || loading}
>
<GasLessIcon />
&nbsp;
{isCancelAll ? totalOrder : isEdit ? <Trans>Gasless Edit</Trans> : <Trans>Gasless Cancel</Trans>}
</ButtonOutlined>
}
buttonHardEdit={
<ButtonOutlined
disabled={loading || disabledHardCancel}
onClick={onClickHardCancel}
style={{ height: '40px', width: '100%' }}
color={isCountDown ? theme.red : undefined}
{...propsHardCancel}
onClick={() => setCancelType(CancelOrderType.HARD_CANCEL)}
color={cancelType === CancelOrderType.HARD_CANCEL ? theme.primary : undefined}
>
<GasStation size={20} />
&nbsp;
{isCountDown ? (
isEdit ? (
<Trans>Hard Edit Instead</Trans>
) : (
<Trans>Hard Cancel Instead</Trans>
)
) : isCancelAll ? (
<Trans>Hard Cancel all orders</Trans>
{isCancelAll ? (
<Trans>Hard Cancel All Orders</Trans>
) : isEdit ? (
<Trans>Hard Edit</Trans>
) : (
<Trans>Hard Cancel</Trans>
)}
</ButtonOutlined>
<Text color={theme.subText} fontSize={'10px'} lineHeight={'14px'}>
{isEdit ? (
<Trans>Edit immediately by paying {gasAmountDisplay} gas fees. </Trans>
) : (
<Trans>Cancel immediately by paying {gasAmountDisplay} gas fees. </Trans>
)}{' '}
<ExternalLink href="/todo">
<Trans>Learn more ↗︎</Trans>
</ExternalLink>
</Text>
</Column>
</>
)
}

return (
<ButtonWrapper
style={{
justifyContent: isTimeout ? 'flex-end' : undefined,
flexDirection: isCountDown ? 'row-reverse' : undefined,
}}
>
{isCancelDone ? (
<ButtonLight onClick={onOkay} height={'40px'} width={'100%'}>
<Check size={18} /> &nbsp;<Trans>Close</Trans>
</ButtonLight>
) : isTimeout ? (
<ButtonLight onClick={onClickGaslessCancel} height={'40px'} width={'100px'}>
<Trans>Try Again</Trans>
</ButtonLight>
) : (
renderGroupButtons()
}
/>
{isWaiting && (
<ButtonPrimary
disabled={loading}
width={'100%'}
height={'40px'}
onClick={cancelType === CancelOrderType.GAS_LESS_CANCEL ? onClickGaslessCancel : onClickHardCancel}
>
{isCancelAll ? <Trans>Cancel Orders</Trans> : <Trans>Cancel Order</Trans>}
</ButtonPrimary>
)}
</ButtonWrapper>
</>
)
}

Expand Down
19 changes: 12 additions & 7 deletions src/components/swapv2/LimitOrder/Modals/CancelOrderModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,9 @@ function CancelOrderModal({
takerAssetDecimals,
])

const totalOrder =
ordersSoftCancel.length === orders.length || !supportGasLessCancel
? t`all`
: `${ordersSoftCancel.length}/${orders.length}`

const formatOrders = useMemo(() => (isCancelAll ? orders : order ? [order] : []), [order, isCancelAll, orders])
return (
<Modal maxWidth={isCancelAll && !isCancelDone ? 600 : 480} isOpen={isOpen} onDismiss={onDismiss}>
<Modal maxWidth={isCancelAll && !isCancelDone ? 540 : 480} isOpen={isOpen} onDismiss={onDismiss}>
<Container>
<Header title={isCancelAll ? t`Bulk Cancellation` : t`Cancel an order`} onDismiss={onDismiss} />
{isCancelAll ? (
Expand Down Expand Up @@ -204,7 +199,17 @@ function CancelOrderModal({
onClickGaslessCancel={onClickGaslessCancel}
onClickHardCancel={onClickHardCancel}
isCancelAll={isCancelAll}
totalOrder={isCancelAll ? <Trans>Gasless Cancel {totalOrder} orders</Trans> : null}
totalOrder={
isCancelAll ? (
ordersSoftCancel.length === orders.length || !supportGasLessCancel ? (
<Trans>Gasless Cancel All Orders</Trans>
) : (
<Trans>
Gasless Cancel {ordersSoftCancel.length}/{orders.length} Orders
</Trans>
)
) : null
}
/>
</Container>
</Modal>
Expand Down

0 comments on commit 60365c6

Please sign in to comment.