feat: wallet level module

apps/renderer/src/models/types.ts

@@ -116,3 +116,5 @@ export type ActionsInput = {
 }[]
 
 export const TransactionTypes = ["mint", "purchase", "tip", "withdraw"] as const
+
+export type WalletModel = ExtractBizResponse<typeof apiClient.wallets.$get>["data"][number]

apps/renderer/src/modules/power/ranking/index.tsx

@@ -18,6 +18,7 @@ import { cn } from "~/lib/utils"
 import { usePresentUserProfileModal } from "~/modules/profile/hooks"
 import { SettingSectionTitle } from "~/modules/settings/section"
 import { Balance } from "~/modules/wallet/balance"
+import { Level } from "~/modules/wallet/level"
 import type { useWalletTransactions } from "~/queries/wallet"
 import { useWalletRanking } from "~/queries/wallet"
 
@@ -66,12 +67,20 @@ export const PowerRanking: Component = ({ className }) => {
                   <TableRow>
                     <TableCell className="py-2">{!!row.rank && rankNumber(row.rank)}</TableCell>
                     <TableCell className="py-2">
-                      <UserRenderer user={row.user} />
+                      <UserRenderer
+                        user={row.user}
+                        avatarClassName={!!row.rank && row.rank <= 3 ? "size-5" : "size-4"}
+                      />
                     </TableCell>
                     <TableCell className="py-2">
-                      <Balance>{row.powerToken}</Balance>
+                      <div className="flex items-center gap-1">
+                        <i className="i-mgc-power align-text-bottom text-accent" />
+                        <Balance>{row.powerToken}</Balance>
+                      </div>
+                    </TableCell>
+                    <TableCell className="py-2">
+                      {!!row.level && <Level level={row.level} />}
                     </TableCell>
-                    <TableCell className="py-2">{row.level}</TableCell>
                   </TableRow>
                 </Fragment>
               )
@@ -88,10 +97,12 @@ export const PowerRanking: Component = ({ className }) => {
 
 const UserRenderer = ({
   user,
+  avatarClassName,
 }: {
   user?: NonNullable<ReturnType<typeof useWalletTransactions>["data"]>[number][
     | "fromUser"
     | "toUser"]
+  avatarClassName?: string
 }) => {
   const { t } = useTranslation("settings")
   const me = useWhoami()
@@ -107,7 +118,7 @@ const UserRenderer = ({
       }}
       className="flex w-full min-w-0 cursor-button items-center gap-2"
     >
-      <Avatar className="aspect-square size-6 duration-200 animate-in fade-in-0">
+      <Avatar className={cn("aspect-square duration-200 animate-in fade-in-0", avatarClassName)}>
         <AvatarImage src={replaceImgUrlIfNeed(user?.image || undefined)} />
         <AvatarFallback>{name?.slice(0, 2)}</AvatarFallback>
       </Avatar>

apps/renderer/src/modules/user/ProfileButton.tsx

@@ -8,6 +8,7 @@ import { useSignOut } from "~/hooks/biz/useSignOut"
 import { useMeasure } from "~/hooks/common"
 import { nextFrame } from "~/lib/dom"
 import { cn } from "~/lib/utils"
+import type { WalletModel } from "~/models"
 import { useAchievementModal } from "~/modules/achievement/hooks"
 import { usePresentUserProfileModal } from "~/modules/profile/hooks"
 import { useSettingModal } from "~/modules/settings/modal/hooks"
@@ -25,6 +26,7 @@ import {
   DropdownMenuTrigger,
 } from "../../components/ui/dropdown-menu/dropdown-menu"
 import { RootPortal } from "../../components/ui/portal"
+import { Level } from "../wallet/level"
 import type { LoginProps } from "./LoginButton"
 import { LoginButton } from "./LoginButton"
 import { UserAvatar } from "./UserAvatar"
@@ -42,6 +44,10 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
 
   const navigate = useNavigate()
 
+  const wallet = useWallet()
+  const { isLoading: isLoadingWallet } = wallet
+  const myWallet = wallet.data?.[0]
+
   if (status !== "authenticated") {
     return <LoginButton {...props} />
   }
@@ -74,8 +80,8 @@ export const ProfileButton: FC<LoginProps> = memo((props) => {
             }}
           >
             <div className="flex w-full items-center justify-between gap-6 px-1.5 font-semibold">
-              <PowerButton />
-              <LevelButton />
+              <PowerButton isLoading={isLoadingWallet} myWallet={myWallet} />
+              <Level level={myWallet?.level || 0} isLoading={isLoadingWallet} />
             </div>
           </DropdownMenuItem>
 
@@ -197,31 +203,15 @@ const TransitionAvatar = forwardRef<
   )
 })
 
-function PowerButton() {
-  const wallet = useWallet()
-  const { isLoading } = wallet
-  const myWallet = wallet.data?.[0]
-
+function PowerButton({ isLoading, myWallet }: { isLoading: boolean; myWallet?: WalletModel }) {
   return (
     <div className="flex items-center gap-1">
       <i className="i-mgc-power text-accent" />
       {isLoading ? (
         <span className="h-3 w-8 animate-pulse rounded-xl bg-theme-inactive" />
       ) : (
-        <Balance>
-          {BigInt(myWallet?.dailyPowerToken || 0n) + BigInt(myWallet?.cashablePowerToken || 0n)}
-        </Balance>
+        <Balance>{BigInt(myWallet?.powerToken || 0n)}</Balance>
       )}
     </div>
   )
 }
-
-function LevelButton() {
-  return (
-    <div className="flex items-center gap-1">
-      <i className="i-mgc-vip-2-cute-fi text-accent" />
-      <span>Lv.1</span>
-      <sub className="-translate-y-px text-[0.6rem] font-normal">x1</sub>
-    </div>
-  )
-}

apps/renderer/src/modules/wallet/level.tsx

@@ -0,0 +1,17 @@
+export const multiples = [0.1, 1, 2, 5, 18]
+
+export const Level = ({ level, isLoading }: { level: number; isLoading?: boolean }) => {
+  return (
+    <div className="flex items-center gap-1">
+      <i className="i-mgc-vip-2-cute-fi text-accent" />
+      {isLoading ? (
+        <span className="h-3 w-8 animate-pulse rounded-xl bg-theme-inactive" />
+      ) : (
+        <>
+          <span>Lv.{level}</span>
+          <sub className="-translate-y-px text-[0.6rem] font-normal">x{multiples[level]}</sub>
+        </>
+      )}
+    </div>
+  )
+}