@blocklet/did-domain-react 0.3.39

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2024 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1 @@
+# DID Domain React Components

package/babel.config.es.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { modules: false, targets: 'chrome 114' }],
+    ['@babel/preset-react', { useBuiltIns: true, runtime: 'automatic' }],
+  ],
+  plugins: ['babel-plugin-inline-react-svg'],
+  ignore: ['src/**/*.stories.js', 'src/**/demo'],
+};

package/build.config.ts

@@ -0,0 +1,29 @@
+import { defineBuildConfig, BuildEntry } from 'unbuild';
+
+const pattern = ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/*.png', '!**/*.stories.js', '!**/demo'];
+
+const shared: BuildEntry = {
+  builder: 'mkdist',
+  input: './src',
+  pattern,
+  ext: 'js',
+  esbuild: {
+    jsx: 'automatic',
+  },
+  declaration: true,
+};
+export default defineBuildConfig({
+  failOnWarn: false,
+  entries: [
+    {
+      ...shared,
+      outDir: './es',
+      format: 'esm',
+    },
+    {
+      ...shared,
+      outDir: './lib',
+      format: 'cjs',
+    },
+  ],
+});

package/env.d.ts

@@ -0,0 +1,17 @@
+declare var blocklet: { appName: string; prefix: string; preferences: any; componentMountPoints: any[] };
+
+declare module '*.svg';
+
+declare module 'flat';
+
+declare module '@arcblock/*';
+
+declare module '@did-services/util/*';
+
+declare module 'pretty-ms-i18n';
+
+declare module '@abtnode/util/*';
+
+declare module '@abtnode/cron';
+
+declare module 'tlds2';

package/es/buy.d.ts

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

package/es/buy.js

@@ -0,0 +1,124 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Button from "@arcblock/ux/lib/Button";
+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 { joinURL } from "ufo";
+import { create } from "./libs/api.js";
+import { 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 || {});
+function Component({ delegatee, delegateePk, didDomainURL, locale, onSuccess, ...props }) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    currentState: 1 /* Prepare */
+  });
+  const popup = useRef(null);
+  const domainURLObj = new URL(didDomainURL);
+  domainURLObj.searchParams.set("locale", locale);
+  const api = useMemoizedFn(() => create({ baseURL: joinURL(domainURLObj.origin, domainURLObj.pathname, "api") }))();
+  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 */ });
+    sessionRequest.run();
+  });
+  const handleCreatedSession = useMemoizedFn(({ sessionId }) => {
+    window.addEventListener("message", onMessage);
+    domainURLObj.searchParams.set("sessionId", sessionId);
+    popup.current = openPopup(domainURLObj.toString());
+    const timer = setInterval(() => {
+      if (popup.current?.closed) {
+        clearInterval(timer);
+        handleCloseDialog();
+      }
+    }, 1e3);
+    return () => clearInterval(timer);
+  });
+  const sessionRequest = useAHooksRequest(
+    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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { onClick: handleOpenDialog, variant: "contained", startIcon: /* @__PURE__ */ jsx(ShoppingCart, {}), ...props, children: 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") })
+        ]
+      }
+    )
+  ] });
+}
+Component.defaultProps = {
+  onSuccess: () => {
+  }
+};
+export default function Buy(props) {
+  return /* @__PURE__ */ jsx(LocaleProvider, { locale: props.locale, translations, children: /* @__PURE__ */ jsx(Component, { ...props }) });
+}
+Buy.defaultProps = {
+  onSuccess: () => {
+  }
+};

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

@@ -0,0 +1,73 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+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 useSetState from "react-use/lib/useSetState";
+import { joinURL } from "ufo";
+import { 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 iframeSrc = joinURL(didDomainURL, `/app/embed/domain?nft-did=${nftDid}&locale=${locale}`);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "img",
+        src: joinURL(didDomainURL, "/.well-known/service/blocklet/logo"),
+        alt: "logo",
+        width: 16,
+        height: 16,
+        onClick: handlePopoverClick,
+        sx: 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: isMobile ? "600px" : "680px",
+            style: { border: 0 },
+            src: iframeSrc
+          }
+        )
+      }
+    )
+  ] });
+}
+Domain.defaultProps = {
+  sx: {}
+};

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,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/es/libs/util.js

@@ -0,0 +1,73 @@
+import { withQuery } from "ufo";
+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;
+};

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,15 @@
+import flat from "flat";
+export default flat({
+  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,15 @@
+import flat from "flat";
+export default flat({
+  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/global.d.ts

@@ -0,0 +1,54 @@
+declare type TDPriceRecurring = {
+  interval: string;
+  interval_count: string;
+};
+
+declare type TDProduct = {
+  id: string;
+  domainSuffix: string;
+};
+
+declare type TDPrice = {
+  id: string;
+  value: string;
+  symbol: string;
+  recurring: TPriceRecurring;
+  currency?: TCurrency;
+};
+
+declare type TFreeTrial = {
+  id: string;
+  trialEnd: number;
+  duration: number;
+  maxPerUser: number | Infinity;
+};
+
+declare type TDSearchedProduct = {
+  id: string;
+  type: string;
+  domain: string;
+  domainPrefix: string;
+  domainSuffix: string;
+  takenBy: string;
+  price: TDPrice;
+  originalKeyword: string;
+  freeTrail?: TFreeTrial;
+  nftDid?: string;
+};
+
+declare type TDProducts = TDProduct[];
+
+declare type TDSearchedProducts = TDSearchedProduct[];
+
+declare type TDExplorerAssetType = 'accounts' | 'assets' | 'txs';
+
+declare type TUserDid = string | undefined;
+
+declare type TRecord = {
+  id: string;
+  name: string;
+  type: string;
+  value: string;
+  ttl: number;
+  category: string;
+};

package/lib/buy.d.ts

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