@arcblock/did-connect-react 3.2.18 → 3.3.0

package/docs/hooks-use-connect.zh.md

@@ -11,45 +11,9 @@
 1.  **`connectHolder`**：一个必须在组件树中渲染的 React 元素。此元素负责在 `DidConnect` 模态框被激活时进行渲染。在 `open` 函数被调用之前，它保持不可见。
 2.  **`connectApi`**：一个包含用于控制模态框生命周期的函数（`open`、`close`、`openPopup`、`loginOAuth`）的对象。
 
-```d2
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Your-App: {
-  label: "你的应用程序"
-  shape: rectangle
-
-  Custom-Button: {
-    label: "自定义按钮"
-  }
-
-  useConnect-Hook: {
-    label: "useConnect()"
-  }
-  
-  connectHolder: {
-    label: "connectHolder"
-  }
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Your-App.Custom-Button: "1. 点击"
-Your-App.Custom-Button -> Your-App.useConnect-Hook: "2. 调用 connectApi.open()"
-Your-App.useConnect-Hook -> Your-App.connectHolder: "3. 激活模态框"
-Your-App.connectHolder -> User: "4. 显示 DidConnect UI"
-User -> DID-Wallet: "5. 扫描二维码并批准"
-DID-Wallet -> Your-App.connectHolder: "6. 发送响应"
-Your-App.connectHolder -> Your-App.useConnect-Hook: "7. 触发 onSuccess 回调"
-Your-App.useConnect-Hook -> Your-App.connectHolder: "8. 停用模态框"
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765962229 -->
+![useConnect](assets/diagram/use-connect-diagram-0.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## 设置
 

package/docs/overview.ja.md

@@ -27,51 +27,9 @@
 
 `@arcblock/did-connect-react`はクライアントサイドのライブラリであり、認証ロジックを処理するために対応するバックエンドサービスが必要であることに注意することが重要です。このサービスは、Node.js用の[`@arcblock/did-connect-js`](https://www.arcblock.io/docs/did-connect-sdk)ライブラリを使用して構築する必要があります。
 
-```d2 基本的な認証フロー
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Your-Application: {
-  label: "あなたのReactアプリケーション"
-  shape: rectangle
-
-  SessionProvider: {
-    label: "SessionProvider\n(セッション状態を管理)"
-    shape: rectangle
-
-    App-Components: {
-      label: "あなたのアプリコンポーネント"
-      shape: rectangle
-
-      ConnectButton: {
-        label: "ConnectButton"
-        shape: rectangle
-      }
-    }
-
-    DidConnect-Modal: {
-      label: "DidConnectモーダル\n(QRコードフローを処理)"
-      shape: rectangle
-    }
-  }
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Your-Application.SessionProvider.App-Components.ConnectButton: "1. ボタンをクリック"
-Your-Application.SessionProvider.App-Components.ConnectButton -> Your-Application.SessionProvider.DidConnect-Modal: "2. モーダルを開く"
-Your-Application.SessionProvider.DidConnect-Modal -> User: "3. QRコードを表示"
-User -> DID-Wallet: "4. スキャンして承認"
-DID-Wallet -> Your-Application.SessionProvider: "5. 接続を完了"
-Your-Application.SessionProvider -> Your-Application.SessionProvider.App-Components: "6. セッション状態を更新"
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Overview](assets/diagram/overview-01.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ### インストール
 

package/docs/overview.md

@@ -27,51 +27,9 @@ The library revolves around a central `SessionProvider` that manages the user's
 
 It's important to note that `@arcblock/did-connect-react` is a client-side library and requires a corresponding backend service to handle the authentication logic. This service should be built using the [`@arcblock/did-connect-js`](https://www.arcblock.io/docs/did-connect-sdk) library for Node.js.
 
-```d2 Basic Authentication Flow
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Your-Application: {
-  label: "Your React Application"
-  shape: rectangle
-
-  SessionProvider: {
-    label: "SessionProvider\n(Manages session state)"
-    shape: rectangle
-
-    App-Components: {
-      label: "Your App Components"
-      shape: rectangle
-
-      ConnectButton: {
-        label: "ConnectButton"
-        shape: rectangle
-      }
-    }
-
-    DidConnect-Modal: {
-      label: "DidConnect Modal\n(Handles QR code flow)"
-      shape: rectangle
-    }
-  }
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Your-Application.SessionProvider.App-Components.ConnectButton: "1. Clicks button"
-Your-Application.SessionProvider.App-Components.ConnectButton -> Your-Application.SessionProvider.DidConnect-Modal: "2. Opens modal"
-Your-Application.SessionProvider.DidConnect-Modal -> User: "3. Displays QR code"
-User -> DID-Wallet: "4. Scans & approves"
-DID-Wallet -> Your-Application.SessionProvider: "5. Completes connection"
-Your-Application.SessionProvider -> Your-Application.SessionProvider.App-Components: "6. Updates session state"
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Overview](assets/diagram/overview-01.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ### Installation
 

package/docs/overview.zh-TW.md

@@ -27,51 +27,9 @@
 
 需要注意的是，`@arcblock/did-connect-react` 是一個用戶端程式庫，需要一個對應的後端服務來處理驗證邏輯。該服務應使用適用於 Node.js 的 [`@arcblock/did-connect-js`](https://www.arcblock.io/docs/did-connect-sdk) 程式庫來建構。
 
-```d2 基本驗證流程
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Your-Application: {
-  label: "您的 React 應用程式"
-  shape: rectangle
-
-  SessionProvider: {
-    label: "SessionProvider\n(管理會話狀態)"
-    shape: rectangle
-
-    App-Components: {
-      label: "您的應用程式元件"
-      shape: rectangle
-
-      ConnectButton: {
-        label: "ConnectButton"
-        shape: rectangle
-      }
-    }
-
-    DidConnect-Modal: {
-      label: "DidConnect 對話方塊\n(處理 QR Code 流程)"
-      shape: rectangle
-    }
-  }
-}
-
-DID-Wallet: {
-  label: "DID Wallet"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Your-Application.SessionProvider.App-Components.ConnectButton: "1. 點擊按鈕"
-Your-Application.SessionProvider.App-Components.ConnectButton -> Your-Application.SessionProvider.DidConnect-Modal: "2. 開啟對話方塊"
-Your-Application.SessionProvider.DidConnect-Modal -> User: "3. 顯示 QR Code"
-User -> DID-Wallet: "4. 掃描並批准"
-DID-Wallet -> Your-Application.SessionProvider: "5. 完成連線"
-Your-Application.SessionProvider -> Your-Application.SessionProvider.App-Components: "6. 更新會話狀態"
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Overview](assets/diagram/overview-01.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ### 安裝
 

package/docs/overview.zh.md

@@ -27,51 +27,9 @@
 
 需要注意的是，`@arcblock/did-connect-react` 是一个客户端库，需要相应的后端服务来处理身份验证逻辑。该服务应使用适用于 Node.js 的 [`@arcblock/did-connect-js`](https://www.arcblock.io/docs/did-connect-sdk) 库来构建。
 
-```d2 基本身份验证流程
-direction: down
-
-User: { 
-  shape: c4-person 
-}
-
-Your-Application: {
-  label: "你的 React 应用程序"
-  shape: rectangle
-
-  SessionProvider: {
-    label: "SessionProvider\n（管理会话状态）"
-    shape: rectangle
-
-    App-Components: {
-      label: "你的应用组件"
-      shape: rectangle
-
-      ConnectButton: {
-        label: "ConnectButton"
-        shape: rectangle
-      }
-    }
-
-    DidConnect-Modal: {
-      label: "DidConnect 模态框\n（处理二维码流程）"
-      shape: rectangle
-    }
-  }
-}
-
-DID-Wallet: {
-  label: "DID 钱包"
-  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
-}
-
-User -> Your-Application.SessionProvider.App-Components.ConnectButton: "1. 点击按钮"
-Your-Application.SessionProvider.App-Components.ConnectButton -> Your-Application.SessionProvider.DidConnect-Modal: "2. 打开模态框"
-Your-Application.SessionProvider.DidConnect-Modal -> User: "3. 显示二维码"
-User -> DID-Wallet: "4. 扫描并批准"
-DID-Wallet -> Your-Application.SessionProvider: "5. 完成连接"
-Your-Application.SessionProvider -> Your-Application.SessionProvider.App-Components: "6. 更新会话状态"
-
-```
+<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
+![Overview](assets/diagram/overview-01.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ### 安装
 

package/lib/Connect/assets/locale.js

@@ -66,7 +66,8 @@ const e = {
     passkeyPreviewTitle: "Passkey",
     passkeyPreviewDescription: "Sign in with Passkey - More secure and convenient authentication. No passwords to remember, easily access apps and websites.",
     didConnectTitle: "DID Connect",
-    didConnectDescription: "Decentralized identities and apps, W3C DID-based, future-ready."
+    didConnectDescription: "Decentralized identities and apps, W3C DID-based, future-ready.",
+    noAuthenticationProvider: "No authentication provider configured"
   },
   zh: {
     generateError: "二维码生成失败",
@@ -135,7 +136,8 @@ const e = {
     passkeyPreviewTitle: "Passkey",
     passkeyPreviewDescription: "使用 Passkey 账户登录 - 更安全、更便捷的身份验证方式。无需记忆密码，轻松登录各类应用和网站",
     didConnectTitle: "DID Connect",
-    didConnectDescription: "面向未来的基于 W3C DID 去中心化身份和应用"
+    didConnectDescription: "面向未来的基于 W3C DID 去中心化身份和应用",
+    noAuthenticationProvider: "未配置任何身份验证提供者"
   }
 };
 export {

package/lib/Connect/components/login-item/connect-choose-list.js

@@ -29,7 +29,7 @@ function ye({
   webWalletUrl: U = oe(),
   tokenKey: N,
   passkeyBehavior: W = "none",
-  onRest: g = d,
+  onReset: g = d,
   showMobileLogin: j = !0,
   showOAuthLogin: v = !0,
   showPasskeyLogin: w = !0,
@@ -232,7 +232,7 @@ ye.propTypes = {
   webWalletUrl: o.string,
   tokenKey: o.string.isRequired,
   passkeyBehavior: o.oneOf(["none", "both", "only-existing", "only-new"]),
-  onRest: o.func,
+  onReset: o.func,
   showMobileLogin: o.bool,
   showOAuthLogin: o.bool,
   showPasskeyLogin: o.bool,

package/lib/Connect/components/login-item/connect-provider-list.js

@@ -0,0 +1,299 @@
+import { jsx as s, jsxs as ee } from "react/jsx-runtime";
+import t from "prop-types";
+import { Box as d } from "@mui/material";
+import { LOGIN_PROVIDER as r, LOGIN_PROVIDER_NAME as oe } from "@arcblock/ux/lib/Util/constant";
+import { checkSameProtocol as te, getWebWalletUrl as ne } from "@arcblock/ux/lib/Util/wallet";
+import u from "lodash/noop";
+import { useMemoizedFn as h } from "ahooks";
+import y from "js-cookie";
+import { detectWalletExtension as re, getCookieOptions as ie } from "@arcblock/ux/lib/Util";
+import { useRef as x, useEffect as se } from "react";
+import { mergeSx as le } from "@arcblock/ux/lib/Util/style";
+import ce from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { GA_LAST_LOGIN_METHOD as p } from "@arcblock/ux/lib/withTracker/constant";
+import { translate as ae } from "@arcblock/ux/lib/Locale/util";
+import me from "@arcblock/ux/lib/Empty";
+import { useBrowser as pe } from "@arcblock/react-hooks";
+import de from "./mobile-login-item.js";
+import ue from "./web-login-item.js";
+import he from "./login-method-item.js";
+import { useOAuth as ge } from "../../../OAuth/context.js";
+import { useStateContext as fe } from "../../contexts/state.js";
+import { getAppId as ye, logger as xe, getApiErrorMessage as Le } from "../../../utils.js";
+import Ae from "./passkey-login-item.js";
+import { usePasskey as Ie } from "../../../Passkey/context.js";
+import "../../../Passkey/actions.js";
+import Ee from "../../plugins/email/index.js";
+import Ce from "../../assets/locale.js";
+function Pe({
+  onSuccess: L = u,
+  onError: A = u,
+  size: m = "small",
+  tokenState: n,
+  webWalletUrl: I = ne(),
+  tokenKey: U,
+  passkeyBehavior: E = "none",
+  onReset: g = u,
+  providerList: f = [],
+  slotProps: G = {},
+  disableSwitchApp: C = !1,
+  forceUpdate: B = u,
+  magicToken: P = void 0,
+  baseUrl: K = "/",
+  customItems: q = []
+}) {
+  const v = x(null), M = x(null), w = x(null), b = pe(), V = te(I), _ = re(), { loginOAuth: Y, logoutOAuth: H, t: $, oauthState: l } = ge(), { passkeyState: O } = Ie(), { extraParams: T, locale: R, connectState: i, plugins: k, setPlugins: z, setSelectedPlugin: J, getPlugin: j } = fe(), Q = h((e, o = {}) => ae(Ce, e, R, "en", o)), S = h(async (e) => {
+    localStorage.setItem(p, e.provider), n.reset(), l.reset({
+      status: "scanned"
+    }), O.reset(), i.chooseMethod = e.provider;
+    const o = T?.sourceAppPid;
+    try {
+      l.loading = !0, l.status = "scanned";
+      const c = await Y(e, {
+        action: n.action,
+        ...T
+      }), a = ie({ returnDomain: !1 });
+      y.remove("connected_did", a), y.remove("connected_pk", a), y.remove("connected_wallet_os", a), c?.sessionToken && (await L(
+        {
+          ...c,
+          encrypted: !1
+        },
+        (Z) => Z,
+        {
+          sourceAppPid: o,
+          connected_app: ye(n.appInfo, n.memberAppInfo)
+        }
+      ), l.loading = !1, l.status = "succeed");
+    } catch (c) {
+      xe.error(`Failed login OAuth: ${e.provider}`, c);
+      const a = Le(c, $("loginOAuthFailed"));
+      l.loading = !1, l.error = a, l.status = "error", await H({ provider: e.provider }), A(new Error(a));
+    }
+  }), W = h(async () => {
+    n.reset(), await g(), n.status = "created", i.chooseMethod = "wallet";
+  }), D = f.some((e) => e.provider === r.EMAIL), F = Ee({ baseUrl: K }), X = h(() => {
+    if (P && f.some((e) => e.name === r.EMAIL) && k.some((e) => e.name === r.EMAIL)) {
+      const e = j(r.EMAIL);
+      e.state.status === "idle" && (localStorage.setItem(p, "email"), e.state.reset(), e.state.magicToken = P, i.chooseMethod = r.EMAIL, J(e), B());
+    }
+  });
+  se(() => {
+    const e = [];
+    if (D) {
+      const o = j(r.EMAIL);
+      o && o.baseUrl === F.baseUrl ? e.push(o) : e.push(F);
+    }
+    z(e), i.retryConnect = W, setTimeout(() => {
+      X();
+    }, 100);
+  }, [D]);
+  const N = f.map((e) => {
+    if (e.provider === r.WALLET) {
+      if (b.mobile.any)
+        return /* @__PURE__ */ s(
+          de,
+          {
+            ref: v,
+            tokenState: n,
+            sx: [m === "small" ? { p: 1 } : { p: 2 }],
+            locale: R,
+            tokenKey: U,
+            disableSwitchApp: C,
+            onClick: async () => {
+              localStorage.setItem(p, "wallet"), n.reset(), await g(), n.status = "created", i.chooseMethod = "wallet";
+              const o = v.current?.connect;
+              i.retryConnect = () => {
+                o(W);
+              };
+            }
+          },
+          r.WALLET
+        );
+      if ((V || _) && (!b.mobile.any || _))
+        return /* @__PURE__ */ s(
+          ue,
+          {
+            ref: M,
+            tokenState: n,
+            webWalletUrl: I,
+            sx: [m === "small" ? { p: 1 } : { p: 2 }],
+            disableSwitchApp: C,
+            onClick: () => {
+              localStorage.setItem(p, "wallet"), n.status = "scanned", i.chooseMethod = "wallet-web";
+              const o = M.current.connect;
+              i.retryConnect = async () => {
+                await g(), n.error = "", n.status = "scanned", o();
+              };
+            }
+          },
+          r.WALLET
+        );
+    }
+    if (e.provider === r.PASSKEY)
+      return E === "none" ? null : /* @__PURE__ */ s(
+        Ae,
+        {
+          ref: w,
+          onSuccess: L,
+          onError: A,
+          tokenState: n,
+          behavior: E,
+          sx: [m === "small" ? { p: 1 } : { p: 2 }],
+          onClick: () => {
+            localStorage.setItem(p, "passkey");
+            const o = w.current.connect;
+            i.chooseMethod = "passkey", i.retryConnect = () => {
+              O.verifying = !0, i.chooseMethod = "passkey", o();
+            };
+          },
+          slotProps: {
+            icon: {
+              sx: {
+                fontSize: 24,
+                "& svg": {
+                  fontSize: 24,
+                  width: "1em",
+                  height: "1em"
+                }
+              }
+            }
+          }
+        },
+        r.PASSKEY
+      );
+    if (e.provider === r.EMAIL) {
+      const o = k.find((c) => c.name === r.EMAIL);
+      return o ? o?.renderListItem({
+        key: o.name,
+        sx: [m === "small" ? { p: 1 } : { p: 2 }]
+        // forceUpdate,
+      }) : null;
+    }
+    return e.type === "oauth" ? /* @__PURE__ */ s(
+      he,
+      {
+        title: oe[e.provider],
+        icon: /* @__PURE__ */ s(
+          ce,
+          {
+            provider: e.provider,
+            sx: {
+              transform: "scale(0.95)",
+              width: 24,
+              height: 24,
+              color: "text.primary"
+            }
+          }
+        ),
+        onClick: () => {
+          S(e), i.retryConnect = () => {
+            S(e);
+          };
+        },
+        sx: [m === "small" ? { p: 1 } : { p: 2 }]
+      },
+      e.provider
+    ) : null;
+  }).filter(Boolean);
+  return /* @__PURE__ */ s(d, { className: "did-connect__choose", sx: le({ flex: 1 }, G?.root?.sx), children: /* @__PURE__ */ s(
+    d,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 2
+      },
+      children: /* @__PURE__ */ ee(
+        d,
+        {
+          sx: [
+            {
+              display: "flex",
+              flexDirection: "column",
+              gap: 1.5
+            }
+          ],
+          children: [
+            /* @__PURE__ */ s(
+              d,
+              {
+                sx: {
+                  display: "grid",
+                  gridTemplateColumns: "repeat(12, 1fr)",
+                  gap: 1.25,
+                  ".arc-login-item:nth-child(-n+3)": {
+                    gridColumn: "span 12"
+                  },
+                  ".arc-login-item:nth-child(4):last-child": {
+                    gridColumn: "span 12"
+                  },
+                  ".arc-login-item:nth-child(4):nth-last-child(2), .arc-login-item:nth-child(4):nth-last-child(2), .arc-login-item:nth-child(4):nth-last-child(2) ~ .arc-login-item": {
+                    gridColumn: "span 6",
+                    justifyContent: "center",
+                    ".arc-login-item__body, .other-item-icon": {
+                      display: "none"
+                    }
+                  },
+                  ".arc-login-item:nth-child(4):nth-last-child(3), .arc-login-item:nth-child(4):nth-last-child(3) ~ .arc-login-item": {
+                    justifyContent: "center",
+                    gridColumn: "span 4",
+                    ".arc-login-item__body, .other-item-icon": {
+                      display: "none"
+                    }
+                  },
+                  ".arc-login-item:nth-child(4):nth-last-child(4), .arc-login-item:nth-child(4):nth-last-child(4) ~ .arc-login-item": {
+                    gridColumn: "span 3",
+                    justifyContent: "center",
+                    ".arc-login-item__body, .other-item-icon": {
+                      display: "none"
+                    }
+                  },
+                  "&:has(.arc-login-item:nth-child(8)) .arc-login-item:nth-child(n+4)": {
+                    gridColumn: "span 3",
+                    justifyContent: "center",
+                    ".arc-login-item__body, .other-item-icon": {
+                      display: "none"
+                    }
+                  }
+                },
+                children: N.length > 0 ? N : /* @__PURE__ */ s(
+                  me,
+                  {
+                    className: "arc-login-item",
+                    sx: {
+                      ".empty-content": {
+                        textAlign: "center"
+                      }
+                    },
+                    children: Q("noAuthenticationProvider")
+                  }
+                )
+              }
+            ),
+            q.map((e) => e || null)
+          ]
+        }
+      )
+    }
+  ) });
+}
+Pe.propTypes = {
+  onSuccess: t.func,
+  onError: t.func,
+  size: t.oneOf(["small", "normal", "large"]),
+  tokenState: t.object.isRequired,
+  webWalletUrl: t.string,
+  tokenKey: t.string.isRequired,
+  passkeyBehavior: t.oneOf(["none", "both", "only-existing", "only-new"]),
+  onReset: t.func,
+  providerList: t.array,
+  slotProps: t.object,
+  disableSwitchApp: t.bool,
+  forceUpdate: t.func,
+  magicToken: t.string,
+  baseUrl: t.string,
+  customItems: t.arrayOf(t.node)
+};
+export {
+  Pe as default
+};