init eslint- no fixes

.eslintignore

@@ -0,0 +1,7 @@
+*.css
+*.svg
+*.json
+*.log
+*.lock
+*.md
+.eslintrc.json

.eslintrc.json

@@ -0,0 +1,76 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "airbnb"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true,
+            "arrowFunctions": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint",
+        "prefer-arrow-functions"
+    ],
+    "rules": {
+        "no-plusplus": "off",
+        "no-continue": "off",
+        "semi": [
+            2,
+            "always"
+        ],
+        "no-underscore-dangle": "off",
+        "no-restricted-syntax": "off",
+        "react/function-component-definition": "off",
+        "arrow-body-style": "off",
+        "no-use-before-define": "off",
+        "@typescript-eslint/no-use-before-define": [
+            "error"
+        ],
+        "react/jsx-filename-extension": [
+            "warn",
+            {
+                "extensions": [
+                    ".tsx"
+                ]
+            }
+        ],
+        "import/extensions": [
+            "error",
+            "ignorePackages",
+            {
+                "ts": "never",
+                "tsx": "never"
+            }
+        ],
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": [
+            "error"
+        ],
+        "prefer-arrow-functions/prefer-arrow-functions": [
+            "warn",
+            {
+                "classPropertiesAllowed": false,
+                "disallowPrototype": false,
+                "returnStyle": "unchanged",
+                "singleReturnOnly": false
+            }
+        ]
+    },
+    "settings": {
+        "import/resolver": {
+            "typescript": {}
+        }
+    }
+}

package.json

@@ -5,9 +5,9 @@
   "private": false,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.1.0",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "6.1.0",
     "@fortawesome/react-fontawesome": "^0.1.18",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@polkadot/api": "^7.7.1",
     "@polkadot/extension-dapp": "^0.42.7",
     "@polkadot/keyring": "^9.1.1",
@@ -56,12 +56,12 @@
     "@types/": "faker-js/faker",
     "@types/jest": "^27.4.0",
     "@types/node": "^16.11.22",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
     "@types/styled-components": "^5.1.21",
     "@types/window-or-global": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/parser": "^5.25.0",
     "eslint": "^7.32.0 || ^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-typescript": "^2.7.1",
@@ -84,12 +84,6 @@
     "eject": "react-scripts eject",
     "prettier-format": "prettier --config .prettierrc --write"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       "chrome >= 67",
@@ -105,4 +99,4 @@
     ]
   },
   "homepage": "http://paritytech.github.io/polkadot-staking-dashboard/#/"
-}
+}

public/manifest.json

@@ -1,25 +1,25 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
+  short_name: 'React App',
+  name: 'Create React App Sample',
+  icons: [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      src: 'favicon.ico',
+      sizes: '64x64 32x32 24x24 16x16',
+      type: 'image/x-icon'
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
+      src: 'logo192.png',
+      type: 'image/png',
+      sizes: '192x192'
     },
     {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
+      src: 'logo512.png',
+      type: 'image/png',
+      sizes: '512x512'
+    },
   ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+  start_url: '.',
+  display: 'standalone',
+  theme_color: '#000000',
+  background_color: '#ffffff'
+};

src/Providers.tsx

@@ -1,9 +1,9 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { ThemeProvider } from 'styled-components';
 import { EntryWrapper as Wrapper } from './Wrappers';
 import Router from './Router';
-import { ThemeProvider } from 'styled-components';
 import { withProviders } from './library/Hooks';
 import { APIProvider } from './contexts/Api';
 import { AssistantProvider } from './contexts/Assistant';
@@ -33,7 +33,7 @@ export const ThemedRouter = () => {
   const { mode } = useTheme();
 
   return (
-    <ThemeProvider theme={{ mode: mode }}>
+    <ThemeProvider theme={{ mode }}>
       <WrappedRouter />
     </ThemeProvider>
   );
@@ -55,7 +55,7 @@ export const Providers = withProviders(
   SubscanProvider,
   NotificationsProvider,
   ExtrinsicsProvider,
-  SessionEraProvider
+  SessionEraProvider,
 )(ThemedRouter);
 
 export default Providers;

src/Router.tsx

@@ -2,28 +2,28 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useEffect } from 'react';
-import { PageWrapper } from './Wrappers';
-import { Routes, Route, HashRouter } from "react-router-dom";
-import { AnimatePresence } from "framer-motion"
+import {
+  Routes, Route, HashRouter, useLocation, Navigate,
+} from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
+import { Helmet } from 'react-helmet';
+import {
+  PageWrapper,
+  SideInterfaceWrapper,
+  MainInterfaceWrapper,
+  BodyInterfaceWrapper,
+} from './Wrappers';
 import { PAGES_CONFIG } from './pages';
 import { NetworkBar } from './library/NetworkBar';
 import { Modal } from './modals';
 import { Headers } from './library/Headers';
 import SideMenu from './library/SideMenu';
 import Assistant from './library/Assistant';
 import Notifications from './library/Notifications';
-import { useLocation, Navigate } from 'react-router-dom';
-import { Helmet } from "react-helmet";
 import { TITLE_DEFAULT } from './constants';
 import { useUi } from './contexts/UI';
-import {
-  SideInterfaceWrapper,
-  MainInterfaceWrapper,
-  BodyInterfaceWrapper,
-} from './Wrappers';
 
 export const RouterInner = () => {
-
   const { pathname } = useLocation();
   const { sideMenuOpen, sideMenuMinimised } = useUi();
 
@@ -61,7 +61,7 @@ export const RouterInner = () => {
                   <Route
                     key={`main_interface_page_${pageIndex}`}
                     path={page.hash}
-                    element={
+                    element={(
                       <PageWrapper
                         key={`main_interface_key__${pageIndex}`}
                         initial={{ opacity: 0, y: 10 }}
@@ -74,14 +74,14 @@ export const RouterInner = () => {
                         </Helmet>
                         <Entry page={page} />
                       </PageWrapper>
-                    }
+                    )}
                   />
-                )
+                );
               })}
               <Route
-                key={`main_interface_navigate`}
+                key="main_interface_navigate"
                 path="*"
-                element={<Navigate to='/overview' />}
+                element={<Navigate to="/overview" />}
               />
             </Routes>
           </AnimatePresence>
@@ -95,13 +95,13 @@ export const RouterInner = () => {
       <Notifications />
     </>
   );
-}
+};
 
 export const Router = () => {
   return (
     <HashRouter basename="/">
       <RouterInner />
     </HashRouter>
-  )
-}
-export default Router;
+  );
+};
+export default Router;