@arcblock/ux 3.2.19 → 3.3.0

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

@@ -8,7 +8,7 @@ import { getDIDMotifInfo as Z } from "@arcblock/did-motif";
 import oo from "lodash/noop";
 import "../Theme/theme.js";
 import "../Theme/theme-provider.js";
-import { mergeSx as l } from "../Util/style.js";
+import { mergeSx as d } from "../Util/style.js";
 import { isEthereumDid as ro, getDIDColor as eo, hexToRgba as c } from "../Util/index.js";
 import b from "./did-connect-footer.js";
 const S = N(({ ref: t, ...x }) => /* @__PURE__ */ O(
@@ -45,15 +45,15 @@ function ko({
     wait: B
   }), C = (o, r) => {
     ["backdropClick", "escapeKeyDown"].includes(r) || A();
-  }, D = I || t || w, P = h ? Q : V, z = Y.hex.hsl(e), [v, R, d] = z, p = [0, 30, 60, 30, 0, 30, 60, 30], M = Math.max(...p), j = Math.min(...p);
+  }, D = I || t || w, z = h ? Q : V, M = Y.hex.hsl(e), [v, R, l] = M, p = [0, 30, 60, 30, 0, 30, 60, 30], P = Math.max(...p), j = Math.min(...p);
   let g = !1;
-  (d * (100 + M) / 100 > 100 || d * (100 + j) / 100 < 0) && (g = !0);
+  (l * (100 + P) / 100 > 100 || l * (100 + j) / 100 < 0) && (g = !0);
   const E = `linear-gradient(45deg, ${p.map((o) => {
-    let r = d * (100 + o) / 100, n = 0.6;
-    return g ? n = 0.5 * (100 + o) / 100 : r = d * (100 + o) / 100, `hsla(${v}, ${R}%, ${r}%, ${n})`;
+    let r = l * (100 + o) / 100, n = 0.6;
+    return g ? n = 0.5 * (100 + o) / 100 : r = l * (100 + o) / 100, `hsla(${v}, ${R}%, ${r}%, ${n})`;
   }).join(", ")})`, G = `linear-gradient(45deg, ${p.map((o) => {
-    let r = d * (100 + o) / 100, n = 0.2;
-    return g ? n = 0.3 * (100 + o) / 100 : r = d * (100 + o) / 100, `hsla(${v}, ${R}%, ${r}%, ${n})`;
+    let r = l * (100 + o) / 100, n = 0.2;
+    return g ? n = 0.3 * (100 + o) / 100 : r = l * (100 + o) / 100, `hsla(${v}, ${R}%, ${r}%, ${n})`;
   }).join(", ")})`, $ = t ? {
     overflow: "visible",
     "&::before, &::after": {
@@ -90,7 +90,7 @@ function ko({
     s,
     {
       className: "did-connect__container-page",
-      sx: l(
+      sx: d(
         {
           borderRadius: 1,
           position: "relative",
@@ -114,13 +114,13 @@ function ko({
           },
           children: [
             f,
-            /* @__PURE__ */ a(b, { currentAppColor: e, sx: l({ mx: 0 }, i?.footer?.sx) })
+            /* @__PURE__ */ a(b, { currentAppColor: e, sx: d({ mx: 0 }, i?.footer?.sx) })
           ]
         }
       )
     }
   ) : u === "drawer" ? /* @__PURE__ */ m(
-    P,
+    z,
     {
       className: "did-connect__container-drawer",
       disableSwipeToOpen: !0,
@@ -131,35 +131,37 @@ function ko({
       slots: {
         backdrop: S
       },
-      PaperProps: {
-        sx: l(
-          {
-            backgroundColor: "background.default",
-            borderRadius: 3,
-            // 保持跟 DID Wallet 一致
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-            p: "2px",
-            ".did-connect__root": {
-              backgroundColor: "transparent"
-            },
-            overflow: "hidden",
-            animation: t ? "glowBreathe 7s linear infinite" : "none",
-            "@keyframes glowBreathe": {
-              "0%, 100%": {
-                boxShadow: `
+      slotProps: {
+        paper: {
+          sx: d(
+            {
+              backgroundColor: "background.default",
+              borderRadius: 3,
+              // 保持跟 DID Wallet 一致
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+              p: "2px",
+              ".did-connect__root": {
+                backgroundColor: "transparent"
+              },
+              overflow: "hidden",
+              animation: t ? "glowBreathe 7s linear infinite" : "none",
+              "@keyframes glowBreathe": {
+                "0%, 100%": {
+                  boxShadow: `
                     inset 0 0 7px ${c(e, 0.3)},
                     inset 0 0 12px ${c(e, 0.3)}`
-              },
-              "50%": {
-                boxShadow: `
+                },
+                "50%": {
+                  boxShadow: `
                     inset 0 0 18px ${c(e, 0.7)},
                     inset 0 0 24px ${c(e, 0.5)}`
+                }
               }
-            }
-          },
-          i?.containerDrawer?.sx
-        )
+            },
+            i?.containerDrawer?.sx
+          )
+        }
       },
       children: [
         h ? null : /* @__PURE__ */ a(
@@ -199,7 +201,7 @@ function ko({
             },
             children: [
               D ? f : null,
-              /* @__PURE__ */ a(b, { currentAppColor: e, sx: l({ mx: 0 }, i?.footer?.sx) })
+              /* @__PURE__ */ a(b, { currentAppColor: e, sx: d({ mx: 0 }, i?.footer?.sx) })
             ]
           }
         )
@@ -216,7 +218,7 @@ function ko({
       className: "did-connect__container-dialog",
       onClose: C,
       PaperProps: {
-        sx: l(
+        sx: d(
           {
             // 避免样式被 server 中的定义覆盖
             "&.MuiPaper-rounded": {
@@ -243,7 +245,7 @@ function ko({
           },
           children: [
             D ? f : null,
-            /* @__PURE__ */ a(b, { currentAppColor: e, sx: l({ mx: 0 }, i?.footer?.sx) })
+            /* @__PURE__ */ a(b, { currentAppColor: e, sx: d({ mx: 0 }, i?.footer?.sx) })
           ]
         }
       )

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

@@ -1,36 +1,36 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { Box as p } from "@mui/material";
-import { useSize as m, useCreation as a } from "ahooks";
-import { useRef as c } from "react";
-import d from "@arcblock/react-hooks/lib/useBrowser";
-import x from "./powered-by.js";
-import u from "./app-info-item.js";
-import b from "./app-icon.js";
-import { hexToRgba as h, getDIDColor as w } from "../Util/index.js";
-import { mergeSx as g } from "../Util/style.js";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { Box as a } from "@mui/material";
+import { useSize as m, useCreation as c } from "ahooks";
+import { useRef as d } from "react";
+import b from "@arcblock/react-hooks/lib/useBrowser";
+import h from "./powered-by.js";
+import x from "./app-info-item.js";
+import g from "./app-icon.js";
+import { hexToRgba as u, getDIDColor as w } from "../Util/index.js";
+import { mergeSx as C } from "../Util/style.js";
 import { DID_CONNECT_MEDIUM_WIDTH as I } from "../Util/constant.js";
 function N({
   currentAppInfo: r = globalThis.blocklet,
-  currentAppColor: n = globalThis.blocklet?.appPid ? w(globalThis.blocklet?.appPid) : "#fff",
-  sx: s = {}
+  currentAppColor: i = globalThis.blocklet?.appPid ? w(globalThis.blocklet?.appPid) : "#fff",
+  sx: l = {}
 }) {
-  const l = d(), t = c(null), o = m(t), i = a(() => o ? o.width < I - 50 : !0, [o, o?.width]);
-  return /* @__PURE__ */ f(
-    p,
+  const e = globalThis?.blocklet, f = b(), n = d(null), o = m(n), s = c(() => o ? o.width < I - 50 : !0, [o, o?.width]);
+  return /* @__PURE__ */ p(
+    a,
     {
-      ref: t,
-      sx: g(
+      ref: n,
+      sx: C(
         {
           display: "flex",
-          justifyContent: "space-between",
+          justifyContent: e?.settings?.didConnect?.showAppInfo === !1 ? "center" : "space-between",
           alignItems: "center",
           gap: 1,
           fontSize: 12,
-          backgroundColor: h(n, 0.08),
+          backgroundColor: e?.settings?.didConnect?.showDidColor === !1 ? "grey.50" : u(i, 0.08),
           // 需要保持跟 .did-connect__root 的规则一样
-          mx: i ? -2 : -3,
+          mx: s ? -2 : -3,
           // eslint-disable-next-line no-nested-ternary
-          px: i ? l.arcSphere ? 1 : 2 : 3,
+          px: s ? f.arcSphere ? 1 : 2 : 3,
           py: 1.5,
           // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
           overflow: "auto",
@@ -43,22 +43,22 @@ function N({
           "scrollbar-width": "none"
           // 隐藏滚动条 (Firefox)
         },
-        s
+        l
       ),
       className: "did-connect__footer",
       children: [
-        /* @__PURE__ */ e(
-          u,
+        e?.settings?.didConnect?.showAppInfo === !1 ? null : /* @__PURE__ */ t(
+          x,
           {
             appInfo: r,
-            appLogo: /* @__PURE__ */ e(b, { appInfo: r, size: 24, sx: { flexShrink: 0 } }),
+            appLogo: /* @__PURE__ */ t(g, { appInfo: r, size: 24, sx: { flexShrink: 0 } }),
             sx: {
               flex: 1,
               overflow: "hidden"
             }
           }
         ),
-        /* @__PURE__ */ e(x, { sx: { maxWidth: "100%", justifyContent: "end" } })
+        /* @__PURE__ */ t(h, { sx: { maxWidth: "100%", justifyContent: "end" } })
       ]
     }
   );

package/lib/DIDConnect/with-container.js

@@ -1,18 +1,18 @@
-import { jsx as e, jsxs as N } from "react/jsx-runtime";
-import { memo as F, createElement as E, useState as H, useRef as I } from "react";
-import { Backdrop as K, useMediaQuery as Q, useTheme as U, Box as c, Drawer as V, SwipeableDrawer as q, Dialog as J, DialogContent as X } from "@mui/material";
-import { useDebounce as Y, useMemoizedFn as v } from "ahooks";
-import { useBrowser as Z } from "@arcblock/react-hooks";
-import oo from "color-convert";
+import { jsx as e, jsxs as F } from "react/jsx-runtime";
+import { memo as E, createElement as H, useState as I, useRef as K } from "react";
+import { Backdrop as Q, useMediaQuery as U, useTheme as V, Box as d, Drawer as q, SwipeableDrawer as J, Dialog as X, DialogContent as Y } from "@mui/material";
+import { useDebounce as Z, useMemoizedFn as v } from "ahooks";
+import { useBrowser as oo } from "@arcblock/react-hooks";
+import eo from "color-convert";
 import "../Theme/theme.js";
 import "../Theme/theme-provider.js";
-import { mergeSx as eo } from "../Util/style.js";
-import { hexToRgba as d } from "../Util/index.js";
-const P = F(({ ref: i, ...m }) => /* @__PURE__ */ E(
-  K,
+import { mergeSx as ro } from "../Util/style.js";
+import { hexToRgba as c } from "../Util/index.js";
+const D = E(({ ref: s, ...m }) => /* @__PURE__ */ H(
+  Q,
   {
     open: !0,
-    ref: i,
+    ref: s,
     style: {
       backgroundColor: "rgba(0, 0, 0, 0.6)",
       backdropFilter: "blur(3px)",
@@ -22,33 +22,33 @@ const P = F(({ ref: i, ...m }) => /* @__PURE__ */ E(
     key: "background"
   }
 ));
-function xo(i) {
+function xo(s) {
   function m({
     popup: y = !1,
-    open: D = !1,
+    open: P = !1,
     hideCloseButton: h = !1,
-    ...s
+    ...r
   }) {
-    const [t, x] = H("#fff"), b = I(null), L = Z(), B = Q("(max-width:640px)");
-    let r = "page";
-    y && (r = "dialog", B && L.mobile.any && (r = "drawer"));
-    const _ = U(), p = D, z = _?.transitions?.duration?.leavingScreen || 500, M = Y(p, {
+    const [a, g] = I("#fff"), f = K(null), B = oo(), L = U("(max-width:640px)");
+    let n = "page";
+    y && (n = "dialog", L && B.mobile.any && (n = "drawer"));
+    const _ = V(), p = P, z = _?.transitions?.duration?.leavingScreen || 500, M = Z(p, {
       wait: z
     }), w = v(() => {
       const o = new URLSearchParams(window.location.search);
       o.get("magicToken") && o.delete("magicToken"), o.toString() && window.history.replaceState({}, "", `${window.location.pathname}?${o.toString()}`);
-    }), k = (o, n) => {
-      ["backdropClick", "escapeKeyDown"].includes(n) || (w(), s?.onClose());
-    }, C = M || p, T = h ? V : q, A = oo.hex.hsl(t), [$, R, a] = A, u = [0, 30, 60, 30, 0, 30, 60, 30], j = Math.max(...u), O = Math.min(...u);
-    let g = !1;
-    (a * (100 + j) / 100 > 100 || a * (100 + O) / 100 < 0) && (g = !0);
+    }), k = (o, t) => {
+      ["backdropClick", "escapeKeyDown"].includes(t) || (w(), r?.onClose());
+    }, C = M || p, T = h ? q : J, A = eo.hex.hsl(a), [S, $, i] = A, u = [0, 30, 60, 30, 0, 30, 60, 30], j = Math.max(...u), O = Math.min(...u);
+    let x = !1;
+    (i * (100 + j) / 100 > 100 || i * (100 + O) / 100 < 0) && (x = !0);
     const W = `linear-gradient(45deg, ${u.map((o) => {
-      let n = a * (100 + o) / 100, l = 0.6;
-      return g ? l = 0.5 * (100 + o) / 100 : n = a * (100 + o) / 100, `hsla(${$}, ${R}%, ${n}%, ${l})`;
+      let t = i * (100 + o) / 100, l = 0.6;
+      return x ? l = 0.5 * (100 + o) / 100 : t = i * (100 + o) / 100, `hsla(${S}, ${$}%, ${t}%, ${l})`;
     }).join(", ")})`, G = `linear-gradient(45deg, ${u.map((o) => {
-      let n = a * (100 + o) / 100, l = 0.2;
-      return g ? l = 0.3 * (100 + o) / 100 : n = a * (100 + o) / 100, `hsla(${$}, ${R}%, ${n}%, ${l})`;
-    }).join(", ")})`, S = {
+      let t = i * (100 + o) / 100, l = 0.2;
+      return x ? l = 0.3 * (100 + o) / 100 : t = i * (100 + o) / 100, `hsla(${S}, ${$}%, ${t}%, ${l})`;
+    }).join(", ")})`, R = r.blocklet?.settings?.didConnect?.showDidColor === !1 ? {} : {
       overflow: "visible",
       "&::before, &::after": {
         content: '""',
@@ -79,76 +79,81 @@ function xo(i) {
           backgroundPosition: "0 0"
         }
       }
-    }, f = v(() => {
-      w(), s?.onClose?.();
+    }, N = r.blocklet?.settings?.didConnect?.showDidColor === !1 ? {} : {
+      animation: "glowBreathe 7s linear infinite",
+      ".did-connect__root": {
+        backgroundColor: "transparent"
+      },
+      overflow: "hidden",
+      "@keyframes glowBreathe": {
+        "0%, 100%": {
+          boxShadow: `
+            inset 0 0 7px ${c(a, 0.3)},
+            inset 0 0 12px ${c(a, 0.3)}`
+        },
+        "50%": {
+          boxShadow: `
+            inset 0 0 18px ${c(a, 0.7)},
+            inset 0 0 24px ${c(a, 0.5)}`
+        }
+      }
+    }, b = v(() => {
+      w(), r?.onClose?.();
     });
-    return r === "page" ? /* @__PURE__ */ e(
-      c,
+    return n === "page" ? /* @__PURE__ */ e(
+      d,
       {
         className: "did-connect__container-page",
-        sx: eo(S, {
+        sx: ro(R, {
           borderRadius: 1,
           position: "relative",
           zIndex: 1
         }),
         children: /* @__PURE__ */ e(
-          c,
+          d,
           {
             sx: {
-              border: `1px solid ${d(t, 0.1)}`,
+              border: `1px solid ${c(a, 0.1)}`,
               m: "-1px",
               position: "relative",
               borderRadius: "12px",
               zIndex: 2,
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ e(i, { ...s, onClose: f, setColor: x, hideCloseButton: !0, mode: r })
+            children: /* @__PURE__ */ e(s, { ...r, onClose: b, setColor: g, hideCloseButton: !0, mode: n })
           }
         )
       }
-    ) : r === "drawer" ? /* @__PURE__ */ N(
+    ) : n === "drawer" ? /* @__PURE__ */ F(
       T,
       {
         className: "did-connect__container-drawer",
         disableSwipeToOpen: !0,
         open: p,
         anchor: "bottom",
-        drawerDragger: b.current,
+        drawerDragger: f.current,
         onClose: k,
         slots: {
-          backdrop: P
+          backdrop: D
         },
-        PaperProps: {
-          sx: {
-            borderRadius: 3,
-            // 保持跟 DID Wallet 一致
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-            p: "2px",
-            animation: "glowBreathe 7s linear infinite",
-            ".did-connect__root": {
-              backgroundColor: "transparent"
-            },
-            overflow: "hidden",
-            "@keyframes glowBreathe": {
-              "0%, 100%": {
-                boxShadow: `
-                      inset 0 0 7px ${d(t, 0.3)},
-                      inset 0 0 12px ${d(t, 0.3)}`
-              },
-              "50%": {
-                boxShadow: `
-                      inset 0 0 18px ${d(t, 0.7)},
-                      inset 0 0 24px ${d(t, 0.5)}`
-              }
+        slotProps: {
+          paper: {
+            sx: {
+              backgroundColor: "background.default",
+              borderRadius: 3,
+              // 保持跟 DID Wallet 一致
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+              p: "2px",
+              ...N
             }
           }
         },
         children: [
           h ? null : /* @__PURE__ */ e(
-            c,
+            d,
             {
-              ref: b,
+              ref: f,
               sx: {
                 px: 1,
                 pt: 2,
@@ -158,7 +163,7 @@ function xo(i) {
                 zIndex: 2
               },
               children: /* @__PURE__ */ e(
-                c,
+                d,
                 {
                   sx: {
                     width: "48px",
@@ -171,7 +176,7 @@ function xo(i) {
             }
           ),
           /* @__PURE__ */ e(
-            c,
+            d,
             {
               sx: {
                 touchAction: "none",
@@ -179,17 +184,17 @@ function xo(i) {
                 width: 500,
                 height: "auto"
               },
-              children: C ? /* @__PURE__ */ e(i, { ...s, onClose: f, setColor: x, hideCloseButton: !0, mode: r }) : null
+              children: C ? /* @__PURE__ */ e(s, { ...r, onClose: b, setColor: g, hideCloseButton: !0, mode: n }) : null
             }
           )
         ]
       }
     ) : /* @__PURE__ */ e(
-      J,
+      X,
       {
         open: p,
         slots: {
-          backdrop: P
+          backdrop: D
         },
         className: "did-connect__container-dialog",
         onClose: k,
@@ -200,11 +205,11 @@ function xo(i) {
               borderRadius: "12px !important"
             },
             position: "relative",
-            ...S
+            ...R
           }
         },
         children: /* @__PURE__ */ e(
-          X,
+          Y,
           {
             sx: {
               maxWidth: "calc(100vw - 18px)",
@@ -216,13 +221,13 @@ function xo(i) {
               zIndex: 1
             },
             children: C ? /* @__PURE__ */ e(
-              i,
+              s,
               {
-                ...s,
-                onClose: f,
-                setColor: x,
+                ...r,
+                onClose: b,
+                setColor: g,
                 hideCloseButton: h,
-                mode: r
+                mode: n
               }
             ) : null
           }

package/lib/Util/constant.d.ts

@@ -35,6 +35,7 @@ export declare const LOGIN_PROVIDER_NAME: {
     [LOGIN_PROVIDER.NFT]: string;
     [LOGIN_PROVIDER.PASSKEY]: string;
     [LOGIN_PROVIDER.TWITTER]: string;
+    federated: string;
 };
 export declare const OAUTH_PROVIDER: {
     email: string;

package/lib/Util/constant.js

@@ -1,4 +1,4 @@
-const T = 300, e = 1800, t = "/.well-known/service", o = "login_token", _ = "refresh_token", I = "/.well-known/service", A = "/api/did", n = `${t}/admin/overview`, s = `${t}/user`, O = `${t}/user/did-spaces`, R = `${t}/admin/navigation`, i = "did:abt:", D = {
+const e = 300, T = 1800, t = "/.well-known/service", o = "login_token", _ = "refresh_token", I = "/.well-known/service", A = "/api/did", n = `${t}/admin/overview`, s = `${t}/user`, O = `${t}/user/did-spaces`, R = `${t}/admin/navigation`, i = "did:abt:", D = {
   VALID: "valid",
   REVOKED: "revoked"
 }, E = {
@@ -20,29 +20,30 @@ const T = 300, e = 1800, t = "/.well-known/service", o = "login_token", _ = "ref
   [E.WALLET]: "DID Wallet",
   [E.NFT]: "NFT",
   [E.PASSKEY]: "Passkey",
-  [E.TWITTER]: "X (Twitter)"
-}, l = {
+  [E.TWITTER]: "X (Twitter)",
+  federated: "Federated"
+}, a = {
   email: "Email",
   auth0: "Auth0",
   apple: "Apple",
   github: "Github",
   google: "Google",
   twitter: "X (Twitter)"
-}, c = 360, a = 576;
+}, l = 360, c = 576;
 export {
   A as API_DID_PREFIX,
   t as BLOCKLET_SERVICE_PATH_PREFIX,
   n as DASHBOARD_URL,
-  T as DEFAULT_TIMEOUT,
-  e as DEFAULT_WINDOW_TIMEOUT,
-  a as DID_CONNECT_MEDIUM_WIDTH,
-  c as DID_CONNECT_SMALL_WIDTH,
+  e as DEFAULT_TIMEOUT,
+  T as DEFAULT_WINDOW_TIMEOUT,
+  c as DID_CONNECT_MEDIUM_WIDTH,
+  l as DID_CONNECT_SMALL_WIDTH,
   i as DID_PREFIX,
   O as DID_SPACE_URL,
   E as LOGIN_PROVIDER,
   L as LOGIN_PROVIDER_NAME,
   R as NAVIGATION_URL,
-  l as OAUTH_PROVIDER,
+  a as OAUTH_PROVIDER,
   D as PASSPORT_STATUS,
   s as PROFILE_URL,
   _ as REFRESH_TOKEN_STORAGE_KEY,

package/lib/package.json.js

@@ -1,4 +1,4 @@
-const e = "3.2.19", s = { "@blocklet/js-sdk": "^1.17.5" }, n = {
+const e = "3.3.0", s = { "@blocklet/js-sdk": "^1.17.6" }, n = {
   version: e,
   dependencies: s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "3.2.19",
+  "version": "3.3.0",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,16 +68,16 @@
     "react": "^19.0.0",
     "react-router-dom": "^6.22.3"
   },
-  "gitHead": "8439c6a0c022c3fab219191ff035d737c422f3ff",
+  "gitHead": "d23472b198c0bf05d452976ebefedab5cb6d047f",
   "dependencies": {
-    "@arcblock/bridge": "3.2.19",
-    "@arcblock/did": "^1.27.15",
+    "@arcblock/bridge": "3.3.0",
+    "@arcblock/did": "^1.27.16",
     "@arcblock/did-motif": "^1.1.14",
-    "@arcblock/icons": "3.2.19",
-    "@arcblock/nft-display": "3.2.19",
-    "@arcblock/react-hooks": "3.2.19",
-    "@blocklet/js-sdk": "^1.17.5",
-    "@blocklet/theme": "3.2.19",
+    "@arcblock/icons": "3.3.0",
+    "@arcblock/nft-display": "3.3.0",
+    "@arcblock/react-hooks": "3.3.0",
+    "@blocklet/js-sdk": "^1.17.6",
+    "@blocklet/theme": "3.3.0",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.2.6",
     "@iconify-icons/logos": "^1.2.36",
@@ -85,7 +85,7 @@
     "@iconify-icons/mdi": "^1.2.48",
     "@iconify-icons/tabler": "^1.2.95",
     "@iconify/react": "^5.2.1",
-    "@ocap/mcrypto": "^1.27.15",
+    "@ocap/mcrypto": "^1.27.16",
     "@solana/qr-code-styling": "^1.6.0",
     "@types/dompurify": "^3.2.0",
     "@types/mui-datatables": "^4.3.12",

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

@@ -216,34 +216,36 @@ export default function DIDConnectContainer({
         slots={{
           backdrop: BackdropWrap,
         }}
-        PaperProps={{
-          sx: mergeSx(
-            {
-              backgroundColor: 'background.default',
-              borderRadius: 3, // 保持跟 DID Wallet 一致
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-              p: '2px',
-              '.did-connect__root': {
-                backgroundColor: 'transparent',
-              },
-              overflow: 'hidden',
-              animation: open ? 'glowBreathe 7s linear infinite' : 'none',
-              '@keyframes glowBreathe': {
-                '0%, 100%': {
-                  boxShadow: `
+        slotProps={{
+          paper: {
+            sx: mergeSx(
+              {
+                backgroundColor: 'background.default',
+                borderRadius: 3, // 保持跟 DID Wallet 一致
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                p: '2px',
+                '.did-connect__root': {
+                  backgroundColor: 'transparent',
+                },
+                overflow: 'hidden',
+                animation: open ? 'glowBreathe 7s linear infinite' : 'none',
+                '@keyframes glowBreathe': {
+                  '0%, 100%': {
+                    boxShadow: `
                     inset 0 0 7px ${hexToRgba(color, 0.3)},
                     inset 0 0 12px ${hexToRgba(color, 0.3)}`,
-                },
-                '50%': {
-                  boxShadow: `
+                  },
+                  '50%': {
+                    boxShadow: `
                     inset 0 0 18px ${hexToRgba(color, 0.7)},
                     inset 0 0 24px ${hexToRgba(color, 0.5)}`,
+                  },
                 },
               },
-            },
-            slotProps?.containerDrawer?.sx
-          ),
+              slotProps?.containerDrawer?.sx
+            ),
+          },
         }}>
         {hideCloseButton ? null : (
           <Box

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

@@ -19,6 +19,8 @@ export default function DIDConnectFooter({
   currentAppColor?: string;
   sx?: SxProps;
 }) {
+  // 使用当前应用的配置，不用跟随主站变化
+  const blocklet = globalThis?.blocklet;
   const browser = useBrowser();
   const rootRef = useRef<HTMLDivElement>(null);
   const size = useSize(rootRef);
@@ -35,11 +37,12 @@ export default function DIDConnectFooter({
       sx={mergeSx(
         {
           display: 'flex',
-          justifyContent: 'space-between',
+          justifyContent: blocklet?.settings?.didConnect?.showAppInfo === false ? 'center' : 'space-between',
           alignItems: 'center',
           gap: 1,
           fontSize: 12,
-          backgroundColor: hexToRgba(currentAppColor, 0.08),
+          backgroundColor:
+            blocklet?.settings?.didConnect?.showDidColor === false ? 'grey.50' : hexToRgba(currentAppColor, 0.08),
           // 需要保持跟 .did-connect__root 的规则一样
           mx: isSmallView ? -2 : -3,
           // eslint-disable-next-line no-nested-ternary
@@ -56,14 +59,16 @@ export default function DIDConnectFooter({
         sx
       )}
       className="did-connect__footer">
-      <AppInfoItem
-        appInfo={currentAppInfo}
-        appLogo={<AppIcon appInfo={currentAppInfo} size={24} sx={{ flexShrink: 0 }} />}
-        sx={{
-          flex: 1,
-          overflow: 'hidden',
-        }}
-      />
+      {blocklet?.settings?.didConnect?.showAppInfo === false ? null : (
+        <AppInfoItem
+          appInfo={currentAppInfo}
+          appLogo={<AppIcon appInfo={currentAppInfo} size={24} sx={{ flexShrink: 0 }} />}
+          sx={{
+            flex: 1,
+            overflow: 'hidden',
+          }}
+        />
+      )}
 
       <PoweredBy sx={{ maxWidth: '100%', justifyContent: 'end' }} />
     </Box>

package/src/DIDConnect/with-container.tsx

@@ -123,39 +123,64 @@ export default function withContainer(Component: React.ComponentType<any>) {
 
     const backgroundGlow = `linear-gradient(45deg, ${colorListGlow.join(', ')})`;
 
-    const glowStyle = {
-      overflow: 'visible',
-      '&::before, &::after': {
-        content: '""',
-        position: 'absolute',
-        top: '-3px',
-        right: '-3px',
-        bottom: '-3px',
-        left: '-3px',
-        background,
-        backgroundSize: '300% 300%',
-        backgroundRepeat: 'no-repeat',
-        animation: 'glowRotate 10s linear infinite',
-        borderRadius: '14px !important',
-        zIndex: 0,
-      },
-      '&::after': {
-        background: backgroundGlow,
-        filter: 'blur(15px)',
-      },
+    const glowStyle =
+      rest.blocklet?.settings?.didConnect?.showDidColor === false
+        ? {}
+        : {
+            overflow: 'visible',
+            '&::before, &::after': {
+              content: '""',
+              position: 'absolute',
+              top: '-3px',
+              right: '-3px',
+              bottom: '-3px',
+              left: '-3px',
+              background,
+              backgroundSize: '300% 300%',
+              backgroundRepeat: 'no-repeat',
+              animation: 'glowRotate 10s linear infinite',
+              borderRadius: '14px !important',
+              zIndex: 0,
+            },
+            '&::after': {
+              background: backgroundGlow,
+              filter: 'blur(15px)',
+            },
 
-      '@keyframes glowRotate': {
-        '0%': {
-          backgroundPosition: '0 0',
-        },
-        '50%': {
-          backgroundPosition: '100% 0',
-        },
-        '100%': {
-          backgroundPosition: '0 0',
-        },
-      },
-    };
+            '@keyframes glowRotate': {
+              '0%': {
+                backgroundPosition: '0 0',
+              },
+              '50%': {
+                backgroundPosition: '100% 0',
+              },
+              '100%': {
+                backgroundPosition: '0 0',
+              },
+            },
+          };
+    const glowBorderStyle =
+      rest.blocklet?.settings?.didConnect?.showDidColor === false
+        ? {}
+        : {
+            animation: 'glowBreathe 7s linear infinite',
+            '.did-connect__root': {
+              backgroundColor: 'transparent',
+            },
+            overflow: 'hidden',
+            '@keyframes glowBreathe': {
+              '0%, 100%': {
+                boxShadow: `
+            inset 0 0 7px ${hexToRgba(color, 0.3)},
+            inset 0 0 12px ${hexToRgba(color, 0.3)}`,
+              },
+              '50%': {
+                boxShadow: `
+            inset 0 0 18px ${hexToRgba(color, 0.7)},
+            inset 0 0 24px ${hexToRgba(color, 0.5)}`,
+              },
+            },
+          };
 
     const wrapOnClose = useMemoizedFn(() => {
       removeMagicToken();
@@ -199,28 +224,15 @@ export default function withContainer(Component: React.ComponentType<any>) {
           slots={{
             backdrop: BackdropWrap,
           }}
-          PaperProps={{
-            sx: {
-              borderRadius: 3, // 保持跟 DID Wallet 一致
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-              p: '2px',
-              animation: 'glowBreathe 7s linear infinite',
-              '.did-connect__root': {
-                backgroundColor: 'transparent',
-              },
-              overflow: 'hidden',
-              '@keyframes glowBreathe': {
-                '0%, 100%': {
-                  boxShadow: `
-                      inset 0 0 7px ${hexToRgba(color, 0.3)},
-                      inset 0 0 12px ${hexToRgba(color, 0.3)}`,
-                },
-                '50%': {
-                  boxShadow: `
-                      inset 0 0 18px ${hexToRgba(color, 0.7)},
-                      inset 0 0 24px ${hexToRgba(color, 0.5)}`,
-                },
+          slotProps={{
+            paper: {
+              sx: {
+                backgroundColor: 'background.default',
+                borderRadius: 3, // 保持跟 DID Wallet 一致
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                p: '2px',
+                ...glowBorderStyle,
               },
             },
           }}>

package/src/Util/constant.ts

@@ -41,6 +41,7 @@ export const LOGIN_PROVIDER_NAME = {
   [LOGIN_PROVIDER.NFT]: 'NFT',
   [LOGIN_PROVIDER.PASSKEY]: 'Passkey',
   [LOGIN_PROVIDER.TWITTER]: 'X (Twitter)',
+  federated: 'Federated',
 };
 
 // HACK: 目前这里的键值不能使用 [LOGIN_PROVIDER.AUTH0] 形式，否则会影响 ts 的 keyof typeof OAUTH_PROVIDER 来获取键值作为类型的判断