1 files changed, 16 insertions, 10 deletions
diff --git a/front/src/components/Avatar.tsx b/front/src/components/Avatar.tsx
index 0f3dc90..a071655 100644
--- a/front/src/components/Avatar.tsx
+++ b/front/src/components/Avatar.tsx
@@ -1,20 +1,21 @@
 import useLocalState from "@/state/state";
-import type { Ship } from "@/types/urbit";
 import Sigil from "./Sigil";
-import ShipModal from "./modals/ShipModal";
 import { isValidPatp } from "urbit-ob";
-import type { UserProfile } from "@/types/nostrill";
+import type { UserProfile, UserType } from "@/types/nostrill";
 import Icon from "@/components/Icon";
+import UserModal from "./modals/UserModal";
 
 export default function ({
-  p,
+  user,
+  userString,
   size,
   color,
   noClickOnName,
   profile,
   picOnly = false,
 }: {
-  p: Ship;
+  user: UserType;
+  userString: string;
   size: number;
   color?: string;
   noClickOnName?: boolean;
@@ -23,10 +24,11 @@ export default function ({
 }) {
   const { setModal } = useLocalState((s) => ({ setModal: s.setModal }));
   // TODO revisit this when %whom updates
+  console.log({ profile });
   const avatarInner = profile ? (
-    <img src={profile.picture} />
-  ) : isValidPatp(p) ? (
-    <Sigil patp={p} size={size} bg={color} />
+    <img src={profile.picture} width={size} height={size} />
+  ) : "urbit" in user && isValidPatp(user.urbit) ? (
+    <Sigil patp={user.urbit} size={size} bg={color} />
   ) : (
     <Icon name="comet" />
   );
@@ -41,14 +43,18 @@ export default function ({
   function openModal(e: React.MouseEvent) {
     if (noClickOnName) return;
     e.stopPropagation();
-    setModal(<ShipModal ship={p} />);
+    setModal(<UserModal user={user} userString={userString} />);
   }
   const name = (
     <div className="name cp" role="link" onMouseUp={openModal}>
       {profile ? (
         <p>{profile.name}</p>
+      ) : "urbit" in user ? (
+        <p className={"p-only" + tooLong(user.urbit)}>
+          {user.urbit.length > 28 ? "Anon" : user.urbit}
+        </p>
       ) : (
-        <p className={"p-only" + tooLong(p)}>{p.length > 28 ? "Anon" : p}</p>
+        <p className={"p-only" + tooLong(user.nostr)}>{user.nostr}</p>
       )}
     </div>
   );