@decentnetwork/beagle 0.1.36 → 0.1.37

package/dist/desktop/app.js

@@ -1,4 +1,4 @@
-window.__DK_UI_VERSION="0.1.35";
+window.__DK_UI_VERSION="0.1.36";
 const ICON_PATHS = {
   // ---- tab bar (the four must feel like one set) ----
   users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
@@ -1622,7 +1622,7 @@ function DkGroupSender({ grp, T, avatar }) {
       title: grp.sender,
       style: { display: "inline-flex", alignItems: "center", gap: 5, background: "none", border: "none", padding: 0, cursor: "pointer" }
     },
-    avatar ? /* @__PURE__ */ React.createElement(DkIdenticon, { seed, size: 24, radius: 6 }) : /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)" } }, grp.sender)
+    avatar ? /* @__PURE__ */ React.createElement(DkEnsAvatar, { userid: grp.senderId, fallbackSeed: seed, size: 24, radius: 6 }) : /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--faint)" } }, grp.sender)
   ), open && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { onClick: () => setOpen(false), style: { position: "fixed", inset: 0, zIndex: 40 } }), /* @__PURE__ */ React.createElement("span", { style: {
     position: "absolute",
     left: 0,
@@ -1637,7 +1637,7 @@ function DkGroupSender({ grp, T, avatar }) {
     display: "flex",
     flexDirection: "column",
     gap: 8
-  } }, /* @__PURE__ */ React.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(DkIdenticon, { seed, size: 34, radius: 8 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, fontWeight: 700, color: "var(--text)", wordBreak: "break-all" } }, grp.sender)), grp.senderId ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Mono, { size: 10.5, dim: true, copy: grp.senderId, title: grp.senderId }, shortKey(grp.senderId, 12, 8)), /* @__PURE__ */ React.createElement(
+  } }, /* @__PURE__ */ React.createElement("span", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(DkEnsAvatar, { userid: grp.senderId, fallbackSeed: seed, size: 34, radius: 8 }), /* @__PURE__ */ React.createElement("span", { style: { fontFamily: "var(--mono)", fontSize: 12.5, fontWeight: 700, color: "var(--text)", wordBreak: "break-all" } }, grp.sender)), grp.senderId ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Mono, { size: 10.5, dim: true, copy: grp.senderId, title: grp.senderId }, shortKey(grp.senderId, 12, 8)), /* @__PURE__ */ React.createElement(
     "button",
     {
       onClick: addFriend,
@@ -2874,6 +2874,39 @@ function DkPunkAvatar({ id, size, radius, fallbackSeed }) {
     }
   );
 }
+const dkEnsAvCache = /* @__PURE__ */ new Map();
+function DkEnsAvatar({ userid, fallbackSeed, size, radius }) {
+  const [pub, setPub] = React.useState(() => userid && dkEnsAvCache.has(userid) ? dkEnsAvCache.get(userid) : void 0);
+  React.useEffect(() => {
+    let dead = false;
+    if (!userid) {
+      setPub(null);
+      return void 0;
+    }
+    if (dkEnsAvCache.has(userid)) {
+      setPub(dkEnsAvCache.get(userid));
+      return void 0;
+    }
+    fetch(`/api/ens-profile?userid=${encodeURIComponent(userid)}`).then((r) => r.json()).then((d) => {
+      var _a;
+      const v = d.ok && d.profile ? { avatarUrl: d.profile.avatarUrl || null, punkId: (_a = d.profile.punkId) != null ? _a : null } : null;
+      dkEnsAvCache.set(userid, v);
+      if (!dead)
+        setPub(v);
+    }).catch(() => {
+      if (!dead)
+        setPub(null);
+    });
+    return () => {
+      dead = true;
+    };
+  }, [userid]);
+  if (pub && pub.avatarUrl)
+    return /* @__PURE__ */ React.createElement(DkImgAvatar, { url: pub.avatarUrl, seed: fallbackSeed || userid, size, radius });
+  if (pub && pub.punkId != null)
+    return /* @__PURE__ */ React.createElement(DkPunkAvatar, { id: pub.punkId, size, radius, fallbackSeed: fallbackSeed || userid });
+  return /* @__PURE__ */ React.createElement(DkIdenticon, { seed: fallbackSeed || userid || "x", size, radius });
+}
 function DkPunkPicker({ T, onPick, onClose }) {
   const TYPES = ["any", "female", "male", "zombie", "ape", "alien"];
   const tLabel = (t) => T && T["pt_" + t] || t;
@@ -3211,7 +3244,7 @@ function ProfileTab({ T, me, onEdit }) {
     setEditing(false);
   } }));
 }
-Object.assign(window, { ProfileTab, DkPunkAvatar, DkPublicProfile });
+Object.assign(window, { ProfileTab, DkPunkAvatar, DkEnsAvatar, DkPublicProfile });
 function DkDirAvatar({ p, size }) {
   const [broken, setBroken] = React.useState(false);
   if (p.punkId != null && !(p.avatar && !broken)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decentnetwork/beagle",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "Beagle — P2P chat, file transfer and calls for regular users, on the Decent Network. No admin privilege required.",
   "type": "module",
   "main": "./dist/index.js",