Walltet starter
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -3,9 +3,11 @@ 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;
|
||||
// debugger;
|
||||
//props.myWalletList.result_list
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@@ -36,98 +38,130 @@ export default function WalletHeader(props) {
|
||||
</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>
|
||||
|
||||
{props.myWalletList &&
|
||||
props.myWalletList?.result_list?.length > 0 &&
|
||||
props.myWalletList.result_list.map((value) => (
|
||||
<>
|
||||
<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">
|
||||
{value.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{value.amount*0.01} {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">
|
||||
<button
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext } from "react";
|
||||
import React, { useContext,useState, useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import bank1 from "../../assets/images/bank-1.png";
|
||||
import bank2 from "../../assets/images/bank-2.png";
|
||||
@@ -11,6 +11,7 @@ import Icons from "../Helpers/Icons";
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import SearchCom from "../Helpers/SearchCom";
|
||||
import WalletHeader from "../MyWallet/WalletHeader";
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
|
||||
export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
@@ -19,6 +20,23 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
const [userProfileDropdown, setProfileDropdown] = useToggle(false);
|
||||
const [moneyPopup, setPopup] = useToggle(false);
|
||||
const darkMode = useContext(DarkModeContext);
|
||||
|
||||
const [myWalletList, setMyWalletList] = useState([]);
|
||||
const api = new usersService();
|
||||
|
||||
const getMyWalletList = async () => {
|
||||
try {
|
||||
const res = await api.getUserWallets(null);
|
||||
console.log("wallet - > ",res.data);
|
||||
setMyWalletList(res.data);
|
||||
} catch (error) {
|
||||
console.log("Error getting mode");
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
getMyWalletList();
|
||||
}, []);
|
||||
|
||||
const handlerBalance = () => {
|
||||
setbalanceValue.toggle();
|
||||
if (notificationDropdown) {
|
||||
@@ -196,7 +214,11 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
{/* balance */}
|
||||
|
||||
{/*<div className="lg:hidden block"></div>*/}
|
||||
<WalletHeader handlerBalance={handlerBalance} balanceDropdown={balanceDropdown} addMoneyHandler={addMoneyHandler} />
|
||||
<WalletHeader
|
||||
myWalletList={myWalletList}
|
||||
handlerBalance={handlerBalance}
|
||||
balanceDropdown={balanceDropdown}
|
||||
addMoneyHandler={addMoneyHandler} />
|
||||
{/* notification */}
|
||||
<div className="user-notification lg:block hidden relative">
|
||||
<div
|
||||
|
||||
@@ -240,6 +240,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="setting-item">
|
||||
<div className="heading mb-5">
|
||||
<h1 className="title text-xl font-bold text-purple">My Jobs</h1>
|
||||
@@ -248,44 +249,84 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
<ul className="flex flex-col space-y-6">
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/profile"
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
||||
}`}
|
||||
to="/market"
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
||||
}`}
|
||||
>
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
|
||||
<Icons name="people-two" />
|
||||
</span>
|
||||
<span
|
||||
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
||||
sidebar ? "active flex-1" : "w-0"
|
||||
}`}
|
||||
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
||||
sidebar ? "active flex-1" : "w-0"
|
||||
}`}
|
||||
>
|
||||
My Profile
|
||||
Job List
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/settings"
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
||||
}`}
|
||||
to="/market"
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
||||
}`}
|
||||
>
|
||||
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
|
||||
<Icons name="setting" />
|
||||
<Icons name="people-two" />
|
||||
</span>
|
||||
<span
|
||||
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
||||
sidebar ? "active flex-1" : "w-0"
|
||||
}`}
|
||||
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
||||
sidebar ? "active flex-1" : "w-0"
|
||||
}`}
|
||||
>
|
||||
Settings
|
||||
Active Jobs
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
{/*<li className="item group">*/}
|
||||
{/* <NavLink*/}
|
||||
{/* to="/profile"*/}
|
||||
{/* className={`nav-item flex items-center ${*/}
|
||||
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
|
||||
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
|
||||
{/* }`}*/}
|
||||
{/* >*/}
|
||||
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
|
||||
{/* <Icons name="people-two" />*/}
|
||||
{/* </span>*/}
|
||||
{/* <span*/}
|
||||
{/* className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
|
||||
{/* sidebar ? "active flex-1" : "w-0"*/}
|
||||
{/* }`}*/}
|
||||
{/* >*/}
|
||||
{/* My Profile*/}
|
||||
{/* </span>*/}
|
||||
{/* </NavLink>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="item group">*/}
|
||||
{/* <NavLink*/}
|
||||
{/* to="/settings"*/}
|
||||
{/* className={`nav-item flex items-center ${*/}
|
||||
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
|
||||
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
|
||||
{/* }`}*/}
|
||||
{/* >*/}
|
||||
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
|
||||
{/* <Icons name="setting" />*/}
|
||||
{/* </span>*/}
|
||||
{/* <span*/}
|
||||
{/* className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
|
||||
{/* sidebar ? "active flex-1" : "w-0"*/}
|
||||
{/* }`}*/}
|
||||
{/* >*/}
|
||||
{/* Settings*/}
|
||||
{/* </span>*/}
|
||||
{/* </NavLink>*/}
|
||||
{/*</li>*/}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,23 @@ class usersService {
|
||||
};
|
||||
return this.postAuxEnd("/getjobsdata", postData);
|
||||
}
|
||||
|
||||
//
|
||||
getUserBankList(reqData){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uuid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token")
|
||||
};
|
||||
return this.postAuxEnd("/mybanklist", postData);
|
||||
}
|
||||
getUserWallets(reqData){
|
||||
var postData = {
|
||||
uuid: localStorage.getItem("uuid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token")
|
||||
};
|
||||
return this.postAuxEnd("/getwallets", postData);
|
||||
}
|
||||
getApiGate(){
|
||||
// localStorage.setItem("session_token", ``);
|
||||
return this.postAuxEnd("/apigate", null);
|
||||
|
||||
Reference in New Issue
Block a user