style: add eslint configuration and fixed linter issues (#35)

* style: add eslint configuration as per bee-js * chore: add `plugin:react/reocommended` in `.eslintrc` Co-authored-by: nugaon <50576770+nugaon@users.noreply.github.com> * chore: add `consistent` to `array-bracket-newline` as per review * style: after automatic fixes with `npm run lint` * style: fixed all linter errors * refactor: fixed all linter warnings * chore: added missing new line at end of `.prettierrc` file Co-authored-by: nugaon <50576770+nugaon@users.noreply.github.com>
2021-04-03 14:04:37 +02:00
parent 9838aa70c8
commit bc01d60728
54 changed files with 3454 additions and 2782 deletions
@@ -1,44 +1,57 @@
-import { Typography } from '@material-ui/core/';
-import { CheckCircle, Warning } from '@material-ui/icons/';
-import EthereumAddress from '../../../components/EthereumAddress';
-import DepositModal from '../../../components/DepositModal';
-import CodeBlockTabs from '../../../components/CodeBlockTabs';
+import { Typography } from '@material-ui/core/'
+import { CheckCircle, Warning } from '@material-ui/icons/'
+import EthereumAddress from '../../../components/EthereumAddress'
+import DepositModal from '../../../components/DepositModal'
+import CodeBlockTabs from '../../../components/CodeBlockTabs'
+import type { ChequebookAddressResponse, ChequebookBalanceResponse } from '@ethersphere/bee-js'
+import type { ReactElement } from 'react'

-export default function ChequebookDeployFund(props: any) {
-    return (
-        <div> 
-            <p style={{marginBottom:'20px', display:'flex'}}>
-                <span style={{ marginRight:'40px'}} >Deploy chequebook and fund with BZZ</span>
-                {props.chequebookAddress?.chequebookaddress ?
-                <DepositModal />
-                : null }
-            </p>
-            <div style={{ marginBottom:'10px' }}>
-            {props.chequebookAddress?.chequebookaddress && props.chequebookBalance && props.chequebookBalance?.totalBalance > 0 ?
-                <div>
-                    <CheckCircle style={{color:'#32c48d', marginRight: '7px', height: '18px'}} />
-                    <span>Your chequebook is deployed and funded!</span>
-                </div>
-            :  
-                props.loadingChequebookAddress || props.isLoadingChequebookBalance ?
-                null 
-                :
-                <div>
-                    <Warning style={{color:'#ff9800', marginRight: '7px', height: '18px'}} />
-                    <span>Your chequebook is either not deployed or funded. Run the below commands to get your address and deposit ETH. Then visit the BZZaar here <Typography variant='button'>https://bzz.ethswarm.org/?transaction=buy&amount=10&slippage=30&receiver=[ENTER_ADDRESS_HERE]</Typography> to get BZZ</span>
-                    <CodeBlockTabs
-                    showLineNumbers
-                    linux={`bee-get-addr`}
-                    mac={`bee-get-addr`}
-                    />
-                </div>
-            } 
-            </div>
-            <Typography variant="subtitle1" gutterBottom>Chequebook Address</Typography>
-            <EthereumAddress
-              address={props.chequebookAddress?.chequebookaddress}
-              network={'goerli'}
-            />
-            </div>
-    )
+interface Props {
+  chequebookAddress: ChequebookAddressResponse | null
+  chequebookBalance: ChequebookBalanceResponse | null
+  isLoadingChequebookAddress: boolean
+  isLoadingChequebookBalance: boolean
 }
+
+const ChequebookDeployFund = (props: Props): ReactElement => (
+  <div>
+    <p style={{ marginBottom: '20px', display: 'flex' }}>
+      <span style={{ marginRight: '40px' }}>Deploy chequebook and fund with BZZ</span>
+      {props.chequebookAddress?.chequebookaddress ? <DepositModal /> : null}
+    </p>
+    <div style={{ marginBottom: '10px' }}>
+      {
+        // FIXME: this should be broken up
+        /* eslint-disable no-nested-ternary */
+        props.chequebookAddress?.chequebookaddress &&
+        props.chequebookBalance &&
+        props.chequebookBalance?.totalBalance > 0 ? (
+          <div>
+            <CheckCircle style={{ color: '#32c48d', marginRight: '7px', height: '18px' }} />
+            <span>Your chequebook is deployed and funded!</span>
+          </div>
+        ) : props.isLoadingChequebookAddress || props.isLoadingChequebookBalance ? null : (
+          <div>
+            <Warning style={{ color: '#ff9800', marginRight: '7px', height: '18px' }} />
+            <span>
+              Your chequebook is either not deployed or funded. Run the below commands to get your address and deposit
+              ETH. Then visit the BZZaar here{' '}
+              <Typography variant="button">
+                https://bzz.ethswarm.org/?transaction=buy&amount=10&slippage=30&receiver=[ENTER_ADDRESS_HERE]
+              </Typography>{' '}
+              to get BZZ
+            </span>
+            <CodeBlockTabs showLineNumbers linux={`bee-get-addr`} mac={`bee-get-addr`} />
+          </div>
+        )
+        /* eslint-enable no-nested-ternary */
+      }
+    </div>
+    <Typography variant="subtitle1" gutterBottom>
+      Chequebook Address
+    </Typography>
+    <EthereumAddress address={props.chequebookAddress?.chequebookaddress} network={'goerli'} />
+  </div>
+)
+
+export default ChequebookDeployFund