@blocklet/did-domain-react 0.5.1 → 0.5.2

package/es/buy.d.ts

@@ -0,0 +1,15 @@
+import type { Locale } from '@arcblock/ux/lib/type';
+interface Props {
+    delegatee: string;
+    delegateePk: string;
+    didDomainURL: string;
+    locale: Locale;
+    title?: string;
+    onSuccess?: (data: {
+        nftDid: string;
+        domain: string;
+        chainHost: string;
+    }) => void;
+}
+export default function Buy(props: Props): import("react").JSX.Element;
+export {};

package/es/buy.js

@@ -0,0 +1,156 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import LoadingButton from "@mui/lab/LoadingButton";
+import Dialog from "@arcblock/ux/lib/Dialog";
+import { LocaleProvider, useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import ShoppingCart from "@mui/icons-material/ShoppingCart";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
+import { useRequest as useAHooksRequest, useMemoizedFn, useSetState, useUnmount } from "ahooks";
+import { useRef } from "react";
+import { create } from "./libs/api.js";
+import { getDidDomainServiceURL, openPopup } from "./libs/util.js";
+import { translations } from "./locales/index.js";
+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 || {});
+const preFetch = async ({
+  didDomainURL,
+  delegatee,
+  delegateePk
+}) => {
+  const serviceURL = await getDidDomainServiceURL(didDomainURL);
+  if (!serviceURL) {
+    return null;
+  }
+  const apiRequest = create({ baseURL: serviceURL.api });
+  const { data } = await apiRequest.post("/payment/session", {
+    delegatee,
+    delegateePk
+  });
+  return {
+    sessionId: data.sessionId,
+    baseURL: serviceURL.base
+  };
+};
+function Component({
+  delegatee,
+  delegateePk,
+  didDomainURL,
+  locale,
+  title = "",
+  onSuccess = () => {
+  },
+  ...props
+}) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    currentState: 1 /* Prepare */
+  });
+  const popup = useRef(null);
+  const sessionRequest = useAHooksRequest(
+    async () => {
+      const data = await preFetch({ didDomainURL, delegatee, delegateePk });
+      if (!data) {
+        return data;
+      }
+      return data;
+    },
+    {
+      debounceWait: 500,
+      debounceLeading: true,
+      debounceTrailing: false,
+      debounceMaxWait: 3e3,
+      refreshDeps: [],
+      onError(error) {
+        console.error(error);
+      }
+    }
+  );
+  const onMessage = 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);
+    }
+  });
+  useUnmount(() => {
+    try {
+      window.removeEventListener("message", onMessage);
+      popup.current?.close();
+      popup.current = null;
+    } catch (error) {
+      console.warn("Failed to close popup", error);
+    }
+  });
+  const handleCloseDialog = useMemoizedFn(() => {
+    setState({ currentState: 1 /* Prepare */ });
+  });
+  const handleOpenDialog = useMemoizedFn(() => {
+    setState({ currentState: 2 /* InProgress */ });
+    if (!sessionRequest.data) {
+      console.error("Failed to create session");
+      return;
+    }
+    handleCreatedSession({ sessionId: sessionRequest.data.sessionId, baseURL: sessionRequest.data.baseURL });
+  });
+  const handleCreatedSession = useMemoizedFn(({ sessionId, baseURL }) => {
+    window.addEventListener("message", onMessage);
+    const urlObj = new URL(baseURL);
+    urlObj.searchParams.set("sessionId", sessionId);
+    urlObj.searchParams.set("locale", locale);
+    urlObj.searchParams.set("embed", "1");
+    popup.current = openPopup(urlObj.toString());
+    const timer = setInterval(() => {
+      if (popup.current?.closed) {
+        clearInterval(timer);
+        handleCloseDialog();
+      }
+    }, 1e3);
+    return () => clearInterval(timer);
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      LoadingButton,
+      {
+        loading: sessionRequest.loading,
+        onClick: handleOpenDialog,
+        variant: "contained",
+        startIcon: /* @__PURE__ */ jsx(ShoppingCart, {}),
+        ...props,
+        children: title || t("buy.button.title")
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        fullWidth: true,
+        maxWidth: "xs",
+        open: state.currentState > 1 /* Prepare */ && state.currentState < 8 /* Completed */,
+        onClose: handleCloseDialog,
+        children: [
+          !sessionRequest.error && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", flexDirection: "column", gap: 2 }, children: [
+            state.currentState === 2 /* InProgress */ && /* @__PURE__ */ jsx(CircularProgress, { size: 50 }),
+            state.currentState === 4 /* Success */ && /* @__PURE__ */ jsx(CheckCircle, { sx: { color: "primary.main", fontSize: "5rem" } }),
+            state.currentState === 2 /* InProgress */ && /* @__PURE__ */ jsx(Typography, { children: t("buy.status.inProgress") }),
+            state.currentState === 4 /* Success */ && /* @__PURE__ */ jsx(Typography, { children: t("buy.status.success") })
+          ] }),
+          sessionRequest.error && /* @__PURE__ */ jsx(Alert, { severity: "error", children: t("buy.error.failedToCreateSession") })
+        ]
+      }
+    )
+  ] });
+}
+export default function Buy(props) {
+  return /* @__PURE__ */ jsx(LocaleProvider, { locale: props.locale, translations, children: /* @__PURE__ */ jsx(Component, { ...props }) });
+}

package/es/domain.d.ts

@@ -0,0 +1,7 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export declare function Domain({ nftDid, didDomainURL, locale, sx, }: {
+    nftDid: string;
+    didDomainURL: string;
+    locale: string;
+    sx?: SxProps<Theme>;
+}): import("react").JSX.Element | null;

package/es/domain.js

@@ -0,0 +1,89 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { CircularProgress, Tooltip } from "@mui/material";
+import Box from "@mui/material/Box";
+import Popover from "@mui/material/Popover";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useRef } from "react";
+import { useAsync } from "react-use";
+import useSetState from "react-use/lib/useSetState";
+import { joinURL } from "ufo";
+import { getDidDomainServiceURL, mergeSx } from "./libs/util.js";
+export function Domain({
+  nftDid,
+  didDomainURL,
+  locale,
+  sx = {}
+}) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    safeIframeRef: null,
+    popoverAnchorEl: null
+  });
+  const iframeRef = useRef(null);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const handlePopoverClick = (event) => {
+    setState({ popoverAnchorEl: event.currentTarget });
+  };
+  const handlePopoverClose = () => {
+    setState({ popoverAnchorEl: null });
+  };
+  const urlState = useAsync(async () => {
+    const result = await getDidDomainServiceURL(didDomainURL);
+    if (!result) {
+      return null;
+    }
+    return result.base;
+  });
+  if (!urlState.value) {
+    return null;
+  }
+  if (urlState.loading) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  const iframeSrc = joinURL(urlState.value, `/embed/domain?nft-did=${nftDid}&locale=${locale}`);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: t("embed.iconTip"), children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "img",
+        src: joinURL(didDomainURL, "/.well-known/service/blocklet/logo"),
+        alt: "logo",
+        onClick: handlePopoverClick,
+        sx: [
+          {
+            width: 16,
+            height: 16
+          },
+          mergeSx({ cursor: "pointer" }, sx)
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id: "popover-info",
+        open: Boolean(state.popoverAnchorEl),
+        anchorEl: state.popoverAnchorEl,
+        onClose: handlePopoverClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        children: /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            ref: iframeRef,
+            title: t("common.subscription"),
+            width: isMobile ? "320px" : "400px",
+            height: "350px",
+            style: { border: 0, display: "block" },
+            src: iframeSrc
+          }
+        )
+      }
+    )
+  ] });
+}

package/es/index.d.ts

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

package/es/index.js

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

package/es/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/es/libs/api.js

@@ -0,0 +1,21 @@
+import { getLocale } from "@arcblock/ux/lib/Locale/context";
+import { createAxios } from "@blocklet/js-sdk";
+import { joinURL } from "ufo";
+const axios = createAxios({});
+axios.interceptors.request.use(
+  (config) => {
+    const prefix = window.blocklet ? window.blocklet.prefix : "/";
+    config.baseURL = prefix || "";
+    config.url = 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 = getLocale();
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+export const create = (...args) => createAxios(...args);
+export default axios;

package/es/libs/util.d.ts

@@ -0,0 +1,25 @@
+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;
+export declare const getDidDomainServiceURL: (url: string) => Promise<{
+    base: string;
+    api: string;
+} | null>;

package/es/libs/util.js

@@ -0,0 +1,91 @@
+import { joinURL, withQuery } from "ufo";
+import { create as createAxios } from "./api.js";
+export const SEARCH_BUTTON_WIDTH = 120;
+export const COMMON_REQUEST_OPTIONS = {
+  debounceWait: 500,
+  debounceLeading: true,
+  debounceTrailing: false,
+  debounceMaxWait: 3e3
+};
+export const formatLocale = (locale = "en") => {
+  if (locale === "tw") {
+    return "zh";
+  }
+  return locale;
+};
+export 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;
+};
+export const mergeSx = (initial, sx) => {
+  if (!sx) {
+    return initial;
+  }
+  if (!initial) {
+    return sx;
+  }
+  return [initial, ...Array.isArray(sx) ? sx : [sx]];
+};
+export const getChainHost = () => window.blocklet?.preferences?.chainHost || "";
+export 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 = withQuery(url, {
+    // NOTICE: 携带当前页面的 origin，用于在 popup 中通过该参数判断是否可以发送 postMessage，即使该参数被伪造，最终也只有该域名能接收到消息，所以没有关系
+    opener: window.location.origin
+  });
+  return popup;
+};
+const DID_DOMAIN_SERVICE_DID = "z2qaGosS3rZ7m5ttP3Nd4V4qczR9TryTcRV4p";
+export const getDidDomainServiceURL = async (url) => {
+  if (!url || !url?.trim()) {
+    return null;
+  }
+  const axios = createAxios();
+  const urlObj = new URL(url);
+  urlObj.pathname = "__blocklet__.js";
+  urlObj.searchParams.set("type", "json");
+  const { data } = await axios.get(urlObj.toString());
+  const component = data?.componentMountPoints?.find((x) => x.did === DID_DOMAIN_SERVICE_DID);
+  const resultUrlObj = new URL(url);
+  resultUrlObj.pathname = component?.mountPoint;
+  const baseURL = resultUrlObj.toString();
+  const apiURL = joinURL(baseURL, "/api");
+  return { base: baseURL, api: apiURL };
+};

package/es/locales/en.d.ts

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

package/es/locales/en.js

@@ -0,0 +1,18 @@
+import flat from "flat";
+export default flat({
+  embed: {
+    iconTip: "Click to view subscription details"
+  },
+  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/es/locales/index.d.ts

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

package/es/locales/index.js

@@ -0,0 +1,6 @@
+import en from "./en.js";
+import zh from "./zh.js";
+export const translations = {
+  zh,
+  en
+};

package/es/locales/zh.d.ts

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

package/es/locales/zh.js

@@ -0,0 +1,18 @@
+import flat from "flat";
+export default flat({
+  embed: {
+    iconTip: "\u70B9\u51FB\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5"
+  },
+  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/es/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/lib/buy.d.ts

@@ -0,0 +1,15 @@
+import type { Locale } from '@arcblock/ux/lib/type';
+interface Props {
+    delegatee: string;
+    delegateePk: string;
+    didDomainURL: string;
+    locale: Locale;
+    title?: string;
+    onSuccess?: (data: {
+        nftDid: string;
+        domain: string;
+        chainHost: string;
+    }) => void;
+}
+export default function Buy(props: Props): import("react").JSX.Element;
+export {};

package/lib/buy.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = Buy;
+var _jsxRuntime = require("react/jsx-runtime");
+var _LoadingButton = _interopRequireDefault(require("@mui/lab/LoadingButton"));
+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 _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 || {});
+const preFetch = async ({
+  didDomainURL,
+  delegatee,
+  delegateePk
+}) => {
+  const serviceURL = await (0, _util.getDidDomainServiceURL)(didDomainURL);
+  if (!serviceURL) {
+    return null;
+  }
+  const apiRequest = (0, _api.create)({
+    baseURL: serviceURL.api
+  });
+  const {
+    data
+  } = await apiRequest.post("/payment/session", {
+    delegatee,
+    delegateePk
+  });
+  return {
+    sessionId: data.sessionId,
+    baseURL: serviceURL.base
+  };
+};
+function Component({
+  delegatee,
+  delegateePk,
+  didDomainURL,
+  locale,
+  title = "",
+  onSuccess = () => {},
+  ...props
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [state, setState] = (0, _ahooks.useSetState)({
+    currentState: 1 /* Prepare */
+  });
+  const popup = (0, _react.useRef)(null);
+  const sessionRequest = (0, _ahooks.useRequest)(async () => {
+    const data = await preFetch({
+      didDomainURL,
+      delegatee,
+      delegateePk
+    });
+    if (!data) {
+      return data;
+    }
+    return data;
+  }, {
+    debounceWait: 500,
+    debounceLeading: true,
+    debounceTrailing: false,
+    debounceMaxWait: 3e3,
+    refreshDeps: [],
+    onError(error) {
+      console.error(error);
+    }
+  });
+  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 */
+    });
+    if (!sessionRequest.data) {
+      console.error("Failed to create session");
+      return;
+    }
+    handleCreatedSession({
+      sessionId: sessionRequest.data.sessionId,
+      baseURL: sessionRequest.data.baseURL
+    });
+  });
+  const handleCreatedSession = (0, _ahooks.useMemoizedFn)(({
+    sessionId,
+    baseURL
+  }) => {
+    window.addEventListener("message", onMessage);
+    const urlObj = new URL(baseURL);
+    urlObj.searchParams.set("sessionId", sessionId);
+    urlObj.searchParams.set("locale", locale);
+    urlObj.searchParams.set("embed", "1");
+    popup.current = (0, _util.openPopup)(urlObj.toString());
+    const timer = setInterval(() => {
+      if (popup.current?.closed) {
+        clearInterval(timer);
+        handleCloseDialog();
+      }
+    }, 1e3);
+    return () => clearInterval(timer);
+  });
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_LoadingButton.default, {
+      loading: sessionRequest.loading,
+      onClick: handleOpenDialog,
+      variant: "contained",
+      startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ShoppingCart.default, {}),
+      ...props,
+      children: title || 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")
+      })]
+    })]
+  });
+}
+function Buy(props) {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_context.LocaleProvider, {
+    locale: props.locale,
+    translations: _locales.translations,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
+      ...props
+    })
+  });
+}

package/lib/domain.d.ts

@@ -0,0 +1,7 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export declare function Domain({ nftDid, didDomainURL, locale, sx, }: {
+    nftDid: string;
+    didDomainURL: string;
+    locale: string;
+    sx?: SxProps<Theme>;
+}): import("react").JSX.Element | null;

package/lib/domain.js

@@ -0,0 +1,97 @@
+"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 _material = require("@mui/material");
+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 _reactUse = require("react-use");
+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 urlState = (0, _reactUse.useAsync)(async () => {
+    const result = await (0, _util.getDidDomainServiceURL)(didDomainURL);
+    if (!result) {
+      return null;
+    }
+    return result.base;
+  });
+  if (!urlState.value) {
+    return null;
+  }
+  if (urlState.loading) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+  }
+  const iframeSrc = (0, _ufo.joinURL)(urlState.value, `/embed/domain?nft-did=${nftDid}&locale=${locale}`);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      title: t("embed.iconTip"),
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Box.default, {
+        component: "img",
+        src: (0, _ufo.joinURL)(didDomainURL, "/.well-known/service/blocklet/logo"),
+        alt: "logo",
+        onClick: handlePopoverClick,
+        sx: [{
+          width: 16,
+          height: 16
+        }, (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: "350px",
+        style: {
+          border: 0,
+          display: "block"
+        },
+        src: iframeSrc
+      })
+    })]
+  });
+}

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,25 @@
+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;
+export declare const getDidDomainServiceURL: (url: string) => Promise<{
+    base: string;
+    api: string;
+} | null>;

package/lib/libs/util.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.openPopup = exports.mergeSx = exports.getDidDomainServiceURL = exports.getChainHost = exports.formatLocale = exports.formatError = exports.SEARCH_BUTTON_WIDTH = exports.COMMON_REQUEST_OPTIONS = void 0;
+var _ufo = require("ufo");
+var _api = require("./api");
+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;
+const DID_DOMAIN_SERVICE_DID = "z2qaGosS3rZ7m5ttP3Nd4V4qczR9TryTcRV4p";
+const getDidDomainServiceURL = async url => {
+  if (!url || !url?.trim()) {
+    return null;
+  }
+  const axios = (0, _api.create)();
+  const urlObj = new URL(url);
+  urlObj.pathname = "__blocklet__.js";
+  urlObj.searchParams.set("type", "json");
+  const {
+    data
+  } = await axios.get(urlObj.toString());
+  const component = data?.componentMountPoints?.find(x => x.did === DID_DOMAIN_SERVICE_DID);
+  const resultUrlObj = new URL(url);
+  resultUrlObj.pathname = component?.mountPoint;
+  const baseURL = resultUrlObj.toString();
+  const apiURL = (0, _ufo.joinURL)(baseURL, "/api");
+  return {
+    base: baseURL,
+    api: apiURL
+  };
+};
+exports.getDidDomainServiceURL = getDidDomainServiceURL;

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,25 @@
+"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)({
+  embed: {
+    iconTip: "Click to view subscription details"
+  },
+  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,25 @@
+"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)({
+  embed: {
+    iconTip: "\u70B9\u51FB\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5"
+  },
+  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

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/did-domain-react",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Reusable react components for DID Domain",
   "keywords": [
     "react",
@@ -23,7 +23,7 @@
     "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",
+    "prepublishOnly": "npm run build",
     "test": "node tools/jest.js",
     "coverage": "npm run test -- --coverage",
     "storybook": "storybook dev -p 6006",