playground: remove json hover

river-build · Sep 6, 2024 · bdd4a5e · bdd4a5e
1 parent e34166d
commit bdd4a5e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 49 deletions.
diff --git a/packages/playground/src/components/blocks/timeline.tsx b/packages/playground/src/components/blocks/timeline.tsx
@@ -1,7 +1,5 @@
 import {
     useDisplayName,
-    useEnsAddress,
-    useNft,
     useSendMessage,
     useSyncAgent,
     useTimeline,
@@ -17,7 +15,6 @@ import { useCurrentChannelId } from '@/hooks/current-channel'
 import { cn } from '@/utils'
 import { Form, FormControl, FormField, FormItem, FormMessage } from '../ui/form'
 import { Button } from '../ui/button'
-import { JsonHover } from '../utils/json-hover'
 import { Input } from '../ui/input'
 import { ScrollArea } from '../ui/scroll-area'
 
@@ -30,9 +27,7 @@ export const Timeline = () => {
             <ScrollArea className="h-[calc(100dvh-172px)]">
                 <div className="flex flex-col gap-1.5">
                     {timeline.map((event) => (
-                        <JsonHover key={event.eventId} data={event}>
-                            <Message event={event} />
-                        </JsonHover>
+                        <Message key={event.eventId} event={event} />
                     ))}
                 </div>
             </ScrollArea>
@@ -89,25 +84,19 @@ const Message = ({ event }: { event: TimelineEvent }) => {
     )
     const { username } = useUsername(member)
     const { displayName } = useDisplayName(member)
-    const { ensAddress } = useEnsAddress(member)
-    const { nft } = useNft(member)
     const prettyDisplayName = displayName || username
 
     return (
         <div className="flex gap-1">
             {prettyDisplayName && (
-                <JsonHover data={{ username, displayName, ensAddress, nft }}>
-                    <span
-                        className={cn(
-                            'font-semibold',
-                            event.creatorUserId === sync.userId
-                                ? 'text-sky-500'
-                                : 'text-purple-500',
-                        )}
-                    >
-                        {prettyDisplayName}:
-                    </span>
-                </JsonHover>
+                <span
+                    className={cn(
+                        'font-semibold',
+                        event.creatorUserId === sync.userId ? 'text-sky-500' : 'text-purple-500',
+                    )}
+                >
+                    {prettyDisplayName}:
+                </span>
             )}
             <span>{event.text}</span>
         </div>

diff --git a/packages/playground/src/components/utils/json-hover.tsx b/packages/playground/src/components/utils/json-hover.tsx
diff --git a/packages/playground/src/routes/t/channels.tsx b/packages/playground/src/routes/t/channels.tsx
@@ -5,7 +5,6 @@ import { ArrowLeftIcon } from '@radix-ui/react-icons'
 import { GridSidePanel } from '@/components/layout/grid-side-panel'
 import { SpaceProvider } from '@/hooks/current-space'
 import { CreateChannel } from '@/components/form/channel/create'
-import { JsonHover } from '@/components/utils/json-hover'
 import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 
@@ -73,12 +72,10 @@ const ChannelInfo = ({
     const { data: channel } = useChannel(spaceId, channelId)
 
     return (
-        <JsonHover data={channel}>
-            <div>
-                <Button variant="outline" onClick={() => onChannelChange(channelId)}>
-                    {channel.metadata?.name || 'Unnamed Channel'}
-                </Button>
-            </div>
-        </JsonHover>
+        <div>
+            <Button variant="outline" onClick={() => onChannelChange(channelId)}>
+                {channel.metadata?.name || 'Unnamed Channel'}
+            </Button>
+        </div>
     )
 }
diff --git a/packages/playground/src/routes/t/spaces.tsx b/packages/playground/src/routes/t/spaces.tsx
@@ -3,7 +3,6 @@ import { useCallback } from 'react'
 import { useSpace, useUserSpaces } from '@river-build/react-sdk'
 import { GridSidePanel } from '@/components/layout/grid-side-panel'
 import { Button } from '@/components/ui/button'
-import { JsonHover } from '@/components/utils/json-hover'
 import { CreateSpace } from '@/components/form/space/create'
 import { JoinSpace } from '@/components/form/space/join'
 import { ScrollArea } from '@/components/ui/scroll-area'
@@ -64,12 +63,10 @@ const SpaceInfo = ({
 }) => {
     const { data: space } = useSpace(spaceId)
     return (
-        <JsonHover data={space}>
-            <div>
-                <Button variant="outline" onClick={() => onSpaceChange(space.id)}>
-                    {space.metadata?.name || 'Unnamed Space'}
-                </Button>
-            </div>
-        </JsonHover>
+        <div>
+            <Button variant="outline" onClick={() => onSpaceChange(space.id)}>
+                {space.metadata?.name || 'Unnamed Space'}
+            </Button>
+        </div>
     )
 }