@arcblock/ux 2.4.44 → 2.4.45

package/lib/Avatar/etherscan-blockies.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/* eslint-disable prefer-destructuring */
+
+/* eslint-disable no-bitwise */
+// copy from https://etherscan.io/jss/blockies.js
+const randseed = new Array(4);
+
+function seedrand(seed) {
+  for (let i = 0; i < randseed.length; i++) {
+    randseed[i] = 0;
+  }
+
+  for (let i = 0; i < seed.length; i++) {
+    randseed[i % 4] = (randseed[i % 4] << 5) - randseed[i % 4] + seed.charCodeAt(i);
+  }
+}
+
+function rand() {
+  const t = randseed[0] ^ randseed[0] << 11;
+  randseed[0] = randseed[1];
+  randseed[1] = randseed[2];
+  randseed[2] = randseed[3];
+  randseed[3] = randseed[3] ^ randseed[3] >> 19 ^ t ^ t >> 8;
+  return (randseed[3] >>> 0) / (1 << 31 >>> 0);
+}
+
+function createColor() {
+  const h = Math.floor(rand() * 360);
+  const s = "".concat(rand() * 60 + 40, "%");
+  const l = "".concat((rand() + rand() + rand() + rand()) * 25, "%");
+  const color = "hsl(".concat(h, ",").concat(s, ",").concat(l, ")");
+  return color;
+}
+
+function createImageData(size) {
+  const width = size;
+  const height = size;
+  const dataWidth = Math.ceil(width / 2);
+  const mirrorWidth = width - dataWidth;
+  const data = [];
+
+  for (let y = 0; y < height; y++) {
+    let row = [];
+
+    for (let x = 0; x < dataWidth; x++) {
+      row[x] = Math.floor(rand() * 2.3);
+    }
+
+    const r = row.slice(0, mirrorWidth);
+    r.reverse();
+    row = row.concat(r);
+
+    for (let i = 0; i < row.length; i++) {
+      data.push(row[i]);
+    }
+  }
+
+  return data;
+}
+
+function createCanvas(imageData, color, scale, bgcolor, spotcolor) {
+  const c = document.createElement('canvas');
+  const width = Math.sqrt(imageData.length); // eslint-disable-next-line no-multi-assign
+
+  c.width = c.height = width * scale;
+  const cc = c.getContext('2d');
+  cc.fillStyle = bgcolor;
+  cc.fillRect(0, 0, c.width, c.height);
+  cc.fillStyle = color;
+
+  for (let i = 0; i < imageData.length; i++) {
+    const row = Math.floor(i / width);
+    const col = i % width;
+    cc.fillStyle = imageData[i] === 1 ? color : spotcolor;
+
+    if (imageData[i]) {
+      cc.fillRect(col * scale, row * scale, scale, scale);
+    }
+  }
+
+  return c;
+}
+
+function createIcon(opts) {
+  // eslint-disable-next-line no-param-reassign
+  opts = opts || {};
+  const size = opts.size || 8;
+  const scale = opts.scale || 4;
+  const seed = opts.seed || Math.floor(Math.random() * 10 ** 16).toString(16);
+  seedrand(seed);
+  const color = opts.color || createColor();
+  const bgcolor = opts.bgcolor || createColor();
+  const spotcolor = opts.spotcolor || createColor();
+  const imageData = createImageData(size);
+  const canvas = createCanvas(imageData, color, scale, bgcolor, spotcolor);
+  return canvas;
+}
+
+var _default = {
+  createIcon
+};
+exports.default = _default;

package/lib/Avatar/index.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AvatarWithErrorBoundary;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactErrorBoundary = require("react-error-boundary");
+
+var _didMotif = require("@arcblock/did-motif");
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Img = _interopRequireDefault(require("../Img"));
+
+var _Util = require("../Util");
+
+var _Theme = require("../Theme");
+
+var _didMotif2 = _interopRequireDefault(require("./did-motif"));
+
+var _etherscanBlockies = _interopRequireDefault(require("./etherscan-blockies"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+const _excluded = ["did", "size", "src", "variant", "animation", "shape"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+// 参考: asset-chain @arcblock/did
+const isEthereumDid = did => {
+  const address = did.replace('did:abt:', ''); // check if it has the basic requirements of an address
+
+  if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
+    return false;
+  }
+
+  return true;
+}; // 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
+
+
+function Avatar(props) {
+  const [imgError, setImgError] = (0, _react.useState)(false);
+  const newProps = (0, _Util.mergeProps)(props, Avatar, []);
+
+  const {
+    did = '',
+    size,
+    src,
+    variant,
+    animation,
+    shape
+  } = newProps,
+        rest = _objectWithoutProperties(newProps, _excluded); // ethereum blockies
+
+
+  const blockyIcon = (0, _react.useMemo)(() => {
+    if (isEthereumDid(did)) {
+      return _etherscanBlockies.default.createIcon({
+        seed: did.replace('did:abt:', '').toLowerCase(),
+        size: 8,
+        scale: 16
+      }).toDataURL();
+    }
+
+    return null;
+  }, [did]); // 如果显式传入 src 则直接使用 src
+
+  if (src && !imgError) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImg, _objectSpread(_objectSpread({
+      width: size,
+      src: src,
+      alt: did,
+      onError: () => setImgError(true)
+    }, rest), {}, {
+      className: "avatar-img--".concat(variant, " ").concat(rest.className)
+    }));
+  } // 对于 eth address, 渲染成 blocky icon, 形状与 account role type 的 did motif 相似都为矩形, 高宽比为 0.7
+
+
+  if (blockyIcon) {
+    // blocky icon 要与灰色卡片矩形留有空间
+    const padding = size > 24 ? 4 : 2;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockyIconContainer, _objectSpread(_objectSpread({
+      $size: size
+    }, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "blocky-icon-inner",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
+          width: size * 0.7 - padding * 2,
+          src: blockyIcon,
+          alt: did
+        })
+      })
+    }));
+  }
+
+  if (did) {
+    // 渲染 did motif
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_didMotif2.default, _objectSpread({
+      did: did.replace('did:abt:', ''),
+      size: size,
+      animation: animation,
+      shape: _didMotif.Shape[(shape || '').toUpperCase()],
+      responsive: newProps.responsive
+    }, rest));
+  }
+
+  throw new Error("Invalid DID: ".concat(did));
+}
+
+Avatar.propTypes = {
+  did: _propTypes.default.string.isRequired,
+  size: _propTypes.default.number,
+  variant: _propTypes.default.oneOf(['circle', 'rounded', 'default']),
+  // animation 仅对 did motif 有效
+  animation: _propTypes.default.bool,
+  // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
+  shape: _propTypes.default.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle'])
+};
+Avatar.defaultProps = {
+  size: 36,
+  variant: 'default',
+  animation: false,
+  shape: ''
+};
+const BlockyIconContainer = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: ", "px;\n  height: ", "px;\n  .blocky-icon-inner {\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: ", "px;\n    height: ", "px;\n    border-radius: ", "px;\n    background: #ddd;\n  }\n"])), props => props.$size, props => props.$size, props => props.$size, props => props.$size * 0.7, props => Math.min(10, Math.floor(0.1 * props.$size + 2)));
+const StyledImg = (0, _Theme.styled)(_Img.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.avatar-img--rounded {\n    border-radius: 4px;\n    overflow: hidden;\n  }\n  &.avatar-img--circle {\n    border-radius: 100%;\n    overflow: hidden;\n  }\n"])));
+
+function AvatarWithErrorBoundary(props) {
+  const size = props.size || 36;
+  const borderRadius = {
+    rounded: '4px',
+    circle: '100%'
+  }[props.variant] || 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary // eslint-disable-next-line react/no-unstable-nested-components
+  , {
+    fallbackRender: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      width: size,
+      height: size,
+      bgcolor: "grey.300",
+      borderRadius: borderRadius
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Avatar, _objectSpread({}, props))
+  });
+}
+
+AvatarWithErrorBoundary.propTypes = Avatar.propTypes;

package/lib/DidLogo/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DidLogo;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _DidLogo = _interopRequireDefault(require("@arcblock/icons/lib/DidLogo"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const defaultStyle = {
+  width: 'auto',
+  height: '1em',
+  fill: 'currentColor'
+};
+
+function DidLogo(_ref) {
+  let {
+    style,
+    size,
+    className
+  } = _ref;
+  const height = Number(size) > 0 ? "".concat(Number(size), "px") : size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DidLogo.default, {
+    className: "".concat(className).trim(),
+    style: Object.assign({}, defaultStyle, style, height ? {
+      height
+    } : {})
+  });
+}
+
+DidLogo.propTypes = {
+  style: _propTypes.default.object,
+  size: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  className: _propTypes.default.string
+};
+DidLogo.defaultProps = {
+  style: defaultStyle,
+  size: 0,
+  className: ''
+};