✨User profile info

.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_NETWORK=NETWORK
+NEXT_PUBLIC_AUTH_URL=AUTH_ENDPOINT

components/avatar-group/avatar/index.tsx

@@ -35,6 +35,7 @@ const Avatar: FC<AvatarProps> = ({
   return (
     <Div onClick={onClick} width={avatarSize} position="relative">
       <Div
+        bg="#F6C853"
         display="flex"
         overflow="hidden"
         width={avatarSize}

components/engagement-counter/engagement-counter-item.tsx

@@ -2,14 +2,36 @@ import { Div, Span } from '@stylin.js/elements';
 import { FC } from 'react';
 import { v4 } from 'uuid';
 
+import { DEFAULT_IMAGE } from '@/constants';
+import { useModal } from '@/hooks/use-modal';
+
 import Avatar from '../avatar-group/avatar';
 import { ArrowUpRightFromSquareSVG } from '../svg';
 import { EngagementCounterModalItemProps } from './engagement-counter.types';
 
 const EngagementCounterModalItem: FC<EngagementCounterModalItemProps> = ({
-  userName,
-  userAvatar,
+  id,
+  bio,
+  avatar,
+  username,
 }) => {
+  const { handleClose } = useModal();
+  const hasAvatar = avatar === '' ? DEFAULT_IMAGE : avatar;
+  const hasUsername = username === '' ? 'Unknown' : username;
+
+  const onSelect = () => {
+    const selectedUser = [
+      {
+        id,
+        bio,
+        avatar,
+        username,
+      },
+    ];
+    console.log('Selected user _>', selectedUser);
+    handleClose();
+    return selectedUser;
+  };
   return (
     <Div
       p="0.8rem"
@@ -24,12 +46,17 @@ const EngagementCounterModalItem: FC<EngagementCounterModalItemProps> = ({
       }}
     >
       <Div gap="1rem" display="flex" alignItems="center">
-        <Avatar imgSrc={userAvatar} title={userName} size="large" isVerified />
+        <Avatar
+          imgSrc={hasAvatar}
+          title={hasUsername}
+          size="large"
+          isVerified
+        />
         <Span color="#E4E7EB" fontSize="1rem">
-          {userName}
+          {hasUsername}
         </Span>
       </Div>
-      <Div cursor="pointer">
+      <Div cursor="pointer" onClick={onSelect}>
         <ArrowUpRightFromSquareSVG
           width="1rem"
           maxWidth="1rem"

components/engagement-counter/engagement-counter.types.ts

@@ -1,9 +1,13 @@
+import { UserProps } from '@/interface';
+
 export interface EngagementCounterModalItemProps {
-  userName: string;
-  userAvatar: string;
+  id: string;
+  bio: string;
+  avatar: string;
+  username: string;
 }
 
 export interface EngagementCounterModalProps {
   title: string;
-  data?: Array<EngagementCounterModalItemProps>;
+  data?: Array<UserProps>;
 }

components/engagement-counter/index.tsx

@@ -5,11 +5,13 @@ import { v4 } from 'uuid';
 import { useModal } from '@/hooks/use-modal';
 
 import { TimesSVG } from '../svg';
-import { DATA } from './engagement-counter.data';
 import { EngagementCounterModalProps } from './engagement-counter.types';
 import UserLikeItem from './engagement-counter-item';
 
-const EngagementCounterModal: FC<EngagementCounterModalProps> = ({ title }) => {
+const EngagementCounterModal: FC<EngagementCounterModalProps> = ({
+  title,
+  data,
+}) => {
   const { handleClose } = useModal();
 
   return (
@@ -37,7 +39,7 @@ const EngagementCounterModal: FC<EngagementCounterModalProps> = ({ title }) => {
               {title}
             </Span>
             <Span fontSize="0.875rem" fontWeight="300" color="#90939D">
-              All(14)
+              All {data?.length ?? 0}
             </Span>
           </Div>
           <Div
@@ -60,18 +62,21 @@ const EngagementCounterModal: FC<EngagementCounterModalProps> = ({ title }) => {
           </Div>
         </Div>
         <Div
-          gap="1rem"
           pt="1rem"
+          gap="1rem"
+          height="100%"
           display="flex"
-          overflowY="scroll"
+          overflow="auto"
           flexDirection="column"
           className="engagement-scroll"
         >
-          {DATA.map(({ userName, userAvatar }) => (
+          {data?.map(({ id, bio, username, avatar }) => (
             <UserLikeItem
               key={v4()}
-              userName={userName}
-              userAvatar={userAvatar}
+              username={username}
+              avatar={avatar}
+              bio={bio}
+              id={id}
             />
           ))}
         </Div>

components/profile/menu-list.tsx

@@ -2,6 +2,9 @@ import { useDisconnectWallet } from '@mysten/dapp-kit';
 import { Div } from '@stylin.js/elements';
 import { not } from 'ramda';
 import { FC, useState } from 'react';
+import { useLocalStorage } from 'usehooks-ts';
+
+import { MEMEZ_FUN_TOKEN_AUTH } from '@/constants';
 
 import {
   DocIDSVG,
@@ -20,9 +23,19 @@ import RPCCollapseMenuInfo from './rpc-collapse-info';
 const MenuList: FC = () => {
   const [isActiveNSFE, setIsActiveNSFE] = useState(false);
   const [isRPCMenuOpen, setIsRPCMenuOpen] = useState(false);
+  const { mutate: disconnectWallet } = useDisconnectWallet();
   const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
   const [isExplorerMenuOpen, setIsExplorerMenuOpen] = useState(false);
-  const { mutate: disconnectWallet } = useDisconnectWallet();
+
+  const [, setSignedPM] = useLocalStorage<{
+    signature: string;
+    message: string;
+    cookies?: unknown;
+  }>(MEMEZ_FUN_TOKEN_AUTH, { signature: '', message: '' });
+  const handleDisconnectWallet = () => {
+    setSignedPM({ signature: '', message: '' });
+    disconnectWallet();
+  };
 
   return (
     <Div>
@@ -58,7 +71,7 @@ const MenuList: FC = () => {
         Icon={LogoutSVG}
         title="Disconnect"
         color="#E85965"
-        onClick={() => disconnectWallet()}
+        onClick={handleDisconnectWallet}
       />
     </Div>
   );

components/profile/profile-info.tsx

@@ -2,24 +2,57 @@ import { useCurrentAccount } from '@mysten/dapp-kit';
 import { formatAddress } from '@mysten/sui/utils';
 import { Div, Img, Span } from '@stylin.js/elements';
 import { useRouter } from 'next/router';
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
+import { useLocalStorage } from 'usehooks-ts';
 
-import { Routes, RoutesEnum } from '@/constants';
+import {
+  BASE_URL,
+  DEFAULT_IMAGE,
+  MEMEZ_FUN_TOKEN_AUTH,
+  Routes,
+  RoutesEnum,
+} from '@/constants';
 import { useCoinBalance } from '@/hooks/use-coin-balance';
+import { UserDetailsProps } from '@/interface';
 import { FixedPointMath } from '@/lib/entities/fixed-point-math';
 
 import { BannerProfileSVG, CopySVG } from '../svg';
 
 const ProfileInfo: FC = () => {
-  const currentAccount = useCurrentAccount();
   const { push } = useRouter();
+  const currentAccount = useCurrentAccount();
+  const [user, setUser] = useState<UserDetailsProps>();
+  const [signedPM] = useLocalStorage<{
+    signature: string;
+    message: string;
+  }>(MEMEZ_FUN_TOKEN_AUTH, { signature: '', message: '' });
+
+  const userPrifleData = () => {
+    fetch(`${BASE_URL}/users/${currentAccount?.address}`, {
+      method: 'GET',
+      mode: 'cors',
+      headers: {
+        message: signedPM.message,
+        signature: signedPM.signature,
+        address: currentAccount?.address ?? '',
+      },
+    })
+      .then((res) => res.json())
+      .then((data) => setUser(data));
+  };
+
+  useEffect(() => {
+    if (currentAccount) return userPrifleData();
+  }, [currentAccount]);
 
   const { balance } = useCoinBalance('0x2::sui::SUI', currentAccount?.address);
 
   const copyAddress = () => {
     toast.success('Copied!');
-    window.navigator.clipboard.writeText('0x2::sui::SUI');
+    window.navigator.clipboard.writeText(
+      formatAddress(currentAccount?.address || '')
+    );
   };
 
   return (
@@ -52,9 +85,10 @@ const ProfileInfo: FC = () => {
           <Img
             width="100%"
             height="100%"
+            bg="#F5B722"
             objectFit="cover"
             borderRadius="100%"
-            src="/user-default-memez-fun.png"
+            src={user?.avatar ?? DEFAULT_IMAGE}
           />
         </Div>
         <Div
@@ -67,10 +101,10 @@ const ProfileInfo: FC = () => {
           flexDirection="column"
         >
           <Span color="#fff" lineHeight="1.375rem">
-            Name
+            {`${user?.firstName === '' && user?.lastName === '' && 'Unknown'} `}
           </Span>
           <Span color="#90939D" lineHeight="1.375rem">
-            {formatAddress(currentAccount?.address || '')}
+            {user?.username}
           </Span>
         </Div>
         <Div

components/upload-image/index.tsx

@@ -13,10 +13,10 @@ const UploadImage: FC<UploadImageProps> = ({
   status,
   isReview,
   description,
-  name = 'imageUrl',
+  name = 'avatar',
 }) => {
   const { setValue, control } = useFormContext();
-  const currentImageUrl = useWatch({ control, name });
+  const currentavatar = useWatch({ control, name });
   const [dragging, setDragging] = useState(false);
 
   const handleChangeFile: ChangeEventHandler<HTMLInputElement> = async (e) => {
@@ -94,7 +94,7 @@ const UploadImage: FC<UploadImageProps> = ({
         onDragLeave={() => setDragging(false)}
         onDragOver={(e) => e.preventDefault()}
         borderStyle={dragging ? 'solid' : 'dashed'}
-        backgroundImage={`url('${currentImageUrl}')`}
+        backgroundImage={`url('${currentavatar}')`}
         borderColor={dragging ? '#F6C853' : '#90939D'}
       >
         {!isReview && (