chore(lint): fix lint and react warnings

blockchain · Jul 23, 2021 · 5425cc0 · 5425cc0
1 parent bea8b3e
commit 5425cc0
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 52 deletions.
diff --git a/...ges/blockchain-wallet-v4-frontend/src/components/Display/CoinDisplay/template.success.tsx b/...ges/blockchain-wallet-v4-frontend/src/components/Display/CoinDisplay/template.success.tsx
@@ -29,7 +29,7 @@ const CoinDisplay = (props) => {
         weight={weight}
         italic={italic}
         color={color}
-        cursor={cursor}
+        cursor={cursor || undefined}
         data-e2e={`${coin}Amt`}
         {...rest}
       >

diff --git a/...ges/blockchain-wallet-v4-frontend/src/components/Display/FiatDisplay/template.success.tsx b/...ges/blockchain-wallet-v4-frontend/src/components/Display/FiatDisplay/template.success.tsx
@@ -28,7 +28,7 @@ const FiatDisplay = (props) => {
         size={size}
         weight={weight}
         color={color}
-        cursor={cursor}
+        cursor={cursor || undefined}
         data-e2e={`${coin}FiatAmt`}
         {...rest}
       >

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxCoinPriceChart/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxCoinPriceChart/index.js
@@ -24,26 +24,26 @@ const CoinText = styled(Text)`
   display: flex;
 `
 const ItemIcon = styled(Icon)`
-  color: ${props => props.theme[props.color]} !important;
+  color: ${(props) => props.theme[props.color]} !important;
 `
 const SelectBoxCoin = styled(SelectBox)`
   .bc__control {
     border: 0px !important;
   }
   .bc__dropdown-indicator {
     padding-left: 0px;
-    color: ${props => props.theme.black};
+    color: ${(props) => props.theme.black};
   }
   .bc__single-value {
-    color: ${props => props.theme.black};
+    color: ${(props) => props.theme.black};
     transform: initial;
     position: relative;
     max-width: none;
     top: initial;
   }
 `
 
-const renderItem = props => {
+const renderItem = (props) => {
   const { text, value, ...rest } = props
   const coinValue = value || 'BTC'
   return (
@@ -59,18 +59,12 @@ const renderItem = props => {
 const renderDisplay = (props, children) => {
   const { value } = props
   const coinValue = value || 'BTC'
-  const e2eTag = coinValue + 'CurrencyOption'
+  const e2eTag = `${coinValue}CurrencyOption`
 
   return (
     <HeaderWrapper>
       <Icon name={coinValue} color={coinValue} size='22px' weight={400} />
-      <CoinText
-        size='18px'
-        weight={500}
-        color='black'
-        cursor='pointer'
-        data-e2e={e2eTag}
-      >
+      <CoinText size='18px' weight={500} color='black' cursor='pointer' data-e2e={e2eTag}>
         {children} ({value})
       </CoinText>
     </HeaderWrapper>

diff --git a/...es/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxCoinPriceChart/selectors.js b/...es/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxCoinPriceChart/selectors.js
@@ -4,3 +4,5 @@ export const getCoins = () => [
   { text: 'Bitcoin Cash', value: 'BCH' },
   { text: 'Stellar', value: 'XLM' }
 ]
+
+export default getCoins
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/index.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/index.tsx
@@ -18,7 +18,7 @@ class HeaderContainer extends React.PureComponent<Props> {
   }
 }
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators(actions.components.layoutWallet, dispatch),
   modalActions: bindActionCreators(actions.modals, dispatch),
   refreshActions: bindActionCreators(actions.components.refresh, dispatch)

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.large.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.large.tsx
@@ -27,10 +27,10 @@ const BlockchainLogoImage = styled(Image)`
   margin-left: 0;
 `
 const NavbarStyled = styled(Navbar)`
-  background-color: ${props => props.theme.grey900};
+  background-color: ${(props) => props.theme.grey900};
 `
 
-const Large: React.FC<Props> = props => {
+const Large: React.FC<Props> = (props) => {
   return (
     <NavbarStyled height='60px'>
       <NavbarHeader>

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.medium.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.medium.tsx
@@ -3,13 +3,7 @@ import { NavLink } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { Image } from 'blockchain-info-components'
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarDivider,
-  NavbarHeader,
-  NavbarNav
-} from 'components/Navbar'
+import { Navbar, NavbarBrand, NavbarDivider, NavbarHeader, NavbarNav } from 'components/Navbar'
 
 import Balances from '../MenuLeft/Balances'
 import { Props as OwnProps } from '.'
@@ -27,7 +21,7 @@ const Spacer = styled.div``
 const NavbarContainer = styled.div`
   width: auto;
   padding: 0 16px;
-  background-color: ${props => props.theme.grey900};
+  background-color: ${(props) => props.theme.grey900};
 `
 
 const BlockchainLogoImage = styled(Image)`
@@ -39,13 +33,13 @@ const BlockchainLogoImage = styled(Image)`
 const NavbarBottomStyled = styled(Navbar)`
   display: flex;
   box-sizing: border-box;
-  border-top: 1px solid ${props => props.theme.whiteFade100};
+  border-top: 1px solid ${(props) => props.theme.whiteFade100};
 `
 
-const Medium: React.FC<Props> = props => {
+const Medium: React.FC<Props> = (props) => {
   return (
     <NavbarContainer>
-      <Navbar>
+      <Navbar height='60px'>
         <NavbarHeader>
           <NavbarBrand>
             <NavLink to='/home' data-e2e='homeLink'>

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.small.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.small.tsx
@@ -28,7 +28,7 @@ const Spacer = styled.div``
 const NavbarContainer = styled.div`
   width: auto;
   padding: 0 16px;
-  background-color: ${props => props.theme.grey900};
+  background-color: ${(props) => props.theme.grey900};
 `
 
 const BlockchainLogoImage = styled(Image)`
@@ -41,17 +41,17 @@ const NavbarBottomStyled = styled(Navbar)`
   display: flex;
   box-sizing: border-box;
   justify-content: space-between;
-  border-top: 1px solid ${props => props.theme.whiteFade100};
+  border-top: 1px solid ${(props) => props.theme.whiteFade100};
 `
 
 const HamburgerIcon = styled(Icon)`
   margin-right: 16px;
 `
 
-const Small: React.FC<Props> = props => {
+const Small: React.FC<Props> = (props) => {
   return (
     <NavbarContainer>
-      <Navbar>
+      <Navbar height='60px'>
         <NavbarHeader>
           <NavbarBrand>
             <NavLink to='/home' data-e2e='homeLink'>

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/template.tsx
@@ -6,20 +6,12 @@ import Large from './template.large'
 import Medium from './template.medium'
 import Small from './template.small'
 
-const Header = props => {
+const Header = (props) => {
   const isLaptop = useMedia('laptop')
   const isTablet = useMedia('tablet')
 
   return (
-    <>
-      {isTablet ? (
-        <Small {...props} />
-      ) : isLaptop ? (
-        <Medium {...props} />
-      ) : (
-        <Large {...props} />
-      )}
-    </>
+    <>{isTablet ? <Small {...props} /> : isLaptop ? <Medium {...props} /> : <Large {...props} />}</>
   )
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Lockbox/template.header.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Lockbox/template.header.js
@@ -3,12 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
 import { Icon } from 'blockchain-info-components'
-import {
-  IconBackground,
-  SceneHeader,
-  SceneHeaderText,
-  SceneSubHeaderText
-} from 'components/Layout'
+import { IconBackground, SceneHeader, SceneHeaderText, SceneSubHeaderText } from 'components/Layout'
 
 const HeaderWrapper = styled.div`
   width: 100%;
@@ -22,10 +17,7 @@ const LockboxHeader = () => {
           <Icon name='hardware' color='blue600' size='21px' />
         </IconBackground>
         <SceneHeaderText>
-          <FormattedMessage
-            id='scenes.hardware.title'
-            defaultMessage='Hardware'
-          />
+          <FormattedMessage id='scenes.hardware.title' defaultMessage='Hardware' />
         </SceneHeaderText>
       </SceneHeader>
       <SceneSubHeaderText>