react-native-fpay 0.1.1

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

@@ -0,0 +1,433 @@
+// FPay SDK — BluetoothSubScreen (Send side)
+//
+// Payment flow:
+//  1. Scan via FPEngine.scanForBluetoothDevices (BLESenderService reads USER_INFO char)
+//  2. User picks a device, taps "Send Payment Request"
+//  3. FPEngine.sendBluetoothPaymentRequest writes JSON to receiver's REQUEST char
+//  4. Receiver's FPPaymentRequestModal pops up — they tap Accept or Decline
+//  5. Accept → receiver writes { accepted, accountDetails, requestTimestamp } to RESPONSE char
+//     Decline → receiver writes { accepted: false, timestamp }
+//  6. Sender polls RESPONSE char every 1s (BLESenderService.sendPaymentRequest)
+//     and matches by requestTimestamp === request.timestamp
+//  7. On accept: sender calls transferAPI.send() with the returned accountDetails
+
+import React, { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, Alert, StyleSheet } from 'react-native';
+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, FPTransaction, FintechDevice } from '../../../core/types';
+
+import { FPEngine } from '../../../engine/FPEngine';
+
+import { PulseAnimation } from '../../components/PulseAnimation';
+import InLoading from '../../components/LoadingAnimation/InLoading';
+
+
+const Container = styled(View)`
+  flex: 1;
+  background-color: #000000;
+`;
+
+const Header = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  position: absolute;
+  top: 40px;
+  left: 0;
+  right: 0;
+  z-index: 9999999999;
+  elevation: 4;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.1;
+  shadow-radius: 4px;
+`;
+
+const HeaderButton = styled(TouchableOpacity)`
+  padding: 8px;
+  background-color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 50px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const HeaderCenter = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`;
+
+const HeaderRight = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`;
+
+const QuickLinksContainer = styled(View)`
+  align-items: center;
+  margin-top: 250px;
+`;
+
+const QuickLinksContainerWithDevices = styled(View)`
+  align-items: flex-start;
+  margin-top: 30%;
+  margin-bottom: 20px;
+`;
+
+const QuickLinksIcon = styled(TouchableOpacity)`
+  width: 96px;
+  height: 96px;
+  border-radius: 48px;
+  background-color: #18181b;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 16px;
+`;
+
+const QuickLinksText = styled(Text)`
+  color: #9ca3af;
+  font-size: 18px;
+`;
+
+export const DeviceCard = styled(View)`
+  background-color: white;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.1;
+  shadow-radius: 8px;
+  elevation: 3;
+`;
+
+export const DeviceInfo = styled(View)`
+  flex: 1;
+`;
+
+export const DeviceName = styled(Text)`
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 4px;
+`;
+
+export const DeviceSignal = styled(Text)`
+  font-size: 14px;
+  color: #6b7280;
+`;
+
+export const PayButton = styled(TouchableOpacity)`
+  background-color: #2563eb;
+  padding: 10px 20px;
+  border-radius: 8px;
+`;
+
+export const PayButtonText = styled(Text)`
+  color: white;
+  font-size: 14px;
+  font-weight: 600;
+`;
+
+const ScrollContainer = styled.ScrollView`
+  flex: 1;
+`;
+
+const ContentContainer = styled(View)`
+  padding: 14px;
+  margin-bottom: 80%;
+`;
+
+const BluetoothIconContainer = styled(View)`
+  align-items: center;
+  margin-top: 15%;
+`;
+
+// ── SVG Icons — your originals, unchanged ────────────────────────────────────
+
+const BluetoothIcon = ({ color = '#111', size = 22 }) => (
+  <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none">
+    <Path d="M6 19.0007C3.57111 17.1763 2 14.2716 2 11C2 5.47715 6.47715 1 12 1C17.5228 1 22 5.47715 22 11C22 14.2716 20.4289 17.1763 18 19.0007" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M6 19.0007C3.57111 17.1763 2 14.2716 2 11C2 5.47715 6.47715 1 12 1C17.5228 1 22 5.47715 22 11C22 14.2716 20.4289 17.1763 18 19.0007" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+    <Path d="M7.52779 15C6.57771 13.9385 6 12.5367 6 11C6 7.68629 8.68629 5 12 5C15.3137 5 18 7.68629 18 11C18 12.5367 17.4223 13.9385 16.4722 15" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+    <Path fillRule="evenodd" clipRule="evenodd" d="M9.25 11C9.25 9.48122 10.4812 8.25 12 8.25C13.5188 8.25 14.75 9.48122 14.75 11C14.75 12.5188 13.5188 13.75 12 13.75C10.4812 13.75 9.25 12.5188 9.25 11Z" fill="#fff" />
+    <Path d="M15.0776 21.4865C14.8566 22.8126 13.7093 23.7844 12.365 23.7844H11.7536C10.4093 23.7844 9.262 22.8126 9.041 21.4865L8.53213 18.4333C8.29232 16.9946 9.43086 15.8854 10.5339 15.15C11.9123 14.231 12.3864 14.3406 13.5847 15.1396C14.6421 15.8445 15.8263 16.9946 15.5865 18.4333L15.0776 21.4865Z" fill="#fff" />
+  </Svg>
+);
+
+const BluetoothScanningIcon = ({ color = '#111', size = 22 }) => (
+  <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none">
+    <Path d="M6.75 8L17.25 16.5L11.75 22V2L17.25 7.5L6.75 16" stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+
+type Phase =
+  | 'idle'          // nothing happening
+  | 'scanning'      // BLE scan running
+  | 'selected'      // device chosen, ready to send
+  | 'requesting'    // request sent, waiting for receiver
+  | 'transferring'  // BLE accepted, calling transfer API
+  | 'done'
+  | 'declined'
+  | 'error';
+
+const PHASE_LABEL: Record<Phase, string> = {
+  idle:         'Ready',
+  scanning:     'Scanning for nearby FPay devices...',
+  selected:     'Device selected — ready to send',
+  requesting:   'Waiting for receiver to respond...',
+  transferring: 'Processing transfer...',
+  done:         'Payment sent!',
+  declined:     'Request was declined',
+  error:        'Something went wrong',
+};
+
+interface Props {
+  mode: 'send' | 'receive';
+  amount: number;
+  currency: FPCurrency;
+  onBack: () => void;
+  onDone: () => void;
+  onSuccess?: (tx: FPTransaction) => void;
+  onError?: (err: FPError) => void;
+}
+
+export function BluetoothSubScreen({
+  mode, amount, currency,
+  onBack, onDone, onSuccess, onError,
+}: Props) {
+  const [devices, setDevices] = useState<FintechDevice[]>([]);
+  const [scanning, setScanning] = useState(false);
+  const [status, setStatus] = useState('Ready to scan');
+  const [currentDevice, setCurrentDevice] = useState<FintechDevice | null>(null);
+
+  
+  
+  // ── 1. Scan ───────────────────────────────────────────────
+
+  const handleScan = async () => {
+    setDevices([]);
+    setScanning(true);
+    setStatus('Scanning for nearby users...');
+
+    try {
+      await FPEngine.scanForBluetoothDevices(
+        (device) => {
+          setDevices((prevDevices) => {
+            // Avoid duplicates
+            const exists = prevDevices.find(d => d.id === device.id);
+            if (exists) return prevDevices;
+            return [...prevDevices, device];
+          });
+        },
+        5000 // Scan for 5 seconds
+      );
+      
+      setScanning(false);
+      setStatus(`Found ${devices.length} user(s) nearby`);
+    } catch (error) {
+      console.error('Scan error:', error);
+      setScanning(false);
+      setStatus('Scan failed');
+      Alert.alert('Error', 'Failed to scan for devices');
+    }finally{
+      setScanning(false);
+    }
+  };
+
+  const handlePayment = async (device: FintechDevice) => {
+    // Show payment amount input dialog (implement your own)
+    Alert.alert(
+      'Send Payment',
+      `Send payment to ${device.userName || device.name}?`,
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: `Continue`,
+          onPress: () => initiatePayment(device, 50),
+        },
+      ]
+    );
+  };
+  
+
+  const initiatePayment = async (device: FintechDevice, amount: number) => {
+    try {
+      setCurrentDevice(device);
+      // Connect to the device
+      const user = FPEngine.getUser();
+      await FPEngine.deviceConnection(device.id);
+      
+      // Create payment request
+      const request: any = {
+        amount,
+        currency,
+        senderId:   user?.userId ?? user?.accountNumber ?? 'unknown',
+        senderName: user?.accountName ?? 'FountainPay User',
+        timestamp:  Date.now(),
+      };
+
+      setStatus(`Sending payment request...`);
+      
+      
+      // Send the payment request
+      console.log("Payment Request: ", request)
+      const response: any = await await FPEngine.sendBluetoothPaymentRequest(device.id, request);
+
+      console.log("Component response: ", response)
+      
+      if (!response.accepted) {
+        Alert.alert(
+          'Payment Declined',
+          `${device.userName} declined the payment`,
+          [{ text: 'OK' }]
+        );
+        return;
+      }
+
+      if (!response.accountDetails) {
+        throw {
+          code: 'BT_MISSING_ACCOUNT',
+          message: 'Receiver accepted but sent no account details',
+        } as FPError;
+      }
+
+      const result = await transferAPI.send({
+        accountNumber: response.accountDetails.accountNumber,
+        bankCode:      response.accountDetails.bankCode,
+        amount:        amount * 100,
+        narration:     `Bluetooth payment to ${response.accountDetails.accountName}`,
+        reference:     response.transactionId,
+      });
+
+      const tx: FPTransaction = {
+        id:        result.reference,
+        reference: result.reference,
+        type:      'debit',
+        channel:   'bluetooth',
+        amount:    result.amount,
+        currency:  result.currency,
+        status:    result.status,
+        recipient: { accountName: response.accountDetails.accountName },
+        createdAt: result.createdAt,
+      };
+
+      onSuccess?.(tx);
+      setCurrentDevice(null);
+      setStatus('Waiting for response...');
+    } catch (error: any) {
+      const fp = error as FPError;
+      setCurrentDevice(null);
+      if (error.message.includes('timeout')) {
+        Alert.alert(
+          'Request Timeout',
+          'The receiver did not respond in time. They may not have seen the request.',
+          [{ text: 'OK' }]
+        );
+      } else {
+        Alert.alert('Error', 'Failed to send payment request');
+      }
+      onError?.(fp);
+    }
+  };
+
+
+  return (
+    <Container>
+      {/* Status Bar */}
+
+      <Header>
+        <HeaderCenter>
+          <Text style={{ fontWeight: 'bold', fontSize: 16, color:'#FFF' }}>Bluetooth</Text>
+          <Text style={{ fontSize: 10, color: '#FFF' }}>Transfer</Text>
+        </HeaderCenter>
+        
+        <HeaderRight>
+          
+          <HeaderButton>
+            <Ionicons name="ellipsis-vertical" size={22} />
+          </HeaderButton>
+        </HeaderRight>
+      </Header>
+
+      {!scanning && !devices.length && (
+        <QuickLinksContainer>
+          <QuickLinksIcon onPress={handleScan}>
+            <BluetoothIcon size={40} color="#FFF" />
+          </QuickLinksIcon>
+          <QuickLinksText>Tap to Pay</QuickLinksText>
+          <Text style={{ fontSize: 16, color: '#999' }}>
+            No nearby users found
+          </Text>
+        </QuickLinksContainer>
+      )}
+
+      {scanning && (
+        <>
+          
+          <QuickLinksContainer>
+            <PulseAnimation />
+            <BluetoothIconContainer>
+              <BluetoothScanningIcon size={40} color="#FFF" />
+              <QuickLinksText>Scanning...</QuickLinksText>
+            </BluetoothIconContainer>
+            
+          </QuickLinksContainer>
+        </>
+        
+      )}
+      
+      
+      {!scanning && devices.length > 0 && (
+        <ScrollContainer showsVerticalScrollIndicator={false}>
+          <ContentContainer>
+            <QuickLinksContainerWithDevices>
+              <QuickLinksText>Found {devices.length} user(s)</QuickLinksText>
+            </QuickLinksContainerWithDevices>
+            {devices.map(device => (
+              <DeviceCard key={device.id}>
+                <DeviceInfo>
+                  <DeviceName>
+                    {device.appName}: {device.userName || device.name}
+                    
+                  </DeviceName>
+                  <DeviceSignal>
+                    Signal: {device.rssi} dBm
+                  </DeviceSignal>
+                </DeviceInfo>
+                {currentDevice?.id === device.id ? (
+                  <InLoading size={40} text="" />
+                ) : (
+                  <PayButton 
+                    onPress={() => handlePayment(device)}
+                    activeOpacity={0.8}
+                  >
+                    <PayButtonText>Pay</PayButtonText>
+                  </PayButton>
+                )}
+              </DeviceCard>
+            ))}  
+          </ContentContainer>
+          
+        </ScrollContainer>
+        
+      )}
+    </Container>
+  );
+}

package/src/ui/screens/sub/NFCSubScreen.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import NfcManager, { NfcTech, Ndef } from 'react-native-nfc-manager';
+import { transferAPI } from '../../../core/api';
+import { FPButton } from '../../components/FPButton';
+import { C, R, S, F } from '../../theme';
+import type { FPCurrency, FPError, FPTransaction } from '../../../core/types';
+
+interface Props {
+  mode: 'send' | 'receive';
+  amount?: number; currency?: FPCurrency;
+  myWallet?: { accountName: string; accountNumber: string; bankCode: string; bankName: string };
+  onBack: () => void; onDone: () => void;
+  onSuccess?: (tx: FPTransaction) => void; onError?: (err: FPError) => void;
+}
+
+type Phase = 'idle' | 'active' | 'success' | 'error';
+
+export function NFCSubScreen({ mode, amount, currency = 'NGN', myWallet, onBack, onDone, onSuccess, onError }: Props) {
+  const [phase, setPhase] = useState<Phase>('idle');
+  const [msg, setMsg] = useState('');
+
+  const tapToReceive = async () => {
+    if (!myWallet) return;
+    setPhase('active');
+    try {
+      await NfcManager.start();
+      await NfcManager.requestTechnology(NfcTech.Ndef);
+      const bytes = Ndef.encodeMessage([Ndef.textRecord(JSON.stringify(myWallet))]);
+      if (bytes) await NfcManager.ndefHandler.writeNdefMessage(bytes);
+      setPhase('success'); setMsg('Your payment details are now on the NFC tag.');
+    } catch (e: any) { setPhase('error'); setMsg(e.message); onError?.({ code: 'NFC_ERROR', message: e.message }); }
+    finally { NfcManager.cancelTechnologyRequest(); }
+  };
+
+  const tapToSend = async () => {
+    setPhase('active');
+    try {
+      await NfcManager.start();
+      await NfcManager.requestTechnology(NfcTech.Ndef);
+      const tag = await NfcManager.getTag();
+      if (!tag?.ndefMessage?.[0]?.payload) throw new Error('No wallet data on tag');
+      const payload = new Uint8Array(tag.ndefMessage[0].payload);
+      const text = Ndef.text.decodePayload(payload);
+      const wallet = JSON.parse(text);
+      const result = await transferAPI.send({ accountNumber: wallet.accountNumber, bankCode: wallet.bankCode, amount: (amount ?? 0) * 100, narration: 'NFC payment' });
+      onSuccess?.({ id: result.reference, reference: result.reference, type: 'debit', channel: 'nfc', amount: result.amount, currency: result.currency, status: result.status, recipient: { accountName: wallet.accountName }, createdAt: result.createdAt });
+      setPhase('success'); setMsg('Payment sent!');
+    } catch (e: any) { setPhase('error'); setMsg(e.message); onError?.({ code: 'NFC_ERROR', message: e.message }); }
+    finally { NfcManager.cancelTechnologyRequest(); }
+  };
+
+  return (
+    <View style={st.wrap}>
+      <Text onPress={onBack} style={st.back}>Back</Text>
+      <Text style={st.title}>NFC {mode === 'send' ? 'Payment' : 'Receive'}</Text>
+      <View style={[st.tapZone, phase === 'active' && st.tapActive, phase === 'success' && st.tapSuccess, phase === 'error' && st.tapError]}>
+        <Text style={st.tapEmoji}>{phase === 'success' ? 'OK' : phase === 'error' ? 'ERR' : 'NFC'}</Text>
+        <Text style={st.tapLabel}>
+          {phase === 'idle' ? (mode === 'send' ? 'Tap to pay' : 'Tap to receive')
+           : phase === 'active' ? 'Scanning...'
+           : phase === 'success' ? 'Success!'
+           : msg}
+        </Text>
+      </View>
+      {phase === 'idle' && <FPButton label={mode === 'send' ? 'Start NFC Scan' : 'Write to NFC Tag'} onPress={mode === 'send' ? tapToSend : tapToReceive} style={{ marginTop: S.md }} />}
+      {phase === 'success' && <FPButton label="Done" onPress={onDone} style={{ marginTop: S.md }} />}
+      {phase === 'error' && <FPButton label="Try Again" onPress={() => setPhase('idle')} style={{ marginTop: S.md }} />}
+    </View>
+  );
+}
+
+const st = StyleSheet.create({
+  wrap: { flex: 1, padding: S.lg },
+  back: { color: C.brand, fontSize: F.md, fontWeight: '600', marginBottom: S.md },
+  title: { fontSize: F.xl, fontWeight: '800', color: C.ink, marginBottom: S.lg },
+  tapZone: { height: 180, backgroundColor: C.ink, borderRadius: R.xl, justifyContent: 'center', alignItems: 'center' },
+  tapActive: { backgroundColor: C.brand },
+  tapSuccess: { backgroundColor: C.green },
+  tapError: { backgroundColor: C.red },
+  tapEmoji: { fontSize: 40, color: C.white, fontWeight: '800', marginBottom: S.sm },
+  tapLabel: { color: C.white, fontSize: F.lg, fontWeight: '700' },
+});

package/src/ui/screens/sub/NQRSubScreen.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, ActivityIndicator, Image } from 'react-native';
+import { nqrAPI } from '../../../core/api';
+import { FPButton } from '../../components/FPButton';
+import { C, R, S, F, shadow } from '../../theme';
+import type { FPCurrency, FPError } from '../../../core/types';
+
+interface Props {
+  mode: 'send' | 'receive';
+  amount?: number; currency?: FPCurrency;
+  onBack: () => void; onDone: () => void;
+  onSuccess?: (tx: any) => void; onError?: (err: FPError) => void;
+}
+
+export function NQRSubScreen({ mode, amount, currency = 'NGN', onBack, onDone, onError }: Props) {
+  const [qr, setQr] = useState<{ qrCodeImageBase64: string; reference: string; expiresAt?: string } | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (mode === 'receive') {
+      setLoading(true);
+      nqrAPI.generate({ amount: amount ? amount * 100 : undefined, currency })
+        .then(setQr).catch(e => onError?.(e)).finally(() => setLoading(false));
+    }
+  }, []);
+
+  return (
+    <View style={st.wrap}>
+      <Text onPress={onBack} style={st.back}>Back</Text>
+      <Text style={st.title}>{mode === 'receive' ? 'Your QR Code' : 'Scan QR Code'}</Text>
+      {loading && <ActivityIndicator size="large" color={C.brand} style={{ marginTop: S.xl }} />}
+      {qr && (
+        <View style={st.qrCard}>
+          <Image source={{ uri: 'data:image/png;base64,' + qr.qrCodeImageBase64 }} style={{ width: 200, height: 200 }} />
+          {amount && <Text style={st.amount}>{currency} {amount.toLocaleString('en-NG', { minimumFractionDigits: 2 })}</Text>}
+          <Text style={st.ref}>Ref: {qr.reference}</Text>
+          {qr.expiresAt && <Text style={st.expiry}>Expires: {new Date(qr.expiresAt).toLocaleTimeString()}</Text>}
+        </View>
+      )}
+      {mode === 'send' && (
+        <View style={st.placeholder}>
+          <Text style={st.placeholderText}>Camera scanner</Text>
+          <Text style={st.placeholderSub}>Integrate your preferred camera/QR library here and pass the scanned qrString to nqrAPI.pay()</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const st = StyleSheet.create({
+  wrap: { flex: 1, padding: S.lg },
+  back: { color: C.brand, fontSize: F.md, fontWeight: '600', marginBottom: S.md },
+  title: { fontSize: F.xl, fontWeight: '800', color: C.ink, marginBottom: S.lg },
+  qrCard: { alignItems: 'center', backgroundColor: C.white, borderRadius: R.xl, padding: S.xl, ...shadow.lg },
+  amount: { fontSize: F.xxl, fontWeight: '800', color: C.ink, marginTop: S.md },
+  ref: { fontSize: F.sm, color: C.muted, marginTop: S.sm },
+  expiry: { fontSize: F.xs, color: C.amber, marginTop: 4 },
+  placeholder: { flex: 1, backgroundColor: C.ink, borderRadius: R.xl, justifyContent: 'center', alignItems: 'center', padding: S.xl },
+  placeholderText: { color: C.white, fontSize: F.xl, fontWeight: '700' },
+  placeholderSub: { color: C.ghost, fontSize: F.sm, textAlign: 'center', marginTop: S.sm },
+});