Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ebube
|
69ec1e3766 | ||
|
Ebube
|
7e0f19212f |
@@ -1,4 +1,4 @@
|
|||||||
import {Link} from 'react-router-dom'
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||||
import Icons from "../Helpers/Icons";
|
import Icons from "../Helpers/Icons";
|
||||||
import bank1 from "../../assets/images/bank-1.png";
|
import bank1 from "../../assets/images/bank-1.png";
|
||||||
import bank2 from "../../assets/images/bank-2.png";
|
import bank2 from "../../assets/images/bank-2.png";
|
||||||
@@ -8,180 +8,194 @@ import Accordion from "../Helpers/Accordion";
|
|||||||
|
|
||||||
export default function WalletHeader(props) {
|
export default function WalletHeader(props) {
|
||||||
// debugger;
|
// debugger;
|
||||||
//props.myWalletList.result_list
|
//props.myWalletList.result_list
|
||||||
return (
|
let { pathname } = useLocation();
|
||||||
<>
|
let navigate = useNavigate();
|
||||||
<div
|
return (
|
||||||
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
|
<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">
|
||||||
onClick={() => props.handlerBalance()}
|
<div
|
||||||
className="flex items-center lg:justify-between justify-center w-full h-full"
|
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 className="lg:block hidden">
|
||||||
</span>
|
<Icons name="wallet" />
|
||||||
<p className="lg:text-xl text-lg font-bold text-white">
|
</span>
|
||||||
Wallet
|
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
|
||||||
</p>
|
<span className="lg:block hidden">
|
||||||
<span className="lg:block hidden">
|
<Icons name="deep-plus" />
|
||||||
<Icons name="deep-plus"/>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div
|
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
|
||||||
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
|
props.balanceDropdown ? "active" : ""
|
||||||
props.balanceDropdown ? "active" : ""
|
}`}
|
||||||
}`}
|
>
|
||||||
>
|
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
|
||||||
<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">
|
||||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
Wallet
|
||||||
Wallet
|
</h3>
|
||||||
</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>
|
</div>
|
||||||
<div className="content px-7 pb-7">
|
</li>
|
||||||
<ul>
|
))}
|
||||||
|
|
||||||
{props.myWalletList &&
|
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||||
props.myWalletList?.result_list?.length > 0 &&
|
{/* <div className="sm:flex justify-between items-center">*/}
|
||||||
props.myWalletList.result_list.map((value, index) => (
|
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||||
<li key={index} className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">
|
{/* <div*/}
|
||||||
<div className="sm:flex justify-between items-center">
|
{/* 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 ">*/}
|
||||||
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
{/* <img src={bank1} alt=""/>*/}
|
||||||
<div
|
{/* </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 ">
|
{/* <div className="name">*/}
|
||||||
<img src={bank1} alt=""/>
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||||
</div>
|
{/* MetaMask*/}
|
||||||
<div className="name">
|
{/* </p>*/}
|
||||||
<p className="text-base text-dark-gray dark:text-white font-medium">
|
{/* </div>*/}
|
||||||
{value.description}
|
{/* </div>*/}
|
||||||
</p>
|
{/* <div>*/}
|
||||||
</div>
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||||
</div>
|
{/* 75,320 ETH*/}
|
||||||
<div>
|
{/* </p>*/}
|
||||||
<p className="eth text-xl font-bold text-purple">
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||||
{(value.amount*0.01).toFixed(2)} {value.code}
|
{/* (773.69 USD)*/}
|
||||||
</p>
|
{/* </p>*/}
|
||||||
<p className="usd text-base text-thin-light-gray text-right">
|
{/* </div>*/}
|
||||||
{/*(773.69 USD)*/}
|
{/* </div>*/}
|
||||||
</p>
|
{/*</li>*/}
|
||||||
</div>
|
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||||
</div>
|
{/* <div className="sm:flex justify-between items-center">*/}
|
||||||
</li>
|
{/* <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 ">*/}
|
||||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
{/* <img src={bank2} alt=""/>*/}
|
||||||
{/* <div className="sm:flex justify-between items-center">*/}
|
{/* </div>*/}
|
||||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
{/* <div className="name">*/}
|
||||||
{/* <div*/}
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||||
{/* 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 ">*/}
|
{/* Coinbase Wallet*/}
|
||||||
{/* <img src={bank1} alt=""/>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div className="name">*/}
|
{/* </div>*/}
|
||||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
{/* <div>*/}
|
||||||
{/* MetaMask*/}
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||||
{/* </p>*/}
|
{/* 56,124 ETH*/}
|
||||||
{/* </div>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||||
{/* <div>*/}
|
{/* (773.69 USD)*/}
|
||||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
{/* </p>*/}
|
||||||
{/* 75,320 ETH*/}
|
{/* </div>*/}
|
||||||
{/* </p>*/}
|
{/* </div>*/}
|
||||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
{/*</li>*/}
|
||||||
{/* (773.69 USD)*/}
|
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||||
{/* </p>*/}
|
{/* <div className="sm:flex justify-between items-center">*/}
|
||||||
{/* </div>*/}
|
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||||
{/* </div>*/}
|
{/* <div*/}
|
||||||
{/*</li>*/}
|
{/* 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 ">*/}
|
||||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
{/* <img src={bank3} alt=""/>*/}
|
||||||
{/* <div className="sm:flex justify-between items-center">*/}
|
{/* </div>*/}
|
||||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
{/* <div className="name">*/}
|
||||||
{/* <div*/}
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||||
{/* 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 ">*/}
|
{/* Bitski*/}
|
||||||
{/* <img src={bank2} alt=""/>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div className="name">*/}
|
{/* </div>*/}
|
||||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
{/* <div>*/}
|
||||||
{/* Coinbase Wallet*/}
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||||
{/* </p>*/}
|
{/* 99,123 ETH*/}
|
||||||
{/* </div>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||||
{/* <div>*/}
|
{/* (773.69 USD)*/}
|
||||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
{/* </p>*/}
|
||||||
{/* 56,124 ETH*/}
|
{/* </div>*/}
|
||||||
{/* </p>*/}
|
{/* </div>*/}
|
||||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
{/*</li>*/}
|
||||||
{/* (773.69 USD)*/}
|
{/*<li className="content-item py-5">*/}
|
||||||
{/* </p>*/}
|
{/* <div className="sm:flex justify-between items-center">*/}
|
||||||
{/* </div>*/}
|
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||||
{/* </div>*/}
|
{/* <div*/}
|
||||||
{/*</li>*/}
|
{/* 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 ">*/}
|
||||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
{/* <img src={bank4} alt=""/>*/}
|
||||||
{/* <div className="sm:flex justify-between items-center">*/}
|
{/* </div>*/}
|
||||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
{/* <div className="name">*/}
|
||||||
{/* <div*/}
|
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||||
{/* 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 ">*/}
|
{/* WalletConnect*/}
|
||||||
{/* <img src={bank3} alt=""/>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* </div>*/}
|
||||||
{/* <div className="name">*/}
|
{/* </div>*/}
|
||||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
{/* <div>*/}
|
||||||
{/* Bitski*/}
|
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||||
{/* </p>*/}
|
{/* 43,728 ETH*/}
|
||||||
{/* </div>*/}
|
{/* </p>*/}
|
||||||
{/* </div>*/}
|
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||||
{/* <div>*/}
|
{/* (773.69 USD)*/}
|
||||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
{/* </p>*/}
|
||||||
{/* 99,123 ETH*/}
|
{/* </div>*/}
|
||||||
{/* </p>*/}
|
{/* </div>*/}
|
||||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
{/*</li>*/}
|
||||||
{/* (773.69 USD)*/}
|
</ul>
|
||||||
{/* </p>*/}
|
<div className="add-money-btn flex justify-center items-center mt-3">
|
||||||
{/* </div>*/}
|
{/* <button
|
||||||
{/* </div>*/}
|
onClick={() => {
|
||||||
{/*</li>*/}
|
if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
|
||||||
{/*<li className="content-item py-5">*/}
|
else navigate('/my-wallet', {replace: true})
|
||||||
{/* <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"
|
type="button"
|
||||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
>
|
>
|
||||||
Manage
|
Manage
|
||||||
</button> */}
|
</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>
|
<Link
|
||||||
</div>
|
to="/my-wallet"
|
||||||
</div>
|
onClick={() => {
|
||||||
</div>
|
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>
|
||||||
{/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/}
|
</div>
|
||||||
{/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
|
</div>
|
||||||
{/* <p className="lg:text-xl text-lg font-bold text-white">*/}
|
{/*<div*/}
|
||||||
{/* $ 234,435.34*/}
|
{/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/}
|
||||||
{/* </p>*/}
|
{/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
|
||||||
{/* </div>*/}
|
{/* <p className="lg:text-xl text-lg font-bold text-white">*/}
|
||||||
{/*</div>*/}
|
{/* $ 234,435.34*/}
|
||||||
<div className="lg:hidden block"></div>
|
{/* </p>*/}
|
||||||
</>);
|
{/* </div>*/}
|
||||||
|
{/*</div>*/}
|
||||||
|
<div className="lg:hidden block"></div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useContext,useState, useEffect } from "react";
|
import React, { useContext,useState, useEffect } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link, useLocation } from "react-router-dom";
|
||||||
import bank1 from "../../assets/images/bank-1.png";
|
import bank1 from "../../assets/images/bank-1.png";
|
||||||
import bank2 from "../../assets/images/bank-2.png";
|
import bank2 from "../../assets/images/bank-2.png";
|
||||||
import bank3 from "../../assets/images/bank-3.png";
|
import bank3 from "../../assets/images/bank-3.png";
|
||||||
@@ -91,6 +91,15 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
|||||||
setToggleNotification.toggle()
|
setToggleNotification.toggle()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// getting the location of head
|
||||||
|
let {pathname} = useLocation()
|
||||||
|
|
||||||
|
const handleWalletBtn = () => {
|
||||||
|
if (pathname === "/my-wallet"){
|
||||||
|
setbalanceValue.set(false)
|
||||||
|
} else return balanceDropdown
|
||||||
|
}
|
||||||
|
|
||||||
// User Profile
|
// User Profile
|
||||||
let {firstname, lastname, email, profile_pic} = userDetails
|
let {firstname, lastname, email, profile_pic} = userDetails
|
||||||
let userEmail = email.split('@')[0]
|
let userEmail = email.split('@')[0]
|
||||||
@@ -234,7 +243,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
|||||||
myWalletList={myWalletList}
|
myWalletList={myWalletList}
|
||||||
handlerBalance={handlerBalance}
|
handlerBalance={handlerBalance}
|
||||||
balanceDropdown={balanceDropdown}
|
balanceDropdown={balanceDropdown}
|
||||||
addMoneyHandler={addMoneyHandler} />
|
addMoneyHandler={addMoneyHandler}
|
||||||
|
setBalanceDropdown = {setbalanceValue} />
|
||||||
{/* notification */}
|
{/* notification */}
|
||||||
<div className="user-notification lg:block hidden relative">
|
<div className="user-notification lg:block hidden relative">
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user