@arcblock/ux 2.6.9 → 2.7.1

package/es/Locale/selector.js

@@ -0,0 +1,180 @@
+/* eslint-disable react/jsx-no-bind */
+import { useState, useContext, useRef, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Popper from '@mui/material/Popper';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import Box from '@mui/material/Box';
+import CheckIcon from '@mui/icons-material/Check';
+import GlobeIcon from '@arcblock/icons/lib/Globe';
+import { getColor, getBackground } from '../Util';
+import { LocaleContext } from './context';
+import { styled, useTheme } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function LocaleSelector(props) {
+  const {
+    showText,
+    popperProps,
+    popperType,
+    icon: Icon,
+    size,
+    ...rest
+  } = props;
+  const {
+    locale,
+    changeLocale,
+    languages
+  } = useContext(LocaleContext);
+  const anchorEl = useRef(null);
+  const [open, setOpen] = useState(false);
+  const theme = useTheme();
+  const dark = theme?.palette?.mode === 'dark';
+  const onSelect = newLocale => {
+    changeLocale(newLocale);
+    setOpen(false);
+    if (typeof props.onChange === 'function') {
+      props.onChange(newLocale);
+    }
+  };
+  const onClose = e => {
+    if (anchorEl.current?.contains(e.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  const ButtonComponent = showText ? Button : IconButton;
+  const handleEventProps = popperType === 'hover' ? {
+    onMouseEnter: () => {
+      setOpen(true);
+    },
+    onMouseLeave: () => {
+      setOpen(false);
+    }
+  } : {
+    onClick: () => {
+      setOpen(!open);
+    }
+  };
+  const renderIcon = useMemo(() => {
+    if (Icon) {
+      return /*#__PURE__*/_jsx(Icon, {});
+    }
+    return /*#__PURE__*/_jsx(GlobeIcon, {
+      style: {
+        width: 'auto',
+        height: size,
+        color: theme.palette.text.secondary
+      }
+    });
+  }, [Icon, theme?.palette?.text?.secondary, size]);
+  return /*#__PURE__*/_jsxs(Div, {
+    component: "div",
+    dark: dark,
+    theme: theme,
+    ...rest,
+    ...handleEventProps,
+    children: [/*#__PURE__*/_jsx(ButtonComponent, {
+      ref: anchorEl,
+      className: "trigger",
+      children: /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        children: [renderIcon, showText ? /*#__PURE__*/_jsx(Typography, {
+          component: "strong",
+          className: "trigger-text",
+          children: languages.find(x => x.code === locale).name
+        }) : '']
+      })
+    }), /*#__PURE__*/_jsx(Popper, {
+      open: open,
+      anchorEl: anchorEl.current,
+      ...popperProps,
+      disablePortal: true,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "locales",
+        children: /*#__PURE__*/_jsx(ClickAwayListener, {
+          onClickAway: onClose,
+          children: /*#__PURE__*/_jsx(MenuList, {
+            children: languages.map(({
+              code,
+              name
+            }) => /*#__PURE__*/_jsxs(MenuItem, {
+              className: "locale-item",
+              onClick: () => onSelect(code, name),
+              children: [/*#__PURE__*/_jsx(CheckIcon, {
+                className: code === locale ? 'check-icon check-icon-visible' : 'check-icon',
+                fontSize: "small"
+              }), name]
+            }, code))
+          })
+        })
+      })
+    })]
+  });
+}
+LocaleSelector.propTypes = {
+  size: PropTypes.number,
+  showText: PropTypes.bool,
+  popperProps: PropTypes.object,
+  onChange: PropTypes.func,
+  popperType: PropTypes.oneOf(['hover', 'click']),
+  icon: PropTypes.any
+};
+LocaleSelector.defaultProps = {
+  showText: true,
+  size: 24,
+  popperProps: {},
+  onChange: () => {},
+  popperType: 'click',
+  icon: null
+};
+const Div = styled('div', {
+  shouldForwardProp: prop => prop !== 'dark'
+})`
+  display: inline-block;
+
+  .trigger {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 14px;
+    white-space: nowrap;
+
+    .trigger-text {
+      margin-left: 5px;
+      font-size: 14px;
+      color: ${props => getColor(props)};
+    }
+  }
+
+  .locales {
+    background: ${props => getBackground(props)};
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .locale-item {
+    font-size: 16px;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    letter-spacing: 2px;
+    text-align: center;
+    color: ${props => getColor(props)};
+    cursor: pointer;
+    display: flex;
+    padding: 16px;
+    align-items: center;
+    .check-icon {
+      visibility: hidden;
+      margin-right: 4px;
+    }
+    .check-icon-visible {
+      visibility: visible;
+    }
+  }
+`;

package/es/Locale/util.js

@@ -0,0 +1,13 @@
+/* eslint-disable no-prototype-builtins */
+export const replace = (template, data) => template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
+export const translate = (translations, key, locale, fallbackLocale = 'en', data = {}) => {
+  if (!translations[locale] || !translations[locale][key]) {
+    console.warn(`Warning: no ${key} translation of ${locale}`);
+    if (fallbackLocale && translations[fallbackLocale]?.[key]) {
+      return replace(translations[fallbackLocale]?.[key], data);
+    }
+    return key;
+  }
+  return replace(translations[locale][key], data);
+};
+export const t = translate;

package/es/Logo/images/logo-dark-text.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="99" height="18" viewBox="0 0 99 18">
+    <path fill="#000" fill-rule="evenodd" d="M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917H43.065v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4V12.822c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"/>
+</svg>

package/es/Logo/images/logo-dark-top.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="52" viewBox="0 0 45 52">
+    <g fill="none" fill-rule="evenodd" stroke="#000">
+        <path d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25M.5 38.077l43.301-25"/>
+        <path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"/>
+    </g>
+</svg>

package/es/Logo/images/logo-light-text.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="99" height="18" viewBox="0 0 99 18">
+    <path fill="#FFF" fill-rule="evenodd" d="M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917H43.065v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4V12.822c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"/>
+</svg>

package/es/Logo/images/logo-light-top.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="52" viewBox="0 0 45 52">
+    <g fill="none" fill-rule="evenodd" stroke="#FFF">
+        <path d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25M.5 38.077l43.301-25"/>
+        <path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"/>
+    </g>
+</svg>

package/es/Logo/index.js

@@ -0,0 +1,136 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var LightLogo = function LightLogo(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      stroke: "#FFF",
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"
+      })]
+    })
+  });
+};
+LightLogo.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "45",
+  height: "52",
+  viewBox: "0 0 45 52"
+};
+var LightText = function LightText(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      fill: "#FFF",
+      fillRule: "evenodd",
+      d: "M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917h-7.09v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4v2.021c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"
+    })
+  });
+};
+LightText.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "99",
+  height: "18",
+  viewBox: "0 0 99 18"
+};
+var DarkLogo = function DarkLogo(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsxs("g", {
+      fill: "none",
+      fillRule: "evenodd",
+      stroke: "#000",
+      children: [/*#__PURE__*/_jsx("path", {
+        d: "M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"
+      })]
+    })
+  });
+};
+DarkLogo.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "45",
+  height: "52",
+  viewBox: "0 0 45 52"
+};
+var DarkText = function DarkText(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      d: "M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917h-7.09v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4v2.021c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"
+    })
+  });
+};
+DarkText.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "99",
+  height: "18",
+  viewBox: "0 0 99 18"
+};
+/**
+  @typedef {import('react').HTMLAttributes<HTMLSpanElement> & {
+    mode?: 'light' | 'dark',
+    layout?: 'vertical' | 'horizontal',
+    showText?: boolean,
+    showLogo?: boolean,    
+  }} LogoProps
+*/
+/**
+ * @description
+ * @export
+ * @param {LogoProps} props
+ * @return {React.ReactComponentElement}
+ */
+export default function Logo({
+  showText,
+  showLogo,
+  mode,
+  layout,
+  ...rest
+}) {
+  const logo = mode === 'light' ? /*#__PURE__*/_jsx(LightLogo, {}) : /*#__PURE__*/_jsx(DarkLogo, {});
+  const text = mode === 'light' ? /*#__PURE__*/_jsx(LightText, {
+    className: "logo-text"
+  }) : /*#__PURE__*/_jsx(DarkText, {
+    className: "logo-text"
+  });
+  return /*#__PURE__*/_jsxs(Container, {
+    layout: layout,
+    ...rest,
+    children: [showLogo && logo, showText && text]
+  });
+}
+Logo.propTypes = {
+  mode: PropTypes.oneOf(['light', 'dark']),
+  layout: PropTypes.oneOf(['vertical', 'horizontal']),
+  showText: PropTypes.bool,
+  showLogo: PropTypes.bool
+};
+Logo.defaultProps = {
+  mode: 'dark',
+  layout: 'vertical',
+  showText: true,
+  showLogo: true
+};
+
+/** @type {import('@emotion/styled').StyledComponent<HTMLSpanElement, {}, { ref?: React.Ref<any> | undefined;}>} */
+const Container = styled('span')`
+  display: inline-flex;
+  flex-direction: ${props => props.layout === 'horizontal' ? 'row' : 'column'};
+  justify-content: center;
+  align-items: center;
+
+  .logo-text {
+    ${props => props.layout === 'vertical' ? 'margin-top: 8px;' : ''}
+    ${props => props.layout === 'vertical' ? '' : 'margin-left: 8px;'};
+  }
+`;

package/es/Metric/index.js

@@ -0,0 +1,132 @@
+/* eslint-disable react/no-danger */
+import PropTypes from 'prop-types';
+import ImageIcon from '../Icon/image';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function Metric({
+  icon,
+  value,
+  name,
+  url,
+  animated,
+  LinkComponent,
+  prefix
+}) {
+  const metric = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "metric__image",
+      children: /*#__PURE__*/_jsx(ImageIcon, {
+        name: icon,
+        alt: typeof name === 'string' ? name : '',
+        size: 30,
+        prefix: prefix,
+        color: "#222222"
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `metric__number ${animated ? 'metric__number--animated' : ''}`,
+        dangerouslySetInnerHTML: {
+          __html: value
+        }
+      }), /*#__PURE__*/_jsx("div", {
+        className: "metric__name",
+        children: name
+      })]
+    })]
+  });
+  return /*#__PURE__*/_jsx(Container, {
+    children: url ? /*#__PURE__*/_jsx(LinkComponent, {
+      to: url,
+      children: metric
+    }) : metric
+  });
+}
+Metric.propTypes = {
+  icon: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  name: PropTypes.node.isRequired,
+  animated: PropTypes.bool,
+  url: PropTypes.string,
+  LinkComponent: PropTypes.any,
+  prefix: PropTypes.string
+};
+Metric.defaultProps = {
+  animated: false,
+  url: '',
+  LinkComponent: null,
+  prefix: '/images'
+};
+const Container = styled('div')`
+  border-left: 1px solid ${props => props.theme.typography.color.main};
+  padding: 10px 0 10px 16px;
+  @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+    padding: 0 0 0 8px;
+  }
+
+  display: flex;
+  justify-items: center;
+  align-items: flex-start;
+
+  a {
+    display: flex;
+    justify-items: center;
+    align-items: flex-start;
+  }
+
+  .metric__image {
+    margin-right: 8px;
+  }
+
+  .metric__number {
+    margin-bottom: 8px;
+    font-size: ${props => props.size === 'small' ? 32 : 36}px;
+    font-weight: 600;
+    line-height: 36px;
+    color: ${props => props.theme.typography.color.main};
+
+    small {
+      font-size: 12px;
+      line-height: 12px;
+    }
+
+    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+      font-size: ${props => props.size === 'small' ? 24 : 28}px;
+      line-height: ${props => props.size === 'small' ? 24 : 28}px;
+      margin-bottom: 2px;
+    }
+  }
+
+  .metric__number--animated {
+    animation-name: blink-opacity;
+    animation-duration: 250ms;
+    animation-timing-function: linear;
+    animation-iteration-count: 1;
+    background-color: transparent !important;
+  }
+
+  .metric__name {
+    font-size: 14px;
+    text-transform: capitalize;
+    line-height: 1.2;
+    font-weight: 500;
+    color: ${props => props.theme.typography.color.main};
+    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+      font-size: 10px;
+      line-height: 1;
+    }
+  }
+
+  @keyframes blink-opacity {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;

package/es/NFTDisplay/README.md

@@ -0,0 +1,59 @@
+# NFTDisplay
+
+## 01 使用
+
+### 01.01 默认样式
+
+NFTDisplay 组件默认尺寸为 *150x150*, 可以通过 css 设置 width/height. 固定尺寸的使用场景感觉比较少, 多数情况应该都需要将 NFTDisplay 应用于响应式布局中. 
+
+### 01.02 aspect ratio
+
+可以使用 aspect prop 设置 NFTDisplay 的宽高比, NFTDisplay 包裹一两层 div/span 标签 (用来控制布局, 没有直接把 img 标签渲染出来), 所以这里说的长宽比指的不是 img 的长宽比, 图片的尺寸大小不一, 长宽比也是既定的, aspect prop 控制的是包裹 img 容器的长宽比.
+
+NFTDisplay 宽高比的计算是根据父容器的 width 来确定的 (NFTDisplay 会填充整个宽度), 所以可以通过控制父容器的 width 来控制 NFTDisplay 的大小.
+
+### 01.03 inset
+
+inset 设置为 true 时 NFTDisplay 会镶嵌/填满父容器 (并垂直+水平居中显示图片), 所以父容器必须有明确的宽高 (尤其是高度). 响应式布局中应该会比较常用.
+
+注: inset 比 aspect ratio 优先级高, 如果同时设置了 inset 和 aspect, 则后者不生效.
+
+### 01.04 asset data (prop)
+
+可以为 asset data prop 传入 raw data 或 parsed data, 避免多次解析 asset data.
+
+### 01.05 broken image & error handling
+
+* display 加载失败时会显示一个 broken-image, 可以从外部覆盖 `.nft-display--broken` 的样式来调整尺寸/颜色等样式
+* error handling, 这部分感觉出错原因可能性会很多, 有 json 解析错误、某字段缺失、某 object 指定路径的值缺失、nft type 不支持等等, 暂时没想到如何更合理的捕获和处理这些错误. 
+
+### 02 svg 加载
+
+基于 `img` 标签加载 NFT Display. 几种 nft type 的加载:
+
+- url  
+  直接使用 `<img>`
+- svg_gzipped  
+  content => ungzip => svgToImgUrl => `<img>`
+- svg (未测试, 需要测试数据)  
+  content => svgToImgUrl => `<img>`
+- html (TODO)  
+  基于 `<img>` 的加载方式不适用, 目前没有发现这种 nft type 的测试数据
+
+基于 `<img>` 标签的加载方式没有样式污染问题, 加载、尺寸控制也比较方便, 不过据说有些情况下 svg 可能无法正确显示 (比如 svg 加载了 font|image 资源), 目前没有发现问题, 还需要更多的观察
+
+## 03 iframe 第三方嵌入 (TODO)
+
+需要设计 iframe 的 API (iframe#src 查询参数), 目前想到的参数:
+
+- address : asset address  
+  调用 getAssetState 接口获取 display 数据进行展示
+- 样式控制相关的参数 ?
+
+## 04 参考
+
+* [提供一个 NFT display 组件 · Issue #199 · ArcBlock/ux](https://github.com/ArcBlock/ux/issues/199)
+* [2021徽章出现奇怪的渲染 · Issue #230 · blocklet/nft-marketplace](https://github.com/blocklet/nft-marketplace/issues/230)
+* [Adding vector graphics to the Web - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+* [The Best Way to Embed SVG on HTML (2021)](https://vecta.io/blog/best-way-to-embed-svg)
+* [javascript - Do I always need to call URL.revokeObjectURL() explicitly? - Stack Overflow](https://stackoverflow.com/questions/49209756/do-i-always-need-to-call-url-revokeobjecturl-explicitly)

package/es/NFTDisplay/aspect-ratio-container.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+function AspectRatioContainer({
+  aspect,
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(Root, {
+    aspect: aspect,
+    ...rest,
+    children: /*#__PURE__*/_jsx("span", {
+      className: "aspect-ratio-container__inner",
+      children: children
+    })
+  });
+}
+AspectRatioContainer.propTypes = {
+  aspect: PropTypes.number.isRequired,
+  children: PropTypes.node.isRequired
+};
+const Root = styled('span')`
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: ${({
+  aspect
+}) => 1 / aspect * 100}%;
+
+  .aspect-ratio-container__inner {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+`;
+export default AspectRatioContainer;

package/es/NFTDisplay/broken.js

@@ -0,0 +1,18 @@
+import BrokenImage from '@mui/icons-material/BrokenImage';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Broken() {
+  return /*#__PURE__*/_jsx(Root, {
+    className: "nft-display-broken"
+  });
+}
+const Root = styled(BrokenImage)`
+  && {
+    width: 100%;
+    max-width: 200px;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    fill: #ddd;
+  }
+`;

package/es/NFTDisplay/demo/data/asset-state-display-url.json

@@ -0,0 +1,7 @@
+{
+  "address": "zjdoYZePuT84nbvNkVtwgzxeXWYaAn5wojay",
+  "display": {
+    "content": "http://ffd25853-znkjt5vbgnezh4p6v4dsaye61e7pxxn3vk4j.did.abtnet.io/uploads/tIfhUg4OKbi786Y-uT4rG.png",
+    "type": "url"
+  }
+}

package/es/NFTDisplay/demo/data/asset-state-gzipped-svg-1-1.json

@@ -0,0 +1,10 @@
+{
+  "address": "zjdpnLYRLWGyzcaHjet5gKBGuGHoDqxT9YUt",
+  "moniker": "Badge ",
+  "owner": "zNKeLKixvCM32TkVM1zmRDdAU3bvm3dTtAcM",
+  "context": {},
+  "data": {
+    "typeUrl": "vc",
+    "value": "{\"proof\":{\"type\":\"Ed25519Signature\",\"created\":\"2021-07-12T07:56:32.514Z\",\"proofPurpose\":\"assertionMethod\",\"jws\":\"euS8o6b82U7x8Y609tHkLmnGIxWbk8gkyb6f3XFxlksmoMqCxRNHTAlJMYTXIyQmhmMGTjuxGWdrnyUoOCrZCQ\"},\"@context\":\"https://schema.arcblock.io/v0.1/context.jsonld\",\"id\":\"z2iU9z8uGuoHBy52c2YW8QkYDRzTvdzbuP7Nz\",\"type\":[\"NFTBadge\",\"VerifiableCredential\"],\"issuer\":{\"id\":\"zNKeLKixvCM32TkVM1zmRDdAU3bvm3dTtAcM\",\"pk\":\"zGph57aL5bz85oMuY9nW2PFjPTa9FvSGvS761TJk15XWe\",\"name\":\"ArcBlock\"},\"issuanceDate\":\"2021-07-12T07:56:32.514Z\",\"credentialSubject\":{\"id\":\"z1cbNRZHrCdH3C2Q7ML2sAKFhB88Ptfh7Et\",\"name\":\"Badge \",\"description\":\"This is a test badge that is on local chain\",\"display\":{\"type\":\"svg_gzipped\",\"content\":\"H4sIAAAAAAAA/7VX227jNhB9br9CUF8pmndSTpyFItvoQ/oNhVdRYzVa25BUO95F/71DitTaDVtsgCSBRfnw8MzMGeri208vX9rkWHd9s98tUopJmny6u+2PT0nzuEgfNue6+52mST+c23qR1rvN57bOPm+q56du/9fucb6rTwmBf8qM/dykl2Kw8NjUp/v9yyK9IKUJBJ33h00Fkoeu7uvuWDtw1y/S7TAc5rPZ6XTCJ4733dOMEUJmkJKnzF/aZvccI9I8z2duNoUabMrJcD5AkKF+GWZV36d3P/+E+4F8+6Np2/kv3DCl+c3fDqQeFJoTQzzIPEiIvi+VB7kHl0IUeWAKDxaa5ZOm9OCayiJfeVB920PpzXCeEyxuvH5ZrFfGE/QFQd5EUjXfIqvyAN7nZDkVRS60+Ki12+/qm37o9s81ZOb+/Nfs1DwO2zkLX8HJutoc5q7Vl+Cf+2Z3jX5phrprGxjmNFhCg6VmLc09C2jwVK1EWUzcYOqaa1ksAxpcXa+XK54HdLJ1VSo+6aqA5oUWwWyqQ7MKVbBJNziYr5bLvAjoZCEpWRGiMTKhhTRlQENthOtShR6wUFtelGR5H9CpttFsj4qL1rBYm5mM7JTr7Xm5l2hUw9f/r6Y7N6+aDl17n64zE4s49uQqonivgHks4Lg1PiQgJ5GAfnd8yIXEaSSgv/tcBeTvFZBFK3T3wOsKMRPfd1JUise6M94P35B7VDpyBV2F8VfCx/RE/mBd/x8wKq1+8Ap6t1riN4m3Phmi0iZyD5vuULcz95S+u62aroKnddVuengFgCd0mlTw0qAEjOdx7GAg6ew1l0a50nG7uhoumDJNtnXztB0WKQOaK2qRcjgFAaHT5Oy+xYKI6yhauSicYxmlyyidacws/bAZthdkmISXrd+4xhppjU1FMioRhYsrsyuQPbizisJTHBFEc0AlsBnHBlGBaWkEFkhKOGiJhAFYCTcmSSnyEeHKwnQctaoIEqBBQcvqcVhLOUhxgxUyEg4uI0Pt0pDb1ze4wxhWkS6o713g/9UE89omxkeboC4olrUK55CzqiiC1yRkzbLmsIxi2cKBZ5ByC1VkYEpFsIFpA1SRjVQDo2gtCci0zaD8TCdJBVMyoxmzH9AlbgZpxwSvaGXpoGMDKQCU07Va1jFpNSE4AraVYnYJogiaCGfywSf/9XV5vjroDbSeYPUAXeNyy8mDgqYgUUrYa9AwOBVwYmkTNyInvFkUXBK2Pmo3CDNelukW0oEK8yCvGNQnEAzcDn5dRJl6aUPsOvKr0DivrKmIgFU5VG/cCJ8jOEBhNzPng4ORn9pyBlNulYWQ22Tj9BEWwa41AsFOZMhYkiDIx4tlNCZkE4GN6joIuRAIZNs9jlMubnKEkZ8ac3ETaISFH30ulcVl5vGw1FUeSUf6dHz/WriQwWmwv8pMBp5mVGfKQgo2jwqddkL2Z87dP93PaliVDQAA\"}},\"signature\":\"z5m2NgRF3gnew9o6vqwCdgsYYN8qTszf6g8fF27QoUmnNWEHuUiLyUCDNS8TFDETq9n2SNac25vUmPrt3LKJwdF7R\"}"
+  }
+}