refactor: update translations for balance components in user-[userId] context

Author: jarvis2f

messages/en.json

@@ -650,7 +650,10 @@
   },
   "user-[userId]-balance": {
     "available_balance": "Available Balance",
-    "earnings_amount": "Earnings Amount"
+    "balance": "Balance",
+    "earnings": "Earnings",
+    "earnings_amount": "Earnings Amount",
+    "check_your_account_balance": "Check your account balance"
   },
   "user-[userId]-balance-log": {
     "balance": "Balance",
@@ -681,17 +684,17 @@
     "recharge_code": "Recharge Code"
   },
   "user-[userId]-recharge-depay": {
-    "after_clicking_confirm": "After clicking confirm",
     "and": "and",
     "confirm": "Confirm",
-    "enter_crypto_wallet_select_payment_method": "you will enter the crypto wallet to select a payment method",
     "invalid_amount": "Invalid amount",
     "minimum_recharge_amount": "Minimum recharge amount",
     "notes": "Notes",
+    "note_1": "Supports <important>USDC</important> and <important>USDT</important> recharge, with a minimum recharge amount of ${rechargeMinAmount}",
+    "note_2": "After clicking Confirm, you will enter the encrypted wallet to select the payment method.",
+    "note_3": "Top-ups are subject to a 1.5% fee.",
     "recharge": "Recharge",
     "recharge_amount": "Recharge Amount",
     "recharge_failed": "Recharge Failed",
-    "recharge_handling_fee": "Recharge requires a handling fee of",
     "recharge_successful": "Recharge Successful",
     "support": "Support",
     "supported_networks": "Supported networks"
@@ -712,8 +715,7 @@
     "please_provide": "Please provide",
     "receiving_address": "Receiving Address",
     "request_withdrawal": "Request Withdrawal",
-    "request_withdrawal_to_specified_address": "Request withdrawal to the specified address",
-    "subject_to_actual_received_amount": "Subject to the actual received amount",
+    "request_withdrawal_desc": "When applying for withdrawal to the designated address, part of the handling fee needs to be deducted, and the actual amount received shall prevail.",
     "withdrawal": "Withdrawal"
   }
 }

messages/zh.json

@@ -650,7 +650,10 @@
   },
   "user-[userId]-balance": {
     "available_balance": "可消费余额",
-    "earnings_amount": "收益金额"
+    "balance": "余额",
+    "earnings": "收益",
+    "earnings_amount": "收益金额",
+    "check_your_account_balance": "查看你的账户余额"
   },
   "user-[userId]-balance-log": {
     "balance": "余额",
@@ -681,17 +684,17 @@
     "recharge_code": "充值码"
   },
   "user-[userId]-recharge-depay": {
-    "after_clicking_confirm": "点击确认后",
     "and": "和",
     "confirm": "确认",
-    "enter_crypto_wallet_select_payment_method": "将会进入加密钱包选择支付方式",
     "invalid_amount": "无效的金额",
     "minimum_recharge_amount": "充值金额最低",
     "notes": "注意事项",
+    "note_1": "支持 <b>USDC</b> 和 <b>USDT</b> 充值，充值金额最低 ${rechargeMinAmount}",
+    "note_2": "点击确认后，将会进入加密钱包选择支付方式。",
+    "note_3": "充值需要收取 1.5% 的手续费。",
     "recharge": "充值",
     "recharge_amount": "充值金额",
     "recharge_failed": "充值失败",
-    "recharge_handling_fee": "充值需要收取",
     "recharge_successful": "充值成功",
     "support": "支持",
     "supported_networks": "支持的网络"
@@ -707,13 +710,11 @@
   "user-[userId]-withdrawal-balance": {
     "amount": "金额",
     "current_earnings_balance": "当前收益余额",
-    "deduct_handling_fee": "需要扣除部分手续费",
     "minimum_withdrawal_amount": "最低提现金额为",
     "please_provide": "请提供",
     "receiving_address": "收款地址",
     "request_withdrawal": "申请提现",
-    "request_withdrawal_to_specified_address": "申请提现到指定的地址",
-    "subject_to_actual_received_amount": "以实际到账金额为准",
+    "request_withdrawal_desc": "申请提现到指定的地址，需要扣除部分手续费，以实际到账金额为准",
     "withdrawal": "提现"
   }
 }

src/app/[local]/(manage)/user/[userId]/_components/balance-log.tsx

@@ -9,6 +9,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "~/lib/ui/tooltip";
 import type { RouterOutputs } from "~/trpc/shared";
 import { MoneyInput } from "~/lib/ui/money-input";
 import { type BalanceType } from "@prisma/client";
+import { useTranslations } from "use-intl";
 
 export default function BalanceLog({
   userId,
@@ -17,6 +18,7 @@ export default function BalanceLog({
   userId: string;
   balanceType?: BalanceType;
 }) {
+  const t = useTranslations("user-[userId]-balance-log");
   const getLogs = api.user.getBalanceLogs.useInfiniteQuery(
     {
       id: userId,
@@ -105,15 +107,15 @@ export default function BalanceLog({
 
   return (
     <Card>
-      <CardHeader>余额历史</CardHeader>
+      <CardHeader>{t("balance_history")}</CardHeader>
       <CardContent>
         <div className="border-b">
           <div className="flex space-x-2 py-1 text-left text-sm text-muted-foreground">
-            <div className="w-[170px]">时间</div>
+            <div className="w-[170px]">{t("time")}</div>
             <div className="grid flex-1 grid-cols-4 gap-2">
-              <p>变动金额</p>
-              <p>余额</p>
-              <p className="col-span-2">其它信息</p>
+              <p>{t("change_amount")}</p>
+              <p>{t("balance")}</p>
+              <p className="col-span-2">{t("other_info")}</p>
             </div>
           </div>
         </div>

src/app/[local]/(manage)/user/[userId]/_components/balance.tsx

@@ -7,6 +7,7 @@ import RechargeBalance from "~/app/[local]/(manage)/user/[userId]/_components/re
 import { MoneyInput } from "~/lib/ui/money-input";
 import { BalanceType } from "@prisma/client";
 import WithdrawalBalance from "~/app/[local]/(manage)/user/[userId]/_components/withdrawal-balance";
+import { useTranslations } from "use-intl";
 
 interface BalanceProps {
   wallet: {
@@ -18,13 +19,13 @@ interface BalanceProps {
 
 export default function Balance({ wallet, userId }: BalanceProps) {
   const { data: session } = useSession();
-
+  const t = useTranslations("user-[userId]-balance");
   return (
     <Card>
       <CardHeader>
         {wallet?.balanceType === BalanceType.CONSUMPTION
-          ? "可消费余额"
-          : "收益金额"}
+          ? t("available_balance")
+          : t("earnings_amount")}
       </CardHeader>
       <CardContent>
         <MoneyInput displayType="text" value={wallet?.balance} />

src/app/[local]/(manage)/user/[userId]/_components/profile-form.tsx

@@ -18,6 +18,7 @@ import { Button } from "~/lib/ui/button";
 import { useEffect, useState } from "react";
 import { type RouterOutputs } from "~/trpc/shared";
 import { useTrack } from "~/lib/hooks/use-track";
+import { useTranslations } from "use-intl";
 
 const updateProfileFormSchema = z.object({
   name: z.string().min(1).max(255).optional(),
@@ -29,6 +30,7 @@ export default function ProfileForm({
 }: {
   user: RouterOutputs["user"]["getOne"];
 }) {
+  const t = useTranslations("user-[userId]-profile-form");
   const updateProfileMutation = api.user.updateProfile.useMutation();
   const { track } = useTrack();
   const form = useForm<z.infer<typeof updateProfileFormSchema>>({
@@ -68,11 +70,13 @@ export default function ProfileForm({
             name="name"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>名称</FormLabel>
+                <FormLabel>{t("name")}</FormLabel>
                 <FormControl>
                   <Input {...field} />
                 </FormControl>
-                <FormDescription>显示在您的个人资料中的名称</FormDescription>
+                <FormDescription>
+                  {t("name_displayed_in_profile")}
+                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -82,11 +86,11 @@ export default function ProfileForm({
             name="image"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>头像</FormLabel>
+                <FormLabel>{t("avatar")}</FormLabel>
                 <FormControl>
                   <Input {...field} />
                 </FormControl>
-                <FormDescription>头像链接</FormDescription>
+                <FormDescription>{t("avatar_link")}</FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -98,7 +102,7 @@ export default function ProfileForm({
               loading={updateProfileMutation.isLoading}
               success={updateProfileMutation.isSuccess}
             >
-              保存
+              {t("save")}
             </Button>
           </div>
         </form>

src/app/[local]/(manage)/user/[userId]/_components/recharge-balance.tsx

@@ -14,6 +14,7 @@ import { api } from "~/trpc/react";
 import React, { useState } from "react";
 import dynamic from "next/dynamic";
 import { useTrack } from "~/lib/hooks/use-track";
+import { useTranslations } from "use-intl";
 
 const RechargeDepay = dynamic(() => import("./recharge-depay"), {
   ssr: false,
@@ -28,6 +29,7 @@ const RechargeDepay = dynamic(() => import("./recharge-depay"), {
 });
 
 export default function RechargeBalance({ userId }: { userId: string }) {
+  const t = useTranslations("user-[userId]-recharge-balance");
   const [code, setCode] = useState("");
   const rechargeBalanceByCodeMutation =
     api.user.rechargeBalanceByCode.useMutation();
@@ -38,27 +40,29 @@ export default function RechargeBalance({ userId }: { userId: string }) {
       <DialogTrigger asChild>
         <Button>
           <GemIcon className="mr-2 h-5 w-5" />
-          充值
+          {t("recharge")}
         </Button>
       </DialogTrigger>
       <DialogContent className="h-full w-full md:h-auto md:min-w-20">
         <DialogHeader>
-          <DialogTitle>余额充值</DialogTitle>
+          <DialogTitle>{t("balance_recharge")}</DialogTitle>
         </DialogHeader>
         <Tabs defaultValue="recharge">
           <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="recharge">充值</TabsTrigger>
-            <TabsTrigger value="recharge_code">充值码</TabsTrigger>
+            <TabsTrigger value="recharge">{t("recharge")}</TabsTrigger>
+            <TabsTrigger value="recharge_code">
+              {t("recharge_code")}
+            </TabsTrigger>
           </TabsList>
-          <TabsContent value={"recharge"} className="h-[570px]">
+          <TabsContent value={"recharge"} className="h-[600px]">
             <RechargeDepay />
           </TabsContent>
           <TabsContent value="recharge_code">
             <div className="mb-4">
-              <Label>充值码</Label>
+              <Label>{t("recharge_code")}</Label>
               <div className="mt-1">
                 <Input
-                  placeholder="请输入充值码"
+                  placeholder={t("enter_recharge_code")}
                   value={code}
                   onChange={(e) => setCode(e.target.value)}
                 />
@@ -80,7 +84,7 @@ export default function RechargeBalance({ userId }: { userId: string }) {
                 loading={rechargeBalanceByCodeMutation.isLoading}
                 success={rechargeBalanceByCodeMutation.isSuccess}
               >
-                充值
+                {t("recharge")}
               </Button>
             </div>
           </TabsContent>

src/app/[local]/(manage)/user/[userId]/_components/recharge-depay.tsx

@@ -11,6 +11,7 @@ import { type RouterOutputs } from "~/trpc/shared";
 import Image from "next/image";
 import Blockchains from "@depay/web3-blockchains";
 import { useTrack } from "~/lib/hooks/use-track";
+import { useTranslations } from "use-intl";
 
 const dePayWidgetStyles = `
 .PoweredByWrapper {
@@ -39,6 +40,7 @@ const dePayWidgetStyles = `
           `;
 
 export default function RechargeDepay() {
+  const t = useTranslations("user-[userId]-recharge-depay");
   const dePayRef = useRef(null);
   const [amount, setAmount] = useState("0");
   const [dePay, setDePay] = useState<{
@@ -78,15 +80,15 @@ export default function RechargeDepay() {
             amount: data.amount,
           });
           toast({
-            title: "充值成功",
-            description: `充值金额 ${data.amount} USDC/USDT`,
+            title: t("recharge_successful"),
+            description: `${t("recharge_amount")} ${data.amount} USDC/USDT`,
           });
         } else if (data?.status === "FAILED") {
           track("recharge-depay-fail", {
             amount: data.amount,
           });
           toast({
-            title: "充值失败",
+            title: t("recharge_failed"),
             variant: "destructive",
           });
         }
@@ -118,7 +120,7 @@ export default function RechargeDepay() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     const configuration: DePayWidgets.PaymentOptions = {
-      title: "充值",
+      title: t("recharge"),
       container: dePayRef.current,
       integration: dePayIntegrationId,
       payload: payload,
@@ -165,8 +167,8 @@ export default function RechargeDepay() {
     const amountNumber = parseFloat(amount);
     if (isNaN(amountNumber) || amountNumber < rechargeMinAmount) {
       toast({
-        title: "无效的金额",
-        description: `充值金额最低 ${rechargeMinAmount} USDC/USDT`,
+        title: t("invalid_amount"),
+        description: `${t("recharge_amount")} ${rechargeMinAmount} USDC/USDT`,
         variant: "destructive",
       });
       return;
@@ -191,7 +193,7 @@ export default function RechargeDepay() {
       {!dePay.loaded && (
         <>
           <div className="space-y-4">
-            <Label>充值金额</Label>
+            <Label>{t("recharge_amount")}</Label>
             <MoneyInput
               value={amount}
               onValueChange={(values) => {
@@ -201,21 +203,22 @@ export default function RechargeDepay() {
             <Button onClick={() => createPayment()} className="w-full">
               <TetherIcon className="mr-2 h-5 w-5" />
               <USDCIcon className="mr-2 h-5 w-5" />
-              确认
+              {t("confirm")}
             </Button>
           </div>
           <div className="space-y-4">
-            <h3 className="mt-4 text-lg font-semibold">注意事项</h3>
+            <h3 className="mt-4 text-lg font-semibold">{t("notes")}</h3>
             <p className="text-sm">
-              1. 支持 <b>USDC</b> 和 <b>USDT</b> 充值，充值金额最低 $
-              {rechargeMinAmount}。
+              1.{" "}
+              {t.rich("note_1", {
+                important: (children) => <b>{children}</b>,
+                rechargeMinAmount: rechargeMinAmount,
+              })}
             </p>
-            <p className="text-sm">
-              2. 点击确认后，将会进入加密钱包选择支付方式。
-            </p>
-            <p className="text-sm">3. 充值需要收取 1.5% 的手续费。</p>
+            <p className="text-sm">2. {t("note_2")}</p>
+            <p className="text-sm">3. {t("note_3")}</p>
             <div>
-              <p className="text-md mb-2">支持的网络</p>
+              <p className="text-md mb-2">{t("supported_networks")}</p>
               <ul className="space-y-2">
                 {[
                   Blockchains.avalanche,