@arcblock/ux 1.16.0 → 1.16.4

package/src/Locale/selector.js

@@ -0,0 +1,138 @@
+import React, { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { useTheme } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Popper from '@material-ui/core/Popper';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import CheckIcon from '@material-ui/icons/Check';
+
+import { getColor, getBackground } from '../Util';
+
+import { LocaleContext, languages } from './context';
+
+import globeDark from './images/globe-dark.png';
+import globeLight from './images/globe-light.png';
+
+function LocaleSelector(props) {
+  const { dark, showText, popperProps, ...rest } = props;
+  const { locale, changeLocale } = useContext(LocaleContext);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
+  const theme = useTheme();
+
+  const onSelect = newLocale => {
+    changeLocale(newLocale);
+    setOpen(false);
+    if (typeof props.onChange === 'function') {
+      props.onChange(newLocale);
+    }
+  };
+
+  function onClose(e) {
+    if (anchorEl && anchorEl.contains(e.target)) return;
+    setOpen(false);
+  }
+
+  const ButtonComponent = showText ? Button : IconButton;
+
+  return (
+    <Div component="div" dark={dark} theme={theme} {...rest}>
+      <ButtonComponent
+        buttonRef={node => setAnchorEl(node)}
+        className="trigger"
+        onClick={() => setOpen(!open)}>
+        <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />
+        {showText ? (
+          <Typography component="strong" className="trigger-text">
+            {languages.find(x => x.value === locale).text}
+          </Typography>
+        ) : (
+          ''
+        )}
+      </ButtonComponent>
+      <Popper open={open} anchorEl={anchorEl} {...popperProps} disablePortal>
+        <div className="locales">
+          <ClickAwayListener onClickAway={onClose}>
+            <MenuList>
+              {languages.map(({ value, text }) => (
+                <MenuItem key={value} className="locale-item" onClick={() => onSelect(value, text)}>
+                  <CheckIcon
+                    className={value === locale ? 'check-icon check-icon-visible' : 'check-icon'}
+                    fontSize="small"
+                  />
+                  {text}
+                </MenuItem>
+              ))}
+            </MenuList>
+          </ClickAwayListener>
+        </div>
+      </Popper>
+    </Div>
+  );
+}
+
+LocaleSelector.propTypes = {
+  dark: PropTypes.bool,
+  size: PropTypes.number,
+  showText: PropTypes.bool,
+  popperProps: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+LocaleSelector.defaultProps = {
+  dark: false,
+  showText: true,
+  size: 24,
+  popperProps: {},
+  onChange: () => {},
+};
+
+export default LocaleSelector;
+
+const Div = styled.div`
+  .trigger {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 14px;
+    .trigger-image {
+      width: ${props => props.size}px;
+      height: ${props => props.size}px;
+    }
+    .trigger-text {
+      margin-left: 5px;
+      font-size: 14px;
+    }
+  }
+
+  .locales {
+    background: ${props => getBackground(props)};
+  }
+
+  .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/src/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/src/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/src/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/src/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/src/Logo/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { ReactComponent as LightLogo } from './images/logo-light-top.svg';
+import { ReactComponent as LightText } from './images/logo-light-text.svg';
+import { ReactComponent as DarkLogo } from './images/logo-dark-top.svg';
+import { ReactComponent as DarkText } from './images/logo-dark-text.svg';
+
+export default function Logo({ showText, showLogo, mode, layout, ...rest }) {
+  const logo = mode === 'light' ? <LightLogo /> : <DarkLogo />;
+  const text =
+    mode === 'light' ? <LightText className="logo-text" /> : <DarkText className="logo-text" />;
+
+  return (
+    <Container layout={layout} {...rest}>
+      {showLogo && logo}
+      {showText && text}
+    </Container>
+  );
+}
+
+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,
+};
+
+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/src/Metric/index.js

@@ -0,0 +1,115 @@
+/* eslint-disable react/no-danger */
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import ImageIcon from '../Icon/image';
+
+export default function Metric({ icon, value, name, url, animated, LinkComponent, prefix }) {
+  const metric = (
+    <>
+      <div className="metric__image">
+        <ImageIcon name={icon} alt={name} size={30} prefix={prefix} color="#222222" />
+      </div>
+      <div>
+        <div
+          className={`metric__number ${animated ? 'metric__number--animated' : ''}`}
+          dangerouslySetInnerHTML={{ __html: value }}
+        />
+        <div className="metric__name">{name}</div>
+      </div>
+    </>
+  );
+
+  return <Container>{url ? <LinkComponent to={url}>{metric}</LinkComponent> : metric}</Container>;
+}
+
+Metric.propTypes = {
+  icon: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  name: PropTypes.string.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/src/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/src/NFTDisplay/aspect-ratio-container.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+function AspectRatioContainer({ aspect, children, ...rest }) {
+  return (
+    <Root aspect={aspect} {...rest}>
+      <span className="aspect-ratio-container__inner">{children}</span>
+    </Root>
+  );
+}
+
+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/src/NFTDisplay/broken.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styled from 'styled-components';
+import BrokenImage from '@material-ui/icons/BrokenImage';
+
+export default function Broken() {
+  return <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/src/NFTDisplay/index.js

@@ -0,0 +1,230 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import pako from 'pako';
+import base64 from 'base64-url';
+import isSvg from 'is-svg';
+import AspectRatioContainer from './aspect-ratio-container';
+import ImgSvgEmbedder from './svg-embedder/img';
+import InlineSvgEmbedder from './svg-embedder/inline-svg';
+import DefaultLoading from './loading';
+import DefaultBrokenImage from './broken';
+
+function fromBase64(v) {
+  if (typeof v !== 'string') {
+    throw new Error('fromBase64 requires input to be a string');
+  }
+  return Buffer.from(base64.unescape(v), 'base64');
+}
+
+const isVC = type => {
+  return String(type).includes('VerifiableCredential');
+};
+
+// 仅针对非 url type 的情况
+const getSvgEmbedder = preferredSvgEmbedder => {
+  const embedders = {
+    img: ImgSvgEmbedder,
+    svg: InlineSvgEmbedder,
+  };
+  return embedders[preferredSvgEmbedder];
+};
+
+/**
+ * TODO:
+ * 考虑把 asset data 解析部分和 nft display 分离, android 端有相关使用场景 - 只传入 svg 或 url, 也可以传入 asset data,
+ * 目前如果想直接传入 svg 或 url, 需要构造一个 asset data 的数据才能使用 NFTDisplay 组件
+ */
+function NFTDisplay({
+  data,
+  address,
+  inset,
+  aspect,
+  component,
+  className,
+  renderError,
+  renderLoading,
+  preferredSvgEmbedder,
+  checkSvg,
+  minimumLoadingTime,
+  onCompleted,
+  ...rest
+}) {
+  const wrapRoot = children => (
+    <Root as={component} {...rest} className={clsx(className, { 'nft-display--inset': inset })}>
+      {children}
+    </Root>
+  );
+
+  try {
+    const parsed = React.useRef(data);
+    // 如果是 raw data 先解析
+    if (typeof parsed.current === 'string') {
+      parsed.current = JSON.parse(data);
+      // console.log('[debug] parse data')
+    }
+    const { vcId, type: assetType } = parsed.current;
+    const display = get(parsed.current, 'credentialSubject.display');
+    const { content, type } = display;
+    const isUrlType = type === 'url';
+
+    // 首次加载, 对于 url type 的情况, loading 为 true
+    const [state, setState] = useState({ loading: isUrlType, error: false });
+    const [minimumLoadingReady, setMinimumLoadingReady] = useState(minimumLoadingTime <= 0);
+    // console.log('[debug] render', {type, minimumLoadingTime}, JSON.stringify(state))
+
+    React.useEffect(() => {
+      let timer;
+      if (minimumLoadingTime > 0) {
+        timer = setTimeout(() => setMinimumLoadingReady(true), minimumLoadingTime);
+      }
+      return () => clearTimeout(timer);
+    }, []);
+
+    // onCompleted
+    React.useEffect(() => {
+      if ((!state.loading && minimumLoadingReady) || state.error) {
+        onCompleted();
+      }
+    }, [state, minimumLoadingReady]);
+
+    // VC 检查
+    if (state.error || !isVC(assetType)) {
+      throw new Error('Failed to render NFT Display.');
+    }
+
+    const renderNFT = () => {
+      if (content) {
+        switch (type) {
+          case 'url': {
+            const urlObj = new URL(content);
+            urlObj.searchParams.append('assetId', address);
+            urlObj.searchParams.append('vcId', vcId);
+            const url = urlObj.href;
+            return (
+              <img
+                src={url}
+                onError={() => setState({ ...state, error: true })}
+                onLoad={() => setState({ ...state, loading: false })}
+                alt="NFT Display"
+              />
+            );
+          }
+          case 'svg_gzipped': {
+            const buffer = pako.ungzip(fromBase64(content), {});
+            const svg = Buffer.from(buffer).toString('utf8');
+            if (checkSvg && !isSvg(svg)) {
+              throw new Error(`Invalid SVG: ${svg}`);
+            }
+            const Embedder = getSvgEmbedder(preferredSvgEmbedder);
+            return <Embedder svg={svg} />;
+          }
+          case 'svg': {
+            if (checkSvg && !isSvg(content)) {
+              throw new Error(`Invalid SVG: ${content}`);
+            }
+            const Embedder = getSvgEmbedder(preferredSvgEmbedder);
+            return <Embedder svg={content} />;
+          }
+          // TODO: 准备测试数据
+          case 'html': {
+            break;
+          }
+          default:
+        }
+      }
+      throw new Error(`unsupported display protocol: ${display.type}`);
+    };
+
+    return wrapRoot(
+      <>
+        {(state.loading || !minimumLoadingReady) &&
+          (renderLoading ? renderLoading() : <DefaultLoading />)}
+        {renderNFT()}
+      </>
+    );
+  } catch (e) {
+    console.error(e);
+    return wrapRoot(renderError ? renderError() : <DefaultBrokenImage />);
+  }
+}
+
+NFTDisplay.propTypes = {
+  // asset data 可以是 raw data 和 parsed data
+  data: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
+  address: PropTypes.string.isRequired,
+  component: PropTypes.string,
+  inset: PropTypes.bool,
+  aspect: PropTypes.number,
+  className: PropTypes.string,
+  renderError: PropTypes.func,
+  renderLoading: PropTypes.func,
+  // 对于非 url type 的情况, 支持优先选用的 svg 嵌入方式, 默认是 img
+  preferredSvgEmbedder: PropTypes.oneOf(['img', 'svg']),
+  // 针对非 url type 的情况, 检测 svg 有效性, 默认禁用
+  checkSvg: PropTypes.bool,
+  // loading 最小显示时间 (避免闪烁)
+  minimumLoadingTime: PropTypes.number,
+  // 完成回调, 无论加载成功|失败
+  onCompleted: PropTypes.func,
+};
+
+NFTDisplay.defaultProps = {
+  component: 'span',
+  inset: false,
+  aspect: 0,
+  className: '',
+  renderError: null,
+  renderLoading: null,
+  preferredSvgEmbedder: 'img',
+  checkSvg: false,
+  minimumLoadingTime: 0,
+  onCompleted: () => {},
+};
+
+const Root = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  /* 默认尺寸 */
+  width: 150px;
+  height: 150px;
+  overflow: hidden;
+
+  &,
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.nft-display--inset {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+function withAspectRatio(Component) {
+  // eslint-disable-next-line func-names, react/prop-types
+  return function ({ aspect, inset, ...rest }) {
+    // inset 比 aspect ratio 优先级高, 如果同时设置了 inset 和 aspect, 则后者不生效
+    const applyAspectRatio = aspect > 0 && !inset;
+    if (applyAspectRatio) {
+      return (
+        <AspectRatioContainer aspect={aspect}>
+          <Component inset {...rest} />
+        </AspectRatioContainer>
+      );
+    }
+    return <Component inset={inset} {...rest} />;
+  };
+}
+
+export default withAspectRatio(NFTDisplay);