@arcblock/ux 0.78.25 → 1.6.59

package/src/Locale/context.js

@@ -0,0 +1,94 @@
+/* eslint-disable no-prototype-builtins */
+import React, { useState, useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
+import Cookie from 'js-cookie';
+
+import browserLang from './browser-lang';
+import { getCookieOptions } from '../Util';
+
+const cookieName = 'nf_lang';
+const languages = [
+  { value: 'en', text: 'English' },
+  { value: 'zh', text: '简体中文' },
+];
+const langParams = {
+  languages: ['zh', 'en'],
+  fallback: 'en',
+};
+
+// 跨应用传递多语言选择的方式是在 query string 中添加 locale 参数，LocaleSelector 要高优先级遵守这个参数
+const getLocaleFromSearchParams = (url = window.location.href) => {
+  const locale = new URL(url).searchParams.get('locale');
+  if (languages.find(x => x.value === locale)) {
+    return locale;
+  }
+  return null;
+};
+
+const getLocale = locale =>
+  locale || getLocaleFromSearchParams() || Cookie.get(cookieName) || browserLang(langParams);
+const setLocale = locale => Cookie.set(cookieName, locale, getCookieOptions());
+
+const replace = (template, data) =>
+  template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
+
+const create = () => {
+  const LocaleContext = React.createContext();
+  const { Provider, Consumer } = LocaleContext;
+  function LocaleProvider({ children, locale, translations, ...rest }) {
+    const [currentLocale, setCurrentLocale] = useState(getLocale(locale));
+
+    useEffect(() => {
+      setLocale(currentLocale);
+    }, [currentLocale]);
+
+    const changeLocale = newLocale => {
+      setCurrentLocale(newLocale);
+    };
+
+    const translate = (key, data) => {
+      if (!translations[currentLocale] || !translations[currentLocale][key]) {
+        console.warn(`Warning: no ${key} translation of ${currentLocale}`);
+        return key;
+      }
+
+      return replace(translations[currentLocale][key], data);
+    };
+
+    return (
+      <Provider value={{ locale: currentLocale, changeLocale, t: translate, ...rest }}>
+        {children}
+      </Provider>
+    );
+  }
+
+  function useLocaleContext() {
+    const context = useContext(LocaleContext);
+    return context;
+  }
+
+  LocaleProvider.propTypes = {
+    children: PropTypes.any.isRequired,
+    translations: PropTypes.object.isRequired,
+    locale: PropTypes.string,
+  };
+
+  LocaleProvider.defaultProps = {
+    locale: '',
+  };
+
+  return { Consumer, LocaleProvider, LocaleContext, useLocaleContext };
+};
+
+const { Consumer, LocaleProvider, LocaleContext, useLocaleContext } = create();
+
+export {
+  LocaleProvider,
+  Consumer as LocaleConsumer,
+  LocaleContext,
+  useLocaleContext,
+  setLocale,
+  getLocale,
+  languages,
+  create,
+};

package/src/Locale/selector.js

@@ -0,0 +1,135 @@
+import React, { useState, useContext, useRef } 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 = useRef(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.current?.contains(e.target)) return;
+    setOpen(false);
+  }
+
+  const ButtonComponent = showText ? Button : IconButton;
+
+  return (
+    <Div component="div" dark={dark} theme={theme} {...rest}>
+      <ButtonComponent ref={anchorEl} 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.current} {...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;
+  }
+`;