Skip to content

Commit

Permalink
improve LO book mobile: re-layout table column (#2528)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tienkane
tienkane authored Sep 4, 2024
1 parent 17bf8da commit a1c3b0a
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 132 deletions.
54 changes: 19 additions & 35 deletions src/components/swapv2/LimitOrder/OrderBook/OrderItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export const ItemWrapper = styled.div`
grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
padding: 12px;
${({ theme }) => theme.mediaWidth.upToSmall`
grid-template-columns: 1.2fr 1.8fr 2fr 1fr;
${({ theme }) => theme.mediaWidth.upToExtraSmall`
grid-template-columns: 1.2fr 1.8fr 2fr 1.8fr;
`}
`

Expand All @@ -40,15 +40,15 @@ const AmountInfo = ({
plus,
amount,
currency,
upToSmall,
upToExtraSmall,
}: {
plus?: boolean
amount: string
currency?: Currency
upToSmall?: boolean
upToExtraSmall?: boolean
}) => (
<Flex alignItems={'center'}>
<CurrencyLogo currency={currency} size="17px" style={{ marginRight: upToSmall ? 4 : 8 }} />
<CurrencyLogo currency={currency} size="17px" style={{ marginRight: upToExtraSmall ? 4 : 8 }} />
<span>{plus ? '+' : '-'}</span>
<span>{amount}</span>
</Flex>
Expand All @@ -58,15 +58,13 @@ export default function OrderItem({
reverse,
order,
style,
showAmountOut,
}: {
reverse?: boolean
order: LimitOrderFromTokenPairFormatted
style: CSSProperties
showAmountOut: boolean
}) {
const theme = useTheme()
const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
const { currencyIn: makerCurrency, currencyOut: takerCurrency } = useLimitState()
const { supportedChains } = useChainsConfig()

Expand All @@ -79,33 +77,19 @@ export default function OrderItem({
<ItemWrapper style={style}>
<ChainImage src={chain?.icon} alt="Network" />
<Rate reverse={reverse}>{order.rate}</Rate>
{!upToSmall ? (
<>
<AmountInfo
plus={reverse}
amount={order[!reverse ? 'makerAmount' : 'takerAmount']}
currency={makerCurrency}
upToSmall={upToSmall}
/>
<AmountInfo
plus={!reverse}
amount={order[!reverse ? 'takerAmount' : 'makerAmount']}
currency={takerCurrency}
upToSmall={upToSmall}
/>
</>
) : (
<AmountInfo
plus={showAmountOut ? !reverse : reverse}
amount={(showAmountOut && !reverse) || (!showAmountOut && reverse) ? order.takerAmount : order.makerAmount}
currency={showAmountOut ? takerCurrency : makerCurrency}
upToSmall={upToSmall}
/>
)}
<Text color={theme.subText}>
{!upToSmall && 'Filled '}
{order.filled}%
</Text>
<AmountInfo
plus={reverse}
amount={order[!reverse ? 'makerAmount' : 'takerAmount']}
currency={makerCurrency}
upToExtraSmall={upToExtraSmall}
/>
<AmountInfo
plus={!reverse}
amount={order[!reverse ? 'takerAmount' : 'makerAmount']}
currency={takerCurrency}
upToExtraSmall={upToExtraSmall}
/>
{!upToExtraSmall && <Text color={theme.subText}>Filled {order.filled}%</Text>}
</ItemWrapper>
)
}
113 changes: 24 additions & 89 deletions src/components/swapv2/LimitOrder/OrderBook/TableHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { Trans } from '@lingui/macro'
import { rgba } from 'polished'
import { useState } from 'react'
import { useMedia } from 'react-use'
import { Flex, Text } from 'rebass'
import { Text } from 'rebass'
import styled from 'styled-components'

import { ReactComponent as DropdownSvg } from 'assets/svg/down.svg'
import { useLimitState } from 'state/limit/hooks'
import { MEDIA_WIDTHS } from 'theme'

Expand All @@ -19,57 +17,11 @@ const Header = styled(ItemWrapper)`
font-weight: 500;
padding: 16px 12px;
cursor: default;
/* :hover {
background-color: ${({ theme }) => rgba(theme.primary, 0.2)};
} */
`

const DropdownIcon = styled(DropdownSvg)<{ open: boolean }>`
color: ${({ theme }) => theme.subText};
transform: rotate(${({ open }) => (open ? '180deg' : '0')});
transition: transform 300ms;
min-width: 24px;
`

const TabWrapper = styled.div`
overflow: hidden;
transition: 0.3s ease-in-out;
position: relative;
left: -14px;
`

const TabContainer = styled.div`
display: flex;
background: ${({ theme }) => theme.buttonBlack};
border: ${({ theme }) => `1px solid ${theme.border}`};
width: fit-content;
border-radius: 999px;
padding: 1px;
margin-top: 12px;
`

const TabItem = styled(Flex)<{ active?: boolean }>`
padding: 4px 8px;
align-items: center;
border-radius: 999px;
background: ${({ theme, active }) => (active ? theme.tabActive : 'transparent')};
color: ${({ theme, active }) => (active ? theme.text : theme.subText)};
transition: 0.2s ease-in-out;
`

export default function TableHeader({
showAmountOut,
setShowAmountOut,
}: {
showAmountOut: boolean
setShowAmountOut: (value: boolean) => void
}) {
const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
export default function TableHeader() {
const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
const { currencyIn, currencyOut } = useLimitState()
const [openDropdown, setOpenDropdown] = useState<boolean>(false)

const onClickDropdown = () => setOpenDropdown(!openDropdown)
const onChangeDisplayedAmount = () => setShowAmountOut(!showAmountOut)

return (
<Header>
Expand All @@ -78,51 +30,34 @@ export default function TableHeader({
<Trans>RATE</Trans>
{!!currencyIn && !!currencyOut && (
<>
{upToSmall ? <br /> : ' '}(<span>{currencyIn?.symbol}/</span>
{upToExtraSmall ? <br /> : ' '}(<span>{currencyIn?.symbol}/</span>
<span>{currencyOut?.symbol}</span>)
</>
)}
</Text>
{!upToSmall && (
<Text>
<Trans>AMOUNT</Trans>
{!!currencyIn && (
<>
{upToSmall ? <br /> : ' '}
<span>({currencyIn?.symbol})</span>
</>
)}
</Text>
)}
<div>
<Flex>
<Text>
<Trans>AMOUNT</Trans>
{!!currencyIn && !!currencyOut && (
<>
{upToSmall ? <br /> : ' '}
<span>({!upToSmall || showAmountOut ? currencyOut?.symbol : currencyIn?.symbol})</span>
</>
)}
</Text>
{upToSmall && <DropdownIcon open={openDropdown} onClick={onClickDropdown} />}
</Flex>
{upToSmall && (
<TabWrapper style={{ height: openDropdown ? 40 : 0 }}>
<TabContainer>
<TabItem active={!showAmountOut} onClick={onChangeDisplayedAmount}>
{currencyIn?.symbol}
</TabItem>
<TabItem active={showAmountOut} onClick={onChangeDisplayedAmount}>
{currencyOut?.symbol}
</TabItem>{' '}
</TabContainer>
</TabWrapper>
<Text>
<Trans>AMOUNT</Trans>
{!!currencyIn && (
<>
{upToExtraSmall ? <br /> : ' '}
<span>({currencyIn?.symbol})</span>
</>
)}
</div>
</Text>
<Text>
<Trans>ORDER STATUS</Trans>
<Trans>AMOUNT</Trans>
{!!currencyOut && (
<>
{upToExtraSmall ? <br /> : ' '}
<span>({currencyOut?.symbol})</span>
</>
)}
</Text>
{!upToExtraSmall && (
<Text>
<Trans>ORDER STATUS</Trans>
</Text>
)}
</Header>
)
}
14 changes: 6 additions & 8 deletions src/components/swapv2/LimitOrder/OrderBook/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Currency, CurrencyAmount, Token } from '@kyberswap/ks-sdk-core'
import { Trans } from '@lingui/macro'
import { rgba } from 'polished'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'
import { useMedia } from 'react-use'
import { FixedSizeList } from 'react-window'
import { Text } from 'rebass'
Expand Down Expand Up @@ -59,8 +59,8 @@ const MarketPrice = styled.div`
display: grid;
grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
${({ theme }) => theme.mediaWidth.upToSmall`
grid-template-columns: 1.2fr 1.8fr 2fr 1fr;
${({ theme }) => theme.mediaWidth.upToExtraSmall`
grid-template-columns: 1.2fr 1.8fr 2fr 1.8fr;
`}
`

Expand Down Expand Up @@ -184,8 +184,6 @@ export default function OrderBook() {
refetch: refetchMarketRate,
} = useBaseTradeInfoLimitOrder(makerCurrency, takerCurrency, chainId)

const [showAmountOut, setShowAmountOut] = useState<boolean>(true)

const ordersWrapperRef = useRef<FixedSizeList<any>>(null)

const {
Expand Down Expand Up @@ -269,7 +267,7 @@ export default function OrderBook() {
</RefreshText>
)}

<TableHeader showAmountOut={showAmountOut} setShowAmountOut={setShowAmountOut} />
<TableHeader />

{formattedOrders.length > 0 ? (
<OrderItemWrapper
Expand All @@ -281,7 +279,7 @@ export default function OrderBook() {
>
{({ index, style }: { index: number; style: CSSProperties }) => {
const order = formattedOrders[index]
return <OrderItem key={order.id} style={style} order={order} showAmountOut={showAmountOut} />
return <OrderItem key={order.id} style={style} order={order} />
}}
</OrderItemWrapper>
) : (
Expand Down Expand Up @@ -309,7 +307,7 @@ export default function OrderBook() {
>
{({ index, style }: { index: number; style: CSSProperties }) => {
const order = formattedReversedOrders[index]
return <OrderItem key={order.id} style={style} reverse order={order} showAmountOut={showAmountOut} />
return <OrderItem key={order.id} style={style} reverse order={order} />
}}
</OrderItemWrapper>
) : (
Expand Down

0 comments on commit a1c3b0a

Please sign in to comment.