From ca381cebf81cc745e56fe35811004d89b55609ba Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Wed, 4 Sep 2024 16:26:30 +0800
Subject: [PATCH] feat: auto claim daily `POWER`, and update table style

Signed-off-by: Innei <i@innei.in>
---
 eslint.config.mjs                             |  1 +
 .../src/components/ui/datetime/index.tsx      | 20 +++++++++----
 src/renderer/src/hooks/biz/useDailyTask.ts    | 17 +++++++++++
 .../tabs/wallet/transaction-section/index.tsx | 29 +++++++++++++------
 src/renderer/src/pages/(main)/layout.tsx      |  4 ++-
 5 files changed, 56 insertions(+), 15 deletions(-)
 create mode 100644 src/renderer/src/hooks/biz/useDailyTask.ts

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 2dd995663..06577cf1a 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -24,6 +24,7 @@ export default defineConfig(
     rules: {
       "unicorn/prefer-math-trunc": "off",
       "@eslint-react/no-clone-element": 0,
+      "@eslint-react/hooks-extra/no-direct-set-state-in-use-effect": 0,
       "no-restricted-syntax": 0,
       "no-restricted-globals": [
         "error",
diff --git a/src/renderer/src/components/ui/datetime/index.tsx b/src/renderer/src/components/ui/datetime/index.tsx
index 2f8d9d587..625cd5c93 100644
--- a/src/renderer/src/components/ui/datetime/index.tsx
+++ b/src/renderer/src/components/ui/datetime/index.tsx
@@ -10,12 +10,13 @@ import {
   TooltipTrigger,
 } from "../tooltip"
 
+const formatTemplateString = "lll"
 const formatTime = (date: string | Date, relativeBeforeDay?: number) => {
   if (
     relativeBeforeDay &&
     Math.abs(dayjs(date).diff(new Date(), "d")) > relativeBeforeDay
   ) {
-    return dayjs(date).format("lll")
+    return dayjs(date).format(formatTemplateString)
   }
   return dayjs
     .duration(dayjs(date).diff(dayjs(), "minute"), "minute")
@@ -73,17 +74,20 @@ export const RelativeTime: FC<{
       clearTimeout(timerRef.current)
     }
   }, [props.date, displayAbsoluteTimeAfterDay])
+  const formated = dayjs(props.date).format(formatTemplateString)
 
+  if (formated === relative) {
+    return <>{relative}</>
+  }
   return (
     <Tooltip>
-
       {/* https://github.com/radix-ui/primitives/issues/2248#issuecomment-2147056904 */}
       <TooltipTrigger onFocusCapture={stopPropagation}>
         {relative}
       </TooltipTrigger>
 
       <TooltipPortal>
-        <TooltipContent>{dayjs(props.date).format("llll")}</TooltipContent>
+        <TooltipContent>{formated}</TooltipContent>
       </TooltipPortal>
     </Tooltip>
   )
@@ -135,11 +139,17 @@ export const RelativeDay = ({ date }: { date: Date }) => {
     }
   }, [date])
 
+  const formated = dayjs(date).format(formatTemplateString)
+  if (formated === dateString) {
+    return <>{dateString}</>
+  }
   return (
     <Tooltip>
-      <TooltipTrigger onFocusCapture={stopPropagation}>{dateString}</TooltipTrigger>
+      <TooltipTrigger onFocusCapture={stopPropagation}>
+        {dateString}
+      </TooltipTrigger>
       <TooltipPortal>
-        <TooltipContent>{dayjs(date).format("llll")}</TooltipContent>
+        <TooltipContent>{formated}</TooltipContent>
       </TooltipPortal>
     </Tooltip>
   )
diff --git a/src/renderer/src/hooks/biz/useDailyTask.ts b/src/renderer/src/hooks/biz/useDailyTask.ts
new file mode 100644
index 000000000..1229359cf
--- /dev/null
+++ b/src/renderer/src/hooks/biz/useDailyTask.ts
@@ -0,0 +1,17 @@
+import { getStorageNS } from "@renderer/lib/ns"
+import { useClaimWalletDailyRewardMutation } from "@renderer/queries/wallet"
+import { useEffect } from "react"
+
+const CLAIM_DAILY_KEY = getStorageNS("claimDaily")
+export const useDailyTask = () => {
+  const { mutateAsync: claimDaily } = useClaimWalletDailyRewardMutation()
+
+  useEffect(() => {
+    const today = new Date().toDateString()
+
+    if (localStorage.getItem(CLAIM_DAILY_KEY) === today) return
+    claimDaily().finally(() => {
+      localStorage.setItem(CLAIM_DAILY_KEY, today)
+    })
+  }, [claimDaily])
+}
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 13837aea7..64be436cf 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
@@ -5,6 +5,7 @@ import {
   AvatarFallback,
   AvatarImage,
 } from "@renderer/components/ui/avatar"
+import { MotionButtonBase } from "@renderer/components/ui/button"
 import { RelativeTime } from "@renderer/components/ui/datetime"
 import { LoadingCircle } from "@renderer/components/ui/loading"
 import {
@@ -16,6 +17,7 @@ import {
   TableRow,
 } from "@renderer/components/ui/table"
 import { cn } from "@renderer/lib/utils"
+import { usePresentUserProfileModal } from "@renderer/modules/profile/hooks"
 import { SettingSectionTitle } from "@renderer/modules/settings/section"
 import { Balance } from "@renderer/modules/wallet/balance"
 import { useWallet, useWalletTransactions } from "@renderer/queries/wallet"
@@ -53,13 +55,13 @@ export const TransactionsSection = () => {
               <TableHead className="text-center" size="sm">
                 Amount
               </TableHead>
-              <TableHead className="pl-5" size="sm">
+              <TableHead className="pl-8" size="sm">
                 From
               </TableHead>
-              <TableHead className="pl-5" size="sm">
+              <TableHead className="pl-8" size="sm">
                 To
               </TableHead>
-              <TableHead className="text-center" size="sm">
+              <TableHead className="pl-6" size="sm">
                 Date
               </TableHead>
             </TableRow>
@@ -76,14 +78,14 @@ export const TransactionsSection = () => {
                     amount={row.powerToken}
                   />
                 </TableCell>
-                <TableCell align="center" size="sm">
+                <TableCell align="left" className="px-3" size="sm">
                   <UserRenderer user={row.fromUser} />
                 </TableCell>
-                <TableCell align="center" size="sm">
+                <TableCell align="left" className="px-3" size="sm">
                   <UserRenderer user={row.toUser} />
                 </TableCell>
-                {/* <TableCell align="center" size="sm"><FeedRenderer feed={row.toFeed} /></TableCell> */}
-                <TableCell align="center" size="sm">
+
+                <TableCell align="left" size="sm" className="pl-6">
                   <RelativeTime date={row.createdAt} />
                 </TableCell>
               </TableRow>
@@ -151,8 +153,17 @@ const UserRenderer = ({
 
   const name = isMe ? "You" : user?.name || APP_NAME
 
+  const presentUserModal = usePresentUserProfileModal()
   return (
-    <div className="flex">
+    <MotionButtonBase
+      onClick={() => {
+        if (user?.id) presentUserModal(user.id)
+      }}
+      className={cn(
+        "flex items-center",
+        user?.id ? "cursor-pointer" : "cursor-default",
+      )}
+    >
       {name === APP_NAME ? (
         <Logo className="aspect-square size-4" />
       ) : (
@@ -165,6 +176,6 @@ const UserRenderer = ({
       <div className="ml-1">
         {isMe ? <span className="font-bold">You</span> : name}
       </div>
-    </div>
+    </MotionButtonBase>
   )
 }
diff --git a/src/renderer/src/pages/(main)/layout.tsx b/src/renderer/src/pages/(main)/layout.tsx
index ff26293f0..a2e3c9e82 100644
--- a/src/renderer/src/pages/(main)/layout.tsx
+++ b/src/renderer/src/pages/(main)/layout.tsx
@@ -11,6 +11,7 @@ import { NoopChildren } from "@renderer/components/ui/modal/stacked/utils"
 import { RootPortal } from "@renderer/components/ui/portal"
 import { HotKeyScopeMap } from "@renderer/constants"
 import { shortcuts } from "@renderer/constants/shortcuts"
+import { useDailyTask } from "@renderer/hooks/biz/useDailyTask"
 import { preventDefault } from "@renderer/lib/dom"
 import { cn } from "@renderer/lib/utils"
 import { EnvironmentIndicator } from "@renderer/modules/app/EnvironmentIndicator"
@@ -67,6 +68,8 @@ export function Component() {
 
   const containerRef = useRef<HTMLDivElement>(null)
 
+  useDailyTask()
+
   return (
     <div
       className="flex h-screen overflow-hidden"
@@ -181,7 +184,6 @@ const FeedResponsiveResizerContainer = ({
         setDelayShowSplitter(true)
       }, 200)
     } else {
-      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setDelayShowSplitter(false)
     }