wallet page implentation

src/components/MyWallet/TransferFund.jsx

@@ -1,7 +1,9 @@
 import React, {useState} from 'react'
 import { Link } from 'react-router-dom'
+import RecentActivityTable from './WalletComponent/RecentActivityTable'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
 
-function TransferFund() {
+function TransferFund({payment}) {
    
     //STATE FOR CONTROLLED INPUTS
     let [inputs, setInputs] = useState({
@@ -113,10 +115,10 @@ function TransferFund() {
             </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-[500px] 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-[600px] 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>
-                    <table className="wallet-activity w-full table-auto border-collapse text-left">
+                    {/* <table className="wallet-activity w-full table-auto border-collapse text-left">
                         <thead className='border-b-2'>
                             <tr className='text-slate-600'>
                             <th className="py-3">Date</th>
@@ -131,7 +133,12 @@ function TransferFund() {
                                 <td className="py-3">Item</td>
                             </tr>
                         </tbody>
-                    </table>
+                    </table> */}
+                    {payment.loading ?
+                    <LoadingSpinner size='16' color='sky-blue' />
+                    :
+                    <RecentActivityTable  payment={payment}/>
+                    }
                 </div>
             </div>
         </div>