From 67df22a99ef90da004bfdd4ba8f684605d904ba4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-GBA0BK8\\Admin" <ameye@chiefsoft.com>
Date: Mon, 13 Mar 2023 19:51:22 -0400
Subject: [PATCH] Added wallet on header

---
 src/components/Partials/Header.jsx | 137 ++++++++++++++++++++++++++++-
 1 file changed, 136 insertions(+), 1 deletion(-)

diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx
index 5a053fc..23f2ae7 100644
--- a/src/components/Partials/Header.jsx
+++ b/src/components/Partials/Header.jsx
@@ -192,7 +192,142 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
               </div>
             </button>
             {/* balance */}
-
+            <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={() => 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 ${
+                      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={() => 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>
             {/* notification */}
             <div className="user-notification lg:block hidden relative">
               <div