react-native-fpay 0.1.1

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

@@ -0,0 +1,390 @@
+import React, { useState, useEffect, useRef } from 'react';
+import styled from 'styled-components/native';
+import Svg, { Path } from "react-native-svg";
+import { View, Text, FlatList, TouchableOpacity, StyleSheet, ActivityIndicator, TextInput, Animated, Easing } from 'react-native';
+import { proximityAPI, transferAPI } from '../../../core/api';
+import { FPButton } from '../../components/FPButton';
+import { C, R, S, F, shadow } from '../../theme';
+import type { FPCurrency, FPProximityPeer, FPError, FPTransaction } from '../../../core/types';
+import { FPEngine } from '../../../engine/FPEngine';
+import NearbyUsersService from '../../../engine/NearbyUsersService';
+import { PulseAnimation } from '../../components/PulseAnimation';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import LoadingAnimation from '../../components/LoadingAnimation';
+
+
+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 !important;
+  top: 40px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  elevation: 4;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.1;
+  shadow-radius: 4px;
+  z-index: 9999999999 !important;
+`;
+
+const HeaderButton = styled(TouchableOpacity)`
+  padding: 8px;
+  background-color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  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: 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%;
+`;
+
+const LCAnimationContainer = styled.View`
+  align-items: center;
+  justify-content: center;
+  margin-top: 40%;
+`;
+
+const LCIconContainer = styled(Animated.View)`
+  width: 140px;
+  height: 140px;
+  border-radius: 90px;
+  background-color: #E8F5F1;
+  align-items: center;
+  justify-content: center;
+  margin-top: 24px;
+  margin-bottom: 24px;
+`;
+
+const LCIcon = styled.Text`
+  font-size: 80px;
+`;
+
+const StatusTextContainer = styled.View`
+  align-items: center;
+  margin-bottom: 8px;
+`;
+
+const StatusText = styled.Text`
+  font-size: 18px;
+  font-weight: 600;
+  color: #333333;
+  text-align: center;
+  margin-bottom: 8px;
+`;
+
+const StatusSubText = styled.Text`
+  font-size: 14px;
+  color: #666666;
+  text-align: center;
+`;
+
+const ConnectionStatusBadge = styled.View<{ connected: boolean }>`
+  background-color: ${props => props.connected ? '#0a3d2e' : '#E0E0E0'};
+  border-radius: 20px;
+  padding: 8px 16px;
+  margin-top: 16px;
+`;
+
+const ConnectionStatusText = styled.Text<{ connected: boolean }>`
+  font-size: 12px;
+  font-weight: 600;
+  color: ${props => props.connected ? '#ffffff' : '#666666'};
+`;
+
+
+const BluetoothIcon =({ color = "#111", size = 22 })=>(
+    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
+        <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" color={color}>
+    <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>
+)
+
+const ProximityIcon =({ color = "#111", size = 22 })=>(
+    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
+      <Path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" fill={color} stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M19 19L17.5 17.5" stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round"/>
+      <Path d="M15.5 15.5L14.5 14.5" stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>
+)
+
+interface Props {
+  amount: number; currency: FPCurrency;
+  onBack: () => void; onDone: () => void;
+  onSuccess?: (tx: FPTransaction) => void; onError?: (err: FPError) => void;
+}
+
+export function ProximitySubScreen({ amount, currency, onDone, onSuccess, onError }: Props) {
+
+  const [nearbyUsers, setNearbyUsers] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [scanning, setScanning] = useState(false);
+  const iconScale = useRef(new Animated.Value(1)).current;
+  const animationRef = useRef<Animated.CompositeAnimation | null>(null);
+
+  const handleScan = async () => {
+      try {
+          const users: any = await NearbyUsersService.getNearbyUsers();
+          setNearbyUsers(users);
+      } catch (error) {
+          console.error('Error fetching nearby users:', error);
+      } finally {
+          setScanning(false);
+      }
+  };
+
+  const handlePayment = async (selected: any) => {
+    if (!selected) return;
+
+    setLoading(true);
+    try {
+      const result = await transferAPI.send({ accountNumber: selected.accountNumber, bankCode: selected.bankCode, amount: amount * 100, narration: 'Proximity payment' });
+      onSuccess?.({ id: result.reference, reference: result.reference, type: 'debit', channel: 'proximity', amount: result.amount, currency: result.currency, status: result.status, recipient: { accountName: selected.displayName }, createdAt: result.createdAt });
+      onDone();
+    } catch (e) { onError?.(e as FPError); }
+    finally { setLoading(false); }
+  };
+
+  useEffect(() => {
+    if (scanning) {
+      handleScan();
+      animationRef.current = Animated.loop(
+        Animated.sequence([
+          Animated.timing(iconScale, {
+            toValue: 1.1,
+            duration: 1500,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+          Animated.timing(iconScale, {
+            toValue: 1,
+            duration: 1500,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+          }),
+        ])
+      );
+
+      animationRef.current.start();
+    } else {
+      // Stop animation cleanly
+      animationRef.current?.stop();
+      iconScale.stopAnimation();
+      iconScale.setValue(1);
+    }
+
+    return () => {
+        animationRef.current?.stop();
+    };
+  }, [scanning]);
+
+  return (
+    <Container>
+            {/* Status Bar */}
+      {loading && (
+        <LoadingAnimation />
+      )}
+      <Header>
+        <HeaderCenter>
+          <Text style={{ fontWeight: 'bold', fontSize: 16, color:'#FFF' }}>Proximity</Text>
+          <Text style={{ fontSize: 10, color: '#FFF' }}>Transfer</Text>
+        </HeaderCenter>
+        
+        <HeaderRight>
+          <HeaderButton>
+              <Ionicons name="ellipsis-vertical" size={22} />
+          </HeaderButton>
+        </HeaderRight>
+      </Header>
+
+      {!scanning && !nearbyUsers.length && (
+        <QuickLinksContainer>
+          <QuickLinksIcon onPress={()=>setScanning(true)}>
+          <ProximityIcon size={60} color="#FFF" />
+          </QuickLinksIcon>
+          <QuickLinksText>Tap to Pay</QuickLinksText>
+          <Text style={{ fontSize: 16, color: '#999' }}>
+          No nearby users found
+          </Text>
+        </QuickLinksContainer>
+      )}
+        
+      {scanning && (
+        <LCAnimationContainer>
+          <PulseAnimation />
+          <LCIconContainer style={{ transform: [{ scale: iconScale }], marginTop: 64 }}>
+              <LCIcon>📡</LCIcon>
+          </LCIconContainer>
+
+          <StatusTextContainer>
+              <StatusText>
+              Searching for nearby users
+              </StatusText>
+              {/* <StatusSubText>Hold devices back-to-back</StatusSubText> */}
+          </StatusTextContainer>
+        </LCAnimationContainer>
+          
+      )}
+
+        {!scanning && nearbyUsers.length > 0 && (
+            <ScrollContainer showsVerticalScrollIndicator={false}>
+              <ContentContainer>
+              <QuickLinksContainerWithDevices>
+                <QuickLinksText>Found {nearbyUsers.length} user(s)</QuickLinksText>
+              </QuickLinksContainerWithDevices>
+              {nearbyUsers.map((user: any) => (
+                <DeviceCard key={user.userId}>
+                <DeviceInfo>
+                  <DeviceName>
+                  {user.userName || user.name}
+                  {user.appName}
+                  </DeviceName>
+                  <DeviceSignal>
+                  Signal: {Math.round(user.distance)}m away
+                  </DeviceSignal>
+                </DeviceInfo>
+                <PayButton 
+                    onPress={() => handlePayment(user)}
+                    activeOpacity={0.8}
+                >
+                    <PayButtonText>Pay</PayButtonText>
+                </PayButton>
+                </DeviceCard>
+              ))}  
+              </ContentContainer>
+            </ScrollContainer>
+            
+        )}
+    </Container>
+  );
+}
+
+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 },
+  peerCard: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.surface, borderRadius: R.lg, padding: S.md, borderWidth: 2, borderColor: 'transparent' },
+  peerSelected: { borderColor: C.brand, backgroundColor: '#EEF4FF' },
+  avatar: { width: 44, height: 44, borderRadius: 22, backgroundColor: C.brand, justifyContent: 'center', alignItems: 'center', marginRight: S.md },
+  avatarText: { color: C.white, fontWeight: '800', fontSize: F.lg },
+  peerName: { fontSize: F.md, fontWeight: '700', color: C.ink },
+  peerBank: { fontSize: F.sm, color: C.muted },
+  dist: { fontSize: F.xs, color: C.brand },
+  check: { color: C.brand, fontWeight: '800' },
+  empty: { textAlign: 'center', color: C.muted, padding: S.xl },
+  footer: { backgroundColor: C.surface, borderRadius: R.lg, padding: S.lg, marginTop: S.md },
+  footerText: { fontSize: F.md, color: C.ink, fontWeight: '600', marginBottom: S.md },
+});

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

@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, TextInput, FlatList, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
+import { transferAPI } from '../../../core/api';
+import { FPButton } from '../../components/FPButton';
+import { C, R, S, F, shadow } from '../../theme';
+import type { FPCurrency, FPTransaction, FPError } from '../../../core/types';
+
+type Step = 'bank' | 'account' | 'confirm' | 'processing' | 'done';
+
+interface Props {
+  amount: number; currency: FPCurrency;
+  onBack: () => void; onDone: () => void;
+  onSuccess?: (tx: FPTransaction) => void; onError?: (err: FPError) => void;
+}
+
+export function TransferSubScreen({ amount, currency, onBack, onDone, onSuccess, onError }: Props) {
+  const [step, setStep] = useState<Step>('bank');
+  const [banks, setBanks] = useState<{ name: string; code: string }[]>([]);
+  const [search, setSearch] = useState('');
+  const [selectedBank, setSelectedBank] = useState<{ name: string; code: string } | null>(null);
+  const [accountNumber, setAccountNumber] = useState('');
+  const [verifiedName, setVerifiedName] = useState('');
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [narration, setNarration] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => { transferAPI.getBanks().then(setBanks).catch(() => {}); }, []);
+
+  useEffect(() => {
+    if (accountNumber.length === 10 && selectedBank) {
+      setIsVerifying(true); setVerifiedName('');
+      transferAPI.verifyAccount(accountNumber, selectedBank.code)
+        .then(r => setVerifiedName(r.accountName))
+        .catch(() => setVerifiedName(''))
+        .finally(() => setIsVerifying(false));
+    }
+  }, [accountNumber, selectedBank]);
+
+  const handleSend = async () => {
+    if (!selectedBank || !verifiedName) return;
+    setLoading(true); setStep('processing');
+    try {
+      const result = await transferAPI.send({ accountNumber, bankCode: selectedBank.code, amount: amount * 100, narration });
+      onSuccess?.({ id: result.reference, reference: result.reference, type: 'debit', channel: 'transfer', amount: result.amount, currency: result.currency, status: result.status, recipient: { accountName: result.recipient.accountName }, createdAt: result.createdAt });
+      setStep('done');
+    } catch (err) {
+      setError((err as FPError).message); setStep('confirm');
+      onError?.(err as FPError);
+    } finally { setLoading(false); }
+  };
+
+  const filtered = banks.filter(b => b.name.toLowerCase().includes(search.toLowerCase()));
+
+  if (step === 'bank') return (
+    <View style={st.wrap}>
+      <TouchableOpacity onPress={onBack} style={st.back}><Text style={st.backText}>Back</Text></TouchableOpacity>
+      <Text style={st.title}>Select Bank</Text>
+      <TextInput style={st.input} placeholder="Search..." value={search} onChangeText={setSearch} placeholderTextColor={C.ghost} />
+      <FlatList data={filtered} keyExtractor={i => i.code}
+        renderItem={({ item }) => (
+          <TouchableOpacity style={st.bankRow} onPress={() => { setSelectedBank(item); setStep('account'); }}>
+            <Text style={st.bankName}>{item.name}</Text><Text style={st.arrow}>{">"}</Text>
+          </TouchableOpacity>
+        )}
+        ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: C.border }} />}
+      />
+    </View>
+  );
+
+  if (step === 'account') return (
+    <View style={st.wrap}>
+      <TouchableOpacity onPress={() => setStep('bank')} style={st.back}><Text style={st.backText}>{selectedBank?.name}</Text></TouchableOpacity>
+      <Text style={st.title}>Account Number</Text>
+      <TextInput style={st.bigInput} placeholder="0000000000" value={accountNumber}
+        onChangeText={v => setAccountNumber(v.replace(/[^0-9]/g, '').slice(0, 10))}
+        keyboardType="number-pad" maxLength={10} placeholderTextColor={C.ghost} />
+      {isVerifying && <ActivityIndicator color={C.brand} />}
+      {verifiedName ? <View style={st.verified}><Text style={st.verifiedText}>Verified: {verifiedName}</Text></View> : null}
+      <FPButton label="Continue" onPress={() => setStep('confirm')} disabled={!verifiedName} style={st.btn} />
+    </View>
+  );
+
+  if (step === 'confirm') return (
+    <View style={st.wrap}>
+      <TouchableOpacity onPress={() => setStep('account')} style={st.back}><Text style={st.backText}>Back</Text></TouchableOpacity>
+      <Text style={st.title}>Confirm Transfer</Text>
+      <View style={st.card}>
+        <Row label="Recipient" value={verifiedName} />
+        <Row label="Bank" value={selectedBank?.name ?? ''} />
+        <Row label="Account" value={accountNumber} />
+        <Row label="Amount" value={currency + ' ' + amount.toLocaleString('en-NG', { minimumFractionDigits: 2 })} bold />
+      </View>
+      <TextInput style={st.input} placeholder="Add a note (optional)" value={narration} onChangeText={setNarration} placeholderTextColor={C.ghost} />
+      {error ? <Text style={st.error}>{error}</Text> : null}
+      <FPButton label="Send Money" onPress={handleSend} loading={loading} style={st.btn} />
+    </View>
+  );
+
+  if (step === 'processing') return (
+    <View style={[st.wrap, st.centered]}>
+      <ActivityIndicator size="large" color={C.brand} />
+      <Text style={st.title}>Sending...</Text>
+    </View>
+  );
+
+  if (step === 'done') return (
+    <View style={[st.wrap, st.centered]}>
+      <View style={st.successCircle}><Text style={{ fontSize: 28, color: C.green }}>OK</Text></View>
+      <Text style={st.title}>Sent!</Text>
+      <Text style={st.sub}>{currency} {amount.toLocaleString()} to {verifiedName}</Text>
+      <FPButton label="Done" onPress={onDone} style={st.btn} />
+    </View>
+  );
+
+  return null;
+}
+
+function Row({ label, value, bold }: { label: string; value: string; bold?: boolean }) {
+  return (
+    <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingVertical: S.sm, borderBottomWidth: 1, borderBottomColor: C.border }}>
+      <Text style={{ color: C.muted, fontSize: F.sm }}>{label}</Text>
+      <Text style={{ color: C.ink, fontWeight: bold ? '800' : '600', fontSize: F.sm }}>{value}</Text>
+    </View>
+  );
+}
+
+const st = StyleSheet.create({
+  wrap: { flex: 1, padding: S.lg },
+  centered: { justifyContent: 'center', alignItems: 'center' },
+  back: { marginBottom: S.md },
+  backText: { color: C.brand, fontSize: F.md, fontWeight: '600' },
+  title: { fontSize: F.xl, fontWeight: '800', color: C.ink, marginBottom: S.lg },
+  input: { backgroundColor: C.surface, borderRadius: R.md, padding: S.md, fontSize: F.md, color: C.ink, borderWidth: 1, borderColor: C.border, marginBottom: S.md },
+  bigInput: { backgroundColor: C.surface, borderRadius: R.md, padding: S.md, fontSize: 28, fontWeight: '800', color: C.ink, textAlign: 'center', letterSpacing: 3, borderWidth: 1, borderColor: C.border, marginBottom: S.md },
+  verified: { backgroundColor: C.greenLight, borderRadius: R.md, padding: S.sm, marginBottom: S.md },
+  verifiedText: { color: C.green, fontWeight: '700', fontSize: F.sm },
+  btn: { marginTop: S.sm },
+  bankRow: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: S.md, alignItems: 'center' },
+  bankName: { fontSize: F.md, color: C.ink },
+  arrow: { color: C.ghost, fontSize: F.lg },
+  card: { backgroundColor: C.surface, borderRadius: R.lg, padding: S.md, marginBottom: S.md },
+  error: { color: C.red, fontSize: F.sm, marginBottom: S.sm },
+  successCircle: { width: 80, height: 80, borderRadius: 40, backgroundColor: C.greenLight, justifyContent: 'center', alignItems: 'center', marginBottom: S.lg },
+  sub: { color: C.muted, fontSize: F.md, marginBottom: S.xl },
+});

package/src/ui/theme/index.ts

@@ -0,0 +1,24 @@
+export const C = {
+  ink: '#0B1D35',
+  brand: '#0052CC',
+  brandLight: '#E8F0FE',
+  green: '#00875A',
+  greenLight: '#E3FCEF',
+  red: '#DE350B',
+  redLight: '#FFEBE6',
+  amber: '#FF8B00',
+  white: '#FFFFFF',
+  surface: '#F4F5F7',
+  border: '#DFE1E6',
+  muted: '#6B778C',
+  ghost: '#B3BAC5',
+};
+
+export const R = { sm: 8, md: 12, lg: 16, xl: 20, full: 999 };
+export const S = { xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48 };
+export const F = { xs: 11, sm: 13, md: 15, lg: 17, xl: 20, xxl: 24, hero: 32 };
+
+export const shadow = {
+  sm: { shadowColor: '#0B1D35', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.07, shadowRadius: 6, elevation: 2 },
+  lg: { shadowColor: '#0B1D35', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.12, shadowRadius: 20, elevation: 8 },
+};

package/src/useFountainPay.ts

@@ -0,0 +1,95 @@
+// ─────────────────────────────────────────────────────────────
+// useFountainPay — The ONLY hook the host app ever uses.
+//
+// Usage:
+//   const pay = useFountainPay('your-api-key');
+//   await pay.initializeSDK(userInfo, callbacks);
+//   pay.send(500, 'NGN');
+//   pay.receive(200, 'NGN');
+//   const acct = await pay.generateAccountNumber({ accountName: 'John' });
+//   pay.listen();
+//   pay.destroy();
+// ─────────────────────────────────────────────────────────────
+import { useMemo } from 'react';
+import { FPEngine } from './engine/FPEngine';
+import { initClient } from './core/api/client';
+import type {
+  FPInstance, 
+  FPUserInfo, 
+  FPSDKOptions, 
+  FPCallbacks,
+  FPCurrency, 
+  FPGenerateAccountRequest, 
+  FPVirtualAccount,
+} from './core/types';
+
+export function useFountainPay(apiKey: string, options?: FPSDKOptions): FPInstance {
+  // Initialize HTTP client immediately so API calls can be made
+  // even before initializeSDK (e.g. generateAccountNumber for onboarding)
+  useMemo(() => {
+    initClient(apiKey, { baseUrl: options?.baseUrl, environment: options?.environment });
+  }, [apiKey]);
+
+  const instance = useMemo<FPInstance>(() => ({
+    /**
+     * Call this once after the user logs in.
+     * Starts proximity broadcasting, BLE peripheral, and BT listener.
+     */
+    async initializeSDK(user: FPUserInfo, callbacks?: FPCallbacks): Promise<void> {
+      await FPEngine.initialize(apiKey, user, options ?? {}, callbacks ?? {});
+    },
+
+    /**
+     * Open the Send Money sheet.
+     * @param amount  Major denomination (e.g. 500 for NGN 500)
+     * @param currency e.g. 'NGN', 'USD'
+     */
+    send(amount: number, currency: FPCurrency): void {
+      FPEngine.showSend(amount, currency);
+    },
+
+    /**
+     * Open the Receive Money sheet.
+     * @param amount  Expected amount (optional)
+     * @param currency e.g. 'NGN'
+     */
+    receive(amount?: number, currency: FPCurrency = 'NGN'): void {
+      FPEngine.showReceive(amount, currency);
+    },
+
+    /**
+     * Generate a virtual account number.
+     * No UI is shown — returns the account directly.
+     */
+    async generateAccountNumber(request: FPGenerateAccountRequest): Promise<FPVirtualAccount> {
+      return FPEngine.generateAccount(request);
+    },
+
+    /**
+     * Start listening for incoming Bluetooth payment requests.
+     * When one arrives, the SDK auto-shows the Accept/Decline modal.
+     * The result fires onPaymentReceived / onPaymentDeclined callbacks
+     * that were passed into initializeSDK.
+     */
+    listen(): void {
+      FPEngine.startListening();
+    },
+
+    /**
+     * Stop all background services. Call on logout.
+     */
+    destroy(): void {
+      FPEngine.destroy();
+    },
+
+    get isReady(): boolean {
+      return FPEngine.isReady();
+    },
+
+    get currentUser(): FPUserInfo | null {
+      return FPEngine.getUser();
+    },
+  }), [apiKey]);
+
+  return instance;
+}