@onairos/react-native 3.0.20 → 3.0.22

package/src/components/PinInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import {
   View,
   Text,
@@ -7,6 +7,8 @@ import {
   TouchableOpacity,
   Keyboard,
   Dimensions,
+  Modal,
+  TouchableWithoutFeedback,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { COLORS } from '../constants';
@@ -24,6 +26,7 @@ export const PinInput: React.FC<PinInputProps> = ({
   const [pin, setPin] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [showPin, setShowPin] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
 
   const validatePin = useCallback((value: string) => {
     if (value.length < minLength) {
@@ -61,7 +64,12 @@ export const PinInput: React.FC<PinInputProps> = ({
           </TouchableOpacity>
         )}
         <Text style={styles.title}>Create your PIN</Text>
-        <View style={styles.headerSpacer} />
+        <TouchableOpacity 
+          style={styles.helpButton} 
+          onPress={() => setShowTooltip(true)}
+        >
+          <Icon name="help" size={24} color={COLORS.text.primary} />
+        </TouchableOpacity>
       </View>
       
       <Text style={styles.subtitle}>
@@ -75,7 +83,7 @@ export const PinInput: React.FC<PinInputProps> = ({
           onChangeText={handlePinChange}
           secureTextEntry={!showPin}
           placeholder="Enter PIN"
-          keyboardType="numeric"
+          keyboardType="default"
           maxLength={20}
           autoCapitalize="none"
           autoCorrect={false}
@@ -139,6 +147,44 @@ export const PinInput: React.FC<PinInputProps> = ({
           <Text style={styles.submitButtonText}>Continue</Text>
         </TouchableOpacity>
       </View>
+      
+      {/* PIN Information Tooltip Modal */}
+      <Modal
+        visible={showTooltip}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setShowTooltip(false)}
+      >
+        <TouchableWithoutFeedback onPress={() => setShowTooltip(false)}>
+          <View style={styles.tooltipOverlay}>
+            <View style={styles.tooltipContainer}>
+              <Text style={styles.tooltipTitle}>About Your PIN</Text>
+              <Text style={styles.tooltipText}>
+                Your PIN is used to secure your account and protect your data. It will be required whenever you access sensitive information or perform important actions.
+              </Text>
+              <Text style={styles.tooltipText}>
+                For maximum security, your PIN should:
+              </Text>
+              <Text style={styles.tooltipBullet}>• Be at least {minLength} characters</Text>
+              {requireSpecialChar && (
+                <Text style={styles.tooltipBullet}>• Include special characters like !@#$%^&*()</Text>
+              )}
+              {requireNumber && (
+                <Text style={styles.tooltipBullet}>• Include at least one number</Text>
+              )}
+              <Text style={styles.tooltipText}>
+                Your PIN is stored securely and encrypted on your device.
+              </Text>
+              <TouchableOpacity 
+                style={styles.tooltipButton} 
+                onPress={() => setShowTooltip(false)}
+              >
+                <Text style={styles.tooltipButtonText}>Got it</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
     </View>
   );
 };
@@ -160,8 +206,10 @@ const styles = StyleSheet.create({
   backButton: {
     padding: 8,
   },
-  headerSpacer: {
-    width: 40, // Same width as backButton for alignment
+  helpButton: {
+    padding: 8,
+    width: 40,
+    alignItems: 'center',
   },
   title: {
     fontSize: 20,
@@ -247,4 +295,49 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '600',
   },
+  tooltipOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  tooltipContainer: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 20,
+    width: '90%',
+    maxWidth: 400,
+  },
+  tooltipTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 12,
+    color: COLORS.text.primary,
+    textAlign: 'center',
+  },
+  tooltipText: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginBottom: 12,
+  },
+  tooltipBullet: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginBottom: 6,
+    marginLeft: 10,
+  },
+  tooltipButton: {
+    backgroundColor: COLORS.primary,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    alignSelf: 'center',
+    marginTop: 12,
+  },
+  tooltipButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });

package/src/types.ts

@@ -54,6 +54,12 @@ export interface OnairosButtonProps {
   darkMode?: boolean;
   preferredPlatform?: string;
   testMode?: boolean;
+  autoFetch?: boolean;
+  inferenceData?: any;
+  textLayout?: 'left' | 'right' | 'center';
+  textColor?: string;
+  proofMode?: boolean;
+  webpageName?: string;
 }
 
 export interface PlatformListProps {