From 7b1af6c147b6fdd2506ded00a57a82d33b2a8877 Mon Sep 17 00:00:00 2001 From: Tien Nguyen Date: Wed, 4 Sep 2024 16:30:43 +0700 Subject: [PATCH] Add tooltip for token select in swap box (#2527) * Add tooltip for token select in swap box * change significant digits in LO book for mobile view * fix significant digits logic for LO book mobile view * fix mouseover tooltip component --- src/components/CurrencyInputPanel/index.tsx | 16 ++++++++ src/components/Tooltip/index.tsx | 9 ++-- .../swapv2/LimitOrder/OrderBook/index.tsx | 41 ++++++++++--------- 3 files changed, 42 insertions(+), 24 deletions(-) diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx index db7a3b25cc..ab70bd1c60 100644 --- a/src/components/CurrencyInputPanel/index.tsx +++ b/src/components/CurrencyInputPanel/index.tsx @@ -2,6 +2,9 @@ import { ChainId, Currency } from '@kyberswap/ks-sdk-core' import { Trans } from '@lingui/macro' import { darken, lighten, rgba } from 'polished' import { ReactNode, useCallback, useState } from 'react' +import { isMobile } from 'react-device-detect' +import { Info } from 'react-feather' +import { useMedia } from 'react-use' import { Box, Flex, Text } from 'rebass' import styled, { CSSProperties, css } from 'styled-components' @@ -14,9 +17,11 @@ import Wallet from 'components/Icons/Wallet' import { Input as NumericalInput } from 'components/NumericalInput' import { RowFixed } from 'components/Row' import CurrencySearchModal from 'components/SearchModal/CurrencySearchModal' +import { MouseoverTooltip } from 'components/Tooltip' import { useActiveWeb3React } from 'hooks' import useTheme from 'hooks/useTheme' import { useCurrencyBalance } from 'state/wallet/hooks' +import { MEDIA_WIDTHS } from 'theme' import { useCurrencyConvertedToNative } from 'utils/dmm' import { shortString } from 'utils/string' @@ -253,6 +258,7 @@ export default function CurrencyInputPanel({ const selectedCurrencyBalance = useCurrencyBalance(currency ?? undefined, customChainId) const theme = useTheme() + const upToMedium = useMedia(`(max-width: ${MEDIA_WIDTHS.upToMedium}px)`) const handleDismissSearch = useCallback(() => { setModalOpen(false) @@ -367,6 +373,16 @@ export default function CurrencyInputPanel({ loadingText || Select a token} + {!!nativeCurrency && !isMobile && !upToMedium && ( + + + + )} {!disableCurrencySelect && !isSwitchMode && ( )} diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx index 0c4b5e6cec..c852e122e0 100644 --- a/src/components/Tooltip/index.tsx +++ b/src/components/Tooltip/index.tsx @@ -60,6 +60,7 @@ export default function Tooltip({ onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} data-testid={dataTestId} + onClick={e => e.stopPropagation()} > {text} @@ -80,23 +81,23 @@ export function MouseoverTooltip({ children, disableTooltip, delay, ...rest }: O hovering.current = true setTimeout(() => { if (hovering.current) setShow(true) - }, delay || 50) + }, 50) if (closeTimeout) { clearTimeout(closeTimeout) setCloseTimeout(null) } } - }, [rest.text, closeTimeout, delay]) + }, [rest.text, closeTimeout]) const close = useCallback( () => setCloseTimeout( setTimeout(() => { hovering.current = false setShow(false) - }, 50), + }, delay || 50), ), - [], + [delay], ) if (disableTooltip) return <>{children} return ( diff --git a/src/components/swapv2/LimitOrder/OrderBook/index.tsx b/src/components/swapv2/LimitOrder/OrderBook/index.tsx index b20cd97e75..bef20949a6 100644 --- a/src/components/swapv2/LimitOrder/OrderBook/index.tsx +++ b/src/components/swapv2/LimitOrder/OrderBook/index.tsx @@ -29,6 +29,7 @@ const ITEMS_DISPLAY = 10 const ITEM_HEIGHT = 44 const DESKTOP_SIGNIFICANT_DIGITS = 6 const MOBILE_SIGNIFICANT_DIGITS = 5 +const MOBILE_SIGNIFICANT_DIGITS_FOR_LESS_THAN_ONE = 4 const OrderBookWrapper = styled.div` display: flex; @@ -93,11 +94,18 @@ const NoDataPanel = () => ( ) +const getSignificantDigits = (value: string, upToSmall: boolean) => + upToSmall + ? parseFloat(value) < 1 + ? MOBILE_SIGNIFICANT_DIGITS_FOR_LESS_THAN_ONE + : MOBILE_SIGNIFICANT_DIGITS + : DESKTOP_SIGNIFICANT_DIGITS + const formatOrders = ( orders: LimitOrderFromTokenPair[], makerCurrency: Currency | undefined, takerCurrency: Currency | undefined, - significantDigits: number, + upToSmall: boolean, reverse = false, ): LimitOrderFromTokenPairFormatted[] => { if (!makerCurrency || !takerCurrency) return [] @@ -143,7 +151,9 @@ const formatOrders = ( .sort((a, b) => parseFloat(b.rate) - parseFloat(a.rate)) .map(order => ({ ...order, - rate: formatDisplayNumber(order.rate, { significantDigits }), + rate: formatDisplayNumber(order.rate, { + significantDigits: getSignificantDigits(order.rate, upToSmall), + }), })) // Merge orders with the same rate @@ -163,8 +173,12 @@ const formatOrders = ( null, ) if (mergedOrder) { - mergedOrder.makerAmount = formatDisplayNumber(mergedOrder.makerAmount, { significantDigits }) - mergedOrder.takerAmount = formatDisplayNumber(mergedOrder.takerAmount, { significantDigits }) + mergedOrder.makerAmount = formatDisplayNumber(mergedOrder.makerAmount, { + significantDigits: getSignificantDigits(mergedOrder.makerAmount, upToSmall), + }) + mergedOrder.takerAmount = formatDisplayNumber(mergedOrder.takerAmount, { + significantDigits: getSignificantDigits(mergedOrder.takerAmount, upToSmall), + }) mergedOrders.push(mergedOrder) } }) @@ -211,24 +225,11 @@ export default function OrderBook() { const loadingReversedOrders = useShowLoadingAtLeastTime(isLoadingReversedOrder) const formattedOrders = useMemo( - () => - formatOrders( - orders, - makerCurrency, - takerCurrency, - upToSmall ? MOBILE_SIGNIFICANT_DIGITS : DESKTOP_SIGNIFICANT_DIGITS, - ), + () => formatOrders(orders, makerCurrency, takerCurrency, upToSmall), [orders, makerCurrency, takerCurrency, upToSmall], ) const formattedReversedOrders = useMemo( - () => - formatOrders( - reversedOrders, - takerCurrency, - makerCurrency, - upToSmall ? MOBILE_SIGNIFICANT_DIGITS : DESKTOP_SIGNIFICANT_DIGITS, - true, - ), + () => formatOrders(reversedOrders, takerCurrency, makerCurrency, upToSmall, true), [reversedOrders, takerCurrency, makerCurrency, upToSmall], ) @@ -290,7 +291,7 @@ export default function OrderBook() { {formatDisplayNumber(marketRate, { - significantDigits: upToSmall ? MOBILE_SIGNIFICANT_DIGITS : DESKTOP_SIGNIFICANT_DIGITS, + significantDigits: getSignificantDigits(marketRate.toString(), upToSmall), })} )}