feat: Add docs tooltip to constants

src/components/DocsRenderer.tsx

@@ -8,7 +8,7 @@ export const DocsRenderer: FC<{ docs: string[]; className?: string }> = ({
   if (!docs.length) return null
   if (docs.length === 1) {
     return (
-      <div className="text-sm text-slate-400">
+      <div className={twMerge("text-sm text-slate-400", className)}>
         <p>{docs[0]}</p>
       </div>
     )
@@ -20,7 +20,7 @@ export const DocsRenderer: FC<{ docs: string[]; className?: string }> = ({
     <div
       className={twMerge(
         "text-slate-400 max-h-20 overflow-auto",
-        normalizedDocs.length > 1 && "text-sm font-mono whitespace-pre",
+        normalizedDocs.length > 1 && "text-xs font-mono whitespace-pre",
         className,
       )}
     >

src/components/Tooltip.tsx

@@ -0,0 +1,32 @@
+import {
+  Arrow,
+  Content,
+  Portal,
+  Provider,
+  Root,
+  Trigger,
+} from "@radix-ui/react-tooltip"
+import { ComponentProps, FC, PropsWithChildren, ReactNode } from "react"
+
+export const TooltipProvider: FC<PropsWithChildren> = ({ children }) => (
+  <Provider delayDuration={500}>{children}</Provider>
+)
+
+export const Tooltip: FC<
+  PropsWithChildren & {
+    content: ReactNode
+  } & ComponentProps<typeof Root>
+> = ({ children, content, ...props }) =>
+  content ? (
+    <Root {...props}>
+      <Trigger asChild>{children}</Trigger>
+      <Portal>
+        <Content className="bg-white rounded py-1 px-2 shadow">
+          {content}
+          <Arrow className="fill-white stroke-white" />
+        </Content>
+      </Portal>
+    </Root>
+  ) : (
+    children
+  )

src/main.tsx

@@ -1,13 +1,16 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-import App from "./App.tsx"
-import "./index.css"
 import { BrowserRouter } from "react-router-dom"
+import App from "./App.tsx"
+import { TooltipProvider } from "./components/Tooltip.tsx"
+import "./index.css"
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <BrowserRouter>
-      <App />
+      <TooltipProvider>
+        <App />
+      </TooltipProvider>
     </BrowserRouter>
   </StrictMode>,
 )

src/pages/Constants.tsx

@@ -1,23 +1,20 @@
 import { lookup$ } from "@/chain.state"
-import { SearchableSelect } from "@/components/Select"
-import { withSubscribe } from "@/components/withSuspense"
-import { state, useStateObservable } from "@react-rxjs/core"
-import { FC, useEffect, useState } from "react"
-import { map } from "rxjs"
-import { DocsRenderer } from "@/components/DocsRenderer"
-import { HexString } from "polkadot-api"
-import { ButtonGroup } from "@/components/ButtonGroup"
-import { ValueDisplay } from "./Storage/StorageSubscriptions"
-import {
-  getDynamicBuilder,
-  MetadataLookup,
-} from "@polkadot-api/metadata-builders"
-import { getTypeComplexity } from "@/utils/shape"
 import { ViewCodec } from "@/codec-components/ViewCodec"
-import { CodecComponentType } from "@/lib/codecComponents"
+import { ButtonGroup } from "@/components/ButtonGroup"
 import { ExpandBtn } from "@/components/Expand"
+import { withSubscribe } from "@/components/withSuspense"
+import { CodecComponentType } from "@/lib/codecComponents"
+import { getTypeComplexity } from "@/utils/shape"
+import { getDynamicBuilder } from "@polkadot-api/metadata-builders"
+import { state, useStateObservable } from "@react-rxjs/core"
 import { Dot } from "lucide-react"
+import { HexString } from "polkadot-api"
+import { FC, useState } from "react"
+import { map } from "rxjs"
 import { twMerge } from "tailwind-merge"
+import { ValueDisplay } from "./Storage/StorageSubscriptions"
+import { Tooltip } from "@/components/Tooltip"
+import { DocsRenderer } from "@/components/DocsRenderer"
 
 const metadataConstants$ = state(
   lookup$.pipe(
@@ -69,8 +66,8 @@ const PalletConstants: FC<{
       </div>
       {expanded && (
         <ul>
-          {entries.map(({ name, type, value }) => (
-            <ConstantEntry name={name} type={type} value={value} />
+          {entries.map((props) => (
+            <ConstantEntry key={props.name} {...props} />
           ))}
         </ul>
       )}
@@ -85,11 +82,12 @@ const constantValueProps$ = state(
   null,
 )
 
-const ConstantEntry: FC<{ name: string; type: number; value: HexString }> = ({
-  name,
-  type,
-  value,
-}) => {
+const ConstantEntry: FC<{
+  name: string
+  type: number
+  value: HexString
+  docs: string[]
+}> = ({ name, type, value, docs }) => {
   const props = useStateObservable(constantValueProps$)
   const [expanded, setExpanded] = useState(false)
 
@@ -106,9 +104,18 @@ const ConstantEntry: FC<{ name: string; type: number; value: HexString }> = ({
       onClick={() => setExpanded((e) => !e)}
     >
       {isInline ? <Dot size={16} /> : <ExpandBtn expanded={expanded} />}
-      <div className={isInline ? "text-slate-400" : ""}>
-        {name + (isInline ? ":" : "")}
-      </div>
+      <Tooltip
+        content={
+          docs.length ? (
+            <DocsRenderer docs={docs} className="text-slate-700 max-h-none" />
+          ) : null
+        }
+        disableHoverableContent
+      >
+        <div className={isInline ? "text-slate-400" : ""}>
+          {name + (isInline ? ":" : "")}
+        </div>
+      </Tooltip>
       {isInline ? (
         <ViewCodec
           codecType={type}
@@ -139,7 +146,7 @@ const ConstantValue: FC<{ type: number; decoded: unknown }> = ({
   type,
   decoded,
 }) => {
-  const [mode, setMode] = useState<"json" | "decoded">("decoded")
+  const [mode, setMode] = useState<"json" | "decoded">("json")
 
   return (
     <div className="pl-6 py-2 flex flex-col gap-2 items-start overflow-hidden w-full">