Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enhance order categorization and warning handling in OrdersTableWidget #5320

Merged
merged 40 commits into from
Jan 24, 2025
Merged
Show file tree
Hide file tree
Changes from 39 commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
b37a6de
feat: only show twap market price for non final states
fairlighteth Jan 16, 2025
c5f8784
feat: address comments children
fairlighteth Jan 16, 2025
64efd78
feat: update market price logic display
fairlighteth Jan 16, 2025
f449a1d
feat: twap child order status logic optimisations
fairlighteth Jan 16, 2025
0fe6a26
feat: order display logic
fairlighteth Jan 16, 2025
e135932
feat: hide orders table widget (#5303)
fairlighteth Jan 16, 2025
971464c
Merge branch 'feat/limit-ui-upgrade-2' into feat/limit-ui-upgrade-13
fairlighteth Jan 16, 2025
5174067
feat: display logic of statusbox
fairlighteth Jan 16, 2025
fac0f1c
Merge branch 'feat/limit-ui-upgrade-13' into feat/limit-ui-upgrade-15
fairlighteth Jan 16, 2025
f75b069
feat: partially filled status box size
fairlighteth Jan 16, 2025
4a33b3b
fix: handle failure when fetching spot price
alfetopito Jan 16, 2025
711ecba
feat: merge conflict
fairlighteth Jan 17, 2025
1dd1c9f
feat: my order scroll to orders table on mobile
fairlighteth Jan 17, 2025
c13a4b5
feat: capitalize settings label
fairlighteth Jan 17, 2025
c44c7af
feat: order details style refactor
fairlighteth Jan 17, 2025
b06458b
feat: ios specific input zoom prevention
fairlighteth Jan 17, 2025
f2d99be
feat: hide search and some tabs if not connected or no orders
fairlighteth Jan 17, 2025
a9d12b9
feat: set table height
fairlighteth Jan 17, 2025
2906017
feat: show search for no results found
fairlighteth Jan 17, 2025
81e4b21
feat: dont show filled for signing orders
fairlighteth Jan 17, 2025
aa5c980
fix: props being passed in DOM
fairlighteth Jan 17, 2025
d7aa0e8
feat: disable global usd settings item
fairlighteth Jan 17, 2025
44fdb03
feat: add close icon search
fairlighteth Jan 17, 2025
70adc49
feat: lint fix
fairlighteth Jan 17, 2025
9017094
Merge branch 'feat/limit-ui-upgrade-2' of https://github.com/cowproto…
shoom3301 Jan 20, 2025
2fceb98
Merge branch 'feat/limit-ui-upgrade' of https://github.com/cowprotoco…
shoom3301 Jan 21, 2025
a3998b0
feat: set fixed width settings dropdown
fairlighteth Jan 21, 2025
0fdb076
feat: order partially filled in twap
fairlighteth Jan 21, 2025
931c757
refactor: enhance order categorization and warning handling in Orders…
fairlighteth Jan 21, 2025
3c8e853
feat: enhance OrdersTabs to conditionally display tab counts
fairlighteth Jan 21, 2025
f23ad81
Merge branch 'feat/limit-ui-upgrade-15' into feat/limit-ui-upgrade-16
fairlighteth Jan 21, 2025
789701e
fix: update hover styles in OrdersTabs to handle disabled and unfilla…
fairlighteth Jan 21, 2025
47f0f03
Merge branch 'feat/limit-ui-upgrade-16' of https://github.com/cowprot…
shoom3301 Jan 22, 2025
1d09986
chore: merge TwapStatusAndToggle changes
shoom3301 Jan 22, 2025
41b9333
chore: fix merge
shoom3301 Jan 22, 2025
3810a05
Merge branch 'feat/limit-ui-upgrade' of https://github.com/cowprotoco…
shoom3301 Jan 23, 2025
fe65d0f
Merge branch 'feat/limit-ui-upgrade-16' of https://github.com/cowprot…
shoom3301 Jan 23, 2025
6188879
feat: enhance warning handling for TWAP child orders in OrdersTable
fairlighteth Jan 23, 2025
fdf457b
fix: show unfillable orders in both OPEN and UNFILLABLE tabs
fairlighteth Jan 23, 2025
f6a3269
Merge branch 'feat/limit-ui-upgrade' into feat/limit-ui-upgrade-17
fairlighteth Jan 23, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +173,8 @@ function StepComponent({
<styledEl.NumberedElement
status={status}
customColor={customColor}
isUnfillable={isUnfillable}
isCancelling={isCancelling}
$isUnfillable={isUnfillable}
$isCancelling={isCancelling}
>
{status === 'cancelling' ? (
<Lottie
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -772,8 +772,8 @@ export const CancellationFailedBanner = styled.div`
export const NumberedElement = styled.div<{
status: string
customColor?: string
isUnfillable?: boolean
isCancelling?: boolean
$isUnfillable?: boolean
$isCancelling?: boolean
}>`
--size: 28px;
width: var(--size);
Expand All @@ -786,10 +786,10 @@ export const NumberedElement = styled.div<{
color: ${({ status }) => (status === 'active' ? `var(${UI.COLOR_PAPER})` : `var(${UI.COLOR_PAPER})`)};
font-weight: bold;
font-size: 16px;
background-color: ${({ status, customColor, isUnfillable, isCancelling }) =>
isCancelling
background-color: ${({ status, customColor, $isUnfillable, $isCancelling }) =>
$isCancelling
? `var(${UI.COLOR_DANGER_BG})`
: isUnfillable
: $isUnfillable
? '#996815'
: customColor || (status === 'active' ? '#2196F3' : `var(${UI.COLOR_TEXT})`)};
border-radius: 50%;
Expand Down
9 changes: 6 additions & 3 deletions apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export interface RateInfoProps {
rateInfoParams: RateInfoParams
opacitySymbol?: boolean
noFiat?: boolean
rightAlign?: boolean
}

const Wrapper = styled.div<{ stylized: boolean }>`
Expand All @@ -45,6 +46,7 @@ const Wrapper = styled.div<{ stylized: boolean }>`
align-items: center;
font-size: 14px;
font-weight: 400;
gap: 10px;
`

const RateLabel = styled.div`
Expand Down Expand Up @@ -109,7 +111,7 @@ const InvertIcon = styled.div`
}
`

export const RateWrapper = styled.button`
export const RateWrapper = styled.button<{ rightAlign?: boolean }>`
display: inline;
background: none;
border: 0;
Expand All @@ -120,7 +122,7 @@ export const RateWrapper = styled.button`
color: inherit;
font-size: 13px;
letter-spacing: -0.1px;
text-align: left;
text-align: ${({ rightAlign }) => (rightAlign ? 'right' : 'left')};
font-weight: 500;
width: 100%;
`
Expand Down Expand Up @@ -154,6 +156,7 @@ export function RateInfo({
isInvertedState,
opacitySymbol = false,
noFiat = false,
rightAlign = false,
}: RateInfoProps) {
const { chainId, inputCurrencyAmount, outputCurrencyAmount, activeRateFiatAmount, invertedActiveRateFiatAmount } =
rateInfoParams
Expand Down Expand Up @@ -227,7 +230,7 @@ export function RateInfo({
</RateLabel>
)}
<div>
<RateWrapper onClick={() => setCurrentIsInverted((state) => !state)}>
<RateWrapper onClick={() => setCurrentIsInverted((state) => !state)} rightAlign={rightAlign}>
<span
title={
currentActiveRate.toFixed(rateOutputCurrency.decimals || DEFAULT_DECIMALS) +
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const Details = styled.div`
flex-flow: row wrap;
align-items: center;
width: 100%;
margin: 6px 0 0;
margin: 16px 0 0;
`

export const Summary = styled.div`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ export const AccountControl = styled.div`
justify-content: space-between;
min-width: 0;
width: 100%;

font-weight: 500;
font-size: 1.25rem;

Expand Down Expand Up @@ -147,7 +146,9 @@ export const Wrapper = styled.div`
${WalletAction} {
color: inherit;
opacity: 0.85;
transition: color var(${UI.ANIMATION_DURATION}) ease-in-out, opacity var(${UI.ANIMATION_DURATION}) ease-in-out;
transition:
color var(${UI.ANIMATION_DURATION}) ease-in-out,
opacity var(${UI.ANIMATION_DURATION}) ease-in-out;
margin: auto;
padding: 0;
border: 0;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export const FooterBox = styled.div`
display: flex;
flex-flow: column wrap;
max-width: 100%;
margin: 0 4px;
padding: 0;
padding: 0 6px;
gap: 7px;
`

export const RateWrapper = styled.div`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export function TradeRateDetails({ rateInfoParams, alwaysExpanded = false }: Tra

const partnerFeeRow = (
<PartnerFeeRow
alwaysRow
withTimelineDot={false}
partnerFeeUsd={partnerFeeUsd}
partnerFeeAmount={partnerFeeAmount}
Expand All @@ -46,7 +45,7 @@ export function TradeRateDetails({ rateInfoParams, alwaysExpanded = false }: Tra
if (alwaysExpanded) {
return (
<>
<StyledRateInfo label="Limit price" stylized={true} rateInfoParams={rateInfoParams} />
<StyledRateInfo label="Limit price" stylized={true} rateInfoParams={rateInfoParams} rightAlign={true} />
<Box noMargin>{partnerFeeRow}</Box>
</>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export const Wrapper = styled.div`
width: 100%;
font-size: 13px;
font-weight: inherit;
min-height: 24px;
`

export const Label = styled.span`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { ReactNode, useMemo, useState } from 'react'
import ArrowDownImage from '@cowprotocol/assets/cow-swap/arrowDownRight.svg'
import { DEFAULT_DATE_FORMAT } from '@cowprotocol/common-const'
import { formatInputAmount } from '@cowprotocol/common-utils'
import { InfoTooltip, HelpTooltip } from '@cowprotocol/ui'
import { InfoTooltip, HelpTooltip, RowFixed } from '@cowprotocol/ui'
import { Currency, Price } from '@uniswap/sdk-core'

import SVG from 'react-inlinesvg'
Expand All @@ -29,7 +29,9 @@ const Wrapper = styled.div`
font-weight: 400;
color: inherit;
padding: 8px;
gap: 10px;
gap: 7px;
display: flex;
flex-flow: column wrap;
`

const ArrowDownRight = styled.div`
Expand Down Expand Up @@ -111,19 +113,17 @@ export function LimitOrdersDetails(props: LimitOrdersDetailsProps) {
)}

<styledEl.DetailsRow>
<div>
<span>
<p>Order expires</p>
</span>
<RowFixed>
<p>Order expires</p>

<InfoTooltip
content={
"If your order has not been filled by this date & time, it will expire. Don't worry - expirations and order placement are free on CoW Swap!"
}
/>
</div>
<div>
<span>{expiryDate.toLocaleString(undefined, DEFAULT_DATE_FORMAT)}</span>
</div>
</RowFixed>

<span>{expiryDate.toLocaleString(undefined, DEFAULT_DATE_FORMAT)}</span>
</styledEl.DetailsRow>
<OrderType isPartiallyFillable={partiallyFillable} partiallyFillableOverride={partiallyFillableOverride} />
<RecipientRow chainId={tradeContext.chainId} recipient={recipientAddressOrName || recipient} account={account} />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { QuestionTooltipIconWrapper, UI } from '@cowprotocol/ui'

import styled from 'styled-components/macro'

import { RateInfo } from 'common/pure/RateInfo'
Expand All @@ -11,40 +9,20 @@ export const DetailsRow = styled.div`
justify-content: space-between;
align-items: center;
text-align: right;
min-height: 24px;
gap: 3px;

> div:first-child {
display: flex;
gap: 3px;
}

> div > span {
display: flex;
}
gap: 16px;

> div > span > p {
p {
opacity: 0.8;
padding: 0;
margin: 0;
text-align: left;
white-space: nowrap;
}

> div > span ${QuestionTooltipIconWrapper} {
opacity: 0.5;
transition: opacity var(${UI.ANIMATION_DURATION}) ease-in-out;

&:hover {
opacity: 1;
}
}
`

export const StyledRateInfo = styled(RateInfo)`
export const StyledRateInfo = styled(RateInfo).attrs({ rightAlign: true })`
font-size: 13px;
font-weight: 400;
color: inherit;
min-height: 24px;
gap: 3px;
gap: 16px;
`
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import IMAGE_CARET_DOWN from '@cowprotocol/assets/cow-swap/carret-down.svg'
import {InfoTooltip} from '@cowprotocol/ui'
import { InfoTooltip, RowFixed } from '@cowprotocol/ui'

import { Menu } from '@reach/menu-button'

Expand All @@ -21,18 +21,16 @@ export function OrderType(props: OrderTypeProps) {
partiallyFillableOverride: [override],
} = props
const textContent =
override ?? isPartiallyFillable
(override ?? isPartiallyFillable)
? 'This order can be partially filled'
: 'This order will either be filled completely or not filled.'

return (
<DetailsRow className={className}>
<div>
<span>
<p>Order type</p>
</span>{' '}
<RowFixed>
<p>Order type</p>
<InfoTooltip content={textContent} />
</div>
</RowFixed>
<OrderTypePicker {...props} />
</DetailsRow>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import {
changeLimitPricePositionAnalytics,
toggleLockLimitPriceAnalytics,
toggleOrdersTablePositionAnalytics,
toggleGlobalUsdModeAnalytics,
// TODO: Temporarily disabled along with Global USD Mode feature
// toggleGlobalUsdModeAnalytics,
} from 'modules/analytics'
import { ORDERS_TABLE_SETTINGS } from 'modules/trade/const/common'
import { SettingsBox, SettingsContainer, SettingsTitle } from 'modules/trade/pure/Settings'
Expand All @@ -24,7 +25,7 @@ const DropdownButton = styled.button`
border: 1px solid var(${UI.COLOR_BORDER});
border-radius: 12px;
padding: 10px 34px 10px 12px;
min-width: 140px;
width: 180px;
cursor: pointer;
font-size: 14px;
display: flex;
Expand Down Expand Up @@ -63,7 +64,7 @@ const DropdownList = styled.div<{ isOpen: boolean }>`
border: 1px solid var(${UI.COLOR_BORDER});
border-radius: 12px;
padding: 6px;
min-width: 140px;
width: 180px;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
`
Expand Down Expand Up @@ -125,7 +126,8 @@ export function Settings({ state, onStateChanged }: SettingsProps) {
limitPricePosition,
limitPriceLocked,
ordersTableOnLeft,
isUsdValuesMode,
// TODO: Temporarily disabled along with Global USD Mode feature
// isUsdValuesMode,
} = state
const [isOpen, setIsOpen] = useState(false)

Expand Down Expand Up @@ -164,10 +166,12 @@ export function Settings({ state, onStateChanged }: SettingsProps) {
onStateChanged({ ordersTableOnLeft: !ordersTableOnLeft })
}, [ordersTableOnLeft, onStateChanged])

/* TODO: Temporarily disabled along with Global USD Mode feature
const handleUsdValuesModeToggle = useCallback(() => {
toggleGlobalUsdModeAnalytics(!isUsdValuesMode)
onStateChanged({ isUsdValuesMode: !isUsdValuesMode })
}, [isUsdValuesMode, onStateChanged])
*/

const handleContainerClick = (e: React.MouseEvent) => {
e.stopPropagation()
Expand Down Expand Up @@ -209,12 +213,13 @@ export function Settings({ state, onStateChanged }: SettingsProps) {
toggle={handleLimitPriceLockedToggle}
/>

{/* TODO: Global USD Mode feature is temporarily disabled while we iterate on the functionality
<SettingsBox
title="Global USD Mode"
tooltip="When enabled, all prices will be displayed in USD by default."
value={isUsdValuesMode}
toggle={handleUsdValuesModeToggle}
/>
/> */}

<SettingsBox
title={ORDERS_TABLE_SETTINGS.LEFT_ALIGNED.title}
Expand All @@ -225,7 +230,7 @@ export function Settings({ state, onStateChanged }: SettingsProps) {

<SettingsRow>
<SettingsLabel>
Limit price position <HelpTooltip text="Choose where to display the limit price input." />
Limit Price Position <HelpTooltip text="Choose where to display the limit price input." />
</SettingsLabel>
<DropdownContainer>
<DropdownButton onClick={toggleDropdown}>{POSITION_LABELS[limitPricePosition]}</DropdownButton>
Expand Down
Loading
Loading