Change the edit profile page path

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

@@ -10,23 +10,24 @@ interface IProps {
 }
 
 const AvatarAndCoverCard = ({ user }: IProps) => {
-  const { coverUrl, coverThumbnailUrl, username, walletAddress } = user;
   const router = useRouter();
 
   return (
     <div className="relative">
       <img
-        src={coverUrl || coverThumbnailUrl}
-        alt={username}
+        src={user?.coverUrl || user?.coverThumbnailUrl}
+        alt={user?.username}
         className="h-[260px] w-full object-cover rounded-2xl"
       />
       <div className="w-full flex justify-center">
         <UserAvatarCard
           identiconSize={100}
           allowVerifiedIcon={true}
-          onUserAvatarClicked={() => router.push(`/profile/${walletAddress}`)}
+          onUserAvatarClicked={() =>
+            router.push(`/profile/${user?.walletAddress}`)
+          }
           identiconContainerClassName={
-            "bg-white -mt-20 p-5 rounded-full border-1 border-gray-400"
+            "bg-red rounded-full overflow-hidden -mt-20 p-5 border-1 border-gray-400"
           }
           userAvatarClassName={
             "h-[120px] w-[120px] -mt-20 object-cover border-4 border-white border-solid rounded-full relative"

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

@@ -21,9 +21,7 @@ const UserAvatarCard: FC<IProps> = ({
   allowVerifiedIcon = false,
   onUserAvatarClicked,
 }) => {
-  const { avatarUrlThumbnail, avatarUrl, walletAddress, username, verified } =
-    user;
-  if (!avatarUrl && !avatarUrlThumbnail)
+  if (!user?.avatarUrl && !user?.avatarUrlThumbnail)
     return (
       <div
         tabIndex={0}
@@ -32,22 +30,26 @@ const UserAvatarCard: FC<IProps> = ({
         onClick={() => onUserAvatarClicked}
         className={identiconContainerClassName}
       >
-        <Identicon string={walletAddress} size={identiconSize} />
+        <Identicon string={user?.walletAddress} size={identiconSize} />
       </div>
     );
   return (
     <div className="flex relative">
       <img
-        src={avatarUrl || avatarUrlThumbnail}
-        alt={username || walletAddress}
+        src={user?.avatarUrl || user?.avatarUrlThumbnail}
+        alt={user?.username || user?.walletAddress}
         className={userAvatarClassName}
         onClick={() => onUserAvatarClicked}
       />
-      {verified && allowVerifiedIcon && (
+      {user?.verified && allowVerifiedIcon && (
         <CheckmarkCard className="h-8 absolute bottom-[5px] right-1" />
       )}
     </div>
   );
 };
 
+// UserAvatarCard.defaultProps = {
+//   identiconContainerClassName: 'bg-white rounded-full overflow-hidden'
+// }
+
 export default UserAvatarCard;

components/modules/__noAuth/Header/index.tsx

@@ -11,18 +11,25 @@ import Menu from "./Menu";
 import SearchInputBar from "./SearchInputBar";
 
 import { useRecoilState } from "recoil";
-import { walletAtom, walletAddressAtom, profileMenuAtom } from "@lib/atoms";
+import {
+  walletAtom,
+  profileMenuAtom,
+  currentAccountState,
+  walletAddressAtom,
+} from "@lib/atoms";
 import LocalStorage from "@lib/helper/LocalStorage";
 import { useRouter } from "next/router";
 import UserAvatarCard from "@components/modules/__modules__/Card/UserAvatarCard";
-import dummy_profile from "@components/DropPage/AvatarAndCover/dummy_profile";
+import { backendApiService } from "@lib/services/BackendApiService";
+import { UserAccount } from "@lib/models/UserAccount";
 
 const Header = () => {
   const routes = useRouter();
-  const { user } = dummy_profile;
   const [isLightTheme, setIsLightTheme] = useState(true);
   const [isWalletsDisplayed, setIsWalletsDisplayed] =
     useRecoilState(walletAtom);
+  const [currentAccount, setCurrentAccount] =
+    useRecoilState(currentAccountState);
   const [walletData, setWalletData] = useRecoilState(walletAddressAtom);
   const [isProfileMenu, setIsProfileMenu] = useRecoilState(profileMenuAtom);
   const { address } = walletData;
@@ -38,6 +45,13 @@ const Header = () => {
     routes.push("/create");
   };
 
+  const fetchUser = async (walletAddress) => {
+    const [user] = await Promise.all([
+      backendApiService.findAccountWhereAddressOrUsername(walletAddress),
+    ]);
+    return setCurrentAccount(user);
+  };
+
   // --- detect when browser wallet is deconnected
   useEffect(() => {
     if (window && !window?.ethereum) return;
@@ -58,6 +72,8 @@ const Header = () => {
       address: memorizedWalletAddress || "",
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    fetchUser(memorizedWalletAddress);
   }, [setWalletData]);
 
   const openProfileMenu = () => {
@@ -113,7 +129,7 @@ const Header = () => {
           className={`${!address && "hidden"} w-12 h-12 ml-1`}
         >
           <UserAvatarCard
-            user={user}
+            user={currentAccount as UserAccount}
             identiconSize={20}
             onUserAvatarClicked={() => null}
             userAvatarClassName={

components/modules/__secured/Profile/index.tsx

@@ -30,15 +30,13 @@ function ProfileContainer({ currentUser }: { currentUser: UserAccount }) {
     useRecoilState(subscribesAtom);
   const [isShareOpen, setIsShareOpen] = useRecoilState(shareProfileLinkAtom);
 
-  const { user } = dummy_profile;
-
   return (
     <>
       <Header />
       <ProfileMenu />
       <div className="lg:mx-[12rem] mx-[1rem] rounded-lg">
         <div className="mt-24">
-          <AvatarAndCoverCard user={user} />
+          <AvatarAndCoverCard user={currentUser} />
         </div>
         <div className="mx-auto max-w-xs mt-4">
           <p className="text-center text-3xl font-bold">
@@ -48,7 +46,7 @@ function ProfileContainer({ currentUser }: { currentUser: UserAccount }) {
             <div className="flex justify-center items-center space-x-2 bg-opacity-30 bg-gray-300 p-2 rounded-full">
               <Ethereum className="w-4 h-4" />
               <p className="font-ibmPlexSans font-semibold text-gray-500 px-1 text-xs cursor-pointer hover:text-gray-700 transition-all">
-                {middleEllipsis(user.walletAddress, 8)}
+                {middleEllipsis(currentUser?.walletAddress, 8)}
               </p>
             </div>
             <button className="w-[80px] p-1 font-bold text-xs rounded-full border-2 border-gray-300">

components/modules/__secured/ProfileMenu/index.tsx

@@ -4,13 +4,18 @@ import dummy_profile from "@components/DropPage/AvatarAndCover/dummy_profile";
 import { CrossVector, VUser } from "@components/modules/__modules__/_vectors";
 import WalletInfoCard from "@components/modules/__modules__/Card/WalletInfoCard";
 import { useRecoilValue, useRecoilState } from "recoil";
-import { profileMenuAtom, walletAddressAtom } from "@lib/atoms";
+import {
+  currentAccountState,
+  profileMenuAtom,
+  walletAddressAtom,
+} from "@lib/atoms";
 import truncateAddress from "@lib/helper/truncateAddress";
 import { useRouter } from "next/router";
 import UserAvatarCard from "@components/modules/__modules__/Card/UserAvatarCard";
+import { UserAccount } from "@lib/models/UserAccount";
 
 const ProfileMenu = () => {
-  const { user } = dummy_profile;
+  const currentAccount = useRecoilValue(currentAccountState);
   const { address, balance } = useRecoilValue(walletAddressAtom);
   const [isProfileMenu, setIsProfileMenu] = useRecoilState(profileMenuAtom);
   const truncatedWalletAddress = truncateAddress(address, 10, 4);
@@ -43,15 +48,17 @@ const ProfileMenu = () => {
           </button>
           <div className="flex items-center mt-10">
             <UserAvatarCard
-              user={user}
+              user={currentAccount as UserAccount}
               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">{user.username}</p>
+              <p className="font-ibmPlexSans font-bold">
+                {currentAccount?.username}
+              </p>
               <div
                 tabIndex={0}
                 role="button"

lib/atoms/index.ts

@@ -1,22 +1,35 @@
-import walletAtom from "./walletAtom";
-import subscribesAtom from "./subscribesAtom";
-import walletAddressAtom from "./walletAddressAtom";
 import { atom } from "recoil";
+import { UserAccount } from "@lib/models/UserAccount";
 
-const profileMenuAtom = atom({
+export const currentAccountState = atom<UserAccount | null>({
+  key: "currentAccountState",
+  default: null,
+});
+
+export const walletAddressAtom = atom({
+  key: "walletAddress",
+  default: {
+    address: "",
+    balance: "",
+  },
+});
+
+export const profileMenuAtom = atom({
   key: "profileMenu",
   default: true,
 });
 
-const shareProfileLinkAtom = atom({
+export const shareProfileLinkAtom = atom({
   key: "shareProfileLinkAtom",
-  default: false,
+  default: true,
 });
 
-export {
-  walletAtom,
-  walletAddressAtom,
-  subscribesAtom,
-  profileMenuAtom,
-  shareProfileLinkAtom,
-};
+export const subscribesAtom = atom({
+  key: "displaySubScribesState",
+  default: true,
+});
+
+export const walletAtom = atom({
+  key: "displayWallet",
+  default: true,
+});

lib/web3/actions.ts

@@ -9,6 +9,9 @@ class Web3Actions {
 
     try {
       signer = await web3Instance.connect();
+
+      console.log("==>", signer);
+
       LocalStorage.setItem("ongama_signer_address", signer.signerWalletAddress);
       return signer;
     } catch {