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

@@ -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 || <Trans>Select a token</Trans>}
                     </StyledTokenName>
                   </RowFixed>
+                  {!!nativeCurrency && !isMobile && !upToMedium && (
+                    <MouseoverTooltip
+                      text={nativeCurrency?.wrapped.address}
+                      delay={200}
+                      placement="top"
+                      width="fit-content"
+                    >
+                      <Info color={theme.subText} size={18} style={{ margin: '0 8px' }} />
+                    </MouseoverTooltip>
+                  )}
                   {!disableCurrencySelect && !isSwitchMode && (
                     <DropdownSVG style={{ marginLeft: tight ? '-8px' : undefined }} />
                   )}

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}
           </TooltipContainer>
@@ -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 (

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 = () => (
   </NoResultWrapper>
 )
 
+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() {
             <MarketPrice>
               <ChainImage src={networkInfo?.icon} alt="Network" />
               {formatDisplayNumber(marketRate, {
-                significantDigits: upToSmall ? MOBILE_SIGNIFICANT_DIGITS : DESKTOP_SIGNIFICANT_DIGITS,
+                significantDigits: getSignificantDigits(marketRate.toString(), upToSmall),
               })}
             </MarketPrice>
           )}