nervosnetwork · Keith-CY · Mar 11, 2025 · Mar 8, 2025 · Mar 8, 2025 · Mar 8, 2025
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "4.2.1",
     "husky": "8.0.3",
+    "jest": "27.5.1",
     "lerna": "8.1.5",
     "lint-staged": "15.2.7",
     "ncp": "2.0.0",

diff --git a/packages/neuron-ui/.eslintrc.js b/packages/neuron-ui/.eslintrc.js
@@ -65,7 +65,7 @@ module.exports = {
     'import/no-extraneous-dependencies': [
       'error',
       {
-        devDependencies: ['**/*.stories.*', 'src/setupTests.ts', '**/*.test.ts'],
+        devDependencies: ['**/*.stories.*', 'src/setupTests.ts', '**/*.test.ts', './vitest-setup.js'],
       },
     ],
     'import/extensions': [
@@ -96,5 +96,7 @@ module.exports = {
         allowExpressions: true,
       },
     ],
+    '@typescript-eslint/ban-types': 'off',
+    'import/no-unresolved': [2, { ignore: ['.svg'] }],
   },
 }
diff --git a/packages/neuron-ui/.storybook/electron.js b/packages/neuron-ui/.storybook/electron.js
@@ -3,19 +3,17 @@ const sendSyncValues = {
   'get-version': '0.103.1',
 }
 
-module.exports = {
-  ipcRenderer: {
-    sendSync(key) {
-      return sendSyncValues[key]
-    },
-    invoke() {
-      return Promise.resolve({})
-    },
-    on() {},
-    removeAllListeners() {},
+export const ipcRenderer = {
+  sendSync(key) {
+    return sendSyncValues[key]
   },
-  clipboard() {},
-  nativeImage() {},
-  shell() {},
-  desktopCapturer() {},
+  invoke() {
+    return Promise.resolve({})
+  },
+  on() {},
+  removeAllListeners() {},
 }
+export const clipboard = () => {}
+export const nativeImage = () => {}
+export const shell = () => {}
+export const desktopCapturer = () => {}
diff --git a/packages/neuron-ui/.storybook/main.ts b/packages/neuron-ui/.storybook/main.ts
@@ -1,29 +1,30 @@
-export default {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+import { StorybookConfig } from '@storybook/react-vite'
+const { mergeConfig } = require('vite')
+import path from 'path'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/preset-create-react-app',
     'storybook-addon-react-router-v6',
   ],
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {},
+  framework: '@storybook/react-vite',
+  core: {
+    builder: '@storybook/builder-vite',
   },
-  webpackFinal: config => {
-    config.resolve.fallback = {
-      fs: false,
-      crypto: false,
-      buffer: false,
-    }
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      electron: require.resolve('./electron'),
-    }
-    return config
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: { electron: path.resolve(__dirname, '../.storybook/electron') },
+      },
+    })
   },
   docs: {
     autodocs: true,
   },
+  staticDirs: ['../public'],
 }
+
+export default config
diff --git a/packages/neuron-ui/index.html b/packages/neuron-ui/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <link rel="stylesheet" href="/css/fonts.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <title>Neuron</title>
+</head>
+
+<body>
+  <navbar class="navbar"></navbar>
+  <div id="notification" class="notification"></div>
+  <main id="root" class="main-content"></main>
+  <div id="dialog" class="dialog"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>
diff --git a/packages/neuron-ui/package.json b/packages/neuron-ui/package.json
@@ -15,14 +15,14 @@
   "main": "./build",
   "license": "MIT",
   "scripts": {
-    "start": "cross-env DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false react-app-rewired start",
+    "start": "cross-env DISABLE_ESLINT_PLUGIN=true vite",
     "lint": "eslint --fix --ext .tsx,.ts,.js src",
-    "test": "react-app-rewired test --env=jsdom --watchAll=false",
-    "build": "cross-env DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false react-app-rewired build",
+    "test": "vitest --environment=jsdom --run --watch=false",
+    "build": "cross-env DISABLE_ESLINT_PLUGIN=true tsc && vite build",
     "clean": "npx rimraf build",
     "precommit": "lint-staged",
-    "storybook": "storybook dev -p 9009 -s public",
-    "build-storybook": "storybook build -s public"
+    "storybook": "storybook dev -p 9009",
+    "build-storybook": "storybook build"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -72,24 +72,27 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "@babel/preset-env": "7.26.9",
     "@babel/preset-typescript": "7.23.3",
-    "@jest/globals": "27.5.1",
-    "@storybook/addon-actions": "7.6.6",
-    "@storybook/addon-essentials": "7.6.6",
-    "@storybook/addon-interactions": "7.6.6",
-    "@storybook/addon-links": "7.6.6",
+    "@storybook/addon-actions": "8.6.4",
+    "@storybook/addon-essentials": "8.6.4",
+    "@storybook/addon-interactions": "8.6.4",
+    "@storybook/addon-links": "8.6.4",
+    "@storybook/builder-vite": "8.6.4",
     "@storybook/node-logger": "7.6.6",
-    "@storybook/preset-create-react-app": "7.6.6",
-    "@storybook/react": "7.6.6",
-    "@storybook/react-webpack5": "7.6.6",
+    "@storybook/react": "8.6.4",
+    "@storybook/react-vite": "8.6.4",
     "@storybook/testing-library": "0.2.2",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.2.0",
     "@types/enzyme": "3.10.18",
     "@types/enzyme-adapter-react-16": "1.0.9",
     "@types/node": "20.10.5",
     "@types/react": "18.2.45",
     "@types/react-dom": "18.2.18",
     "@types/react-router-dom": "5.3.3",
     "@types/styled-components": "5.1.34",
+    "@vitejs/plugin-react": "4.3.4",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "babel-jest": "25.5.1",
     "electron": "30.0.0",
@@ -100,12 +103,17 @@
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
     "jest-styled-components": "7.2.0",
-    "react-app-rewired": "2.2.1",
-    "react-scripts": "5.0.1",
-    "react-test-renderer": "18.2.0",
-    "storybook": "7.6.6",
+    "jsdom": "26.0.0",
+    "postcss-preset-env": "10.1.5",
+    "storybook": "8.6.4",
     "storybook-addon-react-router-v6": "2.0.10",
-    "webpack": "5.94.0"
+    "terser": "5.39.0",
+    "vite": "6.2.1",
+    "vite-plugin-commonjs": "0.10.4",
+    "vite-plugin-eslint": "1.8.1",
+    "vite-plugin-node-polyfills": "0.23.0",
+    "vite-plugin-svgr": "4.3.0",
+    "vitest": "3.0.8"
   },
   "resolutions": {
     "react-i18next": "14.0.0"

diff --git a/packages/neuron-ui/public/index.html b/packages/neuron-ui/public/index.html
diff --git a/packages/neuron-ui/src/components/CompensationPeriodTooltip/index.tsx b/packages/neuron-ui/src/components/CompensationPeriodTooltip/index.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { getCompensatedTime, getCompensationPeriod, CONSTANTS, CompensationPeriod, uniformTimeFormatter } from 'utils'
+import { getCompensatedTime, getCompensationPeriod, CompensationPeriod, uniformTimeFormatter } from 'utils'
+import { WITHDRAW_EPOCHS } from 'utils/const'
 import styles from './compensationPeriodTooltip.module.scss'
 
-const { WITHDRAW_EPOCHS } = CONSTANTS
-
 const HOUR = 3_600_000
 const HOURS_PER_EPOCH = 4 * HOUR
 const SECS_PER_DAY = 24 * HOUR

diff --git a/packages/neuron-ui/src/components/ErrorBoundary/index.tsx b/packages/neuron-ui/src/components/ErrorBoundary/index.tsx
@@ -5,7 +5,7 @@ import { handleViewError } from 'services/remote'
 
 const handleError = (error: Error) => {
   handleViewError(error.toString())
-  if (process.env.NODE_ENV !== 'development') {
+  if (import.meta.env.MODE !== 'development') {
     window.location.reload()
   }
   return { hasError: true }

diff --git a/packages/neuron-ui/src/components/GeneralSetting/index.tsx b/packages/neuron-ui/src/components/GeneralSetting/index.tsx
@@ -4,9 +4,9 @@ import { useSearchParams } from 'react-router-dom'
 import Dialog from 'widgets/Dialog'
 import LanguageDialog from 'components/LanguageDialog'
 import AlertDialog from 'widgets/AlertDialog'
-import { ReactComponent as VersionLogo } from 'widgets/Icons/VersionLogo.svg'
-import { ReactComponent as ArrowNext } from 'widgets/Icons/ArrowNext.svg'
-import { ReactComponent as Update } from 'widgets/Icons/Update.svg'
+import VersionLogo from 'widgets/Icons/VersionLogo.svg?react'
+import ArrowNext from 'widgets/Icons/ArrowNext.svg?react'
+import Update from 'widgets/Icons/Update.svg?react'
 import { cancelCheckUpdates, downloadUpdate, installUpdate, getVersion } from 'services/remote'
 import { uniformTimeFormatter, bytesFormatter, clsx, wakeScreen, releaseWakeLock } from 'utils'
 import Switch from 'widgets/Switch'

diff --git a/packages/neuron-ui/src/components/HardwareSign/success.tsx b/packages/neuron-ui/src/components/HardwareSign/success.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { RoutePath } from 'utils'
 import Button from 'widgets/Button'
-import { ReactComponent as CompleteIcon } from 'widgets/Icons/Complete.svg'
+import CompleteIcon from 'widgets/Icons/Complete.svg?react'
 
 import styles from './hardwareSign.module.scss'
 

diff --git a/packages/neuron-ui/src/components/History/history.module.scss b/packages/neuron-ui/src/components/History/history.module.scss
@@ -1,5 +1,4 @@
 @import '../../styles/mixin.scss';
-@import '../../styles/theme.scss';
 @import '../../styles/animation.scss';
 
 $history-info-title-color: #999;
@@ -224,7 +223,7 @@ body {
 }
 
 .isReceive {
-  color: $main-color;
+  color: var(--primary-color);
 }
 
 .tokenName {

diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx
@@ -14,7 +14,7 @@ import FormattedTokenAmount, { FormattedCKBBalanceChange } from 'components/Form
 import { useState as useGlobalState, useDispatch } from 'states'
 import { exportTransactions } from 'services/remote'
 
-import { ReactComponent as CKBAvatar } from 'widgets/Icons/Nervos.svg'
+import CKBAvatar from 'widgets/Icons/Nervos.svg?react'
 
 import { RoutePath, isMainnet as isMainnetUtil, uniformTimeFormatter } from 'utils'
 import { onEnter } from 'utils/inputDevice'
@@ -237,7 +237,6 @@ const History = () => {
           navigate(`${RoutePath.History}?pageNo=${pageNo}&keywords=${keywords}&sort=${key}&direction=${type}`)
         }}
       />
-
       <div className={styles.container}>
         <div className={styles.pagination}>
           <Pagination

diff --git a/packages/neuron-ui/src/components/ImportHardware/confirming.tsx b/packages/neuron-ui/src/components/ImportHardware/confirming.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
-import { ReactComponent as PendingIcon } from 'widgets/Icons/Pending.svg'
+import PendingIcon from 'widgets/Icons/Pending.svg?react'
 import { getDeviceExtendedPublickey } from 'services/remote'
 import { isSuccessResponse } from 'utils'
 import { ImportStep, ActionType } from './common'

diff --git a/packages/neuron-ui/src/components/ImportHardware/detect-device.tsx b/packages/neuron-ui/src/components/ImportHardware/detect-device.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import { getDevices, getDeviceCkbAppVersion, connectDevice } from 'services/remote'
 import { isSuccessResponse, errorFormatter, useDidMount } from 'utils'
-import { ReactComponent as SuccessInfo } from 'widgets/Icons/SuccessInfo.svg'
+import SuccessInfo from 'widgets/Icons/SuccessInfo.svg?react'
 import { Error as ErrorIcon } from 'widgets/Icons/icon'
 import Spinner from 'widgets/Spinner'
 import {

diff --git a/packages/neuron-ui/src/components/ImportHardware/import-error.tsx b/packages/neuron-ui/src/components/ImportHardware/import-error.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import CopyZone from 'widgets/CopyZone'
-import { ReactComponent as FailedInfo } from 'widgets/Icons/FailedInfo.svg'
+import FailedInfo from 'widgets/Icons/FailedInfo.svg?react'
 import { errorFormatter } from 'utils'
 import { ActionType, ImportHardwareState, ImportStep } from './common'
 

diff --git a/packages/neuron-ui/src/components/ImportHardware/import-success.tsx b/packages/neuron-ui/src/components/ImportHardware/import-success.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
-import { ReactComponent as CompleteIcon } from 'widgets/Icons/Complete.svg'
+import CompleteIcon from 'widgets/Icons/Complete.svg?react'
 import { ImportStep, ActionType } from './common'
 
 import styles from './findDevice.module.scss'

diff --git a/packages/neuron-ui/src/components/LanguageDialog/index.tsx b/packages/neuron-ui/src/components/LanguageDialog/index.tsx
@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next'
 import Dialog from 'widgets/Dialog'
 import { setLocale } from 'services/remote'
 import { CONSTANTS } from 'utils'
-import { ReactComponent as Arrow } from 'widgets/Icons/Arrow.svg'
-import { ReactComponent as Select } from 'widgets/Icons/Select.svg'
+import Arrow from 'widgets/Icons/Arrow.svg?react'
+import Select from 'widgets/Icons/Select.svg?react'
 import Button from 'widgets/Button'
 
 import styles from './languageDialog.module.scss'

diff --git a/packages/neuron-ui/src/components/NetworkSetting/index.tsx b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ReactComponent as EditNetwork } from 'widgets/Icons/Edit.svg'
-import { ReactComponent as DeleteNetwork } from 'widgets/Icons/Delete.svg'
+import EditNetwork from 'widgets/Icons/Edit.svg?react'
+import DeleteNetwork from 'widgets/Icons/Delete.svg?react'
 import NetworkEditorDialog from 'components/NetworkEditorDialog'
 import AlertDialog from 'widgets/AlertDialog'
 import Toast from 'widgets/Toast'

diff --git a/packages/neuron-ui/src/components/OfflineSign/index.tsx b/packages/neuron-ui/src/components/OfflineSign/index.tsx
@@ -5,7 +5,7 @@ import Dialog from 'widgets/Dialog'
 import AlertDialog from 'widgets/AlertDialog'
 import { useState as useGlobalState } from 'states'
 import { getCurrentWallet, OfflineSignStatus } from 'services/remote'
-import { ReactComponent as HardWalletIcon } from 'widgets/Icons/HardWallet.svg'
+import HardWalletIcon from 'widgets/Icons/HardWallet.svg?react'
 import OfflineSignDialog from '../OfflineSignDialog'
 
 import styles from './offlineSign.module.scss'

diff --git a/packages/neuron-ui/src/components/Overview/overview.module.scss b/packages/neuron-ui/src/components/Overview/overview.module.scss
@@ -1,5 +1,4 @@
 @import '../../styles/mixin.scss';
-@import '../../styles/theme.scss';
 @import '../../styles/animation.scss';
 
 .topContainer {

diff --git a/packages/neuron-ui/src/components/PageContainer/index.tsx b/packages/neuron-ui/src/components/PageContainer/index.tsx
@@ -10,8 +10,8 @@ import {
 } from 'utils'
 import Alert from 'widgets/Alert'
 import { Close } from 'widgets/Icons/icon'
-import { ReactComponent as Sun } from 'widgets/Icons/Sun.svg'
-import { ReactComponent as Moon } from 'widgets/Icons/Moon.svg'
+import Sun from 'widgets/Icons/Sun.svg?react'
+import Moon from 'widgets/Icons/Moon.svg?react'
 import SyncStatusComponent from 'components/SyncStatus'
 import { AppActions, useDispatch, useState as useGlobalState } from 'states'
 import { openExternal } from 'services/remote'