diff --git a/package.json b/package.json index 8e74147839..f4dc78585b 100644 --- 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 index b83c885ab3..c2b6beada2 100644 --- 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 index 62941a713f..18164a437d 100644 --- 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 index a8bbc1d2bc..863f6ebf84 100644 --- 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 new file mode 100644 index 0000000000..8108b98d45 --- /dev/null +++ b/packages/neuron-ui/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + Neuron + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/packages/neuron-ui/package.json b/packages/neuron-ui/package.json index 53761e2dd0..813bfa0f17 100644 --- 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,17 +72,19 @@ }, "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", @@ -90,6 +92,7 @@ "@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 deleted file mode 100755 index bbfb71d586..0000000000 --- a/packages/neuron-ui/public/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - Neuron - - - - -
-
-
- - diff --git a/packages/neuron-ui/src/components/CompensationPeriodTooltip/index.tsx b/packages/neuron-ui/src/components/CompensationPeriodTooltip/index.tsx index c719dabc31..b6a7ee707e 100644 --- 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 index bed246d94c..e707dc65b0 100644 --- 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 index 046c90c4b1..8f77e68c4d 100644 --- 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 index f971cd973f..5d30993eff 100644 --- 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 index 2c68bdcd19..70fa69db33 100644 --- 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 index f012415c87..5000029bcd 100644 --- 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}`) }} /> -
(navigate: NavigateFunction) => { return createWallet(params).then(res => { if (isSuccessResponse(res)) { @@ -153,7 +151,7 @@ const Welcome = ({ rootPath = '/wizard/', wallets = [], dispatch }: WizardElemen return (
- logo + logo {t('wizard.welcome-to-nervos-neuron')}