fix(wallet): persist balance actions through backend

app/(order)/order/new/page.tsx

@@ -7,12 +7,12 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 import { Textarea } from "@/components/ui/textarea"
-import { getPlayerById, getServiceById } from "@/lib/api"
+import { getPlayerById, getServiceById, requestWithAuth } from "@/lib/api"
 import { createPaidOrder } from "@/lib/api/orders"
-import { notifySuccess } from "@/lib/toast"
+import { getWalletBalance } from "@/lib/api/transactions"
+import { notifyInfo, notifySuccess } from "@/lib/toast"
 import type { Player, PlayerService } from "@/lib/types"
 import { useRequireAuth } from "@/lib/use-require-auth"
-import { useWalletStore } from "@/store/wallet"
 import { ArrowLeft, CheckCircle, CreditCard, ShieldCheck } from "lucide-react"
 import Link from "next/link"
 import { useRouter, useSearchParams } from "next/navigation"
@@ -22,11 +22,11 @@ export default function NewOrderPage() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const { requireAuth } = useRequireAuth()
-  const balance = useWalletStore((state) => state.balance)
   const serviceId = searchParams.get("serviceId")
 
   const [service, setService] = useState<PlayerService | null>(null)
   const [player, setPlayer] = useState<Player | null>(null)
+  const [balance, setBalance] = useState<number | null>(null)
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
@@ -72,6 +72,22 @@ export default function NewOrderPage() {
     }
   }, [serviceId])
 
+  useEffect(() => {
+    let cancelled = false
+
+    void requestWithAuth(() => getWalletBalance())
+      .then((nextBalance) => {
+        if (!cancelled) setBalance(nextBalance ?? null)
+      })
+      .catch(() => {
+        if (!cancelled) setBalance(null)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
   const [quantity, setQuantity] = useState(1)
   const [note, setNote] = useState("")
   const [submitted, setSubmitted] = useState(false)
@@ -213,9 +229,11 @@ export default function NewOrderPage() {
             </div>
             <div className="flex items-center gap-2 text-sm text-muted-foreground">
               <CreditCard className="h-4 w-4" />
-              <span>钱包余额: ¥{balance.toFixed(2)}</span>
-              {balance < totalPrice && <span className="text-destructive">（余额不足）</span>}
-              {balance < totalPrice && (
+              <span>钱包余额: {balance === null ? "--" : `¥${balance.toFixed(2)}`}</span>
+              {balance !== null && balance < totalPrice && (
+                <span className="text-destructive">（余额不足）</span>
+              )}
+              {balance !== null && balance < totalPrice && (
                 <Button variant="outline" size="sm" asChild>
                   <Link href="/wallet">充值</Link>
                 </Button>
@@ -231,7 +249,7 @@ export default function NewOrderPage() {
         <Button
           className="w-full"
           size="lg"
-          disabled={balance < totalPrice}
+          disabled={balance === null || balance < totalPrice}
           onClick={() =>
             requireAuth(() => {
               void Promise.resolve(
@@ -243,9 +261,11 @@ export default function NewOrderPage() {
                   note,
                 }),
               ).then((result) => {
-                if (!result.decision.ok || !result.order) {
+                if (!result.decision.ok) {
+                  notifyInfo(result.decision.error.msg)
                   return
                 }
+                if (!result.order) return
                 const nextOrder = result.order
 
                 setSubmitted(true)