@abtnode/ux 1.16.19-beta-beb58af7 → 1.16.19-beta-0c8ccc95

package/es/blocklet/component/index.js

@@ -276,26 +276,39 @@ function ComponentItem({
         ancestors: ancestors
       }), /*#__PURE__*/_jsxs(Box, {
         ml: "16px",
-        children: [/*#__PURE__*/_jsx(Box, {
-          className: "component-name",
+        children: [/*#__PURE__*/_jsxs(Box, {
+          className: "component-header",
           onClick: () => setComponentInfo(blocklet),
-          children: getDisplayName(blocklet, true)
+          children: [/*#__PURE__*/_jsx(Box, {
+            className: "component-name",
+            children: getDisplayName(blocklet, true)
+          }), /*#__PURE__*/_jsx(Box, {
+            className: "component-version",
+            children: blocklet?.meta?.version
+          })]
         }), /*#__PURE__*/_jsxs(Box, {
           display: "flex",
           alignItems: "center",
-          children: [!hasStartEngine(blocklet.meta) && /*#__PURE__*/_jsx(ResourceType, {
-            blocklet: blocklet
-          }), /*#__PURE__*/_jsx(BlockletMode, {
+          sx: {
+            mt: '2px',
+            ml: -0.5
+          },
+          children: [status !== 'unknown' && /*#__PURE__*/_jsx(BlockletStatus, {
             style: {
               marginLeft: 4
             },
-            mode: blocklet.mode || ''
-          }), status !== 'unknown' && /*#__PURE__*/_jsx(BlockletStatus, {
+            status: status,
+            source: blocklet.source
+          }), !hasStartEngine(blocklet.meta) && /*#__PURE__*/_jsx(ResourceType, {
             style: {
               marginLeft: 4
             },
-            status: status,
-            source: blocklet.source
+            blocklet: blocklet
+          }), /*#__PURE__*/_jsx(BlockletMode, {
+            style: {
+              marginLeft: 4
+            },
+            mode: blocklet.mode || ''
           }), !!blocklet.dependents?.length && /*#__PURE__*/_jsx(Tooltip, {
             title: [`${t('common.dependents')}: `, blocklet.dependents.map(x => /*#__PURE__*/_jsx(Box, {
               pl: 1,
@@ -497,10 +510,21 @@ const StyledBadge = styled(Badge)`
   }
 `;
 const StyledComponentRow = styled(Box)`
+  .component-header {
+    display: flex;
+    align-items: center;
+    align-items: flex-end;
+    cursor: pointer;
+  }
   .component-name {
     color: #222;
     font-size: 16px;
-    cursor: pointer;
+  }
+  .component-version {
+    color: #999;
+    font-size: 12px;
+    margin-left: 4px;
+    transform: translateY(-1px);
   }
 `;
 export default function BlockletComponent({

package/es/locales/en.js

@@ -1594,13 +1594,23 @@ module.exports = {
     federated: 'Federated Login'
   },
   expiration: {
-    tips: {
-      success: 'Subscription will expire after {validity}',
-      warning: 'Subscription will expire after {validity}',
-      error: 'Subscription Expired'
+    mobile: {
+      tips: {
+        success: '{validity}',
+        warning: '{validity}',
+        error: 'Expired'
+      },
+      loadFailed: 'Retry!'
     },
-    loading: 'Load subscription...',
-    loadFailed: 'Failed to load subscription info, please retry!'
+    desktop: {
+      tips: {
+        success: 'Subscription will expire after {validity}',
+        warning: 'Subscription will expire after {validity}',
+        error: 'Subscription Expired'
+      },
+      loading: 'Load subscription...',
+      loadFailed: 'Failed to load subscription info, please retry!'
+    }
   },
   analytics: {
     trend: 'Trends',

package/es/locales/zh.js

@@ -1598,13 +1598,23 @@ module.exports = {
     federated: '统一登录'
   },
   expiration: {
-    tips: {
-      success: '订阅将在{validity}后到期',
-      warning: '订阅将在{validity}后到期',
-      error: '订阅已过期'
+    mobile: {
+      tips: {
+        success: '{validity}',
+        warning: '{validity}',
+        error: '订阅已过期'
+      },
+      loadFailed: '请重试!'
     },
-    loadFailed: '加载订阅信息失败，请重试!',
-    loading: '加载订阅信息...'
+    desktop: {
+      tips: {
+        success: '订阅将在{validity}后到期',
+        warning: '订阅将在{validity}后到期',
+        error: '订阅已过期'
+      },
+      loadFailed: '加载订阅信息失败，请重试!',
+      loading: '加载订阅信息...'
+    }
   },
   analytics: {
     trend: '趋势',

package/es/subscription.js

@@ -10,6 +10,7 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,6 +18,21 @@ import { 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({
   launcherUrl,
   chainHost,
@@ -33,10 +49,12 @@ function Subscription({
     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 [asset, subscriptionURL] = await Promise.all([getAsset(chainHost, nftId), getSubscriptionURL({
       launcherUrl: launcherUrl || DEFAULT_LAUNCHER_URL,
@@ -49,24 +67,26 @@ function Subscription({
     };
   }, [locale]);
   if (asyncState.loading) {
-    return /*#__PURE__*/_jsxs(Box, {
+    return /*#__PURE__*/_jsx(Chip, {
+      label: /*#__PURE__*/_jsxs(ChipLabel, {
+        children: [!isMobile && t('expiration.desktop.loading'), /*#__PURE__*/_jsx(CircularProgress, {
+          size: 16
+        })]
+      }),
+      variant: "success",
       sx: {
-        display: 'flex',
-        alignItems: 'center',
-        color: 'grey',
-        gap: 1,
+        cursor: 'pointer',
         ...sx
       },
-      ...rest,
-      children: [/*#__PURE__*/_jsx(CircularProgress, {
-        size: 16
-      }), t('expiration.loading')]
+      ...rest
     });
   }
   if (asyncState.error) {
     console.error(asyncState.error);
     return /*#__PURE__*/_jsx(Chip, {
-      label: t('expiration.loadFailed'),
+      label: /*#__PURE__*/_jsx(ChipLabel, {
+        children: t(`expiration.${typoKey}.loadFailed`)
+      }),
       color: "error",
       variant: "success",
       sx: {
@@ -99,23 +119,14 @@ function Subscription({
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Chip, {
-      label: /*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: 'flex',
-          alignItems: 'center'
-        },
-        children: [/*#__PURE__*/_jsx(AccessTimeIcon, {
-          sx: {
-            mr: '4px'
-          },
-          fontSize: "small"
-        }), t(`expiration.tips.${status}`, {
+      label: /*#__PURE__*/_jsx(ChipLabel, {
+        children: t(`expiration.${typoKey}.tips.${status}`, {
           validity: prettyMs(validityMs, {
             locale: formatPrettyMsLocale(locale),
             compact: true,
             verbose: true
           })
-        })]
+        })
       }),
       color: status,
       variant: status !== 'success' ? 'contained' : 'outlined',

package/lib/blocklet/component/index.js

@@ -139,7 +139,7 @@ const getComponentName = (componentId, app) => {
   return names.join(' / ');
 };
 function ComponentItem(_ref) {
-  var _blocklet$dependents, _blocklet$meta$resour, _blocklet$dependents2, _blocklet$dependents3;
+  var _blocklet$dependents, _blocklet$meta$resour, _blocklet$dependents2, _blocklet$meta, _blocklet$dependents3;
   let {
     blocklet,
     ancestors,
@@ -299,26 +299,39 @@ function ComponentItem(_ref) {
         ancestors: ancestors
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
         ml: "16px",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-          className: "component-name",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          className: "component-header",
           onClick: () => setComponentInfo(blocklet),
-          children: (0, _util.getDisplayName)(blocklet, true)
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "component-name",
+            children: (0, _util.getDisplayName)(blocklet, true)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            className: "component-version",
+            children: blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.version
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
           display: "flex",
           alignItems: "center",
-          children: [!(0, _util.hasStartEngine)(blocklet.meta) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_resourceType.default, {
-            blocklet: blocklet
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mode.default, {
+          sx: {
+            mt: '2px',
+            ml: -0.5
+          },
+          children: [status !== 'unknown' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_status.default, {
             style: {
               marginLeft: 4
             },
-            mode: blocklet.mode || ''
-          }), status !== 'unknown' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_status.default, {
+            status: status,
+            source: blocklet.source
+          }), !(0, _util.hasStartEngine)(blocklet.meta) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_resourceType.default, {
             style: {
               marginLeft: 4
             },
-            status: status,
-            source: blocklet.source
+            blocklet: blocklet
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_mode.default, {
+            style: {
+              marginLeft: 4
+            },
+            mode: blocklet.mode || ''
           }), !!((_blocklet$dependents3 = blocklet.dependents) !== null && _blocklet$dependents3 !== void 0 && _blocklet$dependents3.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
             title: ["".concat(t('common.dependents'), ": "), blocklet.dependents.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
               pl: 1,
@@ -517,7 +530,7 @@ ComponentItem.defaultProps = {
   app: null
 };
 const StyledBadge = (0, _styled.default)(_Badge.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .BaseBadge-badge {\n    top: ", "px;\n    right: ", "px;\n  }\n"])), props => props.top * 8 || 6, props => props.right * 8 || 6);
-const StyledComponentRow = (0, _styled.default)(_Box.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .component-name {\n    color: #222;\n    font-size: 16px;\n    cursor: pointer;\n  }\n"])));
+const StyledComponentRow = (0, _styled.default)(_Box.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .component-header {\n    display: flex;\n    align-items: center;\n    align-items: flex-end;\n    cursor: pointer;\n  }\n  .component-name {\n    color: #222;\n    font-size: 16px;\n  }\n  .component-version {\n    color: #999;\n    font-size: 12px;\n    margin-left: 4px;\n    transform: translateY(-1px);\n  }\n"])));
 function BlockletComponent(_ref4) {
   let {
       blocklet,

package/lib/locales/en.js

@@ -1596,13 +1596,23 @@ module.exports = {
     federated: 'Federated Login'
   },
   expiration: {
-    tips: {
-      success: 'Subscription will expire after {validity}',
-      warning: 'Subscription will expire after {validity}',
-      error: 'Subscription Expired'
+    mobile: {
+      tips: {
+        success: '{validity}',
+        warning: '{validity}',
+        error: 'Expired'
+      },
+      loadFailed: 'Retry!'
     },
-    loading: 'Load subscription...',
-    loadFailed: 'Failed to load subscription info, please retry!'
+    desktop: {
+      tips: {
+        success: 'Subscription will expire after {validity}',
+        warning: 'Subscription will expire after {validity}',
+        error: 'Subscription Expired'
+      },
+      loading: 'Load subscription...',
+      loadFailed: 'Failed to load subscription info, please retry!'
+    }
   },
   analytics: {
     trend: 'Trends',

package/lib/locales/zh.js

@@ -1600,13 +1600,23 @@ module.exports = {
     federated: '统一登录'
   },
   expiration: {
-    tips: {
-      success: '订阅将在{validity}后到期',
-      warning: '订阅将在{validity}后到期',
-      error: '订阅已过期'
+    mobile: {
+      tips: {
+        success: '{validity}',
+        warning: '{validity}',
+        error: '订阅已过期'
+      },
+      loadFailed: '请重试!'
     },
-    loadFailed: '加载订阅信息失败，请重试!',
-    loading: '加载订阅信息...'
+    desktop: {
+      tips: {
+        success: '订阅将在{validity}后到期',
+        warning: '订阅将在{validity}后到期',
+        error: '订阅已过期'
+      },
+      loadFailed: '加载订阅信息失败，请重试!',
+      loading: '加载订阅信息...'
+    }
   },
   analytics: {
     trend: '趋势',

package/lib/subscription.js

@@ -16,6 +16,7 @@ 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 _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["launcherUrl", "chainHost", "nftId", "retention"],
@@ -31,15 +32,31 @@ 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 字段
 
-function Subscription(_ref) {
+// 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) {
   var _asyncState$value, _asyncState$value2;
   let {
       launcherUrl,
       chainHost,
       nftId,
       retention
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
   const {
     t,
     locale
@@ -49,10 +66,12 @@ function Subscription(_ref) {
     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 [asset, subscriptionURL] = await Promise.all([(0, _util.getAsset)(chainHost, nftId), (0, _util.getSubscriptionURL)({
       launcherUrl: launcherUrl || DEFAULT_LAUNCHER_URL,
@@ -65,23 +84,24 @@ function Subscription(_ref) {
     };
   }, [locale]);
   if (asyncState.loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, _objectSpread(_objectSpread({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, _objectSpread({
+      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChipLabel, {
+        children: [!isMobile && t('expiration.desktop.loading'), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          size: 16
+        })]
+      }),
+      variant: "success",
       sx: _objectSpread({
-        display: 'flex',
-        alignItems: 'center',
-        color: 'grey',
-        gap: 1
+        cursor: 'pointer'
       }, sx)
-    }, rest), {}, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
-        size: 16
-      }), t('expiration.loading')]
-    }));
+    }, rest));
   }
   if (asyncState.error) {
     console.error(asyncState.error);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, _objectSpread(_objectSpread({
-      label: t('expiration.loadFailed'),
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipLabel, {
+        children: t("expiration.".concat(typoKey, ".loadFailed"))
+      }),
       color: "error",
       variant: "success",
       sx: _objectSpread({
@@ -113,23 +133,14 @@ function Subscription(_ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, _objectSpread(_objectSpread({
-      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-        sx: {
-          display: 'flex',
-          alignItems: 'center'
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AccessTime.default, {
-          sx: {
-            mr: '4px'
-          },
-          fontSize: "small"
-        }), t("expiration.tips.".concat(status), {
+      label: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipLabel, {
+        children: t("expiration.".concat(typoKey, ".tips.").concat(status), {
           validity: (0, _prettyMsI18n.default)(validityMs, {
             locale: (0, _util.formatPrettyMsLocale)(locale),
             compact: true,
             verbose: true
           })
-        })]
+        })
       }),
       color: status,
       variant: status !== 'success' ? 'contained' : 'outlined',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.19-beta-beb58af7",
+  "version": "1.16.19-beta-0c8ccc95",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -27,24 +27,24 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.19-beta-beb58af7",
-    "@abtnode/constant": "1.16.19-beta-beb58af7",
-    "@abtnode/util": "1.16.19-beta-beb58af7",
+    "@abtnode/auth": "1.16.19-beta-0c8ccc95",
+    "@abtnode/constant": "1.16.19-beta-0c8ccc95",
+    "@abtnode/util": "1.16.19-beta-0c8ccc95",
     "@ahooksjs/use-url-state": "^3.5.1",
     "@arcblock/did": "^1.18.101",
-    "@arcblock/did-connect": "^2.8.17",
+    "@arcblock/did-connect": "^2.8.18",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.8.17",
-    "@arcblock/nft-display": "2.8.17",
-    "@arcblock/react-hooks": "^2.8.17",
-    "@arcblock/terminal": "^2.8.17",
-    "@arcblock/ux": "^2.8.17",
-    "@blocklet/constant": "1.16.19-beta-beb58af7",
-    "@blocklet/launcher-layout": "2.2.43",
-    "@blocklet/list": "^0.12.53",
-    "@blocklet/meta": "1.16.19-beta-beb58af7",
-    "@blocklet/ui-react": "^2.8.17",
-    "@blocklet/uploader": "^0.0.45",
+    "@arcblock/icons": "^2.8.18",
+    "@arcblock/nft-display": "2.8.18",
+    "@arcblock/react-hooks": "^2.8.18",
+    "@arcblock/terminal": "^2.8.18",
+    "@arcblock/ux": "^2.8.18",
+    "@blocklet/constant": "1.16.19-beta-0c8ccc95",
+    "@blocklet/launcher-layout": "2.2.44",
+    "@blocklet/list": "^0.12.54",
+    "@blocklet/meta": "1.16.19-beta-0c8ccc95",
+    "@blocklet/ui-react": "^2.8.18",
+    "@blocklet/uploader": "^0.0.47",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@iconify/react": "^4.0.0",
@@ -100,7 +100,7 @@
     "babel-plugin-inline-react-svg": "^1.1.2",
     "glob": "^10.3.3"
   },
-  "gitHead": "7b56e521b292c57251fc9f35c96dde4957f4c010",
+  "gitHead": "ac7746e282b6690a4ff8487c8e43a7055e383b15",
   "exports": {
     ".": {
       "import": "./es/index.js",