react-native-fpay 0.3.4 → 0.3.6

package/src/ui/components/OtpInput/helpers/types.ts

@@ -1,88 +1,92 @@
-import * as React from 'react'
+import * as React from 'react';
 import type { TextStyle, ViewStyle } from 'react-native';
 
-type KeyboardType = 'default' | 'email-address' | 'number-pad' | 'phone-pad';
+export type KeyboardType =
+  | 'default'
+  | 'email-address'
+  | 'number-pad'
+  | 'phone-pad';
 
 export interface InputProps {
-    /**
-     * Digits of pins in the OTP
-     */
-    pinCount: number;
-    /**
-     * Style of the input fields
-     */
-    codeInputFieldStyle?: TextStyle;
-    /**
-     * Style of highlighted status for input fields
-     */
-    codeInputHighlightStyle?: TextStyle;
-    /**
-     * Callback function
-     * Trigger when all fields of the OTP has been filled
-     *
-     * @param code The verification code
-     */
-    onCodeFilled?: (code: string) => void;
-    /**
-     * Callback function
-     * Trigger when a field of the OTP is changed
-     *
-     * @param code The verification code
-     */
-    onCodeChanged?: (code: string) => void;
-    /**
-     * If keyboard is automatically brought up when OTP is loaded.
-     */
-    autoFocusOnLoad?: boolean;
-    /**
-     * Initial pin code
-     */
-    code?: string;
-    /**
-     * Secure input text
-     */
-    secureTextEntry?: boolean;
-    /**
-     * Set editable for inputs
-     */
-    editable?: boolean;
-    /**
-     * Type of the keyboard
-     */
-    keyboardType?: KeyboardType;
-    /**
-     * Placeholder character to fill all inputs when the OTP is empty
-     */
-    placeholderCharacter?: string;
-    /**
-     * Placeholder text color of inputs
-     */
-    placeholderTextColor?: string;
-    /**
-     * Style of the OTP container view
-     */
-    style?: ViewStyle;
-    /**
-     * The highlight (and cursor on iOS) color of the text input.
-     */
-    selectionColor?: string;
-    /**
-     * If inputs are automatically cleared.
-     */
-    clearInputs?: boolean;
+  /**
+   * Digits of pins in the OTP
+   */
+  pinCount: number;
+  /**
+   * Style of the input fields
+   */
+  codeInputFieldStyle?: TextStyle;
+  /**
+   * Style of highlighted status for input fields
+   */
+  codeInputHighlightStyle?: TextStyle;
+  /**
+   * Callback function
+   * Trigger when all fields of the OTP has been filled
+   *
+   * @param code The verification code
+   */
+  onCodeFilled?: (code: string) => void;
+  /**
+   * Callback function
+   * Trigger when a field of the OTP is changed
+   *
+   * @param code The verification code
+   */
+  onCodeChanged?: (code: string) => void;
+  /**
+   * If keyboard is automatically brought up when OTP is loaded.
+   */
+  autoFocusOnLoad?: boolean;
+  /**
+   * Initial pin code
+   */
+  code?: string;
+  /**
+   * Secure input text
+   */
+  secureTextEntry?: boolean;
+  /**
+   * Set editable for inputs
+   */
+  editable?: boolean;
+  /**
+   * Type of the keyboard
+   */
+  keyboardType?: KeyboardType;
+  /**
+   * Placeholder character to fill all inputs when the OTP is empty
+   */
+  placeholderCharacter?: string;
+  /**
+   * Placeholder text color of inputs
+   */
+  placeholderTextColor?: string;
+  /**
+   * Style of the OTP container view
+   */
+  style?: ViewStyle;
+  /**
+   * The highlight (and cursor on iOS) color of the text input.
+   */
+  selectionColor?: string;
+  /**
+   * If inputs are automatically cleared.
+   */
+  clearInputs?: boolean;
 
-    /**
-     * Keyboard appearance. The value can be 'default', 'dark' or 'light'.
-     */
-    keyboardAppearance?: 'default' | 'dark' | 'light';
+  /**
+   * Keyboard appearance. The value can be 'default', 'dark' or 'light'.
+   */
+  keyboardAppearance?: 'default' | 'dark' | 'light';
 
-    /**
-     * Keyboard auto-appear on focus. The value can be 'false' or 'true'.
-     */
-    showSoftInputOnFocus?: boolean,
+  /**
+   * Keyboard auto-appear on focus. The value can be 'false' or 'true'.
+   */
+  showSoftInputOnFocus?: boolean;
 }
 
 export interface OTPInputViewState {
-    digits: string[];
-    selectedIndex: number;
-}
+  digits: string[];
+  selectedIndex: number;
+}

package/src/ui/components/OtpInput/index.tsx

@@ -1,13 +1,15 @@
-import {View, StyleSheet} from 'react-native';
+import { View, StyleSheet } from 'react-native';
 // import { NumPad } from "frontatish";
 import React from 'react';
 import OTPInputView from './OTPInputView';
+import type { KeyboardType } from './helpers/types';
 
 type PropT = {
   callBack: Function;
   pinvalue?: any;
   isSecure?: boolean;
   count?: number;
+  keyboardType?: KeyboardType;
 };
 
 export default function OTPInputs({
@@ -15,26 +17,27 @@ export default function OTPInputs({
   pinvalue = '',
   isSecure = true,
   count = 4,
+  keyboardType = 'number-pad',
 }: PropT) {
-
   return (
-      <OTPInputView
-        style={{width: '100%', backgroundColor: 'transparent'}}
-        codeInputFieldStyle={styles.underlineStyleBase}
-        codeInputHighlightStyle={styles.underlineStyleHighLighted}
-        secureTextEntry={isSecure}
-        pinCount={count}
-        autoFocusOnLoad
-        placeholderCharacter={''}
-        onCodeFilled={code => {
-          callBack(code);
-        }}
-      />
+    <OTPInputView
+      style={{ width: '100%', backgroundColor: 'transparent' }}
+      codeInputFieldStyle={styles.underlineStyleBase}
+      codeInputHighlightStyle={styles.underlineStyleHighLighted}
+      secureTextEntry={isSecure}
+      keyboardType={keyboardType}
+      pinCount={count}
+      autoFocusOnLoad
+      placeholderCharacter={''}
+      onCodeFilled={(code) => {
+        callBack(code);
+      }}
+    />
   );
 }
 
 const styles = StyleSheet.create({
-    underlineStyleBase: {
+  underlineStyleBase: {
     width: 60,
     height: 60,
     borderWidth: 1,

package/src/ui/components/PulseAnimation.tsx

@@ -1,8 +1,7 @@
-import { useEffect, useRef } from "react";
-import { Animated, Easing } from "react-native";
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
 import styled from 'styled-components/native';
 
-
 const PulseRing = styled(Animated.View)<{ delay?: number }>`
   position: absolute;
   width: 200px;
@@ -19,7 +18,6 @@ export const PulseAnimation: React.FC = () => {
   const pulse3 = useRef(new Animated.Value(0)).current;
   const AnimatedPulseRing = Animated.createAnimatedComponent(PulseRing);
 
-
   useEffect(() => {
     const createPulse = (value: Animated.Value, delay: number) => {
       return Animated.loop(
@@ -75,4 +73,4 @@ export const PulseAnimation: React.FC = () => {
       <AnimatedPulseRing style={pulseStyle(pulse3)} />
     </>
   );
-};
+};

package/src/ui/modals/FPPaymentRequestModal.tsx

@@ -1,27 +1,55 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, Modal, StyleSheet, Animated, TouchableOpacity } from 'react-native';
+import {
+  View,
+  Text,
+  Modal,
+  StyleSheet,
+  Animated,
+  TouchableOpacity,
+} from 'react-native';
 import { FPEngine, _onEvent } from '../../engine/FPEngine';
 import { FPButton } from '../components/FPButton';
 import { C, R, S, F, shadow } from '../theme';
-import type { FPBluetoothPaymentRequest, FPTransferRecipient, FPUserInfo } from '../../core/types';
+import type {
+  FPBluetoothPaymentRequest,
+  FPTransferRecipient,
+  FPUserInfo,
+} from '../../core/types';
 
 export function FPPaymentRequestModal() {
-  const [request, setRequest] = useState<FPBluetoothPaymentRequest | null>(null);
+  const [request, setRequest] = useState<FPBluetoothPaymentRequest | null>(
+    null
+  );
   const [loading, setLoading] = useState(false);
   const scale = React.useRef(new Animated.Value(0.85)).current;
 
   const recipient: FPUserInfo | null = FPEngine.getUser() ?? null;
-  const recipientAccount: FPTransferRecipient | null = FPEngine.getAccount() ?? null;
+  const recipientAccount: FPTransferRecipient | null =
+    FPEngine.getAccount() ?? null;
 
   useEffect(() => {
     const unsub = _onEvent('incoming_payment_request', (req: unknown) => {
       setRequest(req as FPBluetoothPaymentRequest);
-      Animated.spring(scale, { toValue: 1, useNativeDriver: true, tension: 80, friction: 10 }).start();
+      Animated.spring(scale, {
+        toValue: 1,
+        useNativeDriver: true,
+        tension: 80,
+        friction: 10,
+      }).start();
     });
     return unsub;
   }, []);
 
-  const dismiss = () => { scale.setValue(0.85); setRequest(null); setLoading(false); };
+  const dismiss = () => {
+    scale.setValue(0.85);
+    setRequest(null);
+    setLoading(false);
+  };
+
+  const fullName = (): string => {
+    if (!request) return '';
+    return `${request.sender.firstName} ${request.sender.lastName}`;
+  };
 
   const handleAccept = async () => {
     if (!request) return;
@@ -39,10 +67,13 @@ export function FPPaymentRequestModal() {
 
   if (!request) return null;
 
-
   return (
     <Modal
-      visible transparent animationType="slide" statusBarTranslucent  onRequestClose={handleDecline}
+      visible
+      transparent
+      animationType="slide"
+      statusBarTranslucent
+      onRequestClose={handleDecline}
     >
       <View
         style={{
@@ -52,20 +83,18 @@ export function FPPaymentRequestModal() {
           alignItems: 'center',
         }}
       >
-        
         <View
           style={{
-            backgroundColor: '#fff',
             borderRadius: 20,
             padding: 30,
-            width: '80%',
-            maxWidth: 400,
           }}
         >
           <Animated.View style={[st.card, { transform: [{ scale }] }]}>
             <View style={st.avatar}>
               <Text style={st.avatarText}>
-                {(request?.sender.name ?? request?.sender.deviceName ?? '?').charAt(0).toUpperCase()}
+                {(fullName() ?? request?.sender.deviceName ?? '?')
+                  .charAt(0)
+                  .toUpperCase()}
               </Text>
             </View>
             <Text style={st.headline}>Payment Request</Text>
@@ -89,10 +118,10 @@ export function FPPaymentRequestModal() {
                   marginBottom: 20,
                 }}
               >
-                {request.sender.name ?? request.sender.deviceName ?? 'Someone'}
+                {fullName() ?? request.sender.deviceName ?? 'Someone'}
               </Text>
               <Text style={st.sub}>wants to send you</Text>
-              {request.amount &&(
+              {request.amount && (
                 <View
                   style={{
                     backgroundColor: '#f5f5f5',
@@ -101,7 +130,9 @@ export function FPPaymentRequestModal() {
                     alignItems: 'center',
                   }}
                 >
-                  <Text style={{ fontSize: 16, color: '#666', marginBottom: 5 }}>
+                  <Text
+                    style={{ fontSize: 16, color: '#666', marginBottom: 5 }}
+                  >
                     Amount
                   </Text>
                   <Text
@@ -111,9 +142,10 @@ export function FPPaymentRequestModal() {
                       color: '#4CAF50',
                     }}
                   >
-                    {request.currency}{request.amount.toFixed(2)}
+                    {request.currency}
+                    {request.amount.toFixed(2)}
                   </Text>
-                </View>  
+                </View>
               )}
 
               {request.narration ? (
@@ -124,16 +156,28 @@ export function FPPaymentRequestModal() {
               ) : null}
               <Text style={st.disclaimer}>
                 Accepting will receive into{'\n'}
-                <Text style={{ fontWeight: '700' }}>{recipientAccount?.accountName}</Text> ({recipientAccount?.accountNumber})
+                <Text style={{ fontWeight: '700' }}>
+                  {recipientAccount?.accountName}
+                </Text>{' '}
+                ({recipientAccount?.accountNumber})
               </Text>
             </View>
 
             <View style={st.btnRow}>
-              <FPButton label="Decline" onPress={handleDecline} variant="outline" style={st.declineBtn} />
-              <FPButton label="Accept" onPress={handleAccept} loading={loading} style={st.acceptBtn} />
+              <FPButton
+                label="Decline"
+                onPress={handleDecline}
+                variant="outline"
+                style={st.declineBtn}
+              />
+              <FPButton
+                label="Accept"
+                onPress={handleAccept}
+                loading={loading}
+                style={st.acceptBtn}
+              />
             </View>
           </Animated.View>
-          
         </View>
       </View>
     </Modal>
@@ -141,18 +185,57 @@ export function FPPaymentRequestModal() {
 }
 
 const st = StyleSheet.create({
-  scrim: { flex: 1, backgroundColor: 'rgba(11,29,53,0.6)', justifyContent: 'flex-end', padding: S.lg, paddingBottom: 48 },
-  card: { backgroundColor: C.white, borderRadius: 28, padding: S.xl, alignItems: 'center', ...shadow.lg },
-  avatar: { width: 72, height: 72, borderRadius: 36, backgroundColor: C.brandLight, justifyContent: 'center', alignItems: 'center', marginBottom: S.md },
+  scrim: {
+    flex: 1,
+    backgroundColor: 'rgba(11,29,53,0.6)',
+    justifyContent: 'flex-end',
+    padding: S.lg,
+    paddingBottom: 48,
+  },
+  card: {
+    backgroundColor: C.white,
+    borderRadius: 28,
+    padding: S.xl,
+    alignItems: 'center',
+    ...shadow.lg,
+  },
+  avatar: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: C.brandLight,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: S.md,
+  },
   avatarText: { fontSize: 28, fontWeight: '800', color: C.brand },
-  headline: { fontSize: F.sm, fontWeight: '700', color: C.muted, letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 4 },
+  headline: {
+    fontSize: F.sm,
+    fontWeight: '700',
+    color: C.muted,
+    letterSpacing: 0.8,
+    textTransform: 'uppercase',
+    marginBottom: 4,
+  },
   sender: { fontSize: F.xl, fontWeight: '800', color: C.ink },
   sub: { fontSize: F.md, color: C.muted, marginBottom: S.sm },
   amount: { fontSize: 40, fontWeight: '800', color: C.ink, marginBottom: S.md },
-  noteBox: { backgroundColor: C.surface, borderRadius: R.md, padding: S.md, width: '100%', marginBottom: S.md },
+  noteBox: {
+    backgroundColor: C.surface,
+    borderRadius: R.md,
+    padding: S.md,
+    width: '100%',
+    marginBottom: S.md,
+  },
   noteLabel: { fontSize: F.xs, color: C.muted, marginBottom: 2 },
   note: { fontSize: F.md, color: C.ink },
-  disclaimer: { fontSize: F.sm, color: C.muted, textAlign: 'center', lineHeight: 20, marginBottom: S.lg },
+  disclaimer: {
+    fontSize: F.sm,
+    color: C.muted,
+    textAlign: 'center',
+    lineHeight: 20,
+    marginBottom: S.lg,
+  },
   btnRow: { flexDirection: 'row', gap: S.sm, width: '100%' },
   declineBtn: { flex: 1 },
   acceptBtn: { flex: 1 },

package/src/ui/modals/FPShell.tsx

@@ -5,7 +5,18 @@
 // renders the appropriate full-screen sheet.
 // ─────────────────────────────────────────────
 import React, { useEffect, useState, useRef } from 'react';
-import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated, Dimensions, SafeAreaView, StatusBar, Platform } from 'react-native';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  SafeAreaView,
+  StatusBar,
+  Platform,
+} from 'react-native';
 import { _onEvent } from '../../engine/FPEngine';
 import SendScreen from '../screens/SendScreen';
 import ReceiveScreen from '../screens/ReceiveScreen';
@@ -55,13 +66,28 @@ export function FPShell() {
   useEffect(() => {
     const unsubSend = _onEvent('show_send', (d: unknown) => {
       const data = d as any;
-      open({ mode: 'send', user: data?.user, amount: data?.amount, currency: data?.currency });
+      open({
+        mode: 'send',
+        user: data?.user,
+        amount: data?.amount,
+        currency: data?.currency,
+      });
     });
     const unsubReceive = _onEvent('show_receive', (d: unknown) => {
       const data = d as any;
-      open({ mode: 'receive', user: data?.user, amount: data?.amount, currency: data?.currency });
+      open({
+        mode: 'receive',
+        user: data?.user,
+        amount: data?.amount,
+        currency: data?.currency,
+      });
     });
-    return () => { unsubSend(); unsubReceive(); };
+    const unsubClose = _onEvent('close_send', () => close());
+    return () => {
+      unsubSend();
+      unsubReceive();
+      unsubClose();
+    };
   }, []);
 
   return (
@@ -73,33 +99,33 @@ export function FPShell() {
         <Animated.View
           style={[st.fullscreen, { transform: [{ translateY: slide }] }]}
         >
-            <View style={st.content}>
-              {sheet.mode === 'send' && (
-                <SendScreen
-                  user={FPEngine.getUser() ?? null}
-                  account={FPEngine.getAccount() ?? null}
-                  amount={sheet.amount ?? 0}
-                  currency={sheet.currency ?? 'NGN'}
-                  onClose={close}
-                  onPaymentSent={(tx) => {
-                    FPEngine.getCallbacks().onPaymentSent?.(tx);
-                    close();
-                  }}
-                  onError={FPEngine.getCallbacks().onError}
-                />
-              )}
-              {sheet.mode === 'receive' && (
-                <ReceiveScreen
-                  amount={sheet.amount}
-                  currency={sheet.currency}
-                  user={FPEngine.getUser() ?? null}
-                  account={FPEngine.getAccount() ?? null}
-                  onClose={close}
-                  onPaymentReceived={FPEngine.getCallbacks().onPaymentReceived}
-                  onError={FPEngine.getCallbacks().onError}
-                />
-              )}
-            </View>
+          <View style={st.content}>
+            {sheet.mode === 'send' && (
+              <SendScreen
+                user={FPEngine.getUser() ?? null}
+                account={FPEngine.getAccount() ?? null}
+                amount={sheet.amount ?? 0}
+                currency={sheet.currency ?? 'NGN'}
+                onClose={close}
+                onPaymentSent={(tx) => {
+                  FPEngine.getCallbacks().onPaymentSent?.(tx);
+                  close();
+                }}
+                onError={FPEngine.getCallbacks().onError}
+              />
+            )}
+            {sheet.mode === 'receive' && (
+              <ReceiveScreen
+                amount={sheet.amount}
+                currency={sheet.currency}
+                user={FPEngine.getUser() ?? null}
+                account={FPEngine.getAccount() ?? null}
+                onClose={close}
+                onPaymentReceived={FPEngine.getCallbacks().onPaymentReceived}
+                onError={FPEngine.getCallbacks().onError}
+              />
+            )}
+          </View>
         </Animated.View>
       )}
     </>
@@ -126,7 +152,8 @@ const st = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingHorizontal: S.lg,
-    paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) + S.sm : S.md,
+    paddingTop:
+      Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) + S.sm : S.md,
     paddingBottom: S.md,
     backgroundColor: C.white,
   },
@@ -164,7 +191,7 @@ const st = StyleSheet.create({
     width: 8,
     height: 8,
     borderRadius: 4,
-    marginRight: 14,   // visually balances the close button width
+    marginRight: 14, // visually balances the close button width
   },
   divider: {
     height: 1,
@@ -176,4 +203,3 @@ const st = StyleSheet.create({
     backgroundColor: C.surface,
   },
 });
-