@arcblock/ux 2.1.42 → 2.1.45

package/lib/CodeBlock/index.js

@@ -148,7 +148,6 @@ function CodeBlock(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_IconButton.default, {
       className: "copy-button",
       onClick: onCopy,
-      tabIndex: "-1",
       color: "primary",
       disabled: copied,
       children: [!copied && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCopy.default, {
@@ -181,4 +180,4 @@ const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monos
 const Pre = _styledComponents.default.pre.withConfig({
   displayName: "CodeBlock__Pre",
   componentId: "sc-1bpapaq-0"
-})(["font-family:", ";display:block;font-size:14px;line-height:1.42857143;margin:0 0 32px;word-break:break-word;word-wrap:break-word;text-align:left;border-radius:5px;border:1px solid #dedede;background:#222;color:#fff;position:relative;.codeblock__inner{display:block;width:100%;max-height:46.25rem;overflow:scroll;}.copy-button{display:none;position:absolute;top:8px;right:24px;padding:4px;border-radius:4px;&,&:hover,&.Mui-disabled{background:", ";}}&:hover{.copy-button{display:block;}}code{counter-reset:line;counter-increment:line;padding:16px;font-family:", ";color:#fff;*{font-family:", ";}}.hljs *{white-space:normal;}"], fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);
+})(["font-family:", ";display:block;font-size:14px;line-height:1.42857143;margin:0 0 32px;word-break:break-word;word-wrap:break-word;text-align:left;border-radius:5px;border:1px solid #dedede;background:#222;color:#fff;position:relative;.codeblock__inner{display:block;width:100%;max-height:46.25rem;overflow:scroll;}.copy-button{display:none;position:absolute;top:8px;right:24px;padding:4px;border-radius:4px;&,&:hover,&.Mui-disabled{background:", ";}}&:hover{.copy-button{display:flex;}}code{counter-reset:line;counter-increment:line;padding:16px;font-family:", ";color:#fff;*{font-family:", ";}}.hljs *{white-space:normal;}"], fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);

package/lib/CountDown/index.js

@@ -83,8 +83,8 @@ function FixWidthNumber(_ref) {
 
 class CountDown extends _react.Component {
   constructor(props) {
+    super(props);
     const newProps = (0, _Util.mergeProps)(props, CountDown, ['dark', 'endTime', 'style']);
-    super(newProps);
     this.state = getRemaining(newProps.endTime);
     this.timer = null;
   }

package/lib/Datatable/index.js

@@ -56,6 +56,24 @@ function Datatable(_ref) {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ReDatatable, _objectSpread({}, props))
   });
 }
+
+const fixCellProp = (tempObj, cellProps) => {
+  const cellStyle = {};
+
+  if (tempObj.align) {
+    cellProps.className = (0, _clsx.default)(cellProps.className, "pc-align-".concat(tempObj.align));
+  }
+
+  if (tempObj.verticalKeyAlign) {
+    cellProps.className = (0, _clsx.default)(cellProps.className, "vertical-align-".concat(tempObj.verticalKeyAlign));
+  }
+
+  if (tempObj.minWidth) {
+    cellStyle.minWidth = tempObj.minWidth;
+  }
+
+  cellProps.style = Object.assign({}, cellProps.style, cellStyle);
+};
 /**
  * @param {Object} props.options The options of mui-datatable，detail see https://github.com/gregnb/mui-datatables/tree/b8d2eee6af4589d254b40918e5d7e70b1ee4baca
  * @param {Array} props.customButtons Custom buttons for toolbar
@@ -147,14 +165,7 @@ function ReDatatable(_ref2) {
         cellProps.width = tempObj.width;
       }
 
-      if (tempObj.align) {
-        cellProps.className = (0, _clsx.default)(cellProps.className, "pc-align-".concat(tempObj.align));
-      }
-
-      if (tempObj.verticalKeyAlign) {
-        cellProps.className = (0, _clsx.default)(cellProps.className, "vertical-align-".concat(tempObj.verticalKeyAlign));
-      }
-
+      fixCellProp(tempObj, cellProps);
       return cellProps;
     }; // Prevent memory xie caused by recursive forwarding of setCellHeaderProps functions
 
@@ -171,14 +182,7 @@ function ReDatatable(_ref2) {
           cellProps = _objectSpread(_objectSpread({}, cellProps), setCellProps(...arguments) || {});
         }
 
-        if (tempObj.align) {
-          cellProps.className = (0, _clsx.default)(cellProps.className, "pc-align-".concat(tempObj.align));
-        }
-
-        if (tempObj.verticalKeyAlign) {
-          cellProps.className = (0, _clsx.default)(cellProps.className, "vertical-align-".concat(tempObj.verticalKeyAlign));
-        }
-
+        fixCellProp(tempObj, cellProps);
         return cellProps;
       };
 

package/lib/Footer/index.js

@@ -31,8 +31,9 @@ function Footer(props) {
     brand,
     dark
   } = newProps;
-  const endYear = new Date().getFullYear();
-  const copyYear = endYear === copyStart ? endYear : "".concat(copyStart, "-").concat(endYear);
+  const endYearString = "".concat(new Date().getFullYear());
+  const copyStartString = "".concat(copyStart);
+  const copyYear = endYearString === copyStartString ? endYearString : "".concat(copyStartString, "-").concat(endYearString);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     className: className,
     style: style,
@@ -73,7 +74,7 @@ function Footer(props) {
 Footer.propTypes = {
   dark: _propTypes.default.bool,
   className: _propTypes.default.string,
-  copyStart: _propTypes.default.string,
+  copyStart: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   brand: _propTypes.default.string,
   style: _propTypes.default.object
 };

package/lib/InfoRow/index.js

@@ -74,7 +74,7 @@ InfoRow.defaultProps = {
     const resetName = name.split(' ').map(x => (0, _upperFirst.default)((0, _camelCase.default)(x))).join(' ');
     return typeof name === 'string' ? resetName : name;
   },
-  valueComponent: 'p',
+  valueComponent: 'div',
   layout: 'horizontal'
 };
 

package/lib/Metric/index.js

@@ -31,7 +31,7 @@ function Metric(_ref) {
       className: "metric__image",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
         name: icon,
-        alt: name,
+        alt: typeof name === 'string' ? name : '',
         size: 30,
         prefix: prefix,
         color: "#222222"
@@ -59,7 +59,7 @@ function Metric(_ref) {
 Metric.propTypes = {
   icon: _propTypes.default.string.isRequired,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
-  name: _propTypes.default.string.isRequired,
+  name: _propTypes.default.node.isRequired,
   animated: _propTypes.default.bool,
   url: _propTypes.default.string,
   LinkComponent: _propTypes.default.any,

package/lib/NFTDisplay/index.js

@@ -114,9 +114,10 @@ function NFTDisplay(_ref) {
     children: children
   }));
 
-  try {
-    const parsed = (0, _react.useRef)(data); // 如果是 raw data 先解析
+  const parsed = (0, _react.useRef)(data);
 
+  try {
+    // 如果是 raw data 先解析
     if (typeof parsed.current === 'string') {
       parsed.current = JSON.parse(data); // console.log('[debug] parse data')
     }
@@ -208,7 +209,7 @@ function NFTDisplay(_ref) {
               const svg = _buffer.Buffer.from(buffer).toString('utf8');
 
               if (checkSvg && !(0, _isSvg.default)(svg)) {
-                throw new Error("Invalid SVG: ".concat(svg));
+                throw new Error('Invalid SVG of type svg_gzipped');
               }
 
               const Embedder = getSvgEmbedder(preferredSvgEmbedder);
@@ -220,7 +221,7 @@ function NFTDisplay(_ref) {
           case 'svg':
             {
               if (checkSvg && !(0, _isSvg.default)(content)) {
-                throw new Error("Invalid SVG: ".concat(content));
+                throw new Error('Invalid SVG of type svg');
               }
 
               const Embedder = getSvgEmbedder(preferredSvgEmbedder);
@@ -246,7 +247,12 @@ function NFTDisplay(_ref) {
       children: [(state.loading || !minimumLoadingReady) && (renderLoading ? renderLoading() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.default, {})), renderNFT()]
     }));
   } catch (e) {
-    console.error(e);
+    var _parsed$current;
+
+    console.error(e === null || e === void 0 ? void 0 : e.message, {
+      nftId: address,
+      vcId: parsed === null || parsed === void 0 ? void 0 : (_parsed$current = parsed.current) === null || _parsed$current === void 0 ? void 0 : _parsed$current.vcId
+    });
     return wrapRoot(renderError ? renderError() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_broken.default, {}));
   }
 }

package/lib/PricingTable/PricingPlan.js

@@ -26,7 +26,7 @@ function PricingPlan(_ref) {
     plan
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PlanCard, {
-    shadow: true,
+    $shadow: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "card-header",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -77,4 +77,4 @@ PricingPlan.propTypes = {
 const PlanCard = (0, _styledComponents.default)(_Card.default).withConfig({
   displayName: "PricingPlan__PlanCard",
   componentId: "sc-11tuq1x-0"
-})(["height:500px;display:flex;flex-direction:column;@media (max-width:320px){margin-top:20px;}&&{", "}.card-header{height:80px;background-color:#f1fbfb;display:flex;flex-flow:column;align-items:center;justify-content:center;.title{font-size:18px;font-weight:600;text-align:center;color:#404040;margin:0;}}.card-content{display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex-grow:1;}.plan-content{display:flex;flex-direction:column;flex-grow:1;.plan-pricing{display:flex;justify-content:center;align-items:baseline;margin-bottom:12px;color:#4e6af6;text-align:center;}.price-number{font-size:30px;font-weight:600;color:#4e6af6;}.plan-services strong{color:#4e6af6;font-weight:500;}}.plan-actions{width:100%;}"], props => props.shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)');
+})(["height:500px;display:flex;flex-direction:column;@media (max-width:320px){margin-top:20px;}&&{", "}.card-header{height:80px;background-color:#f1fbfb;display:flex;flex-flow:column;align-items:center;justify-content:center;.title{font-size:18px;font-weight:600;text-align:center;color:#404040;margin:0;}}.card-content{display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex-grow:1;}.plan-content{display:flex;flex-direction:column;flex-grow:1;.plan-pricing{display:flex;justify-content:center;align-items:baseline;margin-bottom:12px;color:#4e6af6;text-align:center;}.price-number{font-size:30px;font-weight:600;color:#4e6af6;}.plan-services strong{color:#4e6af6;font-weight:500;}}.plan-actions{width:100%;}"], props => props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)');

package/lib/PricingTable/index.js

@@ -29,7 +29,10 @@ function PricingTable(_ref) {
         container: true,
         spacing: 2,
         justifyContent: "center",
-        children: plans.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+        children: plans.map((x, index) =>
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        (0, _jsxRuntime.jsx)(_Grid.default, {
           item: true,
           className: "plan-item",
           xs: 12,
@@ -38,7 +41,7 @@ function PricingTable(_ref) {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PricingPlan.default, {
             plan: x
           })
-        }, x.id))
+        }, index))
       })
     });
   }

package/lib/RelativeTime/index.js

@@ -27,7 +27,7 @@ var _Util = require("../Util");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["value", "locale", "withoutSuffix", "from", "to"];
+const _excluded = ["value", "locale", "withoutSuffix", "from", "to", "type"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -78,7 +78,8 @@ function RelativeTime(_ref) {
     locale,
     withoutSuffix,
     from,
-    to
+    to,
+    type
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);
 
@@ -87,20 +88,29 @@ function RelativeTime(_ref) {
   }
 
   const localeOption = locale === 'zh' ? 'zh-cn' : 'zh-us';
-  let innerContent;
+  let relativeString;
 
   if (from) {
-    innerContent = (0, _dayjs.default)(value).locale(localeOption).from(from, withoutSuffix);
+    relativeString = (0, _dayjs.default)(value).locale(localeOption).from(from, withoutSuffix);
   } else if (to) {
-    innerContent = (0, _dayjs.default)(value).locale(localeOption).to(to, withoutSuffix);
+    relativeString = (0, _dayjs.default)(value).locale(localeOption).to(to, withoutSuffix);
   } else {
-    innerContent = (0, _dayjs.default)(value).locale(localeOption).fromNow(withoutSuffix);
+    relativeString = (0, _dayjs.default)(value).locale(localeOption).fromNow(withoutSuffix);
+  }
+
+  const absoluteString = (0, _Util.formatToDatetime)(value, {
+    locale: localeOption
+  });
+  let innerContent = relativeString;
+  let popContent = absoluteString;
+
+  if (type === 'absolute') {
+    innerContent = absoluteString;
+    popContent = relativeString;
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-    title: (0, _Util.formatToDatetime)(value, {
-      locale: localeOption
-    }),
+    title: popContent,
     placement: "top-end",
     enterTouchDelay: 0,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, rest), {}, {
@@ -114,11 +124,13 @@ RelativeTime.propTypes = {
   locale: _propTypes.default.string,
   withoutSuffix: _propTypes.default.bool,
   from: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  type: _propTypes.default.string
 };
 RelativeTime.defaultProps = {
   locale: 'en',
   withoutSuffix: false,
   from: '',
-  to: ''
+  to: '',
+  type: 'relative'
 };

package/lib/Screenshot/index.js

@@ -166,7 +166,9 @@ function Screenshot(props) {
       className: "device-frame",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "device-content",
-        children: findChildren(_react.Children.toArray(children))
+        children: findChildren(_react.Children.toArray(children)).map((item, index) => /*#__PURE__*/(0, _react.cloneElement)(item, {
+          key: index
+        }))
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "device-stripe"

package/lib/Tabs/index.js

@@ -58,7 +58,7 @@ function Tabs(_ref2) {
       rest = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTabs, _objectSpread(_objectSpread({
-    scrollButtons: "on",
+    scrollButtons: "auto",
     variant: "scrollable",
     value: current,
     onChange: (_, newValue) => _onChange(newValue),

package/lib/Video/index.js

@@ -63,7 +63,7 @@ function Video(props) {
         style: styles,
         src: url,
         onLoad: () => setLoaded(true),
-        allowFullScreen: "true"
+        allowFullScreen: true
       }), !loaded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
         className: "loading-indicator",
         color: "primary"

package/lib/Wallet/Action.js

@@ -84,7 +84,7 @@ function WalletAction(props) {
 
 WalletAction.propTypes = {
   action: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  size: _propTypes.default.oneOf(['xlarge', 'large', 'medium', 'small']),
   textLayout: _propTypes.default.oneOf(['vertical', 'horizontal']),
   style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string])
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.42",
+  "version": "2.1.45",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "077fc503a95b41c9fe5d8dab0bc8d50300105e46",
+  "gitHead": "84b9e6665af4066a5fa3087aeeebcd1414f270f4",
   "dependencies": {
-    "@arcblock/icons": "^2.1.42",
-    "@arcblock/react-hooks": "^2.1.42",
+    "@arcblock/icons": "^2.1.45",
+    "@arcblock/react-hooks": "^2.1.45",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/CodeBlock/index.js

@@ -74,7 +74,7 @@ export default function CodeBlock({ code, language, children, ...rest }) {
           dangerouslySetInnerHTML={{ __html: hljs.highlightAuto(source, [language]).value }}
         />
       </span>
-      <Button className="copy-button" onClick={onCopy} tabIndex="-1" color="primary" disabled={copied}>
+      <Button className="copy-button" onClick={onCopy} color="primary" disabled={copied}>
         {!copied && <CopyIcon style={{ color: '#fff', fontSize: 16 }} />}
         {copied && <CheckIcon style={{ color: '#fff', fontSize: 16 }} />}
       </Button>
@@ -134,7 +134,7 @@ const Pre = styled.pre`
 
   &:hover {
     .copy-button {
-      display: block;
+      display: flex;
     }
   }
 

package/src/CountDown/index.js

@@ -43,8 +43,8 @@ function FixWidthNumber({ number, label, length = 2 }) {
 
 export default class CountDown extends Component {
   constructor(props) {
+    super(props);
     const newProps = mergeProps(props, CountDown, ['dark', 'endTime', 'style']);
-    super(newProps);
     this.state = getRemaining(newProps.endTime);
     this.timer = null;
   }

package/src/Datatable/index.js

@@ -20,6 +20,24 @@ export default function Datatable({ ...props }) {
   );
 }
 
+const fixCellProp = (tempObj, cellProps) => {
+  const cellStyle = {};
+
+  if (tempObj.align) {
+    cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
+  }
+
+  if (tempObj.verticalKeyAlign) {
+    cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
+  }
+
+  if (tempObj.minWidth) {
+    cellStyle.minWidth = tempObj.minWidth;
+  }
+
+  cellProps.style = Object.assign({}, cellProps.style, cellStyle);
+};
+
 /**
  * @param {Object} props.options The options of mui-datatable，detail see https://github.com/gregnb/mui-datatables/tree/b8d2eee6af4589d254b40918e5d7e70b1ee4baca
  * @param {Array} props.customButtons Custom buttons for toolbar
@@ -102,13 +120,7 @@ function ReDatatable({
         cellProps.width = tempObj.width;
       }
 
-      if (tempObj.align) {
-        cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
-      }
-
-      if (tempObj.verticalKeyAlign) {
-        cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
-      }
+      fixCellProp(tempObj, cellProps);
 
       return cellProps;
     };
@@ -130,13 +142,7 @@ function ReDatatable({
           };
         }
 
-        if (tempObj.align) {
-          cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
-        }
-
-        if (tempObj.verticalKeyAlign) {
-          cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
-        }
+        fixCellProp(tempObj, cellProps);
 
         return cellProps;
       };

package/src/Footer/index.js

@@ -11,8 +11,9 @@ export default function Footer(props) {
   const newProps = mergeProps(props, Footer, ['dark', 'style']);
   const { className, copyStart, style, brand, dark } = newProps;
 
-  const endYear = new Date().getFullYear();
-  const copyYear = endYear === copyStart ? endYear : `${copyStart}-${endYear}`;
+  const endYearString = `${new Date().getFullYear()}`;
+  const copyStartString = `${copyStart}`;
+  const copyYear = endYearString === copyStartString ? endYearString : `${copyStartString}-${endYearString}`;
 
   return (
     <Container className={className} style={style} dark={dark}>
@@ -35,7 +36,7 @@ export default function Footer(props) {
 Footer.propTypes = {
   dark: PropTypes.bool,
   className: PropTypes.string,
-  copyStart: PropTypes.string,
+  copyStart: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   brand: PropTypes.string,
   style: PropTypes.object,
 };

package/src/InfoRow/index.js

@@ -40,7 +40,7 @@ InfoRow.defaultProps = {
 
     return typeof name === 'string' ? resetName : name;
   },
-  valueComponent: 'p',
+  valueComponent: 'div',
   layout: 'horizontal',
 };
 

package/src/Metric/index.js

@@ -8,7 +8,7 @@ export default function Metric({ icon, value, name, url, animated, LinkComponent
   const metric = (
     <>
       <div className="metric__image">
-        <ImageIcon name={icon} alt={name} size={30} prefix={prefix} color="#222222" />
+        <ImageIcon name={icon} alt={typeof name === 'string' ? name : ''} size={30} prefix={prefix} color="#222222" />
       </div>
       <div>
         <div
@@ -26,7 +26,7 @@ export default function Metric({ icon, value, name, url, animated, LinkComponent
 Metric.propTypes = {
   icon: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  name: PropTypes.string.isRequired,
+  name: PropTypes.node.isRequired,
   animated: PropTypes.bool,
   url: PropTypes.string,
   LinkComponent: PropTypes.any,

package/src/NFTDisplay/index.js

@@ -69,13 +69,15 @@ function NFTDisplay({
     </Root>
   );
 
+  const parsed = useRef(data);
+
   try {
-    const parsed = useRef(data);
     // 如果是 raw data 先解析
     if (typeof parsed.current === 'string') {
       parsed.current = JSON.parse(data);
       // console.log('[debug] parse data')
     }
+
     const { vcId } = parsed.current;
     // 需要兼容新旧两种类型的数据结构, nft data 有 credentialSubject 属性, 说明是旧 nft data, 否则是新 nft data
     const display = parsed.current.credentialSubject
@@ -147,14 +149,14 @@ function NFTDisplay({
             const buffer = pako.ungzip(fromBase64(content), {});
             const svg = Buffer.from(buffer).toString('utf8');
             if (checkSvg && !isSvg(svg)) {
-              throw new Error(`Invalid SVG: ${svg}`);
+              throw new Error('Invalid SVG of type svg_gzipped');
             }
             const Embedder = getSvgEmbedder(preferredSvgEmbedder);
             return <Embedder svg={svg} />;
           }
           case 'svg': {
             if (checkSvg && !isSvg(content)) {
-              throw new Error(`Invalid SVG: ${content}`);
+              throw new Error('Invalid SVG of type svg');
             }
             const Embedder = getSvgEmbedder(preferredSvgEmbedder);
             return <Embedder svg={content} />;
@@ -176,7 +178,10 @@ function NFTDisplay({
       </>
     );
   } catch (e) {
-    console.error(e);
+    console.error(e?.message, {
+      nftId: address,
+      vcId: parsed?.current?.vcId,
+    });
     return wrapRoot(renderError ? renderError() : <DefaultBrokenImage />);
   }
 }

package/src/PricingTable/PricingPlan.js

@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography';
 
 function PricingPlan({ plan }) {
   return (
-    <PlanCard shadow>
+    <PlanCard $shadow>
       <div className="card-header">
         <div className="title">{plan.name}</div>
       </div>
@@ -54,7 +54,7 @@ const PlanCard = styled(Card)`
   }
 
   && {
-    ${(props) => (props.shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)')}
+    ${(props) => (props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)')}
   }
 
   .card-header {

package/src/PricingTable/index.js

@@ -9,8 +9,9 @@ function PricingTable({ plans }) {
     return (
       <Div variant="even">
         <Grid container spacing={2} justifyContent="center">
-          {plans.map((x) => (
-            <Grid item className="plan-item" key={x.id} xs={12} sm={6} md={3}>
+          {plans.map((x, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Grid item className="plan-item" key={index} xs={12} sm={6} md={3}>
               <PricingPlan plan={x} />
             </Grid>
           ))}

package/src/RelativeTime/index.js

@@ -34,25 +34,35 @@ dayjs.updateLocale('zh-cn', {
 });
 setDateTool(dayjs);
 
-export default function RelativeTime({ value, locale, withoutSuffix, from, to, ...rest }) {
+export default function RelativeTime({ value, locale, withoutSuffix, from, to, type, ...rest }) {
   if (!value) {
     return '-';
   }
 
   const localeOption = locale === 'zh' ? 'zh-cn' : 'zh-us';
 
-  let innerContent;
+  let relativeString;
 
   if (from) {
-    innerContent = dayjs(value).locale(localeOption).from(from, withoutSuffix);
+    relativeString = dayjs(value).locale(localeOption).from(from, withoutSuffix);
   } else if (to) {
-    innerContent = dayjs(value).locale(localeOption).to(to, withoutSuffix);
+    relativeString = dayjs(value).locale(localeOption).to(to, withoutSuffix);
   } else {
-    innerContent = dayjs(value).locale(localeOption).fromNow(withoutSuffix);
+    relativeString = dayjs(value).locale(localeOption).fromNow(withoutSuffix);
+  }
+
+  const absoluteString = formatToDatetime(value, { locale: localeOption });
+
+  let innerContent = relativeString;
+  let popContent = absoluteString;
+
+  if (type === 'absolute') {
+    innerContent = absoluteString;
+    popContent = relativeString;
   }
 
   return (
-    <Tooltip title={formatToDatetime(value, { locale: localeOption })} placement="top-end" enterTouchDelay={0}>
+    <Tooltip title={popContent} placement="top-end" enterTouchDelay={0}>
       <span {...rest}>{innerContent}</span>
     </Tooltip>
   );
@@ -64,6 +74,7 @@ RelativeTime.propTypes = {
   withoutSuffix: PropTypes.bool,
   from: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   to: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  type: PropTypes.string,
 };
 
 RelativeTime.defaultProps = {
@@ -71,4 +82,5 @@ RelativeTime.defaultProps = {
   withoutSuffix: false,
   from: '',
   to: '',
+  type: 'relative',
 };

package/src/Screenshot/index.js

@@ -1,4 +1,4 @@
-import { createElement, Children } from 'react';
+import { createElement, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -130,7 +130,10 @@ function Screenshot(props) {
       contentRadius={borderRadius}
       contentZIndex={zIndex}>
       <div className="device-frame">
-        <div className="device-content">{findChildren(Children.toArray(children))}</div>
+        <div className="device-content">
+          {/* eslint-disable-next-line react/no-array-index-key */}
+          {findChildren(Children.toArray(children)).map((item, index) => cloneElement(item, { key: index }))}
+        </div>
       </div>
       <div className="device-stripe" />
       <div className="device-header" />

package/src/Tabs/index.js

@@ -24,7 +24,7 @@ const StyledMuiTabs = styled(MuiTabs)(({ theme }) => ({
 export default function Tabs({ tabs, current, onChange, ...rest }) {
   return (
     <StyledMuiTabs
-      scrollButtons="on"
+      scrollButtons="auto"
       variant="scrollable"
       value={current}
       onChange={(_, newValue) => onChange(newValue)}

package/src/Video/index.js

@@ -23,7 +23,7 @@ export default function Video(props) {
   if (url.indexOf('v.qq.com') > 0) {
     return (
       <Placeholder style={{ width, height }}>
-        <iframe title={url} style={styles} src={url} onLoad={() => setLoaded(true)} allowFullScreen="true" />
+        <iframe title={url} style={styles} src={url} onLoad={() => setLoaded(true)} allowFullScreen />
         {!loaded && <CircularProgress className="loading-indicator" color="primary" />}
       </Placeholder>
     );

package/src/Wallet/Action.js

@@ -35,7 +35,7 @@ export default function WalletAction(props) {
 
 WalletAction.propTypes = {
   action: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small']),
   textLayout: PropTypes.oneOf(['vertical', 'horizontal']),
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
 };