chore: upgrade react-tooltip to v5 (#325)

## Changes
- upgrade `react-tooltip` from 4.2.21 to 5.26.4
- update imports for `react-tooltip` to use named imports
- update usage of `data-tip` to `data-tooltip-content`
- update usage of `data-for` to `data-tooltip-id`
- remove `effect="solid"` prop which became default in v5

## Test plan
- go to https://evm-codes-git-chore-upgrade-react-tooltip-to-v5-smlxl.vercel.app/playground
- hover over icons to the right of the playground panel
- expect tooltips to work like before

components/Editor/ExecutionStatus.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 
 import { useRegisterActions } from 'kbar'
-import ReactTooltip from 'react-tooltip'
+import { Tooltip } from 'react-tooltip'
 
 import { EthereumContext } from 'context/ethereumContext'
 
@@ -45,7 +45,7 @@ const ExecutionStatus = () => {
         </span>
         <span
           className="inline-block mr-4 select-all cursor-help"
-          data-tip="Gas consumed for the current instruction"
+          data-tooltip-content="Gas consumed for the current instruction"
         >
           {executionState.currentGas || 0}
         </span>
@@ -54,12 +54,12 @@ const ExecutionStatus = () => {
         </span>
         <span
           className="inline-block mr-4 select-all cursor-help"
-          data-tip="Total gas consumed"
+          data-tooltip-content="Total gas consumed"
         >
           {executionState.totalGas || 0}
         </span>
 
-        <ReactTooltip className="tooltip" effect="solid" />
+        <Tooltip className="tooltip" />
       </div>
 
       <div>

components/Editor/SolidityAdvanceModeTab.tsx

@@ -351,7 +351,7 @@ const SolidityAdvanceModeTab: FC<Props> = ({
           <Button onClick={handleCopyPermalink} transparent padded={false}>
             <span
               className="inline-block mr-4 select-all"
-              data-tip="Share permalink"
+              data-tooltip-content="Share permalink"
             >
               <Icon name="links-line" className="text-indigo-500 mr-1" />
             </span>

components/Editor/index.tsx

@@ -537,7 +537,7 @@ const Editor = ({ readOnly = false }: Props) => {
                     >
                       <span
                         className="inline-block mr-4 select-all"
-                        data-tip="Share permalink"
+                        data-tooltip-content="Share permalink"
                       >
                         <Icon
                           name="links-line"

components/Reference/index.tsx

@@ -13,7 +13,7 @@ import useWindowSize from 'lib/useWindowResize'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useTable, useExpanded, useFilters, HeaderGroup } from 'react-table'
-import ReactTooltip from 'react-tooltip'
+import { Tooltip } from 'react-tooltip'
 import { IReferenceItem, IItemDocs, IGasDocs } from 'types'
 
 import {
@@ -266,13 +266,12 @@ const ReferenceTable = ({
                           !!dynamicFeeForkName && (
                             <span
                               className="inline-block pl-2 text-gray-400 dark:text-black-400"
-                              data-tip="Has additional dynamic gas cost, expand to estimate it"
-                              data-for={`tip-${cell.row.id}`}
+                              data-tooltip-content="Has additional dynamic gas cost, expand to estimate it"
+                              data-tooltip-id={`tip-${cell.row.id}`}
                             >
                               <Icon name="question-line" />
-                              <ReactTooltip
+                              <Tooltip
                                 className="tooltip"
-                                effect="solid"
                                 id={`tip-${cell.row.id}`}
                               />
                             </span>

components/ui/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import cn from 'classnames'
-import ReactTooltip from 'react-tooltip'
+import { Tooltip } from 'react-tooltip'
 
 type Props = {
   children: React.ReactNode | string
@@ -54,19 +54,15 @@ export const Button: React.FC<Props> = ({
         },
         className,
       )}
-      data-tip={tooltip}
-      data-for={tooltipIdPrefixed}
+      data-tooltip-content={tooltip}
+      data-tooltip-id={tooltipIdPrefixed}
       {...rest}
     >
       <div className={cn('flex items-center', contentClassName)}>
         {children}
       </div>
       {tooltip && tooltipId && (
-        <ReactTooltip
-          className="tooltip"
-          id={tooltipIdPrefixed}
-          effect="solid"
-        />
+        <Tooltip className="tooltip" id={tooltipIdPrefixed} />
       )}
     </button>
   )

package.json

@@ -56,7 +56,7 @@
     "react-select": "^5.8.0",
     "react-simple-code-editor": "^0.13.1",
     "react-table": "^7.8.0",
-    "react-tooltip": "^4.2.21",
+    "react-tooltip": "^5.26.4",
     "readable-stream": "^4.5.2",
     "solc": "^0.8.23-fixed",
     "tailwind-merge": "^2.2.0",