feat: upgrade nextjs version & refactor

This commit is contained in:
AzizbekFayziyev 2026-01-10 20:31:58 +05:00
parent 1ad1fa9d22
commit dc85991bc4
20 changed files with 2741 additions and 3788 deletions

View file

@ -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

13
.eslintrc.cjs Normal file
View file

@ -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',
},
},
},
};

View file

@ -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"]
}
}
}
}

View file

@ -9,91 +9,91 @@
# 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" ]
pull_request:
branches: [ "master" ]
schedule:
- cron: '21 18 * * 6'
push:
branches: ['master']
pull_request:
branches: ['master']
schedule:
- cron: '21 18 * * 6'
jobs:
analyze:
name: Analyze (${{ matrix.language }})
# Runner size impacts CodeQL analysis time. To learn more, please see:
# - https://gh.io/recommended-hardware-resources-for-running-codeql
# - https://gh.io/supported-runners-and-hardware-resources
# - https://gh.io/using-larger-runners (GitHub.com only)
# Consider using larger runners or machines with greater resources for possible analysis time improvements.
runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
permissions:
# required for all workflows
security-events: write
analyze:
name: Analyze (${{ matrix.language }})
# Runner size impacts CodeQL analysis time. To learn more, please see:
# - https://gh.io/recommended-hardware-resources-for-running-codeql
# - https://gh.io/supported-runners-and-hardware-resources
# - https://gh.io/using-larger-runners (GitHub.com only)
# Consider using larger runners or machines with greater resources for possible analysis time improvements.
runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
permissions:
# required for all workflows
security-events: write
# required to fetch internal or private CodeQL packs
packages: read
# required to fetch internal or private CodeQL packs
packages: read
# only required for workflows in private repositories
actions: read
contents: read
# only required for workflows in private repositories
actions: read
contents: read
strategy:
fail-fast: false
matrix:
include:
- language: javascript-typescript
build-mode: none
# CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
# Use `c-cpp` to analyze code written in C, C++ or both
# Use 'java-kotlin' to analyze code written in Java, Kotlin or both
# Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
# To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
# see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
# If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
# your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
steps:
- name: Checkout repository
uses: actions/checkout@v4
strategy:
fail-fast: false
matrix:
include:
- language: javascript-typescript
build-mode: none
# CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
# Use `c-cpp` to analyze code written in C, C++ or both
# Use 'java-kotlin' to analyze code written in Java, Kotlin or both
# Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
# To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
# see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
# If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
# your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
steps:
- name: Checkout repository
uses: actions/checkout@v4
# Add any setup steps before running the `github/codeql-action/init` action.
# This includes steps like installing compilers or runtimes (`actions/setup-node`
# or others). This is typically only required for manual builds.
# - name: Setup runtime (example)
# uses: actions/setup-example@v1
# Add any setup steps before running the `github/codeql-action/init` action.
# This includes steps like installing compilers or runtimes (`actions/setup-node`
# or others). This is typically only required for manual builds.
# - name: Setup runtime (example)
# uses: actions/setup-example@v1
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v4
with:
languages: ${{ matrix.language }}
build-mode: ${{ matrix.build-mode }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v4
with:
languages: ${{ matrix.language }}
build-mode: ${{ matrix.build-mode }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
# queries: security-extended,security-and-quality
# For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
# queries: security-extended,security-and-quality
# If the analyze step fails for one of the languages you are analyzing with
# "We were unable to automatically build your code", modify the matrix above
# to set the build mode to "manual" for that language. Then modify this step
# to build your code.
# Command-line programs to run using the OS shell.
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
- name: Run manual build steps
if: matrix.build-mode == 'manual'
shell: bash
run: |
echo 'If you are using a "manual" build mode for one or more of the' \
'languages you are analyzing, replace this with the commands to build' \
'your code, for example:'
echo ' make bootstrap'
echo ' make release'
exit 1
# If the analyze step fails for one of the languages you are analyzing with
# "We were unable to automatically build your code", modify the matrix above
# to set the build mode to "manual" for that language. Then modify this step
# to build your code.
# Command-line programs to run using the OS shell.
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
- name: Run manual build steps
if: matrix.build-mode == 'manual'
shell: bash
run: |
echo 'If you are using a "manual" build mode for one or more of the' \
'languages you are analyzing, replace this with the commands to build' \
'your code, for example:'
echo ' make bootstrap'
echo ' make release'
exit 1
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v4
with:
category: "/language:${{matrix.language}}"
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v4
with:
category: '/language:${{matrix.language}}'

View file

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

3
next-env.d.ts vendored
View file

@ -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.

6022
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -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"
}
}

View file

@ -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',
};

4
prettier.config.mjs Normal file
View file

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

View file

@ -1,77 +1,77 @@
.tooltip {
transition: none !important;
width: 300px;
transition: none !important;
width: 300px;
&__body {
width: 100%;
text-align: center;
border-radius: 10px;
background-color: #fff;
padding: 15px;
display: flex;
flex-direction: column;
gap: 10px;
}
&__body {
width: 100%;
text-align: center;
border-radius: 10px;
background-color: #fff;
padding: 15px;
display: flex;
flex-direction: column;
gap: 10px;
}
&__index {
font-size: 20px;
font-weight: 600;
color: #0c0c3a;
line-height: 100%;
}
&__index {
font-size: 20px;
font-weight: 600;
color: #0c0c3a;
line-height: 100%;
}
&__content,
&__content p {
color: #0c0c3a;
font-size: 14px;
font-weight: 400;
line-height: 140%;
}
&__content,
&__content p {
color: #0c0c3a;
font-size: 14px;
font-weight: 400;
line-height: 140%;
}
&__btn {
padding: 13px;
font-size: 14px;
font-weight: 500;
line-height: 100%;
}
&__btn {
padding: 13px;
font-size: 14px;
font-weight: 500;
line-height: 100%;
}
&__skip {
margin-top: 8px;
width: 100%;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 140%;
color: var(--guide-skip-btn);
background-color: transparent !important;
}
&__skip {
margin-top: 8px;
width: 100%;
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 140%;
color: var(--guide-skip-btn);
background-color: transparent !important;
}
}
@media screen and (max-width:620px) {
.tooltip {
width: 200px;
@media screen and (max-width: 620px) {
.tooltip {
width: 200px;
&__body {
gap: 8px;
padding: 10px;
}
&__body {
gap: 8px;
padding: 10px;
}
&__content,
&__content p {
font-size: 12px;
}
&__content,
&__content p {
font-size: 12px;
}
&__btn,
&__skip {
font-size: 12px;
}
&__btn,
&__skip {
font-size: 12px;
}
&__btn {
padding: 10px;
}
&__btn {
padding: 10px;
}
&__index {
font-size: 16px;
}
}
&__index {
font-size: 16px;
}
}
}

View file

@ -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>
);
}

View file

@ -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;

View file

@ -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', () => {
NProgress.start();
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);
}

View file

@ -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 });
}
};

View file

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

View file

@ -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;
}
}

1
src/svg.d.ts vendored
View file

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

View file

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