@abtnode/ux 1.16.25-beta-85e265d1 → 1.16.25-beta-bc165d9b

package/es/blocklet/actions.js

@@ -22,14 +22,13 @@ import Alert from '@mui/material/Alert';
 import Button from '@arcblock/ux/lib/Button';
 import { getAppMissingConfigs, isDeletableBlocklet, hasRunnableComponent, getDisplayName, isInProgress } from '@blocklet/meta/lib/util';
 import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { BLOCKLET_CONTROLLER_STATUS, BLOCKLET_MODES, SUSPENDED_REASON } from '@blocklet/constant';
+import { BLOCKLET_CONTROLLER_STATUS, BLOCKLET_MODES } from '@blocklet/constant';
 import Toast from '@arcblock/ux/lib/Toast';
 import { sleep, formatError, isDownloading } from '../util';
 import { getServerUrl } from './util';
 import { useNodeContext } from '../contexts/node';
 import Confirm from '../confirm';
 import Icons from './icons';
-import { useBlockletContext } from '../contexts/blocklet';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function BlockletActions({
   blocklet,
@@ -54,14 +53,14 @@ export default function BlockletActions({
     loading: recommendedUrlLoading,
     recommendedUrl
   } = useBlockletUrlEvaluation(blocklet);
-  const {
-    nftState
-  } = useBlockletContext();
   const inProgress = isInProgress(blocklet.status);
-  let disableStart = blocklet?.controller?.status?.value === BLOCKLET_CONTROLLER_STATUS.suspended;
-  if (!nftState?.expired && blocklet?.controller?.status?.reason === SUSPENDED_REASON.expired) {
-    disableStart = false;
-  }
+  const disableStart = blocklet?.controller?.status?.value === BLOCKLET_CONTROLLER_STATUS.suspended;
+
+  // TODO: PaymentKitV2 过期恢复后需要能立即启动
+  // if (!nftState?.expired && blocklet?.controller?.status?.reason === SUSPENDED_REASON.expired) {
+  //   disableStart = false;
+  // }
+
   const {
     inService
   } = node;

package/es/subscription/blocklet.js

@@ -0,0 +1,175 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import dayjs from '@abtnode/util/lib/dayjs';
+import Chip from '@mui/material/Chip';
+import CircularProgress from '@mui/material/CircularProgress';
+import Popover from '@mui/material/Popover';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import PropTypes from 'prop-types';
+import prettyMs from 'pretty-ms-i18n';
+import { useRef } from 'react';
+import useAsyncRetry from 'react-use/lib/useAsyncRetry';
+import useSetState from 'react-use/lib/useSetState';
+import { useNodeContext } from '../contexts/node';
+import { formatPrettyMsLocale, getSubscriptionUrlV2 } from '../util';
+import ChipLabel from './chip-label';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const DEFAULT_LAUNCHER_URL = 'https://launcher.arcblock.io/'; // 兼容: 旧版本的 blocklet.controller 没有 launcherUrl 字段
+
+const ALERT_THRESHOLD_MS = 30 * 24 * 60 * 60 * 1000;
+function SubscriptionBlocklet({
+  launcherUrl,
+  chainHost,
+  nftId,
+  launcherSessionId,
+  ...props
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const node = useNodeContext();
+  const [state, setState] = useSetState({
+    safeIframeRef: null,
+    popoverAnchorEl: null
+  });
+  const iframeRef = useRef(null);
+  const isMobile = useMediaQuery(x => x.breakpoints.down('md'));
+  const {
+    sx = {},
+    ...rest
+  } = props;
+  const typoKey = isMobile ? 'mobile' : 'desktop';
+  const asyncState = useAsyncRetry(async () => {
+    const [data, subscriptionURL] = await Promise.all([node.api.getLauncherSession({
+      input: {
+        launcherSessionId,
+        launcherUrl
+      }
+    }), getSubscriptionUrlV2({
+      launcherUrl: launcherUrl || DEFAULT_LAUNCHER_URL,
+      nftDid: nftId,
+      launcherSessionId,
+      locale
+    })]);
+    if (data?.error) {
+      throw new Error(data.error);
+    }
+    return {
+      launcherSession: data.launcherSession,
+      subscriptionURL
+    };
+  }, [locale]);
+  if (asyncState.loading) {
+    return /*#__PURE__*/_jsx(Chip, {
+      label: /*#__PURE__*/_jsxs(ChipLabel, {
+        children: [!isMobile && t('expiration.desktop.loading'), /*#__PURE__*/_jsx(CircularProgress, {
+          size: 16
+        })]
+      }),
+      variant: "success",
+      sx: {
+        cursor: 'pointer',
+        ...sx
+      },
+      ...rest
+    });
+  }
+  if (asyncState.error) {
+    console.error(asyncState.error);
+    return /*#__PURE__*/_jsx(Chip, {
+      label: /*#__PURE__*/_jsx(ChipLabel, {
+        children: t(`expiration.${typoKey}.loadFailed`)
+      }),
+      color: "error",
+      variant: "success",
+      sx: {
+        cursor: 'pointer',
+        ...sx
+      },
+      ...rest,
+      onClick: () => asyncState.retry()
+    });
+  }
+  const handlePopoverClick = event => {
+    setState({
+      popoverAnchorEl: event.currentTarget
+    });
+  };
+  const handlePopoverClose = () => {
+    setState({
+      popoverAnchorEl: null
+    });
+  };
+  const launcherSession = asyncState.value?.launcherSession;
+  let status = 'success';
+  if (['expired', 'terminated'].includes(asyncState.value?.launcherSession?.statusText)) {
+    status = 'error';
+  }
+  let validity = null;
+  if (launcherSession.expirationDate && !launcherSession.subscription) {
+    const validityMs = dayjs(launcherSession.expirationDate).diff(dayjs(), 'ms');
+    validity = t(`expiration.${typoKey}.tips.${status}`, {
+      validity: prettyMs(validityMs, {
+        locale: formatPrettyMsLocale(locale),
+        compact: true,
+        verbose: true
+      })
+    });
+    if (validityMs > 0 && validityMs <= ALERT_THRESHOLD_MS) {
+      status = 'warning';
+    }
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Chip, {
+      label: /*#__PURE__*/_jsx(ChipLabel, {
+        children: validity || launcherSession?.subscription?.product?.name || t('common.subscription')
+      }),
+      color: status,
+      variant: status !== 'success' ? 'contained' : 'outlined',
+      sx: {
+        cursor: 'pointer',
+        ...sx
+      },
+      ...rest,
+      onClick: handlePopoverClick
+    }), /*#__PURE__*/_jsx(Popover, {
+      id: "popover-info",
+      open: Boolean(state.popoverAnchorEl),
+      anchorEl: state.popoverAnchorEl,
+      onClose: handlePopoverClose,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'right'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
+      },
+      children: /*#__PURE__*/_jsx("iframe", {
+        ref: iframeRef,
+        title: t('common.subscription'),
+        width: "360px",
+        height: "600px",
+        style: {
+          border: 0
+        },
+        src: asyncState.value?.subscriptionURL
+      })
+    })]
+  });
+}
+SubscriptionBlocklet.propTypes = {
+  chainHost: PropTypes.string.isRequired,
+  nftId: PropTypes.string,
+  launcherSessionId: PropTypes.string,
+  sx: PropTypes.object,
+  retention: PropTypes.number,
+  launcherUrl: PropTypes.string.isRequired
+};
+SubscriptionBlocklet.defaultProps = {
+  sx: {},
+  retention: 0,
+  nftId: '',
+  launcherSessionId: ''
+};
+export default SubscriptionBlocklet;

package/es/subscription/chip-label.js

@@ -0,0 +1,21 @@
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import Box from '@mui/material/Box';
+import PropTypes from 'prop-types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function ChipLabel({
+  children
+}) {
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1
+    },
+    children: [/*#__PURE__*/_jsx(AccessTimeIcon, {
+      fontSize: "small"
+    }), children]
+  });
+}
+ChipLabel.propTypes = {
+  children: PropTypes.node.isRequired
+};

package/es/{subscription.js → subscription/server.js}

@@ -1,41 +1,26 @@
 import dayjs from '@abtnode/util/lib/dayjs';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
 import Popover from '@mui/material/Popover';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import prettyMs from 'pretty-ms-i18n';
 import PropTypes from 'prop-types';
 import { useRef } from 'react';
 import useAsyncRetry from 'react-use/lib/useAsyncRetry';
 import useSetState from 'react-use/lib/useSetState';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import { formatPrettyMsLocale, getAsset, getAssetExpiration, getSubscriptionURL } from './util';
+import { useNodeContext } from '../contexts/node';
+import { formatPrettyMsLocale, getSubscriptionUrlV2 } from '../util';
+import ChipLabel from './chip-label';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ALERT_THRESHOLD_MS = 30 * 24 * 60 * 60 * 1000;
 const DEFAULT_LAUNCHER_URL = 'https://launcher.arcblock.io/'; // 兼容: 旧版本的 blocklet.controller 没有 launcherUrl 字段
 
-// eslint-disable-next-line react/prop-types
-function ChipLabel({
-  children
-}) {
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 1
-    },
-    children: [/*#__PURE__*/_jsx(AccessTimeIcon, {
-      fontSize: "small"
-    }), children]
-  });
-}
-function Subscription({
+function SubscriptionServer({
   launcherUrl,
   chainHost,
   nftId,
-  retention,
+  launcherSessionId,
   ...props
 }) {
   const {
@@ -48,19 +33,32 @@ function Subscription({
   });
   const iframeRef = useRef(null);
   const isMobile = useMediaQuery(x => x.breakpoints.down('md'));
+  const node = useNodeContext();
   const {
     sx = {},
     ...rest
   } = props;
   const typoKey = isMobile ? 'mobile' : 'desktop';
   const asyncState = useAsyncRetry(async () => {
-    const [asset, subscriptionURL] = await Promise.all([getAsset(chainHost, nftId), getSubscriptionURL({
+    const [data, subscriptionURL] = await Promise.all([
+    // 新 Launch 的 Server 会有 launcherSessionId 信息，旧的 Server 只有 nftId
+    // 这里做兼容处理，优先使用 launcherSessionId, 如果没有则使用 nftId
+    node.api.getLauncherSession({
+      input: {
+        launcherSessionId: launcherSessionId || nftId,
+        launcherUrl
+      }
+    }), getSubscriptionUrlV2({
       launcherUrl: launcherUrl || DEFAULT_LAUNCHER_URL,
-      nftId,
+      nftDid: nftId,
+      launcherSessionId,
       locale
     })]);
+    if (data?.error) {
+      throw new Error(data.error);
+    }
     return {
-      asset,
+      launcherSession: data.launcherSession,
       subscriptionURL
     };
   }, [locale]);
@@ -95,7 +93,7 @@ function Subscription({
       onClick: () => asyncState.retry()
     });
   }
-  const expirationDate = getAssetExpiration(asyncState.value?.asset);
+  const expirationDate = asyncState.value?.launcherSession?.expirationDate;
   const isExpired = dayjs(expirationDate).isBefore(dayjs());
   const validityMs = dayjs(expirationDate).diff(dayjs(), 'ms');
   let status = 'success';
@@ -160,15 +158,18 @@ function Subscription({
     })]
   });
 }
-Subscription.propTypes = {
+SubscriptionServer.propTypes = {
   chainHost: PropTypes.string.isRequired,
-  nftId: PropTypes.string.isRequired,
+  nftId: PropTypes.string,
+  launcherSessionId: PropTypes.string,
   sx: PropTypes.object,
   retention: PropTypes.number,
   launcherUrl: PropTypes.string.isRequired
 };
-Subscription.defaultProps = {
+SubscriptionServer.defaultProps = {
   sx: {},
-  retention: 0
+  retention: 0,
+  nftId: '',
+  launcherSessionId: ''
 };
-export default Subscription;
+export default SubscriptionServer;

package/es/util/index.js

@@ -6,7 +6,6 @@ import filesize from 'filesize';
 import humanizeUrl from 'humanize-url';
 import isUrl from 'is-url';
 import get from 'lodash/get';
-import last from 'lodash/last';
 import trimEnd from 'lodash/trimEnd';
 import qs from 'querystring';
 import joinUrl from 'url-join';
@@ -531,9 +530,6 @@ export async function getAsset(chainHost, address) {
   }
   return state;
 }
-export function getAssetExpiration(asset) {
-  return last(get(asset, 'data.value.expirationDate', []));
-}
 
 /**
  * 检查url是否 未添加到 store list 中
@@ -621,11 +617,25 @@ export const sortDomains = domains => {
   });
 };
 export const formatMountPoint = value => normalizePathPrefix(urlPathFriendly(value));
-export const getRenewBlockletURL = ({
-  launcherUrl = '',
-  nftId = '',
-  locale = 'en'
-}) => joinUrl(launcherUrl, `/instances/${nftId}/renewal?locale=${locale}&return-url=${encodeURIComponent(window.location.href)}`);
+const getLauncherBaseURL = async launcherUrl => {
+  if (!launcherUrl) {
+    return '';
+  }
+  let baseUrl = launcherUrl;
+  try {
+    const {
+      data: appMeta
+    } = await axios.get(joinUrl(launcherUrl, '__blocklet__.js?type=json'), {
+      timeout: 5000
+    });
+    const mountPoint = appMeta.componentMountPoints?.find(item => item.did === 'z8iZkFBbrVQxZHvcWWB3Sa2TrfGmSeFz9MSU7');
+    const launcherUrlObj = new URL(launcherUrl);
+    baseUrl = joinUrl(launcherUrlObj.origin, mountPoint?.mountPoint);
+  } catch (error) {
+    console.error(error);
+  }
+  return baseUrl;
+};
 export const getSubscriptionURL = async ({
   launcherUrl = '',
   nftId = '',
@@ -649,6 +659,29 @@ export const getSubscriptionURL = async ({
   }
   return joinUrl(baseUrl, `/${nftId}/subscription?locale=${locale}&return-url=${encodeURIComponent(window.location.href)}`);
 };
+export const getSubscriptionUrlV2 = async ({
+  launcherUrl = '',
+  launcherSessionId = '',
+  nftDid,
+  locale = 'en'
+}) => {
+  if (!launcherUrl) {
+    return '';
+  }
+  const baseUrl = await getLauncherBaseURL(launcherUrl);
+  return joinUrl(baseUrl, `/embed/subscription?launcherSessionId=${launcherSessionId}&nftDid=${nftDid}&locale=${locale}`); // nftDid 是兼容字段
+};
+export const getManageSubscriptionURL = async ({
+  launcherUrl = '',
+  launcherSessionId = '',
+  locale = 'en'
+}) => {
+  if (!launcherUrl) {
+    return '';
+  }
+  const baseUrl = await getLauncherBaseURL(launcherUrl);
+  return joinUrl(baseUrl, `/embed/manage-subscription?launcherSessionId=${launcherSessionId}&locale=${locale}`);
+};
 export const nanoid = (length = 16) => [...Array(length)].map(() => Math.random().toString(36)[2]).join('');
 export const getSystemDomains = domains => domains.filter(x => x.isProtected);
 export const getLogoHash = logo => encodeURIComponent((logo || '').split('/').slice(-1)[0].slice(0, 7));

package/lib/blocklet/actions.js

@@ -33,7 +33,6 @@ var _util3 = require("./util");
 var _node = require("../contexts/node");
 var _confirm = _interopRequireDefault(require("../confirm"));
 var _icons = _interopRequireDefault(require("./icons"));
-var _blocklet = require("../contexts/blocklet");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 const _excluded = ["blocklet", "onStart", "onComplete", "variant", "hasPermission", "useBlockletUrlEvaluation"],
@@ -50,7 +49,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function BlockletActions(_ref) {
-  var _blocklet$controller, _blocklet$controller2;
+  var _blocklet$controller;
   let {
       blocklet,
       onStart,
@@ -74,14 +73,14 @@ function BlockletActions(_ref) {
     loading: recommendedUrlLoading,
     recommendedUrl
   } = useBlockletUrlEvaluation(blocklet);
-  const {
-    nftState
-  } = (0, _blocklet.useBlockletContext)();
   const inProgress = (0, _util.isInProgress)(blocklet.status);
-  let disableStart = (blocklet === null || blocklet === void 0 || (_blocklet$controller = blocklet.controller) === null || _blocklet$controller === void 0 || (_blocklet$controller = _blocklet$controller.status) === null || _blocklet$controller === void 0 ? void 0 : _blocklet$controller.value) === _constant.BLOCKLET_CONTROLLER_STATUS.suspended;
-  if (!(nftState !== null && nftState !== void 0 && nftState.expired) && (blocklet === null || blocklet === void 0 || (_blocklet$controller2 = blocklet.controller) === null || _blocklet$controller2 === void 0 || (_blocklet$controller2 = _blocklet$controller2.status) === null || _blocklet$controller2 === void 0 ? void 0 : _blocklet$controller2.reason) === _constant.SUSPENDED_REASON.expired) {
-    disableStart = false;
-  }
+  const disableStart = (blocklet === null || blocklet === void 0 || (_blocklet$controller = blocklet.controller) === null || _blocklet$controller === void 0 || (_blocklet$controller = _blocklet$controller.status) === null || _blocklet$controller === void 0 ? void 0 : _blocklet$controller.value) === _constant.BLOCKLET_CONTROLLER_STATUS.suspended;
+
+  // TODO: PaymentKitV2 过期恢复后需要能立即启动
+  // if (!nftState?.expired && blocklet?.controller?.status?.reason === SUSPENDED_REASON.expired) {
+  //   disableStart = false;
+  // }
+
   const {
     inService
   } = node;

package/lib/subscription/blocklet.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _dayjs = _interopRequireDefault(require("@abtnode/util/lib/dayjs"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _prettyMsI18n = _interopRequireDefault(require("pretty-ms-i18n"));
+var _react = require("react");
+var _useAsyncRetry = _interopRequireDefault(require("react-use/lib/useAsyncRetry"));
+var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
+var _node = require("../contexts/node");
+var _util = require("../util");
+var _chipLabel = _interopRequireDefault(require("./chip-label"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["launcherUrl", "chainHost", "nftId", "launcherSessionId"],
+  _excluded2 = ["sx"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const DEFAULT_LAUNCHER_URL = 'https://launcher.arcblock.io/'; // 兼容: 旧版本的 blocklet.controller 没有 launcherUrl 字段
+
+const ALERT_THRESHOLD_MS = 30 * 24 * 60 * 60 * 1000;
+function SubscriptionBlocklet(_ref) {
+  var _asyncState$value, _asyncState$value2, _launcherSession$subs, _asyncState$value3;
+  let {
+      launcherUrl,
+      chainHost,
+      nftId,
+      launcherSessionId
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const node = (0, _node.useNodeContext)();
+  const [state, setState] = (0, _useSetState.default)({
+    safeIframeRef: null,
+    popoverAnchorEl: null
+  });
+  const iframeRef = (0, _react.useRef)(null);
+  const isMobile = (0, _useMediaQuery.default)(x => x.breakpoints.down('md'));
+  const {
+      sx = {}
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded2);
+  const typoKey = isMobile ? 'mobile' : 'desktop';
+  const asyncState = (0, _useAsyncRetry.default)(async () => {
+    const [data, subscriptionURL] = await Promise.all([node.api.getLauncherSession({
+      input: {
+        launcherSessionId,
+        launcherUrl
+      }
+    }), (0, _util.getSubscriptionUrlV2)({
+      launcherUrl: launcherUrl || DEFAULT_LAUNCHER_URL,
+      nftDid: nftId,
+      launcherSessionId,
+      locale
+    })]);
+    if (data !== null && data !== void 0 && data.error) {
+      throw new Error(data.error);
+    }
+    return {
+      launcherSession: data.launcherSession,
+      subscriptionURL
+    };
+  }, [locale]);
+  if (asyncState.loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, _objectSpread({
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_chipLabel.default, {
+        children: [!isMobile && t('expiration.desktop.loading'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          size: 16
+        })]
+      }),
+      variant: "success",
+      sx: _objectSpread({
+        cursor: 'pointer'
+      }, sx)
+    }, rest));
+  }
+  if (asyncState.error) {
+    console.error(asyncState.error);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, _objectSpread(_objectSpread({
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chipLabel.default, {
+        children: t("expiration.".concat(typoKey, ".loadFailed"))
+      }),
+      color: "error",
+      variant: "success",
+      sx: _objectSpread({
+        cursor: 'pointer'
+      }, sx)
+    }, rest), {}, {
+      onClick: () => asyncState.retry()
+    }));
+  }
+  const handlePopoverClick = event => {
+    setState({
+      popoverAnchorEl: event.currentTarget
+    });
+  };
+  const handlePopoverClose = () => {
+    setState({
+      popoverAnchorEl: null
+    });
+  };
+  const launcherSession = (_asyncState$value = asyncState.value) === null || _asyncState$value === void 0 ? void 0 : _asyncState$value.launcherSession;
+  let status = 'success';
+  if (['expired', 'terminated'].includes((_asyncState$value2 = asyncState.value) === null || _asyncState$value2 === void 0 || (_asyncState$value2 = _asyncState$value2.launcherSession) === null || _asyncState$value2 === void 0 ? void 0 : _asyncState$value2.statusText)) {
+    status = 'error';
+  }
+  let validity = null;
+  if (launcherSession.expirationDate && !launcherSession.subscription) {
+    const validityMs = (0, _dayjs.default)(launcherSession.expirationDate).diff((0, _dayjs.default)(), 'ms');
+    validity = t("expiration.".concat(typoKey, ".tips.").concat(status), {
+      validity: (0, _prettyMsI18n.default)(validityMs, {
+        locale: (0, _util.formatPrettyMsLocale)(locale),
+        compact: true,
+        verbose: true
+      })
+    });
+    if (validityMs > 0 && validityMs <= ALERT_THRESHOLD_MS) {
+      status = 'warning';
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, _objectSpread(_objectSpread({
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chipLabel.default, {
+        children: validity || (launcherSession === null || launcherSession === void 0 || (_launcherSession$subs = launcherSession.subscription) === null || _launcherSession$subs === void 0 || (_launcherSession$subs = _launcherSession$subs.product) === null || _launcherSession$subs === void 0 ? void 0 : _launcherSession$subs.name) || t('common.subscription')
+      }),
+      color: status,
+      variant: status !== 'success' ? 'contained' : 'outlined',
+      sx: _objectSpread({
+        cursor: 'pointer'
+      }, sx)
+    }, rest), {}, {
+      onClick: handlePopoverClick
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+      id: "popover-info",
+      open: Boolean(state.popoverAnchorEl),
+      anchorEl: state.popoverAnchorEl,
+      onClose: handlePopoverClose,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'right'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+        ref: iframeRef,
+        title: t('common.subscription'),
+        width: "360px",
+        height: "600px",
+        style: {
+          border: 0
+        },
+        src: (_asyncState$value3 = asyncState.value) === null || _asyncState$value3 === void 0 ? void 0 : _asyncState$value3.subscriptionURL
+      })
+    })]
+  });
+}
+SubscriptionBlocklet.propTypes = {
+  chainHost: _propTypes.default.string.isRequired,
+  nftId: _propTypes.default.string,
+  launcherSessionId: _propTypes.default.string,
+  sx: _propTypes.default.object,
+  retention: _propTypes.default.number,
+  launcherUrl: _propTypes.default.string.isRequired
+};
+SubscriptionBlocklet.defaultProps = {
+  sx: {},
+  retention: 0,
+  nftId: '',
+  launcherSessionId: ''
+};
+var _default = exports.default = SubscriptionBlocklet;

package/lib/subscription/chip-label.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ChipLabel;
+var _AccessTime = _interopRequireDefault(require("@mui/icons-material/AccessTime"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ChipLabel(_ref) {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 1
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AccessTime.default, {
+      fontSize: "small"
+    }), children]
+  });
+}
+ChipLabel.propTypes = {
+  children: _propTypes.default.node.isRequired
+};

package/lib/{subscription.js → subscription/server.js}

@@ -6,20 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _dayjs = _interopRequireDefault(require("@abtnode/util/lib/dayjs"));
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _AccessTime = _interopRequireDefault(require("@mui/icons-material/AccessTime"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _prettyMsI18n = _interopRequireDefault(require("pretty-ms-i18n"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _useAsyncRetry = _interopRequireDefault(require("react-use/lib/useAsyncRetry"));
 var _useSetState = _interopRequireDefault(require("react-use/lib/useSetState"));
-var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
-var _util = require("./util");
+var _node = require("../contexts/node");
+var _util = require("../util");
+var _chipLabel = _interopRequireDefault(require("./chip-label"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["launcherUrl", "chainHost", "nftId", "retention"],
+const _excluded = ["launcherUrl", "chainHost", "nftId", "launcherSessionId"],
   _excluded2 = ["sx"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -32,31 +32,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const ALERT_THRESHOLD_MS = 30 * 24 * 60 * 60 * 1000;
 const DEFAULT_LAUNCHER_URL = 'https://launcher.arcblock.io/'; // 兼容: 旧版本的 blocklet.controller 没有 launcherUrl 字段
 
-// eslint-disable-next-line react/prop-types
-function ChipLabel(_ref) {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-    sx: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 1
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AccessTime.default, {
-      fontSize: "small"
-    }), children]
-  });
-}
-function Subscription(_ref2) {
+function SubscriptionServer(_ref) {
   var _asyncState$value, _asyncState$value2;
   let {
       launcherUrl,
       chainHost,
       nftId,
-      retention
-    } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded);
+      launcherSessionId
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const {
     t,
     locale
@@ -67,25 +51,38 @@ function Subscription(_ref2) {
   });
   const iframeRef = (0, _react.useRef)(null);
   const isMobile = (0, _useMediaQuery.default)(x => x.breakpoints.down('md'));
+  const node = (0, _node.useNodeContext)();
   const {
       sx = {}
     } = props,
     rest = _objectWithoutProperties(props, _excluded2);
   const typoKey = isMobile ? 'mobile' : 'desktop';
   const asyncState = (0, _useAsyncRetry.default)(async () => {
-    const [asset, subscriptionURL] = await Promise.all([(0, _util.getAsset)(chainHost, nftId), (0, _util.getSubscriptionURL)({
+    const [data, subscriptionURL] = await Promise.all([
+    // 新 Launch 的 Server 会有 launcherSessionId 信息，旧的 Server 只有 nftId
+    // 这里做兼容处理，优先使用 launcherSessionId, 如果没有则使用 nftId
+    node.api.getLauncherSession({
+      input: {
+        launcherSessionId: launcherSessionId || nftId,
+        launcherUrl
+      }
+    }), (0, _util.getSubscriptionUrlV2)({
       launcherUrl: launcherUrl || DEFAULT_LAUNCHER_URL,
-      nftId,
+      nftDid: nftId,
+      launcherSessionId,
       locale
     })]);
+    if (data !== null && data !== void 0 && data.error) {
+      throw new Error(data.error);
+    }
     return {
-      asset,
+      launcherSession: data.launcherSession,
       subscriptionURL
     };
   }, [locale]);
   if (asyncState.loading) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, _objectSpread({
-      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChipLabel, {
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_chipLabel.default, {
         children: [!isMobile && t('expiration.desktop.loading'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
           size: 16
         })]
@@ -99,7 +96,7 @@ function Subscription(_ref2) {
   if (asyncState.error) {
     console.error(asyncState.error);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, _objectSpread(_objectSpread({
-      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipLabel, {
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chipLabel.default, {
         children: t("expiration.".concat(typoKey, ".loadFailed"))
       }),
       color: "error",
@@ -111,7 +108,7 @@ function Subscription(_ref2) {
       onClick: () => asyncState.retry()
     }));
   }
-  const expirationDate = (0, _util.getAssetExpiration)((_asyncState$value = asyncState.value) === null || _asyncState$value === void 0 ? void 0 : _asyncState$value.asset);
+  const expirationDate = (_asyncState$value = asyncState.value) === null || _asyncState$value === void 0 || (_asyncState$value = _asyncState$value.launcherSession) === null || _asyncState$value === void 0 ? void 0 : _asyncState$value.expirationDate;
   const isExpired = (0, _dayjs.default)(expirationDate).isBefore((0, _dayjs.default)());
   const validityMs = (0, _dayjs.default)(expirationDate).diff((0, _dayjs.default)(), 'ms');
   let status = 'success';
@@ -133,7 +130,7 @@ function Subscription(_ref2) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, _objectSpread(_objectSpread({
-      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipLabel, {
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chipLabel.default, {
         children: t("expiration.".concat(typoKey, ".tips.").concat(status), {
           validity: (0, _prettyMsI18n.default)(validityMs, {
             locale: (0, _util.formatPrettyMsLocale)(locale),
@@ -175,15 +172,18 @@ function Subscription(_ref2) {
     })]
   });
 }
-Subscription.propTypes = {
+SubscriptionServer.propTypes = {
   chainHost: _propTypes.default.string.isRequired,
-  nftId: _propTypes.default.string.isRequired,
+  nftId: _propTypes.default.string,
+  launcherSessionId: _propTypes.default.string,
   sx: _propTypes.default.object,
   retention: _propTypes.default.number,
   launcherUrl: _propTypes.default.string.isRequired
 };
-Subscription.defaultProps = {
+SubscriptionServer.defaultProps = {
   sx: {},
-  retention: 0
+  retention: 0,
+  nftId: '',
+  launcherSessionId: ''
 };
-var _default = exports.default = Subscription;
+var _default = exports.default = SubscriptionServer;

package/lib/util/index.js

@@ -23,14 +23,13 @@ exports.formatUrl = void 0;
 exports.getAccessUrl = getAccessUrl;
 exports.getAccessibleUrl = void 0;
 exports.getAsset = getAsset;
-exports.getAssetExpiration = getAssetExpiration;
 exports.getBlockletLogoUrl = void 0;
 exports.getBlockletMetaUrl = getBlockletMetaUrl;
 exports.getBlockletUrl = getBlockletUrl;
 exports.getBlockletUrlParams = void 0;
 exports.getBlockletUrls = getBlockletUrls;
 exports.getExplorerLink = getExplorerLink;
-exports.getTransferAppLink = exports.getSystemDomains = exports.getSubscriptionURL = exports.getStoreList = exports.getRenewBlockletURL = exports.getPathPrefix = exports.getLogoHash = exports.getIssuePassportLink = exports.getInviteLink = void 0;
+exports.getTransferAppLink = exports.getSystemDomains = exports.getSubscriptionUrlV2 = exports.getSubscriptionURL = exports.getStoreList = exports.getPathPrefix = exports.getManageSubscriptionURL = exports.getLogoHash = exports.getIssuePassportLink = exports.getInviteLink = void 0;
 exports.getWebWalletUrl = getWebWalletUrl;
 exports.isNewStoreUrl = exports.isInstalling = exports.isDownloading = exports.isChrome = exports.isCertificateMatch = exports.isBlockletDev = exports.hasRequiredSteps = void 0;
 exports.isProtectedRole = isProtectedRole;
@@ -46,7 +45,6 @@ var _filesize = _interopRequireDefault(require("filesize"));
 var _humanizeUrl = _interopRequireDefault(require("humanize-url"));
 var _isUrl = _interopRequireDefault(require("is-url"));
 var _get = _interopRequireDefault(require("lodash/get"));
-var _last = _interopRequireDefault(require("lodash/last"));
 var _trimEnd = _interopRequireDefault(require("lodash/trimEnd"));
 var _querystring = _interopRequireDefault(require("querystring"));
 var _urlJoin = _interopRequireDefault(require("url-join"));
@@ -617,9 +615,6 @@ async function getAsset(chainHost, address) {
   }
   return state;
 }
-function getAssetExpiration(asset) {
-  return (0, _last.default)((0, _get.default)(asset, 'data.value.expirationDate', []));
-}
 
 /**
  * 检查url是否 未添加到 store list 中
@@ -715,33 +710,44 @@ const sortDomains = domains => {
 exports.sortDomains = sortDomains;
 const formatMountPoint = value => (0, _normalizePathPrefix.default)((0, _urlPathFriendly.default)(value));
 exports.formatMountPoint = formatMountPoint;
-const getRenewBlockletURL = _ref7 => {
-  let {
-    launcherUrl = '',
-    nftId = '',
-    locale = 'en'
-  } = _ref7;
-  return (0, _urlJoin.default)(launcherUrl, "/instances/".concat(nftId, "/renewal?locale=").concat(locale, "&return-url=").concat(encodeURIComponent(window.location.href)));
+const getLauncherBaseURL = async launcherUrl => {
+  if (!launcherUrl) {
+    return '';
+  }
+  let baseUrl = launcherUrl;
+  try {
+    var _appMeta$componentMou;
+    const {
+      data: appMeta
+    } = await _axios.default.get((0, _urlJoin.default)(launcherUrl, '__blocklet__.js?type=json'), {
+      timeout: 5000
+    });
+    const mountPoint = (_appMeta$componentMou = appMeta.componentMountPoints) === null || _appMeta$componentMou === void 0 ? void 0 : _appMeta$componentMou.find(item => item.did === 'z8iZkFBbrVQxZHvcWWB3Sa2TrfGmSeFz9MSU7');
+    const launcherUrlObj = new URL(launcherUrl);
+    baseUrl = (0, _urlJoin.default)(launcherUrlObj.origin, mountPoint === null || mountPoint === void 0 ? void 0 : mountPoint.mountPoint);
+  } catch (error) {
+    console.error(error);
+  }
+  return baseUrl;
 };
-exports.getRenewBlockletURL = getRenewBlockletURL;
-const getSubscriptionURL = async _ref8 => {
+const getSubscriptionURL = async _ref7 => {
   let {
     launcherUrl = '',
     nftId = '',
     locale = 'en'
-  } = _ref8;
+  } = _ref7;
   if (!launcherUrl) {
     return '';
   }
   let baseUrl = (0, _urlJoin.default)(launcherUrl, '/instances');
   try {
-    var _appMeta$componentMou;
+    var _appMeta$componentMou2;
     const {
       data: appMeta
     } = await _axios.default.get((0, _urlJoin.default)(launcherUrl, '__blocklet__.js?type=json'), {
       timeout: 5000
     });
-    const mountPoint = (_appMeta$componentMou = appMeta.componentMountPoints) === null || _appMeta$componentMou === void 0 ? void 0 : _appMeta$componentMou.find(item => item.did === 'z8iZy4P83i6AgnNdNUexsh2kBcsDHoqcwPavn');
+    const mountPoint = (_appMeta$componentMou2 = appMeta.componentMountPoints) === null || _appMeta$componentMou2 === void 0 ? void 0 : _appMeta$componentMou2.find(item => item.did === 'z8iZy4P83i6AgnNdNUexsh2kBcsDHoqcwPavn');
     const launcherUrlObj = new URL(launcherUrl);
     baseUrl = (0, _urlJoin.default)(launcherUrlObj.origin, mountPoint === null || mountPoint === void 0 ? void 0 : mountPoint.mountPoint, '/nfts');
   } catch (error) {
@@ -750,6 +756,33 @@ const getSubscriptionURL = async _ref8 => {
   return (0, _urlJoin.default)(baseUrl, "/".concat(nftId, "/subscription?locale=").concat(locale, "&return-url=").concat(encodeURIComponent(window.location.href)));
 };
 exports.getSubscriptionURL = getSubscriptionURL;
+const getSubscriptionUrlV2 = async _ref8 => {
+  let {
+    launcherUrl = '',
+    launcherSessionId = '',
+    nftDid,
+    locale = 'en'
+  } = _ref8;
+  if (!launcherUrl) {
+    return '';
+  }
+  const baseUrl = await getLauncherBaseURL(launcherUrl);
+  return (0, _urlJoin.default)(baseUrl, "/embed/subscription?launcherSessionId=".concat(launcherSessionId, "&nftDid=").concat(nftDid, "&locale=").concat(locale)); // nftDid 是兼容字段
+};
+exports.getSubscriptionUrlV2 = getSubscriptionUrlV2;
+const getManageSubscriptionURL = async _ref9 => {
+  let {
+    launcherUrl = '',
+    launcherSessionId = '',
+    locale = 'en'
+  } = _ref9;
+  if (!launcherUrl) {
+    return '';
+  }
+  const baseUrl = await getLauncherBaseURL(launcherUrl);
+  return (0, _urlJoin.default)(baseUrl, "/embed/manage-subscription?launcherSessionId=".concat(launcherSessionId, "&locale=").concat(locale));
+};
+exports.getManageSubscriptionURL = getManageSubscriptionURL;
 const nanoid = exports.nanoid = function nanoid() {
   let length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 16;
   return [...Array(length)].map(() => Math.random().toString(36)[2]).join('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.25-beta-85e265d1",
+  "version": "1.16.25-beta-bc165d9b",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -28,9 +28,9 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.25-beta-85e265d1",
-    "@abtnode/constant": "1.16.25-beta-85e265d1",
-    "@abtnode/util": "1.16.25-beta-85e265d1",
+    "@abtnode/auth": "1.16.25-beta-bc165d9b",
+    "@abtnode/constant": "1.16.25-beta-bc165d9b",
+    "@abtnode/util": "1.16.25-beta-bc165d9b",
     "@ahooksjs/use-url-state": "^3.5.1",
     "@arcblock/did": "^1.18.113",
     "@arcblock/did-connect": "^2.9.63",
@@ -40,10 +40,10 @@
     "@arcblock/react-hooks": "^2.9.63",
     "@arcblock/terminal": "^2.9.63",
     "@arcblock/ux": "^2.9.63",
-    "@blocklet/constant": "1.16.25-beta-85e265d1",
+    "@blocklet/constant": "1.16.25-beta-bc165d9b",
     "@blocklet/launcher-layout": "2.2.66",
     "@blocklet/list": "^0.12.79",
-    "@blocklet/meta": "1.16.25-beta-85e265d1",
+    "@blocklet/meta": "1.16.25-beta-bc165d9b",
     "@blocklet/ui-react": "^2.9.63",
     "@blocklet/uploader": "^0.0.75",
     "@emotion/react": "^11.10.4",
@@ -107,7 +107,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0"
   },
-  "gitHead": "ea2dbf135591636c3d1899374b99d66eee61c7d2",
+  "gitHead": "a7895ed39e47c8c6bd10d32317804cc1904714ef",
   "exports": {
     ".": {
       "import": "./es/index.js",