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/EthereumAddress.tsx

@@ -1,54 +1,57 @@
-import React from 'react';
+import { Typography } from '@material-ui/core/'
+import QRCodeModal from './QRCodeModal'
+import ClipboardCopy from './ClipboardCopy'
 
-import { Typography } from '@material-ui/core/';
-import QRCodeModal from './QRCodeModal';
-import ClipboardCopy from './ClipboardCopy';
+import Identicon from 'react-identicons'
+import { ReactElement } from 'react'
 
-// @ts-ignore
-import Identicon from 'react-identicons';
-
-interface IProps {
-    address: string | undefined,
-    network?: string,
-    hideBlockie?: boolean,
-    transaction?: boolean,
-    truncate?: boolean,
+interface Props {
+  address: string | undefined
+  network?: string
+  hideBlockie?: boolean
+  transaction?: boolean
+  truncate?: boolean
 }
 
-export default function EthereumAddress(props: IProps) {
-    return (
-        <Typography component="div" variant="subtitle1">
-            {props.address ? 
-            <div style={{display:'flex'}}>
-                {props.hideBlockie ?
-                null
-                :
-                <div style={{paddingTop:'5px', marginRight: '10px', }}>
-                    <Identicon size='20' string={props.address} />
-                </div>}
-                <div>
-                    <a 
-                    style={props.truncate ? 
-                        { marginRight:'7px', maxWidth:'200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display:'block'} 
-                        : 
-                        { marginRight:'7px'} 
-                    }
-                    href={`https://${props.network}.${process.env.REACT_APP_ETHERSCAN_HOST}/${props.transaction ? 'tx' : 'address' }/${props.address}`}
-                    target='_blank'
-                    rel="noreferrer"
-                    >
-                        { props.address }
-                    </a>
-                </div>
-                <QRCodeModal
-                value={ props.address }
-                label={'Ethereum Address'}
-                />
-                <ClipboardCopy
-                value={ props.address }
-                />
+export default function EthereumAddress(props: Props): ReactElement {
+  return (
+    <Typography component="div" variant="subtitle1">
+      {props.address ? (
+        <div style={{ display: 'flex' }}>
+          {props.hideBlockie ? null : (
+            <div style={{ paddingTop: '5px', marginRight: '10px' }}>
+              <Identicon size={20} string={props.address} />
             </div>
-            : '-' }
-        </Typography>
-    )
+          )}
+          <div>
+            <a
+              style={
+                props.truncate
+                  ? {
+                      marginRight: '7px',
+                      maxWidth: '200px',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      display: 'block',
+                    }
+                  : { marginRight: '7px' }
+              }
+              href={`https://${props.network}.${process.env.REACT_APP_ETHERSCAN_HOST}/${
+                props.transaction ? 'tx' : 'address'
+              }/${props.address}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {props.address}
+            </a>
+          </div>
+          <QRCodeModal value={props.address} label={'Ethereum Address'} />
+          <ClipboardCopy value={props.address} />
+        </div>
+      ) : (
+        '-'
+      )}
+    </Typography>
+  )
 }