feat: explore category info icons (#4787)

* added tooltips
* switched to premade tooltip component
* added 'help' cursor

src/components/Tokens/TokenDetails/AddressSection.tsx

@@ -21,7 +21,6 @@ const ContractAddress = styled.button`
   border: none;
   min-height: 38px;
   padding: 0px;
-  cursor: pointer;
 `
 
 export default function AddressSection({ address }: { address: string }) {

src/components/Tokens/TokenDetails/InfoTip.tsx

@@ -0,0 +1,34 @@
+import Tooltip from 'components/Tooltip'
+import { ReactNode, useCallback, useState } from 'react'
+import { Info } from 'react-feather'
+import styled from 'styled-components/macro'
+
+const InfoTipContainer = styled.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+  cursor: help;
+`
+
+const InfoTipBody = styled.div`
+  color: ${({ theme }) => theme.textPrimary};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+`
+
+export default function InfoTip({ text }: { text: ReactNode; size?: number }) {
+  const [show, setShow] = useState<boolean>(false)
+
+  const open = useCallback(() => setShow(true), [setShow])
+  const close = useCallback(() => setShow(false), [setShow])
+  return (
+    <span style={{ marginLeft: 4, display: 'flex', alignItems: 'center', backgroundColor: 'black' }}>
+      <Tooltip text={<InfoTipBody>{text}</InfoTipBody>} show={show} placement="right">
+        <InfoTipContainer onClick={open} onMouseEnter={open} onMouseLeave={close}>
+          <Info size={14} />
+        </InfoTipContainer>
+      </Tooltip>
+    </span>
+  )
+}

src/components/Tokens/TokenDetails/StatsSection.tsx

@@ -1,9 +1,13 @@
 import { Trans } from '@lingui/macro'
+import { TokenSortMethod } from 'graphql/data/TopTokens'
 import { ReactNode } from 'react'
 import styled from 'styled-components/macro'
 import { textFadeIn } from 'theme/animations'
 import { formatDollarAmount } from 'utils/formatDollarAmt'
 
+import { HEADER_DESCRIPTIONS } from '../TokenTable/TokenRow'
+import InfoTip from './InfoTip'
+
 export const StatWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -24,6 +28,11 @@ export const StatPair = styled.div`
   flex: 1;
   flex-wrap: wrap;
 `
+const StatTitle = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+`
 const StatPrice = styled.span`
   font-size: 28px;
   color: ${({ theme }) => theme.textPrimary};
@@ -34,10 +43,14 @@ const NoData = styled.div`
 
 type NumericStat = number | undefined | null
 
-function Stat({ value, title }: { value: NumericStat; title: ReactNode }) {
+function Stat({ value, title, description }: { value: NumericStat; title: ReactNode; description?: ReactNode }) {
   return (
     <StatWrapper>
-      {title}
+      <StatTitle>
+        {title}
+        {description && <InfoTip text={description}></InfoTip>}
+      </StatTitle>
+
       <StatPrice>{value ? formatDollarAmount(value) : '-'}</StatPrice>
     </StatWrapper>
   )
@@ -55,8 +68,20 @@ export default function StatsSection(props: StatsSectionProps) {
     return (
       <TokenStatsSection>
         <StatPair>
-          <Stat value={TVL} title={<Trans>Total Value Locked</Trans>} />
-          <Stat value={volume24H} title={<Trans>24H volume</Trans>} />
+          <Stat
+            value={TVL}
+            description={HEADER_DESCRIPTIONS[TokenSortMethod.TOTAL_VALUE_LOCKED]}
+            title={<Trans>TVL</Trans>}
+          />
+          <Stat
+            value={volume24H}
+            description={
+              <Trans>
+                24H volume is the amount of the asset that has been traded on Uniswap v3 during the past 24 hours.
+              </Trans>
+            }
+            title={<Trans>24H volume</Trans>}
+          />
         </StatPair>
         <StatPair>
           <Stat value={priceLow52W} title={<Trans>52W low</Trans>} />

src/components/Tokens/TokenTable/TokenRow.tsx

@@ -13,6 +13,7 @@ import { ForwardedRef, forwardRef } from 'react'
 import { CSSProperties, ReactNode } from 'react'
 import { ArrowDown, ArrowUp, Heart } from 'react-feather'
 import { Link, useParams } from 'react-router-dom'
+import { Text } from 'rebass'
 import styled, { css, useTheme } from 'styled-components/macro'
 import { ClickableStyle } from 'theme'
 import { formatDollarAmount } from 'utils/formatDollarAmt'
@@ -34,6 +35,7 @@ import {
   useToggleFavorite,
 } from '../state'
 import { useTokenLogoURI } from '../TokenDetails/ChartSection'
+import InfoTip from '../TokenDetails/InfoTip'
 import { formatDelta, getDeltaArrow } from '../TokenDetails/PriceChart'
 
 const Cell = styled.div`
@@ -229,18 +231,18 @@ const PriceInfoCell = styled(Cell)`
     align-items: flex-end;
   }
 `
-const SortArrowCell = styled(Cell)`
-  padding-right: 2px;
-`
 const HeaderCellWrapper = styled.span<{ onClick?: () => void }>`
   align-items: center;
-  ${ClickableStyle}
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'unset')};
   display: flex;
+  gap: 4px;
   height: 100%;
   justify-content: flex-end;
   width: 100%;
 `
+const HeaderCellText = styled(Text)`
+  ${ClickableStyle}
+`
 const SparkLineCell = styled(Cell)`
   padding: 0px 24px;
   min-width: 120px;
@@ -330,6 +332,17 @@ export const LogoContainer = styled.div`
   display: flex;
 `
 
+export const HEADER_DESCRIPTIONS: Record<TokenSortMethod, ReactNode | undefined> = {
+  [TokenSortMethod.PRICE]: undefined,
+  [TokenSortMethod.PERCENT_CHANGE]: undefined,
+  [TokenSortMethod.TOTAL_VALUE_LOCKED]: (
+    <Trans>Total value locked (TVL) is the amount of the asset that’s currently in a Uniswap v3 liquidity pool.</Trans>
+  ),
+  [TokenSortMethod.VOLUME]: (
+    <Trans>Volume is the amount of the asset that has been traded on Uniswap v3 during the selected time frame.</Trans>
+  ),
+}
+
 /* Get singular header cell for header row */
 function HeaderCell({
   category,
@@ -343,31 +356,23 @@ function HeaderCell({
   const handleSortCategory = useSetSortMethod(category)
   const sortMethod = useAtomValue(sortMethodAtom)
 
-  if (sortMethod === category) {
-    return (
-      <HeaderCellWrapper onClick={handleSortCategory}>
-        <SortArrowCell>
+  const description = HEADER_DESCRIPTIONS[category]
+
+  return (
+    <HeaderCellWrapper onClick={handleSortCategory}>
+      {sortMethod === category && (
+        <>
           {sortAscending ? (
             <ArrowUp size={20} strokeWidth={1.8} color={theme.accentActive} />
           ) : (
             <ArrowDown size={20} strokeWidth={1.8} color={theme.accentActive} />
           )}
-        </SortArrowCell>
-        {category}
-      </HeaderCellWrapper>
-    )
-  }
-  if (sortable) {
-    return (
-      <HeaderCellWrapper onClick={handleSortCategory}>
-        <SortArrowCell>
-          <ArrowUp size={14} visibility="hidden" />
-        </SortArrowCell>
-        {category}
-      </HeaderCellWrapper>
-    )
-  }
-  return <HeaderCellWrapper>{category}</HeaderCellWrapper>
+        </>
+      )}
+      <HeaderCellText>{category}</HeaderCellText>
+      {description && <InfoTip text={description}></InfoTip>}
+    </HeaderCellWrapper>
+  )
 }
 
 /* Token Row: skeleton row component */