react-native-fpay 0.3.5 → 0.3.7

package/src/ui/screens/SendScreen.tsx

@@ -4,7 +4,15 @@
 // relevant sub-screen in the same modal sheet
 // ─────────────────────────────────────────────
 import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Dimensions, TextInput } 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/sendPayment/TransferSubScreen';
@@ -12,21 +20,39 @@ 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 type {
+  FPCurrency,
+  FPCallbacks,
+  FPTransaction,
+  FPError,
+  FPSendPaymentRequest,
+  FPUserInfo,
+  FPTransferRecipient,
+  FPSendWalletPaymentRequest,
+  FPTransactionResponse,
+} 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 {
+  ButtonContainer,
+  ContentContainer,
+  CTAButton,
+  CTAText,
+  InputBox,
+  InputContainer,
+  StyledTextInput,
+} from './styles';
 import OTPInputs from '../components/OtpInput';
 import ConfirmScreen from '../components/ConfirmScreen';
 import LoadingAnimation from '../components/LoadingAnimation';
+import { getFPStore } from '../../store/FPStore';
 
 const { width, height } = Dimensions.get('window');
 
 type Channel = 'TRANSFER' | 'QRCODE' | 'NFC' | 'BTH' | 'PXTR';
 
-
 interface Props extends FPCallbacks {
   user: FPUserInfo | null;
   account: FPTransferRecipient | null;
@@ -35,13 +61,11 @@ interface Props extends FPCallbacks {
   onClose: () => void;
 }
 
-
 const Container = styled(View)`
   flex: 1;
   background-color: #000000;
 `;
 
-
 // Bottom Sheet Styles
 const BottomSheet = styled(View)`
   position: absolute;
@@ -73,6 +97,19 @@ const SheetScrollView = styled(ScrollView)`
   flex: 1;
 `;
 
+const SheetHeader = styled(View)`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+`;
+
+const CloseBtn = styled(TouchableOpacity)`
+  padding: 8px;
+  border-radius: 50px;
+  background-color: #f3f4f6;
+`;
+
 const SectionTitle = styled(Text)`
   font-size: 18px;
   font-weight: 700;
@@ -96,7 +133,7 @@ const ActionIconContainer = styled(View)<{ color: string }>`
   width: 56px;
   height: 56px;
   border-radius: 100%;
-  background-color: ${props => props.color};
+  background-color: ${(props) => props.color};
   justify-content: center;
   align-items: center;
   elevation: 3;
@@ -106,8 +143,6 @@ const ActionIconContainer = styled(View)<{ color: string }>`
   shadow-radius: 4px;
 `;
 
-
-
 const ActionLabel = styled(Text)`
   font-size: 11px;
   color: #374151;
@@ -139,12 +174,11 @@ const AddContactButton = styled.TouchableOpacity`
 
   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'};
+  font-size: ${(props) => props.size || 24}px;
+  color: ${(props) => props.color || '#000000'};
 `;
 
 const AddCircle = styled.View`
@@ -164,7 +198,7 @@ const PrxyIconContainer = styled(View)<{ color: string }>`
   width: 44px;
   height: 44px;
   border-radius: 100%;
-  background-color: ${props => props.color};
+  background-color: ${(props) => props.color};
   justify-content: center;
   align-items: center;
   elevation: 3;
@@ -179,147 +213,399 @@ const ContactName = styled.Text`
   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 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 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 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 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 = ({ user, account, 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 [showConfirmationModal, setShowConfirmationModal] =
+    useState<boolean>(false);
 
-  const [transactionPayload, setTransactionPayload] = useState<FPSendPaymentRequest>({} as FPSendPaymentRequest);
+  const [transactionPayload, setTransactionPayload] = useState<
+    FPSendPaymentRequest | FPSendWalletPaymentRequest
+  >({} as FPSendPaymentRequest | FPSendWalletPaymentRequest);
 
-  const formatted = `${currency} ${(amount).toLocaleString('en-NG', { minimumFractionDigits: 2 })}`;
+  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);
+  const handleContinue = (
+    tx: FPSendPaymentRequest | FPSendWalletPaymentRequest | null
+  ) => {
+    console.log('Transaction Payload: ', tx);
+    setTransactionPayload(
+      tx as FPSendPaymentRequest | FPSendWalletPaymentRequest
+    );
     setShowConfirmationModal(true);
-  }
-
-  const validateOtp = async(otp: string)=>{
+  };
 
-  }
-
-  const handleProcessingTransaction = async () => {
+  const handleProcessingTransaction = async (temptId: string) => {
+    console.log('Got in here for processing');
     try {
       setLoading(true);
-      let response: FPTransaction | null= null;
-      switch(transactionPayload?.channel){
+      setShowConfirmationModal(false);
+      let response: FPTransactionResponse | 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;
+          if ('isBank' in transactionPayload && transactionPayload.isBank) {
+            response = await transferAPI.sendToBank(
+              transactionPayload as FPSendPaymentRequest,
+              temptId
+            );
+          } else {
+            response = await transferAPI.sendToWallet(
+              transactionPayload as FPSendWalletPaymentRequest,
+              temptId
+            );
+          }
+          break;
         case 'nqr':
-          response = await nqrAPI.pay({...transactionPayload, sender: user ?? undefined, narration: `Send ${formatted} to ${transactionPayload.recipient.accountName}`})
-        break;
+          response = await nqrAPI.pay(
+            {
+              ...transactionPayload,
+              sender: user ?? undefined,
+              narration: `Send ${formatted} to ${transactionPayload.recipient.accountName}`,
+            },
+            temptId
+          );
+          break;
         case 'nfc':
-          response = await nfcAPI.pay({...transactionPayload, sender: user ?? undefined, narration: `Send ${formatted} to ${transactionPayload.recipient.accountName}`})
-        break;
+          response = await nfcAPI.pay(
+            {
+              ...transactionPayload,
+              sender: user ?? undefined,
+              narration: `Send ${formatted} to ${transactionPayload.recipient.accountName}`,
+            },
+            temptId
+          );
+          break;
         default:
-          onError?.({message: 'Invalid channel'} as FPError);
-        break;
+          onError?.({ message: 'Invalid channel' } as FPError);
+          break;
       }
 
-      if(response?.status !== 'successful'){
-        onError?.({message: 'Transaction failed'} as FPError);
+      if (response?.status) {
+        onError?.({
+          message: response?.message || 'Transaction failed',
+        } as FPError);
         return;
       }
 
-      onPaymentSent?.(response);
+      onPaymentSent?.(response?.payload as FPTransaction);
     } catch (error) {
       onError?.(error as FPError);
-    }finally{
+    } finally {
       setLoading(false);
     }
-  }
-
-  
+  };
 
   return (
     <Container>
-      {loading && (
-        <LoadingAnimation />
+      {loading && <LoadingAnimation />}
+      {channel === 'TRANSFER' && (
+        <TransferSubScreen
+          amount={amount}
+          currency={currency}
+          onClose={onClose}
+          onProcessTransaction={handleContinue}
+          onError={onError}
+        />
       )}
-      {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} />)}
-      
+      {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
+          psspId={getFPStore().psspId || ''}
+          amount={amount}
+          currency={currency}
+          onClose={onClose}
+          onProcessTransaction={handleContinue}
+          onError={onError}
+        />
+      )}
+
       <BottomSheet>
         <SheetHandle />
-        
+
         <SheetScrollView showsVerticalScrollIndicator={false}>
           <SectionTitle>Pay and send</SectionTitle>
-          
+
           <ActionsRow>
             <ActionButton onPress={() => setChannel('TRANSFER')}>
               <ActionIconContainer color="#0a3d2e">
@@ -327,21 +613,21 @@ const SendScreen = ({ user, account, amount, currency, onClose, onPaymentSent, o
               </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" />
@@ -349,73 +635,39 @@ const SendScreen = ({ user, account, amount, currency, onClose, onPaymentSent, o
               <ActionLabel>Use{'\n'}Bluetooth</ActionLabel>
             </ActionButton>
           </ActionsRow>
-          
-          <AddContactButton onPress={()=>setChannel('NFC')}>
+
+          {/* <AddContactButton onPress={()=>setChannel('NFC')}>
             <PrxyIconContainer  color="#0a3d2e">
               <NFCIcon size={26} color="#ffffff" />
             </PrxyIconContainer>
             <ContactName>Use NFC payment</ContactName>
-          </AddContactButton>
+          </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} />
+            <SheetHeader>
+              <SectionTitle>Summary</SectionTitle>
+
+              <CloseBtn onPress={() => setShowConfirmationModal(false)}>
+                <Ionicons name="close" size={24} />
+              </CloseBtn>
+            </SheetHeader>
+
+            <ConfirmScreen
+              userId={getFPStore().psspId || ''}
+              transaction={transactionPayload}
+              onContinue={handleProcessingTransaction}
+            />
           </SheetScrollView>
         </BottomSheet>
       )}
     </Container>
   );
-}
+};
 
-export default SendScreen;
+export default SendScreen;