balancednetwork · 0xmilktea · Aug 6, 2024 · Aug 9, 2024 · Aug 11, 2024 · Aug 11, 2024
diff --git a/.babel-plugin-macrosrc.js b/.babel-plugin-macrosrc.js
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.gitignore b/.gitignore
@@ -24,3 +24,11 @@ generated-cra-app
 template
 .env
 .eslintcache
+
+# yarn files
+.yarn/*
+
+#tsbuild
+tsconfig.tsbuildinfo
+
+dist
diff --git a/.npmrc b/.npmrc
diff --git a/.nvmrc b/.nvmrc
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,9 +1,6 @@
 {
   "recommendations": [
-    "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "msjsdiag.debugger-for-chrome",
-    "eg2.vscode-npm-script",
     "jpoissonnier.vscode-styled-components"
   ]
 }
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/index.d.ts b/index.d.ts
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon-32x32.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
+    <link rel="icon" href="/favicon-32x32.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <meta name="theme-color" content="#01002a" />
     <meta name="description" content="Track Balanced's usage with key charts and statistics." />
@@ -34,19 +34,20 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+      Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Statistics | Balanced</title>
   </head>
   <body>
+    <script type="module" src="/src/index.tsx"></script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
 

diff --git a/package.json b/package.json
@@ -5,107 +5,39 @@
   "dependencies": {
     "@balancednetwork/balanced-js": "1.2.35",
     "@balancednetwork/sdk-core": "1.0.1",
-    "@material-ui/core": "4.12.3",
-    "@material-ui/lab": "4.0.0-alpha.60",
     "@popperjs/core": "2.8.4",
     "@reach/dialog": "0.12.1",
     "@reach/portal": "0.12.1",
-    "@reduxjs/toolkit": "1.4.0",
-    "@testing-library/jest-dom": "5.11.4",
-    "@testing-library/react": "11.0.2",
-    "@types/jest": "25.1.4",
-    "@types/lodash": "4.14.168",
-    "@types/node": "14.6.4",
-    "@types/react": "18.2.20",
-    "@types/react-dom": "16.9.8",
-    "@types/react-helmet": "6.1.6",
-    "@types/react-redux": "7.1.25",
-    "@types/react-router": "5.1.20",
-    "@types/react-router-dom": "5.3.3",
-    "@types/react-test-renderer": "16.9.3",
-    "@types/rebass": "4.0.7",
-    "@types/rimraf": "3.0.0",
-    "@types/shelljs": "0.8.8",
-    "@types/styled-components": "5.1.3",
-    "@types/testing-library__jest-dom": "5.9.2",
-    "@types/webpack": "4.41.22",
-    "@types/webpack-env": "1.15.2",
+    "@tanstack/react-query": "^5",
     "axios": "0.21.1",
     "bignumber.js": "9.0.1",
-    "chalk": "4.1.0",
-    "cross-env": "7.0.2",
     "dayjs": "1.10.5",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react-hooks": "4.1.0",
-    "husky": "4.2.5",
-    "i18next": "19.7.0",
-    "i18next-browser-languagedetector": "6.0.1",
-    "i18next-scanner": "2.11.0",
     "icon-sdk-js": "0.0.18",
-    "jest-styled-components": "7.0.3",
-    "jsbi": "4.3.0",
     "lightweight-charts": "3.2.0",
-    "lint-staged": "10.3.0",
-    "lodash": "4.17.21",
-    "node-plop": "0.26.2",
     "numbro": "2.3.2",
-    "plop": "2.7.4",
     "polished": "4.0.5",
-    "prettier": "2.1.1",
-    "react": "16.13.1",
-    "react-app-polyfill": "1.0.6",
-    "react-click-away-listener": "2.0.0",
+    "react": "^18.2.0",
+    "react-click-away-listener": "2.2.3",
     "react-datepicker": "4.2.1",
     "react-device-detect": "1.15.0",
-    "react-dom": "16.13.1",
+    "react-dom": "^18.2.0",
     "react-helmet-async": "1.3.0",
-    "react-i18next": "11.7.2",
     "react-is": "17.0.1",
-    "react-popper": "2.2.4",
-    "react-query": "3.16.0",
-    "react-redux": "8.0.2",
-    "react-router-dom": "5.3.3",
-    "react-scripts": "4.0.1",
-    "react-spring": "8.0.27",
-    "react-test-renderer": "16.13.1",
-    "react-use": "15.3.8",
-    "react-use-gesture": "9.0.0-beta.11",
+    "react-popper": "2.3.0",
+    "react-router-dom": "^6",
+    "react-use": "17.5.0",
     "rebass": "4.0.7",
     "recharts": "2.0.9",
-    "redux-injectors": "1.3.0",
-    "redux-localstorage-simple": "2.4.0",
-    "redux-saga": "1.1.3",
-    "rimraf": "3.0.2",
     "sanitize.css": "12.0.1",
-    "serve": "11.3.2",
-    "shelljs": "0.8.4",
-    "styled-components": "5.1.0",
-    "stylelint": "13.7.0",
-    "stylelint-config-recommended": "3.0.0",
-    "stylelint-config-styled-components": "0.1.1",
-    "stylelint-processor-styled-components": "1.10.0",
-    "toformat": "2.0.0",
-    "ts-node": "^10.8.1",
-    "typescript": "^4.6.3"
+    "styled-components": "6.1.8"
   },
   "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start",
-    "build": "react-scripts --openssl-legacy-provider build",
-    "profile": "react-scripts build --profile",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "test:generators": "ts-node --project=./internals/ts-node.tsconfig.json ./internals/testing/test-generators.ts",
-    "start:prod": "yarn run build && serve -s build",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "checkTs": "tsc --noEmit",
-    "eslint": "eslint --ext js,ts,tsx",
-    "lint": "yarn run eslint src",
-    "lint:fix": "yarn run eslint --fix src",
     "lint:css": "stylelint src/**/*.css",
-    "generate": "cross-env TS_NODE_PROJECT='./internals/ts-node.tsconfig.json' plop --plopfile internals/generators/plopfile.ts",
-    "prettify": "prettier --write",
-    "extract-messages": "i18next-scanner --config=internals/extractMessages/i18next-scanner.config.js"
+    "clean": "rm -rf node_modules && rm -rf dist && rm -rf tsconfig.tsbuildinfo"
   },
   "proxy": "https://balanced.sudoblock.io",
   "browserslist": [
@@ -117,17 +49,9 @@
     "node": ">=18.0.0",
     "yarn": "^1.22.10"
   },
-  "lint-staged": {
-    "*.{ts,tsx,js,jsx}": [
-      "yarn run eslint --fix"
-    ],
-    "*.{md,json}": [
-      "prettier --write"
-    ]
-  },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn run checkTs && lint-staged"
+      "pre-commit": "yarn run checkTs"
     }
   },
   "jest": {
@@ -150,6 +74,25 @@
     }
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@babel/runtime": "^7.25.0",
+    "@types/lodash": "4.14.168",
+    "@types/node": "^22.1.0",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-helmet": "6.1.6",
+    "@types/react-router-dom": "^5",
+    "@types/rebass": "4.0.7",
+    "@types/styled-components": "5.1.3",
+    "@vitejs/plugin-react": "4.2.1",
+    "babel-runtime": "6.26.0",
+    "husky": "4.2.5",
+    "lint-staged": "10.3.0",
+    "prettier": "2.1.1",
+    "stylelint": "16.2.1",
+    "stylelint-config-standard": "36.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.3.5",
+    "vite-plugin-svgr": "4.2.0",
+    "vite-tsconfig-paths": "4.3.1"
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,19 +1,22 @@
 import React from 'react';
 
 import { Helmet } from 'react-helmet-async';
-import { useTranslation } from 'react-i18next';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { Switch, Route, BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Route, BrowserRouter, Routes } from 'react-router-dom';
 
-import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from 'theme';
+import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from '@/theme';
 
 import { PerformanceDetailsPage } from './pages/PerformanceDetails/Loadable';
 import { StatsPage } from './pages/StatsPage/Loadable';
 
 const queryClient = new QueryClient();
 
+const NotFound = () => {
+  window.location.href = 'https://balanced.network/404';
+  return null;
+}
+
 export function App() {
-  const { i18n } = useTranslation();
 
   return (
     <>
@@ -23,20 +26,18 @@ export function App() {
 
         <QueryClientProvider client={queryClient}>
           <BrowserRouter>
-            <Helmet htmlAttributes={{ lang: i18n.language }}>
+            <Helmet htmlAttributes={{ lang: "en"  }}>
               <meta name="description" content="A Balanced Network interface" />
             </Helmet>
 
-            <Switch>
-              <Route exact path="/" component={StatsPage} />
-              <Route exact path="/performance-details" component={PerformanceDetailsPage} />
+            <Routes>
+              <Route  path="/" element={<StatsPage />} />
+              <Route  path="/performance-details" element={<PerformanceDetailsPage />} />
               <Route
-                component={() => {
-                  window.location.href = 'https://balanced.network/404';
-                  return null;
-                }}
+              path='*'
+                element={<NotFound />}
               />
-            </Switch>
+            </Routes>
           </BrowserRouter>
         </QueryClientProvider>
       </ThemeProvider>

diff --git a/src/components/AnimatedList/index.tsx b/src/components/AnimatedList/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useLayoutEffect } from 'react';
 
-import usePrevious from 'hooks/usePrevious';
+import usePrevious from '@/hooks/usePrevious';
 
 const calculateBoundingBoxes = children => {
   const boundingBoxes = {};