From 6c60dd265245d08d622c59d035d2124285ff68f1 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Mon, 9 Sep 2024 13:44:59 +0800
Subject: [PATCH] fix: wallet table latyout

Signed-off-by: Innei <i@innei.in>
---
 .../src/components/ui/datetime/index.tsx      | 24 +++++++++++++------
 .../tabs/wallet/transaction-section/index.tsx | 22 +++++++++++++++--
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/components/ui/datetime/index.tsx b/src/renderer/src/components/ui/datetime/index.tsx
index 625cd5c93f..228c1918fb 100644
--- a/src/renderer/src/components/ui/datetime/index.tsx
+++ b/src/renderer/src/components/ui/datetime/index.tsx
@@ -11,12 +11,16 @@ import {
 } from "../tooltip"
 
 const formatTemplateString = "lll"
-const formatTime = (date: string | Date, relativeBeforeDay?: number) => {
+const formatTime = (
+  date: string | Date,
+  relativeBeforeDay?: number,
+  template = formatTemplateString,
+) => {
   if (
     relativeBeforeDay &&
     Math.abs(dayjs(date).diff(new Date(), "d")) > relativeBeforeDay
   ) {
-    return dayjs(date).format(formatTemplateString)
+    return dayjs(date).format(template)
   }
   return dayjs
     .duration(dayjs(date).diff(dayjs(), "minute"), "minute")
@@ -47,17 +51,23 @@ const getUpdateInterval = (date: string | Date, relativeBeforeDay?: number) => {
 export const RelativeTime: FC<{
   date: string | Date
   displayAbsoluteTimeAfterDay?: number
+  dateFormatTemplate?: string
 }> = (props) => {
-  const { displayAbsoluteTimeAfterDay = 29 } = props
+  const {
+    displayAbsoluteTimeAfterDay = 29,
+    dateFormatTemplate = formatTemplateString,
+  } = props
   const [relative, setRelative] = useState<string>(() =>
-    formatTime(props.date, displayAbsoluteTimeAfterDay),
+    formatTime(props.date, displayAbsoluteTimeAfterDay, dateFormatTemplate),
   )
 
   const timerRef = useRef<any>(null)
 
   useEffect(() => {
     const updateRelativeTime = () => {
-      setRelative(formatTime(props.date, displayAbsoluteTimeAfterDay))
+      setRelative(
+        formatTime(props.date, displayAbsoluteTimeAfterDay, dateFormatTemplate),
+      )
       const updateInterval = getUpdateInterval(
         props.date,
         displayAbsoluteTimeAfterDay,
@@ -73,8 +83,8 @@ export const RelativeTime: FC<{
     return () => {
       clearTimeout(timerRef.current)
     }
-  }, [props.date, displayAbsoluteTimeAfterDay])
-  const formated = dayjs(props.date).format(formatTemplateString)
+  }, [props.date, displayAbsoluteTimeAfterDay, dateFormatTemplate])
+  const formated = dayjs(props.date).format(dateFormatTemplate)
 
   if (formated === relative) {
     return <>{relative}</>
diff --git a/src/renderer/src/modules/settings/tabs/wallet/transaction-section/index.tsx b/src/renderer/src/modules/settings/tabs/wallet/transaction-section/index.tsx
index 299b4c6203..c230b98ebf 100644
--- a/src/renderer/src/modules/settings/tabs/wallet/transaction-section/index.tsx
+++ b/src/renderer/src/modules/settings/tabs/wallet/transaction-section/index.tsx
@@ -17,6 +17,12 @@ import {
   TableHeader,
   TableRow,
 } from "@renderer/components/ui/table"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from "@renderer/components/ui/tooltip"
 import { cn } from "@renderer/lib/utils"
 import { usePresentUserProfileModal } from "@renderer/modules/profile/hooks"
 import { SettingSectionTitle } from "@renderer/modules/settings/section"
@@ -90,10 +96,22 @@ export const TransactionsSection = () => {
                 </TableCell>
 
                 <TableCell align="left" size="sm" className="pl-6">
-                  <RelativeTime date={row.createdAt} />
+                  <RelativeTime date={row.createdAt} dateFormatTemplate="l" />
                 </TableCell>
                 <TableCell align="left" size="sm" className="pl-6">
-                  <a target="_blank" href={`https://scan.rss3.io/tx/${row.hash}`}>{row.hash.slice(0, 6)}...</a>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <a
+                        target="_blank"
+                        href={`https://scan.rss3.io/tx/${row.hash}`}
+                      >
+                        {row.hash.slice(0, 6)}...
+                      </a>
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                      <TooltipContent>{row.hash}</TooltipContent>
+                    </TooltipPortal>
+                  </Tooltip>
                 </TableCell>
               </TableRow>
             ))}