@arcblock/did-connect-react 3.1.0

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

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

package/lib/Connect/components/login-item/login-method-item.js

@@ -0,0 +1,129 @@
+import { jsxs as i, jsx as o, Fragment as x } from "react/jsx-runtime";
+import { useTheme as g, Box as r, Typography as l } from "@mui/material";
+import { Icon as s } from "@iconify/react";
+import { isValidElement as y } from "react";
+import e from "prop-types";
+import { mergeSx as c } from "@arcblock/ux/lib/Util/style";
+import u from "@iconify-icons/material-symbols/arrow-right-alt-rounded";
+function b({
+  title: m,
+  description: n = null,
+  icon: t,
+  iconScale: p = 0.95,
+  slotProps: d = {},
+  mode: f = "normal",
+  ...a
+}) {
+  const h = g();
+  return /* @__PURE__ */ i(
+    r,
+    {
+      ...a,
+      sx: c(
+        {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          cursor: "pointer",
+          p: 1,
+          borderRadius: 1,
+          backgroundColor: "grey.50",
+          textDecoration: "none",
+          transition: "background-color 0.5s",
+          "&:hover, &:active, &.did-connect__choose-item__active": {
+            backgroundColor: "grey.100"
+          },
+          "& .other-item-icon": {
+            opacity: "0",
+            transform: "translateX(-100%)",
+            transition: "transform 0.2s ease, opacity 0.1s ease"
+          },
+          "&:hover": {
+            "& .other-item-icon": {
+              display: "inline-block",
+              transform: "translateX(0)",
+              opacity: "1"
+            }
+          }
+        },
+        a?.sx
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          r,
+          {
+            className: "arc-login-item__icon",
+            sx: c(
+              {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                color: "text.primary"
+              },
+              d?.icon?.sx
+            ),
+            children: y(t) ? t : /* @__PURE__ */ o(
+              r,
+              {
+                component: s,
+                icon: t,
+                sx: {
+                  transform: `scale(${p})`,
+                  width: 24,
+                  height: 24
+                }
+              }
+            )
+          }
+        ),
+        f === "normal" ? /* @__PURE__ */ i(x, { children: [
+          /* @__PURE__ */ i(r, { sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
+            /* @__PURE__ */ o(
+              l,
+              {
+                sx: {
+                  fontSize: 14,
+                  fontWeight: "500",
+                  color: "text.primary",
+                  whiteSpace: "nowrap"
+                },
+                children: m
+              }
+            ),
+            n ? /* @__PURE__ */ o(
+              l,
+              {
+                sx: {
+                  color: "text.secondary",
+                  fontSize: 12,
+                  lineHeight: 1
+                },
+                children: n
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ o(
+            s,
+            {
+              className: "other-item-icon",
+              icon: u,
+              fontSize: "1.3rem",
+              color: h.palette.primary.main
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+b.propTypes = {
+  title: e.string.isRequired,
+  description: e.string,
+  icon: e.any.isRequired,
+  iconScale: e.number,
+  slotProps: e.object,
+  mode: e.oneOf(["simple", "normal"])
+};
+export {
+  b as default
+};

package/lib/Connect/components/login-item/mobile-login-item.js

@@ -0,0 +1,114 @@
+import { jsx as p } from "react/jsx-runtime";
+import n from "prop-types";
+import { CircularProgress as D } from "@mui/material";
+import { useReactive as T, useCreation as W, useMemoizedFn as a } from "ahooks";
+import O from "@arcblock/bridge";
+import { useBrowser as E } from "@arcblock/react-hooks";
+import q from "lodash/noop";
+import { useImperativeHandle as F } from "react";
+import { mergeSx as M } from "@arcblock/ux/lib/Util/style";
+import N from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { LOGIN_PROVIDER as _ } from "@arcblock/ux/lib/Util/constant";
+import { useStateContext as j } from "../../contexts/state.js";
+import z from "./login-method-item.js";
+import { logger as I } from "../../../utils.js";
+import J from "../../hooks/auth-url.js";
+function K({
+  ref: b = null,
+  tokenState: e,
+  locale: w,
+  tokenKey: y,
+  onClick: C = q,
+  disableSwitchApp: P = !1,
+  ...m
+}) {
+  const l = T({
+    loading: !1
+  }), { isWalletWebview: f } = j(), x = "DID Wallet", c = E(), d = new URL(window.location.href), A = J({ disableSwitchApp: P, tokenState: e }), h = W(() => {
+    if (!e.url)
+      return "";
+    d.searchParams.set("tokenKey", e.token);
+    const o = new URL(A);
+    c.wallet || (o.searchParams.set("callback", encodeURIComponent(d)), o.searchParams.set("callback_delay", 1500)), o.searchParams.set("locale", w);
+    const g = new TextEncoder(), v = o.href.length;
+    let r = "", i = "";
+    try {
+      if (e.appInfo) {
+        const t = g.encode(JSON.stringify(e.appInfo));
+        r = btoa(String.fromCharCode(...t));
+      }
+      if (e.memberAppInfo) {
+        const t = g.encode(JSON.stringify(e.memberAppInfo));
+        i = btoa(String.fromCharCode(...t));
+      }
+      if (v + 8 + r.length + 14 + i.length > 2e3)
+        throw I.warn("URL too long, drop appInfo & memberAppInfo", { appInfo: r, memberAppInfo: i }), new Error("URL too long");
+      i ? r && (o.searchParams.set("appInfo", r), o.searchParams.set("memberAppInfo", i)) : r && o.searchParams.set("appInfo", r);
+    } catch (t) {
+      I.warn("Failed to convert appInfo & memberAppInfo", t);
+    }
+    return o.href.replace(/^https?:\/\//, "abt://");
+  }, [y, e.token, e.appInfo, e.memberAppInfo, e.url]), L = a(() => {
+    l.loading = !0, setTimeout(() => {
+      O.call("authAction", { action: "auth", deepLink: h });
+    }, 600), setTimeout(() => {
+      l.loading = !1;
+    }, 2e3);
+  }), R = a(() => {
+    e.checking = !0, e.status = "scanned";
+  }), s = {};
+  !f && c.mobile.any && (s.component = "a", s.href = h), e.url || (s.sx = {
+    cursor: "not-allowed"
+  });
+  const u = a((o) => {
+    e.url && (f ? L() : c.mobile.any ? R() : o());
+  }), U = a(() => {
+    u(C);
+  });
+  return F(b, () => ({
+    connect: u
+  })), /* @__PURE__ */ p(
+    z,
+    {
+      ...m,
+      ...s,
+      sx: M(m?.sx, s?.sx),
+      title: x,
+      icon: l.loading || !e.url ? /* @__PURE__ */ p(
+        D,
+        {
+          color: "primary",
+          size: 24,
+          sx: {
+            "& svg": {
+              transform: "scale(0.75)"
+            }
+          }
+        }
+      ) : /* @__PURE__ */ p(
+        N,
+        {
+          width: "24px",
+          height: "24px",
+          provider: _.DID_WALLET,
+          style: {
+            transform: "scale(0.9)"
+          }
+        }
+      ),
+      iconScale: 1,
+      onClick: U
+    }
+  );
+}
+K.propTypes = {
+  tokenState: n.object.isRequired,
+  tokenKey: n.string.isRequired,
+  locale: n.string.isRequired,
+  onClick: n.func,
+  disableSwitchApp: n.bool,
+  ref: n.any
+};
+export {
+  K as default
+};

package/lib/Connect/components/login-item/passkey-login-item.js

@@ -0,0 +1,44 @@
+import { jsx as f } from "react/jsx-runtime";
+import e from "prop-types";
+import { useRef as a, useImperativeHandle as l } from "react";
+import { useMemoizedFn as d } from "ahooks";
+import y from "../../../Passkey/actions.js";
+import { getAppId as A } from "../../../utils.js";
+import { useStateContext as P } from "../../contexts/state.js";
+function x({ ref: t = null, onSuccess: p, tokenState: o, behavior: n = "none", ...c }) {
+  const { extraParams: r } = P(), s = a(null), i = d(
+    (m) => p(
+      {
+        ...m,
+        encrypted: !1
+      },
+      (u) => u,
+      {
+        sourceAppPid: r?.sourceAppPid,
+        connected_app: A(o.appInfo, o.memberAppInfo)
+      }
+    )
+  );
+  return l(t, () => ({
+    connect: s.current.click
+  })), n === "none" ? null : /* @__PURE__ */ f(
+    y,
+    {
+      ...c,
+      ref: s,
+      action: o.action,
+      behavior: n,
+      onSuccess: i,
+      extraParams: r
+    }
+  );
+}
+x.propTypes = {
+  onSuccess: e.func.isRequired,
+  tokenState: e.object.isRequired,
+  behavior: e.oneOf(["none", "both", "only-existing", "only-new"]),
+  ref: e.any
+};
+export {
+  x as default
+};

package/lib/Connect/components/login-item/web-login-item.js

@@ -0,0 +1,97 @@
+import { jsx as m } from "react/jsx-runtime";
+import r from "prop-types";
+import { CircularProgress as C } from "@mui/material";
+import { useReactive as R, useMemoizedFn as c, useCreation as p } from "ahooks";
+import { detectWalletExtension as w, openWebWallet as L } from "@arcblock/ux/lib/Util";
+import { mergeSx as v } from "@arcblock/ux/lib/Util/style";
+import y from "lodash/noop";
+import A from "lodash/omit";
+import { useImperativeHandle as P } from "react";
+import E from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import { LOGIN_PROVIDER as T } from "@arcblock/ux/lib/Util/constant";
+import _ from "./login-method-item.js";
+import { useStateContext as O } from "../../contexts/state.js";
+import { EXT_DOWNLOAD_URL as d } from "../../../constant.js";
+import U from "../../hooks/auth-url.js";
+function j({
+  ref: x = null,
+  tokenState: o,
+  locale: g = "en",
+  webWalletUrl: b,
+  onClick: I = y,
+  disableSwitchApp: h = !1,
+  ...a
+}) {
+  const { browserBrand: i } = O(), l = w(), t = R({
+    loading: !1
+  }), D = U({ disableSwitchApp: h, tokenState: o }), f = c(() => {
+    t.loading = !0, L({
+      webWalletUrl: b,
+      url: D,
+      locale: g,
+      appInfo: o.appInfo,
+      memberAppInfo: o.memberAppInfo
+    })?.type === "web" ? t.loading = !1 : setTimeout(() => {
+      t.loading = !1;
+    }, 3e3);
+  }), s = c((e) => {
+    o.url && (I(e), e?.preventDefault(), f());
+  });
+  P(x, () => ({
+    connect: f
+  }));
+  const n = p(() => i === "edge" ? d.edge : i === "chrome" ? d.chrome : null, [i]), u = p(() => {
+    const e = {};
+    return l ? e.onClick = s : n ? (e.component = "a", e.href = n, e.target = "_blank", e.rel = "noopener") : e.onClick = s, o.url || (e.sx = {
+      cursor: "not-allowed"
+    }), e;
+  }, [s, o.url]), W = p(() => l || n ? "DID Wallet (Extension)" : "DID Wallet (Web)", [l, n]);
+  return /* @__PURE__ */ m(
+    _,
+    {
+      ...a,
+      sx: v(
+        {
+          textDecoration: "none"
+        },
+        a?.sx,
+        u.sx
+      ),
+      title: W,
+      icon: t.loading || !o.url ? /* @__PURE__ */ m(
+        C,
+        {
+          color: "primary",
+          size: 24,
+          sx: {
+            "& svg": {
+              transform: "scale(0.75)"
+            }
+          }
+        }
+      ) : /* @__PURE__ */ m(
+        E,
+        {
+          width: "24px",
+          height: "24px",
+          provider: T.DID_WALLET,
+          style: {
+            transform: "scale(0.9)"
+          }
+        }
+      ),
+      ...A(u, "sx")
+    }
+  );
+}
+j.propTypes = {
+  tokenState: r.object.isRequired,
+  locale: r.string,
+  webWalletUrl: r.string.isRequired,
+  onClick: r.func,
+  disableSwitchApp: r.bool,
+  ref: r.any
+};
+export {
+  j as default
+};

package/lib/Connect/components/mask-overlay.js

@@ -0,0 +1,34 @@
+import { jsx as e } from "react/jsx-runtime";
+import p from "prop-types";
+import { Box as i, alpha as a } from "@mui/material";
+import { mergeSx as l } from "@arcblock/ux/lib/Util/style";
+function n({ children: r, ...o }) {
+  return /* @__PURE__ */ e(
+    i,
+    {
+      ...o,
+      sx: l(
+        {
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: ({ palette: t }) => a(t.background.default, 0.75),
+          backdropFilter: "blur(3px)"
+        },
+        o?.sx
+      ),
+      children: r
+    }
+  );
+}
+n.propTypes = {
+  children: p.any.isRequired
+};
+export {
+  n as default
+};