@arcblock/did-connect-react 3.1.0

package/lib/types.d.ts

@@ -0,0 +1,355 @@
+import type { AxiosInstance } from 'axios';
+import type { EventEmitter } from 'eventemitter3';
+import { DEFAULT_TIMEOUT } from './constant';
+import type { ReactNode } from 'react';
+
+export type ConnectMessages = {
+  title: string;
+  scan: string;
+  success: ReactNode;
+  confirm?: string; // 貌似没有地方使用，先设置为非必填
+  error?: string;
+};
+
+// FIXME: @zhanghan 将来需要改成 ts，直接从常量值 LOGIN_PROVIDER 中提取类型，目前只能写成这样
+export type WalletProvider = 'wallet' | 'auth0' | 'apple' | 'github' | 'google' | 'passkey';
+
+export type WalletOS = 'web' | 'android' | 'ios' | '';
+export type UserRole = 'guest' | 'member' | 'admin' | 'owner' | string;
+export type BaseLocale = 'en' | 'zh';
+export type UserLocale = BaseLocale | string;
+
+export type ConnectProps = {
+  /**
+   * @example login
+   */
+  action: string;
+  containerEl?: Element;
+  /**
+   * @default "/api/did"
+   */
+  prefix?: string;
+  /**
+   * @default "en"
+   */
+  locale?: 'en' | 'zh';
+  /**
+   * @default false
+   */
+  popup?: boolean;
+  /**
+   * @default 2*1000
+   */
+  checkInterval?: number;
+  /**
+   * @default 5*60*1000
+   */
+  checkTimeout?: number;
+  /**
+   * @default 2*1000
+   */
+  closeTimeout?: number;
+  /**
+   * @default {}
+   */
+  extraParams?: object;
+  /**
+   * @default "_t_"
+   */
+  tokenKey?: string;
+  /**
+   * @default "_ek_"
+   */
+  encKey?: string;
+  /**
+   * @default "''"
+   */
+  baseUrl?: string;
+  /**
+   * @default {
+        title: 'DID Connect',
+        scan: 'Scan QR code to complete this action',
+        confirm: 'Confirm on your DID Wallet',
+        success: 'Success!'
+      }
+   */
+  messages?: ConnectMessages;
+  /**
+   * @default true
+   */
+  autoConnect?: boolean;
+  /**
+   * @default true
+   */
+  forceConnected?: boolean | string;
+  /**
+   * @default true
+   */
+  saveConnect?: boolean;
+  /**
+   * @default true
+   */
+  useSocket?: boolean;
+  /**
+   * @default true
+   */
+  allowWallet?: boolean;
+  /**
+   * @default true
+   */
+  passkeyBehavior?: 'none' | 'both' | 'only-existing' | 'only-new';
+  /**
+   * @default "wallet"
+   */
+  provider?: 'wallet' | 'auth0' | '';
+  /**
+   * @default 160
+   */
+  qrcodeSize?: number;
+  /**
+   * @default true
+   */
+  showDownload?: boolean;
+  /**
+   * @default "https://web.abtwallet.io"
+   */
+  webWalletUrl?: string;
+  /**
+   * @default ["web", "mobile", "github", "apple", "google", "auth0", "passkey"]
+   */
+  enabledConnectTypes?: Array<'web' | 'mobile' | 'auth0', 'github' | 'apple' | 'google' | 'passkey'>;
+  extraContent?: any;
+  loadingEle?: any;
+  /**
+   * @default false
+   */
+  disableSwitchApp?: boolean;
+  /**
+   * @default false
+   */
+  hideCloseButton?: boolean;
+  /**
+   * @default {}
+   */
+  options?: {
+    /**
+     * @default true
+     */
+    showQuickConnect?: boolean;
+  };
+  onRecreateSession?: Function;
+  checkFn?: () => boolean;
+  onSuccess?: (result: object) => void;
+  onError?: (error: any) => void;
+  onClose?: Function;
+};
+
+export type OpenConnect = (params: ConnectProps) => void;
+export type OpenConnectPopup = (
+  params: ConnectProps,
+  options?: {
+    baseUrl?: string;
+    locale?: BaseLocale;
+  }
+) => void;
+
+export type OpenDidConnect = (
+  params: ConnectProps,
+  options?: {
+    /**
+     * 打开 DID Connect 的模式
+     * @default 'popup'
+     */
+    openMode?: 'redirect' | 'window' | 'popup';
+    requirements?: {
+      /**
+       * 是否要求登录
+       * @default true
+       */
+      login?: boolean;
+      /**
+       * 是否要求绑定 DID Wallet 账户
+       * @default true
+       */
+      bindWallet?: boolean;
+      /**
+       * 是否要求绑定 DID Spaces
+       * @default false
+       */
+      bindDidSpaces?: false | 'read' | 'full';
+      // bindOAuth?: boolea // 暂不支持，这里要配置的情况会稍微复杂一些
+    };
+    baseUrl?: string;
+    locale?: BaseLocale;
+  }
+) => void;
+
+export type CloseConnect = Function;
+
+export type CommonSessionFn = (done?: Function, params?: object) => void;
+
+export type LoginSessionFn = (
+  done?: Function,
+  params?: {
+    openMode: 'redirect' | 'window'; // iframe: 暂未启用
+    provider?: 'wallet';
+    redirect?: string;
+    forceConnected?: string;
+    sourceAppPid?: string;
+    passkeyBehavior?: string;
+    [key: string]: any;
+  },
+  origin?: string
+) => any;
+
+export type LogoutSessionFn = (done?: Function) => void;
+
+export type Passport = {
+  id: string;
+  name: string;
+  title: string;
+  role: UserRole;
+};
+export type ConnectAccount = {
+  provider: WalletProvider;
+  did: string;
+  pk: string;
+  id?: string;
+  firstLoginAt?: string;
+  lastLoginAt?: string;
+  lastLoginIp?: string;
+};
+
+export type SessionUser = {
+  avatar: string;
+  did: string;
+  email: string;
+  fullName: string;
+  remark?: string;
+  role?: UserRole;
+  sourceAppPid: null | string;
+  sourceProvider: WalletProvider;
+};
+
+export type UserSession = {
+  id: string;
+  appName: string;
+  appPid: string;
+  updatedAt: string;
+  userDid: string;
+  visitorId: string;
+  extra: object;
+  user: SessionUser;
+  passportId?: string;
+};
+
+export type User = {
+  approved: boolean;
+  avatar: string;
+  connectedAccounts: ConnectAccount[];
+  did: string;
+  pk: string;
+  email: string;
+  fullName: string;
+  role: UserRole;
+  locale: UserLocale;
+  passports: Passport[];
+  permissions: any[];
+  sourceAppPid?: string;
+  sourceProvider?: WalletProvider;
+  didSpace?: object;
+  remark?: string;
+  createdAt: string;
+  updatedAt: string;
+  firstLoginAt?: string;
+  lastLoginAt?: string;
+  lastLoginIp?: string;
+};
+
+export type SessionProps = {
+  action: string;
+  error: string;
+  initialized: boolean;
+  loading: boolean;
+  open: boolean;
+  walletOS: WalletOS;
+  user?: User;
+  locale: UserLocale;
+  provider?: WalletProvider;
+  baseUrl?: string;
+  federatedMaster?: object;
+  login: LoginSessionFn;
+  logout: LogoutSessionFn;
+  switch: Function;
+  switchDid: CommonSessionFn;
+  autoSwitchDid: Function;
+  switchProfile: CommonSessionFn;
+  switchPassport: CommonSessionFn;
+  bindWallet: CommonSessionFn;
+  refresh: Function;
+  updateConnectedInfo: (data: object) => void;
+  openDidConnect: OpenDidConnect;
+
+  useOAuth: Function;
+  OAuthProvider: Function;
+  OAuthConsumer: Function;
+  OAuthContext: object;
+
+  usePasskey: Function;
+  PasskeyProvider: Function;
+  PasskeyConsumer: Function;
+  PasskeyContext: object;
+
+  useDid: (options: { session: Session }) => void;
+  WrapDid: Function;
+  getUserSessions: () => Promise<UserSession[]>;
+};
+
+export type SessionStorageProps = {
+  getToken: Function;
+  setToken: Function;
+  removeToken: Function;
+};
+
+export type SessionContext = {
+  api: AxiosInstance; // api 实例(axios)
+  events: EventEmitter; // session 事件订阅器
+  storage: SessionStorageProps; // sessionToken 的存储实例
+  session: SessionProps; // session 实例
+  connectApi: {
+    open: OpenConnect;
+    close: CloseConnect;
+  }; // use-connect 的 connectApi
+};
+
+export interface TokenState {
+  checking: boolean;
+  loading: boolean;
+  token: string;
+  url: string;
+  store: object;
+  status: 'created' | 'scanned' | 'succeed' | 'error' | 'timeout' | 'busy' | 'forbidden';
+  error: string;
+  checkCount: number;
+  mfaCode?: number;
+  appInfo: object;
+  memberAppInfo: object;
+  connectedDid: string;
+  saveConnect: boolean;
+  inExistingSession: boolean;
+  nextWorkflow?: string;
+  baseUrl: string;
+  prefix: string;
+  extraParams: object;
+  checkFn: Function;
+  results: object;
+  action: string;
+  provider: 'wallet' | 'auth0' | 'apple' | 'github' | 'google';
+}
+
+export type SwitchBehavior = 'auto' | 'disabled' | 'required';
+export type DIDConnectUrlOptions = {
+  switchBehavior: SwitchBehavior;
+  sourceAppPid: string;
+  forceConnected: boolean | string;
+};

package/lib/utils.js

@@ -0,0 +1,214 @@
+import { Buffer as a } from "buffer";
+import g from "tweetnacl-sealedbox-js";
+import { getCookieOptions as v, getVisitorId as A } from "@arcblock/ux/lib/Util";
+import { getVisitorId as _e, setVisitorId as ke } from "@arcblock/ux/lib/Util";
+import c from "js-cookie";
+import l from "lodash/isNil";
+import U from "lodash/isString";
+import d from "lodash/isUndefined";
+import { createAxios as E, BlockletSDK as P } from "@blocklet/js-sdk";
+import { withQuery as T } from "ufo";
+import { isValid as m, isFromPublicKey as L } from "@arcblock/did";
+import { getSafeUrl as S } from "@arcblock/ux/lib/Util/security";
+import { createDebug as x, createLogger as C } from "@arcblock/ux/lib/Util/logger";
+import N from "./package.json.js";
+import { DID_CONNECT_URL_PARAMS_NAME as w, DEFAULT_WINDOW_TIMEOUT as D } from "./constant.js";
+import { NotOpenError as I } from "./error.js";
+export * from "@arcblock/ux/lib/Util/wallet";
+const { version: O } = N, Z = x("did-connect"), ee = C("did-connect");
+function h(e) {
+  return (e + "===".slice((e.length + 3) % 4)).replace(/-/g, "+").replace(/_/g, "/");
+}
+function b(e) {
+  return e.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+const re = (e) => b(window.btoa(e)), oe = (e) => window.atob(h(e)), ne = (e) => {
+  const o = new URL(e), r = decodeURIComponent(o.searchParams.get("url"));
+  return new URL(r).searchParams.get("_t_");
+}, W = (e, o) => {
+  let r = o?.publisher;
+  if (!r) {
+    if (e?.agentDid)
+      return e.agentDid;
+    r = e?.publisher;
+  }
+  return r ? r.replace("did:abt:", "") : globalThis.blocklet?.appPid || globalThis.blocklet?.appId || globalThis.env?.appId || "";
+}, z = (e) => {
+  const o = {
+    connected_did: e.did || "",
+    connected_pk: e.pk || "",
+    connected_app: W(e.appInfo, e.memberAppInfo)
+  };
+  return e?.connectedWallet?.os && (o.connected_wallet_os = e.connectedWallet.os), o;
+}, te = (e, o = !1) => {
+  if (!e) return;
+  o || (e = z(e));
+  const r = v({
+    expireInDays: 7,
+    returnDomain: !1
+  });
+  !l(e.connected_did) && !l(e.connected_pk) && m(e.connected_did) && L(e.connected_did, e.connected_pk) && (c.set("connected_did", e.connected_did, r), c.set("connected_pk", e.connected_pk, r)), !l(e.connected_app) && m(e.connected_app) && c.set("connected_app", e.connected_app, r), e.connected_wallet_os && c.set("connected_wallet_os", e.connected_wallet_os, r);
+}, se = (e) => b(a.from(e).toString("base64")), u = (e) => Uint8Array.from(a.from(h(e), "base64")), ie = (e, o, r) => {
+  const n = g.open(
+    Uint8Array.from(a.from(e, "base64")),
+    u(o),
+    u(r)
+  );
+  return JSON.parse(a.from(n).toString("utf8"));
+}, ae = (e, o) => a.from(g.seal(Uint8Array.from(a.from(e)), u(o))).toString("base64"), ce = (e, o = "_t_") => {
+  const r = new URL(e), n = {
+    baseUrl: r.origin,
+    prefix: r.pathname.replace(/\/auth$/, ""),
+    token: r.searchParams.get(o) || ""
+  };
+  if (!n.baseUrl)
+    throw new Error("Invalid next workflow: origin empty");
+  if (!n.token)
+    throw new Error("Invalid next workflow: token not found");
+  return n;
+}, f = (e, o) => {
+  let r = e.message;
+  const { response: n } = e;
+  return n && (r = n.data?.error || n.data?.message || n.data || o, r = typeof r == "object" ? o : r), r;
+}, pe = (e, o, r) => {
+  if (!e)
+    return e;
+  if (!e.name)
+    return f(e, o);
+  switch (e.name) {
+    case "NotAllowedError":
+      return r ? r("webauthn.error.canceled") : "Authentication was canceled";
+    case "SecurityError":
+      return r ? r("webauthn.error.security") : "A security error occurred during authentication";
+    case "NotSupportedError":
+      return r ? r("webauthn.error.notSupported") : "This browser does not support passkey authentication";
+    case "AbortError":
+      return r ? r("webauthn.error.aborted") : "Authentication was aborted";
+    default:
+      return console.warn("Unhandled WebAuthn error type:", e.name), f(e, o);
+  }
+}, le = (e = {}, { lazy: o = !1, lazyTime: r = 300 } = {}) => {
+  const n = {
+    ...e.headers,
+    "x-did-connect-version": O
+  }, i = E(
+    {
+      ...e,
+      headers: n
+    },
+    { lazy: o, lazyTime: r }
+  );
+  return i.interceptors.request.use((t) => {
+    const s = A();
+    return s && (t.headers["x-blocklet-visitor-id"] = s), t;
+  }), i;
+}, ue = (e = 0) => new Promise((o) => {
+  setTimeout(() => {
+    o();
+  }, e);
+});
+function de() {
+  if (typeof window > "u")
+    return null;
+  const e = window.navigator.languages && window.navigator.languages[0] || window.navigator.language || window.navigator.browserLanguage || window.navigator.userLanguage || window.navigator.systemLanguage || null;
+  return {
+    "zh-CN": "zh",
+    "zh-TW": "zh",
+    zh: "zh",
+    en: "en"
+  }[e] || "en";
+}
+function me(e, o) {
+  return [void 0, null, ""].includes(e) ? o : e / 86400;
+}
+async function we() {
+  const e = window.location.href;
+  try {
+    const o = new URL(e), r = o.searchParams.get(w);
+    if (r) {
+      o.searchParams.delete(w);
+      const n = JSON.parse(a.from(r, "base64").toString("utf-8"));
+      if (U(n.forceConnected) && d(n.sourceAppPid)) {
+        const t = await new P().user.getUserPublicInfo({ did: n.forceConnected });
+        d(t?.sourceAppPid) || (n.sourceAppPid = t.sourceAppPid);
+      }
+      return {
+        params: n,
+        url: o.href
+      };
+    }
+  } catch {
+    console.warn("Failed to decode did-connect url params");
+  }
+  return {
+    params: null,
+    url: e
+  };
+}
+const fe = (e, { width: o = 680, height: r = 720, name: n = "did-connect:popup", offsetX: i = 0, offsetY: t = 0 } = {}) => {
+  const s = S(e, { allowDomains: null }), _ = window.screenX + (window.innerWidth - o) / 2 + i, k = window.screenY + (window.innerHeight - r) / 2 + t, y = [
+    `left=${_}`,
+    `top=${k}`,
+    `width=${o}`,
+    `height=${r}`,
+    "resizable=no",
+    // not working
+    "scrollbars=yes",
+    "status=yes",
+    "popup=yes"
+  ], p = window.open("", n, y.join(","));
+  if (p === null)
+    throw new I();
+  return p.location.href = T(s, {
+    // NOTICE: 携带当前页面的 origin，用于在 popup 中通过该参数判断是否可以发送 postMessage，即使该参数被伪造，最终也只有该域名能接收到消息，所以没有关系
+    opener: window.location.origin
+  }), p;
+}, ge = (e) => new Promise((o, r) => {
+  let n, i;
+  const t = ({ data: s }) => {
+    if (s && s.type === "authorization_response") {
+      if (s?.error) {
+        console.error(s.error);
+        return;
+      }
+      setTimeout(() => {
+        e.popup?.close(), clearTimeout(i), clearInterval(n), window.removeEventListener("message", t, !1), o(s);
+      }, e.closeTimeout || 0);
+    }
+  };
+  i = setTimeout(
+    () => {
+      clearInterval(n), r(new Error("Timeout")), window.removeEventListener("message", t, !1);
+    },
+    (e.timeoutInSeconds || D) * 1e3
+  ), n = setInterval(() => {
+    e.popup?.closed && (clearInterval(n), clearTimeout(i), window.removeEventListener("message", t, !1), r(new Error("Popup closed")));
+  }, 1e3), window.addEventListener("message", t);
+});
+export {
+  le as createAxios,
+  Z as debug,
+  oe as decodeConnectUrl,
+  u as decodeKey,
+  we as decodeUrlParams,
+  ie as decrypt,
+  re as encodeConnectUrl,
+  se as encodeKey,
+  ae as encrypt,
+  me as formatCacheTtl,
+  f as getApiErrorMessage,
+  W as getAppId,
+  de as getBrowserLang,
+  z as getConnectedInfo,
+  _e as getVisitorId,
+  pe as getWebAuthnErrorMessage,
+  ee as logger,
+  fe as openPopup,
+  ce as parseNextWorkflow,
+  ne as parseTokenFromConnectUrl,
+  ge as runPopup,
+  ke as setVisitorId,
+  ue as sleep,
+  te as updateConnectedInfo,
+  O as version
+};

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@arcblock/did-connect-react",
+  "version": "3.1.0",
+  "description": "Client side library to work with DID Connect by ArcBlock.",
+  "keywords": [
+    "react",
+    "arcblock",
+    "component"
+  ],
+  "author": "wangshijun<wangshijun2010@gmail.com>",
+  "homepage": "https://github.com/ArcBlock/ux#readme",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ArcBlock/ux.git"
+  },
+  "scripts": {
+    "lint": "eslint src tests --ext js --ext jsx",
+    "lint:fix": "npm run lint -- --fix",
+    "build": "vite build",
+    "autoexports": "node tools/auto-exports.js",
+    "watch": "vite build --watch",
+    "precommit": "CI=1 npm run lint",
+    "prepush": "CI=1 npm run lint",
+    "prepublish": "npm run build",
+    "test": "node tools/jest.js",
+    "coverage": "npm run test -- --coverage"
+  },
+  "bugs": {
+    "url": "https://github.com/ArcBlock/ux/issues"
+  },
+  "dependencies": {
+    "@arcblock/bridge": "3.1.0",
+    "@arcblock/did": "^1.21.2",
+    "@arcblock/icons": "3.1.0",
+    "@arcblock/react-hooks": "3.1.0",
+    "@arcblock/ws": "^1.21.2",
+    "@fontsource/lexend": "^5.2.9",
+    "@iconify-icons/logos": "^1.2.36",
+    "@iconify-icons/material-symbols": "^1.2.58",
+    "@iconify/react": "^5.2.1",
+    "@ocap/util": "^1.21.2",
+    "@simplewebauthn/browser": "^13.1.0",
+    "ahooks": "^3.8.5",
+    "axios": "^1.10.0",
+    "base64-url": "^2.3.3",
+    "buffer": "^6.0.3",
+    "color-convert": "^3.1.0",
+    "eventemitter3": "^5.0.1",
+    "flat": "^5.0.2",
+    "js-cookie": "^2.2.1",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "mdi-material-ui": "^7.9.4",
+    "p-queue": "^6.6.2",
+    "p-retry": "^6.2.1",
+    "p-wait-for": "^5.0.2",
+    "path-to-regexp": "^1.9.0",
+    "semver": "^7.7.2",
+    "tweetnacl": "^1.0.3",
+    "tweetnacl-sealedbox-js": "^1.2.0",
+    "ufo": "^1.6.1"
+  },
+  "peerDependencies": {
+    "@arcblock/ux": "^3.0.23",
+    "@blocklet/js-sdk": "^1.16.46",
+    "@blocklet/theme": "^3.0.23",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^7.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "jest": "^29.7.0"
+  },
+  "gitHead": "3d6b460689cc9015fc66567efc1b868874ceb18b"
+}

package/src/Address/index.jsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from '@arcblock/ux/lib/Address';

package/src/Avatar/index.jsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from '@arcblock/ux/lib/Avatar';

package/src/Button/Button.stories.jsx

@@ -0,0 +1,7 @@
+export { default as Basic } from './demo/basic';
+export { default as WithDifferentSizes } from './demo/with-different-sizes';
+export { default as CustomText } from './demo/custom-text';
+
+export default {
+  title: 'Deprecated/DID-Connect/Button',
+};

package/src/Button/index.jsx

@@ -0,0 +1,21 @@
+/* eslint-disable react/require-default-props */
+import PropTypes from 'prop-types';
+import Button from '@arcblock/ux/lib/Button';
+import ConnectLogo from '@arcblock/icons/lib/ConnectLogo';
+import { Box } from '@mui/material';
+
+/**
+ * ConnectButton
+ */
+export default function ConnectButton({ children = null, ...rest }) {
+  return (
+    <Button color="did" variant="contained" {...rest}>
+      <Box sx={{ fontWeight: 400 }}>{children || 'Continue With'}</Box>
+      <ConnectLogo style={{ width: 'auto', height: '1.2em', margin: '0 4px 0 8px' }} />
+    </Button>
+  );
+}
+
+ConnectButton.propTypes = {
+  children: PropTypes.any,
+};