victorAnumudu
121 lines
4.0 KiB
React
121 lines
4.0 KiB
React
import React, { useState } from "react";
|
|
import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
|
|
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";
|
|
import WalletAction from "./WalletAction";
|
|
|
|
export default function WalletItemCard({ walletItem, payment }) {
|
|
// const [eth] = useState(90);
|
|
// const [btc] = useState(85);
|
|
// const [ltc] = useState(20);
|
|
|
|
const { userDetails } = useSelector((state) => state?.userDetails);
|
|
let accountType = userDetails?.account_type == "FAMILY";
|
|
|
|
// Credit popup
|
|
const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
|
|
|
|
const openPopUp = (value) => {
|
|
setCreditPopup({
|
|
show: true,
|
|
data: { ...value },
|
|
});
|
|
};
|
|
|
|
const closePopUp = () => {
|
|
setCreditPopup({ show: false, data: {} });
|
|
};
|
|
|
|
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 h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 pt-9 pb-20`}
|
|
style={{
|
|
background: `url(${background}) 0% 0% / cover no-repeat`,
|
|
}}
|
|
>
|
|
<div className="wallet xxs:flex justify-between items-start gap-3">
|
|
<div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
|
|
<img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
|
|
</div>
|
|
<div className="balance mt-2">
|
|
<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="xxs:-ml-5 mt-10 mb-5 text-lg text-white tracking-wide flex justify-start items-center gap-2">
|
|
HOLDINGS :{" "}
|
|
<span className="mt-1">
|
|
{PriceFormatter(
|
|
walletItem.escrow * 0.01,
|
|
walletItem.code,
|
|
undefined,
|
|
"text-[2rem]"
|
|
)}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* <div className="flex justify-center items-center">
|
|
<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.escrow * 0.01,
|
|
walletItem.code,
|
|
undefined,
|
|
"text-[2rem]"
|
|
)}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div> */}
|
|
|
|
{/* for white underline */}
|
|
<div className="my-2 w-full h-[1px] bg-white"></div>
|
|
|
|
{!accountType ? (
|
|
<WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
|
|
)
|
|
:
|
|
null
|
|
}
|
|
</div>
|
|
{creditPopup.show && (
|
|
<CreditPopup
|
|
details={creditPopup.data}
|
|
walletItem={walletItem}
|
|
onClose={closePopUp}
|
|
situation={openPopUp}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|