Users-Wrench/src/components/MyWallet/WalletHeader.jsx

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 Accordion from "../Helpers/Accordion";
import { PriceFormatter } from "../Helpers/PriceFormatter";

export default function WalletHeader(props) {
  //  debugger;
  //props.myWalletList.result_list
  let { pathname } = useLocation();
  let navigate = useNavigate();
  return (
    <>
      <div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue 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">
                          {PriceFormatter(value.amount * 0.01, value.code)}
                        </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={() => {
                                if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
                                else navigate('/my-wallet', {replace: true})
                                }}
                                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"
                onClick={() => {
                  if (pathname == "/my-wallet")
                    props.setBalanceDropdown.toggle();
                  else navigate("/my-wallet", { replace: true });
                }}
                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>
    </>
  );
}