File size: 4,451 Bytes
f8b5d42 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
import useLoginMode from "@/hooks/useLoginMode";
import usePfp from "@/hooks/usePfp";
import useUser from "@/hooks/useUser";
import System from "@/models/system";
import paths from "@/utils/paths";
import { userFromStorage } from "@/utils/request";
import { Person } from "@phosphor-icons/react";
import { useEffect, useRef, useState } from "react";
import AccountModal from "../AccountModal";
import { AUTH_TIMESTAMP, AUTH_TOKEN, AUTH_USER } from "@/utils/constants";
import { useTranslation } from "react-i18next";
export default function UserButton() {
const { t } = useTranslation();
const mode = useLoginMode();
const { user } = useUser();
const menuRef = useRef();
const buttonRef = useRef();
const [showMenu, setShowMenu] = useState(false);
const [showAccountSettings, setShowAccountSettings] = useState(false);
const [supportEmail, setSupportEmail] = useState("");
const handleClose = (event) => {
if (
menuRef.current &&
!menuRef.current.contains(event.target) &&
!buttonRef.current.contains(event.target)
) {
setShowMenu(false);
}
};
const handleOpenAccountModal = () => {
setShowAccountSettings(true);
setShowMenu(false);
};
useEffect(() => {
if (showMenu) {
document.addEventListener("mousedown", handleClose);
}
return () => document.removeEventListener("mousedown", handleClose);
}, [showMenu]);
useEffect(() => {
const fetchSupportEmail = async () => {
const supportEmail = await System.fetchSupportEmail();
setSupportEmail(
supportEmail?.email
? `mailto:${supportEmail.email}`
: paths.mailToMintplex()
);
};
fetchSupportEmail();
}, []);
if (mode === null) return null;
return (
<div className="absolute top-3 right-4 md:top-9 md:right-10 w-fit h-fit z-40">
<button
ref={buttonRef}
onClick={() => setShowMenu(!showMenu)}
type="button"
className="uppercase transition-all duration-300 w-[35px] h-[35px] text-base font-semibold rounded-full flex items-center bg-theme-action-menu-bg hover:bg-theme-action-menu-item-hover justify-center text-white p-2 hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
{mode === "multi" ? <UserDisplay /> : <Person size={14} />}
</button>
{showMenu && (
<div
ref={menuRef}
className="w-fit rounded-lg absolute top-12 right-0 bg-theme-action-menu-bg p-2 flex items-center-justify-center"
>
<div className="flex flex-col gap-y-2">
{mode === "multi" && !!user && (
<button
onClick={handleOpenAccountModal}
className="border-none text-white hover:bg-theme-action-menu-item-hover w-full text-left px-4 py-1.5 rounded-md"
>
{t("profile_settings.account")}
</button>
)}
<a
href={supportEmail}
className="text-white hover:bg-theme-action-menu-item-hover w-full text-left px-4 py-1.5 rounded-md"
>
{t("profile_settings.support")}
</a>
<button
onClick={() => {
window.localStorage.removeItem(AUTH_USER);
window.localStorage.removeItem(AUTH_TOKEN);
window.localStorage.removeItem(AUTH_TIMESTAMP);
window.location.replace(paths.home());
}}
type="button"
className="text-white hover:bg-theme-action-menu-item-hover w-full text-left px-4 py-1.5 rounded-md"
>
{t("profile_settings.signout")}
</button>
</div>
</div>
)}
{user && showAccountSettings && (
<AccountModal
user={user}
hideModal={() => setShowAccountSettings(false)}
/>
)}
</div>
);
}
function UserDisplay() {
const { pfp } = usePfp();
const user = userFromStorage();
if (pfp) {
return (
<div className="w-[35px] h-[35px] rounded-full flex-shrink-0 overflow-hidden transition-all duration-300 bg-gray-100 hover:border-slate-100 hover:border-opacity-50 border-transparent border hover:opacity-60">
<img
src={pfp}
alt="User profile picture"
className="w-full h-full object-cover"
/>
</div>
);
}
return user?.username?.slice(0, 2) || "AA";
}
|