DDEX admin UI (#7151)

packages/ddex-frontend/.eslintrc.cjs

@@ -1,35 +1,19 @@
 module.exports = {
   root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-    'prettier',
-    'plugin:prettier/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh','prettier'],
+  env: { browser: true, es6: true },
+  extends: ['audius'],
+  plugins: ['react-refresh'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-    '@typescript-eslint/no-unsafe-call': 'off',
-    '@typescript-eslint/no-unsafe-assignment': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    'prettier/prettier': ['error', {
-      singleQuote: true,
-      semi: false,
-      useTabs: false,
-      tabWidth: 2,
-      trailingComma: 'es5',
-      printWidth: 80,
-      bracketSpacing: true,
-      arrowParens: 'always',
-    }],
-  },
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['react-spring*'],
+            message: 'Please use @react-spring/web instead'
+          }
+        ]
+      }
+    ]
+  }
 }

packages/ddex-frontend/src/components/App.tsx

@@ -1,13 +1,15 @@
-import Layout from './Layout'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
+
 import Ddex from '../pages/DDEX/DDEX'
 
+import Layout from './Layout'
+
 const App = () => {
   return (
-    <Router basename="/ddex">
+    <Router basename='/ddex'>
       <Layout>
         <Routes>
-          <Route path="/" element={<Ddex />} />
+          <Route path='/' element={<Ddex />} />
         </Routes>
       </Layout>
     </Router>

packages/ddex-frontend/src/components/AppWithProviders.tsx

@@ -1,11 +1,13 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { AudiusLibsProvider } from '../providers/AudiusLibsProvider'
-import { AudiusSdkProvider } from '../providers/AudiusSdkProvider'
-import { RemoteConfigProvider } from '../providers/RemoteConfigProvider'
-import { ThemeProvider } from '../providers/ThemeProvider'
-import App from './App'
 import Web3 from 'web3'
 
+import { AudiusLibsProvider } from 'providers/AudiusLibsProvider'
+import { AudiusSdkProvider } from 'providers/AudiusSdkProvider'
+import { RemoteConfigProvider } from 'providers/RemoteConfigProvider'
+import { ThemeProvider } from 'providers/ThemeProvider'
+
+import App from './App'
+
 declare global {
   interface Window {
     Web3: any

packages/ddex-frontend/src/components/Layout.tsx

@@ -6,8 +6,8 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
-    <div className="flex">
-      <main className="flex-grow p-4">{children}</main>
+    <div className='flex'>
+      <main className='flex-grow p-4'>{children}</main>
     </div>
   )
 }