@arcblock/ux 3.1.11 → 3.1.12

package/lib/DIDConnect/did-connect-logo.js

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
 import { useTheme as t } from "@mui/material";
 import r from "../DIDLogo/index.js";
-function i() {
+function a() {
   const o = t();
-  return /* @__PURE__ */ e(r, { size: 16, name: "connect", dark: o.palette.mode === "dark" });
+  return /* @__PURE__ */ e(r, { size: 16, fontSize: 36, name: "connect", dark: o.palette.mode === "dark" });
 }
 export {
-  i as default
+  a as default
 };

package/lib/DIDLogo/index.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as C, Fragment as f } from "react/jsx-runtime";
-import { useRef as w, useState as d, useEffect as P } from "react";
-const m = {
+import { useRef as m, useState as d, useEffect as P } from "react";
+const w = {
   default: {
     color: "#4598FA",
     text: void 0
@@ -26,24 +26,24 @@ function H({
   style: B = {},
   className: p = "",
   size: v = "1em",
-  color: W = void 0,
+  color: T = void 0,
   text: h = void 0,
-  textColor: S = void 0,
+  textColor: W = void 0,
   fontSize: x = void 0,
   gap: M = 10,
-  variant: T = "default",
+  variant: S = "default",
   name: y = void 0,
   dark: A = !1
 }) {
-  const c = T === "contained", Z = m[y] || m.default, o = h === void 0 ? Z?.text : h, F = W || Z?.color, R = S || (A ? "white" : "#121212");
+  const c = S === "contained", Z = w[y] || w.default, o = h === void 0 ? Z?.text : h, F = T || Z?.color, R = W || (A ? "white" : "#121212");
   let e = 1, t = 80, n = x, i = M + 5;
   !c && o && (t = 64, e = 1.25, i = M, x || (n = 32)), n = n || 40;
-  const u = w(null), L = w(null), [z, D] = d(), [j, $] = d(t), [b, I] = d(t), N = c ? t / 2 + 5 : t / 2 + 3, r = t / 5;
+  const u = m(null), L = m(null), [z, D] = d(), [j, $] = d(t), [b, I] = d(t), N = c ? t / 2 + 5 : t / 2 + 3, r = t / 5;
   P(() => {
-    if (L.current) {
+    L.current && setTimeout(() => {
       const E = u.current?.getBBox(), G = L.current.getBoundingClientRect(), a = E?.width || 0, O = G.height / t, g = t * e + a + (a ? i : 0);
       I(g), $(t * e + (a ? i : 0)), D(g * O);
-    }
+    }, 300);
   }, [o, i, e, t]);
   const V = /* @__PURE__ */ l(f, { children: [
     /* @__PURE__ */ C("rect", { ref: L, width: t, height: t, rx: r, fill: "currentColor", opacity: 0.1 }),

package/lib/SocialShare/index.js

@@ -2,7 +2,7 @@ import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { useTheme as y, Menu as I, MenuItem as c, Box as n } from "@mui/material";
 import { useMemoizedFn as S } from "ahooks";
 import { Icon as B } from "@iconify/react";
-import { TwitterShareButton as L, XIcon as w, TelegramShareButton as T, TelegramIcon as C, RedditShareButton as F, RedditIcon as R, WeiboShareButton as j, WeiboIcon as z, FacebookShareButton as M, FacebookIcon as W, LinkedinShareButton as v, LinkedinIcon as O } from "react-share";
+import { TwitterShareButton as w, XIcon as T, TelegramShareButton as L, TelegramIcon as C, RedditShareButton as F, RedditIcon as R, WeiboShareButton as j, WeiboIcon as z, FacebookShareButton as M, FacebookIcon as W, LinkedinShareButton as v, LinkedinIcon as O } from "react-share";
 import P from "../Toast/index.js";
 import { translate as X } from "../Locale/util.js";
 const a = {
@@ -18,7 +18,7 @@ const a = {
 }, H = {
   en: {
     copyLink: "Copy Link",
-    x: "X",
+    x: "X (Twitter)",
     telegram: "Telegram",
     reddit: "Reddit",
     facebook: "Facebook",
@@ -28,7 +28,7 @@ const a = {
   },
   zh: {
     copyLink: "复制链接",
-    x: "X",
+    x: "X (Twitter)",
     telegram: "Telegram",
     reddit: "Reddit",
     facebook: "Facebook",
@@ -54,16 +54,16 @@ const a = {
 });
 function Q({
   anchorEl: h,
-  onClose: o,
+  onClose: t,
   sharedProps: u,
   locale: x = "en"
 }) {
-  const m = y(), k = !!h, t = S((f, g = {}) => X(H, f, x, "en", g)), d = {
+  const m = y(), k = !!h, o = S((f, g = {}) => X(H, f, x, "en", g)), d = {
     bgStyle: { fill: m.palette.background.paper },
     iconFillColor: m.palette.text.secondary
   }, { title: p, url: r } = u, b = () => {
     r && navigator.clipboard.writeText(r).then(() => {
-      P.success(t("copySuccess"));
+      P.success(o("copySuccess"));
     });
   };
   return /* @__PURE__ */ i(
@@ -72,7 +72,7 @@ function Q({
       id: "basic-menu",
       anchorEl: h,
       open: k,
-      onClose: o,
+      onClose: t,
       anchorOrigin: {
         vertical: "top",
         horizontal: "right"
@@ -97,39 +97,39 @@ function Q({
           c,
           {
             onClick: () => {
-              b(), o();
+              b(), t();
             },
             sx: a,
             children: /* @__PURE__ */ i(n, { sx: l, children: [
               /* @__PURE__ */ e(n, { sx: s, children: /* @__PURE__ */ e(B, { icon: "tabler:link" }) }),
-              /* @__PURE__ */ e("span", { children: t("copyLink") })
+              /* @__PURE__ */ e("span", { children: o("copyLink") })
             ] })
           },
           "copy-to-clipboard"
         ),
-        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: L, url: r, title: p, sx: l, children: [
-          /* @__PURE__ */ e(n, { component: w, sx: s, round: !0, ...d }),
-          /* @__PURE__ */ e("span", { children: t("x") })
+        /* @__PURE__ */ e(c, { onClick: t, sx: a, children: /* @__PURE__ */ i(n, { component: w, url: r, title: p, sx: l, children: [
+          /* @__PURE__ */ e(n, { component: T, sx: s, round: !0, ...d }),
+          /* @__PURE__ */ e("span", { children: o("x") })
         ] }) }, "share-to-x"),
-        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: T, url: r, title: p, sx: l, children: [
+        /* @__PURE__ */ e(c, { onClick: t, sx: a, children: /* @__PURE__ */ i(n, { component: L, url: r, title: p, sx: l, children: [
           /* @__PURE__ */ e(n, { component: C, sx: s, round: !0, ...d }),
-          /* @__PURE__ */ e("span", { children: t("telegram") })
+          /* @__PURE__ */ e("span", { children: o("telegram") })
         ] }) }, "share-to-telegram"),
-        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: F, url: r, title: p, sx: l, children: [
+        /* @__PURE__ */ e(c, { onClick: t, sx: a, children: /* @__PURE__ */ i(n, { component: F, url: r, title: p, sx: l, children: [
           /* @__PURE__ */ e(n, { component: R, sx: s, round: !0, ...d }),
-          /* @__PURE__ */ e("span", { children: t("reddit") })
+          /* @__PURE__ */ e("span", { children: o("reddit") })
         ] }) }, "share-to-reddit"),
-        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: j, url: r, title: p, sx: l, children: [
+        /* @__PURE__ */ e(c, { onClick: t, sx: a, children: /* @__PURE__ */ i(n, { component: j, url: r, title: p, sx: l, children: [
           /* @__PURE__ */ e(n, { component: z, sx: s, round: !0, ...d }),
-          /* @__PURE__ */ e("span", { children: t("weiBo") })
+          /* @__PURE__ */ e("span", { children: o("weiBo") })
         ] }) }, "share-to-weibo"),
-        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: M, url: r, title: p, sx: l, children: [
+        /* @__PURE__ */ e(c, { onClick: t, sx: a, children: /* @__PURE__ */ i(n, { component: M, url: r, title: p, sx: l, children: [
           /* @__PURE__ */ e(n, { component: W, sx: s, round: !0, ...d }),
-          /* @__PURE__ */ e("span", { children: t("facebook") })
+          /* @__PURE__ */ e("span", { children: o("facebook") })
         ] }) }, "share-to-facebook"),
-        /* @__PURE__ */ e(c, { onClick: o, sx: a, children: /* @__PURE__ */ i(n, { component: v, url: r, title: p, sx: l, children: [
+        /* @__PURE__ */ e(c, { onClick: t, sx: a, children: /* @__PURE__ */ i(n, { component: v, url: r, title: p, sx: l, children: [
           /* @__PURE__ */ e(n, { component: O, sx: s, round: !0, ...d }),
-          /* @__PURE__ */ e("span", { children: t("linkedin") })
+          /* @__PURE__ */ e("span", { children: o("linkedin") })
         ] }) }, "share-to-linkedin")
       ]
     }

package/lib/Util/constant.js

@@ -1,4 +1,4 @@
-const T = 300, _ = 1800, t = "/.well-known/service", o = "login_token", I = "refresh_token", e = "/.well-known/service", A = "/api/did", n = `${t}/admin`, s = `${t}/user`, O = `${t}/user/did-spaces`, R = `${t}/admin/navigation`, D = "did:abt:", L = {
+const T = 300, _ = 1800, t = "/.well-known/service", e = "login_token", o = "refresh_token", I = "/.well-known/service", A = "/api/did", n = `${t}/admin`, s = `${t}/user`, O = `${t}/user/did-spaces`, R = `${t}/admin/navigation`, D = "did:abt:", L = {
   VALID: "valid",
   REVOKED: "revoked"
 }, E = {
@@ -20,14 +20,14 @@ const T = 300, _ = 1800, t = "/.well-known/service", o = "login_token", I = "ref
   [E.WALLET]: "DID Wallet",
   [E.NFT]: "NFT",
   [E.PASSKEY]: "Passkey",
-  [E.TWITTER]: "X"
+  [E.TWITTER]: "X (Twitter)"
 }, l = {
   email: "Email",
   auth0: "Auth0",
   apple: "Apple",
   github: "Github",
   google: "Google",
-  twitter: "X"
+  twitter: "X (Twitter)"
 }, c = 360, a = 576;
 export {
   A as API_DID_PREFIX,
@@ -45,7 +45,7 @@ export {
   l as OAUTH_PROVIDER,
   L as PASSPORT_STATUS,
   s as PROFILE_URL,
-  I as REFRESH_TOKEN_STORAGE_KEY,
-  e as RELAY_SOCKET_PREFIX,
-  o as SESSION_TOKEN_STORAGE_KEY
+  o as REFRESH_TOKEN_STORAGE_KEY,
+  I as RELAY_SOCKET_PREFIX,
+  e as SESSION_TOKEN_STORAGE_KEY
 };

package/lib/Util/federated.js

@@ -1,20 +1,20 @@
-import i from "lodash/isEmpty";
+import o from "lodash/isEmpty";
 const a = {};
-function o(e = window.blocklet) {
+function i(e = window.blocklet) {
   return (e?.settings?.federated || {}).master;
 }
-function d(e = window.blocklet) {
+function s(e = window.blocklet) {
   return (e?.settings?.federated || {}).config;
 }
-function s(e = window.blocklet) {
-  return d(e)?.status === "approved";
+function d(e = window.blocklet) {
+  return i(e).appPid === e.appPid ? !1 : s(e)?.status === "approved";
 }
 function w(e = window.blocklet) {
-  return o(e)?.appPid;
+  return i(e)?.appPid;
 }
 function c(e = window.blocklet) {
-  const p = o(e);
-  return !i(p) ? {
+  const p = i(e);
+  return !o(p) ? {
     appId: p.appId,
     appName: p.appName,
     appDescription: p.appDescription,
@@ -56,7 +56,7 @@ function u(e = window.blocklet) {
   }) : null;
 }
 function g(e) {
-  const p = [], r = c(e), t = u(e), n = s(e);
+  const p = [], r = c(e), t = u(e), n = d(e);
   return t && p.push(t), r && r?.appId !== t?.appId && n && p.push(r), p.reverse();
 }
 async function l(e, p = !1) {
@@ -74,10 +74,10 @@ async function l(e, p = !1) {
 export {
   g as getApps,
   l as getBlockletData,
-  d as getConfig,
+  s as getConfig,
   u as getCurrentApp,
   c as getFederatedApp,
-  s as getFederatedEnabled,
-  o as getMaster,
+  d as getFederatedEnabled,
+  i as getMaster,
   w as getSourceAppPid
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -66,16 +66,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "d050c2db5014a01199a48f0e99b71509f6ef1a7e",
+  "gitHead": "0cb1a641693d3f3c1ac105d8117365f289d9e5c2",
   "dependencies": {
-    "@arcblock/bridge": "3.1.11",
-    "@arcblock/did": "^1.21.2",
+    "@arcblock/bridge": "3.1.12",
+    "@arcblock/did": "^1.21.3",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.1.11",
-    "@arcblock/nft-display": "3.1.11",
-    "@arcblock/react-hooks": "3.1.11",
-    "@blocklet/js-sdk": "^1.16.47",
-    "@blocklet/theme": "3.1.11",
+    "@arcblock/icons": "3.1.12",
+    "@arcblock/nft-display": "3.1.12",
+    "@arcblock/react-hooks": "3.1.12",
+    "@blocklet/js-sdk": "^1.16.48",
+    "@blocklet/theme": "3.1.12",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",
@@ -83,7 +83,7 @@
     "@iconify-icons/mdi": "^1.2.48",
     "@iconify-icons/tabler": "^1.2.95",
     "@iconify/react": "^5.2.1",
-    "@ocap/mcrypto": "^1.21.2",
+    "@ocap/mcrypto": "^1.21.3",
     "@solana/qr-code-styling": "^1.6.0",
     "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",

package/src/DIDConnect/did-connect-logo.tsx

@@ -4,5 +4,5 @@ import DIDLogo from '../DIDLogo';
 export default function DidConnectLogo() {
   const theme = useTheme();
 
-  return <DIDLogo size={16} name="connect" dark={theme.palette.mode === 'dark'} />;
+  return <DIDLogo size={16} fontSize={36} name="connect" dark={theme.palette.mode === 'dark'} />;
 }

package/src/DIDLogo/index.tsx

@@ -80,18 +80,22 @@ export default function DIDLogo({
 
   useEffect(() => {
     if (iconRef.current) {
-      // @ts-ignore
-      const textBbox = textRef.current?.getBBox();
-      // @ts-ignore
-      const iconRect = iconRef.current.getBoundingClientRect();
+      setTimeout(() => {
+        // @ts-ignore
+        const textBbox = textRef.current?.getBBox();
+        // @ts-ignore
+        const iconRect = iconRef.current.getBoundingClientRect();
 
-      const textWidth = textBbox?.width || 0;
-      const scaleSize = iconRect.height / initSize;
+        const textWidth = textBbox?.width || 0;
+        const scaleSize = iconRect.height / initSize;
 
-      const newViewBoxWidth = initSize * scaleIcon + textWidth + (textWidth ? finalGap : 0);
-      setViewBoxWidth(newViewBoxWidth);
-      setTextX(initSize * scaleIcon + (textWidth ? finalGap : 0));
-      setSvgWidth(newViewBoxWidth * scaleSize);
+        const newViewBoxWidth = initSize * scaleIcon + textWidth + (textWidth ? finalGap : 0);
+        setViewBoxWidth(newViewBoxWidth);
+        setTextX(initSize * scaleIcon + (textWidth ? finalGap : 0));
+        setSvgWidth(newViewBoxWidth * scaleSize);
+        // HACK: 留给字体渲染一些时间，否则首次出现时，计算的 svg 宽度是不对的
+        // 这个时间小于 dialog 动画出现的时间，所以不会引起视觉上的抖动
+      }, 300);
     }
   }, [finalText, finalGap, scaleIcon, initSize]);
 

package/src/SocialShare/index.tsx

@@ -42,7 +42,7 @@ export interface SharedProps {
 const translations = {
   en: {
     copyLink: 'Copy Link',
-    x: 'X',
+    x: 'X (Twitter)',
     telegram: 'Telegram',
     reddit: 'Reddit',
     facebook: 'Facebook',
@@ -52,7 +52,7 @@ const translations = {
   },
   zh: {
     copyLink: '复制链接',
-    x: 'X',
+    x: 'X (Twitter)',
     telegram: 'Telegram',
     reddit: 'Reddit',
     facebook: 'Facebook',

package/src/Util/constant.ts

@@ -40,7 +40,7 @@ export const LOGIN_PROVIDER_NAME = {
   [LOGIN_PROVIDER.WALLET]: 'DID Wallet',
   [LOGIN_PROVIDER.NFT]: 'NFT',
   [LOGIN_PROVIDER.PASSKEY]: 'Passkey',
-  [LOGIN_PROVIDER.TWITTER]: 'X',
+  [LOGIN_PROVIDER.TWITTER]: 'X (Twitter)',
 };
 
 // HACK: 目前这里的键值不能使用 [LOGIN_PROVIDER.AUTH0] 形式，否则会影响 ts 的 keyof typeof OAUTH_PROVIDER 来获取键值作为类型的判断
@@ -50,7 +50,7 @@ export const OAUTH_PROVIDER = {
   apple: 'Apple',
   github: 'Github',
   google: 'Google',
-  twitter: 'X',
+  twitter: 'X (Twitter)',
 };
 
 export const DID_CONNECT_SMALL_WIDTH = 360;

package/src/Util/federated.ts

@@ -13,6 +13,12 @@ export function getConfig(blocklet = window.blocklet) {
 }
 
 export function getFederatedEnabled(blocklet = window.blocklet) {
+  const master = getMaster(blocklet);
+  // 如果当前应用是 master，则代表未开启统一登录
+  if (master.appPid === blocklet.appPid) {
+    return false;
+  }
+
   const config = getConfig(blocklet);
   return config?.status === 'approved';
 }