wallet sidebar: add relative time from fill tooltip

renegade-fi · Nov 16, 2024 · ab2e79c · ab2e79c
1 parent 2068a2e
commit ab2e79c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 38 deletions.
diff --git a/app/components/track-last-visit.tsx b/app/components/track-last-visit.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect } from "react"
+import React from "react"
 
 import { useLocalStorage } from "usehooks-ts"
 
@@ -20,11 +20,17 @@ export function useLastVisit() {
 export function TrackLastVisit() {
   const { setLastVisit } = useLastVisit()
 
-  useEffect(() => {
+  React.useEffect(() => {
     const handleBeforeUnload = () => {
-      //   setLastVisit(Date.now())
+      setLastVisit(Date.now())
     }
 
+    // Log initial state
+    console.debug(
+      `[LastVisit] Component mounted, initial wasHidden:`,
+      document.hidden,
+    )
+
     window.addEventListener("beforeunload", handleBeforeUnload)
 
     return () => {

diff --git a/app/components/wallet-sidebar/hooks/use-viewed-fills.ts b/app/components/wallet-sidebar/hooks/use-viewed-fills.ts
@@ -18,36 +18,16 @@ export function useViewedFills() {
   )
 
   const markFillAsViewed = (fillId: FillIdentifier) => {
-    console.debug(`[useViewedFills] Marking fill as viewed:`, {
-      fillId,
-      wasAlreadyViewed: viewedFills.includes(fillId),
-      currentViewedFills: viewedFills,
-    })
-
     if (!viewedFills.includes(fillId)) {
       setViewedFills([...viewedFills, fillId])
-      console.debug(`[useViewedFills] Updated viewed fills:`, [
-        ...viewedFills,
-        fillId,
-      ])
     }
   }
 
   const isFillViewed = (fillId: FillIdentifier) => {
     const isViewed = viewedFills.includes(fillId)
-    console.debug(`[useViewedFills] Checking if fill is viewed:`, {
-      fillId,
-      isViewed,
-      currentViewedFills: viewedFills,
-    })
     return isViewed
   }
 
-  console.debug(
-    `[useViewedFills] Hook rendered with viewed fills:`,
-    viewedFills,
-  )
-
   return {
     viewedFills,
     markFillAsViewed,

diff --git a/app/components/wallet-sidebar/recent-fills-menu-item.tsx b/app/components/wallet-sidebar/recent-fills-menu-item.tsx
@@ -20,9 +20,14 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from "@/components/ui/sidebar"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 import { amountTimesPrice } from "@/hooks/use-usd-price"
-import { formatCurrencyFromString } from "@/lib/format"
+import { formatCurrencyFromString, formatRelativeTimestamp } from "@/lib/format"
 import { createPriceQueryKey } from "@/lib/query"
 
 import { useFilteredFills } from "./hooks/use-filtered-fills"
@@ -54,7 +59,7 @@ export function RecentFillsMenuItem() {
           <SidebarMenuSub>
             {filteredOrders.map((order) => (
               <React.Fragment key={order.id}>
-                {order.fills.map((fill, index) => {
+                {order.fills.map((fill) => {
                   const isBuy = order.data.side === "Buy"
                   const token = Token.findByAddress(order.data.base_mint)
                   const fillId = generateFillIdentifier(
@@ -75,19 +80,28 @@ export function RecentFillsMenuItem() {
 
                   return (
                     <SidebarMenuSubItem key={fillId}>
-                      <OrderDetailsSheet
-                        key={fillId}
-                        order={order}
-                        onOpenChange={(isOpen) => {
-                          if (!isOpen) {
-                            markFillAsViewed(fillId)
-                          }
-                        }}
-                      >
-                        <SidebarMenuSubButton className="cursor-pointer">
-                          {`${isBuy ? "Bought" : "Sold"} ${formattedUsdValue} of ${token?.ticker}`}
-                        </SidebarMenuSubButton>
-                      </OrderDetailsSheet>
+                      <Tooltip>
+                        <OrderDetailsSheet
+                          key={fillId}
+                          order={order}
+                          onOpenChange={(isOpen) => {
+                            if (!isOpen) {
+                              markFillAsViewed(fillId)
+                            }
+                          }}
+                        >
+                          <TooltipTrigger asChild>
+                            <SidebarMenuSubButton className="cursor-default">
+                              {`${isBuy ? "Bought" : "Sold"} ${formattedUsdValue} of ${token?.ticker}`}
+                            </SidebarMenuSubButton>
+                          </TooltipTrigger>
+                        </OrderDetailsSheet>
+                        <TooltipContent>
+                          {formatRelativeTimestamp(
+                            Number(fill.price.timestamp),
+                          )}
+                        </TooltipContent>
+                      </Tooltip>
                     </SidebarMenuSubItem>
                   )
                 })}