@arcblock/ux 2.4.44 → 2.4.45

package/lib/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "ActivityIndicator", {
     return _ActivityIndicator.default;
   }
 });
+Object.defineProperty(exports, "Address", {
+  enumerable: true,
+  get: function get() {
+    return _Address.default;
+  }
+});
 Object.defineProperty(exports, "Alert", {
   enumerable: true,
   get: function get() {
@@ -33,6 +39,12 @@ Object.defineProperty(exports, "Async", {
     return _Async.default;
   }
 });
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar.default;
+  }
+});
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
   get: function get() {
@@ -75,6 +87,18 @@ Object.defineProperty(exports, "Datatable", {
     return _Datatable.default;
   }
 });
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function get() {
+    return _Dialog.default;
+  }
+});
+Object.defineProperty(exports, "DidLogo", {
+  enumerable: true,
+  get: function get() {
+    return _DidLogo.default;
+  }
+});
 Object.defineProperty(exports, "Earth", {
   enumerable: true,
   get: function get() {
@@ -117,6 +141,12 @@ Object.defineProperty(exports, "RelativeTime", {
     return _RelativeTime.default;
   }
 });
+Object.defineProperty(exports, "SessionManager", {
+  enumerable: true,
+  get: function get() {
+    return _SessionManager.default;
+  }
+});
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function get() {
@@ -171,6 +201,12 @@ Object.defineProperty(exports, "WalletDownload", {
     return _Download.default;
   }
 });
+Object.defineProperty(exports, "WebWalletSWKeeper", {
+  enumerable: true,
+  get: function get() {
+    return _WebWalletSWKeeper.default;
+  }
+});
 Object.defineProperty(exports, "WechatPrompt", {
   enumerable: true,
   get: function get() {
@@ -194,12 +230,16 @@ var _ActionButton = _interopRequireDefault(require("./ActionButton"));
 
 var _ActivityIndicator = _interopRequireDefault(require("./ActivityIndicator"));
 
+var _Address = _interopRequireDefault(require("./Address"));
+
 var _Alert = _interopRequireDefault(require("./Alert"));
 
 var _AnimationWaiter = _interopRequireDefault(require("./AnimationWaiter"));
 
 var _Async = _interopRequireDefault(require("./Async"));
 
+var _Avatar = _interopRequireDefault(require("./Avatar"));
+
 var _Badge = _interopRequireDefault(require("./Badge"));
 
 var _Button = _interopRequireDefault(require("./Button"));
@@ -224,8 +264,14 @@ var _Logo = _interopRequireDefault(require("./Logo"));
 
 var _RelativeTime = _interopRequireDefault(require("./RelativeTime"));
 
+var _SessionManager = _interopRequireDefault(require("./SessionManager"));
+
 var _Datatable = _interopRequireDefault(require("./Datatable"));
 
+var _Dialog = _interopRequireDefault(require("./Dialog"));
+
+var _DidLogo = _interopRequireDefault(require("./DidLogo"));
+
 var _Tabs = _interopRequireDefault(require("./Tabs"));
 
 var _Tag = _interopRequireDefault(require("./Tag"));
@@ -240,6 +286,8 @@ var _Util = _interopRequireDefault(require("./Util"));
 
 var _Video = _interopRequireDefault(require("./Video"));
 
+var _WebWalletSWKeeper = _interopRequireDefault(require("./WebWalletSWKeeper"));
+
 var _Action = _interopRequireDefault(require("./Wallet/Action"));
 
 var _Download = _interopRequireDefault(require("./Wallet/Download"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.4.44",
+  "version": "2.4.45",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,14 +47,16 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "83a9031c15ca6eca79656f0fb76d4ed2c44cf041",
+  "gitHead": "be1fdf6b96e03360ccdda7b72f8949a833477f99",
   "dependencies": {
-    "@arcblock/icons": "^2.4.44",
-    "@arcblock/react-hooks": "^2.4.44",
+    "@arcblock/did-motif": "^1.1.10",
+    "@arcblock/icons": "^2.4.45",
+    "@arcblock/react-hooks": "^2.4.45",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@fontsource/lato": "^4.5.10",
+    "@fontsource/ubuntu-mono": "^4.5.11",
     "@mui/icons-material": "^5.10.6",
     "@mui/material": "^5.10.8",
     "@solana/qr-code-styling": "^1.6.0-beta.0",

package/src/Address/compact-text.js

@@ -0,0 +1,77 @@
+import { Children } from 'react';
+import PropTypes from 'prop-types';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
+import { styled } from '../Theme';
+import { CopyButton } from '../ClickToCopy';
+
+const StyledTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)({
+  [`& .${tooltipClasses.tooltip}`]: {
+    maxWidth: 360,
+    wordBreak: 'break-all',
+  },
+});
+
+// 递归, 将 text (string) 部分替换为 CompactText (保持元素结构)
+// eslint-disable-next-line react/prop-types
+function RecursiveWrapper({ children, ...rest }) {
+  const wrappedChildren = Children.map(children, (child) => {
+    if (typeof child === 'string') {
+      return <CompactText {...rest}>{child}</CompactText>;
+    }
+    if (child.props && child.props.children) {
+      return (
+        <child.type {...child.props}>
+          <RecursiveWrapper {...rest}>{child.props.children}</RecursiveWrapper>
+        </child.type>
+      );
+    }
+    return child;
+  });
+  return wrappedChildren;
+}
+
+/**
+ * 紧凑文本组件 (显示首尾, 中间截断显示省略号), 仅考虑等宽字体的情况
+ */
+export default function CompactText({ startChars, endChars, children, showCopyButtonInTooltip }) {
+  if (typeof children !== 'string') {
+    return (
+      <RecursiveWrapper startChars={startChars} endChars={endChars} showCopyButtonInTooltip={showCopyButtonInTooltip}>
+        {children}
+      </RecursiveWrapper>
+    );
+  }
+
+  // stopPropagation: 当 tooltip 处于 link 中时, 避免点击复制时触发链接跳转
+  const tooltipContent = (
+    <Box display="flex" alignItems="center" lineHeight={1} onClick={(e) => e.stopPropagation()}>
+      <Box>{children}</Box>
+      {showCopyButtonInTooltip && (
+        <CopyButton content={children} showTooltip={false} style={{ fontSize: 16, marginLeft: 4 }} />
+      )}
+    </Box>
+  );
+
+  return (
+    <StyledTooltip title={tooltipContent} placement="top">
+      <span>
+        {children.slice(0, startChars)}...{children.slice(children.length - endChars)}
+      </span>
+    </StyledTooltip>
+  );
+}
+
+CompactText.propTypes = {
+  startChars: PropTypes.number,
+  endChars: PropTypes.number,
+  children: PropTypes.node.isRequired,
+  // 在 tooltip 中完整地址后显示复制按钮
+  showCopyButtonInTooltip: PropTypes.bool,
+};
+
+CompactText.defaultProps = {
+  startChars: 6,
+  endChars: 6,
+  showCopyButtonInTooltip: false,
+};

package/src/Address/did-address.js

@@ -0,0 +1,215 @@
+import { useRef, useState, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '@fontsource/ubuntu-mono/400.css';
+import useMountedState from 'react-use/lib/useMountedState';
+import Tooltip from '@mui/material/Tooltip';
+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 CompactText from './compact-text';
+
+export const formatAddress = (str) => str.split(':').pop();
+
+const translations = {
+  en: {
+    copy: 'Click To Copy',
+    copied: 'Copied!',
+  },
+  zh: {
+    copy: '点击复制',
+    copied: '已复制!',
+  },
+};
+
+/**
+ * DidAddress 组件 (新版设计)
+ *
+ * - 样式调整
+ * - click-to-copy 调整
+ * - 长文本截断处理 (Ellipsis)
+ * - 支持 inline 或 block 的显示方式
+ * - 支持紧凑模式, 该模式下:
+ *   - 占用宽度较小, 因此不考虑水平空间不够用的情况, 且忽略末尾省略号
+ *   - 对于多层元素结构的 children, 保持元素结构, 将最内层 text 替换为 CompactText 组件
+ *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
+ *   - 可配合 useMediaQuery 使用
+ */
+const DidAddress = forwardRef(
+  (
+    {
+      component,
+      size,
+      copyable,
+      content,
+      children,
+      prepend,
+      append,
+      compact,
+      startChars,
+      endChars,
+      locale,
+      showCopyButtonInTooltip,
+      ...rest
+    },
+    ref
+  ) => {
+    if (!translations[locale]) {
+      // eslint-disable-next-line no-param-reassign
+      locale = 'en';
+    }
+    // 避免 unmounted 后 setTimeout handler 依然改变 state
+    const isMounted = useMountedState();
+
+    const [copied, setCopied] = useState(false);
+    const textRef = useRef();
+    const onCopy = (e) => {
+      e.stopPropagation();
+      copy(content || textRef.current.textContent);
+      setCopied(true);
+      // 恢复 copied 状态
+      setTimeout(() => {
+        if (isMounted()) {
+          setCopied(false);
+        }
+      }, 1500);
+    };
+
+    let copyElement = null;
+    if (copyable) {
+      copyElement = (
+        <span className="did-address-copy-wrapper" title={copied ? '' : translations[locale].copy}>
+          {copied ? (
+            <Tooltip title={translations[locale].copied} placement="bottom" arrow open={copied}>
+              <CheckIcon className="did-address-copy" style={{ color: green[500] }} />
+            </Tooltip>
+          ) : (
+            /* title prop 直接加在 icon 上不生效 */
+            <CopyIcon className="did-address-copy" onClick={onCopy} />
+          )}
+        </span>
+      );
+    }
+
+    return (
+      <Root as={component} size={size} {...rest} ref={ref}>
+        {prepend}
+        {/* 注意: 该元素必须渲染(可以隐藏), 以便 compact 模式下复制的文本是完整的 */}
+        <span
+          ref={textRef}
+          className="did-address-text did-address-truncate"
+          style={{ display: compact ? 'none' : 'inline' }}>
+          {children}
+        </span>
+        {compact && (
+          <span className="did-address-text">
+            <CompactText startChars={startChars} endChars={endChars} showCopyButtonInTooltip={showCopyButtonInTooltip}>
+              {children}
+            </CompactText>
+          </span>
+        )}
+        {copyElement}
+        {append}
+      </Root>
+    );
+  }
+);
+
+export default DidAddress;
+
+DidAddress.propTypes = {
+  component: PropTypes.string,
+  size: PropTypes.number,
+  copyable: PropTypes.bool,
+  // compact mode 下, hover 时会在 tooltip 中显示完整地址, showCopyButtonInTooltip = true 时会在完整地址后显示一个复制按钮
+  showCopyButtonInTooltip: PropTypes.bool,
+  children: PropTypes.any,
+  content: PropTypes.string,
+  inline: PropTypes.bool,
+  prepend: PropTypes.any,
+  append: PropTypes.any,
+  // 紧凑模式
+  compact: PropTypes.bool,
+  startChars: PropTypes.number,
+  endChars: PropTypes.number,
+  locale: PropTypes.oneOf(['en', 'zh']),
+};
+
+DidAddress.defaultProps = {
+  component: 'span',
+  size: 0,
+  copyable: true,
+  showCopyButtonInTooltip: false,
+  children: null,
+  content: '',
+  inline: false,
+  prepend: null,
+  append: null,
+  compact: false,
+  startChars: 6,
+  endChars: 6,
+  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;
+  && {
+    display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};
+    align-items: center;
+    max-width: 100%;
+    overflow: hidden;
+    color: #ccc;
+    font-size: ${(props) => getFontSize(props.size)};
+    font-weight: 400;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
+  .did-address-text {
+    color: #666;
+  }
+  /* truncate string with ellipsis */
+  .did-address-truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .did-address-copy {
+    flex: 0 0 auto;
+  }
+  .did-address-copy-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    margin-left: 8px;
+  }
+  .did-address-copy {
+    font-size: 1em;
+    color: #999;
+    cursor: pointer;
+  }
+
+  /* link */
+  a {
+    color: #666;
+  }
+  &:hover a {
+    color: #222;
+    text-decoration: underline;
+  }
+`;

package/src/Address/index.js

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

package/src/Address/responsive-did-address.js

@@ -0,0 +1,77 @@
+import { useState, createRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import useMeasure from 'react-use/lib/useMeasure';
+import { styled } from '../Theme';
+
+import DidAddress from './did-address';
+
+/**
+ * 根据父容器宽度自动切换 compact 模式
+ *
+ * 实现逻辑:
+ * - DidAddress 外层包裹一个容器, 其宽度自动撑满父容器宽度 (即这个容器需要是块级元素或 100% 宽的 inline-block)
+ * - DidAddress 本身以 inlne 形式渲染 (方便探测 did-address 的 full-width)
+ * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
+ * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
+ * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
+ */
+export default function ResponsiveDidAddress({ style, className, component, ...rest }) {
+  const [compact, setCompact] = useState(false);
+  // did address 完整显示时的宽度
+  const [addressFullWidth, setAddressFullWidth] = useState(null);
+  const [containerRef, { width: containerWidth }] = useMeasure();
+  const ref = createRef();
+  // 存储完整显示时 address 组件的宽度
+  useEffect(() => {
+    if (!compact && addressFullWidth === null) {
+      setAddressFullWidth(ref.current.offsetWidth);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (containerWidth && addressFullWidth) {
+      setCompact(containerWidth < addressFullWidth);
+    }
+  }, [containerWidth, addressFullWidth]);
+  return (
+    <Root as={component} inline={rest.inline} ref={containerRef} style={style} className={className}>
+      <StyledDidAddress {...rest} component={component} inline compact={compact} ref={ref} />
+    </Root>
+  );
+}
+
+ResponsiveDidAddress.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  component: PropTypes.string,
+};
+
+ResponsiveDidAddress.defaultProps = {
+  style: {},
+  className: '',
+  component: 'span',
+};
+
+const Root = styled('div')`
+  display: block;
+  overflow: hidden;
+  ${({ inline }) =>
+    inline &&
+    `
+    display: inline-block;
+    width: 100%;
+  `}
+`;
+
+const StyledDidAddress = styled(DidAddress)`
+  && {
+    max-width: none;
+  }
+  .did-address-text {
+    /* 禁止文本 Ellipsis/截断, 以便测量真实的宽度 */
+    white-space: nowrap;
+    overflow: visible;
+    text-overflow: unset;
+  }
+`;

package/src/Avatar/did-motif.js

@@ -0,0 +1,40 @@
+import { useRef, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import { update } from '@arcblock/did-motif';
+
+function DIDMotif({ did, size, animation, shape, responsive, ...rest }) {
+  const svgRef = useRef(null);
+
+  useLayoutEffect(() => {
+    update(svgRef.current, did, { size, animation, shape });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [did, size, shape]);
+  if (responsive) {
+    // fix avatar 显示问题 (safari 下父容器为 flex 时 inline svg 显示不出来, 需要明确指定 width)
+    const styles = { ...rest.style, width: '100%' };
+    return <svg ref={svgRef} {...rest} style={styles} />;
+  }
+  return (
+    <span {...rest} style={{ display: 'inline-block', width: size, height: size, ...rest.style }}>
+      <svg ref={svgRef} />
+    </span>
+  );
+}
+
+DIDMotif.propTypes = {
+  did: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  animation: PropTypes.bool,
+  // 直接返回 svg 元素, svg 尺寸由父窗口决定 (撑满父窗口)
+  responsive: PropTypes.bool,
+  shape: PropTypes.number,
+};
+
+DIDMotif.defaultProps = {
+  size: 200,
+  animation: false,
+  responsive: false,
+  shape: null,
+};
+
+export default DIDMotif;

package/src/Avatar/etherscan-blockies.js

@@ -0,0 +1,81 @@
+/* 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 = `${rand() * 60 + 40}%`;
+  const l = `${(rand() + rand() + rand() + rand()) * 25}%`;
+  const color = `hsl(${h},${s},${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;
+}
+export default { createIcon };