react-native-fpay 0.1.1

package/src/ui/modals/FPPaymentRequestModal.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useState } from 'react';
+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 } from '../../core/types';
+
+export function FPPaymentRequestModal() {
+  const [request, setRequest] = useState<FPBluetoothPaymentRequest | null>(null);
+  const [loading, setLoading] = useState(false);
+  const scale = React.useRef(new Animated.Value(0.85)).current;
+
+  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();
+    });
+    return unsub;
+  }, []);
+
+  const dismiss = () => { scale.setValue(0.85); setRequest(null); setLoading(false); };
+
+  const handleAccept = async () => {
+    if (!request) return;
+    setLoading(true);
+    await FPEngine.acceptPaymentRequest(request);
+    setLoading(false);
+    dismiss();
+  };
+
+  const handleDecline = () => {
+    if (!request) return;
+    FPEngine.declinePaymentRequest(request);
+    dismiss();
+  };
+
+  if (!request) return null;
+
+  const user = FPEngine.getUser();
+  const amountFormatted = (request.amount / 100).toLocaleString('en-NG', { minimumFractionDigits: 2 });
+
+  return (
+    <Modal
+      visible transparent animationType="slide" statusBarTranslucent  onRequestClose={handleDecline}
+    >
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: 'rgba(0,0,0,0.5)',
+          justifyContent: 'center',
+          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.accountName ?? request?.sender.deviceName ?? '?').charAt(0).toUpperCase()}
+              </Text>
+            </View>
+            <Text style={st.headline}>Payment Request</Text>
+
+            <View style={{ marginBottom: 30 }}>
+              <Text
+                style={{
+                  fontSize: 18,
+                  color: '#666',
+                  textAlign: 'center',
+                  marginBottom: 10,
+                }}
+              >
+                From
+              </Text>
+              <Text
+                style={{
+                  fontSize: 20,
+                  fontWeight: 'bold',
+                  textAlign: 'center',
+                  marginBottom: 20,
+                }}
+              >
+                {request.sender.accountName ?? request.sender.deviceName ?? 'Someone'}
+              </Text>
+              <Text style={st.sub}>wants to send you</Text>
+              {request.amount &&(
+                <View
+                  style={{
+                    backgroundColor: '#f5f5f5',
+                    padding: 20,
+                    borderRadius: 10,
+                    alignItems: 'center',
+                  }}
+                >
+                  <Text style={{ fontSize: 16, color: '#666', marginBottom: 5 }}>
+                    Amount
+                  </Text>
+                  <Text
+                    style={{
+                      fontSize: 36,
+                      fontWeight: 'bold',
+                      color: '#4CAF50',
+                    }}
+                  >
+                    {request.currency}{request.amount.toFixed(2)}
+                  </Text>
+                </View>  
+              )}
+
+              {request.narration ? (
+                <View style={st.noteBox}>
+                  <Text style={st.noteLabel}>Note</Text>
+                  <Text style={st.note}>{request.narration}</Text>
+                </View>
+              ) : null}
+              <Text style={st.disclaimer}>
+                Accepting will receive into{'\n'}
+                <Text style={{ fontWeight: '700' }}>{user?.accountName}</Text> ({user?.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} />
+            </View>
+          </Animated.View>
+          
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+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 },
+  avatarText: { fontSize: 28, fontWeight: '800', color: C.brand },
+  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 },
+  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 },
+  btnRow: { flexDirection: 'row', gap: S.sm, width: '100%' },
+  declineBtn: { flex: 1 },
+  acceptBtn: { flex: 1 },
+});

package/src/ui/modals/FPShell.tsx

@@ -0,0 +1,107 @@
+// ─────────────────────────────────────────────
+// FPShell — The master modal container
+// Mounts invisibly at app root. Listens for
+// show_send / show_receive engine events and
+// renders the appropriate full-screen sheet.
+// ─────────────────────────────────────────────
+import React, { useEffect, useState, useRef } from 'react';
+import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated, Dimensions, SafeAreaView } from 'react-native';
+import { _onEvent } from '../../engine/FPEngine';
+import { SendScreen } from '../screens/SendScreen';
+import { ReceiveScreen } from '../screens/ReceiveScreen';
+import { FPPaymentRequestModal } from './FPPaymentRequestModal';
+import { FPEngine } from '../../engine/FPEngine';
+import { C, S, F, shadow } from '../theme';
+import type { FPCurrency } from '../../core/types';
+
+const { height: SCREEN_H } = Dimensions.get('window');
+
+type SheetMode = 'send' | 'receive' | null;
+
+interface SheetState {
+  mode: SheetMode;
+  amount?: number;
+  currency?: FPCurrency;
+}
+
+export function FPShell() {
+  const [sheet, setSheet] = useState<SheetState>({ mode: null });
+  const slide = useRef(new Animated.Value(SCREEN_H)).current;
+
+  const open = (state: SheetState) => {
+    setSheet(state);
+    Animated.spring(slide, { toValue: 0, useNativeDriver: true, tension: 65, friction: 11 }).start();
+  };
+
+  const close = () => {
+    Animated.timing(slide, { toValue: SCREEN_H, duration: 260, useNativeDriver: true }).start(() => {
+      setSheet({ mode: null });
+    });
+  };
+
+  useEffect(() => {
+    const unsubSend    = _onEvent('show_send',    (d: unknown) => { const data = d as any; open({ mode: 'send',    amount: data?.amount, currency: data?.currency }); });
+    const unsubReceive = _onEvent('show_receive', (d: unknown) => { const data = d as any; open({ mode: 'receive', amount: data?.amount, currency: data?.currency }); });
+    return () => { unsubSend(); unsubReceive(); };
+  }, []);
+
+  const user = FPEngine.getUser();
+  const callbacks = FPEngine.getCallbacks();
+
+  return (
+    <>
+      {/* Always-on BT payment request modal */}
+      <FPPaymentRequestModal />
+
+      {/* Send / Receive sheet */}
+      <Modal visible={sheet.mode !== null} transparent animationType="none" statusBarTranslucent onRequestClose={close}>
+        <TouchableOpacity style={st.scrim} activeOpacity={1} onPress={close} />
+        <Animated.View style={[st.sheet, { transform: [{ translateY: slide }] }]}>
+          <SafeAreaView style={{ flex: 1 }}>
+            {/* Handle + header */}
+            <View style={st.handle} />
+            <View style={st.header}>
+              <Text style={st.headerTitle}>
+                {sheet.mode === 'send' ? 'Send Money' : 'Receive Money'}
+              </Text>
+              <TouchableOpacity onPress={close} style={st.closeBtn}>
+                <Text style={st.closeText}>Done</Text>
+              </TouchableOpacity>
+            </View>
+
+            {/* Content */}
+            {sheet.mode === 'send' && user && (
+              <SendScreen
+                amount={sheet.amount ?? 0}
+                currency={sheet.currency ?? 'NGN'}
+                onClose={close}
+                onPaymentSent={(tx) => { callbacks.onPaymentSent?.(tx); close(); }}
+                onError={callbacks.onError}
+              />
+            )}
+            {sheet.mode === 'receive' && user && (
+              <ReceiveScreen
+                amount={sheet.amount}
+                currency={sheet.currency}
+                user={user}
+                onClose={close}
+                onPaymentReceived={callbacks.onPaymentReceived}
+                onError={callbacks.onError}
+              />
+            )}
+          </SafeAreaView>
+        </Animated.View>
+      </Modal>
+    </>
+  );
+}
+
+const st = StyleSheet.create({
+  scrim: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(11,29,53,0.55)' },
+  sheet: { position: 'absolute', bottom: 0, left: 0, right: 0, height: SCREEN_H * 0.92, backgroundColor: C.white, borderTopLeftRadius: 24, borderTopRightRadius: 24, ...shadow.lg },
+  handle: { width: 40, height: 4, borderRadius: 2, backgroundColor: '#DFE1E6', alignSelf: 'center', marginTop: S.sm },
+  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: S.lg, paddingVertical: S.md, borderBottomWidth: 1, borderBottomColor: '#DFE1E6' },
+  headerTitle: { fontSize: F.lg, fontWeight: '800', color: C.ink },
+  closeBtn: { paddingHorizontal: S.sm, paddingVertical: 4 },
+  closeText: { fontSize: F.md, color: '#0052CC', fontWeight: '700' },
+});

package/src/ui/screens/ReceiveScreen.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { C, R, S, F, shadow } from '../theme';
+import { NQRSubScreen } from './sub/NQRSubScreen';
+import { NFCSubScreen } from './sub/NFCSubScreen';
+import type { FPCurrency, FPCallbacks, FPUserInfo } from '../../core/types';
+
+type Channel = 'transfer' | 'nqr' | 'nfc';
+
+const CHANNELS: { id: Channel; emoji: string; title: string; desc: string }[] = [
+  { id: 'transfer', emoji: '🏦', title: 'Bank Transfer', desc: 'Share your account number' },
+  { id: 'nqr',     emoji: '⬛', title: 'NQR Code',     desc: 'Generate a QR for others to scan' },
+  { id: 'nfc',     emoji: '📲', title: 'NFC Tap',      desc: 'Let someone tap to pay you' },
+];
+
+interface Props extends FPCallbacks {
+  amount?: number;
+  currency?: FPCurrency;
+  user: FPUserInfo;
+  onClose: () => void;
+}
+
+export function ReceiveScreen({ amount, currency = 'NGN', user, onClose, onPaymentReceived, onError }: Props) {
+  const [channel, setChannel] = useState<Channel | null>(null);
+
+  const myWallet = {
+    accountName: user.accountName,
+    accountNumber: user.accountNumber,
+    bankName: user.bankName,
+    bankCode: user.bankCode,
+  };
+
+  if (channel === 'nqr') return <NQRSubScreen mode="receive" amount={amount} currency={currency} onBack={() => setChannel(null)} onDone={onClose} onError={onError} />;
+  if (channel === 'nfc') return <NFCSubScreen mode="receive" myWallet={myWallet} onBack={() => setChannel(null)} onDone={onClose} onError={onError} />;
+
+  // Transfer — just show account details inline
+  if (channel === 'transfer') return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={() => setChannel(null)} style={styles.back}>
+        <Text style={styles.backText}>‹ Back</Text>
+      </TouchableOpacity>
+      <Text style={styles.sectionTitle}>Your Account Details</Text>
+      <View style={styles.accountCard}>
+        <Row label="Account Name"   value={user.accountName} />
+        <Row label="Account Number" value={user.accountNumber} large copyable />
+        <Row label="Bank"           value={user.bankName} />
+        {amount && <Row label="Expected Amount" value={`${currency} ${amount.toLocaleString('en-NG', { minimumFractionDigits: 2 })}`} highlight />}
+      </View>
+      <Text style={styles.hint}>Share these details with whoever is paying you</Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      {amount && (
+        <View style={styles.amountBanner}>
+          <Text style={styles.amountLabel}>Receiving</Text>
+          <Text style={styles.amountValue}>{currency} {amount.toLocaleString('en-NG', { minimumFractionDigits: 2 })}</Text>
+        </View>
+      )}
+      <Text style={styles.sectionTitle}>How do you want to receive?</Text>
+      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.list}>
+        {CHANNELS.map(ch => (
+          <TouchableOpacity key={ch.id} style={styles.card} onPress={() => setChannel(ch.id)} activeOpacity={0.8}>
+            <View style={styles.cardIcon}><Text style={styles.cardEmoji}>{ch.emoji}</Text></View>
+            <View style={styles.cardText}>
+              <Text style={styles.cardTitle}>{ch.title}</Text>
+              <Text style={styles.cardDesc}>{ch.desc}</Text>
+            </View>
+            <Text style={styles.arrow}>›</Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+function Row({ label, value, large, copyable, highlight }: { label: string; value: string; large?: boolean; copyable?: boolean; highlight?: boolean }) {
+  const [copied, setCopied] = React.useState(false);
+  return (
+    <View style={rowStyles.row}>
+      <Text style={rowStyles.label}>{label}</Text>
+      <TouchableOpacity onPress={copyable ? () => { require('react-native').Clipboard.setString(value); setCopied(true); setTimeout(() => setCopied(false), 2000); } : undefined}>
+        <Text style={[rowStyles.value, large && rowStyles.large, highlight && rowStyles.highlight]}>
+          {value}{copyable && <Text style={rowStyles.copy}> {copied ? '✓' : 'Copy'}</Text>}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const rowStyles = StyleSheet.create({
+  row: { paddingVertical: S.sm, borderBottomWidth: 1, borderBottomColor: C.border },
+  label: { fontSize: F.xs, color: C.muted, marginBottom: 2 },
+  value: { fontSize: F.md, color: C.ink, fontWeight: '600' },
+  large: { fontSize: F.xl, fontWeight: '800', letterSpacing: 2 },
+  highlight: { color: C.green, fontWeight: '800' },
+  copy: { fontSize: F.sm, color: C.brand, fontWeight: '700' },
+});
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: S.lg },
+  back: { marginBottom: S.md },
+  backText: { color: C.brand, fontSize: F.md, fontWeight: '600' },
+  amountBanner: { backgroundColor: C.greenLight, borderRadius: R.xl, padding: S.lg, alignItems: 'center', marginBottom: S.lg },
+  amountLabel: { color: C.green, fontSize: F.sm, marginBottom: 4 },
+  amountValue: { color: C.green, fontSize: F.hero, fontWeight: '800' },
+  sectionTitle: { fontSize: F.sm, color: C.muted, fontWeight: '600', letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: S.md },
+  list: { paddingBottom: S.xl },
+  card: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.surface, borderRadius: R.lg, padding: S.md, marginBottom: S.sm, ...shadow.sm },
+  cardIcon: { width: 48, height: 48, borderRadius: R.md, backgroundColor: C.white, justifyContent: 'center', alignItems: 'center', marginRight: S.md },
+  cardEmoji: { fontSize: 24 },
+  cardText: { flex: 1 },
+  cardTitle: { fontSize: F.md, fontWeight: '700', color: C.ink },
+  cardDesc: { fontSize: F.sm, color: C.muted, marginTop: 2 },
+  arrow: { fontSize: F.xl, color: C.ghost },
+  accountCard: { backgroundColor: C.surface, borderRadius: R.lg, padding: S.md, marginBottom: S.md },
+  hint: { fontSize: F.sm, color: C.muted, textAlign: 'center' },
+});

package/src/ui/screens/SendScreen.tsx

@@ -0,0 +1,86 @@
+// ─────────────────────────────────────────────
+// Send Money Screen
+// Shows channel selection, then opens the
+// relevant sub-screen in the same modal sheet
+// ─────────────────────────────────────────────
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { C, R, S, F, shadow } from '../theme';
+import { FPButton } from '../components/FPButton';
+import { TransferSubScreen } from './sub/TransferSubScreen';
+import { NQRSubScreen } from './sub/NQRSubScreen';
+import { ProximitySubScreen } from './sub/ProximitySubScreen';
+import { BluetoothSubScreen } from './sub/BluetoothSubScreen';
+import { NFCSubScreen } from './sub/NFCSubScreen';
+import type { FPCurrency, FPCallbacks } from '../../core/types';
+
+type Channel = 'transfer' | 'nqr' | 'proximity' | 'bluetooth' | 'nfc';
+
+const CHANNELS: { id: Channel; emoji: string; title: string; desc: string }[] = [
+  { id: 'transfer',  emoji: '🏦', title: 'Bank Transfer',  desc: 'Send to any Nigerian bank account' },
+  { id: 'nqr',       emoji: '⬛', title: 'NQR Scan',       desc: 'Scan a merchant or person QR code' },
+  { id: 'proximity', emoji: '📡', title: 'Nearby',         desc: 'People within 100m of you' },
+  { id: 'bluetooth', emoji: '📶', title: 'Bluetooth',      desc: 'Pair wirelessly and send' },
+  { id: 'nfc',       emoji: '📲', title: 'NFC Tap',        desc: 'Tap another phone to pay' },
+];
+
+interface Props extends FPCallbacks {
+  amount: number;
+  currency: FPCurrency;
+  onClose: () => void;
+}
+
+export function SendScreen({ amount, currency, onClose, onPaymentSent, onError }: Props) {
+  const [channel, setChannel] = useState<Channel | null>(null);
+
+  const formatted = `${currency} ${(amount).toLocaleString('en-NG', { minimumFractionDigits: 2 })}`;
+
+  if (channel === 'transfer') return <TransferSubScreen amount={amount} currency={currency} onBack={() => setChannel(null)} onDone={onClose} onSuccess={onPaymentSent} onError={onError} />;
+  if (channel === 'nqr')      return <NQRSubScreen mode="send" amount={amount} currency={currency} onBack={() => setChannel(null)} onDone={onClose} onSuccess={onPaymentSent} onError={onError} />;
+  if (channel === 'proximity') return <ProximitySubScreen amount={amount} currency={currency} onBack={() => setChannel(null)} onDone={onClose} onSuccess={onPaymentSent} onError={onError} />;
+  if (channel === 'bluetooth') return <BluetoothSubScreen mode="send" amount={amount} currency={currency} onBack={() => setChannel(null)} onDone={onClose} onSuccess={onPaymentSent} onError={onError} />;
+  if (channel === 'nfc')       return <NFCSubScreen mode="send" amount={amount} currency={currency} onBack={() => setChannel(null)} onDone={onClose} onSuccess={onPaymentSent} onError={onError} />;
+
+  return (
+    <View style={styles.container}>
+      {/* Amount banner */}
+      <View style={styles.amountBanner}>
+        <Text style={styles.amountLabel}>Sending</Text>
+        <Text style={styles.amountValue}>{formatted}</Text>
+      </View>
+
+      <Text style={styles.sectionTitle}>How do you want to send?</Text>
+
+      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.channelList}>
+        {CHANNELS.map(ch => (
+          <TouchableOpacity key={ch.id} style={styles.card} onPress={() => setChannel(ch.id)} activeOpacity={0.8}>
+            <View style={styles.cardIcon}>
+              <Text style={styles.cardEmoji}>{ch.emoji}</Text>
+            </View>
+            <View style={styles.cardText}>
+              <Text style={styles.cardTitle}>{ch.title}</Text>
+              <Text style={styles.cardDesc}>{ch.desc}</Text>
+            </View>
+            <Text style={styles.arrow}>›</Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  amountBanner: { backgroundColor: C.brand, marginHorizontal: S.lg, borderRadius: R.xl, padding: S.lg, alignItems: 'center', marginBottom: S.lg },
+  amountLabel: { color: 'rgba(255,255,255,0.7)', fontSize: F.sm, marginBottom: 4 },
+  amountValue: { color: C.white, fontSize: F.hero, fontWeight: '800' },
+  sectionTitle: { fontSize: F.sm, color: C.muted, fontWeight: '600', letterSpacing: 0.6, textTransform: 'uppercase', paddingHorizontal: S.lg, marginBottom: S.md },
+  channelList: { paddingHorizontal: S.lg, paddingBottom: S.xl },
+  card: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.surface, borderRadius: R.lg, padding: S.md, marginBottom: S.sm, ...shadow.sm },
+  cardIcon: { width: 48, height: 48, borderRadius: R.md, backgroundColor: C.white, justifyContent: 'center', alignItems: 'center', marginRight: S.md, ...shadow.sm },
+  cardEmoji: { fontSize: 24 },
+  cardText: { flex: 1 },
+  cardTitle: { fontSize: F.md, fontWeight: '700', color: C.ink },
+  cardDesc: { fontSize: F.sm, color: C.muted, marginTop: 2 },
+  arrow: { fontSize: F.xl, color: C.ghost },
+});