userAvatarCard added to Profile menu

components/DropPage/AvatarAndCover/index.tsx

@@ -2,6 +2,8 @@
 import React, { FC } from "react";
 import truncateAddress from "@lib/helper/truncateAddress";
 import { VEthereum } from "@components/modules/__modules__/_vectors";
+import UserAvatarCard from "@components/modules/__modules__/Card/UserAvatarCard";
+import { useRouter } from "next/router";
 
 interface IProps {
   profile: {
@@ -13,8 +15,9 @@ interface IProps {
 }
 
 const AvatarAndCover: FC<IProps> = ({ profile }) => {
-  const { avatar, profileImage, name, address } = profile;
+  const { avatar, name, address } = profile;
   const minifiedAddress = truncateAddress(address, 6, 3);
+  const router = useRouter();
 
   return (
     <div className="flex flex-col">
@@ -25,10 +28,16 @@ const AvatarAndCover: FC<IProps> = ({ profile }) => {
           className="h-[260px] w-full object-cover rounded-2xl"
         />
         <div className="w-full flex justify-center">
-          <img
-            src={profileImage}
-            alt={name}
-            className="h-[120px] w-[120px] object-cover -mt-20 border-4 border-white border-solid rounded-full"
+          <UserAvatarCard
+            identiconSize={100}
+            onUserAvatarClicked={() => router.push(`/profile/${address}`)}
+            userWalletAddress={address}
+            identiconContainerClassName={
+              "bg-white -mt-20 p-5 rounded-full border-1 border-gray-400"
+            }
+            userAvatarClassName={
+              "h-[120px] w-[120px] object-cover -mt-20 border-4 border-white border-solid rounded-full"
+            }
           />
         </div>
       </div>

components/LandingPage/index.tsx

@@ -6,7 +6,6 @@ import ConnectWalletBox from "@components/modules/__noAuth/ConnectWalletsBox";
 import TopSellers from "@components/modules/__noAuth/TopSellers";
 import ProfileMenu from "@components/modules/__secured/ProfileMenu";
 
-
 const LandingPage = () => {
   return (
     <>

components/modules/__modules__/Card/UserAvatarCard/index.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { FC } from "react";
+import Identicon from "react-identicons";
+import { useRouter } from "next/router";
+
+interface IProps {
+  userWalletAddress: string;
+  userAvatarUrl?: string;
+  userAvatarThumbnailUrl?: string;
+  identiconSize: number;
+  username?: string;
+  userAvatarClassName: string;
+  identiconContainerClassName: string;
+  onUserAvatarClicked?: () => void;
+}
+
+const UserAvatarCard: FC<IProps> = ({
+  identiconSize,
+  userWalletAddress,
+  userAvatarThumbnailUrl,
+  userAvatarUrl,
+  username,
+  userAvatarClassName,
+  identiconContainerClassName,
+  onUserAvatarClicked,
+}) => {
+  if (!userAvatarUrl && !userAvatarThumbnailUrl)
+    return (
+      <div
+        tabIndex={0}
+        role="button"
+        onKeyDown={() => null}
+        onClick={() => onUserAvatarClicked}
+        className={identiconContainerClassName}
+      >
+        <Identicon string={userWalletAddress} size={identiconSize} />
+      </div>
+    );
+  return (
+    <img
+      src={userAvatarUrl || userAvatarThumbnailUrl}
+      alt={username || userWalletAddress}
+      className={userAvatarClassName}
+      onClick={() => onUserAvatarClicked}
+    />
+  );
+};
+
+export default UserAvatarCard;

components/modules/__noAuth/Header/index.tsx

@@ -15,6 +15,7 @@ import { walletAtom, walletAddressAtom, profileMenuAtom } from "@lib/atoms";
 import LocalStorage from "@lib/helper/LocalStorage";
 import dummy_profile from "@components/DropPage/AvatarAndCover/dummy_profile";
 import { useRouter } from "next/router";
+import UserAvatarCard from "@components/modules/__modules__/Card/UserAvatarCard";
 
 const Header = () => {
   const routes = useRouter();
@@ -110,10 +111,16 @@ const Header = () => {
           onClick={openProfileMenu}
           className={`${!address && "hidden"} w-12 h-12 ml-1`}
         >
-          <img
-            src={dummy_profile.profileImage}
-            alt={dummy_profile.name}
-            className="w-12 h-12 object-cover rounded-full cursor-pointer"
+          <UserAvatarCard
+            identiconSize={20}
+            userWalletAddress={address}
+            onUserAvatarClicked={() => null}
+            userAvatarClassName={
+              "w-12 h-12 object-cover rounded-full cursor-pointer"
+            }
+            identiconContainerClassName={
+              "w-fit bg-white border border-gray-300 p-3 rounded-full"
+            }
           />
         </div>
       </div>

components/modules/__secured/Profile/index.tsx

@@ -15,17 +15,20 @@ import React from "react";
 import ShareContainer from "./module/shareContainer";
 import SubScribesContainer from "./module/subscribes";
 import { useRecoilState, useRecoilValue } from "recoil";
-import { subscribesAtom } from "@lib/atoms";
+import { subscribesAtom, walletAddressAtom } from "@lib/atoms";
 import { dummy_data } from "@components/modules/__noAuth/Presentation/dummy_data";
 import Header from "@components/modules/__noAuth/Header";
 import OnSale from "pages/profile/sale";
 import ProfileMenu from "../ProfileMenu";
+import UserAvatarCard from "@components/modules/__modules__/Card/UserAvatarCard";
 
 function ProfileContainer() {
   const isSubscribesOpen = useRecoilValue(subscribesAtom);
   const [isSubscribesDisplayed, setIsSubscribesDisplayed] =
     useRecoilState(subscribesAtom);
   const [isShareOpen, setIsShareOpen] = useState(false);
+  const walletData = useRecoilValue(walletAddressAtom);
+  const { address } = walletData;
 
   const { staticImages, coverImages } = dummy_data;
 
@@ -48,10 +51,14 @@ function ProfileContainer() {
         </div>
 
         <div className="relative lg:w-[8rem] w-[7rem] h-[7rem] lg:h-[8rem] ring-4 mx-auto overflow-hidden rounded-full shadow-lg -mt-[5rem] lg:-mt-[6rem]">
-          <img
-            src={staticImages[11].url}
-            alt="profile cover"
-            className="object-cover w-full h-full"
+          <UserAvatarCard
+            identiconSize={100}
+            userWalletAddress={address}
+            onUserAvatarClicked={() => null}
+            userAvatarClassName={
+              "w-full h-full object-cover rounded-full cursor-pointer"
+            }
+            identiconContainerClassName={"w-full bg-white p-3 rounded-full"}
           />
         </div>
         <div className="mx-auto max-w-xs mt-4">

components/modules/__secured/ProfileMenu/index.tsx

@@ -7,9 +7,10 @@ import { useRecoilValue, useRecoilState } from "recoil";
 import { profileMenuAtom, walletAddressAtom } from "@lib/atoms";
 import truncateAddress from "@lib/helper/truncateAddress";
 import { useRouter } from "next/router";
+import UserAvatarCard from "@components/modules/__modules__/Card/UserAvatarCard";
 
 const ProfileMenu = () => {
-  const { name, profileImage } = dummy_profile;
+  const { name } = dummy_profile;
   const { address, balance } = useRecoilValue(walletAddressAtom);
   const [isProfileMenu, setIsProfileMenu] = useRecoilState(profileMenuAtom);
   const truncatedWalletAddress = truncateAddress(address, 10, 4);
@@ -41,10 +42,13 @@ const ProfileMenu = () => {
             <CrossVector className="rotate-45 text-gray-500 w-6 h-6" />
           </button>
           <div className="flex items-center mt-10">
-            <img
-              src={profileImage}
-              alt={name}
-              className="w-12 h-12 rounded-full object-cover"
+            <UserAvatarCard
+              userWalletAddress={address}
+              identiconSize={20}
+              userAvatarClassName={"w-12 h-12 rounded-full object-cover"}
+              identiconContainerClassName={
+                "border border-gray-300 p-3 rounded-full"
+              }
             />
             <div className="px-3">
               <p className="font-ibmPlexSans font-bold">{name}</p>

package.json

@@ -23,6 +23,7 @@
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-icons": "^4.3.1",
+    "react-identicons": "^1.2.5",
     "recoil": "^0.7.2",
     "web3": "^1.7.3"
   },

tsconfig.json

@@ -15,6 +15,7 @@
     "jsx": "preserve",
     "incremental": true,
     "baseUrl": "./",
+    "noImplicitAny": false,
     "paths": {
       "@components/*": ["./components/*"],
       "@lib/*": ["./lib/*"]

yarn.lock

@@ -5596,6 +5596,11 @@
   "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz"
   "version" "4.3.1"
 
+"react-identicons@^1.2.5":
+  "integrity" "sha512-x7prkDoc2pD7wSl2C1pGxS+XAoSdq1ABWJWTBUimVTDVJArKOLd0B4wRUJpDm4r+9y7pgf8ylyPGsmlWSV5n2g=="
+  "resolved" "https://registry.npmjs.org/react-identicons/-/react-identicons-1.2.5.tgz"
+  "version" "1.2.5"
+
 "react-is@^16.12.0", "react-is@^16.13.1":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"