refactor: Tooltip to hooks and Typescript (#919)

Update `<Tooltip>` component to use hooks and Typescript.

src/containers/Ledgers/LedgerMetrics.jsx

@@ -1,7 +1,7 @@
 import { withTranslation } from 'react-i18next'
 import { Component } from 'react'
 import PropTypes from 'prop-types'
-import Tooltip from '../shared/components/Tooltip'
+import { Tooltip } from '../shared/components/Tooltip'
 import { renderXRP } from '../shared/utils'
 import PauseIcon from '../shared/images/ic_pause.svg'
 import ResumeIcon from '../shared/images/ic_play.svg'
@@ -31,14 +31,13 @@ class LedgerMetrics extends Component {
   }
 
   showTooltip = (event) => {
-    const { data, nUnl } = this.state
+    const { data } = this.state
     this.setState({
       tooltip: {
-        nUnl: data.nUnl,
+        data: { nUnl: data.nUnl },
         mode: 'nUnl',
-        v: nUnl,
-        x: event.pageX,
-        y: event.pageY,
+        x: event.currentTarget.offsetLeft,
+        y: event.currentTarget.offsetTop,
       },
     })
   }
@@ -136,7 +135,7 @@ class LedgerMetrics extends Component {
           <>
             <div className="control">{this.renderPause()}</div>
             <div className="metrics">{items}</div>
-            <Tooltip t={t} language={language} data={tooltip} />
+            <Tooltip tooltip={tooltip} />
           </>
         )}
       </div>

src/containers/Ledgers/Ledgers.jsx

@@ -3,8 +3,7 @@ import { withTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { CURRENCY_OPTIONS } from '../shared/transactionUtils'
 import { localizeNumber } from '../shared/utils'
-import Tooltip from '../shared/components/Tooltip'
-import './css/ledgers.scss'
+import { Tooltip } from '../shared/components/Tooltip'
 import SuccessIcon from '../shared/images/success.svg'
 import DomainLink from '../shared/components/DomainLink'
 import { Loader } from '../shared/components/Loader'
@@ -14,6 +13,7 @@ import { TransactionActionIcon } from '../shared/components/TransactionActionIco
 import { Legend } from './Legend'
 import { RouteLink } from '../shared/routing'
 import { LEDGER_ROUTE, TRANSACTION_ROUTE, VALIDATOR_ROUTE } from '../App/routes'
+import './css/ledgers.scss'
 
 const SIGMA = '\u03A3'
 
@@ -59,16 +59,15 @@ class Ledgers extends Component {
     const { validators } = this.state
     this.setState({
       tooltip: {
-        ...data,
+        data: { ...data, v: mode === 'validator' && validators[data.pubkey] },
         mode,
-        v: mode === 'validator' && validators[data.pubkey],
         x: event.currentTarget.offsetLeft,
         y: event.currentTarget.offsetTop,
       },
     })
   }
 
-  hideTooltip = () => this.setState({ tooltip: null })
+  hideTooltip = () => this.setState({ tooltip: undefined })
 
   renderSelected = () => {
     const { validators, selected } = this.state
@@ -249,16 +248,15 @@ class Ledgers extends Component {
 
   render() {
     const { ledgers, selected, tooltip } = this.state
-    const { t, language, isOnline } = this.props
+    const { isOnline } = this.props
     return (
       <div className="ledgers">
         {isOnline && ledgers.length > 0 ? (
           <>
             <Legend />
             <div className="control">{selected && this.renderSelected()}</div>
             <div className="ledger-list">
-              {ledgers.map(this.renderLedger)}{' '}
-              <Tooltip t={t} language={language} data={tooltip} />
+              {ledgers.map(this.renderLedger)} <Tooltip tooltip={tooltip} />
             </div>{' '}
           </>
         ) : (

src/containers/NFT/NFTHeader/NFTHeader.tsx

@@ -4,7 +4,7 @@ import { useQuery } from 'react-query'
 import { Loader } from '../../shared/components/Loader'
 import './styles.scss'
 import SocketContext from '../../shared/SocketContext'
-import Tooltip from '../../shared/components/Tooltip'
+import { Tooltip, TooltipInstance } from '../../shared/components/Tooltip'
 import { getNFTInfo, getAccountInfo } from '../../../rippled/lib/rippled'
 import { formatNFTInfo, formatAccountInfo } from '../../../rippled/lib/utils'
 import { localizeDate, BAD_REQUEST, HASH_REGEX } from '../../shared/utils'
@@ -39,7 +39,7 @@ export const NFTHeader = (props: Props) => {
   const { tokenId, setError } = props
   const rippledSocket = useContext(SocketContext)
   const { trackException } = useAnalytics()
-  const [tooltip, setTooltip] = useState(null)
+  const [tooltip, setTooltip] = useState<TooltipInstance | undefined>(undefined)
 
   const { data, isFetching: loading } = useQuery<NFTFormattedInfo>(
     ['getNFTInfo', tokenId],
@@ -90,11 +90,16 @@ export const NFTHeader = (props: Props) => {
       : undefined
 
   const showTooltip = (event: any, d: any) => {
-    setTooltip({ ...d, mode: 'nftId', x: event.pageX, y: event.pageY })
+    setTooltip({
+      data: d,
+      mode: 'nftId',
+      x: event.currentTarget.offsetLeft,
+      y: event.currentTarget.offsetTop,
+    })
   }
 
   const hideTooltip = () => {
-    setTooltip(null)
+    setTooltip(undefined)
   }
 
   const renderHeaderContent = () => {
@@ -154,7 +159,7 @@ export const NFTHeader = (props: Props) => {
       <div className="box-content">
         {loading ? <Loader /> : renderHeaderContent()}
       </div>
-      <Tooltip data={tooltip} />
+      <Tooltip tooltip={tooltip} />
     </div>
   )
 }

src/containers/Network/Hexagons.jsx

@@ -4,9 +4,8 @@ import { useWindowSize } from 'usehooks-ts'
 
 import { hexbin } from 'd3-hexbin'
 import { Loader } from '../shared/components/Loader'
-import Tooltip from '../shared/components/Tooltip'
+import { Tooltip } from '../shared/components/Tooltip'
 import './css/hexagons.scss'
-import { useLanguage } from '../shared/hooks'
 
 const MAX_WIDTH = 1200
 const getDimensions = (width) => ({
@@ -50,7 +49,6 @@ const prepareHexagons = (data, list, height, radius, prev = []) => {
 }
 
 export const Hexagons = ({ list, data }) => {
-  const language = useLanguage()
   const { width } = useWindowSize()
   const [tooltip, setToolip] = useState()
   const [hexagons, setHexagons] = useState([])
@@ -72,9 +70,8 @@ export const Hexagons = ({ list, data }) => {
 
   const showTooltip = (event, tooltipData) => {
     setToolip({
-      ...tooltipData,
+      data: { ...tooltipData, v: list[tooltipData.pubkey] },
       mode: 'validator',
-      v: list[tooltipData.pubkey],
       x: event.nativeEvent.offsetX,
       y: event.nativeEvent.offsetY,
     })
@@ -126,7 +123,7 @@ export const Hexagons = ({ list, data }) => {
         </svg>
         {hexagons?.length === 0 && <Loader />}
       </div>
-      <Tooltip language={language} data={tooltip} />
+      <Tooltip tooltip={tooltip} />
     </div>
   )
 }

src/containers/PayStrings/PayStringHeader/index.tsx

@@ -1,19 +1,15 @@
 import { useState, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
 import PayStringLogomark from '../../shared/images/PayString_Logomark.png'
 import QuestIcon from '../../shared/images/hover_question.svg'
-import Tooltip from '../../shared/components/Tooltip'
+import { Tooltip } from '../../shared/components/Tooltip'
 import './styles.scss'
-import { useLanguage } from '../../shared/hooks'
 
 export interface PayStringHeaderProps {
   accountId: string
 }
 
 export const PayStringHeader = ({ accountId }: PayStringHeaderProps) => {
   const [showToolTip, setShowToolTip] = useState(false)
-  const { t } = useTranslation()
-  const language = useLanguage()
   const questionRef = useRef<Element>(null)
   return (
     <div className="box paystring-header">
@@ -36,9 +32,7 @@ export const PayStringHeader = ({ accountId }: PayStringHeaderProps) => {
       </div>
       {showToolTip && questionRef.current && (
         <Tooltip
-          t={t}
-          language={language}
-          data={{
+          tooltip={{
             mode: 'paystring',
             x: questionRef.current.getBoundingClientRect().x,
             y: questionRef.current.getBoundingClientRect().y,