Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
86d876b013 |
Binary file not shown.
|
After Width: | Height: | Size: 215 B |
@@ -10,7 +10,7 @@ export default function WalletBox({ wallet, coupon, payment }) {
|
||||
<>
|
||||
<div className="my-wallet-wrapper w-full mb-10">
|
||||
<div className="main-wrapper w-full">
|
||||
<div className="balance-inquery w-full lg:flex lg:space-x-11 mb-11">
|
||||
<div className="balance-inquery w-full lg:h-[436px] lg:flex lg:space-x-11 mb-11">
|
||||
{wallet.loading ? (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<LoadingSpinner size="16" color="sky-blue" />
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import bank1 from "../../assets/images/bank-1.png";
|
||||
import bank2 from "../../assets/images/bank-2.png";
|
||||
import bank3 from "../../assets/images/bank-3.png";
|
||||
import bank4 from "../../assets/images/bank-4.png";
|
||||
// import bank1 from "../../assets/images/bank-1.png";
|
||||
// import bank2 from "../../assets/images/bank-2.png";
|
||||
// import bank3 from "../../assets/images/bank-3.png";
|
||||
// import bank4 from "../../assets/images/bank-4.png";
|
||||
import Accordion from "../Helpers/Accordion";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import localImgLoad from "../../lib/localImgLoad";
|
||||
|
||||
export default function WalletHeader(props) {
|
||||
// debugger;
|
||||
@@ -41,30 +42,35 @@ export default function WalletHeader(props) {
|
||||
<ul>
|
||||
{props.myWalletList &&
|
||||
props.myWalletList?.result_list?.length > 0 &&
|
||||
props.myWalletList.result_list.map((value, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
||||
>
|
||||
<div className="sm:flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
||||
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={bank1} alt="" />
|
||||
props.myWalletList.result_list.map((value, index) =>
|
||||
{
|
||||
let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
|
||||
return(
|
||||
<li
|
||||
key={index}
|
||||
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
||||
>
|
||||
<div className="sm:flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
||||
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={localImgLoad(`images/currency/${image}`)} alt="" />
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium">
|
||||
{value.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium">
|
||||
{value.description}
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{PriceFormatter(value.amount * 0.01, value.code)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{PriceFormatter(value.amount * 0.01, value.code)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
)}
|
||||
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
|
||||
@@ -4,7 +4,6 @@ import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
import CreditPopup from "./Popup/CreditPopup";
|
||||
import localImgLoad from "../../lib/localImgLoad";
|
||||
|
||||
export default function WalletItemCard({ walletItem, payment }) {
|
||||
// const [eth] = useState(90);
|
||||
@@ -30,67 +29,70 @@ export default function WalletItemCard({ walletItem, payment }) {
|
||||
|
||||
console.log("walletItem >>", walletItem, payment);
|
||||
|
||||
let image = walletItem.code ? `${walletItem.code.toLocaleLowerCase()}.svg` : 'default.png' // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 py-9`}
|
||||
className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col ${
|
||||
accountType ? "justify-start" : "justify-between"
|
||||
} px-8 py-9`}
|
||||
style={{
|
||||
background: `url(${background}) 0% 0% / cover no-repeat`,
|
||||
}}
|
||||
>
|
||||
<div className="wallet flex justify-start">
|
||||
<div className="wallet flex justify-between">
|
||||
<div className="w-[100px] h-[100px] rounded-full bg-[#485199] flex justify-center items-center">
|
||||
<img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
|
||||
<div>
|
||||
<p className="text-26 font-bold text-white tracking-wide text-center">
|
||||
.
|
||||
</p>
|
||||
<p className="text-lg text-white tracking-wide text-center">
|
||||
{walletItem.code}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div className="flex justify-end items-center">
|
||||
<div className="balance w-2/3">
|
||||
<p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
|
||||
Current Balance
|
||||
</p>
|
||||
<p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
|
||||
<div className="balance">
|
||||
<p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
|
||||
Current Balance
|
||||
</p>
|
||||
<p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
|
||||
{PriceFormatter(
|
||||
walletItem.amount * 0.01,
|
||||
walletItem.code,
|
||||
undefined,
|
||||
"text-[2rem]"
|
||||
)}
|
||||
</p>
|
||||
<p className="text-lg text-white tracking-wide">
|
||||
HOLDINGS :{" "}
|
||||
<span className="mt-1">
|
||||
{PriceFormatter(
|
||||
walletItem.amount * 0.01,
|
||||
walletItem.escrow * 0.01,
|
||||
walletItem.code,
|
||||
undefined,
|
||||
"text-[2rem]"
|
||||
)}
|
||||
</p>
|
||||
<p className="text-lg text-white tracking-wide">
|
||||
HOLDINGS :{" "}
|
||||
<span className="mt-1">
|
||||
{PriceFormatter(
|
||||
walletItem.escrow * 0.01,
|
||||
walletItem.code,
|
||||
undefined,
|
||||
"text-[2rem]"
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</span>
|
||||
{/*<span className="text-light-green">(11.5%)</span>*/}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* for white underline */}
|
||||
<div className="my-2 w-full h-[1px] bg-white"></div>
|
||||
|
||||
{!accountType && (
|
||||
<div className="counters flex justify-between gap-2">
|
||||
<div className="counters flex space-x-16">
|
||||
<div>
|
||||
<Link
|
||||
to="transfer-fund"
|
||||
className={`${
|
||||
walletItem.code != "NAIRA" && "invisible"
|
||||
} px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full relative bg-white lg:text-xl text-lg font-bold text-green-500`}
|
||||
walletItem.action_type != "AC_AD_FD_ONLY" && "invisible"
|
||||
} px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full relative bg-purple lg:text-xl text-lg font-bold text-white`}
|
||||
>
|
||||
Spend
|
||||
Transfer
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
// state={{ currency: walletItem.description }}
|
||||
className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full bg-white lg:text-xl text-lg font-bold text-sky-blue group relative transition duration-300 stroke-black fill-white"
|
||||
className="px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[40px] rounded-full bg-white lg:text-xl text-lg font-bold text-black group relative transition duration-300 stroke-black fill-white"
|
||||
onClick={() => {
|
||||
openPopUp({
|
||||
payment: payment,
|
||||
@@ -98,7 +100,7 @@ export default function WalletItemCard({ walletItem, payment }) {
|
||||
});
|
||||
}}
|
||||
>
|
||||
{/* <span className="">
|
||||
<span className="">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="38"
|
||||
@@ -112,7 +114,7 @@ export default function WalletItemCard({ walletItem, payment }) {
|
||||
className="stroke-black fill-white"
|
||||
></path>
|
||||
</svg>
|
||||
</span> */}
|
||||
</span>
|
||||
<span className="">Add Credit</span>
|
||||
<span className="absolute inset-0 w-full h-full transition-all duration-300 ease-out bg-gray-300 group-hover:bg-gray-400 opacity-0"></span>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user