DESKTOP-GBA0BK8\Admin
155 lines
9.1 KiB
React
155 lines
9.1 KiB
React
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";
|
|
|
|
export default function WalletHeader(props) {
|
|
// debugger;
|
|
return (
|
|
<>
|
|
<div
|
|
className="lg:flex hidden user-balance cursor-pointer lg:w-[252px] 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">
|
|
$ 234,435.34
|
|
</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">
|
|
Your Balance
|
|
</h3>
|
|
</div>
|
|
<div className="content px-7 pb-7">
|
|
<ul>
|
|
<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">
|
|
<button
|
|
onClick={() => props.addMoneyHandler()}
|
|
type="button"
|
|
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
>
|
|
Add Money
|
|
</button>
|
|
</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>
|
|
</>);
|
|
}
|