@blocklet/did-domain-react 0.3.39

package/lib/buy.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = Buy;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _CheckCircle = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
+var _ShoppingCart = _interopRequireDefault(require("@mui/icons-material/ShoppingCart"));
+var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _ufo = require("ufo");
+var _api = require("./libs/api");
+var _util = require("./libs/util");
+var _locales = require("./locales");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var BuyState = /* @__PURE__ */(BuyState2 => {
+  BuyState2[BuyState2["Prepare"] = 1] = "Prepare";
+  BuyState2[BuyState2["InProgress"] = 2] = "InProgress";
+  BuyState2[BuyState2["Success"] = 4] = "Success";
+  BuyState2[BuyState2["Completed"] = 8] = "Completed";
+  return BuyState2;
+})(BuyState || {});
+function Component({
+  delegatee,
+  delegateePk,
+  didDomainURL,
+  locale,
+  onSuccess,
+  ...props
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [state, setState] = (0, _ahooks.useSetState)({
+    currentState: 1 /* Prepare */
+  });
+  const popup = (0, _react.useRef)(null);
+  const domainURLObj = new URL(didDomainURL);
+  domainURLObj.searchParams.set("locale", locale);
+  const api = (0, _ahooks.useMemoizedFn)(() => (0, _api.create)({
+    baseURL: (0, _ufo.joinURL)(domainURLObj.origin, domainURLObj.pathname, "api")
+  }))();
+  const onMessage = (0, _ahooks.useMemoizedFn)(event => {
+    if (event.data.type === "didDomain.success") {
+      onSuccess?.({
+        nftDid: event.data?.nftDid,
+        domain: event.data?.domain,
+        chainHost: event.data?.chainHost
+      });
+      popup.current?.close();
+      popup.current = null;
+      setState({
+        currentState: 4 /* Success */
+      });
+      setTimeout(() => {
+        setState({
+          currentState: 8 /* Completed */
+        });
+      }, 2e3);
+    }
+  });
+  (0, _ahooks.useUnmount)(() => {
+    try {
+      window.removeEventListener("message", onMessage);
+      popup.current?.close();
+      popup.current = null;
+    } catch (error) {
+      console.warn("Failed to close popup", error);
+    }
+  });
+  const handleCloseDialog = (0, _ahooks.useMemoizedFn)(() => {
+    setState({
+      currentState: 1 /* Prepare */
+    });
+  });
+  const handleOpenDialog = (0, _ahooks.useMemoizedFn)(() => {
+    setState({
+      currentState: 2 /* InProgress */
+    });
+    sessionRequest.run();
+  });
+  const handleCreatedSession = (0, _ahooks.useMemoizedFn)(({
+    sessionId
+  }) => {
+    window.addEventListener("message", onMessage);
+    domainURLObj.searchParams.set("sessionId", sessionId);
+    popup.current = (0, _util.openPopup)(domainURLObj.toString());
+    const timer = setInterval(() => {
+      if (popup.current?.closed) {
+        clearInterval(timer);
+        handleCloseDialog();
+      }
+    }, 1e3);
+    return () => clearInterval(timer);
+  });
+  const sessionRequest = (0, _ahooks.useRequest)(async () => {
+    const {
+      data
+    } = await api.post("/payment/session", {
+      delegatee,
+      delegateePk
+    });
+    return handleCreatedSession({
+      sessionId: data.sessionId
+    });
+  }, {
+    manual: true,
+    debounceWait: 500,
+    debounceLeading: true,
+    debounceTrailing: false,
+    debounceMaxWait: 3e3,
+    refreshDeps: [],
+    onError(error) {
+      console.error(error);
+    }
+  });
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
+      onClick: handleOpenDialog,
+      variant: "contained",
+      startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ShoppingCart.default, {}),
+      ...props,
+      children: t("buy.button.title")
+    }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_Dialog.default, {
+      fullWidth: true,
+      maxWidth: "xs",
+      open: state.currentState > 1 /* Prepare */ && state.currentState < 8 /* Completed */,
+      onClose: handleCloseDialog,
+      children: [!sessionRequest.error && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_Box.default, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          flexDirection: "column",
+          gap: 2
+        },
+        children: [state.currentState === 2 /* InProgress */ && /* @__PURE__ */(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          size: 50
+        }), state.currentState === 4 /* Success */ && /* @__PURE__ */(0, _jsxRuntime.jsx)(_CheckCircle.default, {
+          sx: {
+            color: "primary.main",
+            fontSize: "5rem"
+          }
+        }), state.currentState === 2 /* InProgress */ && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Typography.default, {
+          children: t("buy.status.inProgress")
+        }), state.currentState === 4 /* Success */ && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Typography.default, {
+          children: t("buy.status.success")
+        })]
+      }), sessionRequest.error && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Alert.default, {
+        severity: "error",
+        children: t("buy.error.failedToCreateSession")
+      })]
+    })]
+  });
+}
+Component.defaultProps = {
+  onSuccess: () => {}
+};
+function Buy(props) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_context.LocaleProvider, {
+    locale: props.locale,
+    translations: _locales.translations,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
+      ...props
+    })
+  });
+}
+Buy.defaultProps = {
+  onSuccess: () => {}
+};

package/lib/domain.d.ts

@@ -0,0 +1,11 @@
+export declare function Domain({ nftDid, didDomainURL, locale, sx, }: {
+    nftDid: string;
+    didDomainURL: string;
+    locale: string;
+    sx?: any;
+}): import("react").JSX.Element;
+export declare namespace Domain {
+    var defaultProps: {
+        sx: {};
+    };
+}

package/lib/domain.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Domain = Domain;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _styles = require("@mui/material/styles");
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+var _react = require("react");
+var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
+var _ufo = require("ufo");
+var _util = require("./libs/util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Domain({
+  nftDid,
+  didDomainURL,
+  locale,
+  sx
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [state, setState] = (0, _useSetState.default)({
+    safeIframeRef: null,
+    popoverAnchorEl: null
+  });
+  const iframeRef = (0, _react.useRef)(null);
+  const theme = (0, _styles.useTheme)();
+  const isMobile = (0, _useMediaQuery.default)(theme.breakpoints.down("md"));
+  const handlePopoverClick = event => {
+    setState({
+      popoverAnchorEl: event.currentTarget
+    });
+  };
+  const handlePopoverClose = () => {
+    setState({
+      popoverAnchorEl: null
+    });
+  };
+  const iframeSrc = (0, _ufo.joinURL)(didDomainURL, `/app/embed/domain?nft-did=${nftDid}&locale=${locale}`);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Box.default, {
+      component: "img",
+      src: (0, _ufo.joinURL)(didDomainURL, "/.well-known/service/blocklet/logo"),
+      alt: "logo",
+      width: 16,
+      height: 16,
+      onClick: handlePopoverClick,
+      sx: (0, _util.mergeSx)({
+        cursor: "pointer"
+      }, sx)
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Popover.default, {
+      id: "popover-info",
+      open: Boolean(state.popoverAnchorEl),
+      anchorEl: state.popoverAnchorEl,
+      onClose: handlePopoverClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)("iframe", {
+        ref: iframeRef,
+        title: t("common.subscription"),
+        width: isMobile ? "320px" : "400px",
+        height: isMobile ? "600px" : "680px",
+        style: {
+          border: 0
+        },
+        src: iframeSrc
+      })
+    })]
+  });
+}
+Domain.defaultProps = {
+  sx: {}
+};

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import Buy from './buy';
+import { Domain } from './domain';
+export { translations } from './locales';
+export { Buy, Domain };

package/lib/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Buy", {
+  enumerable: true,
+  get: function () {
+    return _buy.default;
+  }
+});
+Object.defineProperty(exports, "Domain", {
+  enumerable: true,
+  get: function () {
+    return _domain.Domain;
+  }
+});
+Object.defineProperty(exports, "translations", {
+  enumerable: true,
+  get: function () {
+    return _locales.translations;
+  }
+});
+var _buy = _interopRequireDefault(require("./buy"));
+var _domain = require("./domain");
+var _locales = require("./locales");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/libs/api.d.ts

@@ -0,0 +1,3 @@
+declare const axios: import("axios").AxiosInstance;
+export declare const create: (...args: any) => import("axios").AxiosInstance;
+export default axios;

package/lib/libs/api.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.create = void 0;
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _jsSdk = require("@blocklet/js-sdk");
+var _ufo = require("ufo");
+const axios = (0, _jsSdk.createAxios)({});
+axios.interceptors.request.use(config => {
+  const prefix = window.blocklet ? window.blocklet.prefix : "/";
+  config.baseURL = prefix || "";
+  config.url = (0, _ufo.joinURL)("/api", String(config.url));
+  config.timeout = 2e5;
+  config.params = config.params || {};
+  const searchParams = new URLSearchParams(config.url.split("?")[1]);
+  if (!searchParams.has("locale")) {
+    config.params.locale = (0, _context.getLocale)();
+  }
+  return config;
+}, error => Promise.reject(error));
+const create = (...args) => (0, _jsSdk.createAxios)(...args);
+exports.create = create;
+module.exports = axios;

package/lib/libs/util.d.ts

@@ -0,0 +1,21 @@
+export declare const SEARCH_BUTTON_WIDTH = 120;
+export declare const COMMON_REQUEST_OPTIONS: {
+    debounceWait: number;
+    debounceLeading: boolean;
+    debounceTrailing: boolean;
+    debounceMaxWait: number;
+};
+export declare const formatLocale: (locale?: string) => string;
+export declare const formatError: (err: any, t: any) => any;
+export declare const mergeSx: (initial: any, sx: any) => any;
+export declare const getChainHost: () => any;
+/**
+ *
+ * @param {string} url - 打开一个弹窗
+ * @returns
+ */
+export declare const openPopup: (url: string, { width, height, name }?: {
+    width?: number | undefined;
+    height?: number | undefined;
+    name?: string | undefined;
+}) => Window;

package/lib/libs/util.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.openPopup = exports.mergeSx = exports.getChainHost = exports.formatLocale = exports.formatError = exports.SEARCH_BUTTON_WIDTH = exports.COMMON_REQUEST_OPTIONS = void 0;
+var _ufo = require("ufo");
+const SEARCH_BUTTON_WIDTH = exports.SEARCH_BUTTON_WIDTH = 120;
+const COMMON_REQUEST_OPTIONS = exports.COMMON_REQUEST_OPTIONS = {
+  debounceWait: 500,
+  debounceLeading: true,
+  debounceTrailing: false,
+  debounceMaxWait: 3e3
+};
+const formatLocale = (locale = "en") => {
+  if (locale === "tw") {
+    return "zh";
+  }
+  return locale;
+};
+exports.formatLocale = formatLocale;
+const formatError = (err, t) => {
+  const {
+    errors,
+    response
+  } = err;
+  if (Array.isArray(errors)) {
+    return errors.map(x => x.message).join("\n");
+  }
+  const joiError = err.response?.data?.error;
+  if (Array.isArray(joiError?.details)) {
+    const formatted = joiError?.details.map(e => {
+      const errorMessage = e.message.replace(/["]/g, "'");
+      const errorPath = e.path.join(".");
+      return `${errorPath}: ${errorMessage}`;
+    });
+    return `Validate failed: ${formatted.join(";")}`;
+  }
+  if (response?.data?.code) {
+    return t(`error.${response?.data?.code}`);
+  }
+  if (response?.data?.message) {
+    return response.data.message;
+  }
+  if (response) {
+    return `Request failed: ${response.status} ${response.statusText}: ${JSON.stringify(response.data)}`;
+  }
+  return err.message;
+};
+exports.formatError = formatError;
+const mergeSx = (initial, sx) => {
+  if (!sx) {
+    return initial;
+  }
+  if (!initial) {
+    return sx;
+  }
+  return [initial, ...(Array.isArray(sx) ? sx : [sx])];
+};
+exports.mergeSx = mergeSx;
+const getChainHost = () => window.blocklet?.preferences?.chainHost || "";
+exports.getChainHost = getChainHost;
+const openPopup = (url, {
+  width = 600,
+  height = 700,
+  name = "did-domain:popup"
+} = {}) => {
+  const left = window.screenX + (window.innerWidth - width) / 2;
+  const top = window.screenY + (window.innerHeight - height) / 2;
+  const windowFeatures = [`left=${left}`, `top=${top}`, `width=${width}`, `height=${height}`, "resizable=no",
+  // not working
+  "scrollbars=yes", "status=yes", "popup=yes"];
+  const popup = window.open("", name, windowFeatures.join(","));
+  if (popup === null) {
+    throw new Error("Failed to open popup");
+  }
+  popup.location.href = (0, _ufo.withQuery)(url, {
+    // NOTICE: 携带当前页面的 origin，用于在 popup 中通过该参数判断是否可以发送 postMessage，即使该参数被伪造，最终也只有该域名能接收到消息，所以没有关系
+    opener: window.location.origin
+  });
+  return popup;
+};
+exports.openPopup = openPopup;

package/lib/locales/en.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/lib/locales/en.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _flat = _interopRequireDefault(require("flat"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+module.exports = (0, _flat.default)({
+  buy: {
+    button: {
+      title: "Buy DID Domain"
+    },
+    status: {
+      inProgress: "Please wait while we are processing your request, the domain will be automatically resolved to the current app after the purchase...",
+      success: "Purchase completed!"
+    },
+    error: {
+      failedToCreateSession: "Failed to create session"
+    }
+  }
+});

package/lib/locales/index.d.ts

@@ -0,0 +1,4 @@
+export declare const translations: {
+    zh: any;
+    en: any;
+};

package/lib/locales/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translations = void 0;
+var _en = _interopRequireDefault(require("./en"));
+var _zh = _interopRequireDefault(require("./zh"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const translations = exports.translations = {
+  zh: _zh.default,
+  en: _en.default
+};

package/lib/locales/zh.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/lib/locales/zh.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _flat = _interopRequireDefault(require("flat"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+module.exports = (0, _flat.default)({
+  buy: {
+    button: {
+      title: "\u8D2D\u4E70 DID \u57DF\u540D"
+    },
+    status: {
+      inProgress: "\u8BF7\u7A0D\u7B49\uFF0C\u6211\u4EEC\u6B63\u5728\u5904\u7406\u60A8\u7684\u8BF7\u6C42\uFF0C\u8D2D\u4E70\u57DF\u540D\u540E\u4F1A\u81EA\u52A8\u89E3\u6790\u5230\u5F53\u524D\u7684\u5E94\u7528...",
+      success: "\u8D2D\u4E70\u5B8C\u6210\uFF01"
+    },
+    error: {
+      failedToCreateSession: "\u521B\u5EFA\u4F1A\u8BDD\u5931\u8D25"
+    }
+  }
+});

package/lib/types/index.js

@@ -0,0 +1 @@
+"use strict";

package/lib/types/shims.d.ts

@@ -0,0 +1,15 @@
+declare module '@arcblock/ux/*';
+
+declare module '@arcblock/did-connect/*';
+
+declare module '*.png';
+
+declare module 'flat';
+
+declare module '@arcblock/*';
+
+declare module '@blocklet/*';
+
+declare module 'pretty-ms-i18n';
+
+declare var blocklet: import('@blocklet/sdk').WindowBlocklet;

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@blocklet/did-domain-react",
+  "version": "0.3.39",
+  "description": "Reusable react components for DID Domain",
+  "keywords": [
+    "react",
+    "domain"
+  ],
+  "author": "zhenqiang<zhenqiang@arcblock.io>",
+  "homepage": "https://github.com/blocklet/did-services#readme",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/blocklet/did-services.git"
+  },
+  "scripts": {
+    "lint": "tsc --noEmit && eslint src --ext js --ext jsx --ext ts --ext tsx",
+    "lint:fix": "npm run lint -- --fix",
+    "build": "tsc --noEmit && unbuild && node tools/auto-exports.js && npm run cpfiles",
+    "watch": "CONSOLA_LEVEL=1 nodemon -e .jsx,.js,.ts,.tsx -w src -x 'yalc publish --push'",
+    "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",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "cpfiles": "copyfiles -u 1 './src/**/*.css' lib/ && copyfiles -u 1 './src/**/*.css' es/"
+  },
+  "bugs": {
+    "url": "https://github.com/blocklet/did-services/issues"
+  },
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "require": "./lib/index.js"
+    },
+    "./lib/": {
+      "import": "./es/",
+      "require": "./lib/"
+    }
+  },
+  "importSort": {
+    ".js, .jsx, .mjs": {
+      "parser": "babylon",
+      "style": "module"
+    },
+    ".ts, .tsx": {
+      "style": "module",
+      "parser": "typescript"
+    }
+  },
+  "dependencies": {
+    "@arcblock/did-connect": "^2.10.69",
+    "@arcblock/ux": "^2.10.68",
+    "@blocklet/js-sdk": "^1.16.33",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.7",
+    "@mui/system": "^5.16.7",
+    "ahooks": "^3.8.1",
+    "axios": "^1.7.8",
+    "flat": "^5.0.2",
+    "lodash": "^4.17.21",
+    "react-error-boundary": "^4.1.2",
+    "react-use": "^17.5.1",
+    "ufo": "^1.5.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@arcblock/eslint-config-ts": "^0.3.3",
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-legacy": "^5.4.3",
+    "copyfiles": "^2.4.1",
+    "eslint": "^8.57.1",
+    "glob": "^10.4.5",
+    "import-sort-style-module": "^6.0.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-import-sort": "^0.0.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "storybook": "^7.6.20",
+    "ts-jest": "^29.2.5",
+    "type-fest": "^4.28.0",
+    "typescript": "^4.9.5",
+    "unbuild": "^2.0.0",
+    "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-node-polyfills": "^0.21.0"
+  },
+  "gitHead": "55d08a148486bcc6edac3080778b0654cba171d9"
+}