react-native-fpay 0.2.9 → 0.3.2

package/src/ui/screens/ReceiveScreen.tsx

@@ -1,119 +1,270 @@
-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} 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 (
-    <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>
-  );
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Dimensions,
+  ScrollView,
+} from 'react-native';
+import styled from 'styled-components/native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Svg, { Path } from "react-native-svg";
+import Transfer from './sub/receivePayment/Transfer';
+import Qr from './sub/receivePayment/Qr';
+import Nfc from './sub/receivePayment/Nfc';
+
+
+const { width, height } = Dimensions.get('window');
+
+// Styled Components
+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.5}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 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>
+);
+
+type PAYMENTCHANNEL = "TRANSFER" | "QRCODE" | "NFC" | "BTH"
+
+// Main Component
+const ReceiveScreen = ({ amount, currency = 'NGN', user, account, onClose, onPaymentReceived, onError }: any) => {
+  const [mode, setMode] = useState<PAYMENTCHANNEL>('TRANSFER');
 
-  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>
+    <Container>
+      {mode === 'TRANSFER' && (<Transfer 
+        amount={amount as any}
+        description={""}
+        user={user}
+        recipient={account}
+        onClose={onClose}
+        onPaymentReceived={onPaymentReceived} 
+      />)}
+
+      {mode === 'QRCODE' && (<Qr 
+        amount={amount as any}
+        description={""}
+        onClose={onClose}
+        onPaymentReceived={onPaymentReceived}
+      />)}
+
+      {mode === 'NFC' && (<Nfc 
+        amount={amount as any}
+        description={""}
+        onClose={onClose}
+        onPaymentReceived={onPaymentReceived}
+      />)}
+
+      
+      
+        {/* Bottom Sheet */}
+      <BottomSheet>
+        <SheetHandle />
+        
+        <SheetScrollView showsVerticalScrollIndicator={false}>
+          <SectionTitle>Receive with</SectionTitle>
+          
+          <ActionsRow>
+            <ActionButton onPress={() => setMode('TRANSFER')}>
+              <ActionIconContainer color="#0a3d2e">
+                <Ionicons name="business-sharp" size={26} color="#ffffff" />
+              </ActionIconContainer>
+              <ActionLabel>With{'\n'}transfer</ActionLabel>
+            </ActionButton>
+            
+            <ActionButton onPress={() => setMode('QRCODE')}>
+              <ActionIconContainer color="#0a3d2e">
+                <QRIcon color="#FFF" size={22} />
+              </ActionIconContainer>
+              <ActionLabel>With{'\n'}QR</ActionLabel>
+            </ActionButton>
+            
+            <ActionButton onPress={() => setMode('NFC')}>
+              <ActionIconContainer color="#0a3d2e">
+                <NFCIcon size={26} color="#ffffff" />
+              </ActionIconContainer>
+              <ActionLabel>With{'\n'}NFC</ActionLabel>
+            </ActionButton>
+            
+            <ActionButton onPress={() => setMode('BTH')}>
+              <ActionIconContainer color="#0a3d2e">
+                <BluetoothIcon size={26} color="#ffffff" />
+              </ActionIconContainer>
+              <ActionLabel>With{'\n'}Bluetooth</ActionLabel>
+            </ActionButton>
+          </ActionsRow>
+          
+        </SheetScrollView>
+      </BottomSheet>
+     
+    </Container>
   );
-}
-
-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' },
-});
+};
+export default ReceiveScreen;
+

package/src/ui/screens/SendScreen.tsx

@@ -7,29 +7,29 @@ import React, { useState } from 'react';
 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';
-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';
+import { TransferSubScreen } from './sub/sendPayment/TransferSubScreen';
+import { NQRSubScreen } from './sub/sendPayment/NQRSubScreen';
+import { ProximitySubScreen } from './sub/sendPayment/ProximitySubScreen';
+import { BluetoothSubScreen } from './sub/sendPayment/BluetoothSubScreen';
+import { NFCSubScreen } from './sub/sendPayment/NFCSubScreen';
+import type { FPCurrency, FPCallbacks, FPTransaction, FPError, FPSendPaymentRequest, FPUserInfo, FPTransferRecipient } from '../../core/types';
 import styled from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import Svg, { Path } from 'react-native-svg';
+import { nfcAPI, nqrAPI, transferAPI } from '../../core/api';
+import { ButtonContainer, ContentContainer, CTAButton, CTAText, InputBox, InputContainer, StyledTextInput } from './styles';
+import OTPInputs from '../components/OtpInput';
+import ConfirmScreen from '../components/ConfirmScreen';
+import LoadingAnimation from '../components/LoadingAnimation';
 
 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: '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 {
+  user: FPUserInfo | null;
+  account: FPTransferRecipient | null;
   amount: number;
   currency: FPCurrency;
   onClose: () => void;
@@ -233,20 +233,86 @@ const ProximityIcon =({ color = "#111", size = 22 })=>(
 
 
 
-const SendScreen = ({ amount, currency, onClose, onPaymentSent, onError }: Props) => {
+const SendScreen = ({ user, account, amount, currency, onClose, onPaymentSent, onError }: Props) => {
   const [channel, setChannel] = useState<Channel>('TRANSFER');
+  const [transactionAmount, setTransactionAmount] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [showAmountModal, setShowAmountModal] = useState<boolean>(false);
+  const [showConfirmationModal, setShowConfirmationModal] = useState<boolean>(false);
+  
+
+  const [transactionPayload, setTransactionPayload] = useState<FPSendPaymentRequest>({} as FPSendPaymentRequest);
 
   const formatted = `${currency} ${(amount).toLocaleString('en-NG', { minimumFractionDigits: 2 })}`;
 
+  // { 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 }
+  
+  const handleContinue = (tx: FPSendPaymentRequest) => {
+
+    setTransactionPayload({...tx, sender: user ?? undefined});
+    if(tx.amount === 0){
+      setShowAmountModal(true);
+    }else{
+      setShowConfirmationModal(true);
+    }
+  }
+
+  const handleAmountContinue =()=>{
+    const updatedPayload: any = {...transactionPayload, amount:  parseFloat(transactionAmount)}
+    setTransactionPayload(updatedPayload as FPSendPaymentRequest);
+    setShowConfirmationModal(true);
+  }
+
+  const validateOtp = async(otp: string)=>{
+
+  }
+
+  const handleProcessingTransaction = async () => {
+    try {
+      setLoading(true);
+      let response: FPTransaction | null= null;
+      switch(transactionPayload?.channel){
+        case 'transfer':
+        case 'bluetooth':
+        case 'proximity':
+          response = await transferAPI.send({...transactionPayload, sender: user ?? undefined, narration: `Send ${formatted} to ${transactionPayload.recipient.accountName}`})
+        break;
+        case 'nqr':
+          response = await nqrAPI.pay({...transactionPayload, sender: user ?? undefined, narration: `Send ${formatted} to ${transactionPayload.recipient.accountName}`})
+        break;
+        case 'nfc':
+          response = await nfcAPI.pay({...transactionPayload, sender: user ?? undefined, narration: `Send ${formatted} to ${transactionPayload.recipient.accountName}`})
+        break;
+        default:
+          onError?.({message: 'Invalid channel'} as FPError);
+        break;
+      }
+
+      if(response?.status !== 'successful'){
+        onError?.({message: 'Transaction failed'} as FPError);
+        return;
+      }
+
+      onPaymentSent?.(response);
+    } catch (error) {
+      onError?.(error as FPError);
+    }finally{
+      setLoading(false);
+    }
+  }
+
   
 
   return (
     <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} />)}
+      {loading && (
+        <LoadingAnimation />
+      )}
+      {channel === 'TRANSFER' && (<TransferSubScreen amount={amount} currency={currency} onClose={onClose} onProcessTransaction={handleContinue} onError={onError} />)}
+      {channel === 'QRCODE' && (<NQRSubScreen amount={amount} currency={currency} onClose={onClose} onProcessTransaction={handleContinue} onError={onError} />)}
+      {channel === 'NFC' && (<NFCSubScreen amount={amount} currency={currency} onClose={onClose} onProcessTransaction={handleContinue} onError={onError} />)}
+      {channel === 'BTH' && (<BluetoothSubScreen amount={amount} currency={currency} onClose={onClose} onProcessTransaction={handleContinue} onError={onError} />)}
+      {channel === 'PXTR' && (<ProximitySubScreen amount={amount} currency={currency}  onClose={onClose} onProcessTransaction={handleContinue} onError={onError} />)}
       
       <BottomSheet>
         <SheetHandle />
@@ -292,6 +358,62 @@ const SendScreen = ({ amount, currency, onClose, onPaymentSent, onError }: Props
           </AddContactButton>
         </SheetScrollView>
       </BottomSheet>
+
+      {showAmountModal && (
+        <BottomSheet>
+          <SheetHandle />
+          
+          <SheetScrollView showsVerticalScrollIndicator={false}>
+            <SectionTitle>Enter amount</SectionTitle>
+            
+            <ActionsRow>
+              <InputContainer>
+                <InputBox>
+                  <StyledTextInput
+                    placeholder="Enter account number"
+                    placeholderTextColor="#d1d5db"
+                    value={transactionAmount}
+                    keyboardType="number-pad"
+                    returnKeyType='done'
+                    maxLength={10}
+                    onChangeText={(text) => {
+                      const numericText = text.replace(/[^0-9]/g, '');
+                      setTransactionAmount(numericText);
+                    }}
+                  />
+
+                </InputBox>
+              </InputContainer>
+              
+              <ContentContainer>
+                <ButtonContainer>
+                  <CTAButton activeOpacity={0.8} disabled={!transactionAmount} onPress={handleAmountContinue}>
+                    <CTAText>Continue</CTAText>
+                  </CTAButton>
+                </ButtonContainer> 
+              </ContentContainer>
+            </ActionsRow>
+            
+            <AddContactButton onPress={()=>setChannel('NFC')}>
+              <PrxyIconContainer  color="#0a3d2e">
+                <NFCIcon size={26} color="#ffffff" />
+              </PrxyIconContainer>
+              <ContactName>Use NFC payment</ContactName>
+            </AddContactButton>
+          </SheetScrollView>
+        </BottomSheet>
+      )}
+      {showConfirmationModal && (
+        <BottomSheet>
+          <SheetHandle />
+          
+          <SheetScrollView showsVerticalScrollIndicator={false}>
+            <SectionTitle>Summary</SectionTitle>
+            
+            <ConfirmScreen transaction={transactionPayload} onRecheck={()=>setShowConfirmationModal(false)} onContinue={handleProcessingTransaction} />
+          </SheetScrollView>
+        </BottomSheet>
+      )}
     </Container>
   );
 }