react-native-fpay 0.2.4 → 0.2.7

package/src/ui/modals/FPShell.tsx

@@ -5,16 +5,16 @@
 // 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 { Modal, View, Text, TouchableOpacity, StyleSheet, Animated, Dimensions, SafeAreaView, StatusBar, Platform } from 'react-native';
 import { _onEvent } from '../../engine/FPEngine';
-import { SendScreen } from '../screens/SendScreen';
+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');
+const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 
 type SheetMode = 'send' | 'receive' | null;
 
@@ -26,81 +26,181 @@ interface SheetState {
 
 export function FPShell() {
   const [sheet, setSheet] = useState<SheetState>({ mode: null });
+  const [visible, setVisible] = useState(false);
   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();
+    setVisible(true);
+    Animated.spring(slide, {
+      toValue: 0,
+      useNativeDriver: true,
+      tension: 60,
+      friction: 12,
+    }).start();
   };
 
   const close = () => {
-    Animated.timing(slide, { toValue: SCREEN_H, duration: 260, useNativeDriver: true }).start(() => {
+    Animated.timing(slide, {
+      toValue: SCREEN_H,
+      duration: 280,
+      useNativeDriver: true,
+    }).start(() => {
+      setVisible(false);
       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 }); });
+    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 title = sheet.mode === 'send' ? 'Send Money' : 'Receive Money';
+  const accentColor = sheet.mode === 'send' ? C.brand : C.green;
+
+
   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} />
+      {visible && (
+        <Animated.View
+          style={[st.fullscreen, { transform: [{ translateY: slide }] }]}
+        >
+          <StatusBar barStyle="dark-content" backgroundColor={C.white} />
+
+          <SafeAreaView style={st.safeArea}>
+            {/* ── Header ───────────────────────────────────────── */}
             <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>
+              {/* Close button — left side */}
+              <TouchableOpacity onPress={close} style={st.closeBtn} activeOpacity={0.7} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}>
+                <View style={st.closeIcon}>
+                  <View style={[st.closeLine, { transform: [{ rotate: '45deg' }] }]} />
+                  <View style={[st.closeLine, { transform: [{ rotate: '-45deg' }], position: 'absolute' }]} />
+                </View>
               </TouchableOpacity>
+
+              {/* Title — center */}
+              <View style={st.titleWrap}>
+                <Text style={st.title}>{title}</Text>
+              </View>
+
+              {/* Accent dot — right side (balances the close button visually) */}
+              <View style={[st.dot, { backgroundColor: accentColor }]} />
             </View>
 
-            {/* Read user + callbacks fresh at render time — not at mount time.
-                This ensures they're populated even if initializeSDK ran after
-                the shell mounted (which is always the case). */}
-            {sheet.mode === 'send' && (
-              <SendScreen
-                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() ?? undefined}
-                onClose={close}
-                onPaymentReceived={FPEngine.getCallbacks().onPaymentReceived}
-                onError={FPEngine.getCallbacks().onError}
-              />
-            )}
+            {/* ── Divider ───────────────────────────────────────── */}
+            <View style={st.divider} />
+
+            {/* ── Content ───────────────────────────────────────── */}
+            <View style={st.content}>
+              {sheet.mode === 'send' && (
+                <SendScreen
+                  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() ?? undefined}
+                  onClose={close}
+                  onPaymentReceived={FPEngine.getCallbacks().onPaymentReceived}
+                  onError={FPEngine.getCallbacks().onError}
+                />
+              )}
+            </View>
           </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' },
+  fullscreen: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: SCREEN_W,
+    height: SCREEN_H,
+    backgroundColor: C.white,
+    zIndex: 9999,
+    elevation: 99,
+  },
+  safeArea: {
+    flex: 1,
+    backgroundColor: C.white,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: S.lg,
+    paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight ?? 0) + S.sm : S.md,
+    paddingBottom: S.md,
+    backgroundColor: C.white,
+  },
+  closeBtn: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: C.surface,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeIcon: {
+    width: 14,
+    height: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeLine: {
+    width: 14,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: C.ink,
+  },
+  titleWrap: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: F.lg,
+    fontWeight: '800',
+    color: C.ink,
+    letterSpacing: -0.3,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 14,   // visually balances the close button width
+  },
+  divider: {
+    height: 1,
+    backgroundColor: C.border,
+    marginHorizontal: 0,
+  },
+  content: {
+    flex: 1,
+    backgroundColor: C.surface,
+  },
 });
+

package/src/ui/screens/ReceiveScreen.tsx

@@ -30,8 +30,8 @@ export function ReceiveScreen({ amount, currency = 'NGN', user, onClose, onPayme
     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} />;
+  if (channel === 'nqr') return <NQRSubScreen mode="receive" amount={amount} currency={currency} onDone={onClose} onError={onError} />;
+  if (channel === 'nfc') return <NFCSubScreen mode="receive" myWallet={myWallet} onDone={onClose} onError={onError} />;
 
   // Transfer — just show account details inline
   if (channel === 'transfer') return (

package/src/ui/screens/SendScreen.tsx

@@ -4,7 +4,7 @@
 // relevant sub-screen in the same modal sheet
 // ─────────────────────────────────────────────
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Dimensions, TextInput } from 'react-native';
 import { C, R, S, F, shadow } from '../theme';
 import { FPButton } from '../components/FPButton';
 import { TransferSubScreen } from './sub/TransferSubScreen';
@@ -13,15 +13,20 @@ import { ProximitySubScreen } from './sub/ProximitySubScreen';
 import { BluetoothSubScreen } from './sub/BluetoothSubScreen';
 import { NFCSubScreen } from './sub/NFCSubScreen';
 import type { FPCurrency, FPCallbacks } from '../../core/types';
+import styled from 'styled-components/native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Svg, { Path } from 'react-native-svg';
 
-type Channel = 'transfer' | 'nqr' | 'proximity' | 'bluetooth' | 'nfc';
+const { width, height } = Dimensions.get('window');
+
+type Channel = 'TRANSFER' | 'QRCODE' | 'NFC' | 'BTH' | 'PXTR';
 
 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' },
+  { id: 'TRANSFER',  emoji: '🏦', title: 'Bank Transfer',  desc: 'Send to any Nigerian bank account' },
+  { id: 'QRCODE',       emoji: '⬛', title: 'NQR Scan',       desc: 'Scan a merchant or person QR code' },
+  { id: 'PXTR', emoji: '📡', title: 'Nearby',         desc: 'People within 100m of you' },
+  { id: 'BTH', emoji: '📶', title: 'Bluetooth',      desc: 'Pair wirelessly and send' },
+  { id: 'NFC',       emoji: '📲', title: 'NFC Tap',        desc: 'Tap another phone to pay' },
 ];
 
 interface Props extends FPCallbacks {
@@ -30,57 +35,265 @@ interface Props extends FPCallbacks {
   onClose: () => void;
 }
 
-export function SendScreen({ amount, currency, onClose, onPaymentSent, onError }: Props) {
-  const [channel, setChannel] = useState<Channel | null>(null);
+
+const Container = styled(View)`
+  flex: 1;
+  background-color: #000000;
+`;
+
+
+// Bottom Sheet Styles
+const BottomSheet = styled(View)`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+  padding: 20px 20px 32px;
+  elevation: 20;
+  shadow-color: #000;
+  shadow-offset: 0px -4px;
+  shadow-opacity: 0.15;
+  shadow-radius: 12px;
+  max-height: ${height * 0.9}px;
+`;
+
+const SheetHandle = styled(View)`
+  width: 40px;
+  height: 4px;
+  background-color: #d1d5db;
+  border-radius: 2px;
+  align-self: center;
+  margin-bottom: 20px;
+`;
+
+const SheetScrollView = styled(ScrollView)`
+  flex: 1;
+`;
+
+const SectionTitle = styled(Text)`
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 16px;
+`;
+
+const ActionsRow = styled(View)`
+  flex-direction: row;
+  gap: 16px;
+  margin-bottom: 24px;
+`;
+
+const ActionButton = styled(TouchableOpacity)`
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+`;
+
+const ActionIconContainer = styled(View)<{ color: string }>`
+  width: 56px;
+  height: 56px;
+  border-radius: 100%;
+  background-color: ${props => props.color};
+  justify-content: center;
+  align-items: center;
+  elevation: 3;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.12;
+  shadow-radius: 4px;
+`;
+
+
+
+const ActionLabel = styled(Text)`
+  font-size: 11px;
+  color: #374151;
+  text-align: center;
+  line-height: 14px;
+`;
+
+const SearchContainer = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  background-color: #f9fafb;
+  border-radius: 12px;
+  padding: 14px 16px;
+  margin-bottom: 24px;
+  border: 1px solid #e5e7eb;
+`;
+
+const SearchInput = styled(TextInput)`
+  flex: 1;
+  margin-left: 10px;
+  font-size: 14px;
+  color: #1f2937;
+  padding: 0;
+`;
+
+const AddContactButton = styled.TouchableOpacity`
+  align-items: center;
+  margin-right: 20px;
+
+  flex-direction: row;
+  gap: 20px;
+
+`;
+
+const Icon = styled(Text)<{ size?: number; color?: string }>`
+  font-size: ${props => props.size || 24}px;
+  color: ${props => props.color || '#000000'};
+`;
+
+const AddCircle = styled.View`
+  width: 44px;
+  height: 44px;
+  border-radius: 32px;
+  background-color: #fff;
+  border-width: 2px;
+  border-color: #e0e0e0;
+  border-style: dashed;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 8px;
+`;
+
+const PrxyIconContainer = styled(View)<{ color: string }>`
+  width: 44px;
+  height: 44px;
+  border-radius: 100%;
+  background-color: ${props => props.color};
+  justify-content: center;
+  align-items: center;
+  elevation: 3;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.12;
+  shadow-radius: 4px;
+`;
+
+const ContactName = styled.Text`
+  font-size: 12px;
+  color: #000;
+`;
+
+const ScanIcon = ({ color = "#111", size = 22 }) => (
+    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
+      <Path d="M6 3H3V6" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+      <Path d="M2 12H12L22 12" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+      <Path d="M9 19V17V15" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+      <Path d="M12 16V15.5V15" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+      <Path d="M15 17V16V15" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+      <Path d="M12 21V19.5V18" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+      <Path d="M18 3H21V6" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+      <Path d="M6 21H3V18" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+      <Path d="M18 21H21V18" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+    </Svg>
+);
+
+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 NFCIcon =({ color = "#111", size = 22 })=>(
+    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
+        <Path d="M12 19.51L12.01 19.4989" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+        <Path d="M2 8C8 3.5 16 3.5 22 8" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+        <Path d="M5 12C9 9 15 9 19 12" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+        <Path d="M8.5 15.5C10.7504 14.1 13.2498 14.0996 15.5001 15.5" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+    </Svg>
+)
+
+const QRIcon =({ color = "#111", size = 22 })=>(
+    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
+        <Path fillRule="evenodd" clipRule="evenodd" d="M2.25 3C2.25 2.58579 2.58579 2.25 3 2.25H6C6.41421 2.25 6.75 2.58579 6.75 3C6.75 3.41421 6.41421 3.75 6 3.75H3.75V6C3.75 6.41421 3.41421 6.75 3 6.75C2.58579 6.75 2.25 6.41421 2.25 6V3Z" fill="#fff" />
+        <Path fillRule="evenodd" clipRule="evenodd" d="M17.25 3C17.25 2.58579 17.5858 2.25 18 2.25H21C21.4142 2.25 21.75 2.58579 21.75 3V6C21.75 6.41421 21.4142 6.75 21 6.75C20.5858 6.75 20.25 6.41421 20.25 6V3.75H18C17.5858 3.75 17.25 3.41421 17.25 3Z" fill="#fff" />
+        <Path fillRule="evenodd" clipRule="evenodd" d="M3 17.25C3.41421 17.25 3.75 17.5858 3.75 18V20.25H6C6.41421 20.25 6.75 20.5858 6.75 21C6.75 21.4142 6.41421 21.75 6 21.75H3C2.58579 21.75 2.25 21.4142 2.25 21V18C2.25 17.5858 2.58579 17.25 3 17.25Z" fill="#fff" />
+        <Path fillRule="evenodd" clipRule="evenodd" d="M21 17.25C21.4142 17.25 21.75 17.5858 21.75 18V21C21.75 21.4142 21.4142 21.75 21 21.75H18C17.5858 21.75 17.25 21.4142 17.25 21C17.25 20.5858 17.5858 20.25 18 20.25H20.25V18C20.25 17.5858 20.5858 17.25 21 17.25Z" fill="#fff" />
+        <Path fillRule="evenodd" clipRule="evenodd" d="M12.9004 6.6654C12.3462 6.33289 11.6538 6.33289 11.0996 6.6654L7.09963 9.0654C6.57252 9.38167 6.25 9.95131 6.25 10.566V14.4336C6.25 15.0483 6.57252 15.618 7.09963 15.9342L11.0996 18.3342C11.6538 18.6668 12.3462 18.6668 12.9004 18.3342L16.9004 15.9342C17.4275 15.618 17.75 15.0483 17.75 14.4336V10.566C17.75 9.95131 17.4275 9.38167 16.9004 9.0654L12.9004 6.6654ZM9.3642 10.6785C9.00209 10.4773 8.5455 10.6078 8.34437 10.9699C8.14324 11.332 8.27373 11.7886 8.63583 11.9898L11.25 13.4418V16.0001C11.25 16.4144 11.5858 16.7501 12 16.7501C12.4142 16.7501 12.75 16.4144 12.75 16.0001V13.4456C12.9152 13.3554 13.1243 13.241 13.3607 13.1115C13.9447 12.7916 14.6961 12.3787 15.3642 12.0077C15.7263 11.8066 15.8568 11.35 15.6557 10.9879C15.4546 10.6257 14.998 10.4952 14.6359 10.6964C13.9716 11.0653 13.223 11.4766 12.6401 11.796C12.3908 11.9325 12.172 12.0521 12.0032 12.1443L9.3642 10.6785Z" fill="#fff" />
+    </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>
+)
+
+
+
+const SendScreen = ({ amount, currency, onClose, onPaymentSent, onError }: Props) => {
+  const [channel, setChannel] = useState<Channel>('TRANSFER');
 
   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>
+    <Container>
+      {channel === 'TRANSFER' && (<TransferSubScreen amount={amount} currency={currency} onDone={onClose} onSuccess={onPaymentSent} onError={onError} />)}
+      {channel === 'QRCODE' && (<NQRSubScreen mode="send" amount={amount} currency={currency} onDone={onClose} onSuccess={onPaymentSent} onError={onError} />)}
+      {channel === 'NFC' && (<NFCSubScreen mode="send" amount={amount} currency={currency} onDone={onClose} onSuccess={onPaymentSent} onError={onError} />)}
+      {channel === 'BTH' && (<BluetoothSubScreen mode="send" amount={amount} currency={currency} onDone={onClose} onSuccess={onPaymentSent} onError={onError} />)}
+      {channel === 'PXTR' && (<ProximitySubScreen amount={amount} currency={currency} onDone={onClose} onSuccess={onPaymentSent} onError={onError} />)}
+      
+      <BottomSheet>
+        <SheetHandle />
+        
+        <SheetScrollView showsVerticalScrollIndicator={false}>
+          <SectionTitle>Pay and send</SectionTitle>
+          
+          <ActionsRow>
+            <ActionButton onPress={() => setChannel('TRANSFER')}>
+              <ActionIconContainer color="#0a3d2e">
+                <Ionicons name="business-sharp" size={26} color="#ffffff" />
+              </ActionIconContainer>
+              <ActionLabel>To bank{'\n'}account</ActionLabel>
+            </ActionButton>
+            
+            <ActionButton onPress={() => setChannel('QRCODE')}>
+              <ActionIconContainer color="#0a3d2e">
+                <QRIcon color="#FFF" size={22} />
+              </ActionIconContainer>
+              <ActionLabel>Scan{'\n'}QR</ActionLabel>
+            </ActionButton>
+            
+            <ActionButton onPress={() => setChannel('PXTR')}>
+              <ActionIconContainer color="#0a3d2e">
+                <ProximityIcon size={44} color="#FFF" />
+              </ActionIconContainer>
+              <ActionLabel>Use{'\n'}Proximity</ActionLabel>
+            </ActionButton>
+            
+            <ActionButton onPress={() => setChannel('BTH')}>
+              <ActionIconContainer color="#0a3d2e">
+                <BluetoothIcon size={26} color="#ffffff" />
+              </ActionIconContainer>
+              <ActionLabel>Use{'\n'}Bluetooth</ActionLabel>
+            </ActionButton>
+          </ActionsRow>
+          
+          <AddContactButton onPress={()=>setChannel('NFC')}>
+            <PrxyIconContainer  color="#0a3d2e">
+              <NFCIcon size={26} color="#ffffff" />
+            </PrxyIconContainer>
+            <ContactName>Use NFC payment</ContactName>
+          </AddContactButton>
+        </SheetScrollView>
+      </BottomSheet>
+    </Container>
   );
 }
 
-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 },
-});
+export default SendScreen;

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

@@ -199,15 +199,18 @@ 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,
+  mode, 
+  amount, 
+  currency,
+  onDone, 
+  onSuccess, 
+  onError,
 }: Props) {
   const [devices, setDevices] = useState<FintechDevice[]>([]);
   const [scanning, setScanning] = useState(false);