fix ui

hooks/useOTPBind.ts

@@ -15,6 +15,7 @@ export interface OTPBindState {
     step: 'mobile' | 'otp' | 'processing';
     loading: boolean;
     otpData: any;
+    errorMessage: string;
 }
 
 export interface OTPBindActions {
@@ -23,6 +24,7 @@ export interface OTPBindActions {
     requestOTP: () => Promise<void>;
     verifyOTP: () => Promise<void>;
     resetToMobile: () => void;
+    clearError: () => void;
 }
 
 export function useOTPBind(
@@ -39,10 +41,13 @@ export function useOTPBind(
     const [step, setStep] = useState<'mobile' | 'otp' | 'processing'>('mobile');
     const [loading, setLoading] = useState(false);
     const [otpData, setOtpData] = useState<any>(null);
+    const [errorMessage, setErrorMessage] = useState('');
 
     const { onRequestOTP, onVerifyOTP, onSuccess, onError, isDebug = false } = callbacks;
     const { otpLength = 6, mobileLength = 10, additionalParams = {} } = config || {};
 
+    const clearError = () => setErrorMessage('');
+
     const log = (...args: any[]) => {
         if (isDebug) console.log(`[${walletType}]`, ...args);
     };
@@ -53,11 +58,14 @@ export function useOTPBind(
 
     const requestOTP = async () => {
         if (!mobile || mobile.length !== mobileLength) {
-            onError('Invalid mobile number');
+            const msg = 'Invalid mobile number';
+            setErrorMessage(msg);
+            onError(msg);
             return;
         }
 
         setLoading(true);
+        setErrorMessage('');
         log('Requesting OTP for:', mobile);
 
         try {
@@ -70,13 +78,18 @@ export function useOTPBind(
             if (response.success) {
                 setOtpData(response.data);
                 setStep('otp');
+                setErrorMessage('');
             } else {
                 error('OTP request failed:', response.message);
-                onError(response.message || 'Failed to request OTP');
+                const msg = response.message || 'Failed to request OTP';
+                setErrorMessage(msg);
+                onError(msg);
             }
         } catch (e) {
             error('Request OTP error:', e);
-            onError(e instanceof Error ? e.message : 'Failed to request OTP');
+            const msg = e instanceof Error ? e.message : 'Failed to request OTP';
+            setErrorMessage(msg);
+            onError(msg);
         } finally {
             setLoading(false);
         }
@@ -84,11 +97,14 @@ export function useOTPBind(
 
     const verifyOTP = async () => {
         if (!otp || otp.length !== otpLength) {
-            onError(`Invalid OTP (expected ${otpLength} digits)`);
+            const msg = `请输入 ${otpLength} 位验证码`;
+            setErrorMessage(msg);
+            onError(msg);
             return;
         }
 
         setLoading(true);
+        setErrorMessage('');
         setStep('processing');
         log('Verifying OTP:', otp);
 
@@ -102,16 +118,21 @@ export function useOTPBind(
             log('Verify response:', response);
 
             if (response.success) {
+                setErrorMessage('');
                 onSuccess(response.data);
             } else {
                 error('Verify failed:', response.message);
+                const msg = response.message || 'Failed to verify OTP';
                 setStep('otp');
-                onError(response.message || 'Failed to verify OTP');
+                setErrorMessage(msg);
+                onError(msg);
             }
         } catch (e) {
             error('Verify OTP error:', e);
+            const msg = e instanceof Error ? e.message : 'Failed to verify OTP';
             setStep('otp');
-            onError(e instanceof Error ? e.message : 'Failed to verify OTP');
+            setErrorMessage(msg);
+            onError(msg);
         } finally {
             setLoading(false);
         }
@@ -120,10 +141,11 @@ export function useOTPBind(
     const resetToMobile = () => {
         setStep('mobile');
         setOtp('');
+        setErrorMessage('');
     };
 
     return [
-        { mobile, otp, step, loading, otpData },
-        { setMobile, setOtp, requestOTP, verifyOTP, resetToMobile },
+        { mobile, otp, step, loading, otpData, errorMessage },
+        { setMobile, setOtp, requestOTP, verifyOTP, resetToMobile, clearError },
     ];
 }