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),
})}
)}