feat: get level multiplier from server configs and reward description

apps/renderer/src/lib/utils.ts

@@ -4,6 +4,7 @@ import { memoize } from "lodash-es"
 import { twMerge } from "tailwind-merge"
 import { parse } from "tldts"
 
+import { getServerConfigs } from "~/atoms/server-configs"
 import type { MediaModel } from "~/models"
 import type { RSSHubRoute } from "~/modules/discover/types"
 
@@ -286,3 +287,29 @@ export const filterSmallMedia = (media: MediaModel) => {
     (m) => !(m.type === "photo" && m.width && m.width < 65 && m.height && m.height < 65),
   )
 }
+
+export const getLevelMultiplier = (level: number) => {
+  if (level === 0) {
+    return 0.1
+  }
+  const serverConfigs = getServerConfigs()
+  if (!serverConfigs) {
+    return 1
+  }
+  const level1Range = serverConfigs?.LEVEL_PERCENTAGES[3] - serverConfigs?.LEVEL_PERCENTAGES[2]
+  const percentageIndex = serverConfigs.LEVEL_PERCENTAGES.length - level
+  let levelCurrentRange
+  if (percentageIndex - 1 < 0) {
+    levelCurrentRange = serverConfigs?.LEVEL_PERCENTAGES[percentageIndex]
+  } else {
+    levelCurrentRange =
+      serverConfigs?.LEVEL_PERCENTAGES[percentageIndex] -
+      serverConfigs?.LEVEL_PERCENTAGES[percentageIndex - 1]
+  }
+  const rangeMultiplier = levelCurrentRange / level1Range
+
+  const poolMultiplier =
+    serverConfigs?.DAILY_POWER_PERCENTAGES[level] / serverConfigs?.DAILY_POWER_PERCENTAGES[1]
+
+  return (poolMultiplier / rangeMultiplier).toFixed(0)
+}

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

@@ -1,6 +1,7 @@
 import { useMutation } from "@tanstack/react-query"
 import { Trans, useTranslation } from "react-i18next"
 
+import { useServerConfigs } from "~/atoms/server-configs"
 import { Button } from "~/components/ui/button"
 import { CopyButton } from "~/components/ui/code-highlighter"
 import { Divider } from "~/components/ui/divider"
@@ -16,12 +17,16 @@ import { useWallet, wallet as walletActions } from "~/queries/wallet"
 
 import { ClaimDailyReward } from "./claim-daily-reward"
 import { CreateWallet } from "./create-wallet"
+import { useRewardDescriptionModal } from "./reward-description-modal"
 import { WithdrawButton } from "./withdraw"
 
 export const MyWalletSection = () => {
   const { t } = useTranslation("settings")
   const wallet = useWallet()
   const myWallet = wallet.data?.[0]
+  const serverConfigs = useServerConfigs()
+
+  const rewardDescriptionModal = useRewardDescriptionModal()
 
   const refreshMutation = useMutation({
     mutationFn: async () => {
@@ -126,9 +131,11 @@ export const MyWalletSection = () => {
         </div>
         <Divider className="my-8" />
         <SettingSectionTitle title={t("wallet.balance.dailyReward")} margin="compact" />
-        <div className="my-2 text-[15px] leading-tight text-orange-500">
-          {t("wallet.power.rewardDescription3")}
-        </div>
+        {serverConfigs?.DISABLE_PERSONAL_DAILY_POWER && (
+          <div className="my-2 text-[15px] leading-tight text-orange-500">
+            {t("wallet.power.rewardDescription3")}
+          </div>
+        )}
         <div className="my-1 text-sm">{t("wallet.power.rewardDescription")}</div>
         <div className="my-1 text-sm">
           <Trans
@@ -138,21 +145,14 @@ export const MyWalletSection = () => {
             components={{
               Balance: (
                 <Balance
-                  className="align-top"
+                  className="align-sub"
                   withSuffix
                   value={BigInt(myWallet.todayDailyPower || 0n)}
                 >
                   {BigInt(myWallet.todayDailyPower || 0n)}
                 </Balance>
               ),
-              Link: (
-                <a
-                  href="https://github.com/RSSNext/Follow/wiki/Power#daily-reward"
-                  target="_blank"
-                  className="underline"
-                  rel="noreferrer noopener"
-                />
-              ),
+              Link: <Button onClick={rewardDescriptionModal} variant="text" />,
             }}
           />
         </div>

apps/renderer/src/modules/power/my-wallet-section/reward-description-modal.tsx

@@ -0,0 +1,79 @@
+import { from } from "dnum"
+import { useCallback } from "react"
+import { useTranslation } from "react-i18next"
+
+import { useServerConfigs } from "~/atoms/server-configs"
+import { useModalStack } from "~/components/ui/modal"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table"
+import { getLevelMultiplier } from "~/lib/utils"
+import { Balance } from "~/modules/wallet/balance"
+import { Level } from "~/modules/wallet/level"
+
+export const useRewardDescriptionModal = () => {
+  const { present } = useModalStack()
+  const { t } = useTranslation("settings")
+  const serverConfigs = useServerConfigs()
+
+  return useCallback(() => {
+    present({
+      content: () => (
+        <div className="relative size-full max-w-[700px] py-4">
+          <div>
+            <p className="mb-6 font-semibold">{t("wallet.rewardDescription.description1")}</p>
+            <p>1. {t("wallet.rewardDescription.description2")}</p>
+            <Table className="my-6">
+              <TableHeader>
+                <TableRow className="[&>th]:h-8">
+                  <TableHead>{t("wallet.rewardDescription.level")}</TableHead>
+                  <TableHead>{t("wallet.rewardDescription.percentage")}</TableHead>
+                  <TableHead>{t("wallet.rewardDescription.reward")}</TableHead>
+                  <TableHead>{t("wallet.rewardDescription.total")}</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {serverConfigs?.DAILY_POWER_PERCENTAGES.map((percentage, index) => {
+                  const level = serverConfigs?.DAILY_POWER_PERCENTAGES.length - index - 1
+                  return (
+                    <TableRow key={percentage} className="[&>td]:py-2">
+                      <TableCell>
+                        <Level level={level} />
+                      </TableCell>
+                      <TableCell>{serverConfigs?.LEVEL_PERCENTAGES[index] * 100}%</TableCell>
+                      <TableCell>{getLevelMultiplier(level)}</TableCell>
+                      <TableCell>
+                        <Balance withSuffix>
+                          {
+                            from(
+                              serverConfigs.DAILY_POWER_SUPPLY *
+                                serverConfigs?.DAILY_POWER_PERCENTAGES[level],
+                              18,
+                            )[0]
+                          }
+                        </Balance>
+                      </TableCell>
+                    </TableRow>
+                  )
+                })}
+              </TableBody>
+            </Table>
+            <p>2. {t("wallet.rewardDescription.description3")}</p>
+          </div>
+        </div>
+      ),
+      title: t("wallet.rewardDescription.title"),
+      overlay: true,
+      overlayOptions: {
+        blur: true,
+        className: "bg-black/80",
+      },
+      clickOutsideToDismiss: true,
+    })
+  }, [serverConfigs, present, t])
+}

apps/renderer/src/modules/wallet/activity-points.tsx

@@ -14,7 +14,7 @@ export const ActivityPoints = ({
     <div className={cn("flex items-center gap-1", className)}>
       <i className="i-mgc-fire-cute-fi text-red-500" />
       <span>{isLoading ? <Skeleton className="size-4" /> : points}</span>
-      <sub className="-translate-y-px text-[0.6rem] font-normal">x{Math.floor(points / 10)}</sub>
+      <sub className="-translate-y-px text-[0.6rem] font-normal">{Math.floor(points / 10)}x</sub>
     </div>
   )
 }

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

@@ -1,6 +1,4 @@
-import { cn } from "~/lib/utils"
-
-export const multiples = [0.1, 1, 2, 5, 18]
+import { cn, getLevelMultiplier } from "~/lib/utils"
 
 export const Level = ({
   level,
@@ -21,7 +19,9 @@ export const Level = ({
       ) : (
         <>
           <span>Lv.{level}</span>
-          <sub className="-translate-y-px text-[0.6rem] font-normal">x{multiples[level]}</sub>
+          <sub className="-translate-y-px text-[0.6rem] font-normal">
+            {getLevelMultiplier(level)}x
+          </sub>
         </>
       )}
     </div>

locales/settings/en.json

@@ -240,6 +240,14 @@
   "wallet.ranking.power": "Power",
   "wallet.ranking.rank": "Rank",
   "wallet.ranking.title": "Power Ranking",
+  "wallet.rewardDescription.description1": "The daily rewards for each user are based on two factors: user level and user activity points.",
+  "wallet.rewardDescription.description2": "User level: Determined by the user's Power ranking compared to all other users.",
+  "wallet.rewardDescription.description3": "User Activity: Engaging with various Follow features can boost activity. Rewards range from a minimum of 1x to a maximum of 10x.",
+  "wallet.rewardDescription.level": "User Level",
+  "wallet.rewardDescription.percentage": "Ranking Percentage",
+  "wallet.rewardDescription.reward": "Reward Multiplier",
+  "wallet.rewardDescription.title": "Reward Description",
+  "wallet.rewardDescription.total": "Total Reward Per Day",
   "wallet.sidebar_title": "Power",
   "wallet.transactions.amount": "Amount",
   "wallet.transactions.date": "Date",