@arcblock/ux 2.9.91 → 2.10.1

package/es/Util/index.js

@@ -1,363 +0,0 @@
-/* eslint-disable no-bitwise */
-import padStart from 'lodash/padStart';
-import { getDIDMotifInfo, colors } from '@arcblock/did-motif';
-import { DID_PREFIX } from './constant';
-let dateTool = null;
-export function parseQuery(str) {
-  return str.replace(/^\?/, '').split('&').map(x => x.split('=')).filter(([key]) => !!key).reduce((memo, x) => {
-    const key = x[0];
-    const value = decodeURIComponent(x[1]) || true;
-    memo[key] = value;
-    return memo;
-  }, {});
-}
-export function stringifyQuery(params = {}) {
-  return new URLSearchParams(params).toString();
-}
-
-/**
- * @param {number} opts.expireInDays
- * @param {string} opts.path
- * @param {domain} opts.domain
- * @param {boolean} opts.returnDomain if === false, opts.domain will be skipped
- */
-export function getCookieOptions(expireInDays = 1) {
-  let opts = {
-    expireInDays
-  };
-  if (typeof expireInDays === 'object') {
-    opts = expireInDays;
-  }
-  if (opts.path === undefined) {
-    opts.path = '/';
-  }
-  if (!opts.expireInDays) {
-    opts.expireInDays = 1;
-  }
-  const options = {
-    expires: opts.expireInDays,
-    path: opts.path,
-    domain: opts.domain || '',
-    sameSite: opts.sameSite || 'lax'
-  };
-  if (typeof window === 'undefined' || opts.domain || opts.returnDomain === false) {
-    if (opts.returnDomain === false) {
-      delete options.domain;
-    }
-    return options;
-  }
-  return options;
-}
-export const getColor = props => {
-  if (props.color) {
-    return props.color;
-  }
-  if (props.dark) {
-    return props.theme.palette.common.white;
-  }
-  return props.theme.palette.text.primary;
-};
-export const getBackground = props => {
-  if (props.background) {
-    return props.background;
-  }
-  if (props.dark) {
-    return props.theme.palette.common.black;
-  }
-  return props.theme.palette.common.white;
-};
-export function mergeProps(props, component, jsonAttrs = []) {
-  const newProps = Object.assign({}, props);
-  Object.keys(component.defaultProps || {}).forEach(x => {
-    if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
-      newProps[x] = component.defaultProps[x];
-    }
-  });
-  if (Array.isArray(jsonAttrs)) {
-    jsonAttrs.forEach(x => {
-      if (typeof newProps[x] === 'string') {
-        try {
-          newProps[x] = JSON.parse(newProps[x]);
-        } catch (err) {
-          // Do nothing
-        }
-      }
-    });
-  }
-  Object.keys(newProps).forEach(x => {
-    if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
-      newProps[x] = '';
-    }
-  });
-  return newProps;
-}
-export function getCopyright(startYear = 2017) {
-  const currentYear = new Date().getFullYear();
-  return `${currentYear}` === `${startYear}` ? `© ArcBlock ${currentYear}` : `© ArcBlock ${startYear} - ${currentYear}`;
-}
-export const getTimezone = () => {
-  if (typeof Intl === 'object' && typeof Intl.DateTimeFormat === 'function' && typeof Intl.DateTimeFormat().resolvedOptions === 'function') {
-    return Intl.DateTimeFormat().resolvedOptions().timeZone;
-  }
-  return '';
-};
-export const str2color = str => {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  let colour = '#';
-  for (let j = 0; j < 3; j++) {
-    const value = hash >> j * 8 & 0xff;
-    colour += `00${value.toString(16)}`.substr(-2);
-  }
-  return colour;
-};
-export const formatUptime = uptime => {
-  const total = Math.round(uptime / 1000);
-  const hours = Math.floor(total / 3600);
-  const minutes = Math.floor((total - hours * 3600) / 60);
-  const seconds = total % 60;
-  return `${padStart(hours, 2, '0')}:${padStart(minutes, 2, '0')}:${padStart(seconds, 2, '0')}`;
-};
-
-/**
- * Set the date tool library which support for format() and locale() functions,
- *  moment and dayjs are recommended.
- * @param {object} the date tool library
- */
-export function setDateTool(tool) {
-  dateTool = tool;
-}
-export function getDateTool() {
-  return dateTool;
-}
-const createDateFormatter = format => (date, {
-  locale,
-  tz
-}) => {
-  if (dateTool === null) {
-    throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
-  }
-  if (!date) {
-    return '-';
-  }
-  let instance = dateTool(date);
-  if (tz) {
-    instance = instance.tz(tz);
-  }
-  if (typeof locale !== 'undefined') {
-    instance = instance.locale(locale);
-  }
-  return instance.format(format);
-};
-
-/**
- * Format the time string as `ll` format: MMM D, YYYY
- * Ensure that the setDateTool() function is called first to set the time tool library.
- * @param {string} date date string
- * @param {object} option
- * @param {string} option.locale, default: en
- * @param {string} option.tz, default: timzone
- * @returns formatted date string
- */
-export function formatToDate(date, {
-  locale,
-  tz
-} = {}) {
-  return createDateFormatter('ll')(date, {
-    locale,
-    tz
-  });
-}
-
-/**
- * Format the time string as `lll` format: MMM D, YYYY h:mm A
- * Ensure that the setDateTool() function is called first to set the time tool library.
- * @param {string} date date string
- * @param {object} option
- * @param {string} option.locale, default: en
- * @param {string} option.tz, default: timzone
- * @returns formatted date string
- */
-export function formatToDatetime(date, {
-  locale,
-  tz
-} = {}) {
-  return createDateFormatter('lll')(date, {
-    locale,
-    tz
-  });
-}
-export function detectWalletExtension() {
-  const extension = window?.ABT_DEV || window.ABT;
-  if (extension && typeof extension.open === 'function') {
-    return extension;
-  }
-  return null;
-}
-export function openWebWallet({
-  webWalletUrl,
-  action = 'login',
-  locale = 'en',
-  url,
-  windowFeatures
-}) {
-  // web wallet extension
-  const extension = detectWalletExtension();
-  if (extension) {
-    extension.open({
-      action,
-      locale,
-      url: encodeURIComponent(url)
-    });
-    return;
-  }
-  const defaultWindowFeatures = {
-    toolbar: 'no',
-    location: 'no',
-    status: 'no',
-    menubar: 'no',
-    scrollbars: 'yes',
-    resizable: 'yes',
-    // iphone 8plus size
-    width: 414,
-    height: 736
-  };
-  const windowUrl = `${webWalletUrl}?action=${action}&locale=${locale}&url=${encodeURIComponent(url)}`;
-  const mergedWindowFeatures = Object.assign({}, defaultWindowFeatures, windowFeatures);
-  const getWindowWidth = win => {
-    return win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth;
-  };
-  // 默认在浏览器右上角弹出窗口
-  if (!('left' in mergedWindowFeatures)) {
-    const winWidth = getWindowWidth(window.top || window);
-    const winLeft = window.screenLeft || window.screenX;
-    mergedWindowFeatures.left = winWidth + winLeft - mergedWindowFeatures.width;
-  }
-  if (!('top' in mergedWindowFeatures)) {
-    const winTop = window.screenTop || window.screenY;
-    mergedWindowFeatures.top = winTop;
-  }
-  const strWindowFeatures = Object.keys(mergedWindowFeatures).map(key => `${key}=${mergedWindowFeatures[key]}`).join(',');
-  window.open(windowUrl, 'targetWindow', strWindowFeatures);
-}
-export const getFontSize = size => {
-  // 12px 及以上的 size 有效, 否则返回 inherit
-  if (size && Number(size) >= 12) {
-    return `${Number(size)}px`;
-  }
-  return 'inherit';
-};
-
-// 参考: asset-chain @arcblock/did
-export const isEthereumDid = did => {
-  const address = did.replace(DID_PREFIX, '');
-  // check if it has the basic requirements of an address
-  if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
-    return false;
-  }
-  return true;
-};
-
-/**
- *
- * @param {string} url 需要处理的 url
- * @param {{imageFilter: 'crop'|'resize'; w?: number; h?: number; r?: 0|90|180|270}} params
- * @returns
- */
-export const appendParams = (url, params) => {
-  if (!params) {
-    return url;
-  }
-  try {
-    // HACK: 如果 url 中带有域名，则 urlInstance.origin 为 url 中的域名；否则，借用当前页面的 location.origin 作为域名来拼接一个 url
-    const urlInstance = new URL(url, window.location.origin);
-    Object.keys(params).forEach(key => {
-      urlInstance.searchParams.set(key, params[key]);
-    });
-    // HACK: 如果前后域名一致，代表前面已经借用了 location.origin，这个时候只需要返回 urlInstance.pathname + urlInstance.search 即可
-    if (urlInstance.origin === window.location.origin) {
-      return urlInstance.pathname + urlInstance.search;
-    }
-    return urlInstance.href;
-  } catch {
-    return url;
-  }
-};
-export const getUserAvatar = (avatar, size = 48) => {
-  if (!avatar) {
-    return avatar;
-  }
-  if (avatar.indexOf('/.well-known/service') >= 0) {
-    return appendParams(avatar, {
-      imageFilter: 'resize',
-      w: size,
-      h: size
-    });
-  }
-  return avatar;
-};
-export const sleep = (time = 0) => {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve();
-    }, time);
-  });
-};
-export const isUrl = str => {
-  return /^https?:\/\//.test(str);
-};
-const visitorIdKey = '__visitor_id';
-export const getVisitorId = () => {
-  return localStorage.getItem(visitorIdKey);
-};
-export const setVisitorId = value => {
-  if (value === null) {
-    localStorage.removeItem(visitorIdKey);
-  } else {
-    localStorage.setItem(visitorIdKey, value);
-  }
-};
-export const getDIDColor = 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];
-  }
-  try {
-    const didMotifInfo = getDIDMotifInfo(did);
-    return didMotifInfo?.color;
-  } catch {
-    return null;
-  }
-};
-
-/**
- * Retrieves the appropriate translation based on the locale, with fallback options.
- *
- * @param {Object|string} translations - The translations object or string to retrieve translation from.
- * @param {string} locale - The locale to use for retrieving the translation.
- * @param {Object} options - Additional options for fallbackLocale and defaultValue.
- * @param {string} [options.fallbackLocale='en'] - The fallback locale to use if the translation for the specified locale is not found.
- * @param {string} [options.defaultValue='unknown'] - The default value to return if no translation is found.
- * @return {string} The translated string based on the locale, with fallback options if necessary.
- */
-export const getTranslation = (translations, locale, {
-  fallbackLocale = 'en',
-  defaultValue = 'unknown'
-} = {}) => {
-  if (typeof translations === 'string') {
-    return translations;
-  }
-  let translation;
-  if (locale) {
-    translation = translations[locale];
-  }
-  if (!translation || typeof translation !== 'string') {
-    translation = translations[fallbackLocale];
-  }
-  if (!translation || typeof translation !== 'string') {
-    translation = defaultValue;
-  }
-  return translation;
-};

package/es/Util/passport.js

@@ -1,62 +0,0 @@
-import { getNftBGColor, DEFAULT_COLORS, getNftBGColorFromDid, getSvg } from '@arcblock/nft-display';
-export const getPassportColor = (preferredColor, did) => {
-  let color;
-  if (preferredColor === 'default') {
-    color = DEFAULT_COLORS['app-passport'];
-  } else if (preferredColor === 'auto') {
-    color = getNftBGColorFromDid(did);
-  } else {
-    color = getNftBGColor(preferredColor);
-  }
-  return color;
-};
-export const getTextColor = background => {
-  const r = parseInt(background.slice(1, 3), 16);
-  const g = parseInt(background.slice(3, 5), 16);
-  const b = parseInt(background.slice(5, 7), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.5 ? '#111' : '#EEE';
-};
-export const createPassportSvg = ({
-  issuer = '',
-  title = '',
-  issuerDid = '',
-  issuerAvatarUrl = '',
-  ownerDid = '',
-  ownerName = '',
-  ownerAvatarUrl = '',
-  preferredColor = 'default',
-  revoked = false,
-  isDataUrl = false,
-  width = '100%',
-  height = '100%'
-}) => {
-  const color = getPassportColor(preferredColor, issuerDid);
-  const svgXML = getSvg({
-    width,
-    height,
-    tag: revoked ? 'revoked' : '',
-    tagVariant: revoked ? 'error' : 'info',
-    color,
-    did: ownerDid,
-    variant: 'app-passport' || ownerName,
-    verifiable: true,
-    issuer: {
-      name: issuer,
-      icon: issuerAvatarUrl
-    },
-    header: {
-      name: title,
-      icon: ownerAvatarUrl
-    },
-    // FIXME: @wangshijun this should be dynamic
-    extra: {
-      key: 'Exp',
-      value: '2123-01-01'
-    }
-  });
-  if (isDataUrl) {
-    return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
-  }
-  return svgXML;
-};

package/es/Util/wallet.js

@@ -1,32 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export const providerName = 'wallet_url';
-
-/**
- * 获取 web wallet url, 常用于为 did connect 组件传递 webWalletUrl 参数,
- * 更明确的说, 这里获取的应该是 **default web wallet url**,
- * 如果用户使用自定义的 web wallet url, 不应该使用该方法, 应该显式的将自定义的 web wallet url 传递给 did connect 组件
- * (参考: https://github.com/blocklet/ocap-playground/issues/98)
- *
- * 获取优先级:
- * - localStorage  使用 provider 注册
- * - window.env.webWalletUrl
- * - window.blocklet.webWalletUrl
- * - production web wallet url
- */
-export const getWebWalletUrl = () => {
-  return window.localStorage.getItem(providerName) || window.env?.webWalletUrl || window.blocklet?.webWalletUrl || 'https://web.abtwallet.io/';
-};
-
-// 检查 wallet url protocol 和当前页面地址的 protocol 是否一致
-export const checkSameProtocol = webWalletUrl => {
-  const {
-    protocol
-  } = window.location;
-  let walletProtocol = '';
-  try {
-    walletProtocol = new URL(webWalletUrl).protocol;
-  } catch (error) {
-    walletProtocol = '';
-  }
-  return protocol === walletProtocol;
-};

package/es/Video/index.js

@@ -1,89 +0,0 @@
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import Player from 'react-player';
-import CircularProgress from '@mui/material/CircularProgress';
-import { mergeProps } from '../Util';
-import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  string,
-  number,
-  array,
-  oneOfType,
-  object
-} = PropTypes;
-export default function Video(props) {
-  const newProps = mergeProps(props, Video, ['style']);
-  const {
-    url,
-    width,
-    height,
-    style
-  } = newProps;
-  const [loaded, setLoaded] = useState(false);
-  const styles = Object.assign({
-    border: 'none'
-  }, style, {
-    width,
-    height,
-    visibility: loaded ? 'visible' : 'hidden'
-  });
-  if (url.indexOf('v.qq.com') > 0) {
-    return /*#__PURE__*/_jsxs(Placeholder, {
-      style: {
-        width,
-        height
-      },
-      children: [/*#__PURE__*/_jsx("iframe", {
-        title: url,
-        style: styles,
-        src: url,
-        onLoad: () => setLoaded(true),
-        allowFullScreen: true
-      }), !loaded && /*#__PURE__*/_jsx(CircularProgress, {
-        className: "loading-indicator",
-        color: "primary"
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(Placeholder, {
-    style: {
-      width,
-      height
-    },
-    children: [/*#__PURE__*/_jsx(Player, {
-      style: styles,
-      ...newProps,
-      onReady: () => setLoaded(true)
-    }), !loaded && /*#__PURE__*/_jsx(CircularProgress, {
-      className: "loading-indicator",
-      color: "primary"
-    })]
-  });
-}
-Video.propTypes = {
-  url: oneOfType([string, array, object]).isRequired,
-  width: oneOfType([string, number]),
-  height: oneOfType([string, number]),
-  style: oneOfType([string, object])
-};
-Video.defaultProps = {
-  width: 640,
-  height: 400,
-  style: {}
-};
-const Placeholder = styled('div')`
-  background-color: #222222;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-
-  .loading-indicator {
-    position: absolute;
-    top: 45%;
-    left: 47%;
-    z-index: 2;
-  }
-`;

package/es/Wallet/Action.js

@@ -1,119 +0,0 @@
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import logo from './images/abtwallet.png';
-import { mergeProps } from '../Util';
-import colors from '../Colors';
-import Button from '../Button';
-import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function WalletAction(props) {
-  const newProps = mergeProps(props, WalletAction, ['style']);
-  const {
-    action,
-    size,
-    textLayout,
-    style = {},
-    ...rest
-  } = newProps;
-  const styles = Object.assign({}, style, {
-    border: 'none',
-    padding: 0
-  });
-  return /*#__PURE__*/_jsx(Button, {
-    style: styles,
-    ...rest,
-    variant: "outlined",
-    children: /*#__PURE__*/_jsxs(Content, {
-      size: size,
-      color: styles.color,
-      children: [/*#__PURE__*/_jsx("img", {
-        src: logo,
-        className: "wallet-action__logo",
-        alt: "DID Wallet"
-      }), textLayout === 'vertical' && /*#__PURE__*/_jsxs(Typography, {
-        className: "wallet-action__text",
-        component: "div",
-        children: [/*#__PURE__*/_jsxs("span", {
-          className: "wallet-action__action",
-          children: [action, " with"]
-        }), /*#__PURE__*/_jsx("span", {
-          className: "wallet-action__title",
-          children: "DID Wallet"
-        })]
-      }), textLayout === 'horizontal' && /*#__PURE__*/_jsxs("span", {
-        className: "wallet-action__title",
-        style: {
-          padding: 8
-        },
-        children: [action, " with DID Wallet"]
-      })]
-    })
-  });
-}
-WalletAction.propTypes = {
-  action: PropTypes.string,
-  size: PropTypes.oneOf(['xlarge', 'large', 'medium', 'small']),
-  textLayout: PropTypes.oneOf(['vertical', 'horizontal']),
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
-};
-WalletAction.defaultProps = {
-  action: 'Login',
-  textLayout: 'vertical',
-  size: 'medium',
-  style: {}
-};
-const sizes = {
-  logo: {
-    small: 32,
-    medium: 44,
-    large: 56,
-    xlarge: 88
-  },
-  font: {
-    small: 9,
-    medium: 11,
-    large: 13,
-    xlarge: 18
-  }
-};
-const Content = styled('div')`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    opacity: 0.9;
-  }
-
-  .wallet-action__logo {
-    width: auto;
-    height: auto;
-    max-width: ${props => sizes.logo[props.size]}px;
-    margin-left: 5px;
-  }
-
-  .wallet-action__text {
-    padding: 8px;
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-  }
-
-  .wallet-action__action {
-    font-size: ${props => sizes.font[props.size]}px;
-    text-transform: capitalize;
-    margin-bottom: 1px;
-    color: ${props => props.color || colors.primary.main};
-    letter-spacing: 1px;
-  }
-
-  .wallet-action__title {
-    font-size: ${props => sizes.font[props.size] * 1.5}px;
-    text-transform: capitalize;
-    color: ${props => props.color || colors.primary.main};
-    letter-spacing: 1px;
-  }
-`;