Add tooltip for token select in swap box

KyberNetwork · Sep 4, 2024 · 892dc7c · 892dc7c
1 parent a1c3b0a
commit 892dc7c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git 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 { DelayMouseoverTooltip } 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 && (
+                    <DelayMouseoverTooltip
+                      text={nativeCurrency?.wrapped.address}
+                      delay={200}
+                      placement="top"
+                      width="fit-content"
+                    >
+                      <Info color={theme.subText} size={18} style={{ margin: '0 8px' }} />
+                    </DelayMouseoverTooltip>
+                  )}
                   {!disableCurrencySelect && !isSwitchMode && (
                     <DropdownSVG style={{ marginLeft: tight ? '-8px' : undefined }} />
                   )}

diff --git 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}
           </TooltipContainer>
@@ -108,6 +109,43 @@ export function MouseoverTooltip({ children, disableTooltip, delay, ...rest }: O
   )
 }
 
+export function DelayMouseoverTooltip({ children, disableTooltip, delay, ...rest }: Omit<TooltipProps, 'show'>) {
+  const [show, setShow] = useState(false)
+  const [closeTimeout, setCloseTimeout] = useState<NodeJS.Timeout | null>(null)
+  const hovering = useRef(false)
+  const open = useCallback(() => {
+    if (!!rest.text) {
+      hovering.current = true
+      setTimeout(() => {
+        if (hovering.current) setShow(true)
+      }, 50)
+
+      if (closeTimeout) {
+        clearTimeout(closeTimeout)
+        setCloseTimeout(null)
+      }
+    }
+  }, [rest.text, closeTimeout])
+  const close = useCallback(
+    () =>
+      setCloseTimeout(
+        setTimeout(() => {
+          hovering.current = false
+          setShow(false)
+        }, delay || 50),
+      ),
+    [delay],
+  )
+  if (disableTooltip) return <>{children}</>
+  return (
+    <Tooltip {...rest} show={show} onMouseEnter={open} onMouseLeave={close}>
+      <Row onMouseOver={open} onMouseLeave={close}>
+        {children}
+      </Row>
+    </Tooltip>
+  )
+}
+
 export function MouseoverTooltipDesktopOnly(props: Omit<TooltipProps, 'show'>) {
   if (isMobile) return <>{props.children}</>