victorAnumudu
188 lines
12 KiB
React
188 lines
12 KiB
React
import {Link} 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 Accordion from "../Helpers/Accordion";
|
|
|
|
export default function WalletHeader(props) {
|
|
// debugger;
|
|
//props.myWalletList.result_list
|
|
return (
|
|
<>
|
|
<div
|
|
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">
|
|
<div
|
|
onClick={() => props.handlerBalance()}
|
|
className="flex items-center lg:justify-between justify-center w-full h-full"
|
|
>
|
|
<span className="lg:block hidden">
|
|
<Icons name="wallet"/>
|
|
</span>
|
|
<p className="lg:text-xl text-lg font-bold text-white">
|
|
Wallet
|
|
</p>
|
|
<span className="lg:block hidden">
|
|
<Icons name="deep-plus"/>
|
|
</span>
|
|
</div>
|
|
<div
|
|
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
|
|
props.balanceDropdown ? "active" : ""
|
|
}`}
|
|
>
|
|
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
|
|
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
|
Wallet
|
|
</h3>
|
|
</div>
|
|
<div className="content px-7 pb-7">
|
|
<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=""/>
|
|
</div>
|
|
<div className="name">
|
|
<p className="text-base text-dark-gray dark:text-white font-medium">
|
|
{value.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="eth text-xl font-bold text-purple">
|
|
{(value.amount*0.01).toFixed(2)} {value.code}
|
|
</p>
|
|
<p className="usd text-base text-thin-light-gray text-right">
|
|
{/*(773.69 USD)*/}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</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">*/}
|
|
{/* <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=""/>*/}
|
|
{/* </div>*/}
|
|
{/* <div className="name">*/}
|
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
|
{/* MetaMask*/}
|
|
{/* </p>*/}
|
|
{/* </div>*/}
|
|
{/* </div>*/}
|
|
{/* <div>*/}
|
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
|
{/* 75,320 ETH*/}
|
|
{/* </p>*/}
|
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
|
{/* (773.69 USD)*/}
|
|
{/* </p>*/}
|
|
{/* </div>*/}
|
|
{/* </div>*/}
|
|
{/*</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">*/}
|
|
{/* <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={bank2} alt=""/>*/}
|
|
{/* </div>*/}
|
|
{/* <div className="name">*/}
|
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
|
{/* Coinbase Wallet*/}
|
|
{/* </p>*/}
|
|
{/* </div>*/}
|
|
{/* </div>*/}
|
|
{/* <div>*/}
|
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
|
{/* 56,124 ETH*/}
|
|
{/* </p>*/}
|
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
|
{/* (773.69 USD)*/}
|
|
{/* </p>*/}
|
|
{/* </div>*/}
|
|
{/* </div>*/}
|
|
{/*</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">*/}
|
|
{/* <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={bank3} alt=""/>*/}
|
|
{/* </div>*/}
|
|
{/* <div className="name">*/}
|
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
|
{/* Bitski*/}
|
|
{/* </p>*/}
|
|
{/* </div>*/}
|
|
{/* </div>*/}
|
|
{/* <div>*/}
|
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
|
{/* 99,123 ETH*/}
|
|
{/* </p>*/}
|
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
|
{/* (773.69 USD)*/}
|
|
{/* </p>*/}
|
|
{/* </div>*/}
|
|
{/* </div>*/}
|
|
{/*</li>*/}
|
|
{/*<li className="content-item py-5">*/}
|
|
{/* <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={bank4} alt=""/>*/}
|
|
{/* </div>*/}
|
|
{/* <div className="name">*/}
|
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
|
{/* WalletConnect*/}
|
|
{/* </p>*/}
|
|
{/* </div>*/}
|
|
{/* </div>*/}
|
|
{/* <div>*/}
|
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
|
{/* 43,728 ETH*/}
|
|
{/* </p>*/}
|
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
|
{/* (773.69 USD)*/}
|
|
{/* </p>*/}
|
|
{/* </div>*/}
|
|
{/* </div>*/}
|
|
{/*</li>*/}
|
|
</ul>
|
|
<div className="add-money-btn flex justify-center items-center mt-3">
|
|
{/* <button
|
|
onClick={() => props.addMoneyHandler()}
|
|
type="button"
|
|
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
>
|
|
Manage
|
|
</button> */}
|
|
<Link to='/my-wallet' className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">Manage</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*<div*/}
|
|
{/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/}
|
|
{/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
|
|
{/* <p className="lg:text-xl text-lg font-bold text-white">*/}
|
|
{/* $ 234,435.34*/}
|
|
{/* </p>*/}
|
|
{/* </div>*/}
|
|
{/*</div>*/}
|
|
<div className="lg:hidden block"></div>
|
|
</>);
|
|
}
|