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>

src/components/EthereumAddressCard.tsx

@@ -1,14 +1,14 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
-import { Card, CardContent, Typography } from '@material-ui/core/';
+import { createStyles, makeStyles } from '@material-ui/core/styles'
+import { Card, CardContent, Typography } from '@material-ui/core/'
 
-import EthereumAddress from '../components/EthereumAddress';
-import { Skeleton } from '@material-ui/lab';
+import EthereumAddress from '../components/EthereumAddress'
+import { Skeleton } from '@material-ui/lab'
 
-import type { ChequebookAddressResponse, NodeAddresses } from '@ethersphere/bee-js';
+import type { ChequebookAddressResponse, NodeAddresses } from '@ethersphere/bee-js'
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
   createStyles({
     root: {
       display: 'flex',
@@ -22,58 +22,58 @@ const useStyles = makeStyles((theme: Theme) =>
       flex: '1 0 auto',
     },
     status: {
-        color: '#fff',
-        backgroundColor: '#76a9fa',
-    }
+      color: '#fff',
+      backgroundColor: '#76a9fa',
+    },
   }),
-);  
+)
 
-interface IProps{
-    nodeAddresses: NodeAddresses | null,
-    isLoadingNodeAddresses: boolean,
-    chequebookAddress: ChequebookAddressResponse | null,
-    isLoadingChequebookAddress: boolean,
+interface Props {
+  nodeAddresses: NodeAddresses | null
+  isLoadingNodeAddresses: boolean
+  chequebookAddress: ChequebookAddressResponse | null
+  isLoadingChequebookAddress: boolean
 }
 
-function EthereumAddressCard(props: IProps) {
-    const classes = useStyles();
+function EthereumAddressCard(props: Props): ReactElement {
+  const classes = useStyles()
 
-    return (
-        <div>
-            <Card className={classes.root}>
-                {props.isLoadingNodeAddresses ? 
-                <div style={{padding: '16px'}}>
-                    <Skeleton width={300} height={30} animation="wave" />
-                    <Skeleton width={300} height={50} animation="wave" />
-                </div>
-                :
-                <div className={classes.details}>
-                    <CardContent className={classes.content}>
-                        <Typography variant="subtitle1" gutterBottom>Ethereum Address</Typography>
-                        <EthereumAddress
-                        address={props.nodeAddresses?.ethereum}
-                        network={'goerli'}
-                        />   
-                    </CardContent>
-                </div>}
-                {props.isLoadingChequebookAddress ? 
-                <div style={{padding: '16px'}}>
-                    <Skeleton width={300} height={30} animation="wave" />
-                    <Skeleton width={300} height={50} animation="wave" />
-                </div>
-                :
-                <div className={classes.details}>
-                    <CardContent className={classes.content}>
-                        <Typography variant="subtitle1" gutterBottom>Chequebook Contract Address</Typography>
-                        <EthereumAddress
-                        address={props.chequebookAddress?.chequebookaddress}
-                        network={'goerli'}
-                        />   
-                    </CardContent>
-                </div>}
-            </Card>
-        </div>
-    )
+  return (
+    <div>
+      <Card className={classes.root}>
+        {props.isLoadingNodeAddresses ? (
+          <div style={{ padding: '16px' }}>
+            <Skeleton width={300} height={30} animation="wave" />
+            <Skeleton width={300} height={50} animation="wave" />
+          </div>
+        ) : (
+          <div className={classes.details}>
+            <CardContent className={classes.content}>
+              <Typography variant="subtitle1" gutterBottom>
+                Ethereum Address
+              </Typography>
+              <EthereumAddress address={props.nodeAddresses?.ethereum} network={'goerli'} />
+            </CardContent>
+          </div>
+        )}
+        {props.isLoadingChequebookAddress ? (
+          <div style={{ padding: '16px' }}>
+            <Skeleton width={300} height={30} animation="wave" />
+            <Skeleton width={300} height={50} animation="wave" />
+          </div>
+        ) : (
+          <div className={classes.details}>
+            <CardContent className={classes.content}>
+              <Typography variant="subtitle1" gutterBottom>
+                Chequebook Contract Address
+              </Typography>
+              <EthereumAddress address={props.chequebookAddress?.chequebookaddress} network={'goerli'} />
+            </CardContent>
+          </div>
+        )}
+      </Card>
+    </div>
+  )
 }
 
 export default EthereumAddressCard