@arcblock/ux 2.1.18 → 2.1.21

package/src/Video/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import Player from 'react-player';
 import styled from 'styled-components';
@@ -23,13 +23,7 @@ export default function Video(props) {
   if (url.indexOf('v.qq.com') > 0) {
     return (
       <Placeholder style={{ width, height }}>
-        <iframe
-          title={url}
-          style={styles}
-          src={url}
-          onLoad={() => setLoaded(true)}
-          allowFullScreen="true"
-        />
+        <iframe title={url} style={styles} src={url} onLoad={() => setLoaded(true)} allowFullScreen="true" />
         {!loaded && <CircularProgress className="loading-indicator" color="primary" />}
       </Placeholder>
     );

package/src/Wallet/Action.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -75,7 +74,7 @@ const Content = styled.div`
   .wallet-action__logo {
     width: auto;
     height: auto;
-    max-width: ${props => sizes.logo[props.size]}px;
+    max-width: ${(props) => sizes.logo[props.size]}px;
     margin-left: 5px;
   }
 
@@ -89,17 +88,17 @@ const Content = styled.div`
   }
 
   .wallet-action__action {
-    font-size: ${props => sizes.font[props.size]}px;
+    font-size: ${(props) => sizes.font[props.size]}px;
     text-transform: capitalize;
     margin-bottom: 1px;
-    color: ${props => props.color || colors.primary.main};
+    color: ${(props) => props.color || colors.primary.main};
     letter-spacing: 1px;
   }
 
   .wallet-action__title {
-    font-size: ${props => sizes.font[props.size] * 1.5}px;
+    font-size: ${(props) => sizes.font[props.size] * 1.5}px;
     text-transform: capitalize;
-    color: ${props => props.color || colors.primary.main};
+    color: ${(props) => props.color || colors.primary.main};
     letter-spacing: 1px;
   }
 `;

package/src/Wallet/Download.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -100,17 +99,17 @@ WalletDownload.defaultProps = {
 
 const Container = styled.div`
   display: flex;
-  flex-direction: ${props => (props.layout === 'vertical' ? 'column' : 'row')};
+  flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
   align-items: center;
 
   .download-title {
-    margin-right: ${props => (props.layout === 'vertical' ? '0' : '16px')};
-    margin-bottom: ${props => (props.layout === 'vertical' ? '16px' : '0')};
+    margin-right: ${(props) => (props.layout === 'vertical' ? '0' : '16px')};
+    margin-bottom: ${(props) => (props.layout === 'vertical' ? '16px' : '0')};
   }
 
   .download-store-list {
     display: flex;
-    flex-direction: ${props => (props.storeLayout === 'vertical' ? 'column' : 'row')};
+    flex-direction: ${(props) => (props.storeLayout === 'vertical' ? 'column' : 'row')};
     justify-content: space-between;
     align-items: center;
 
@@ -118,8 +117,8 @@ const Container = styled.div`
       padding: 0;
       margin: 0;
 
-      margin-right: ${props => (props.storeLayout === 'vertical' ? '0' : '16px')};
-      margin-bottom: ${props => (props.storeLayout === 'vertical' ? '16px' : '0')};
+      margin-right: ${(props) => (props.storeLayout === 'vertical' ? '0' : '16px')};
+      margin-bottom: ${(props) => (props.storeLayout === 'vertical' ? '16px' : '0')};
 
       &:last-of-type {
         margin-right: 0;

package/src/Wallet/Open.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import useBrowser from '@arcblock/react-hooks/lib/useBrowser';
@@ -45,6 +44,6 @@ const Button = styled(Fab)`
     transform-origin: 50% 50%;
     transform: translateX(-50%);
     min-width: 120px;
-    z-index: ${props => props.theme.zIndex.tooltip};
+    z-index: ${(props) => props.theme.zIndex.tooltip};
   }
 `;

package/src/WechatPrompt/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import Typography from '@mui/material/Typography';
@@ -25,9 +24,7 @@ export default function WechatPrompt() {
         <Container>
           <Typography className="wechat-title">1. 轻触右上方菜单</Typography>
           <div className="wechat-tip">
-            <Typography className="wechat-tip-text">
-              2. 点击“在浏览器打开”，才能调起 DID 钱包
-            </Typography>
+            <Typography className="wechat-tip-text">2. 点击“在浏览器打开”，才能调起 DID 钱包</Typography>
             <img className="wechat-tip-img" src={AndroidImage} alt="Open in Android Browser" />
           </div>
         </Container>
@@ -40,9 +37,7 @@ export default function WechatPrompt() {
       <Container>
         <Typography className="wechat-title">1. 轻触右上方菜单</Typography>
         <div className="wechat-tip">
-          <Typography className="wechat-tip-text">
-            2. 点击“在Safari中打开”，才能调起 DID 钱包
-          </Typography>
+          <Typography className="wechat-tip-text">2. 点击“在Safari中打开”，才能调起 DID 钱包</Typography>
           <img className="wechat-tip-img" src={IosImage} alt="Open in Safari" />
         </div>
       </Container>

package/src/withTheme/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ThemeProvider, createGlobalStyle } from 'styled-components';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -6,16 +6,16 @@ import CssBaseline from '@mui/material/CssBaseline';
 import { create } from '../Theme';
 
 const GlobalStyle = createGlobalStyle`
-  font-family: ${props => props.theme.typography.fontFamily};
-  color: ${props => props.theme.typography.color.main};
+  font-family: ${(props) => props.theme.typography.fontFamily};
+  color: ${(props) => props.theme.typography.color.main};
 
   a, a:hover, a:active {
     text-decoration: none;
-    color: ${props => props.theme.palette.primary.dark};
+    color: ${(props) => props.theme.palette.primary.dark};
   }
 
   a:hover {
-    color: ${props => props.theme.palette.primary.main};
+    color: ${(props) => props.theme.palette.primary.main};
   }
 
   .section--latest-post {

package/src/withTracker/error_boundary.js

@@ -1,10 +1,10 @@
 /* eslint-disable import/no-unresolved */
-import React from 'react';
+import { Component } from 'react';
 import * as Sentry from '@sentry/browser';
 
 import Alert from '../Alert';
 
-export default class ErrorBoundary extends React.Component {
+export default class ErrorBoundary extends Component {
   constructor(props) {
     super(props);
     this.state = { error: null };
@@ -13,7 +13,7 @@ export default class ErrorBoundary extends React.Component {
   componentDidCatch(error, info) {
     this.setState({ error });
 
-    Sentry.withScope(scope => {
+    Sentry.withScope((scope) => {
       scope.setExtras(info);
       Sentry.captureException(error);
     });

package/src/withTracker/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-deprecated */
 /* eslint-disable react/static-property-placement */
 /* eslint-disable import/no-unresolved */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactGA from 'react-ga';
 import * as Sentry from '@sentry/browser';
@@ -23,7 +23,7 @@ export default (WrappedComponent, options = {}) => {
     });
   }
 
-  const trackPage = page => {
+  const trackPage = (page) => {
     if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
       return;
     }