@arcblock/did-connect-react 3.1.0

package/lib/Connect/plugins/email/placeholder.js

@@ -0,0 +1,283 @@
+import { jsxs as l, Fragment as s, jsx as a } from "react/jsx-runtime";
+import j from "@arcblock/ux/lib/LoadingMask";
+import { Typography as T, TextField as B, Box as p, CircularProgress as R } from "@mui/material";
+import { useMemoizedFn as d, useCreation as F, useReactive as D, useInterval as H } from "ahooks";
+import c from "prop-types";
+import { joinURL as K, withQuery as k } from "ufo";
+import O from "@arcblock/ux/lib/Toast";
+import q from "@arcblock/ux/lib/VerificationCode";
+import { useEffect as N } from "react";
+import v from "lodash/noop";
+import U from "@arcblock/ux/lib/DIDConnect/provider-icon";
+import V from "../../components/back-button.js";
+import S from "../../components/action-button.js";
+import { useStateContext as W } from "../../contexts/state.js";
+import { BLOCKLET_SERVICE_PATH_PREFIX as G, VERIFY_CODE_LENGTH as Q, CHECK_STATUS_INTERVAL as X } from "../../../constant.js";
+import { createAxios as Y, debug as y } from "../../../utils.js";
+function $({
+  fallback: A = null,
+  state: o,
+  forceUpdate: t = v,
+  onSuccess: h = v,
+  t: L = v
+}) {
+  const { setSelectedPlugin: w, locale: m, connectState: u, action: f, extraParams: P } = W(), n = d((r, i = {}) => L(r, i, m)), g = F(() => Y({
+    baseURL: K(o.baseUrl, G, "/api/user")
+  }), [o.baseUrl]), e = D({
+    email: "",
+    code: "",
+    codeId: "",
+    defaultVerifyMode: "magicLink",
+    verifyMode: "magicLink",
+    // magicLink, code
+    loadingSendCode: !1,
+    loadingVerifyCode: !1,
+    error: ""
+  }), b = d(() => {
+    e.email = "", e.code = "", e.codeId = "", e.verifyMode = e.defaultVerifyMode, e.loadingSendCode = !1, e.loadingVerifyCode = !1, e.error = "";
+  }), E = d(async () => {
+    if (!e.email || !e.email.trim()) {
+      e.error = n("emailRequired");
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email)) {
+      e.error = n("emailInvalid");
+      return;
+    }
+    e.error = "";
+    try {
+      e.loadingSendCode = !0;
+      let i = !1;
+      ["login"].includes(f) && (u.sourceAppPid || (i = !0));
+      const { data: x } = await g.post(k("/email/sendCode", { locale: m }), {
+        email: e.email,
+        sourceAppPid: u.sourceAppPid,
+        useMagicLink: i
+      });
+      e.verifyMode = e.defaultVerifyMode, e.codeId = x.id, o.status = "sending";
+    } catch (i) {
+      const x = i?.response?.data?.error || i?.message;
+      o.status = "error", o.error = x;
+    } finally {
+      e.loadingSendCode = !1, t();
+    }
+  }), I = d(async () => {
+    if (e.code.length === Q)
+      try {
+        e.loadingVerifyCode = !0;
+        const { data: r } = await g.post(k("/email/login", { locale: m }), {
+          ...P,
+          action: f,
+          code: e.code,
+          sourceAppPid: u.sourceAppPid
+        });
+        y("Email login succeed (use code)", { loginResult: r }), await h(
+          {
+            ...r,
+            encrypted: !1
+          },
+          (i) => i
+        ), o.status = "succeed";
+      } catch (r) {
+        const i = r?.response?.data || r?.message;
+        O.error(i), y("Email login failed (use code)", { error: r });
+      } finally {
+        e.loadingVerifyCode = !1, t();
+      }
+  }), _ = d(async () => {
+    o.status = "verifying", t();
+    try {
+      const { data: r } = await g.post(k("/email/login", { locale: m }), {
+        ...P,
+        action: f,
+        magicToken: o.magicToken
+      });
+      y("Email login succeed (use magic link)", { loginResult: r }), await h(
+        {
+          ...r,
+          encrypted: !1
+        },
+        (i) => i
+      ), o.status = "succeed";
+    } catch (r) {
+      const i = r?.response?.data || r?.message;
+      o.status = "error", o.error = i, y("Email login failed (use magic link)", { error: r });
+    }
+    t();
+  }), M = e.verifyMode === "magicLink" && o.status === "sending" && // 如果正在校验验证码，则不轮询状态
+  !e.loadingVerifyCode && e.codeId, z = d(async () => {
+    if (M) {
+      try {
+        const { data: r } = await g.get("/email/status", {
+          params: {
+            codeId: e.codeId
+          }
+        });
+        r.verified && (o.status = "succeed", b(), await h({ encrypted: !1 }, (i) => i));
+      } catch (r) {
+        console.error("check status error", r);
+      }
+      t();
+    }
+  });
+  H(z, M ? X : void 0), N(() => {
+    b(), (u.sourceAppPid || !["login"].includes(f)) && (e.defaultVerifyMode = "code"), o.magicToken && _();
+  }, [o]);
+  let C = null;
+  if (o.status === "creating")
+    C = /* @__PURE__ */ l(s, { children: [
+      /* @__PURE__ */ a(
+        T,
+        {
+          variant: "body2",
+          sx: {
+            textAlign: "center",
+            color: "text.secondary"
+          },
+          children: n("emailPlaceholder")
+        }
+      ),
+      /* @__PURE__ */ a(
+        B,
+        {
+          name: "email",
+          fullWidth: !0,
+          type: "email",
+          variant: "outlined",
+          label: n("email"),
+          placeholder: n("emailPlaceholder"),
+          size: "small",
+          value: e.email,
+          onChange: (r) => {
+            e.email = r.target.value;
+          },
+          onKeyDown: (r) => {
+            r.key === "Enter" && E(e.email);
+          },
+          sx: {
+            maxWidth: 320,
+            "& .MuiOutlinedInput-root": {
+              borderRadius: 1
+            }
+          },
+          error: !!e.error,
+          helperText: e.error,
+          slotProps: {
+            htmlInput: {
+              sx: {
+                boxSizing: "content-box !important"
+              }
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ l(p, { sx: { display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ a(
+          V,
+          {
+            onClick: () => {
+              o.reset(), w();
+            }
+          }
+        ),
+        /* @__PURE__ */ l(
+          S,
+          {
+            sx: {
+              color: "primary.main",
+              borderColor: "primary.light"
+            },
+            disabled: e.loadingSendCode,
+            onClick: () => {
+              E(e.email);
+            },
+            children: [
+              e.loadingSendCode ? /* @__PURE__ */ a(R, { color: "inherit", size: 14, sx: { mr: 1 } }) : null,
+              n("sendCode")
+            ]
+          }
+        )
+      ] })
+    ] });
+  else if (o.status === "sending")
+    C = /* @__PURE__ */ l(s, { children: [
+      /* @__PURE__ */ l(p, { sx: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+        /* @__PURE__ */ a(T, { variant: "body2", sx: { textAlign: "center", color: "text.secondary" }, children: e.verifyMode === "magicLink" ? /* @__PURE__ */ l(s, { children: [
+          n("verifyEmail"),
+          /* @__PURE__ */ a("br", {}),
+          n("orUseCodePlaceholder")
+        ] }) : n("codePlaceholder") }),
+        /* @__PURE__ */ a(s, {})
+      ] }),
+      /* @__PURE__ */ l(s, { children: [
+        /* @__PURE__ */ a(
+          q,
+          {
+            code: e.code,
+            onChange: (r) => {
+              e.code = r;
+            },
+            onComplete: () => {
+              I();
+            }
+          }
+        ),
+        /* @__PURE__ */ l(p, { sx: { display: "flex", gap: 1 }, children: [
+          /* @__PURE__ */ a(
+            V,
+            {
+              onClick: () => {
+                e.code = "", o.status = "creating", t();
+              }
+            }
+          ),
+          /* @__PURE__ */ l(
+            S,
+            {
+              sx: {
+                color: "primary.main",
+                borderColor: "primary.light"
+              },
+              disabled: e.loadingVerifyCode,
+              onClick: () => {
+                I();
+              },
+              children: [
+                e.loadingVerifyCode ? /* @__PURE__ */ a(R, { color: "inherit", size: 14, sx: { mr: 1 } }) : null,
+                n("confirm")
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] });
+  else
+    return A;
+  return /* @__PURE__ */ l(
+    p,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2,
+        pb: 1
+      },
+      children: [
+        /* @__PURE__ */ a(j, { size: 52, borderRadius: 12, children: /* @__PURE__ */ a(U, { provider: "email" }) }),
+        C
+      ]
+    }
+  );
+}
+$.propTypes = {
+  fallback: c.any,
+  state: c.object.isRequired,
+  forceUpdate: c.func,
+  onSuccess: c.func,
+  t: c.func
+};
+export {
+  $ as default
+};

package/lib/Connect/plugins/index.js

@@ -0,0 +1,4 @@
+import { default as l } from "./email/index.js";
+export {
+  l as useEmailPlugin
+};

package/lib/Connect/use-connect.js

@@ -0,0 +1,164 @@
+import { jsx as H } from "react/jsx-runtime";
+import { createPortal as j } from "react-dom";
+import { useCreation as R, useMemoizedFn as g, useReactive as V, useDebounce as q } from "ahooks";
+import { useRef as B, use as Q, useState as v, useImperativeHandle as X } from "react";
+import z from "lodash/noop";
+import T from "lodash/cloneDeep";
+import S from "lodash/isFunction";
+import J from "lodash/isUndefined";
+import { joinURL as k, withQuery as M } from "ufo";
+import { getFederatedEnabled as K, getMaster as N } from "@arcblock/ux/lib/Util/federated";
+import G from "p-queue";
+import { useTheme as W } from "@arcblock/ux/lib/Theme";
+import { getCookieOptions as Y } from "@arcblock/ux/lib/Util";
+import A from "js-cookie";
+import { useBrowser as Z } from "@arcblock/react-hooks";
+import { SessionContext as $ } from "../Session/context.js";
+import { openPopup as ee, runPopup as oe, updateConnectedInfo as ne, getAppId as te } from "../utils.js";
+import { API_DID_PREFIX as re, BLOCKLET_SERVICE_PATH_PREFIX as se } from "../constant.js";
+import ce from "./index.js";
+const b = 2e3;
+function ie({ ref: P }) {
+  const { api: _, session: s } = Q($), [c, I] = v({
+    title: "DID Connect",
+    scan: "Use follwing methods to complete this action",
+    confirm: "Confirm in your account",
+    success: "Success!"
+  }), x = W(), F = {
+    containerEl: null,
+    popup: !0,
+    checkFn: _?.get || z
+  }, C = x?.transitions?.duration?.leavingScreen || 500, e = V({
+    show: !1,
+    ...T(F)
+  }), o = q(e.show, {
+    wait: C
+  }), [i, O] = v({}), l = g(() => {
+    const n = T(F);
+    Object.keys(n).forEach((m) => {
+      e[m] = n[m];
+    });
+  }), t = g(() => {
+    e.show = !1, setTimeout(() => {
+      l();
+    }, C);
+  }), E = g((n) => {
+    const { containerEl: m, checkFn: a, popup: d, messages: f, ...h } = T(n);
+    typeof a == "function" && (e.checkFn = a), d !== void 0 && (e.popup = d), f !== void 0 && I(f), m !== void 0 && (e.containerEl = m), O(h), e.show = !0;
+  }), y = s.useOAuth(), p = g(async ({ provider: n, action: m, extraParams: a, onLogin: d }) => {
+    const f = await y.loginOAuth(
+      { provider: n },
+      {
+        action: m,
+        ...a
+      }
+    ), h = Y({ returnDomain: !1 });
+    A.remove("connected_did", h), A.remove("connected_pk", h), A.remove("connected_wallet_os", h), d(
+      {
+        ...f,
+        encrypted: !1
+      },
+      (w) => w
+    );
+  });
+  X(P, () => ({
+    open: E,
+    loginOAuth: p,
+    close: t
+  }), [E, t, p]);
+  const u = /* @__PURE__ */ H(
+    ce,
+    {
+      open: e.show,
+      popup: e.popup,
+      messages: c,
+      checkFn: e.checkFn,
+      ...i
+    }
+  );
+  return e.containerEl ? j(u, e.containerEl) : e.show || o ? u : null;
+}
+function xe() {
+  const P = B(null), _ = Z(), s = R(() => {
+    const o = { concurrency: 1 };
+    return _.arcSphere && delete o.concurrency, new G(o);
+  }), c = g((...o) => {
+    P.current?.close(...o);
+  }), I = g(
+    ({ onSuccess: o, onClose: i, onEnd: O, closeTimeout: l = b, ...t }, ...E) => {
+      const y = () => new Promise((p) => {
+        typeof o == "function" ? t.onSuccess = (...u) => {
+          o(...u), setTimeout(() => {
+            c(), p();
+          }, l);
+        } : t.onSuccess = () => {
+          setTimeout(() => {
+            c(), p();
+          }, l);
+        }, typeof i == "function" ? t.onClose = (...u) => {
+          i(...u), c(), p(), s.clear();
+        } : t.onClose = () => {
+          c(), p(), s.clear();
+        }, setTimeout(() => {
+          P.current?.open(t, ...E);
+        }, 300);
+      });
+      s.add(y);
+    }
+  ), x = g(
+    (o = {}, { baseUrl: i, locale: O = "en", blocklet: l = globalThis?.blocklet, closeTimeout: t = b, popupOptions: E } = {}) => new Promise((y, p) => {
+      const u = () => new Promise((n) => {
+        (async () => {
+          if (J(i)) {
+            const r = K(), U = N();
+            i = r ? U.appUrl : window.location.origin;
+          }
+          const { onSuccess: a, onClose: d, onError: f, custom: h = !1, ...w } = o;
+          if (!w?.extraParams?.provider)
+            throw S(f) && f("Must have extraParams.provider"), new Error("Must have extraParams.provider");
+          w?.prefix || (w.prefix = window.location.origin + k(l?.prefix, re));
+          const D = {
+            params: btoa(encodeURIComponent(JSON.stringify(w))),
+            appPid: l?.appPid,
+            locale: O,
+            disableClose: !0
+            // 弹窗模式默认不允许关闭 DID Connect
+          }, L = ee(
+            h ? M(k(i, w.prefix), D) : M(k(i || "/", se, "/connect"), D),
+            E
+          );
+          try {
+            const r = await oe({ popup: L, closeTimeout: t });
+            ne(
+              {
+                connected_app: te(),
+                ...r?.options
+              },
+              !0
+            ), S(a) ? (a({ ...r.response, encrypted: !1 }), c(), n()) : (c(), n()), y({ ...r.response, encrypted: !1 });
+          } catch (r) {
+            throw console.error(r), r.message === "Popup closed" ? S(d) ? (d(), n(), s.clear()) : (n(), s.clear()) : S(f) && f(r), r;
+          }
+        })().catch((a) => {
+          n(), p(a);
+        });
+      });
+      s.add(u);
+    })
+  ), F = (o) => {
+    P.current.loginOAuth(o);
+  }, C = R(() => /* @__PURE__ */ H(ie, { ref: P })), e = R(() => ({
+    open: I,
+    close: c,
+    loginOAuth: F,
+    openPopup: x,
+    queue: s
+  }));
+  return {
+    connectHolder: C,
+    connectApi: e
+  };
+}
+export {
+  xe as default
+};

package/lib/Connect/with-blocklet.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "react/jsx-runtime";
+import { BlockletProvider as i, useBlockletContext as u } from "@arcblock/ux/lib/BlockletContext";
+function p(r) {
+  function n({ ...t }) {
+    const { blocklet: o, masterBlocklet: c } = u();
+    return /* @__PURE__ */ e(r, { ...t, blocklet: o, masterBlocklet: c });
+  }
+  function l({ baseUrl: t, ...o }) {
+    return /* @__PURE__ */ e(i, { baseUrl: t, children: /* @__PURE__ */ e(n, { baseUrl: t, ...o }) });
+  }
+  return l;
+}
+export {
+  p as default
+};

package/lib/Connect/with-bridge-call.js

@@ -0,0 +1,108 @@
+import { jsx as b } from "react/jsx-runtime";
+import { use as h, useEffect as y } from "react";
+import g from "prop-types";
+import w from "@arcblock/bridge";
+import { useDebounceFn as x, useMemoizedFn as T } from "ahooks";
+import D from "lodash/pick";
+import P from "@arcblock/react-hooks/lib/useBrowser";
+import { isUrl as _ } from "@arcblock/ux/lib/Util";
+import { joinURL as k } from "ufo";
+import { debug as n } from "../utils.js";
+import { API_DID_PREFIX as A, BLOCKLET_SERVICE_PATH_PREFIX as E, DEFAULT_TIMEOUT as I } from "../constant.js";
+import S from "./hooks/security.js";
+import { SessionContext as K } from "../Session/context.js";
+import { getWalletDid as U } from "../User/use-did.js";
+function G(a) {
+  const l = {
+    prefix: A,
+    checkInterval: 2e3,
+    checkTimeout: I * 1e3,
+    locale: "en",
+    tokenKey: "_t_",
+    encKey: "_ek_",
+    baseUrl: "",
+    messages: {},
+    extraParams: {},
+    forceConnected: !0,
+    enabledConnectTypes: [],
+    // 所有的
+    disableSwitchApp: !1,
+    hideCloseButton: !1,
+    qrcodeSize: 160,
+    options: {}
+  };
+  function c(r) {
+    const { encryptKey: d, decrypt: f } = S(), m = P(), p = h(K), u = U(p?.session?.user), i = D(r, [
+      //
+      "action",
+      "checkTimeout",
+      "locale",
+      "messages",
+      // 'webWalletUrl', arcSphere 中不需要通过 web 登录，不需要此参数
+      //
+      "baseUrl",
+      // 要写清楚 baseUrl 和 prefix 的处理逻辑
+      "prefix",
+      "checkInterval",
+      "closeTimeout",
+      "extraParams",
+      "tokenKey",
+      "encKey",
+      "forceConnected",
+      "provider",
+      "enabledConnectTypes",
+      "disableSwitchApp",
+      "hideCloseButton",
+      // 不允许用户关闭这个 connect
+      // 'qrcodeSize', // 不应该允许配置？
+      "options"
+      // FIXME: @zhanghan 弄清楚参数的字段
+      //
+      // 'autoConnect',
+      // 'saveConnect',
+      // 'useSocket', // 后期再考虑实现
+      // 'allowWallet',
+      // 'showDownload',
+      // 函数，需要在这一层进行处理
+      // 'onError',
+      // 'onSuccess',
+      // 'onRecreateSession', // 貌似没有地方用，直接去掉？
+      // 'onClose',
+    ]), e = Object.assign({}, l, i);
+    e.forceConnected === !0 && (e.forceConnected = u || !0);
+    const C = r.serviceHost || window?.env?.apiPrefix || window?.blocklet?.prefix || "/";
+    !_(e.prefix) && !e.prefix?.startsWith(E) && (e.prefix = k(C, e.prefix));
+    const t = m.arcSphere && r.open && !window.forceOpenConnect, { run: s } = x(
+      T(async () => {
+        n("bridge call arcDidConnect", r, i, e);
+        try {
+          const o = await w.callArc("didConnect", { ...e, [e.encKey]: d });
+          if (n("bridge callArc didConnect: result", o), o.action === "error") {
+            r.onError(o.data);
+            return;
+          }
+          if (o.action === "success") {
+            r.onSuccess(o.data, f);
+            return;
+          }
+          r.onClose(o.data);
+        } catch (o) {
+          logger.error("Failed to callArc didConnect", o);
+        }
+      }),
+      {
+        leading: !0,
+        wait: 300
+      }
+    );
+    return y(() => {
+      t && (n("WrapConnect call"), s());
+    }, [s, t]), t ? null : /* @__PURE__ */ b(a, { ...r });
+  }
+  return c.propTypes = {
+    open: g.bool
+  }, c;
+}
+export {
+  G as default
+};

package/lib/Federated/context.js

@@ -0,0 +1,61 @@
+import { jsx as S, jsxs as L } from "react/jsx-runtime";
+import { createContext as R, useRef as b, useState as h, use as w } from "react";
+import l from "prop-types";
+import x from "lodash/omit";
+import { RequestStorageAccessApiDialog as F } from "@arcblock/ux/lib/DIDConnect";
+import { joinURL as U } from "ufo";
+import { getFederatedEnabled as _, getMaster as v } from "@arcblock/ux/lib/Util/federated";
+import { useLocalStorageState as I, useMemoizedFn as p, useCreation as T, useInterval as k } from "ahooks";
+import { BLOCKLET_SERVICE_PATH_PREFIX as q } from "@arcblock/ux/lib/Util/constant";
+import P from "js-cookie";
+import { getBrowserLang as D } from "../utils.js";
+import { LANG_COOKIE_NAME as M, CHECK_INTERVAL_TIME as j } from "../constant.js";
+const m = R({}), { Provider: y, Consumer: Z } = m;
+function K({ children: o, locale: d = "en" }) {
+  const c = window?.blocklet, n = _(c), r = v(c), i = b(null), [e, u] = I("storage-access", {
+    defaultValue: {
+      appUrl: r?.appUrl,
+      iat: Date.now(),
+      state: void 0
+    }
+  }), [s, f] = h(d), g = p(() => {
+    const t = P.get(M) || D();
+    t !== s && f(t);
+  }), A = p(async () => {
+    const { value: t, origin: E } = await i.current.requestStorageAccess();
+    let a = e.state || "prompt";
+    return E === "broswer" && e.state && (a = t ? "granted" : "denied"), a !== e.state && u({
+      ...e,
+      iat: Date.now(),
+      state: a
+    }), t;
+  }), C = T(() => r?.appUrl && n ? /* @__PURE__ */ S(
+    F,
+    {
+      ref: i,
+      locale: s,
+      src: U(r.appUrl, q, "/share/shared-bridge.html"),
+      storageAccessState: e.state
+    }
+  ) : null, [s, r?.appUrl, n, e.appUrl, e.iat, e.state]);
+  return k(() => {
+    g();
+  }, j), /* @__PURE__ */ L(y, { value: { requestStorageAccess: A }, children: [
+    o,
+    C
+  ] });
+}
+K.propTypes = {
+  children: l.node.isRequired,
+  locale: l.string
+};
+function $() {
+  const o = w(m);
+  return x(o, ["locale"]);
+}
+export {
+  Z as FederatedConsumer,
+  m as FederatedContext,
+  K as FederatedProvider,
+  $ as useFederatedContext
+};

package/lib/Federated/index.js

@@ -0,0 +1,7 @@
+import { FederatedConsumer as r, FederatedContext as t, FederatedProvider as o, useFederatedContext as a } from "./context.js";
+export {
+  r as FederatedConsumer,
+  t as FederatedContext,
+  o as FederatedProvider,
+  a as useFederatedContext
+};

package/lib/Logo/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "@arcblock/ux/lib/DIDLogo";
+export {
+  o as default
+};