feat: auto claim daily POWER, and update table style

Signed-off-by: Innei <[email protected]>

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",

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>
   )

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])
+}

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>
   )
 }

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)
     }