@arcblock/ux 1.16.58 → 1.16.62

package/lib/Button/wrap.js

@@ -29,6 +29,49 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+const extendedColors = {
+  danger: {
+    contained: {
+      backgroundColor: _Colors.default.error.main,
+      color: _Colors.default.common.white
+    },
+    outlined: {
+      borderColor: _Colors.default.error.main,
+      color: _Colors.default.error.main
+    }
+  },
+  warning: {
+    contained: {
+      backgroundColor: _Colors.default.warning.main,
+      color: _Colors.default.common.white
+    },
+    outlined: {
+      borderColor: _Colors.default.warning.main,
+      color: _Colors.default.warning.main
+    }
+  },
+  did: {
+    contained: {
+      backgroundColor: _Colors.default.did.primary,
+      color: _Colors.default.common.white
+    },
+    outlined: {
+      borderColor: _Colors.default.did.primary,
+      color: _Colors.default.did.primary
+    }
+  },
+  reverse: {
+    contained: {
+      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+      color: _Colors.default.grey[900]
+    },
+    outlined: {
+      borderColor: _Colors.default.grey[900],
+      color: _Colors.default.grey[900]
+    }
+  }
+};
+
 function _default(BaseComponent) {
   function WrappedComponent(props) {
     const newProps = (0, _Util.mergeProps)(props, WrappedComponent, ['style']);
@@ -57,64 +100,22 @@ function _default(BaseComponent) {
         break;
 
       default:
-    }
+    } // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // 这里扩展 danger/warning/reverse/did 四种 color
+
 
-    const styles = Object.assign({}, style, {
+    const matched = extendedColors[color] && extendedColors[color][rest.variant];
+    const styles = Object.assign({}, style, _objectSpread({
       boxShadow: 'none',
       textTransform: 'capitalize'
-    }); // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
-    // 这里扩展 danger/warning/reverse 三种 color
-
+    }, matched));
     let _rest = rest;
 
-    switch (color) {
-      case 'error':
-      case 'danger':
-        {
-          if (rest.variant === 'contained') {
-            styles.backgroundColor = _Colors.default.error.main;
-            styles.color = _Colors.default.common.white;
-          } else {
-            styles.borderColor = _Colors.default.error.main;
-            styles.color = _Colors.default.error.main;
-          }
-
-          break;
-        }
-
-      case 'warning':
-        {
-          if (rest.variant === 'contained') {
-            styles.backgroundColor = _Colors.default.warning.main;
-            styles.color = _Colors.default.common.white;
-          } else {
-            styles.borderColor = _Colors.default.warning.main;
-            styles.color = _Colors.default.warning.main;
-          }
-
-          break;
-        }
-
-      case 'reverse':
-        {
-          if (rest.variant === 'contained') {
-            styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
-            styles.color = _Colors.default.grey[900];
-          } else {
-            styles.borderColor = _Colors.default.grey[900];
-            styles.color = _Colors.default.grey[900];
-          }
-
-          break;
-        }
-      // 除扩展的几种 color 外, 由 mui button 自己处理 color
-
-      default:
-        {
-          _rest = _objectSpread(_objectSpread({}, _rest), {}, {
-            color
-          });
-        }
+    if (!matched) {
+      // mui button 本身支持的 color 交由 mui 处理
+      _rest = _objectSpread(_objectSpread({}, _rest), {}, {
+        color
+      });
     }
 
     if (rounded) {

package/lib/Layout/dashboard/header.js

@@ -21,6 +21,8 @@ var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
+var _Hidden = _interopRequireDefault(require("@material-ui/core/Hidden"));
+
 var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
 
 var _reactRouterDom = require("react-router-dom");
@@ -38,7 +40,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const StyledAppBar = (0, _styledComponents.default)(_AppBar.default).withConfig({
   displayName: "header__StyledAppBar",
   componentId: "sc-yt81c4-0"
-})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}@media (max-width:", "px){.header-logo{position:absolute;width:0;height:0;overflow:hidden;}.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer + 1, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.values.md);
+})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}", "{.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer + 1, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.down('sm'));
+/*
+  自定义 logo 相关:
+  如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
+  这种情况下因为 header 和 sidebar 中会各有一个相同的 svg, defs 中元素的 id 会出现冲突,
+  当屏幕较窄时, header 会通过设置 display:none 将 svg logo 隐藏,
+  这会导致 svg defs 中的元素不能被正常引用 (比如 fill 引用的 color 失效), 这会进一步导致 sidebar 中的 logo 不能正常显示.
+  考虑到上述问题, 目前使用 Hidden 组件控制 logo 的显示/隐藏
+  参考: https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
+*/
 
 function Header(_ref) {
   let {
@@ -68,11 +79,13 @@ function Header(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Menu.default, null)), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
     to: homeUrl,
     className: "header-link"
+  }, /*#__PURE__*/_react.default.createElement(_Hidden.default, {
+    smDown: true
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "header-logo"
   }, logo || /*#__PURE__*/_react.default.createElement(_Logo.default, {
     showText: false
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "header-title"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "h2",

package/lib/Layout/dashboard/index.js

@@ -67,10 +67,10 @@ function Dashboard(_ref) {
   const {
     width
   } = (0, _useWindowSize.default)();
-  const [drawerMode, setDrawerMode] = (0, _react.useState)(width > breakpoint ? 'permanent' : 'temporary');
+  const [drawerMode, setDrawerMode] = (0, _react.useState)(width >= breakpoint ? 'permanent' : 'temporary');
   const [drawerOpen, setDrawerOpen] = (0, _react.useState)(drawerMode === 'permanent');
   (0, _react.useEffect)(() => {
-    const newMode = width > breakpoint ? 'permanent' : 'temporary';
+    const newMode = width >= breakpoint ? 'permanent' : 'temporary';
     setDrawerMode(newMode);
     setDrawerOpen(newMode !== 'temporary');
   }, [width]);

package/lib/Layout/dashboard/sidebar.js

@@ -104,13 +104,13 @@ Sidebar.defaultProps = {
 const MenuItems = /*#__PURE__*/_react.default.memo(_styledComponents.default.div.withConfig({
   displayName: "sidebar__MenuItems",
   componentId: "sc-gaosgy-0"
-})(["flex:1;display:flex;flex-direction:column;&& .sidebar-logo{display:none;border-bottom:1px solid #eee;background:", ";position:sticky;top:0;z-index:1;padding:10px 0;text-align:center;font-size:0;}@media (max-width:", "px){&& .sidebar-logo{display:block;}}"], props => props.theme.palette.background.default, props => props.theme.breakpoints.values.md));
+})(["flex:1;display:flex;flex-direction:column;&& .sidebar-logo{display:none;border-bottom:1px solid #eee;background:", ";position:sticky;top:0;z-index:1;padding:10px 0;text-align:center;font-size:0;}", "{&& .sidebar-logo{display:block;}}"], props => props.theme.palette.background.default, props => props.theme.breakpoints.down('sm')));
 
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
 const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "sidebar__MenuItem",
   componentId: "sc-gaosgy-1"
-})(["&&{display:block;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;}.MuiButton-label{display:flex;flex-direction:column;justify-content:center;align-items:center;}}"], props => props.selected ? gradient : '', props => props.selected ? _teal.default.A700 : 'transparent', gradient, _teal.default.A700);
+})(["&&{display:block;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;}.MuiButton-label{display:flex;flex-direction:column;justify-content:center;align-items:center;}}"], props => props.selected ? gradient : '', props => props.selected ? _teal.default.A700 : 'transparent', gradient, _teal.default.A700);
 
 var _default = (0, _reactRouterDom.withRouter)((0, _withTheme.default)(Sidebar));
 

package/lib/Layout/index.js

@@ -232,7 +232,7 @@ Layout.defaultProps = {
 const Div = _styledComponents.default.div.withConfig({
   displayName: "Layout__Div",
   componentId: "sc-12bllvc-0"
-})(["width:100%;min-height:100vh;display:flex;flex-direction:column;.appbar{&.appbar--border{box-shadow:none;&::before{content:'';position:absolute;left:0;right:0;height:1px;bottom:-1px;display:block;background-color:rgba(0,0,0,0.12);}}}.toolbar{min-height:56px;background:inherit;white-space:nowrap;.menu-logo{font-size:0;margin-right:8px;}.nav-links{display:flex;align-items:center;.nav-link{margin:8px 12px;font-size:16px;display:flex;align-items:center;}.highlight-nav{font-weight:bolder;}}.brand{cursor:pointer;text-decoration:none;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;}.description{color:#999;font-size:15px;margin-left:10px;font-weight:normal;flex-shrink:999999;}}@media (min-width:", "px){.toolbar{.menu-button{display:none;}.menu-logo{& + .brand{padding-left:45px;margin-left:-45px;}}}}@media (max-width:", "px){.toolbar{.nav-links,.menu-logo,.description{display:none;}}}"], props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.md - 1);
+})(["width:100%;min-height:100vh;display:flex;flex-direction:column;.appbar{&.appbar--border{box-shadow:none;&::before{content:'';position:absolute;left:0;right:0;height:1px;bottom:-1px;display:block;background-color:rgba(0,0,0,0.12);}}}.toolbar{min-height:56px;background:inherit;white-space:nowrap;.menu-logo{font-size:0;margin-right:8px;}.nav-links{display:flex;align-items:center;.nav-link{margin:8px 12px;font-size:16px;display:flex;align-items:center;}.highlight-nav{font-weight:bolder;}}.brand{cursor:pointer;text-decoration:none;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;}.description{color:#999;font-size:15px;margin-left:10px;font-weight:normal;flex-shrink:999999;}}", "{.toolbar{.menu-button{display:none;}.menu-logo{& + .brand{padding-left:45px;margin-left:-45px;}}}}", "{.toolbar{.nav-links,.menu-logo,.description{display:none;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'));
 
 const DrawerDiv = _styledComponents.default.nav.withConfig({
   displayName: "Layout__DrawerDiv",

package/lib/QRCode/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _qrCodeStyling = _interopRequireDefault(require("@solana/qr-code-styling"));
+
+const _excluded = ["data", "size", "image", "config"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const defaults = {
+  margin: 0,
+  dotsOptions: {
+    type: 'dots'
+  },
+  cornersSquareOptions: {
+    type: 'extra-rounded'
+  },
+  cornersDotOptions: {
+    type: 'dot'
+  }
+}; // 该组件用于生成与 android wallet 样式风格相似的 qrcode
+// 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
+
+function QRCode(_ref) {
+  let {
+    data,
+    size,
+    image,
+    config
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const ref = _react.default.useRef(null);
+
+  (0, _react.useEffect)(() => {
+    const qrCode = new _qrCodeStyling.default(_objectSpread(_objectSpread(_objectSpread({}, defaults), {}, {
+      data,
+      width: size,
+      height: size
+    }, image && {
+      image,
+      imageOptions: {
+        crossOrigin: 'anonymous',
+        margin: 0
+      }
+    }), config));
+    qrCode.append(ref.current);
+  }, [data, size]);
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    ref: ref
+  }, rest));
+}
+
+QRCode.propTypes = {
+  // 一般情况下仅使用 data/size/image 即可
+  data: _propTypes.default.string.isRequired,
+  size: _propTypes.default.number.isRequired,
+  image: _propTypes.default.string,
+  // 覆盖 qr-code-styling 配置
+  config: _propTypes.default.object
+};
+QRCode.defaultProps = {
+  image: null,
+  config: {}
+};
+var _default = QRCode;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.58",
+  "version": "1.16.62",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,14 +53,15 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "db781df0d54be03940dffc673ed5020b204f2f01",
+  "gitHead": "2c6b82d4b6ccdd21ea910734c00fce236f9e260a",
   "dependencies": {
-    "@arcblock/icons": "^1.16.58",
-    "@arcblock/react-hooks": "^1.16.58",
+    "@arcblock/icons": "^1.16.62",
+    "@arcblock/react-hooks": "^1.16.62",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",
+    "@solana/qr-code-styling": "^1.6.0-beta.0",
     "axios": "^0.21.1",
     "base64-url": "^2.3.3",
     "copy-to-clipboard": "^3.2.0",

package/src/Button/wrap.js

@@ -7,6 +7,25 @@ import Spinner from '../Spinner';
 import colors from '../Colors';
 import { mergeProps } from '../Util';
 
+const extendedColors = {
+  danger: {
+    contained: { backgroundColor: colors.error.main, color: colors.common.white },
+    outlined: { borderColor: colors.error.main, color: colors.error.main },
+  },
+  warning: {
+    contained: { backgroundColor: colors.warning.main, color: colors.common.white },
+    outlined: { borderColor: colors.warning.main, color: colors.warning.main },
+  },
+  did: {
+    contained: { backgroundColor: colors.did.primary, color: colors.common.white },
+    outlined: { borderColor: colors.did.primary, color: colors.did.primary },
+  },
+  reverse: {
+    contained: { backgroundColor: 'rgba(255, 255, 255, 0.9)', color: colors.grey[900] },
+    outlined: { borderColor: colors.grey[900], color: colors.grey[900] },
+  },
+};
+
 export default function (BaseComponent) {
   function WrappedComponent(props) {
     const newProps = mergeProps(props, WrappedComponent, ['style']);
@@ -24,50 +43,19 @@ export default function (BaseComponent) {
         break;
       default:
     }
+
+    // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // 这里扩展 danger/warning/reverse/did 四种 color
+    const matched = extendedColors[color] && extendedColors[color][rest.variant];
     const styles = Object.assign({}, style, {
       boxShadow: 'none',
       textTransform: 'capitalize',
+      ...matched,
     });
-
-    // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
-    // 这里扩展 danger/warning/reverse 三种 color
     let _rest = rest;
-    switch (color) {
-      case 'error':
-      case 'danger': {
-        if (rest.variant === 'contained') {
-          styles.backgroundColor = colors.error.main;
-          styles.color = colors.common.white;
-        } else {
-          styles.borderColor = colors.error.main;
-          styles.color = colors.error.main;
-        }
-        break;
-      }
-      case 'warning': {
-        if (rest.variant === 'contained') {
-          styles.backgroundColor = colors.warning.main;
-          styles.color = colors.common.white;
-        } else {
-          styles.borderColor = colors.warning.main;
-          styles.color = colors.warning.main;
-        }
-        break;
-      }
-      case 'reverse': {
-        if (rest.variant === 'contained') {
-          styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
-          styles.color = colors.grey[900];
-        } else {
-          styles.borderColor = colors.grey[900];
-          styles.color = colors.grey[900];
-        }
-        break;
-      }
-      // 除扩展的几种 color 外, 由 mui button 自己处理 color
-      default: {
-        _rest = { ..._rest, color };
-      }
+    if (!matched) {
+      // mui button 本身支持的 color 交由 mui 处理
+      _rest = { ..._rest, color };
     }
     if (rounded) {
       // styles.borderRadius = { small: 16, medium: 18, large: 20 }[rest.size];

package/src/Layout/dashboard/header.js

@@ -6,6 +6,7 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
+import Hidden from '@material-ui/core/Hidden';
 import MenuIcon from '@material-ui/icons/Menu';
 import { Link } from 'react-router-dom';
 
@@ -70,19 +71,7 @@ const StyledAppBar = styled(AppBar)`
   .header-menu {
     display: none;
   }
-  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
-    /*
-      以下样式用来替代 display:none, 如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
-      这种情况下因为 header 和 sidebar 中会各有一个相同的 svg, defs 中元素的 id 会出现冲突,
-      当屏幕很窄的情况, header 会通过设置 display:none 将 svg logo 隐藏,
-      这会导致 svg defs 中的元素不能被正常引用 (比如 fill 引用的 color 失效), 这会进一步导致 sidebar 中的 logo 不能正常显示
-    */
-    .header-logo {
-      position: absolute;
-      width: 0;
-      height: 0;
-      overflow: hidden;
-    }
+  ${props => props.theme.breakpoints.down('sm')} {
     .header-title {
       display: none;
     }
@@ -95,6 +84,15 @@ const StyledAppBar = styled(AppBar)`
   }
 `;
 
+/*
+  自定义 logo 相关:
+  如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
+  这种情况下因为 header 和 sidebar 中会各有一个相同的 svg, defs 中元素的 id 会出现冲突,
+  当屏幕较窄时, header 会通过设置 display:none 将 svg logo 隐藏,
+  这会导致 svg defs 中的元素不能被正常引用 (比如 fill 引用的 color 失效), 这会进一步导致 sidebar 中的 logo 不能正常显示.
+  考虑到上述问题, 目前使用 Hidden 组件控制 logo 的显示/隐藏
+  参考: https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
+*/
 export default function Header({
   children,
   brand,
@@ -118,7 +116,9 @@ export default function Header({
           <MenuIcon />
         </Button>
         <Link to={homeUrl} className="header-link">
-          <div className="header-logo">{logo || <Logo showText={false} />}</div>
+          <Hidden smDown>
+            <div className="header-logo">{logo || <Logo showText={false} />}</div>
+          </Hidden>
           <div className="header-title">
             <Typography component="h2" noWrap className="header-title__primary">
               {brand}

package/src/Layout/dashboard/index.js

@@ -64,11 +64,11 @@ export default function Dashboard({
 }) {
   const breakpoint = 960;
   const { width } = useWindowSize();
-  const [drawerMode, setDrawerMode] = useState(width > breakpoint ? 'permanent' : 'temporary');
+  const [drawerMode, setDrawerMode] = useState(width >= breakpoint ? 'permanent' : 'temporary');
   const [drawerOpen, setDrawerOpen] = useState(drawerMode === 'permanent');
 
   useEffect(() => {
-    const newMode = width > breakpoint ? 'permanent' : 'temporary';
+    const newMode = width >= breakpoint ? 'permanent' : 'temporary';
     setDrawerMode(newMode);
     setDrawerOpen(newMode !== 'temporary');
   }, [width]);

package/src/Layout/dashboard/sidebar.js

@@ -77,7 +77,7 @@ const MenuItems = React.memo(styled.div`
     text-align: center;
     font-size: 0;
   }
-  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+  ${props => props.theme.breakpoints.down('sm')} {
     && .sidebar-logo {
       display: block;
     }
@@ -94,6 +94,7 @@ const MenuItem = styled(Button)`
     background: ${props => (props.selected ? gradient : '')};
     padding: 24px 0;
     border-left: 2px solid ${props => (props.selected ? teal.A700 : 'transparent')};
+    border-radius: 0;
 
     &:hover {
       background: ${gradient};

package/src/Layout/index.js

@@ -264,7 +264,7 @@ const Div = styled.div`
     }
   }
 
-  @media (min-width: ${props => props.theme.breakpoints.values.md}px) {
+  ${props => props.theme.breakpoints.up('md')} {
     .toolbar {
       .menu-button {
         display: none;
@@ -278,7 +278,7 @@ const Div = styled.div`
     }
   }
 
-  @media (max-width: ${props => props.theme.breakpoints.values.md - 1}px) {
+  ${props => props.theme.breakpoints.down('sm')} {
     .toolbar {
       .nav-links,
       .menu-logo,

package/src/QRCode/index.js

@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import QRCodeStyling from '@solana/qr-code-styling';
+
+const defaults = {
+  margin: 0,
+  dotsOptions: {
+    type: 'dots',
+  },
+  cornersSquareOptions: {
+    type: 'extra-rounded',
+  },
+  cornersDotOptions: {
+    type: 'dot',
+  },
+};
+
+// 该组件用于生成与 android wallet 样式风格相似的 qrcode
+// 注意: 依赖的 @solana/qr-code-styling 是一份 fork 版本, 原版本的 margin 配置存在 bug
+function QRCode({ data, size, image, config, ...rest }) {
+  const ref = React.useRef(null);
+  useEffect(() => {
+    const qrCode = new QRCodeStyling({
+      ...defaults,
+      data,
+      width: size,
+      height: size,
+      ...(image && {
+        image,
+        imageOptions: {
+          crossOrigin: 'anonymous',
+          margin: 0,
+        },
+      }),
+      ...config,
+    });
+    qrCode.append(ref.current);
+  }, [data, size]);
+  return <div ref={ref} {...rest} />;
+}
+
+QRCode.propTypes = {
+  // 一般情况下仅使用 data/size/image 即可
+  data: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  image: PropTypes.string,
+  // 覆盖 qr-code-styling 配置
+  config: PropTypes.object,
+};
+
+QRCode.defaultProps = {
+  image: null,
+  config: {},
+};
+
+export default QRCode;