@arcblock/ux 2.1.18 → 2.1.21

package/src/InfoRow/index.js

@@ -1,23 +1,24 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
 import styled from 'styled-components';
 import Typography from '@mui/material/Typography';
 
-const InfoRow = ({ name, nameFormatter, layout, children, valueComponent, nameWidth, ...rest }) => (
-  <Container layout={layout} width={nameWidth} {...rest}>
-    <Typography color="textSecondary" className="info-row__name">
-      {nameFormatter(name)}
-    </Typography>
-
-    {children && (
-      <Typography color="textPrimary" component={valueComponent} className="info-row__value">
-        {children}
+function InfoRow({ name, nameFormatter, layout, children, valueComponent, nameWidth, ...rest }) {
+  return (
+    <Container layout={layout} width={nameWidth} {...rest}>
+      <Typography color="textSecondary" className="info-row__name">
+        {nameFormatter(name)}
       </Typography>
-    )}
-  </Container>
-);
+
+      {children && (
+        <Typography color="textPrimary" component={valueComponent} className="info-row__value">
+          {children}
+        </Typography>
+      )}
+    </Container>
+  );
+}
 
 InfoRow.propTypes = {
   name: PropTypes.any.isRequired,
@@ -31,10 +32,10 @@ InfoRow.propTypes = {
 InfoRow.defaultProps = {
   children: null,
   nameWidth: 90,
-  nameFormatter: name => {
+  nameFormatter: (name) => {
     const resetName = name
       .split(' ')
-      .map(x => upperFirst(camelCase(x)))
+      .map((x) => upperFirst(camelCase(x)))
       .join(' ');
 
     return typeof name === 'string' ? resetName : name;
@@ -45,15 +46,15 @@ InfoRow.defaultProps = {
 
 const Container = styled.div`
   display: flex;
-  flex-direction: ${props => (props.layout === 'vertical' ? 'column' : 'row')};
+  flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
   justify-content: flex-start;
-  align-items: ${props => (props.layout === 'vertical' ? 'flex-start' : 'center')};
+  align-items: ${(props) => (props.layout === 'vertical' ? 'flex-start' : 'center')};
   margin-bottom: 16px;
 
   .info-row__name {
-    width: ${props => props.width}px;
-    margin-right: ${props => (props.layout === 'vertical' ? '0' : '8px')};
-    margin-bottom: ${props => (props.layout === 'vertical' ? '8px' : '0')};
+    width: ${(props) => props.width}px;
+    margin-right: ${(props) => (props.layout === 'vertical' ? '0' : '8px')};
+    margin-bottom: ${(props) => (props.layout === 'vertical' ? '8px' : '0')};
     text-transform: capitalize;
   }
 
@@ -64,7 +65,7 @@ const Container = styled.div`
     font-weight: 500;
   }
 
-  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;

package/src/Layout/dashboard/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter, Link, useLocation, matchPath } from 'react-router-dom';
 import Helmet from 'react-helmet';
@@ -20,16 +20,17 @@ function NavMenuWrapper({ closeMenu, ...rest }) {
   const location = useLocation();
   useEffect(() => {
     closeMenu();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location]);
   return <NavMenu {...rest} />;
 }
 
-function Dashboard({ children, title, headerProps, links, ...rest }) {
+function Dashboard({ children, title, headerProps, links, fullWidth, ...rest }) {
   const theme = useTheme();
   const location = useLocation();
   const navItems = useMemo(
     () =>
-      links.map(link => ({
+      links.map((link) => ({
         ...link,
         label: <Link to={link.url}>{link.title}</Link>,
         active: !!matchPath(location.pathname, { path: link.url, exact: false }),
@@ -65,7 +66,9 @@ function Dashboard({ children, title, headerProps, links, ...rest }) {
           </Box>
         </Hidden>
         <Box className="dashboard-main">
-          <Container className="dashboard-content">{children}</Container>
+          <Container className="dashboard-content" {...(fullWidth && { maxWidth: false })}>
+            {children}
+          </Container>
           <Footer className="dashboard-footer" />
         </Box>
       </Box>
@@ -78,11 +81,13 @@ Dashboard.propTypes = {
   title: PropTypes.string,
   links: PropTypes.array.isRequired,
   headerProps: PropTypes.object,
+  fullWidth: PropTypes.bool,
 };
 
 Dashboard.defaultProps = {
   title: 'Home',
   headerProps: {},
+  fullWidth: false,
 };
 
 const Wrapper = styled.div`

package/src/Layout/dashboard/sidebar.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -13,13 +12,8 @@ function Sidebar({ links, addons, ...rest }) {
         {links.map(({ url, icon, title, showBadge }) => {
           return (
             <li key={url}>
-              <NavLink
-                to={url}
-                className="layout-sidebar-link"
-                activeClassName="layout-sidebar-link--active">
-                <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>
-                  {icon}
-                </span>
+              <NavLink to={url} className="layout-sidebar-link" activeClassName="layout-sidebar-link--active">
+                <span className={`layout-sidebar-icon ${showBadge ? 'layout-sidebar-badge' : ''}`}>{icon}</span>
                 <Typography component="span" className="layout-sidebar-link-text">
                   {title}
                 </Typography>
@@ -58,12 +52,12 @@ const Root = styled.div`
     flex-direction: column;
     align-items: center;
     padding: 16px 0;
-    color: ${props => props.theme.palette.text.secondary};
+    color: ${(props) => props.theme.palette.text.secondary};
     text-decoration: none;
 
     &:hover,
     &.layout-sidebar-link--active {
-      color: ${props => props.theme.palette.primary.main};
+      color: ${(props) => props.theme.palette.primary.main};
       background: ${gradient};
       border-left-color: ${teal.A700};
     }

package/src/Layout/dashboard-legacy/header.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Button from '@mui/material/IconButton';
@@ -14,16 +13,16 @@ import Logo from '../../Logo';
 
 const StyledAppBar = styled(AppBar)`
   && {
-    z-index: ${props => props.theme.zIndex.drawer};
-    background: ${props => props.theme.palette.background.default};
+    z-index: ${(props) => props.theme.zIndex.drawer};
+    background: ${(props) => props.theme.palette.background.default};
     box-shadow: none;
     top: 0;
     height: auto;
   }
   .header-toolbar {
-    background: ${props => props.theme.palette.background.default};
-    color: ${props => props.theme.palette.text.primary};
-    margin: ${props => props.theme.spacing(1)}px 0;
+    background: ${(props) => props.theme.palette.background.default};
+    color: ${(props) => props.theme.palette.text.primary};
+    margin: ${(props) => props.theme.spacing(1)}px 0;
   }
   .header-link {
     display: flex;
@@ -43,7 +42,7 @@ const StyledAppBar = styled(AppBar)`
   .header-title__primary {
     font-size: 24px;
     font-weight: 800;
-    color: ${props => props.theme.typography.color.main};
+    color: ${(props) => props.theme.typography.color.main};
     text-transform: uppercase;
     display: flex;
     align-items: center;
@@ -51,7 +50,7 @@ const StyledAppBar = styled(AppBar)`
   .header-title__secondary {
     font-size: 14px;
     line-height: 1.71;
-    color: ${props => props.theme.typography.color.gray};
+    color: ${(props) => props.theme.typography.color.gray};
   }
 
   .header-addons {
@@ -71,7 +70,7 @@ const StyledAppBar = styled(AppBar)`
   .header-menu {
     display: none;
   }
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(props) => props.theme.breakpoints.down('md')} {
     .header-title {
       display: none;
     }
@@ -107,12 +106,7 @@ export default function Header({
   return (
     <StyledAppBar position="sticky" className="header" {...rest}>
       <Toolbar disableGutters={false} className="header-toolbar">
-        <Button
-          color="inherit"
-          aria-label="open drawer"
-          edge="start"
-          className="header-menu"
-          onClick={onToggleMenu}>
+        <Button color="inherit" aria-label="open drawer" edge="start" className="header-menu" onClick={onToggleMenu}>
           <MenuIcon />
         </Button>
         <Link to={homeUrl} className="header-link">

package/src/Layout/dashboard-legacy/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
@@ -38,9 +38,8 @@ const Wrapper = styled.div`
     position: relative;
     white-space: nowrap;
     width: 120px;
-    background: ${props => props.theme.palette.background.default};
-    box-shadow: 2px 16px 10px 0
-      rgba(0, 0, 0, ${props => (props.theme.mode === 'light' ? 0.05 : 0.5)});
+    background: ${(props) => props.theme.palette.background.default};
+    box-shadow: 2px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
     border: 0;
   }
 `;
@@ -100,13 +99,7 @@ export default function Dashboard({
           open={drawerOpen}
           onClose={onToggleDrawer}
           ModalProps={{ disablePortal: true, keepMounted: true }}>
-          <Sidebar
-            className="dashboard__sidebar"
-            images={images}
-            links={links}
-            prefix={prefix}
-            logo={logo}
-          />
+          <Sidebar className="dashboard__sidebar" images={images} links={links} prefix={prefix} logo={logo} />
         </Drawer>
         <Box className="dashboard__main">
           <Container maxWidth={isFullWidth ? false : 'lg'} className="dashboard__content">

package/src/Layout/dashboard-legacy/sidebar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import withTheme from '@mui/styles/withTheme';
@@ -61,7 +61,7 @@ Sidebar.defaultProps = {
   logo: null,
 };
 
-const MenuItems = React.memo(styled.div`
+const MenuItems = memo(styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -69,7 +69,7 @@ const MenuItems = React.memo(styled.div`
   && .sidebar-logo {
     display: none;
     border-bottom: 1px solid #eee;
-    background: ${props => props.theme.palette.background.default};
+    background: ${(props) => props.theme.palette.background.default};
     position: sticky;
     top: 0;
     z-index: 1;
@@ -77,7 +77,7 @@ const MenuItems = React.memo(styled.div`
     text-align: center;
     font-size: 0;
   }
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(props) => props.theme.breakpoints.down('md')} {
     && .sidebar-logo {
       display: block;
     }
@@ -94,9 +94,9 @@ const MenuItem = styled(Button)`
     align-items: center;
     width: 100%;
     transition: all 200ms ease-in-out;
-    background: ${props => (props.selected ? gradient : '')};
+    background: ${(props) => (props.selected ? gradient : '')};
     padding: 24px 0;
-    border-left: 2px solid ${props => (props.selected ? teal.A700 : 'transparent')};
+    border-left: 2px solid ${(props) => (props.selected ? teal.A700 : 'transparent')};
     border-radius: 0;
 
     &:hover {
@@ -112,7 +112,7 @@ const MenuItem = styled(Button)`
       text-transform: capitalize;
       letter-spacing: normal;
       width: 80%;
-      color: ${props => props.theme.palette.text.primary};
+      color: ${(props) => props.theme.palette.text.primary};
     }
   }
 `;

package/src/Layout/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Helmet from 'react-helmet';
@@ -37,7 +37,7 @@ export default function Layout({
   contentOnly,
   ...rest
 }) {
-  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
   const onToggleDrawer = () => {
     setDrawerOpen(!drawerOpen);
   };
@@ -48,7 +48,7 @@ export default function Layout({
 
   let activeLink = '';
   const { pathname: currentPath } = new URL(window.location);
-  links.forEach(link => {
+  links.forEach((link) => {
     if (currentPath.startsWith(link.url) && link.url.length > activeLink.length) {
       activeLink = link.url;
     }
@@ -57,22 +57,17 @@ export default function Layout({
   const drawer = (
     <div>
       <Toolbar className="toolbar toolbar--drawer">
-        {showLogo ? <div className="menu-logo">{logo}</div> : <></>}
+        {!!showLogo && <div className="menu-logo">{logo}</div>}
         <div style={{ flexGrow: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>{brand}</div>
       </Toolbar>
       <Divider />
       <List>
-        {links.map(x => (
+        {links.map((x) => (
           <Link className="nav-link" key={x.url} href={x.url} underline="hover">
             <ListItem button className={activeLink === x.url ? 'drawer-highlight-nav' : ''}>
               <ListItemText>
                 {x.icon && (
-                  <Icon
-                    name={x.icon}
-                    size={18 * (x.iconZoom || 1)}
-                    color="inherit"
-                    style={{ marginRight: '5px' }}
-                  />
+                  <Icon name={x.icon} size={18 * (x.iconZoom || 1)} color="inherit" style={{ marginRight: '5px' }} />
                 )}
                 {x.title}
               </ListItemText>
@@ -87,11 +82,7 @@ export default function Layout({
     <>
       <Div {...rest}>
         <Helmet title={title} />
-        <AppBar
-          position="fixed"
-          className={`appbar appbar--${variant}`}
-          color="default"
-          style={{ height: 56 }}>
+        <AppBar position="fixed" className={`appbar appbar--${variant}`} color="default" style={{ height: 56 }}>
           <Container disableGutters>
             <Toolbar className="toolbar">
               <IconButton
@@ -103,7 +94,7 @@ export default function Layout({
                 size="large">
                 <MenuIcon />
               </IconButton>
-              {showLogo ? <div className="menu-logo">{logo}</div> : <></>}
+              {!!showLogo && <div className="menu-logo">{logo}</div>}
               <Typography
                 href={homeUrl}
                 component="a"
@@ -115,18 +106,13 @@ export default function Layout({
                 {brand}
               </Typography>
               {description && (
-                <Typography
-                  component="small"
-                  variant="subtitle2"
-                  color="inherit"
-                  noWrap
-                  className="description">
+                <Typography component="small" variant="subtitle2" color="inherit" noWrap className="description">
                   {description}
                 </Typography>
               )}
               <div style={{ flexGrow: 1 }} />
               <div className="nav-links">
-                {links.map(x => (
+                {links.map((x) => (
                   <Link
                     key={x.url}
                     href={x.url}
@@ -266,7 +252,7 @@ const Div = styled.div`
     }
   }
 
-  ${props => props.theme.breakpoints.up('md')} {
+  ${(props) => props.theme.breakpoints.up('md')} {
     .toolbar {
       .menu-button {
         display: none;
@@ -280,7 +266,7 @@ const Div = styled.div`
     }
   }
 
-  ${props => props.theme.breakpoints.down('md')} {
+  ${(props) => props.theme.breakpoints.down('md')} {
     .toolbar {
       .nav-links,
       .menu-logo,

package/src/Locale/browser-lang.js

@@ -49,14 +49,14 @@ function getPreferredLanguage(options) {
     return fallback;
   }
 
-  const match = languages.filter(lang => normalizeCode(lang) === browserLanguage);
+  const match = languages.filter((lang) => normalizeCode(lang) === browserLanguage);
 
   if (match.length > 0) {
     return match[0] || fallback;
   }
 
   // en == en_US
-  const matchCodeOnly = languages.filter(lang => startsWith(browserLanguage, lang));
+  const matchCodeOnly = languages.filter((lang) => startsWith(browserLanguage, lang));
   return matchCodeOnly[0] || fallback;
 }
 

package/src/Locale/context.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-prototype-builtins */
-import React, { useState, useEffect, useContext } from 'react';
+import { createContext, useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 import Cookie from 'js-cookie';
 
@@ -19,21 +19,21 @@ const langParams = {
 // 跨应用传递多语言选择的方式是在 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)) {
+  if (languages.find((x) => x.value === locale)) {
     return locale;
   }
   return null;
 };
 
-const getLocale = locale =>
+const getLocale = (locale) =>
   locale || getLocaleFromSearchParams() || Cookie.get(cookieName) || browserLang(langParams);
-const setLocale = locale => Cookie.set(cookieName, locale, getCookieOptions());
+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 LocaleContext = createContext();
   const { Provider, Consumer } = LocaleContext;
   function LocaleProvider({ children, locale, translations, ...rest }) {
     const [currentLocale, setCurrentLocale] = useState(getLocale(locale));
@@ -42,7 +42,7 @@ const create = () => {
       setLocale(currentLocale);
     }, [currentLocale]);
 
-    const changeLocale = newLocale => {
+    const changeLocale = (newLocale) => {
       setCurrentLocale(newLocale);
     };
 
@@ -55,11 +55,7 @@ const create = () => {
       return replace(translations[currentLocale][key], data);
     };
 
-    return (
-      <Provider value={{ locale: currentLocale, changeLocale, t: translate, ...rest }}>
-        {children}
-      </Provider>
-    );
+    return <Provider value={{ locale: currentLocale, changeLocale, t: translate, ...rest }}>{children}</Provider>;
   }
 
   function useLocaleContext() {

package/src/Locale/selector.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-no-bind */
-import React, { useState, useContext, useRef } from 'react';
+import { useState, useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -28,7 +28,7 @@ function LocaleSelector(props) {
   const [open, setOpen] = useState(false);
   const theme = useTheme();
 
-  const onSelect = newLocale => {
+  const onSelect = (newLocale) => {
     changeLocale(newLocale);
     setOpen(false);
     if (typeof props.onChange === 'function') {
@@ -50,7 +50,7 @@ function LocaleSelector(props) {
           <img src={dark ? globeDark : globeLight} className="trigger-image" alt="globe" />
           {showText ? (
             <Typography component="strong" className="trigger-text">
-              {languages.find(x => x.value === locale).text}
+              {languages.find((x) => x.value === locale).text}
             </Typography>
           ) : (
             ''
@@ -103,18 +103,18 @@ const Div = styled.div`
     justify-content: center;
     font-size: 14px;
     .trigger-image {
-      width: ${props => props.size}px;
-      height: ${props => props.size}px;
+      width: ${(props) => props.size}px;
+      height: ${(props) => props.size}px;
     }
     .trigger-text {
       margin-left: 5px;
       font-size: 14px;
-      color: ${props => getColor(props)};
+      color: ${(props) => getColor(props)};
     }
   }
 
   .locales {
-    background: ${props => getBackground(props)};
+    background: ${(props) => getBackground(props)};
   }
 
   .locale-item {
@@ -124,7 +124,7 @@ const Div = styled.div`
     line-height: normal;
     letter-spacing: 2px;
     text-align: center;
-    color: ${props => getColor(props)};
+    color: ${(props) => getColor(props)};
     cursor: pointer;
     display: flex;
     padding: 16px;

package/src/Logo/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -9,8 +8,7 @@ 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" />;
+  const text = mode === 'light' ? <LightText className="logo-text" /> : <DarkText className="logo-text" />;
 
   return (
     <Container layout={layout} {...rest}>
@@ -36,12 +34,12 @@ Logo.defaultProps = {
 
 const Container = styled.span`
   display: inline-flex;
-  flex-direction: ${props => (props.layout === 'horizontal' ? 'row' : 'column')};
+  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;')};
+    ${(props) => (props.layout === 'vertical' ? 'margin-top: 8px;' : '')}
+    ${(props) => (props.layout === 'vertical' ? '' : 'margin-left: 8px;')};
   }
 `;

package/src/Metric/index.js

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-danger */
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -42,9 +41,9 @@ Metric.defaultProps = {
 };
 
 const Container = styled.div`
-  border-left: 1px solid ${props => props.theme.typography.color.main};
+  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) {
+  @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
     padding: 0 0 0 8px;
   }
 
@@ -64,19 +63,19 @@ const Container = styled.div`
 
   .metric__number {
     margin-bottom: 8px;
-    font-size: ${props => (props.size === 'small' ? 32 : 36)}px;
+    font-size: ${(props) => (props.size === 'small' ? 32 : 36)}px;
     font-weight: 600;
     line-height: 36px;
-    color: ${props => props.theme.typography.color.main};
+    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;
+    @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;
     }
   }
@@ -94,8 +93,8 @@ const Container = styled.div`
     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) {
+    color: ${(props) => props.theme.typography.color.main};
+    @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
       font-size: 10px;
       line-height: 1;
     }

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 

package/src/NFTDisplay/broken.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import BrokenImage from '@mui/icons-material/BrokenImage';