- 在桌面端和移动端头部组件中添加余额刷新按钮 - 实现 useWalletBalanceRefresh 钩子用于余额刷新逻辑 - 添加刷新图标并集成到钻石币显示区域 - 支持多语言本地化包括英语、印尼语、马来语和中文 - 优化消息广播组件的动画过渡效果 - 添加防重复提交机制避免并发刷新请求 - 集成加载状态显示和错误处理通知功能
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { useCallback, useRef, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { getCurrentUserProfile } from '@/api'
|
|
import { notify } from '@/lib/notify'
|
|
import { useAuthStore } from '@/store'
|
|
|
|
export function useWalletBalanceRefresh() {
|
|
const { t } = useTranslation()
|
|
const setCurrentUser = useAuthStore((state) => state.setCurrentUser)
|
|
const [isRefreshingBalance, setIsRefreshingBalance] = useState(false)
|
|
const refreshPromiseRef = useRef<Promise<void> | null>(null)
|
|
|
|
const refreshWalletBalance = useCallback(() => {
|
|
if (refreshPromiseRef.current) {
|
|
return refreshPromiseRef.current
|
|
}
|
|
|
|
setIsRefreshingBalance(true)
|
|
|
|
const refreshPromise = getCurrentUserProfile()
|
|
.then((currentUser) => {
|
|
setCurrentUser(currentUser)
|
|
})
|
|
.catch((error: unknown) => {
|
|
notify.error(
|
|
error instanceof Error
|
|
? error.message
|
|
: t('commonUi.toast.requestFailed'),
|
|
)
|
|
})
|
|
.finally(() => {
|
|
refreshPromiseRef.current = null
|
|
setIsRefreshingBalance(false)
|
|
})
|
|
|
|
refreshPromiseRef.current = refreshPromise
|
|
|
|
return refreshPromise
|
|
}, [setCurrentUser, t])
|
|
|
|
return {
|
|
isRefreshingBalance,
|
|
refreshWalletBalance,
|
|
}
|
|
}
|