@arcblock/ux 2.5.54 → 2.5.55

package/lib/Address/did-address.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatAddress = exports.default = void 0;
+exports.getFontSize = exports.formatAddress = exports.default = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -35,6 +35,10 @@ const _excluded = ["component", "size", "copyable", "content", "children", "prep
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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; }
@@ -50,6 +54,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const formatAddress = str => str.split(':').pop();
 
 exports.formatAddress = formatAddress;
+
+const getFontSize = size => {
+  // 12px 及以上的 size 有效, 否则返回 inherit
+  if (size && Number(size) >= 12) {
+    return "".concat(Number(size), "px");
+  }
+
+  return 'inherit';
+};
+
+exports.getFontSize = getFontSize;
 const translations = {
   en: {
     copy: 'Click To Copy',
@@ -198,16 +213,6 @@ DidAddress.defaultProps = {
   endChars: 6,
   locale: 'en'
 };
-
-const getFontSize = size => {
-  // 12px 及以上的 size 有效, 否则返回 inherit
-  if (size && Number(size) >= 12) {
-    return "".concat(Number(size), "px");
-  }
-
-  return 'inherit';
-};
-
 const Root = (0, _Theme.styled)('div', {
   shouldForwardProp: prop => prop !== 'inline'
 })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: 'Ubuntu Mono', monospace;\n  && {\n    display: ", ";\n    align-items: center;\n    max-width: 100%;\n    overflow: hidden;\n    color: #ccc;\n    font-size: ", ";\n    font-weight: 400;\n\n    svg {\n      fill: currentColor;\n    }\n  }\n\n  .did-address-text {\n    color: #666;\n  }\n  /* truncate string with ellipsis */\n  .did-address-truncate {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .did-address-copy {\n    flex: 0 0 auto;\n  }\n  .did-address-copy-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    margin-left: 8px;\n  }\n  .did-address-copy {\n    font-size: 1em;\n    color: #999;\n    cursor: pointer;\n  }\n\n  /* link */\n  a {\n    color: #666;\n  }\n  &:hover a {\n    color: #222;\n    text-decoration: underline;\n  }\n"])), _ref2 => {

package/lib/Address/index.js

@@ -3,11 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatAddress = exports.default = void 0;
+exports.default = DidAddressWrapper;
+exports.formatAddress = void 0;
+Object.defineProperty(exports, "getFontSize", {
+  enumerable: true,
+  get: function get() {
+    return _didAddress.getFontSize;
+  }
+});
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _didAddress = _interopRequireDefault(require("./did-address"));
+var _didAddress = _interopRequireWildcard(require("./did-address"));
 
 var _responsiveDidAddress = _interopRequireDefault(require("./responsive-did-address"));
 
@@ -15,6 +22,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["responsive"];
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -44,8 +55,6 @@ function DidAddressWrapper(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, _objectSpread({}, rest));
 }
 
-var _default = DidAddressWrapper;
-exports.default = _default;
 DidAddressWrapper.propTypes = {
   responsive: _propTypes.default.bool
 };

package/lib/Avatar/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AvatarWithErrorBoundary;
+exports.isEthereumDid = void 0;
 
 var _react = require("react");
 
@@ -29,7 +30,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
 
-const _excluded = ["did", "size", "src", "variant", "animation", "shape"];
+const _excluded = ["did", "size", "src", "variant", "animation", "shape", "blockiesPadding"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -76,6 +77,8 @@ const isEthereumDid = did => {
  */
 
 
+exports.isEthereumDid = isEthereumDid;
+
 function Avatar(props) {
   const [imgError, setImgError] = (0, _react.useState)(false);
   const newProps = (0, _Util.mergeProps)(props, Avatar, []);
@@ -86,7 +89,8 @@ function Avatar(props) {
     src,
     variant,
     animation,
-    shape
+    shape,
+    blockiesPadding
   } = newProps,
         rest = _objectWithoutProperties(newProps, _excluded); // ethereum blockies
 
@@ -95,13 +99,13 @@ function Avatar(props) {
     if (isEthereumDid(did)) {
       return _etherscanBlockies.default.createIcon({
         seed: did.replace('did:abt:', '').toLowerCase(),
-        size: 8,
+        size,
         scale: 16
       }).toDataURL();
     }
 
     return null;
-  }, [did]); // 如果显式传入 src 则直接使用 src
+  }, [did, size]); // 如果显式传入 src 则直接使用 src
 
   if (src && !imgError) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImg, _objectSpread(_objectSpread({
@@ -116,20 +120,31 @@ function Avatar(props) {
 
 
   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 (blockiesPadding) {
+      // 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
+          })
         })
-      })
-    }));
+      }));
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
+      width: size,
+      src: blockyIcon,
+      alt: did,
+      style: {
+        marginRight: 4
+      }
+    });
   }
 
   if (did) {
@@ -154,12 +169,14 @@ Avatar.propTypes = {
   animation: _propTypes.default.bool,
   // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
   shape: _propTypes.default.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
+  blockiesPadding: _propTypes.default.bool,
   responsive: _propTypes.default.bool
 };
 Avatar.defaultProps = {
   size: 36,
   variant: 'default',
   animation: false,
+  blockiesPadding: true,
   shape: '',
   responsive: false
 };

package/lib/DID/index.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _didMotif = require("@arcblock/did-motif");
+
+var _Address = _interopRequireWildcard(require("../Address"));
+
+var _Avatar = _interopRequireWildcard(require("../Avatar"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["did"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+const DIDPropTypes = {
+  did: _propTypes.default.string.isRequired,
+  size: _propTypes.default.number,
+  component: _propTypes.default.string,
+  copyable: _propTypes.default.bool,
+  responsive: _propTypes.default.bool,
+  showCopyButtonInTooltip: _propTypes.default.bool,
+  inline: _propTypes.default.bool,
+  append: _propTypes.default.any,
+  compact: _propTypes.default.bool,
+  startChars: _propTypes.default.number,
+  endChars: _propTypes.default.number,
+  locale: _propTypes.default.oneOf(['en', 'zh'])
+};
+
+const getFontColor = did => {
+  if ((0, _Avatar.isEthereumDid)(did)) {
+    const index = Uint8Array.from(did.slice(2).match(/.{1,2}/g).map(pair => parseInt(pair, 16))).slice(0, 8).reduce((acc, val) => acc + val, 0) % _didMotif.colors.length;
+
+    return _didMotif.colors[index];
+  }
+
+  return (0, _didMotif.getDIDMotifInfo)(did).color;
+};
+/**
+ * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
+ */
+
+
+const DID = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    did
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const fontSize = (0, _Address.getFontSize)(rest.size);
+  const prepend = [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    style: {
+      fontSize,
+      color: getFontColor(did)
+    },
+    children: "DID:"
+  }, "prefix-did"), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "did-address-text",
+    style: {
+      fontSize
+    },
+    children: "ABT:"
+  }, "prefix-abt"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+    did: did,
+    size: rest.size || 18,
+    style: {
+      marginLeft: 2,
+      marginRight: 2
+    },
+    blockiesPadding: false
+  }, "avatar")];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Address.default, _objectSpread(_objectSpread({
+    ref: ref
+  }, rest), {}, {
+    prepend: prepend,
+    children: did
+  }));
+});
+var _default = DID;
+exports.default = _default;
+DID.propTypes = DIDPropTypes;
+DID.defaultProps = {
+  size: 0,
+  component: 'span',
+  copyable: true,
+  responsive: true,
+  showCopyButtonInTooltip: false,
+  inline: false,
+  append: null,
+  compact: false,
+  startChars: 6,
+  endChars: 6,
+  locale: 'en'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.5.54",
+  "version": "2.5.55",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/ArcBlock/ux.git"
   },
   "scripts": {
-    "lint": "eslint src tests",
+    "lint": "eslint src tests --ext js --ext jsx",
     "lint:fix": "npm run lint -- --fix",
     "build": "babel src --out-dir lib --copy-files --no-copy-ignored",
     "watch": "babel src --out-dir lib -w --copy-files --no-copy-ignored",
@@ -47,11 +47,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "e4567ba59d38e0246f992ef53ce2dde6f9c5cf6b",
+  "gitHead": "6ab89ceb6e7fb809ab7b45bf7c965ec5a276c033",
   "dependencies": {
-    "@arcblock/did-motif": "^1.1.10",
-    "@arcblock/icons": "^2.5.54",
-    "@arcblock/react-hooks": "^2.5.54",
+    "@arcblock/did-motif": "^1.1.12",
+    "@arcblock/icons": "^2.5.55",
+    "@arcblock/react-hooks": "^2.5.55",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/Address/did-address.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, forwardRef } from 'react';
+import React, { useRef, useState, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import '@fontsource/ubuntu-mono/400.css';
 import useMountedState from 'react-use/lib/useMountedState';
@@ -7,12 +7,20 @@ import { green } from '@mui/material/colors';
 import copy from 'copy-to-clipboard';
 import CopyIcon from '@mui/icons-material/ContentCopy';
 import CheckIcon from '@mui/icons-material/Check';
-import { styled } from '../Theme';
 
+import { styled } from '../Theme';
 import CompactText from './compact-text';
 
 export const formatAddress = (str) => str.split(':').pop();
 
+export const getFontSize = (size) => {
+  // 12px 及以上的 size 有效, 否则返回 inherit
+  if (size && Number(size) >= 12) {
+    return `${Number(size)}px`;
+  }
+  return 'inherit';
+};
+
 const translations = {
   en: {
     copy: 'Click To Copy',
@@ -66,6 +74,7 @@ const DidAddress = forwardRef(
 
     const [copied, setCopied] = useState(false);
     const textRef = useRef();
+
     const onCopy = (e) => {
       e.stopPropagation();
       copy(content || textRef.current.textContent);
@@ -154,14 +163,6 @@ DidAddress.defaultProps = {
   locale: 'en',
 };
 
-const getFontSize = (size) => {
-  // 12px 及以上的 size 有效, 否则返回 inherit
-  if (size && Number(size) >= 12) {
-    return `${Number(size)}px`;
-  }
-  return 'inherit';
-};
-
 const Root = styled('div', { shouldForwardProp: (prop) => prop !== 'inline' })`
   font-family: 'Ubuntu Mono', monospace;
   && {

package/src/Address/index.jsx

@@ -1,18 +1,18 @@
 import PropTypes from 'prop-types';
-import DidAddress from './did-address';
+import DidAddress, { getFontSize } from './did-address';
 import ResponsiveDidAddress from './responsive-did-address';
 
+export { getFontSize };
+
 export const formatAddress = (str) => str.split(':').pop();
 
-function DidAddressWrapper({ responsive, ...rest }) {
+export default function DidAddressWrapper({ responsive, ...rest }) {
   if (responsive) {
     return <ResponsiveDidAddress {...rest} />;
   }
   return <DidAddress {...rest} />;
 }
 
-export default DidAddressWrapper;
-
 DidAddressWrapper.propTypes = {
   responsive: PropTypes.bool,
 };

package/src/Avatar/index.js

@@ -11,7 +11,7 @@ import DIDMotif from './did-motif';
 import blockies from './etherscan-blockies';
 
 // 参考: asset-chain @arcblock/did
-const isEthereumDid = (did) => {
+export 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)) {
@@ -42,7 +42,7 @@ const isEthereumDid = (did) => {
 function Avatar(props) {
   const [imgError, setImgError] = useState(false);
   const newProps = mergeProps(props, Avatar, []);
-  const { did = '', size, src, variant, animation, shape, ...rest } = newProps;
+  const { did = '', size, src, variant, animation, shape, blockiesPadding, ...rest } = newProps;
 
   // ethereum blockies
   const blockyIcon = useMemo(() => {
@@ -50,13 +50,13 @@ function Avatar(props) {
       return blockies
         .createIcon({
           seed: did.replace('did:abt:', '').toLowerCase(),
-          size: 8,
+          size,
           scale: 16,
         })
         .toDataURL();
     }
     return null;
-  }, [did]);
+  }, [did, size]);
 
   // 如果显式传入 src 则直接使用 src
   if (src && !imgError) {
@@ -73,16 +73,21 @@ function Avatar(props) {
   }
   // 对于 eth address, 渲染成 blocky icon, 形状与 account role type 的 did motif 相似都为矩形, 高宽比为 0.7
   if (blockyIcon) {
-    // blocky icon 要与灰色卡片矩形留有空间
-    const padding = size > 24 ? 4 : 2;
-    return (
-      <BlockyIconContainer $size={size} {...rest}>
-        <div className="blocky-icon-inner">
-          <Img width={size * 0.7 - padding * 2} src={blockyIcon} alt={did} />
-        </div>
-      </BlockyIconContainer>
-    );
+    if (blockiesPadding) {
+      // blocky icon 要与灰色卡片矩形留有空间
+      const padding = size > 24 ? 4 : 2;
+      return (
+        <BlockyIconContainer $size={size} {...rest}>
+          <div className="blocky-icon-inner">
+            <Img width={size * 0.7 - padding * 2} src={blockyIcon} alt={did} />
+          </div>
+        </BlockyIconContainer>
+      );
+    }
+
+    return <Img width={size} src={blockyIcon} alt={did} style={{ marginRight: 4 }} />;
   }
+
   if (did) {
     // 渲染 did motif
     return (
@@ -107,6 +112,7 @@ Avatar.propTypes = {
   animation: PropTypes.bool,
   // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
   shape: PropTypes.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
+  blockiesPadding: PropTypes.bool,
   responsive: PropTypes.bool,
 };
 
@@ -114,6 +120,7 @@ Avatar.defaultProps = {
   size: 36,
   variant: 'default',
   animation: false,
+  blockiesPadding: true,
   shape: '',
   responsive: false,
 };

package/src/DID/index.jsx

@@ -0,0 +1,85 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
+
+import Address, { getFontSize } from '../Address';
+import Avatar, { isEthereumDid } from '../Avatar';
+
+const DIDPropTypes = {
+  did: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  component: PropTypes.string,
+  copyable: PropTypes.bool,
+  responsive: PropTypes.bool,
+  showCopyButtonInTooltip: PropTypes.bool,
+  inline: PropTypes.bool,
+  append: PropTypes.any,
+  compact: PropTypes.bool,
+  startChars: PropTypes.number,
+  endChars: PropTypes.number,
+  locale: PropTypes.oneOf(['en', 'zh']),
+};
+
+const getFontColor = (did) => {
+  if (isEthereumDid(did)) {
+    const index =
+      Uint8Array.from(
+        did
+          .slice(2)
+          .match(/.{1,2}/g)
+          .map((pair) => parseInt(pair, 16))
+      )
+        .slice(0, 8)
+        .reduce((acc, val) => acc + val, 0) % colors.length;
+
+    return colors[index];
+  }
+
+  return getDIDMotifInfo(did).color;
+};
+
+/**
+ * @type React.ForwardRefRenderFunction<HTMLElement, typeof DIDPropTypes>
+ */
+const DID = forwardRef(({ did, ...rest }, ref) => {
+  const fontSize = getFontSize(rest.size);
+  const prepend = [
+    <span key="prefix-did" style={{ fontSize, color: getFontColor(did) }}>
+      DID:
+    </span>,
+    <span key="prefix-abt" className="did-address-text" style={{ fontSize }}>
+      ABT:
+    </span>,
+    <Avatar
+      key="avatar"
+      did={did}
+      size={rest.size || 18}
+      style={{ marginLeft: 2, marginRight: 2 }}
+      blockiesPadding={false}
+    />,
+  ];
+
+  return (
+    <Address ref={ref} {...rest} prepend={prepend}>
+      {did}
+    </Address>
+  );
+});
+
+export default DID;
+
+DID.propTypes = DIDPropTypes;
+
+DID.defaultProps = {
+  size: 0,
+  component: 'span',
+  copyable: true,
+  responsive: true,
+  showCopyButtonInTooltip: false,
+  inline: false,
+  append: null,
+  compact: false,
+  startChars: 6,
+  endChars: 6,
+  locale: 'en',
+};