CHIEFSOFT\ameye
96 lines
5.1 KiB
React
96 lines
5.1 KiB
React
import React, {useState} from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import RecentActivityTable from './WalletComponent/RecentActivityTable'
|
|
import PurchasesTable from './WalletComponent/PurchasesTable'
|
|
import CouponTable from './WalletComponent/CouponTable'
|
|
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
|
|
|
function Balance({wallet, coupon}) {
|
|
return (
|
|
<div className="content-wrapper">
|
|
<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
|
|
{/* WALLET SECTION */}
|
|
<div className="lg:w-3/4 w-full mb-10 lg:mb-0">
|
|
<div className="wallet w-full md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
|
<div className='flex items-baseline justify-between'>
|
|
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Wallet</h2>
|
|
<p className='text-base text-slate-500 dark:text-white'>Add New Wallet</p>
|
|
</div>
|
|
{/* wallet balance */}
|
|
{wallet.loading ?
|
|
<LoadingSpinner size='16' color='sky-blue' />
|
|
:
|
|
wallet.data.length ?
|
|
wallet.data.map((item, index)=> (
|
|
<div key={index} className="md:flex items-center flex-wrap my-3 border-t-2 border-slate-400">
|
|
<div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
|
|
<div className='balance-info'>
|
|
<p className='py-2'></p>
|
|
<span className='text-base'>{item.description}</span>
|
|
<p className='text-base text-slate-500'>{item.symbol}</p>
|
|
</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*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*0.01).toFixed(2)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
|
|
{
|
|
item.action_type != 'AC_AD_FD_ONLY' ?
|
|
<Link to='transfer-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
|
|
items-center rounded-full relative bg-purple pr-1.5 pl-4'>Transfer</Link>:''
|
|
}
|
|
<Link to='add-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
|
|
items-center rounded-full relative bg-purple pr-1.5 pl-4'>+Add Credit</Link>
|
|
</div>
|
|
</div>
|
|
))
|
|
:
|
|
wallet.error ?
|
|
(
|
|
<div className="md:flex items-center flex-wrap mt-3">
|
|
<p className='text-base'>Opps! An Error occurred, please try again</p>
|
|
</div>
|
|
)
|
|
:
|
|
(
|
|
<div className="md:flex items-center flex-wrap mt-3">
|
|
<p className='text-base'>No Wallets Found!</p>
|
|
</div>
|
|
)
|
|
}
|
|
{/* end of wallet balance */}
|
|
</div>
|
|
</div>
|
|
{/* END OF WALLET SECTION */}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
|
|
|
|
{/* COUPON SECTION */}
|
|
<div className="lg:w-3/4 w-full mb-10 lg:mb-0">
|
|
<div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] 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'>Coupons</h2>
|
|
{coupon.loading ?
|
|
<LoadingSpinner size='16' color='sky-blue' />
|
|
:
|
|
<CouponTable coupon={coupon} />
|
|
}
|
|
</div>
|
|
</div>
|
|
{/* END OF COUPON SECTION */}
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Balance |