diff --git a/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownContainer.tsx b/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownContainer.tsx index 2ec3dcd1..104ec5ad 100644 --- a/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownContainer.tsx +++ b/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownContainer.tsx @@ -1,4 +1,5 @@ import { FC } from "react"; +import { useAccount } from "src/api/hooks"; import { useAuth } from "src/api/hooks/useAuth"; import { useTutorial } from "src/api/hooks/useTutorial"; import { ETutorialTipId } from "src/api/types"; @@ -6,6 +7,7 @@ import ProfileDropdownWrapper from "./ProfileDropdownWrapper"; const ProfileDropdownContainer: FC = () => { const { openAuthModal, isAuthenticated, logout } = useAuth(); + const { userProfile } = useAccount(); const { showTutorial, currentTutorial, @@ -25,6 +27,7 @@ const ProfileDropdownContainer: FC = () => { ? setTutFocusElemRef : undefined } + profile={userProfile} /> ); }; diff --git a/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownWrapper.tsx b/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownWrapper.tsx index a86c383b..270460a6 100644 --- a/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownWrapper.tsx +++ b/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownWrapper.tsx @@ -8,6 +8,7 @@ import { IconButton, twMerge, } from "@alphaday/ui-kit"; +import { TUserProfile } from "src/api/types"; import { Logger } from "src/api/utils/logging"; import CONFIG from "src/config"; import globalMessages from "src/globalMessages"; @@ -23,6 +24,7 @@ interface IProps { setTutFocusElemRef?: | React.Dispatch> | undefined; + profile: TUserProfile | undefined; } const Divider = () => ( @@ -36,6 +38,7 @@ const ProfileDropdownWrapper: React.FC = ({ showTutorial, isAuthenticated, setTutFocusElemRef, + profile, }) => { const [toggleState, setToggleState] = useState(false); @@ -84,13 +87,16 @@ const ProfileDropdownWrapper: React.FC = ({ {!showTutorial && (
-
+
+

+ {profile?.user.username} +

= ({ export const DropdownAvatar: FC = () => { return ( -
+
- +