feat: display level in power page

apps/renderer/src/modules/power/my-wallet-section/claim-daily-reward.tsx

@@ -4,9 +4,10 @@ import { Trans, useTranslation } from "react-i18next"
 import { Button } from "~/components/ui/button"
 import { Tooltip, TooltipContent } from "~/components/ui/tooltip"
 import { DAILY_CLAIM_AMOUNT } from "~/constants"
+import { Level } from "~/modules/wallet/level"
 import { useClaimCheck, useClaimWalletDailyRewardMutation } from "~/queries/wallet"
 
-export const ClaimDailyReward = () => {
+export const ClaimDailyReward = ({ level }: { level: number }) => {
   const mutation = useClaimWalletDailyRewardMutation()
   const { t } = useTranslation("settings")
 
@@ -23,6 +24,7 @@ export const ClaimDailyReward = () => {
           disabled={!canClaim}
         >
           {canClaim ? t("wallet.claim.button.claim") : t("wallet.claim.button.claimed")}
+          <Level className="ml-3" level={level} hideIcon />
         </Button>
       </TooltipTrigger>
       <TooltipContent>

apps/renderer/src/modules/power/my-wallet-section/index.tsx

@@ -10,6 +10,7 @@ import { apiClient } from "~/lib/api-fetch"
 import { cn } from "~/lib/utils"
 import { SettingSectionTitle } from "~/modules/settings/section"
 import { Balance } from "~/modules/wallet/balance"
+import { Level } from "~/modules/wallet/level"
 import { useWallet, wallet as walletActions } from "~/queries/wallet"
 
 import { ClaimDailyReward } from "./claim-daily-reward"
@@ -47,84 +48,84 @@ export const MyWalletSection = () => {
   }
   return (
     <>
-      <div className="space-y-8">
-        <div>
-          <div className="text-sm">
-            <i className="i-mgc-power mr-0.5 size-3.5 translate-y-px text-accent" />
-            <Trans
-              i18nKey="wallet.power.description"
-              ns="settings"
-              values={{ blockchainName: "VSL" }}
-              components={{
-                Link: (
-                  <a
-                    className="underline"
-                    target="_blank"
-                    href="https://scan.rss3.io/token/0xE06Af68F0c9e819513a6CD083EF6848E76C28CD8"
-                    rel="noreferrer noopener"
-                  />
-                ),
-              }}
-            />
-            <p>{t("wallet.power.dailyClaim", { amount: DAILY_CLAIM_AMOUNT })}</p>
-          </div>
-          <SettingSectionTitle margin="compact" title={t("wallet.address.title")} />
-          <div className="group flex items-center gap-2 text-sm">
-            <a
-              href={`https://scan.rss3.io/address/${myWallet.address}`}
-              target="_blank"
-              className="underline"
-            >
-              {myWallet.address}
-            </a>
-            <CopyButton
-              value={myWallet.address!}
-              className="p-1 opacity-0 duration-200 group-hover:opacity-100 [&_i]:size-2.5"
-            />
-          </div>
-          <SettingSectionTitle title={t("wallet.balance.title")} margin="compact" />
-          <div className="mb-2 flex items-end justify-between">
-            <div className="flex items-center gap-1">
-              <Balance className="text-xl font-bold text-accent">
-                {BigInt(myWallet.dailyPowerToken || 0n) + BigInt(myWallet.cashablePowerToken || 0n)}
-              </Balance>
-              <Button
-                variant="ghost"
-                onClick={() => refreshMutation.mutate()}
-                disabled={refreshMutation.isPending}
-              >
-                <i
-                  className={cn(
-                    "i-mgc-refresh-2-cute-re",
-                    refreshMutation.isPending && "animate-spin",
-                  )}
+      <div>
+        <div className="text-sm">
+          <i className="i-mgc-power mr-0.5 size-3.5 translate-y-px text-accent" />
+          <Trans
+            i18nKey="wallet.power.description"
+            ns="settings"
+            values={{ blockchainName: "VSL" }}
+            components={{
+              Link: (
+                <a
+                  className="underline"
+                  target="_blank"
+                  href="https://scan.rss3.io/token/0xE06Af68F0c9e819513a6CD083EF6848E76C28CD8"
+                  rel="noreferrer noopener"
                 />
-              </Button>
-            </div>
-            <div className="flex gap-2">
-              <WithdrawButton />
-              <ClaimDailyReward />
-            </div>
-          </div>
-          <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="flex items-center gap-1 text-left">
-                  {t("wallet.balance.withdrawable")} <i className="i-mingcute-question-line" />
-                </span>
-
-                <Balance className="center text-[12px] font-medium">
-                  {myWallet.cashablePowerToken}
-                </Balance>
-              </div>
-            </TooltipTrigger>
-            <TooltipPortal>
-              <TooltipContent align="start" className="z-[999]">
-                <p>{t("wallet.balance.withdrawableTooltip")}</p>
-              </TooltipContent>
-            </TooltipPortal>
-          </Tooltip>
+              ),
+            }}
+          />
+          <p>{t("wallet.power.dailyClaim", { amount: DAILY_CLAIM_AMOUNT })}</p>
         </div>
+        <SettingSectionTitle margin="compact" title={t("wallet.address.title")} />
+        <div className="group flex items-center gap-2 text-sm">
+          <a
+            href={`https://scan.rss3.io/address/${myWallet.address}`}
+            target="_blank"
+            className="underline"
+          >
+            {myWallet.address}
+          </a>
+          <CopyButton
+            value={myWallet.address!}
+            className="p-1 opacity-0 duration-200 group-hover:opacity-100 [&_i]:size-2.5"
+          />
+        </div>
+        <SettingSectionTitle title={t("wallet.balance.level")} margin="compact" />
+        <Level level={myWallet.level || 0} />
+        <SettingSectionTitle title={t("wallet.balance.title")} margin="compact" />
+        <div className="mb-2 flex items-end justify-between">
+          <div className="flex items-center gap-1">
+            <Balance className="text-xl font-bold text-accent">
+              {BigInt(myWallet.dailyPowerToken || 0n) + BigInt(myWallet.cashablePowerToken || 0n)}
+            </Balance>
+            <Button
+              variant="ghost"
+              onClick={() => refreshMutation.mutate()}
+              disabled={refreshMutation.isPending}
+            >
+              <i
+                className={cn(
+                  "i-mgc-refresh-2-cute-re",
+                  refreshMutation.isPending && "animate-spin",
+                )}
+              />
+            </Button>
+          </div>
+          <div className="flex gap-2">
+            <WithdrawButton />
+            <ClaimDailyReward level={myWallet.level || 0} />
+          </div>
+        </div>
+        <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="flex items-center gap-1 text-left">
+                {t("wallet.balance.withdrawable")} <i className="i-mingcute-question-line" />
+              </span>
+
+              <Balance className="center text-[12px] font-medium">
+                {myWallet.cashablePowerToken}
+              </Balance>
+            </div>
+          </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent align="start" className="z-[999]">
+              <p>{t("wallet.balance.withdrawableTooltip")}</p>
+            </TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
       </div>
     </>
   )

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

@@ -1,9 +1,21 @@
+import { cn } from "~/lib/utils"
+
 export const multiples = [0.1, 1, 2, 5, 18]
 
-export const Level = ({ level, isLoading }: { level: number; isLoading?: boolean }) => {
+export const Level = ({
+  level,
+  isLoading,
+  hideIcon,
+  className,
+}: {
+  level: number
+  isLoading?: boolean
+  hideIcon?: boolean
+  className?: string
+}) => {
   return (
-    <div className="flex items-center gap-1">
-      <i className="i-mgc-vip-2-cute-fi text-accent" />
+    <div className={cn("flex items-center gap-1", className)}>
+      {!hideIcon && <i className="i-mgc-vip-2-cute-fi text-accent" />}
       {isLoading ? (
         <span className="h-3 w-8 animate-pulse rounded-xl bg-theme-inactive" />
       ) : (

locales/settings/en.json

@@ -218,6 +218,7 @@
   "titles.profile": "Profile",
   "titles.shortcuts": "Shortcuts",
   "wallet.address.title": "Your Address",
+  "wallet.balance.level": "Your Level",
   "wallet.balance.title": "Your Balance",
   "wallet.balance.withdrawable": "Withdrawable",
   "wallet.balance.withdrawableTooltip": "Withdrawable Power includes both the tips you've received and the Power you've recharged.",