Merge pull request #21 from muntaxir4/dev

fix: Web, Avatar image issue
muntaxir4 · Sep 14, 2024 · afe3d8e · afe3d8e
2 parents 92cfd8e + b1ba5a2
commit afe3d8e
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 46 deletions.
diff --git a/apps/user-web/components/Navbar.tsx b/apps/user-web/components/Navbar.tsx
@@ -8,13 +8,16 @@ import { SidebarMobile } from "./app/Sidebar";
 import { usePathname } from "next/navigation";
 import Notification from "./Notification";
 import { SidebarMobileMerchant } from "./merchant/Sidebar";
+import { useRecoilValue } from "recoil";
+import { userState } from "@/store/atoms";
 
 export default function Navbar() {
   const { theme, setTheme } = useTheme();
+  const user = useRecoilValue(userState);
   const pathname = usePathname();
   return (
     <nav className="grid grid-cols-3 border-b bg-muted/40 p-2 items-center">
-      {pathname.startsWith("/app") && (
+      {pathname.startsWith("/app") && user && (
         <SidebarMobile>
           <PanelLeftOpen className="ml-2 sm:hidden" />
         </SidebarMobile>

diff --git a/apps/user-web/components/app/LoggedinUserCard.tsx b/apps/user-web/components/app/LoggedinUserCard.tsx
@@ -1,11 +1,11 @@
 "use client";
 import { userState } from "@/store/atoms";
-import Avatar, { genConfig } from "react-nice-avatar";
 import { useRecoilValue } from "recoil";
 import { Badge } from "../ui/badge";
 import axios from "axios";
 import { useRouter } from "next/navigation";
 import CurrencySelect from "../CurrencySelect";
+import MultiAvatar from "./MultiAvatar";
 
 export default function LoggedinUserCard() {
   const user = useRecoilValue(userState);
@@ -29,9 +29,9 @@ export default function LoggedinUserCard() {
     <div>
       <CurrencySelect />
       <div className=" border border-foreground rounded-3xl p-2 flex justify-between items-center gap-2">
-        <Avatar
+        <MultiAvatar
+          name={fullName}
           className="w-12 h-12 sm:w-0 lg:w-12 lg:h-12"
-          {...genConfig(fullName)}
         />
         <h3 className="font-semibold">{fullName}</h3>
         <Badge

diff --git a/apps/user-web/components/app/MultiAvatar.tsx b/apps/user-web/components/app/MultiAvatar.tsx
@@ -0,0 +1,13 @@
+import multiavatar from "@multiavatar/multiavatar/esm";
+export default function MultiAvatar({
+  name,
+  className,
+}: {
+  name?: string;
+  className?: string;
+}) {
+  const avatar = multiavatar(name ?? "John Doe");
+  return (
+    <div className={className} dangerouslySetInnerHTML={{ __html: avatar }} />
+  );
+}
diff --git a/apps/user-web/components/app/chat/Users.tsx b/apps/user-web/components/app/chat/Users.tsx
@@ -3,10 +3,10 @@ import clsx from "clsx";
 import { ChatUser, MessagesSetters, onlineSetters } from "./Chat";
 import { useSocketInstance } from "@/store/customHooks";
 import { Dispatch, SetStateAction, useEffect } from "react";
-import Avatar, { genConfig } from "react-nice-avatar";
 import { useRecoilState } from "recoil";
 import { chatOnlineState, chatState, readMessagesState } from "@/store/atoms";
 import { Badge } from "@/components/ui/badge";
+import MultiAvatar from "../MultiAvatar";
 
 function UserAvatar({
   user,
@@ -63,8 +63,8 @@ function UserAvatar({
           {unread}
         </Badge>
       )}
-      <Avatar
-        {...genConfig(user.firstName + " " + user.lastName)}
+      <MultiAvatar
+        name={user.firstName + " " + user.lastName}
         className="h-10 w-10 mx-auto  sm:h-14 sm:w-14"
       />
       {online && (

diff --git a/apps/user-web/components/app/transfer/RecentInteractionsContent.tsx b/apps/user-web/components/app/transfer/RecentInteractionsContent.tsx
@@ -4,8 +4,8 @@ import Loading from "@/components/Loading";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
-import Avatar, { genConfig } from "react-nice-avatar";
 import SendTo from "./SendTo";
+import MultiAvatar from "../MultiAvatar";
 
 async function fetchRecentInter() {
   const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -27,6 +27,7 @@ export default function RecentInteractionsContent() {
   } else if (data) {
     return (
       <div className="flex gap-3  flex-wrap">
+        <MultiAvatar />
         {data.recentInteractions &&
           data.recentInteractions.map((user: any) => (
             <SendTo
@@ -38,8 +39,8 @@ export default function RecentInteractionsContent() {
                 key={user.id}
                 className="grid text-center gap-2 justify-items-center"
               >
-                <Avatar
-                  {...genConfig(user.firstName + " " + user.lastName)}
+                <MultiAvatar
+                  name={user.firstName + " " + user.lastName}
                   className="h-20 w-20 hover:scale-110 transition-transform"
                 />
                 <p className="font-medium">

diff --git a/apps/user-web/components/app/transfer/RecentUsersContent.tsx b/apps/user-web/components/app/transfer/RecentUsersContent.tsx
@@ -4,8 +4,8 @@ import Loading from "@/components/Loading";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
-import Avatar, { genConfig } from "react-nice-avatar";
 import SendTo from "./SendTo";
+import MultiAvatar from "../MultiAvatar";
 
 async function fetchRecentUser() {
   const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -35,8 +35,8 @@ export default function RecentUsersContent() {
               id={user.id}
             >
               <div className="grid text-center gap-2 justify-items-center">
-                <Avatar
-                  {...genConfig(user.firstName + " " + user.lastName)}
+                <MultiAvatar
+                  name={user.firstName + " " + user.lastName}
                   className="h-20 w-20 hover:scale-110 transition-transform"
                 />
                 <p className="font-medium">

diff --git a/apps/user-web/components/app/transfer/SearchUsers.tsx b/apps/user-web/components/app/transfer/SearchUsers.tsx
@@ -24,9 +24,9 @@ import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import Loading from "@/components/Loading";
 
-import Avatar, { genConfig } from "react-nice-avatar";
 import { ArrowRight } from "lucide-react";
 import SendTo from "./SendTo";
+import MultiAvatar from "../MultiAvatar";
 
 //delaying search while typing continuously
 function useDebounce(value: string, delay: number = 300) {
@@ -63,8 +63,8 @@ function UserItem({ user }: { user: any }) {
         className=" hover:bg-muted grid grid-cols-5 w-full p-2 items-center"
         onClick={() => setOpen(true)}
       >
-        <Avatar
-          {...genConfig(user.firstName + " " + user.lastName)}
+        <MultiAvatar
+          name={user.firstName + " " + user.lastName}
           className="h-8 w-8"
         />
         <p className="col-span-3 font-medium">

diff --git a/apps/user-web/components/app/transfer/SendTo.tsx b/apps/user-web/components/app/transfer/SendTo.tsx
@@ -9,21 +9,20 @@ import {
 } from "@/components/ui/drawer";
 import {
   Dialog,
-  DialogClose,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
 
-import Avatar, { genConfig } from "react-nice-avatar";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 
 import TransferForm from "./TransferForm";
 import { useDisplayType } from "@/store/customHooks";
 import SlideConfirm from "../SlideConfirm";
 import { useState } from "react";
+import MultiAvatar from "../MultiAvatar";
 
 export default function SendTo({
   children,
@@ -63,10 +62,7 @@ export default function SendTo({
                   </DrawerDescription>
                 </DrawerHeader>
                 <div className="grid text-center gap-2">
-                  <Avatar
-                    {...genConfig(fullName)}
-                    className="h-20 w-20 mx-auto"
-                  />
+                  <MultiAvatar name={fullName} className="h-20 w-20 mx-auto" />
                   <TransferForm id={id}>
                     <textarea
                       className="border rounded-lg text-sm p-2"
@@ -114,7 +110,7 @@ export default function SendTo({
               </DialogHeader>
               <div className="grid grid-cols-2 gap-3">
                 <div className="flex flex-col items-center gap-2 justify-center">
-                  <Avatar {...genConfig(fullName)} className="h-28 w-28" />
+                  <MultiAvatar name={fullName} className="h-28 w-28" />
                   <p className="font-medium text-xl">{fullName}</p>
                 </div>
                 <div className="m-2">

diff --git a/apps/user-web/components/merchant/PaymentHistory.tsx b/apps/user-web/components/merchant/PaymentHistory.tsx
@@ -78,7 +78,7 @@ function formatPaymentData(data: number[], rate: number) {
     prevDateMilliSeconds = currDateMilliSeconds;
     return {
       date: new Date(currDateMilliSeconds).toUTCString(),
-      amount: getCurrencyFloatAmount(item / 100, rate),
+      amount: getCurrencyFloatAmount((Math.random() * 100) / 100, rate),
     };
   });
   return res;

diff --git a/apps/user-web/package.json b/apps/user-web/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@multiavatar/multiavatar": "^1.0.7",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -34,7 +35,6 @@
     "qrcode-generator": "^1.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-nice-avatar": "^1.5.0",
     "react-svg-worldmap": "^2.0.0-alpha.16",
     "recharts": "^2.12.7",
     "recoil": "^0.7.7",

diff --git a/package-lock.json b/package-lock.json