feat: upgrade nextjs version & refactor

.eslintignore

@@ -1 +1,22 @@
 submodules/
+node_modules/
+
+dist/
+build/
+.next/
+
+*.log
+*.tmp
+.temp/
+migrations/
+
+public/
+static/
+
+.vscode/
+.idea/
+
+.env*
+next-env.d.ts
+.eslintrc.cjs
+prettier.config.mjs

.eslintrc.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+	// Or 'jejolare/backend' for Node.js app
+	extends: ['jejolare/frontend'],
+
+	// This is needed only if you use TypeScript
+	settings: {
+		'import/resolver': {
+			typescript: {
+				project: './tsconfig.json',
+			},
+		},
+	},
+};

.eslintrc.json

@@ -1,61 +0,0 @@
-{
-	"env": {
-		"es2021": true,
-		"node": true
-	},
-	"extends": [
-		"airbnb-base",
-		"plugin:@typescript-eslint/recommended",
-		"next/core-web-vitals",
-		"plugin:prettier/recommended",
-		"prettier"
-	],
-	"parser": "@typescript-eslint/parser",
-	"plugins": ["@typescript-eslint", "import"],
-	"parserOptions": {
-		"ecmaVersion": "latest",
-		"sourceType": "module",
-		"project": "./tsconfig.json"
-	},
-	"rules": {
-		"no-console": "off",
-		"no-void": "off",
-		"import/extensions": "off",
-		"no-unused-vars": [
-			"warn",
-			{
-				"argsIgnorePattern": "^_"
-			}
-		],
-		"func-names": "off",
-		"consistent-return": "off",
-		"no-restricted-syntax": "off",
-		"class-methods-use-this": "off",
-		"@typescript-eslint/no-unused-vars": [
-			"warn",
-			{
-				"argsIgnorePattern": "^_"
-			}
-		],
-		"@typescript-eslint/explicit-member-accessibility": "off",
-		"@typescript-eslint/no-explicit-any": "error",
-		"lines-between-class-members": "off",
-		"camelcase": "off",
-		"no-underscore-dangle": "off",
-		"no-shadow": "off",
-		"no-await-in-loop": "off",
-		"radix": "off",
-		"no-plusplus": "off",
-		"no-promise-executor-return": "off",
-		"import/no-duplicates": "off",
-		"import/prefer-default-export": "off",
-		"import/no-cycle": "off"
-	},
-	"settings": {
-		"import/resolver": {
-			"node": {
-				"extensions": [".js", ".ts"]
-			}
-		}
-	}
-}

.github/workflows/codeql.yml

@@ -9,13 +9,13 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL Advanced"
+name: 'CodeQL Advanced'
 
 on:
     push:
-    branches: [ "master" ]
+        branches: ['master']
     pull_request:
-    branches: [ "master" ]
+        branches: ['master']
     schedule:
         - cron: '21 18 * * 6'
 
@@ -96,4 +96,4 @@ jobs:
             - name: Perform CodeQL Analysis
               uses: github/codeql-action/analyze@v4
               with:
-        category: "/language:${{matrix.language}}"
+                  category: '/language:${{matrix.language}}'

.prettierignore

@@ -6,3 +6,4 @@ coverage
 .env
 *.lock
 submodules/
+migrations/

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import './.next/dev/types/routes.d.ts';
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

package.json

@@ -4,8 +4,8 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"dev": "next dev",
-		"build": "next build",
+		"dev": "next dev --webpack",
+		"build": "next build --webpack",
 		"start": "next start -p 30289",
 		"lint": "next lint",
 		"eslint": "eslint . --ext .js,.ts,.tsx,.jsx --fix",
@@ -23,54 +23,39 @@
 		"@react-hook/window-size": "^3.1.1",
 		"@tanstack/react-table": "^8.21.3",
 		"antd": "^5.23.2",
-		"apexcharts": "^3.54.1",
-		"axios": "^1.4.0",
+		"apexcharts": "^4.0.0",
+		"axios": "^1.13.2",
 		"decimal.js": "^10.4.3",
 		"echarts": "^5.5.1",
 		"echarts-for-react": "^3.0.2",
-		"eslint-config-next": "13.2.4",
-		"express": "^4.18.2",
-		"jimp": "^0.22.8",
 		"nanoid": "^4.0.1",
-		"next": "^13.2.4",
+		"next": "^16.1.1",
 		"next-themes": "^0.2.1",
 		"node-fetch": "^3.3.1",
 		"nprogress": "^0.2.0",
-		"react": "18.2.0",
+		"react": "^18.3.1",
 		"react-apexcharts": "^1.5.0",
-		"react-dom": "18.2.0",
+		"react-dom": "^18.3.1",
 		"react-intersection-observer": "^9.10.3",
 		"react-joyride": "^2.9.3",
-		"sequelize": "^6.37.3",
 		"sha256": "^0.2.0",
 		"socket.io": "^4.6.1",
 		"socket.io-client": "^4.6.1",
 		"ts-node": "^10.9.1",
 		"tsc": "^2.0.4",
 		"tsx": "^4.15.7",
+		"url-loader": "^4.1.1",
 		"uuidv4": "^6.2.13"
 	},
 	"devDependencies": {
 		"@svgr/webpack": "^8.0.1",
-		"@types/big.js": "^6.2.0",
-		"@types/crypto-js": "^4.1.1",
-		"@types/express": "^4.17.17",
 		"@types/nprogress": "^0.2.3",
-		"@types/pg": "^8.10.2",
 		"@types/react": "18.2.16",
 		"@types/react-dom": "^18.2.7",
 		"@types/sha256": "^0.2.0",
-		"@typescript-eslint/eslint-plugin": "^5.55.0",
-		"cross-env": "^7.0.3",
-		"eslint": "^8.57.1",
-		"eslint-config-airbnb-base": "^15.0.0",
-		"eslint-config-prettier": "^10.1.5",
-		"eslint-plugin-import": "^2.31.0",
-		"eslint-plugin-prettier": "^5.5.3",
+		"eslint-config-jejolare": "^3.0.0",
 		"husky": "^9.1.7",
 		"lint-staged": "^15.5.2",
-		"prettier": "3.5.3",
-		"sass": "^1.59.2",
-		"url-loader": "^4.1.1"
+		"sass": "^1.59.2"
 	}
 }

prettier.config.cjs

@@ -1,12 +0,0 @@
-/** @type {import("prettier").Config} */
-module.exports = {
-	semi: true,
-	singleQuote: true,
-	trailingComma: 'all',
-	printWidth: 100,
-	tabWidth: 4,
-	useTabs: true,
-	bracketSpacing: true,
-	arrowParens: 'always',
-	endOfLine: 'lf',
-};

prettier.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import("prettier").Config} */
+import prettierConfig from 'eslint-config-jejolare/prettier';
+
+export default prettierConfig;

src/components/UI/GuideTooltip/styles.module.scss

@@ -47,7 +47,7 @@
 	}
 }
 
-@media screen and (max-width:620px) {
+@media screen and (max-width: 620px) {
 	.tooltip {
 		width: 200px;
 

src/components/dex/BadgeStatus/index.tsx

@@ -8,7 +8,9 @@ import { BadgeStatusProps } from './types';
 
 function BadgeStatus({ type, icon }: BadgeStatusProps) {
 	return (
-		<div className={classes(styles.badge, type === 'high' && styles.high, icon && styles.icon)}>
+		<span
+			className={classes(styles.badge, type === 'high' && styles.high, icon && styles.icon)}
+		>
 			<Image
 				className={styles.badge__img}
 				src={type === 'instant' ? LightningImg : RocketImg}
@@ -19,7 +21,7 @@ function BadgeStatus({ type, icon }: BadgeStatusProps) {
 					{type === 'instant' ? 'instant' : 'high volume'}
 				</span>
 			)}
-		</div>
+		</span>
 	);
 }
 

src/components/dex/BadgeStatus/styles.module.scss

@@ -2,7 +2,7 @@
 	width: fit-content;
 	padding: 1px 4px;
 	padding-right: 8px;
-	display: flex;
+	display: flex !important;
 	align-items: center;
 	gap: 2px;
 	border-radius: 100px;

src/pages/_app.tsx

@@ -5,7 +5,8 @@ import Head from 'next/head';
 import { StoreProvider } from '@/store/store-reducer';
 import NextApp, { AppContext, AppProps } from 'next/app';
 import { ThemeProvider } from 'next-themes';
-import GetConfigRes, { GetConfigResData } from '@/interfaces/responses/config/GetConfigRes';
+import axios, { AxiosError } from 'axios';
+import { GetConfigResData } from '@/interfaces/responses/config/GetConfigRes';
 import inter from '@/utils/font';
 import { API_URL } from '@/constants';
 import NProgress from 'nprogress';
@@ -19,8 +20,18 @@ NProgress.configure({
 	trickleSpeed: 200,
 });
 
-Router.events.on('routeChangeStart', () => {
+Router.events.on('routeChangeStart', (url) => {
+	if (typeof window === 'undefined') return;
+
+	const currentUrl = window.location.href;
+	const nextUrl = new URL(url, window.location.origin).href;
+
+	const currentPath = new URL(currentUrl).pathname;
+	const nextPath = new URL(nextUrl).pathname;
+
+	if (currentPath !== nextPath) {
 		NProgress.start();
+	}
 });
 
 Router.events.on('routeChangeComplete', () => {
@@ -84,27 +95,20 @@ App.getInitialProps = async (context: AppContext) => {
 	try {
 		const pageProps = await NextApp.getInitialProps(context);
 
-		const configRes = await fetch(`${API_URL}/api/config`, {
-			method: 'GET',
+		const configRes = await axios.get(`${API_URL}/api/config`, {
 			headers: {
 				'Content-Type': 'application/json',
 			},
-			credentials: 'include',
+			withCredentials: true,
 		});
 
-		if (!configRes.ok) {
-			console.error(`Failed to fetch config: ${configRes.status}`);
-			return pageProps;
-		}
-
-		const configData = (await configRes.json()) as GetConfigRes;
-
 		return {
 			...pageProps,
-			config: configData.data,
+			config: configRes.data.data,
 		};
 	} catch (error) {
-		console.error('Unable to fetch config data:', error);
+		const err = error as AxiosError;
+		console.error('Unable to fetch config data:', err?.response?.status, err?.message);
 
 		return NextApp.getInitialProps(context);
 	}

src/pages/admin/index.tsx

@@ -64,10 +64,13 @@ const AdminPanel: React.FC = () => {
 					})),
 				);
 			} else {
-				message.error('Error fetching featured pairs');
+				message.error({
+					content: 'Error fetching featured pairs',
+					className: styles.message,
+				});
 			}
 		} catch (error) {
-			message.error('Error fetching featured pairs');
+			message.error({ content: 'Error fetching featured pairs', className: styles.message });
 		}
 	};
 
@@ -121,7 +124,10 @@ const AdminPanel: React.FC = () => {
 				});
 			}
 		} catch (error) {
-			message.error('Error adding featured pair');
+			message.error({
+				content: 'Error adding featured pair',
+				className: styles.message,
+			});
 		}
 	};
 
@@ -149,7 +155,7 @@ const AdminPanel: React.FC = () => {
 				}
 			}
 		} catch (error) {
-			message.error('Error removing featured pair');
+			message.error({ content: 'Error removing featured pair', className: styles.message });
 		}
 	};
 

src/styles/Trading.module.scss

@@ -68,7 +68,6 @@
 
 @media screen and (max-width: 1024px) {
 	.trading__top {
-
 		&_trades,
 		&_form {
 			max-width: 100%;

src/styles/globals.scss

@@ -33,7 +33,7 @@ main {
 	padding: 80px 100px;
 
 	&.with-separators {
-		>* {
+		> * {
 			padding: 40px 0;
 			border-bottom: 1px solid var(--delimiter-color);
 
@@ -115,7 +115,7 @@ h6 {
 }
 
 h1,
-h1>* {
+h1 > * {
 	color: var(--font-main-color);
 	font-size: 48px;
 }
@@ -174,9 +174,8 @@ svg {
 }
 
 @media screen and (max-width: 700px) {
-
 	h1,
-	h1>* {
+	h1 > * {
 		font-size: 32px;
 	}
 }

src/svg.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 declare module '*.svg' {
 	import React = require('react');
 

tsconfig.json

@@ -95,7 +95,7 @@
 		"incremental": true,
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"jsx": "preserve"
+		"jsx": "react-jsx"
 	},
 	"ts-node": {
 		"esm": true,