[FEATURE] Replace webpack with CRXJS and Vite

.vscode/settings.json

@@ -22,5 +22,12 @@
   "eslint.useFlatConfig": true,
   "githubPullRequests.overrideDefaultBranch": "dev",
   "githubIssues.issueBranchTitle": "${issueNumber}-${sanitizedIssueTitle}",
-  "cSpell.words": ["Cbor", "secp"]
+  "cSpell.words": ["Cbor", "secp"],
+  "json.schemas": [
+    {
+      "fileMatch": ["manifest.json"],
+      "url": "https://json.schemastore.org/chrome-manifest.json"
+    }
+  ],
+  "vitest.disableWorkspaceWarning": true
 }

_raw/manifest/manifest.dev.json

@@ -28,7 +28,8 @@
   },
   "author": "https://core.flow.com/",
   "background": {
-    "service_worker": "background.js"
+    "service_worker": "background.js",
+    "type": "module"
   },
   "content_scripts": [
     {

_raw/manifest/manifest.pro.json

@@ -28,7 +28,8 @@
   },
   "author": "https://wallet.flow.com/",
   "background": {
-    "service_worker": "sw.js"
+    "service_worker": "background.js",
+    "type": "module"
   },
   "content_scripts": [
     {

build/vite.common.config.ts

@@ -0,0 +1,117 @@
+import fs from 'fs';
+
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import svgr from 'vite-plugin-svgr';
+
+import packageJson from '../package.json';
+
+import paths from './paths';
+
+const { version } = packageJson;
+
+export default defineConfig(({ mode }) => {
+  const isDevelopment = mode === 'development';
+  const devToolsExists =
+    isDevelopment && fs.existsSync(paths.rootResolve('_raw/react-devtools.js'));
+
+  const templateData = {
+    devMode: isDevelopment,
+    hasDevTools: devToolsExists,
+  };
+
+  return {
+    build: {
+      target: 'esnext',
+      rollupOptions: {
+        input: {
+          background: paths.rootResolve('src/background/index.ts'),
+          'content-script': paths.rootResolve('src/content-script/index.ts'),
+          pageProvider: paths.rootResolve('src/content-script/pageProvider/eth/index.ts'),
+          ui: paths.rootResolve('src/ui/index.tsx'),
+          script: paths.rootResolve('src/content-script/script.js'),
+        },
+        output: {
+          dir: paths.dist,
+          entryFileNames: '[name].js',
+          format: 'es',
+        },
+      },
+    },
+    plugins: [
+      react(),
+      svgr(),
+      createHtmlPlugin({
+        minify: !isDevelopment,
+        pages: [
+          {
+            filename: 'popup.html',
+            template: paths.popupHtml,
+            entry: '/src/ui/index.tsx',
+            injectOptions: {
+              data: templateData,
+            },
+          },
+          {
+            filename: 'notification.html',
+            template: paths.notificationHtml,
+            entry: '/src/ui/index.tsx',
+            injectOptions: {
+              data: templateData,
+            },
+          },
+          {
+            filename: 'index.html',
+            template: paths.indexHtml,
+            entry: '/src/ui/index.tsx',
+            injectOptions: {
+              data: templateData,
+            },
+          },
+          {
+            filename: 'background.html',
+            template: paths.notificationHtml,
+            entry: '/src/background/index.ts',
+            injectOptions: {
+              data: templateData,
+            },
+          },
+        ],
+      }),
+      viteStaticCopy({
+        targets: [
+          {
+            src: 'node_modules/@trustwallet/wallet-core/dist/lib/wallet-core.wasm',
+            dest: '.',
+          },
+        ],
+      }),
+    ],
+    resolve: {
+      alias: {
+        '@': paths.rootResolve('src'),
+        ui: paths.rootResolve('src/ui'),
+        background: paths.rootResolve('src/background'),
+        consts: paths.rootResolve('src/constant/index'),
+        moment: 'dayjs',
+        'cross-fetch': 'cross-fetch',
+      },
+    },
+    define: {
+      'process.env.version': JSON.stringify(`version: ${version}`),
+      'process.env.release': JSON.stringify(version),
+      'process.env': {},
+      global: 'globalThis',
+    },
+    optimizeDeps: {
+      esbuildOptions: {
+        target: 'esnext',
+        supported: {
+          bigint: true,
+        },
+      },
+    },
+  };
+});

build/vite.dev.config.ts

@@ -0,0 +1,34 @@
+import { mergeConfig, defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+import commonConfig from './vite.common.config';
+
+export default defineConfig((configEnv) => {
+  const common = commonConfig(configEnv);
+
+  return mergeConfig(common, {
+    mode: 'development',
+    envDir: '.',
+    envPrefix: 'VITE_',
+    build: {
+      sourcemap: 'inline',
+      watch: {
+        include: ['src/**'],
+        exclude: ['**/public/**', '**/node_modules/**'],
+      },
+    },
+    define: {
+      'process.env.BUILD_ENV': JSON.stringify('DEV'),
+    },
+    plugins: [
+      viteStaticCopy({
+        targets: [
+          {
+            src: '_raw/react-devtools.js',
+            dest: '.',
+          },
+        ],
+      }),
+    ],
+  });
+});

build/vite.pro.config.ts

@@ -0,0 +1,28 @@
+import { mergeConfig, defineConfig } from 'vite';
+
+import commonConfig from './vite.common.config';
+
+export default defineConfig((configEnv) => {
+  const common = commonConfig(configEnv);
+
+  return mergeConfig(common, {
+    mode: 'production',
+    envDir: '.',
+    envPrefix: 'VITE_',
+    build: {
+      sourcemap: false,
+      rollupOptions: {
+        output: {
+          manualChunks: undefined,
+          inlineDynamicImports: true,
+        },
+      },
+      chunkSizeWarningLimit: 2500,
+    },
+    define: {
+      'process.env.BUILD_ENV': JSON.stringify('PRO'),
+      'process.browser': true,
+      Buffer: ['buffer', 'Buffer'],
+    },
+  });
+});

eslint.config.mjs

@@ -98,6 +98,15 @@ export default [
     },
   },
 
+  // Build files specific config
+  {
+    files: ['vite.config.ts', 'manifest.config.ts'],
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.build.json',
+      },
+    },
+  },
   // Background-specific config for chrome extension
   {
     files: ['**/src/background/**/*.{js,jsx,ts,tsx}'],

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

manifest.config.ts

@@ -0,0 +1,42 @@
+import { defineManifest } from '@crxjs/vite-plugin';
+
+import packageJson from './package.json';
+const { version } = packageJson;
+
+const OAUTH2_SCOPES = process.env.OAUTH2_SCOPES || '';
+
+const DEVTOOLS_URL = 'http://localhost:8097';
+
+async function fetchDevTools() {
+  return fetch(DEVTOOLS_URL).then((response) => {
+    if (response.status !== 200) {
+      throw new Error(`Failed to fetch: ${response.status}`);
+    }
+
+    return response.text().then((text) => {
+      const modifiedScript = `
+          // React DevTools for Chrome Extension
+          (function() {
+            ${text}
+          })();
+        `;
+      return modifiedScript;
+    });
+  });
+}
+
+// Convert from Semver (example: 0.1.0-beta6)
+const [major, minor, patch, label = '0'] = version
+  // can only contain digits, dots, or dash
+  .replace(/[^\d.-]+/g, '')
+  // split into version parts
+  .split(/[.-]/);
+
+export default defineManifest(async (env) => ({
+  manifest_version: 3,
+  name: env.mode === 'staging' ? '[INTERNAL] CRXJS Power Tools' : 'CRXJS Power Tools',
+  // up to four numbers separated by dots
+  version: `${major}.${minor}.${patch}.${label}`,
+  // semver is OK in "version_name"
+  version_name: version,
+}));

package.json

@@ -4,6 +4,11 @@
   "description": "Digital wallet created for everyone.",
   "type": "module",
   "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:pro:vite": "cp _raw/manifest/manifest.pro.json _raw/manifest.json && pnpm run prepare:pro && pnpm run clean && vite build --mode production",
+    "build:dev:vite": "cp _raw/manifest/manifest.dev.json _raw/manifest.json && pnpm run prepare:dev && pnpm run clean && vite build --mode development",
+    "preview": "vite preview",
     "prepare:dev": "pnpx tsx ./build/prepareManifest.ts dev",
     "prepare:pro": "pnpx tsx ./build/prepareManifest.ts pro",
     "clean": "mkdir -p dist && rm -rf dist/* && cp -r _raw/* dist",
@@ -37,8 +42,8 @@
     "@emotion/styled": "^11.13.5",
     "@ledgerhq/hw-app-eth": "^6.41.1",
     "@ledgerhq/hw-transport-webusb": "^6.29.4",
-    "@metamask/eth-sig-util": "^4.0.1",
-    "@metamask/obs-store": "^6.0.2",
+    "@metamask/eth-sig-util": "^8.1.1",
+    "@metamask/obs-store": "^9.1.0",
     "@mui/base": "5.0.0-beta.62",
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "5.0.0-alpha.173",
@@ -144,6 +149,7 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
+    "@crxjs/vite-plugin": "^1.0.14",
     "@eslint/js": "^9.15.0",
     "@playwright/test": "^1.49.0",
     "@svgr/webpack": "^5.5.0",
@@ -160,10 +166,10 @@
     "@types/webpack": "^5.28.5",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "@welldone-software/why-did-you-render": "^6.2.3",
     "autoprefixer": "^10.4.20",
     "css-loader": "^5.2.7",
-    "dotenv": "^16.4.5",
     "dotenv-webpack": "^8.1.0",
     "enquirer": "^2.4.1",
     "eslint": "^9.15.0",
@@ -173,6 +179,7 @@
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
     "eslint-webpack-plugin": "^4.2.0",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.1.0",
@@ -206,6 +213,10 @@
     "typescript-eslint": "^8.15.0",
     "typescript-transform-paths": "^3.5.2",
     "url-loader": "^4.1.1",
+    "vite": "^6.0.3",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-static-copy": "^2.2.0",
+    "vite-plugin-svgr": "^4.3.0",
     "vitest": "^2.1.8",
     "webpack": "^5.96.1",
     "webpack-bundle-analyzer": "^4.10.2",