react-native-fpay 0.4.14 → 0.4.15

package/src/core/api/index.ts

@@ -41,6 +41,24 @@ export const authenticateAPI = {
     http()
       .post<{ Response: any }>('/verify-otp', { otp, email })
       .then((r) => r.data),
+
+  validateToken: () =>
+    http().get<{
+      status:  boolean;
+      message: string;
+      payload: {
+        id:                 string;
+        firstName:            string;
+        lastName:             string;
+        email:                string;
+        phone:                string;
+        bvn?:                 string;
+        accountNumber:        string;
+        bankName:             string;
+        bankCode?:            string;
+        tradeName?:           string;
+      };
+    }>('/auth/agent/validate-token').then(r => r.data),
 };
 
 export const accountAPI = {

package/src/core/types/index.ts

@@ -28,6 +28,7 @@ export interface FPSDKOptions {
   environment?: 'sandbox' | 'production';
   proximityRadius?: number;
   bluetoothDisplayName?: string;
+  userType?: 'USER' | 'AGENT';
 }
 
 export interface FPTransferRecipient {
@@ -43,6 +44,7 @@ export interface FPWalletTransferRecipient {
   accountName: string;
   agentId?: string;
   userId?: string;
+  terminalId?: string;
 }
 
 export interface FPNfcRecipient {

package/src/engine/BLESenderService.ts

@@ -195,9 +195,10 @@ class BLESenderService {
         rawDevice: device,
       };
     } catch (err) {
-      try {
-        await this.bleManager.cancelDeviceConnection(device.id);
-      } catch {}
+      console.log("Read Device Info Error: ", err)
+      // try {
+      //   await this.bleManager.cancelDeviceConnection(device.id);
+      // } catch {}
       return null;
     }
   }
@@ -233,10 +234,14 @@ class BLESenderService {
   ): Promise<BLESendPaymentResponse> {
     let responseReceived = false;
 
+    
     try {
+      this.bleManager.stopDeviceScan();
+
       let device = this.connectedDevices.get(deviceId);
       if (!device) device = await this.connectToDevice(deviceId);
 
+
       // Start polling BEFORE writing the request, so we don't miss a fast response
       const responsePromise = new Promise<BLESendPaymentResponse>(
         async (resolve, reject) => {
@@ -257,6 +262,9 @@ class BLESenderService {
                 await new Promise((r) => setTimeout(r, 1000));
                 if (responseReceived) break;
 
+                // iOS caches BLE reads — force re-discovery to get fresh values
+
+
                 console.log(
                   '[FPay BLE Sender] Polling response characteristic...'
                 );
@@ -292,6 +300,7 @@ class BLESenderService {
                 }
               } catch (pollErr: any) {
                 // errorCode 205 = device disconnected — abort immediately
+                console.log('[FPay BLE Sender] Poll error:', pollErr);
                 if (pollErr.errorCode === 205) {
                   reject(new Error('[FPay BLE Sender] Device disconnected'));
                   break;
@@ -314,22 +323,40 @@ class BLESenderService {
       console.log('[FPay BLE Sender] Writing payment request...');
 
       try {
-        await device.writeCharacteristicWithoutResponseForService(
-          FP_SERVICE_UUID,
-          FP_REQUEST_CHAR_UUID,
-          base64
-        );
-        console.log('[FPay BLE Sender] Written without response (preferred)');
-      } catch {
-        console.log('[FPay BLE Sender] Retrying with response...');
-        await device.writeCharacteristicWithResponseForService(
-          FP_SERVICE_UUID,
-          FP_REQUEST_CHAR_UUID,
-          base64
-        );
-        console.log('[FPay BLE Sender] Written with response');
+          await device.writeCharacteristicWithResponseForService(
+              FP_SERVICE_UUID,
+              FP_REQUEST_CHAR_UUID,
+              base64
+          );
+          console.log('[FPay BLE Sender] Written with response');
+      } catch (e: any) {
+          console.log('[FPay BLE Sender] Write with response failed:', e.message);
+          console.log('[FPay BLE Sender] Retrying without response...');
+          await device.writeCharacteristicWithoutResponseForService(
+              FP_SERVICE_UUID,
+              FP_REQUEST_CHAR_UUID,
+              base64
+          );
+          console.log('[FPay BLE Sender] Written without response');
       }
 
+      // try {
+      //   await device.writeCharacteristicWithoutResponseForService(
+      //     FP_SERVICE_UUID,
+      //     FP_REQUEST_CHAR_UUID,
+      //     base64
+      //   );
+      //   console.log('[FPay BLE Sender] Written without response (preferred)');
+      // } catch {
+      //   console.log('[FPay BLE Sender] Retrying with response...');
+      //   await device.writeCharacteristicWithResponseForService(
+      //     FP_SERVICE_UUID,
+      //     FP_REQUEST_CHAR_UUID,
+      //     base64
+      //   );
+      //   console.log('[FPay BLE Sender] Written with response');
+      // }
+
       console.log(
         '[FPay BLE Sender] Request sent. Waiting for accept/decline...'
       );

package/src/engine/FPEngine.ts

@@ -3,6 +3,7 @@
 // This replaces AlwaysOnPaymentListener entirely — all its logic lives here.
 
 import {
+  Alert,
   AppState,
   type AppStateStatus,
   Vibration,
@@ -434,6 +435,16 @@ export const FPEngine = {
     _isReady = true;
     console.log('[FPay Engine] Initialized. Advertising as:', displayName);
 
+    // AGENT — account already stored by provider, skip resolve
+    if (options.userType === 'AGENT') {
+      const account = getFPStore().account;
+      if (account) {
+        callbacks.onAccountReady?.(account);
+        _fetchBalance();
+      }
+      return;
+    }
+
     // Resolve account first — sets psspId in store
     // Then broadcast proximity — needs psspId to be set
     await _resolveAccount(user, callbacks);

package/src/ui/components/Gradients/Skeleton.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useEffect } from 'react';
+import { Animated, View, StyleSheet } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+const Skeleton = ({ width, height, borderRadius = 8, style }: any) => {
+  const translateX = useRef(new Animated.Value(-100)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(translateX, {
+        toValue: 300,
+        duration: 1200,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  return (
+    <View
+      style={[
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: '#e0e0e0',
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      <Animated.View
+        style={{
+          ...StyleSheet.absoluteFillObject,
+          transform: [{ translateX }],
+        }}
+      >
+        <LinearGradient
+          colors={['#e0e0e0', '#f5f5f5', '#e0e0e0']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={{ flex: 1 }}
+        />
+      </Animated.View>
+    </View>
+  );
+};
+
+export default Skeleton;

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

@@ -0,0 +1,94 @@
+import { Animated, View } from "react-native";
+import { C, R, S } from "../../theme";
+import Skeleton from "./Skeleton";
+import styled from "styled-components/native";
+
+
+
+const Container = styled(Animated.View)`
+  flex: 1;
+  background-color: ${C.white};
+  padding: ${S.xxl}px ${S.lg}px ${S.xl}px;
+  align-items: center;
+`;
+
+
+const Card = styled.View`
+  width: 100%;
+  background-color: ${C.surface};
+  border-radius: ${R.xl}px;
+  padding: ${S.md}px ${S.lg}px;
+  margin-bottom: ${S.xl}px;
+`;
+
+const Footer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-top: auto;
+`;
+
+
+const Gradients = () => {
+  return (
+    <Container>
+      {/* Icon */}
+      <Skeleton
+        width={80}
+        height={80}
+        borderRadius={40}
+        style={{ alignSelf: 'center', marginBottom: 20 }}
+      />
+
+      {/* Status Text */}
+      <Skeleton
+        width={200}
+        height={20}
+        style={{ alignSelf: 'center', marginBottom: 16 }}
+      />
+
+      {/* Amount */}
+      <Skeleton
+        width={180}
+        height={30}
+        style={{ alignSelf: 'center', marginBottom: 24 }}
+      />
+
+      {/* Card */}
+      <Card>
+        {[...Array(5)].map((_, i) => (
+          <View
+            key={i}
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginBottom: 14,
+            }}
+          >
+            <Skeleton width={100} height={14} />
+            <Skeleton width={140} height={14} />
+          </View>
+        ))}
+      </Card>
+
+      {/* Footer */}
+      <Footer style={{ marginTop: 30 }}>
+        {/* Countdown ring placeholder */}
+        <Skeleton
+          width={60}
+          height={60}
+          borderRadius={30}
+          style={{ marginBottom: 20 }}
+        />
+
+        {/* Button */}
+        <Skeleton
+          width={'100%'}
+          height={50}
+          borderRadius={25}
+        />
+      </Footer>
+    </Container>
+  );
+};
+
+export default Gradients;

package/src/ui/screens/ResultScreen.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components/native';
 import { C, F, R, S } from '../theme';
 import type { FPTransaction } from '../../core/types';
 import { transferAPI } from '../../core/api';
+import Gradients from '../components/Gradients';
 
 // ── Icons ─────────────────────────────────────────────────────
 
@@ -203,6 +204,7 @@ interface Props {
 }
 
 export function ResultScreen({ transaction, onClose }: Props) {
+  const [loading, setLoading] = useState<boolean>(false);
   const [transactionDetail, setTransactionDetail] = useState<any>(null)
   const slideAnim = useRef(new Animated.Value(60)).current;
   const opacAnim = useRef(new Animated.Value(0)).current;
@@ -232,11 +234,20 @@ export function ResultScreen({ transaction, onClose }: Props) {
     : '—';
 
   const loadTransaction = async()=>{
-    const response = await transferAPI.status(transaction.reference) as any;
-    console.log("Transaction payload: ", response);
-    if(response.status){
-      setTransactionDetail(response.payload);
+    setLoading(true);
+    setTransactionDetail(null);
+    try{
+      const response = await transferAPI.status(transaction.reference) as any;
+      console.log("Transaction payload: ", response);
+      if(response.status){
+        setTransactionDetail(response.payload);
+      }
+    }catch(err: any){
+      console.error("Error loading transactions status")
+    }finally{
+      setLoading(false);
     }
+      
   }
 
   useEffect(() => {
@@ -256,10 +267,16 @@ export function ResultScreen({ transaction, onClose }: Props) {
     if(transaction){
       loadTransaction();
     }
-  }, [transaction])
+  }, [transaction]);
+
+
+  if (loading && !transactionDetail) {
+    return <Gradients />;
+  }
 
   return (
     <Container style={{ opacity: opacAnim, transform: [{ translateY: slideAnim }] }}>
+
       <IconWrap style={{ transform: [{ scale: scaleAnim }] }}>
         <IconBg bg={bgColor}>
           {isSuccess ? <SuccessIcon /> : <FailedIcon />}
@@ -282,7 +299,7 @@ export function ResultScreen({ transaction, onClose }: Props) {
 
       <Footer>
         <CountdownRing duration={COUNTDOWN_SECONDS * 1000} />
-        <CloseBtn onPress={loadTransaction} activeOpacity={0.8}>
+        <CloseBtn onPress={onClose} activeOpacity={0.8}>
           <CloseBtnText>Close</CloseBtnText>
         </CloseBtn>
       </Footer>

package/src/ui/screens/sub/sendPayment/BluetoothSubScreen.tsx

@@ -17,15 +17,9 @@ import styled from 'styled-components/native';
 import Svg, { Path } from 'react-native-svg';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
-import { transferAPI } from '../../../../core/api';
-import { FPButton } from '../../../components/FPButton';
-import { C, R, S, F, shadow } from '../../../theme';
 import type {
-  FPCurrency,
   FPError,
-  FPSendPaymentRequest,
   FPSendWalletPaymentRequest,
-  FPTransaction,
   FPUserInfo,
   FintechDevice,
   Props,
@@ -343,6 +337,8 @@ export function BluetoothSubScreen({
         request
       );
 
+      await FPEngine.stopListening();
+
       console.log('Component response: ', response);
 
       if (!response.accepted) {
@@ -367,8 +363,10 @@ export function BluetoothSubScreen({
         recipient: {
           accountName: response.accountDetails.accountName,
           accountNumber: response.accountDetails.accountNumber,
-          userId: response.accountDetails.userId,
+          userId: response.accountDetails.userId || "",
+          agentId: response.accountDetails.agentId || "",
           type: response.accountDetails.receiverType ?? 'USER',
+          terminalId: response.accountDetails.terminalId || ''
         },
         amount: request.amount.toString(),
         reference: response.transactionId ?? `BT_${Date.now()}`,
@@ -402,6 +400,8 @@ export function BluetoothSubScreen({
         Alert.alert('Error', 'Failed to send payment request');
       }
       onError?.(fp);
+    }finally{
+      await FPEngine.startListening();
     }
   };