From 6798a6fcbb5d8ab22f2a2d2fc6723e56f2f722d0 Mon Sep 17 00:00:00 2001
From: Ryan Martin <rmrt1n@users.noreply.github.com>
Date: Fri, 18 Oct 2024 01:33:23 +0700
Subject: [PATCH] feat: ui updates

---
 src/components/header.tsx     |  6 +++---
 src/lib/query-options.ts      |  6 ++++--
 src/routes/_cardinal.tsx      |  2 +-
 src/routes/_jaeger.jaeger.tsx | 36 +++++++++++++++++++++++++++++++----
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 7be00bd..1f399a2 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -33,7 +33,7 @@ export function Header() {
   return (
     <header className="border-b">
       <nav className="flex items-center justify-between px-3 h-12">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-6">
           <img src={logoLight} width={32} height={32} className="dark:hidden" />
           <img src={logoDark} width={32} height={32} className="hidden dark:block" />
           {links.map((link) => (
@@ -41,8 +41,8 @@ export function Header() {
               key={link.href}
               to={link.href}
               className={cn(
-                buttonVariants({ variant: location === link.href ? 'default' : 'outline' }),
-                'px-4 py-2 h-8',
+                'text-sm font-medium transition-colors hover:text-primary',
+                location === link.href ? 'text-primary' : 'text-muted-foreground',
               )}
             >
               {link.title}
diff --git a/src/lib/query-options.ts b/src/lib/query-options.ts
index 47b12d5..54f3a0f 100644
--- a/src/lib/query-options.ts
+++ b/src/lib/query-options.ts
@@ -238,8 +238,10 @@ function getDurationMicroSeconds(lookback: string) {
     h: 60 * 60,
     d: 60 * 60 * 24,
   }
-  const seconds = lookback[lookback.length - 1]
-  return lookupSeconds[seconds] * 1_000_000
+  const unit = lookback[lookback.length - 1]
+  const unitToSeconds = lookupSeconds[unit]
+  const seconds = parseInt(lookback.slice(0, lookback.length))
+  return seconds * unitToSeconds * 1_000_000
 }
 
 // since we're embedding an iframe, instead of fetching the page here, we're just
diff --git a/src/routes/_cardinal.tsx b/src/routes/_cardinal.tsx
index 90c56ec..74dc8e9 100644
--- a/src/routes/_cardinal.tsx
+++ b/src/routes/_cardinal.tsx
@@ -34,7 +34,7 @@ function CardinalLayout() {
     const sync = async () => {
       try {
         // syncs local personas with cardinal's. this is needed for running with `world cardinal start`,
-        // where the state is persisted accross restarts. this is needed to keep track of the last nonce
+        // where the state is persisted across restarts. this is needed to keep track of the last nonce
         // used by each signer.
         const entities = await queryClient.fetchQuery(
           syncStateQueryOptions({ cardinalUrl, isCardinalConnected }),
diff --git a/src/routes/_jaeger.jaeger.tsx b/src/routes/_jaeger.jaeger.tsx
index 4112362..3b463bc 100644
--- a/src/routes/_jaeger.jaeger.tsx
+++ b/src/routes/_jaeger.jaeger.tsx
@@ -1,7 +1,9 @@
+import { Button } from '@/components/ui/button'
+import { useToast } from '@/components/ui/use-toast'
 import { useCardinal } from '@/lib/cardinal-provider'
 import { useQuery } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
-import { Unlink } from 'lucide-react'
+import { Clipboard, Unlink } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
 export const Route = createFileRoute('/_jaeger/jaeger')({
@@ -12,6 +14,7 @@ function Jaeger() {
   const { jaegerUrl } = useCardinal()
   const { data: url } = useQuery({ queryKey: ['jaegerSearch'], enabled: false })
   const [isJaegerRunning, setIsJaegerRunning] = useState(false)
+  const { toast } = useToast()
 
   useEffect(() => {
     const ping = async () => {
@@ -26,20 +29,45 @@ function Jaeger() {
   }, [jaegerUrl])
 
   const defaultUrl = `${jaegerUrl}/?uiEmbed=v0`
+  const telemetryCommand = 'world cardinal start --telemetry'
+
+  const handleCopyToClipboard = () => {
+    navigator.clipboard.writeText(telemetryCommand).then(() =>
+      toast({
+        title: 'Copied to clipboard',
+      }),
+    )
+  }
 
   return (
     <>
       {!isJaegerRunning ? (
         <div className="flex flex-col gap-4 items-center h-full pt-[21.5rem]">
           <Unlink size={40} strokeWidth={2.5} className="text-muted-foreground" />
-          <div className="space-y-2 text-center">
+          <div className="flex flex-col items-center gap-2 max-w-md">
             <p className="text-lg font-semibold">Not Connected</p>
-            <p className="text-muted-foreground">Make sure you have a running Jaeger instance!</p>
+            <p className="text-muted-foreground">
+              To enable Jaeger, set{' '}
+              <code className="text-sm font-bold">NAKAMA_TRACE_ENABLED=true</code>, in your{' '}
+              <code className="text-sm font-bold">world.toml</code> file and run this command:
+            </p>
+            <pre className="flex items-center justify-between gap-2 w-full px-4 py-2 rounded-lg text-sm bg-primary text-primary-foreground dark:bg-primary-foreground dark:text-primary">
+              <code>
+                <code className="select-none text-green-400">$ </code>
+                {telemetryCommand}
+              </code>
+              <Button variant="ghost" size="icon" className="dark" onClick={handleCopyToClipboard}>
+                <Clipboard size={17} />
+              </Button>
+            </pre>
           </div>
         </div>
       ) : (
         <div className="p-2 bg-white h-full border border-border rounded-md">
-          <iframe src={url && typeof url === 'string' ? url : defaultUrl} className="w-full h-full" />
+          <iframe
+            src={url && typeof url === 'string' ? url : defaultUrl}
+            className="w-full h-full"
+          />
         </div>
       )}
     </>