From b13f21fc7ee8a808addbada0aa6f4b3b60b0a973 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Thu, 11 Jul 2024 16:21:20 +0800
Subject: [PATCH] fix: wallet tooltip bug

Signed-off-by: Innei <i@innei.in>
---
 .gitignore                                    |  1 +
 .../tabs/wallet/my-wallet-section/index.tsx   | 59 ++++++++++++++-----
 .../tabs/wallet/transaction-section/index.tsx | 14 ++---
 3 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/.gitignore b/.gitignore
index 749613ac32..499d72cd64 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ out
 
 # Sentry Config File
 .env.sentry-build-plugin
+.vercel
diff --git a/src/renderer/src/modules/settings/tabs/wallet/my-wallet-section/index.tsx b/src/renderer/src/modules/settings/tabs/wallet/my-wallet-section/index.tsx
index b5bfb02a15..813506af8d 100644
--- a/src/renderer/src/modules/settings/tabs/wallet/my-wallet-section/index.tsx
+++ b/src/renderer/src/modules/settings/tabs/wallet/my-wallet-section/index.tsx
@@ -1,7 +1,12 @@
 import { useUser } from "@renderer/atoms/user"
 import { Divider } from "@renderer/components/ui/divider"
 import { LoadingCircle } from "@renderer/components/ui/loading"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@renderer/components/ui/tooltip"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from "@renderer/components/ui/tooltip"
 import { Balance } from "@renderer/components/ui/wallet/balance"
 import { SettingSectionTitle } from "@renderer/modules/settings/section"
 import { useWallet } from "@renderer/queries/wallet"
@@ -17,7 +22,9 @@ export const MyWalletSection = () => {
   return (
     <div>
       {wallet.isPending ? (
-        <LoadingCircle size="large" />
+        <div className="center absolute inset-0 flex">
+          <LoadingCircle size="large" className="-translate-y-full" />
+        </div>
       ) : !myWallet ?
           (
             <CreateWallet />
@@ -27,35 +34,57 @@ export const MyWalletSection = () => {
               <div>
                 <SettingSectionTitle title="Balance" />
                 <div className="flex items-center justify-between">
-                  <Balance className="text-xl font-bold text-theme-accent">{BigInt(myWallet.dailyPowerToken || 0n) + BigInt(myWallet.cashablePowerToken || 0n)}</Balance>
+                  <Balance className="text-xl font-bold text-theme-accent">
+                    {BigInt(myWallet.dailyPowerToken || 0n) +
+                    BigInt(myWallet.cashablePowerToken || 0n)}
+                  </Balance>
                   <ClaimDailyReward />
                 </div>
                 <Divider className="my-4" />
                 <Tooltip>
                   <TooltipTrigger className="block">
                     <div className="flex flex-row items-center gap-x-2 text-xs text-zinc-600 dark:text-neutral-400">
-                      <span className="">Daily Power</span>
+                      <span className="flex w-[120px] items-center gap-1 text-left">
+                        Daily Power
+                        <i className="i-mingcute-question-line" />
+                      </span>
                       <Balance>{myWallet.dailyPowerToken}</Balance>
-                      <i className="i-mingcute-question-line" />
+
                     </div>
                   </TooltipTrigger>
-                  <TooltipContent>
-                    <p>1. Daily Power can only be used for tips.</p>
-                    <p>2. It comes from the Power you claim for free every day..</p>
-                  </TooltipContent>
+                  <TooltipPortal>
+                    <TooltipContent align="start" className="z-[999]">
+                      <p>1. Daily Power can only be used for tips.</p>
+                      <p>
+                        2. It comes from the Power you claim for free every day..
+                      </p>
+                    </TooltipContent>
+                  </TooltipPortal>
                 </Tooltip>
                 <Tooltip>
                   <TooltipTrigger className="block">
                     <div className="flex flex-row items-center gap-x-2 text-xs text-zinc-600 dark:text-neutral-400">
-                      Cashable Power
+                      <span className="flex w-[120px] items-center gap-1 text-left">
+                        Cashable Power
+                        {" "}
+                        <i className="i-mingcute-question-line" />
+                      </span>
+
                       <Balance>{myWallet.cashablePowerToken}</Balance>
-                      <i className="i-mingcute-question-line" />
                     </div>
                   </TooltipTrigger>
-                  <TooltipContent>
-                    <p>1. You can transfer Cashable Power to your wallet and trade freely.</p>
-                    <p>2. It comes from the Power you recharge and the tips you receive.</p>
-                  </TooltipContent>
+                  <TooltipPortal>
+                    <TooltipContent align="start" className="z-[999]">
+                      <p>
+                        1. You can transfer Cashable Power to your wallet and trade
+                        freely.
+                      </p>
+                      <p>
+                        2. It comes from the Power you recharge and the tips you
+                        receive.
+                      </p>
+                    </TooltipContent>
+                  </TooltipPortal>
                 </Tooltip>
               </div>
             </div>
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 78d26e22a9..e51227d37a 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
@@ -21,7 +21,7 @@ export const TransactionsSection = () => {
   // if (transactions.data?.length === 0) return <div className="text-theme-disabled">No transactions</div>
 
   return (
-    <div>
+    <div className="mt-8">
       <SettingSectionTitle title="Transactions" />
 
       <div className="overflow-x-auto">
@@ -114,22 +114,18 @@ const UserRenderer = ({ user }: { user?: NonNullable<ReturnType<typeof useWallet
   const me = useUser()
   const isMe = user?.id === me?.id
 
+  const name = isMe ? "You" : user?.name || "SYSTEM"
+
   return (
     <div className="center">
       <Avatar className="aspect-square size-4">
         <AvatarImage src={user?.image || undefined} />
-        <AvatarFallback>{user?.name?.slice(0, 2)}</AvatarFallback>
+        <AvatarFallback>{name?.slice(0, 2)}</AvatarFallback>
       </Avatar>
 
       <div className="ml-1">
-        {isMe ? <span className="font-bold">You</span> : user?.name || "NULL"}
+        {isMe ? <span className="font-bold">You</span> : name}
       </div>
     </div>
   )
 }
-
-// const FeedRenderer = ({ feed }: { feed: NonNullable<ReturnType<typeof useWalletTransactions>["data"]>[number]["toFeed"] }) => (
-//   <div className="center line-clamp-1 truncate">
-//     {feed?.title ?? "-"}
-//   </div>
-// )