transfer fund implemented

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -14,7 +14,7 @@ export default function InputCom({
   forgotPassword,
   onClick,
   disable,
-  blurHandler,
+  blurHandler
 }) {
   const inputRef = useRef(null)
   // Entry Validation

src/components/MyWallet/AddRecipient.jsx

@@ -1,9 +1,12 @@
 import React, {useEffect, useState} from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import Icons from '../Helpers/Icons'
 import usersService from '../../services/UsersService'
 import InputCom from '../Helpers/Inputs/InputCom'
 
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import {toast} from 'react-toastify'
+
 import {Formik, Form} from 'formik'
 import * as Yup from 'yup'
 
@@ -18,7 +21,7 @@ const validationSchema = Yup.object().shape({
       .max(25, 'Maximum 25 characters')
       .required('Lastname is required'),
     country: Yup.string()
-      .min(1, 'Minimum 3 characters')
+      .min(1, 'Minimum 1 characters')
       .max(25, 'Maximum 25 characters')
       .required('Country is required'),
     bank: Yup.string()
@@ -34,7 +37,7 @@ const validationSchema = Yup.object().shape({
     .required('Repeat Account Number is required')
     .oneOf([Yup.ref('accountNumber'), null], 'Must match Account Number'),
     accountType: Yup.string()
-      .min(3, 'Minimum 3 characters')
+      .min(1, 'Minimum 3 characters')
       .max(25, 'Maximum 25 characters')
       .required('Account Type is required'),
     city: Yup.string()
@@ -63,6 +66,10 @@ function AddRecipient() {
 
     const apiURL = new usersService()
 
+    const navigate = useNavigate()
+
+    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
+
     let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
         loading: true,
         data: []
@@ -78,14 +85,36 @@ function AddRecipient() {
         data: []
     })
 
-    //FUNCTION TO HANDLE SUBMIT
+    //FUNCTION TO HANDLE ADD RECIPIENT SUBMIT
     const handleSubmit = (values, helpers) => {
-        // setRequestState({message: '', loading: true, status: false})
+        setRequestStatus({message: '', loading: true, status: false})
-        console.log('working')
 
-        //valid inputs before submitting. Just for texting remove later       
+        let reqData = { //REQUEST DATA FOR API CALL
+            firstname: values.firstname,
+            lastname: values.lastname,
+            bank_code: values.bank,
+            account_no: values.accountNumber,
+            account_type: values.accountType,
+            country: values.country,
+            state: values.state,
+            city: values.city
+        }
+
+        //CALL TO ADD RECIPIENT API
+        apiURL.addRecipient(reqData).then((res)=>{
+            if(res.data.internal_return < 0){
+                setRequestStatus({message: 'could not add recipient, try again!', loading: false, status: true})
+                return
+            }
+            // setRequestStatus({message: 'Recipient Added Successfully!', loading: false, status: true})
+            toast.success("Recipient Added Successfully!");
+            setTimeout(()=>{navigate('../transfer-fund',{replace:true})},1000)
+        }).catch((error)=>{
+            setRequestStatus({message: 'Opps! an error occured! Try again later', loading: false, status: false})
+        })    
     }
 
+
     // FUNCTION TO GET COUNTRIES
     const getCountry = ()=> { 
         apiURL.getSignupCountryData().then((res)=>{
@@ -205,7 +234,7 @@ function AddRecipient() {
                                     <div className='add-recipient w-full'>
                                         <label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Bank Name <span className='text-red-500'>*</span></label>
                                         <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='bank' 
-                                        ovalue={props.values.bank}
+                                        value={props.values.bank}
                                         onChange={props.handleChange}
                                         onBlur={props.handleBlur}
                                         >
@@ -216,7 +245,7 @@ function AddRecipient() {
                                             <>
                                                 <option className='text-slate-500 text-lg' value="">Select...</option>
                                                 {bankName.data.map((item, index)=>(
-                                                    <option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
+                                                    <option key={index} className='text-slate-500 text-lg' value={item.code}>{item.name}</option>
                                                 ))}
                                             </>
                                             :
@@ -273,7 +302,7 @@ function AddRecipient() {
                                             <>
                                                 <option className='text-slate-500 text-lg' value="">Select...</option>
                                                 {accType.data.map((item, index)=>(
-                                                    <option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
+                                                    <option key={index} className='text-slate-500 text-lg' value={item.value}>{item.name}</option>
                                                 ))}
                                             </>
                                             :
@@ -313,14 +342,20 @@ function AddRecipient() {
                                     {(props.errors.city && props.touched.city) && <p className="text-sm text-red-500">{props.errors.city}</p>}
                                     </div>
                                 </div>
-
                                 {/* end of inputs starts here */}
 
+                                {/* REQUEST ERROR DISPLAY */}
+                                {requestStatus.message && <p className='text-sm text-red-500'>{requestStatus.message}</p>}
+
                                 <div className='add-recipient-btn flex justify-end items-center py-4'>
+                                    {requestStatus.loading ? 
+                                    <LoadingSpinner size={6} color='sky-blue' />
+                                    :
                                     <button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
                                         <span className='pr-2'>ADD RECIPIENT</span>
                                         <Icons name="arrows" />
                                     </button>
+                                    }
                                 </div>
                         </Form>
                         )}

src/components/MyWallet/Balance.jsx

@@ -31,11 +31,11 @@ function Balance({wallet, payment, coupon, purchase}) {
                                 </div>
                                 <div className='balance-info'>
                                     <p className='py-2'>balance</p>
-                                    <span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*1).toFixed(2)}</span>
+                                    <span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*0.01).toFixed(2)}</span>
                                 </div>
                                 <div className='balance-info'>
                                     <p className='py-2'>Escrow</p>
-                                    <span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*1).toFixed(2)}</span>
+                                    <span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*0.01).toFixed(2)}</span>
                                 </div>
                             </div>
 

src/components/MyWallet/ConfirmTransfer.jsx

@@ -0,0 +1,165 @@
+import React, {useState, useEffect} from 'react'
+import {useLocation, useNavigate} from 'react-router-dom'
+import RecentActivityTable from './WalletComponent/RecentActivityTable'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import InputCom from '../Helpers/Inputs/InputCom'
+import {toast} from 'react-toastify'
+
+import usersService from '../../services/UsersService'
+
+function ConfirmTransfer({payment, wallet}) {
+    const apiURL = new usersService()
+
+    const navigate = useNavigate()
+    
+    let {state} = useLocation()
+    // what happens if not state redirect user
+    if(!state){
+        navigate('../transfer-fund',{replace: true})
+    }
+
+    let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
+    let [pageLoading, setPageLoading] = useState(true)
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = () => {
+        setRequestStatus({message: '', loading: true, status: false})
+        let reqData = {
+            amount: Number(state.amount),
+            Fee: Number(state.fee),
+            recipientid: Number(state.recipientID)
+        }
+        apiURL.sendMoney(reqData).then((res)=>{
+            if(res.data.internal_return < 0){
+                setRequestStatus({message: 'Could not perform transaction', loading: false, status: false})
+                return
+            }
+            setRequestStatus({message: 'transfer successful', loading: false, status: true})
+            toast.success('Transfer sucessful')
+            setTimeout(()=>{
+                navigate('/', {replace: true})
+            }, 1000)
+        }).catch(error=>{
+            setRequestStatus({message: 'Opps! something went wrong! Try Again', loading: false, status: false})
+        })
+    }
+
+    useEffect(()=>{
+        setPageLoading(false)
+    },[])
+    return (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+            {pageLoading ? 
+                <LoadingSpinner size='8' color='sky-blue' />
+            :
+                (
+                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+                        <div className='px-4 md:px-8 py-4'>
+                            {wallet.loading ?
+                                <LoadingSpinner size='8' color='sky-blue' />
+                                :
+                                wallet.data.length ? 
+                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>
+                                {wallet.data.map(item => {
+                                    if(item.description == 'Naira'){
+                                        return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*0.01).toFixed(2)}`
+                                    }
+                                })}
+                                </h2>
+                                :
+                                wallet.error ? 
+                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>Opps! An Error Occured</h2>
+                                :
+                                <h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>No Wallet Information Found!</h2>
+                            }
+                        </div>
+                        <hr />
+                        <div className='px-4 md:px-8 py-4 add-fund-info'>
+                                <h2 className='my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium'>Confirm Withdraw to Account</h2>
+                                {/* AMOUNT */}
+                                <div className="field w-full mb-3">
+                                    <InputCom
+                                        label="Amount:"
+                                        type="text"
+                                        name="amount"
+                                        value={state?.amount || ''}
+                                        disable={true}
+                                    />
+                                </div>
+
+                                {/* RECIPIENT ACC: */}
+                                <div className="field w-full mb-3">
+                                    <InputCom
+                                        label="Recipient Acc:"
+                                        type="text"
+                                        name="recipient"
+                                        value={state?.details.recipient || ''}
+                                        disable={true}
+                                    />
+                                </div>
+
+                                {/* PROCESSING FEE: */}
+                                <div className="field w-full mb-3">
+                                    <InputCom
+                                        label="Processing Fee:"
+                                        type="text"
+                                        name="processingFee"
+                                        value={state?.fee || ''}
+                                        disable={true}
+                                    />
+                                </div>
+
+                                {/* TOTAL */}
+                                <div className="field w-full mb-3">
+                                    <InputCom
+                                        label="Total"
+                                        type="text"
+                                        name="total"
+                                        value={state?.total || ''}
+                                        disable={true}
+                                    />
+                                </div>
+
+                                {/* COMMENT/NOTE */}
+                                <div className="field w-full mb-3">
+                                    <InputCom
+                                        label="Comment/Note:"
+                                        type="text"
+                                        name="comment"
+                                        value={state?.comment || ''}
+                                        disable={true}
+                                    />
+                                </div>
+                        </div>
+
+                        <hr />
+                        {requestStatus.message && <p className={`text-base ${requestStatus.status? 'text-green-500' : 'text-red-500'} px-4 md:px-8 py-4`}>{requestStatus.message}</p>}
+                        <div className='px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center'>
+                            {requestStatus.loading ? 
+                            <LoadingSpinner size='8' color='sky-blue' />
+                            :
+                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Transfer</button>
+                            }
+                        </div>
+                    </div>
+                </div>
+                )
+            }
+    
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
+                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    {payment.loading ?
+                    <LoadingSpinner size='16' color='sky-blue' />
+                    :
+                    <RecentActivityTable  payment={payment}/>
+                    }
+                </div>
+            </div>
+        </div>
+      )
+}
+
+export default ConfirmTransfer

src/components/MyWallet/TransferFund.jsx

@@ -1,29 +1,48 @@
 import React, {useEffect, useState} from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
+import InputCom from '../Helpers/Inputs/InputCom'
 
 import usersService from '../../services/UsersService'
 
+import {toast} from 'react-toastify'
+
+import {Formik, Form} from 'formik'
+import * as Yup from 'yup'
+
+const validationSchema = Yup.object().shape({
+    amount: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, 'Amount must be greater than 0')
+    .required('Amount is required'),
+    recipientID: Yup.string()
+      .min(1, 'Minimum 1 characters')
+      .max(50, 'Maximum 50 characters')
+      .required('Recipient is required'),
+  })
+  
+  const initialValues = {
+    amount: '',
+    recipientID: '',
+    comment: '',
+  }
+
 function TransferFund({payment, wallet}) {
-    const apiCall = new usersService()
+    const apiCall = new usersService() // API CLASS CALL
 
-    let [newFee, setNewFee] = useState(false)
+    const navigate = useNavigate()
 
-    let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
+    let [requestStatus, setRequestStatus] = useState(false)
+
+    let [recipients, setRecipients] = useState({ // FOR COUPON HISTORY
         loading: true,
         data: [],
         error: false
     })
 
-    let [sendMoneyFee, setSendMoneyFee] = useState({fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
+    let [sendMoneyFee, setSendMoneyFee] = useState({loading: false, fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
 
-    //STATE FOR CONTROLLED INPUTS
-    let [inputs, setInputs] = useState({
-        amount: '0',
-        recipient: '',
-        comment: ''
-    })
 
     //FUNCTION TO GET RECIPIENT LIST
     const getRecipients = ()=>{
@@ -39,158 +58,172 @@ function TransferFund({payment, wallet}) {
     }
 
     //FUNCTION TO GET SEND MONEY FEE
-    const getSendMoneyFee = ()=>{
+    const getSendMoneyFee = ({target:{value}})=>{
-        let {amount} = inputs
+        setSendMoneyFee({loading: true, fee: 0, total: 0})
+        let amount = value
         if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
-            setSendMoneyFee({fee: 0, total: 0})
+            setSendMoneyFee({loading: false, fee: 0, total: 0})
             return
         }
         apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
-            setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
+            setSendMoneyFee({loading: false, fee: res.data.processing_fee, total: res.data.total_amount})
         }).catch((error)=>{
-            setSendMoneyFee({fee: 0, total: 0})
+            setSendMoneyFee({loading: false, fee: 0, total: 0})
         })
     }
 
 
-    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
-        setInputs(prev => ({...prev, [name]:value}))
-    }
-
     //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = (e) => {
+    const handleSubmit = (values, helpers) => {
-        e.preventDefault();
+        setRequestStatus(true)
+        let recipientDetails = recipients.data?.filter(item => item.recipient_id == values.recipientID)
+        let stateData = {...values, ...sendMoneyFee, details:{...recipientDetails[0]}}
 
-        //valid inputs before submitting. Just for texting remove later. check amoutn to be number
+        setTimeout(()=>{
-    
+            setRequestStatus(false)
-        setInputs({
+            navigate('confirm-transfer', {state: stateData})
-            amount: '0',
+        }, 1000)
-            recipient: '',
-            comment: ''
-        })
     }
 
     useEffect(()=>{
         getRecipients()
-        getSendMoneyFee()
+    },[])
-    },[newFee])
     return (
         <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                 <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-                   <form className='transfer-fund-info' onSubmit={handleSubmit}>
+                    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-                        {wallet.loading ?
+                        {(props)=>{
-                        <LoadingSpinner size='8' color='sky-blue' />
+                        return (
-                        :
+                            <Form className='transfer-fund-info'>
-                        wallet.data.length ? 
+                                    {wallet.loading ?
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
+                                    <LoadingSpinner size='8' color='sky-blue' />
-                        {wallet.data.map(item => {
+                                    :
-                            if(item.description == 'Naira'){
+                                    wallet.data.length ? 
-                                return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
-                            }
+                                    {wallet.data.map(item => {
-                        })}
+                                        if(item.description == 'Naira'){
-                        </h2>
+                                            return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*0.01).toFixed(2)}`
-                        :
+                                        }
-                        wallet.error ? 
+                                    })}
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
+                                    </h2>
-                        :
+                                    :
-                        <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
+                                    wallet.error ? 
-                        }
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
-                        <div className='my-3 md:flex items-center justify-between space-x-2'>
+                                    :
-                            <div className='transfer-input w-full md:w-1/2'>
+                                    <h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
-                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
-                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                    value={inputs.amount} 
-                                    name='amount' 
-                                    type="text" 
-                                    placeholder='Amount' 
-                                    required
-                                    onChange={handleChange}
-                                    onMouseEnter={()=>{setNewFee(false)}}
-                                    onMouseLeave={()=>{setNewFee(true)}}
-                                    />
-                            </div>
-                            <div className='transfer-input w-full md:w-1/2'>
-                                <label className='w-full text-slate-600 text-lg'>Fee <span className='text-red-500'>*</span></label>
-                                <input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                    value={sendMoneyFee.fee} 
-                                    name='fee' 
-                                    type="text" 
-                                    placeholder='Fee' 
-                                    required
-                                    disabled
-                                    />
-                            </div>
-                        </div>
-
-                        <div className='my-3 md:flex items-center justify-end space-x-2'>
-                            <div className='transfer-input w-full md:w-1/2'>
-                                <label className='w-full text-slate-600 text-lg'>Total <span className='text-red-500'>*</span></label>
-                                <input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
-                                    value={sendMoneyFee.total} 
-                                    name='total' 
-                                    type="text" 
-                                    placeholder='Total' 
-                                    required
-                                    disabled
-                                    />
-                            </div>
-                        </div>
-
-                        <div className='relative my-3 md:flex items-center'>
-                            <div className='transfer-input w-full'>
-                                <div className='flex items-center justify-start'>
-                                    <label className='text-slate-600 text-lg'>Recipient 
-                                        <span className='text-red-500 mx-2'>*</span> 
-                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
-                                    </label>
-                                    <Link to='add-recipient' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
-                                </div>
-                                <select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' value={inputs.recipient} name='recipient' onChange={handleChange}>
-                                    {recepients.loading ?
-                                     <option className='text-slate-500 text-lg' value="">Loading...</option>
-                                     :
-                                     recepients.data.length ?
-                                     <> 
-                                     <option className='text-slate-500 text-lg' value="">Select...</option>
-                                     {recepients.data.map((item, index)=>(
-                                        <option key={index} value={item.account_no} className='text-slate-500 text-lg'>{item.recipient}</option>
-                                     ))}
-                                     </>
-                                     :
-                                     recepients.error ?
-                                     <option className='text-slate-500 text-lg' value="">Could'nt Load, try again!</option>
-                                     :
-                                     <option className='text-slate-500 text-lg' value="">No Recipient Found! Click Add to Add</option>
                                     }
-                                </select>
+                                    <div className="xl:flex xl:space-x-7 mb-6">
-                            </div>
-                        </div>
 
-                        <div className='my-3 md:flex items-center'>
+                                        <div className="field w-full mb-6 xl:mb-0">
-                            <div className='transfer-input w-full'>
+                                            <InputCom
-                                <label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
+                                                label="Amount"
-                                <input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                                type="text"
-                                    value={inputs.comment} 
+                                                name="amount"
-                                    name='comment' 
+                                                placeholder='0'
-                                    type="text" 
+                                                value={props.values.amount}
-                                    placeholder='Comment' 
+                                                inputHandler={props.handleChange}
-                                    required
+                                                blurHandler={(e)=>{
-                                    onChange={handleChange}
+                                                    getSendMoneyFee(e)
-                                    />
+                                                    props.handleBlur
-                            </div>
+                                                }}
-                        </div>
+                                                // onMouseLeave={(e)=>{getSendMoneyFee(e)}}
+                                            />
+                                            {(props.errors.amount && props.touched.amount) && <p className="text-sm text-red-500">{props.errors.amount}</p>}
+                                        </div>
                                         
-                        <div className='transfer-fund-btn flex justify-end items-center py-4'>
+                                        <div className="field w-full">
-                            <button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                                            <InputCom
-                        </div>
+                                                label="Fee"
-                   </form>
+                                                type="text"
+                                                name="fee"
+                                                value={sendMoneyFee.loading ? 'loading' : sendMoneyFee.fee}
+                                                disable={true}
+                                            />
+                                        </div>
+                                    </div>
+
+                                    <div className='md:flex items-center justify-end'>
+                                        <div className="field w-full lg:w-1/2 mb-6">
+                                            <InputCom
+                                                label="Total"
+                                                type="text"
+                                                name="total"
+                                                value={sendMoneyFee.loading ? 'loading' : sendMoneyFee.total}
+                                                disable={true}
+                                            />
+                                        </div>
+                                    </div>
+                                    
+                                    <div className='w-full'>
+                                        <div className='relative my-3 md:flex items-center'>
+                                            <div className='transfer-input w-full'>
+                                                <div className='flex items-center justify-start py-2'>
+                                                    <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Recipient 
+                                                        <span className='text-red-500 mx-2'>*</span> 
+                                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
+                                                    </label>
+                                                    <Link to='add-recipient' className='mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                                </div>
+                                                <select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' value={props.values.recipientID} name='recipientID' onChange={props.handleChange} onBlur={props.handleBlur}>
+                                                    {recipients.loading ?
+                                                    <option className='text-slate-500 text-lg' value="">Loading...</option>
+                                                    :
+                                                    recipients.data.length ?
+                                                    <> 
+                                                    <option className='text-slate-500 text-lg' value="">Select...</option>
+                                                    {recipients.data.map((item, index)=>(
+                                                        <option key={index} value={item.recipient_id} className='text-slate-500 text-lg'>{item.recipient}</option>
+                                                    ))}
+                                                    </>
+                                                    :
+                                                    recipients.error ?
+                                                    <option className='text-slate-500 text-lg' value="">Could'nt Load, try again!</option>
+                                                    :
+                                                    <option className='text-slate-500 text-lg' value="">No Recipient Found! Click Add to Add</option>
+                                                    }
+                                                </select>
+                                            </div>
+                                        </div>
+                                        {(props.errors.recipientID && props.touched.recipientID) && <p className="text-sm text-red-500">{props.errors.recipientID}</p>}
+                                    </div>
+
+                                    <div className="field w-full mb-6">
+                                        {/* <InputCom
+                                            label="Comment"
+                                            type="text"
+                                            name="comment"
+                                            value={inputs.comment}
+                                            inputHandler={handleChange}
+                                        /> */}
+                                        <label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Comment</label>
+                                        <textarea style={{resize: 'none'}}
+                                        className='text-base px-6 text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none' 
+                                        name="comment" 
+                                        value={props.values.comment}
+                                        onChange={props.handleChange}
+                                        onBlur={props.handleBlur}
+                                        cols="30" 
+                                        rows="2"
+                                        />
+                                    </div>
+
+                                    <div className='transfer-fund-btn flex justify-end items-center py-4'>
+                                        {requestStatus ?
+                                        <LoadingSpinner size='8' color='sky-blue' />
+                                        :
+                                        <button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                                        }
+                                    </div>
+                            </Form>
+                        )
+                        }}
+                   </Formik>
                 </div>
             </div>
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
                     <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
                     {payment.loading ?

src/components/MyWallet/Wallet.jsx

@@ -8,6 +8,7 @@ import Balance from './Balance'
 import TransferFund from './TransferFund'
 import AddFund from './AddFund'
 import AddRecipient from './AddRecipient'
+import ConfirmTransfer from './ConfirmTransfer'
 
 function Wallet() {
   return (
@@ -113,8 +114,9 @@ const WalletRoutes = () => {
                 <Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
                 <Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
                 <Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
-                <Route path='*' element={<Navigate to='/' />} />
                 <Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
+                <Route path='transfer-fund/confirm-transfer' element={<ConfirmTransfer payment={paymentHistory} wallet={walletList} />} />
+                <Route path='*' element={<Navigate to='/' />} />
             </Route>
         </Routes>
     )

src/components/MyWallet/WalletHeader.jsx

@@ -58,7 +58,7 @@ export default function WalletHeader(props) {
                                             </div>
                                             <div>
                                                 <p className="eth text-xl font-bold text-purple">
-                                                    {(value.amount*1).toFixed(2)} {value.code}
+                                                    {(value.amount*0.01).toFixed(2)} {value.code}
                                                 </p>
                                                 <p className="usd text-base text-thin-light-gray text-right">
                                                     {/*(773.69 USD)*/}

src/services/UsersService.js

@@ -170,6 +170,17 @@ class usersService {
         return this.postAuxEnd("/recipients", postData);
     }
 
+    //END POINT CALL FOR UPDATE PROFILE
+    addRecipient(data){
+        var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        ...data
+        };
+        return this.postAuxEnd("/addrecipient", postData);
+    }
+
     // API FUNCTION TO GET SEND MONEY FEE
     getSendMoneyFee(amount){
         var postData = {
@@ -220,6 +231,19 @@ class usersService {
         return this.postAuxEnd("/paymenthx", postData);
     }
 
+    // API FUNCTION TO GET PAYMENT HISTORY
+    sendMoney(reqData){
+        var postData = {
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+            senderid: localStorage.getItem("member_id"),
+            action: 33020,
+            ...reqData
+        };
+        return this.postAuxEnd("/sendmoney", postData);
+    }
+    
     //END POINT CALL FOR REFERRAL HISTORY
     getReferralHx(){
         var postData = {