@arcblock/ux 2.8.25 → 2.9.0

package/lib/SessionUser/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SessionUser;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _ahooks = require("ahooks");
+var _loggedIn = _interopRequireDefault(require("./components/logged-in"));
+var _unLogin = _interopRequireDefault(require("./components/un-login"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function SessionUser(_ref) {
+  let {
+    session,
+    onBindWallet,
+    locale,
+    size
+  } = _ref;
+  const isBlocklet = (0, _ahooks.useCreation)(() => {
+    return !!(globalThis !== null && globalThis !== void 0 && globalThis.blocklet);
+  });
+  if (session.user) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_loggedIn.default, {
+      isBlocklet: isBlocklet,
+      session: session,
+      onBindWallet: onBindWallet,
+      locale: locale,
+      size: size
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_unLogin.default, {
+    session: session,
+    isBlocklet: isBlocklet,
+    locale: locale,
+    size: size
+  });
+}
+SessionUser.propTypes = {
+  session: _propTypes.default.shape({
+    user: _propTypes.default.shape({
+      did: _propTypes.default.string.isRequired,
+      fullName: _propTypes.default.string.isRequired,
+      email: _propTypes.default.string.isRequired,
+      avatar: _propTypes.default.string.isRequired
+    })
+  }).isRequired,
+  onBindWallet: _propTypes.default.func,
+  locale: _propTypes.default.string,
+  size: _propTypes.default.number
+};
+SessionUser.defaultProps = {
+  onBindWallet: _noop.default,
+  locale: 'en',
+  size: 24
+};

package/lib/SessionUser/libs/translation.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translations = void 0;
+/* eslint-disable import/prefer-default-export */
+const translations = {
+  en: {
+    connectDIDWallet: 'Connect your DID Wallet for full functionality',
+    switch: 'Switch',
+    profile: 'Profile',
+    dashboard: 'Dashboard',
+    logout: 'Sign Out',
+    addAnotherAccount: 'Add another account'
+  },
+  zh: {
+    connectDIDWallet: '连接你的 DID Wallet 获得更全的功能',
+    switch: '切换',
+    profile: '个人中心',
+    dashboard: '控制台',
+    logout: '退出登录',
+    addAnotherAccount: '添加账户'
+  }
+};
+exports.translations = translations;

package/lib/{SessionManager → SessionUser}/libs/utils.js

@@ -3,12 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSourceProvider = exports.getConnectedAccounts = void 0;
+exports.getSourceProvider = exports.getSourceAppPid = exports.getCurrentAppPid = exports.getConnectedAccounts = void 0;
 const getSourceProvider = user => {
   var _user$extraConfigs;
   return (user === null || user === void 0 ? void 0 : user.sourceProvider) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs = user.extraConfigs) === null || _user$extraConfigs === void 0 ? void 0 : _user$extraConfigs.sourceProvider) || 'wallet';
 };
 exports.getSourceProvider = getSourceProvider;
+const getSourceAppPid = user => user === null || user === void 0 ? void 0 : user.sourceAppPid;
+exports.getSourceAppPid = getSourceAppPid;
+const getCurrentAppPid = user => {
+  var _window, _window$blocklet;
+  return (user === null || user === void 0 ? void 0 : user.sourceAppPid) || ((_window = window) === null || _window === void 0 ? void 0 : (_window$blocklet = _window.blocklet) === null || _window$blocklet === void 0 ? void 0 : _window$blocklet.appPid);
+};
+exports.getCurrentAppPid = getCurrentAppPid;
 const getConnectedAccounts = user => {
   var _user$extraConfigs2;
   return (user === null || user === void 0 ? void 0 : user.connectedAccounts) || (user === null || user === void 0 ? void 0 : (_user$extraConfigs2 = user.extraConfigs) === null || _user$extraConfigs2 === void 0 ? void 0 : _user$extraConfigs2.connectedAccounts) || [];

package/lib/SplitButton/index.js

@@ -14,6 +14,7 @@ var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _Theme = require("../Theme");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
@@ -129,7 +130,7 @@ SplitButton.defaultProps = {
   menu: [],
   children: null,
   variant: 'contained',
-  onClick: () => {},
+  onClick: _noop.default,
   menuButtonProps: {}
 };
 /**

package/lib/Toast/index.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _notistack = require("notistack");
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
+var _noop = _interopRequireDefault(require("lodash/noop"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -22,11 +23,10 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            */ /**
                                                                                                                                                                                                                                                                                                                                                                                                * @type {import('notistack').ProviderContext['enqueueSnackbar']}
                                                                                                                                                                                                                                                                                                                                                                                                */
-const noop = () => {};
-let _success = noop;
-let _error = noop;
-let _warning = noop;
-let _info = noop;
+let _success = _noop.default;
+let _error = _noop.default;
+let _warning = _noop.default;
+let _info = _noop.default;
 /**
  * @description
  * @param {(message: import('notistack').SnackbarMessage, options?: import('notistack').OptionsObject) => import('notistack').SnackbarKey} enqueueSnackbar

package/lib/Util/constant.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SESSION_TOKEN_STORAGE_KEY = exports.RELAY_SOCKET_PREFIX = exports.REFRESH_TOKEN_STORAGE_KEY = exports.PROFILE_URL = exports.NAVIGATION_URL = exports.DEFAULT_WINDOW_TIMEOUT = exports.DEFAULT_TIMEOUT = exports.DASHBOARD_URL = exports.AUTH_SERVICE_PREFIX = exports.API_DID_PREFIX = void 0;
+const DEFAULT_TIMEOUT = 5 * 60;
+exports.DEFAULT_TIMEOUT = DEFAULT_TIMEOUT;
+const DEFAULT_WINDOW_TIMEOUT = 30 * 60;
+exports.DEFAULT_WINDOW_TIMEOUT = DEFAULT_WINDOW_TIMEOUT;
+const AUTH_SERVICE_PREFIX = '/.well-known/service';
+exports.AUTH_SERVICE_PREFIX = AUTH_SERVICE_PREFIX;
+const SESSION_TOKEN_STORAGE_KEY = 'login_token';
+exports.SESSION_TOKEN_STORAGE_KEY = SESSION_TOKEN_STORAGE_KEY;
+const REFRESH_TOKEN_STORAGE_KEY = 'refresh_token';
+exports.REFRESH_TOKEN_STORAGE_KEY = REFRESH_TOKEN_STORAGE_KEY;
+const RELAY_SOCKET_PREFIX = '/.well-known/service';
+exports.RELAY_SOCKET_PREFIX = RELAY_SOCKET_PREFIX;
+const API_DID_PREFIX = '/api/did';
+exports.API_DID_PREFIX = API_DID_PREFIX;
+const DASHBOARD_URL = "".concat(AUTH_SERVICE_PREFIX, "/admin");
+exports.DASHBOARD_URL = DASHBOARD_URL;
+const PROFILE_URL = "".concat(AUTH_SERVICE_PREFIX, "/user");
+exports.PROFILE_URL = PROFILE_URL;
+const NAVIGATION_URL = "".concat(AUTH_SERVICE_PREFIX, "/admin/navigation");
+exports.NAVIGATION_URL = NAVIGATION_URL;

package/lib/Util/index.js

@@ -11,12 +11,12 @@ exports.getColor = exports.getBackground = exports.formatUptime = void 0;
 exports.getCookieOptions = getCookieOptions;
 exports.getCopyright = getCopyright;
 exports.getDateTool = getDateTool;
-exports.isUrl = exports.isEthereumDid = exports.getUserAvatar = exports.getTimezone = exports.getFontSize = void 0;
+exports.isUrl = exports.isEthereumDid = exports.getVisitorId = exports.getUserAvatar = exports.getTimezone = exports.getFontSize = void 0;
 exports.mergeProps = mergeProps;
 exports.openWebWallet = openWebWallet;
 exports.parseQuery = parseQuery;
 exports.setDateTool = setDateTool;
-exports.str2color = exports.sleep = void 0;
+exports.str2color = exports.sleep = exports.setVisitorId = void 0;
 exports.stringifyQuery = stringifyQuery;
 var _padStart = _interopRequireDefault(require("lodash/padStart"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -352,4 +352,17 @@ exports.sleep = sleep;
 const isUrl = str => {
   return /^https?:\/\//.test(str);
 };
-exports.isUrl = isUrl;
+exports.isUrl = isUrl;
+const visitorIdKey = '__visitor_id';
+const getVisitorId = () => {
+  return localStorage.getItem(visitorIdKey);
+};
+exports.getVisitorId = getVisitorId;
+const setVisitorId = value => {
+  if (value === null) {
+    localStorage.removeItem(visitorIdKey);
+  } else {
+    localStorage.setItem(visitorIdKey, value);
+  }
+};
+exports.setVisitorId = setVisitorId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.8.25",
+  "version": "2.9.0",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -239,10 +239,22 @@
       "import": "./es/Screenshot/index.js",
       "require": "./lib/Screenshot/index.js"
     },
+    "./lib/SessionBlocklet": {
+      "import": "./es/SessionBlocklet/index.js",
+      "require": "./lib/SessionBlocklet/index.js"
+    },
     "./lib/SessionManager": {
       "import": "./es/SessionManager/index.js",
       "require": "./lib/SessionManager/index.js"
     },
+    "./lib/SessionPermission": {
+      "import": "./es/SessionPermission/index.js",
+      "require": "./lib/SessionPermission/index.js"
+    },
+    "./lib/SessionUser": {
+      "import": "./es/SessionUser/index.js",
+      "require": "./lib/SessionUser/index.js"
+    },
     "./lib/Sparkline": {
       "import": "./es/Sparkline/index.js",
       "require": "./lib/Sparkline/index.js"
@@ -324,19 +336,19 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "130b4405cfaf4ed6ecb05006abe50d2611595141",
+  "gitHead": "a90e260c11c742d6d7f80a9c5ffe6445ea87e62f",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.8.25",
-    "@arcblock/react-hooks": "^2.8.25",
+    "@arcblock/icons": "^2.9.0",
+    "@arcblock/react-hooks": "^2.9.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@fontsource/lato": "^4.5.10",
     "@fontsource/ubuntu-mono": "^4.5.11",
-    "@iconify-icons/ion": "^1.2.10",
-    "@iconify-icons/logos": "^1.2.35",
-    "@iconify-icons/mdi": "^1.2.47",
+    "@iconify-icons/logos": "^1.2.36",
+    "@iconify-icons/material-symbols": "^1.2.58",
+    "@iconify-icons/mdi": "^1.2.48",
     "@iconify/react": "^4.1.1",
     "@mui/icons-material": "^5.14.8",
     "@mui/material": "^5.14.8",

package/src/Address/did-address.jsx

@@ -1,11 +1,11 @@
 import React, { useRef, useState, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import '@fontsource/ubuntu-mono/400.css';
-import Tooltip from '@mui/material/Tooltip';
 import { green } from '@mui/material/colors';
+import { Tooltip, Box } from '@mui/material';
 import copy from 'copy-to-clipboard';
-import CopyIcon from '@mui/icons-material/ContentCopy';
-import CheckIcon from '@mui/icons-material/Check';
+import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
+import noop from 'lodash/noop';
 
 import { styled } from '../Theme';
 import { getFontSize } from '../Util';
@@ -93,19 +93,35 @@ const DidAddress = forwardRef(
       <Root as={component} size={size} {...rest} ref={ref}>
         {prepend}
         {/* 注意: 该元素必须渲染(可以隐藏), 以便 compact 模式下复制的文本是完整的 */}
-        <span
-          ref={textRef}
-          className="did-address-text did-address-truncate"
-          style={{ display: compact ? 'none' : 'inline' }}>
-          {children}
-        </span>
-        {compact && (
-          <span className="did-address-text">
-            <CompactText startChars={startChars} endChars={endChars} showCopyButtonInTooltip={showCopyButtonInTooltip}>
-              {children}
-            </CompactText>
-          </span>
-        )}
+        <Tooltip title={copyable ? '' : translations[locale].copied} placement="bottom" arrow open={copied}>
+          <Box
+            ref={textRef}
+            component="span"
+            className="did-address-text did-address-truncate"
+            sx={{
+              display: compact ? 'none' : 'inline',
+              cursor: copyable ? 'text' : 'pointer',
+            }}
+            onDoubleClick={copyable ? noop : onCopy}>
+            {children}
+          </Box>
+          {compact && (
+            <Box
+              component="span"
+              className="did-address-text"
+              sx={{
+                cursor: copyable ? 'text' : 'pointer',
+              }}
+              onDoubleClick={copyable ? noop : onCopy}>
+              <CompactText
+                startChars={startChars}
+                endChars={endChars}
+                showCopyButtonInTooltip={showCopyButtonInTooltip}>
+                {children}
+              </CompactText>
+            </Box>
+          )}
+        </Tooltip>
         {copyElement}
         {append}
       </Root>
@@ -149,7 +165,7 @@ DidAddress.defaultProps = {
   locale: 'en',
 };
 
-const Root = styled('div', { shouldForwardProp: (prop) => prop !== 'inline' })`
+const Root = styled(Box, { shouldForwardProp: (prop) => prop !== 'inline' })`
   font-family: 'Ubuntu Mono', monospace;
   && {
     display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};
@@ -175,9 +191,6 @@ const Root = styled('div', { shouldForwardProp: (prop) => prop !== 'inline' })`
     text-overflow: ellipsis;
   }
 
-  .did-address-copy {
-    flex: 0 0 auto;
-  }
   .did-address-copy-wrapper {
     display: flex;
     justify-content: center;
@@ -187,6 +200,7 @@ const Root = styled('div', { shouldForwardProp: (prop) => prop !== 'inline' })`
     margin-left: 8px;
   }
   .did-address-copy {
+    flex: 0 0 auto;
     font-size: 1em;
     color: #999;
     cursor: pointer;

package/src/AnimationWaiter/index.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Lottie from 'react-lottie-player';
+import noop from 'lodash/noop';
 
 import lottieJson from './default-animation.json';
 import { styled } from '../Theme';
@@ -73,7 +74,7 @@ export default function AnimationWaiter({
   // tips
   useEffect(() => {
     if (!tips.length) {
-      return () => {};
+      return noop;
     }
 
     const timer = setTimeout(() => {

package/src/Avatar/index.jsx

@@ -115,7 +115,7 @@ Avatar.defaultProps = {
   responsive: false,
 };
 
-const BlockyIconContainer = styled('div')`
+const BlockyIconContainer = styled(Box)`
   display: flex;
   align-items: center;
   width: ${(props) => props.$size}px;

package/src/BlockletContext/index.jsx

@@ -32,7 +32,7 @@ function BlockletProvider({ children, baseUrl }) {
       setBlockletData(data);
     } catch {
       // NOTICE: 如果获取指定 blockletData 失败，则使用 window.blocklet
-      const data = window.blocklet || window.env;
+      const data = globalThis.blocklet || globalThis.env;
       setBlockletData(data);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/CardSelector/index.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
+import noop from 'lodash/noop';
 
 export default function CardSelector({ list, width, height, cardSpace, onSelect, defaultIndex }) {
   const [selectedId, setSelectedId] = useState(0);
@@ -132,6 +133,6 @@ CardSelector.defaultProps = {
   width: 300,
   height: 400,
   cardSpace: 40,
-  onSelect: () => {},
+  onSelect: noop,
   defaultIndex: 0,
 };

package/src/Colors/index.js

@@ -1,2 +1,3 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './themes/default';
+export { default as temp } from './themes/temp';

package/src/Colors/themes/temp.js

@@ -0,0 +1,18 @@
+const colors = {
+  lineStep: 'rgba(18, 22, 24, 0.06)',
+  lineBorderStrong: 'rgba(18, 22, 24, 0.12)',
+  lineBorderBase: 'rgba(18, 22, 24, 0.06)',
+  borderBase: 'rgba(18, 22, 24, 0.06)',
+  textMuted: 'rgba(18, 22, 24, 0.36)',
+  textSubtitle: 'rgba(18, 22, 24, 0.6)',
+  textBase: 'rgba(18, 22, 24, 1)',
+  textPrimaryBase: 'rgba(18, 22, 24, 1)',
+  surfaceBgSubtitle: 'rgba(18, 22, 24, 0.03)',
+  surfacePrimarySubtitle: 'rgba(19, 125, 250, 0.06)',
+  surfaceSuccess: 'rgba(13, 202, 134, 1)',
+  primaryBase: 'rgba(19, 125, 250, 1)',
+  primary100: 'rgba(19, 125, 250, 1)',
+  gray6: 'rgba(17, 22, 24, 0.06)',
+};
+
+export default colors;

package/src/Datatable/TableSearch.js

@@ -6,6 +6,8 @@ import SearchIcon from '@mui/icons-material/Search';
 import TextField from '@mui/material/TextField';
 import ClearIcon from '@mui/icons-material/Clear';
 import clsx from 'clsx';
+import noop from 'lodash/noop';
+
 import { useDatatableContext } from './DatatableContext';
 import { styled } from '../Theme';
 
@@ -110,7 +112,7 @@ TableSearch.propTypes = {
 TableSearch.defaultProps = {
   search: '',
   searchText: '',
-  onSearchOpen: () => {},
+  onSearchOpen: noop,
 };
 
 const Container = styled('div')`

package/src/Header/header.jsx

@@ -170,7 +170,6 @@ const Root = styled('div')`
   .header-addons {
     display: flex;
     align-items: center;
-    min-width: 150px;
   }
   ${(props) => props.theme.breakpoints.down('lg')} {
     .header-brand {

package/src/Img/{index.js → index.jsx}

@@ -1,9 +1,11 @@
 import { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useInView } from 'react-intersection-observer';
-import AlertIcon from '@iconify-icons/mdi/alert';
-import ImageIcon from '@iconify-icons/mdi/image';
+import WarningRoundedIcon from '@iconify-icons/material-symbols/warning-rounded';
+import ImageRoundedIcon from '@iconify-icons/material-symbols/image-rounded';
 import { Icon } from '@iconify/react';
+import noop from 'lodash/noop';
+
 import { styled } from '../Theme';
 
 /**
@@ -160,12 +162,12 @@ function Img({
       <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
         {!fallback && imgState === 'error' && (
           <div className="image--state" title="loading image">
-            <Icon icon={AlertIcon} className="image--icon" />
+            <Icon icon={WarningRoundedIcon} className="image--icon" />
           </div>
         )}
         {!placeholder && imgState === 'loading' && (
           <div className="image--state" title="Image load error">
-            <Icon icon={ImageIcon} className="image--icon" />
+            <Icon icon={ImageRoundedIcon} className="image--icon" />
           </div>
         )}
         {imgState === 'loaded' && <img className="image--img" src={src} alt={alt} />}
@@ -204,8 +206,8 @@ Img.defaultProps = {
   placeholder: null,
   fallback: null,
   className: '',
-  onError: () => {},
-  onSuccess: () => {},
+  onError: noop,
+  onSuccess: noop,
 };
 
 export default Img;

package/src/Locale/selector.jsx

@@ -2,11 +2,13 @@
 import { useState, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Typography, IconButton, Popper, MenuItem, MenuList, Box, ClickAwayListener } from '@mui/material';
-import CheckIcon from '@mui/icons-material/Check';
-import GlobeIcon from '@arcblock/icons/lib/Globe';
+import { Icon as IconifyIcon } from '@iconify/react';
+import LanguageIcon from '@iconify-icons/material-symbols/language';
+import CheckIcon from '@iconify-icons/material-symbols/check';
+import noop from 'lodash/noop';
 
 import { getColor, getBackground } from '../Util';
-
+import { temp as colors } from '../Colors';
 import { LocaleContext } from './context';
 import { styled, useTheme } from '../Theme';
 
@@ -56,7 +58,7 @@ export default function LocaleSelector(props) {
       return <Icon />;
     }
 
-    return <GlobeIcon style={{ width: 'auto', height: size, color: theme.palette.text.secondary }} />;
+    return <IconifyIcon icon={LanguageIcon} fontSize={size} color={theme.palette.text.secondary} />;
   }, [Icon, theme?.palette?.text?.secondary, size]);
 
   return (
@@ -81,9 +83,9 @@ export default function LocaleSelector(props) {
             <MenuList>
               {languages.map(({ code, name }) => (
                 <MenuItem key={code} className="locale-item" onClick={() => onSelect(code, name)}>
-                  <CheckIcon
+                  <IconifyIcon
+                    icon={CheckIcon}
                     className={code === locale ? 'check-icon check-icon-visible' : 'check-icon'}
-                    fontSize="small"
                   />
                   {name}
                 </MenuItem>
@@ -109,7 +111,7 @@ LocaleSelector.defaultProps = {
   showText: true,
   size: 24,
   popperProps: {},
-  onChange: () => {},
+  onChange: noop,
   popperType: 'click',
   icon: null,
 };
@@ -135,7 +137,8 @@ const Div = styled('div', {
 
   .locales {
     background: ${(props) => getBackground(props)};
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 8px 16px 0px ${colors.gray6}, 0px 0px 0px 1px ${colors.gray6};
+    border-radius: 8px;
   }
 
   .locale-item {

package/src/NFTDisplay/index.js

@@ -8,6 +8,7 @@ import pako from 'pako';
 import base64 from 'base64-url';
 import isSvg from 'is-svg';
 import { ReactSVG } from 'react-svg';
+import noop from 'lodash/noop';
 
 import AspectRatioContainer from './aspect-ratio-container';
 import ImgSvgEmbedder from './svg-embedder/img';
@@ -254,7 +255,7 @@ NFTDisplay.defaultProps = {
   preferredSvgEmbedder: 'img',
   checkSvg: false,
   minimumLoadingTime: 0,
-  onCompleted: () => {},
+  onCompleted: noop,
 };
 
 const Root = styled('div')`

package/src/QRCode/index.js

@@ -1,6 +1,7 @@
 import { useRef, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import QRCodeStyling from '@solana/qr-code-styling';
+import { Box } from '@mui/material';
 
 const defaults = {
   margin: 0,
@@ -50,7 +51,7 @@ function QRCode({ data, size, image, config, ...rest }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, size, image, config]);
 
-  return <div ref={ref} {...rest} />;
+  return <Box ref={ref} {...rest} />;
 }
 
 QRCode.propTypes = {