@blocklet/did-domain-react 0.3.39 → 0.3.41

package/README.md

@@ -1 +1,43 @@
 # DID Domain React Components
+
+## Component <Buy>
+
+Buy and Bind Domain automatically.
+
+```tsx
+import { Buy } from '@blocklet/did-domain-react';
+
+function App() {
+  const appId = window.blocklet?.appId;
+  const appPk = window.blocklet?.appPk;
+  const didDomainURL = 'https://domain.didlabs.org/app';
+  const locale = 'en';
+
+  return (
+    <Buy
+      delegatee={appId}
+      delegateePk={appPk}
+      didDomainURL={didDomainURL}
+      onSuccess={handleSuccess}
+      locale={locale}
+      variant="outlined"
+    />
+  );
+}
+```
+
+## Component <Domain />
+
+Display the domain information of the domain NFT.
+
+```tsx
+import { Domain } from '@blocklet/did-domain-react';
+
+function App() {
+  const locale = 'en';
+  const nftDid = 'bbqa2ag5a4y57ome4quqpyclhoszb5snw6faxainddq';
+  const didDomainURL = 'https://domain.didlabs.org/app';
+
+  return <DomainComponent locale={locale} nftDid={nftDid} didDomainURL={didDomainURL} />;
+}
+```

package/es/buy.js

@@ -10,9 +10,8 @@ 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 { getDidDomainServiceURL, openPopup } from "./libs/util.js";
 import { translations } from "./locales/index.js";
 var BuyState = /* @__PURE__ */ ((BuyState2) => {
   BuyState2[BuyState2["Prepare"] = 1] = "Prepare";
@@ -27,9 +26,6 @@ function Component({ delegatee, delegateePk, didDomainURL, locale, onSuccess, ..
     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 });
@@ -57,10 +53,12 @@ function Component({ delegatee, delegateePk, didDomainURL, locale, onSuccess, ..
     setState({ currentState: 2 /* InProgress */ });
     sessionRequest.run();
   });
-  const handleCreatedSession = useMemoizedFn(({ sessionId }) => {
+  const handleCreatedSession = useMemoizedFn(({ sessionId, baseURL }) => {
     window.addEventListener("message", onMessage);
-    domainURLObj.searchParams.set("sessionId", sessionId);
-    popup.current = openPopup(domainURLObj.toString());
+    const urlObj = new URL(baseURL);
+    urlObj.searchParams.set("sessionId", sessionId);
+    urlObj.searchParams.set("locale", locale);
+    popup.current = openPopup(urlObj.toString());
     const timer = setInterval(() => {
       if (popup.current?.closed) {
         clearInterval(timer);
@@ -71,11 +69,16 @@ function Component({ delegatee, delegateePk, didDomainURL, locale, onSuccess, ..
   });
   const sessionRequest = useAHooksRequest(
     async () => {
-      const { data } = await api.post("/payment/session", {
+      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 handleCreatedSession({ sessionId: data.sessionId });
+      return handleCreatedSession({ sessionId: data.sessionId, baseURL: serviceURL.base });
     },
     {
       manual: true,

package/es/domain.d.ts

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

package/es/domain.js

@@ -1,13 +1,15 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { CircularProgress } 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 { mergeSx } from "./libs/util.js";
+import { getDidDomainServiceURL, mergeSx } from "./libs/util.js";
 export function Domain({
   nftDid,
   didDomainURL,
@@ -28,7 +30,20 @@ export function Domain({
   const handlePopoverClose = () => {
     setState({ popoverAnchorEl: null });
   };
-  const iframeSrc = joinURL(didDomainURL, `/app/embed/domain?nft-did=${nftDid}&locale=${locale}`);
+  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(
       Box,

package/es/libs/util.d.ts

@@ -19,3 +19,7 @@ export declare const openPopup: (url: string, { width, height, name }?: {
     height?: number | undefined;
     name?: string | undefined;
 }) => Window;
+export declare const getDidDomainServiceURL: (url: string) => Promise<{
+    base: string;
+    api: string;
+} | null>;

package/es/libs/util.js

@@ -1,4 +1,5 @@
-import { withQuery } from "ufo";
+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,
@@ -71,3 +72,20 @@ export const openPopup = (url, { width = 600, height = 700, name = "did-domain:p
   });
   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/lib/buy.js

@@ -16,7 +16,6 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 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");
@@ -43,11 +42,6 @@ function Component({
     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?.({
@@ -88,11 +82,14 @@ function Component({
     sessionRequest.run();
   });
   const handleCreatedSession = (0, _ahooks.useMemoizedFn)(({
-    sessionId
+    sessionId,
+    baseURL
   }) => {
     window.addEventListener("message", onMessage);
-    domainURLObj.searchParams.set("sessionId", sessionId);
-    popup.current = (0, _util.openPopup)(domainURLObj.toString());
+    const urlObj = new URL(baseURL);
+    urlObj.searchParams.set("sessionId", sessionId);
+    urlObj.searchParams.set("locale", locale);
+    popup.current = (0, _util.openPopup)(urlObj.toString());
     const timer = setInterval(() => {
       if (popup.current?.closed) {
         clearInterval(timer);
@@ -102,14 +99,22 @@ function Component({
     return () => clearInterval(timer);
   });
   const sessionRequest = (0, _ahooks.useRequest)(async () => {
+    const serviceURL = await (0, _util.getDidDomainServiceURL)(didDomainURL);
+    if (!serviceURL) {
+      return null;
+    }
+    const apiRequest = (0, _api.create)({
+      baseURL: serviceURL.api
+    });
     const {
       data
-    } = await api.post("/payment/session", {
+    } = await apiRequest.post("/payment/session", {
       delegatee,
       delegateePk
     });
     return handleCreatedSession({
-      sessionId: data.sessionId
+      sessionId: data.sessionId,
+      baseURL: serviceURL.base
     });
   }, {
     manual: true,

package/lib/domain.d.ts

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

package/lib/domain.js

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 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");
@@ -41,7 +43,20 @@ function Domain({
       popoverAnchorEl: null
     });
   };
-  const iframeSrc = (0, _ufo.joinURL)(didDomainURL, `/app/embed/domain?nft-did=${nftDid}&locale=${locale}`);
+  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)(_Box.default, {
       component: "img",

package/lib/libs/util.d.ts

@@ -19,3 +19,7 @@ export declare const openPopup: (url: string, { width, height, name }?: {
     height?: number | undefined;
     name?: string | undefined;
 }) => Window;
+export declare const getDidDomainServiceURL: (url: string) => Promise<{
+    base: string;
+    api: string;
+} | null>;

package/lib/libs/util.js

@@ -3,8 +3,9 @@
 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;
+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,
@@ -80,4 +81,27 @@ const openPopup = (url, {
   });
   return popup;
 };
-exports.openPopup = openPopup;
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/did-domain-react",
-  "version": "0.3.39",
+  "version": "0.3.41",
   "description": "Reusable react components for DID Domain",
   "keywords": [
     "react",
@@ -54,13 +54,6 @@
     }
   },
   "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",
@@ -70,6 +63,13 @@
     "ufo": "^1.5.4"
   },
   "peerDependencies": {
+    "@arcblock/did-connect": "^2.10.0",
+    "@arcblock/ux": "^2.10.0",
+    "@blocklet/js-sdk": "^1.16.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.7",
+    "@mui/system": "^5.16.7",
     "react": ">=18.1.0"
   },
   "publishConfig": {
@@ -102,5 +102,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "55d08a148486bcc6edac3080778b0654cba171d9"
+  "gitHead": "b7a8de92dd2d2ddc4af3b068a3cff1fe2af01e68"
 }

package/src/buy.tsx

@@ -11,10 +11,9 @@ 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';
-import { openPopup } from './libs/util';
+import { getDidDomainServiceURL, openPopup } from './libs/util';
 import { translations } from './locales';
 
 enum BuyState {
@@ -38,10 +37,6 @@ function Component({ delegatee, delegateePk, didDomainURL, locale, onSuccess, ..
     currentState: BuyState.Prepare,
   });
   const popup = useRef<Window | null>(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: MessageEvent) => {
     if (event.data.type === 'didDomain.success') {
@@ -75,10 +70,13 @@ function Component({ delegatee, delegateePk, didDomainURL, locale, onSuccess, ..
     sessionRequest.run();
   });
 
-  const handleCreatedSession = useMemoizedFn(({ sessionId }: { sessionId: string }) => {
+  const handleCreatedSession = useMemoizedFn(({ sessionId, baseURL }: { sessionId: string; baseURL: string }) => {
     window.addEventListener('message', onMessage);
-    domainURLObj.searchParams.set('sessionId', sessionId);
-    popup.current = openPopup(domainURLObj.toString());
+    const urlObj = new URL(baseURL);
+
+    urlObj.searchParams.set('sessionId', sessionId);
+    urlObj.searchParams.set('locale', locale);
+    popup.current = openPopup(urlObj.toString());
 
     const timer = setInterval(() => {
       if (popup.current?.closed) {
@@ -92,11 +90,19 @@ function Component({ delegatee, delegateePk, didDomainURL, locale, onSuccess, ..
 
   const sessionRequest = useAHooksRequest(
     async () => {
-      const { data } = await api.post('/payment/session', {
+      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 handleCreatedSession({ sessionId: data.sessionId });
+
+      return handleCreatedSession({ sessionId: data.sessionId, baseURL: serviceURL.base });
     },
     {
       manual: true,

package/src/domain.tsx

@@ -1,13 +1,15 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { CircularProgress } 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 { mergeSx } from './libs/util';
+import { getDidDomainServiceURL, mergeSx } from './libs/util';
 
 export function Domain({
   nftDid,
@@ -37,7 +39,24 @@ export function Domain({
     setState({ popoverAnchorEl: null });
   };
 
-  const iframeSrc = joinURL(didDomainURL, `/app/embed/domain?nft-did=${nftDid}&locale=${locale}`);
+  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 <CircularProgress />;
+  }
+
+  const iframeSrc = joinURL(urlState.value, `/embed/domain?nft-did=${nftDid}&locale=${locale}`);
 
   return (
     <>

package/src/libs/util.ts

@@ -1,4 +1,6 @@
-import { withQuery } from 'ufo';
+import { joinURL, withQuery } from 'ufo';
+
+import { create as createAxios } from './api';
 
 export const SEARCH_BUTTON_WIDTH = 120;
 
@@ -98,3 +100,27 @@ export const openPopup = (url: string, { width = 600, height = 700, name = 'did-
   });
   return popup;
 };
+
+const DID_DOMAIN_SERVICE_DID = 'z2qaGosS3rZ7m5ttP3Nd4V4qczR9TryTcRV4p';
+
+export const getDidDomainServiceURL = async (url: string): Promise<{ base: string; api: string } | null> => {
+  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: any) => 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 };
+};