Otp / Token 模式 OK

components/OTPBindUI.tsx

@@ -13,6 +13,7 @@ import { useOTPBind } from '../hooks/useOTPBind';
 interface OTPBindUIProps {
     walletType: WalletType;
     title: string;
+    subtitle?: string;
     otpLength?: number;
     mobileLength?: number;
     passwordBeforeOtp?: boolean;
@@ -32,6 +33,7 @@ interface OTPBindUIProps {
 export const OTPBindUI: React.FC<OTPBindUIProps> = ({
     walletType,
     title,
+    subtitle,
     otpLength = 6,
     mobileLength = 10,
     passwordBeforeOtp = false,
@@ -78,6 +80,7 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
             <View style={styles.overlay}>
                 <View style={styles.card}>
                     <Text style={styles.title}>{title}</Text>
+                    {!!subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
                     {!!state.errorMessage && (
                         <Text style={styles.errorText}>{state.errorMessage}</Text>
                     )}
@@ -182,6 +185,7 @@ export const OTPBindUI: React.FC<OTPBindUIProps> = ({
         <View style={styles.overlay}>
             <View style={styles.card}>
                 <Text style={styles.title}>{title}</Text>
+                {!!subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
 
                 {!showOtp && (
                     <>
@@ -287,6 +291,14 @@ const styles = StyleSheet.create({
         color: '#111',
         marginBottom: 18,
     },
+    subtitle: {
+        fontSize: 12,
+        color: '#888',
+        textAlign: 'center',
+        marginTop: -10,
+        marginBottom: 14,
+        lineHeight: 17,
+    },
     label: {
         fontSize: 13,
         color: '#666',