From a1c3b0a7f28475698db72ddad01701193ed3ac2c Mon Sep 17 00:00:00 2001
From: Tien Nguyen <dinhtiennguyen.1202@gmail.com>
Date: Wed, 4 Sep 2024 14:53:19 +0700
Subject: [PATCH] improve LO book mobile: re-layout table column (#2528)

---
 .../swapv2/LimitOrder/OrderBook/OrderItem.tsx |  54 +++------
 .../LimitOrder/OrderBook/TableHeader.tsx      | 113 ++++--------------
 .../swapv2/LimitOrder/OrderBook/index.tsx     |  14 +--
 3 files changed, 49 insertions(+), 132 deletions(-)

diff --git a/src/components/swapv2/LimitOrder/OrderBook/OrderItem.tsx b/src/components/swapv2/LimitOrder/OrderBook/OrderItem.tsx
index c43c6a083a..47e7bfcb44 100644
--- a/src/components/swapv2/LimitOrder/OrderBook/OrderItem.tsx
+++ b/src/components/swapv2/LimitOrder/OrderBook/OrderItem.tsx
@@ -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;
   `}
 `
 
@@ -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>
@@ -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()
 
@@ -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>
   )
 }
diff --git a/src/components/swapv2/LimitOrder/OrderBook/TableHeader.tsx b/src/components/swapv2/LimitOrder/OrderBook/TableHeader.tsx
index f8595613a4..69484975b0 100644
--- a/src/components/swapv2/LimitOrder/OrderBook/TableHeader.tsx
+++ b/src/components/swapv2/LimitOrder/OrderBook/TableHeader.tsx
@@ -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'
 
@@ -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>
@@ -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>
   )
 }
diff --git a/src/components/swapv2/LimitOrder/OrderBook/index.tsx b/src/components/swapv2/LimitOrder/OrderBook/index.tsx
index 0c2ae726e2..b20cd97e75 100644
--- a/src/components/swapv2/LimitOrder/OrderBook/index.tsx
+++ b/src/components/swapv2/LimitOrder/OrderBook/index.tsx
@@ -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'
@@ -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;
   `}
 `
 
@@ -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 {
@@ -269,7 +267,7 @@ export default function OrderBook() {
             </RefreshText>
           )}
 
-          <TableHeader showAmountOut={showAmountOut} setShowAmountOut={setShowAmountOut} />
+          <TableHeader />
 
           {formattedOrders.length > 0 ? (
             <OrderItemWrapper
@@ -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>
           ) : (
@@ -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>
           ) : (