fix: dev:crx command of wallet not working in local env (#1639)

- Closes FE-976

- Fixes `use_dynamic_url` being set to `true` on local env, which breaks
the extension load on Chrome 130+
- Upgraded vite to V5 and @crxjs to versions that fixes previously
mentioned error
- Due to Vite requirements, load.env was migrated to use ESM syntax and
other adjustments were made in our tsconfig
- Update biome patch version to 1.6.2, which fixes an
[issue](microsoft/FluidFramework#20285) when
processing `.cts` files.
- Use multi-arch Fuel Core docker image 
- Update turbo config, adds missing inputs to commands

.changeset/good-candles-perform.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Fixed wallet not loading correctly in local environment on Chrome 130+

.github/actions/e2e-tests-contracts/action.yaml

@@ -12,7 +12,8 @@ inputs:
     required: false
   browser:
     description: Browser to run tests on (chromium or chrome-beta)
-    required: true
+    required: false
+    default: chromium
 
 runs:
   using: 'composite'
@@ -29,7 +30,13 @@ runs:
         NODE_ENV: test
 
     # E2E tests running with Playwright
+    - name: Install Playwright Browsers
+      shell: bash
+      run: |
+        npx playwright install --with-deps chromium chrome-beta --force
+
     - name: Install Playwright Browsers (${{ inputs.browser }})
+      if: inputs.browser != '' && inputs.browser != 'chromium'
       shell: bash
       run: npx playwright install --with-deps ${{ inputs.browser }}
 

.github/workflows/pr-tests-e2e-contracts.yml

@@ -47,7 +47,6 @@ jobs:
           providerUrl: "http://localhost:4000/v1/graphql"
           masterMnemonic: ${{ secrets.VITE_MASTER_WALLET_MNEMONIC }}
           genesisSecret: "0xa449b1ffee0e2205fa924c6740cc48b3b473aa28587df6dab12abc245d1f5298"
-          browser: 'chromium'
 
       - uses: actions/upload-artifact@v4
         if: always()

examples/cra-dapp/package.json

@@ -20,6 +20,6 @@
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "4.2.1",
     "typescript": "5.2.2",
-    "vite": "5.3.5"
+    "vite": "5.4.10"
   }
 }

package.json

@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
-    "@biomejs/biome": "1.6.1",
+    "@biomejs/biome": "1.6.2",
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
     "@fuels/ts-config": "0.20.0",
@@ -75,7 +75,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@xstate/cli": "0.5.2",
-    "dotenv": "^16.3.1",
+    "dotenv": "16.4.5",
     "fs-extra": "^11.1.1",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
@@ -103,7 +103,6 @@
       "trim-newlines@<3.0.1": ">=3.0.1",
       "trim@<0.0.3": ">=0.0.3",
       "debug@<3.1.0": ">=3.1.0",
-      "vite@<2.9.16": ">=2.9.16",
       "semver@<7.5.2": ">=7.5.2",
       "word-wrap": "npm:@aashutoshrathi/word-wrap",
       "cross-fetch": "4.0.0",

packages/app/jest.config.ts

@@ -2,7 +2,7 @@ import baseDefaultConfig from '@fuel-ui/test-utils/config';
 import type { JestConfigWithTsJest } from 'ts-jest';
 import { defaultsESM as tsjPreset } from 'ts-jest/presets';
 
-import { getPublicEnvs } from './load.envs';
+import { getPublicEnvs } from './load.envs.cts';
 import pkg from './package.json';
 
 const { globals, preset, ...baseConfig } = baseDefaultConfig;

packages/app/load.envs.js → packages/app/load.envs.cts

@@ -1,8 +1,7 @@
-const { config } = require('dotenv');
-// biome-ignore lint/style/useNodejsImportProtocol: <explanation>
-const { resolve } = require('path');
-// biome-ignore lint/style/useNodejsImportProtocol: <explanation>
-const { readFileSync } = require('fs');
+import path from 'node:path';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { config } from 'dotenv';
 
 function getVersion() {
   const packageJson = JSON.parse(
@@ -29,7 +28,7 @@ function getEnvName() {
   });
 });
 
-function getPublicEnvs() {
+export function getPublicEnvs() {
   const WHITELIST = ['NODE_ENV', 'PUBLIC_URL'];
   return Object.fromEntries(
     Object.entries(process.env).filter(([key]) =>
@@ -41,8 +40,6 @@ function getPublicEnvs() {
 // Export the version to be used on database
 // and application level
 const versions = getVersion();
-process.env.PORT = 3000;
+process.env.PORT = '3000';
 process.env.VITE_APP_VERSION = process.env.VITE_APP_VERSION || versions.version;
 process.env.VITE_DATABASE_VERSION = versions.database;
-
-module.exports.getPublicEnvs = getPublicEnvs;

packages/app/manifest.config.ts

@@ -1,6 +1,6 @@
 import { defineManifest } from '@crxjs/vite-plugin';
 
-import './load.envs.js';
+import './load.envs.cts';
 
 // When releasing a stable version we need to inform for the build
 // to use the white logo instead of the black one

packages/app/package.json

@@ -2,6 +2,7 @@
   "name": "fuels-wallet",
   "private": true,
   "version": "0.43.0",
+  "type": "module",
   "database": "23",
   "scripts": {
     "build:all": "run-s build:web build:crx build:storybook",
@@ -61,7 +62,7 @@
     "yup": "1.4.0"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "1.0.14",
+    "@crxjs/vite-plugin": "2.0.0-beta.28",
     "@fuel-wallet/types": "workspace:*",
     "@fuels/connectors": "0.35.1",
     "@playwright/test": "1.46.1",
@@ -103,7 +104,7 @@
     "ts-jest-mock-import-meta": "1.1.0",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.2.2",
-    "vite": "4.5.5",
+    "vite": "5.4.10",
     "vite-plugin-clean": "1.0.0",
     "vite-plugin-static-copy": "0.17.0",
     "vite-tsconfig-paths": "4.2.1",
@@ -112,4 +113,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

packages/app/playwright.config.ts

@@ -1,22 +1,21 @@
-// biome-ignore lint/style/useNodejsImportProtocol: <explanation>
-import { join } from 'path';
+import { join } from 'node:path';
 import { type PlaywrightTestConfig, defineConfig } from '@playwright/test';
-import './load.envs';
+import './load.envs.cts';
 
 const PORT = process.env.PORT;
 const IS_CI = process.env.CI;
 
 export const playwrightConfig: PlaywrightTestConfig = {
   workers: 1,
   retries: IS_CI ? 1 : 0,
-  testMatch: join(__dirname, './playwright/**/*.test.ts'),
-  testDir: join(__dirname, './playwright/'),
-  outputDir: join(__dirname, './playwright-results/'),
+  testMatch: 'playwright/**/*.test.ts',
+  testDir: 'playwright/',
+  outputDir: 'playwright-results/',
   // stop on first failure
   maxFailures: IS_CI ? 1 : undefined,
   reporter: [
     ['list', { printSteps: true }],
-    ['html', { outputFolder: join(__dirname, './playwright-html/') }],
+    ['html', { outputFolder: './playwright-html/' }],
   ],
   webServer: {
     command: 'NODE_ENV=test pnpm dev:crx',
@@ -33,7 +32,7 @@ export const playwrightConfig: PlaywrightTestConfig = {
     headless: false,
   },
   // ignore lock test because it takes too long and it will be tested in a separate config
-  testIgnore: [join(__dirname, './playwright/crx/lock.test.ts')],
+  testIgnore: ['playwright/crx/lock.test.ts'],
 };
 
 export default defineConfig(playwrightConfig);

packages/app/playwright.crx-lock.config.ts

@@ -3,6 +3,8 @@ import { join } from 'path';
 import { defineConfig } from '@playwright/test';
 import { playwrightConfig } from './playwright.config';
 
+const __dirname = new URL('.', import.meta.url).pathname;
+
 export default defineConfig({
   ...playwrightConfig,
   testMatch: join(__dirname, './playwright/crx/lock.test.ts'),

packages/app/playwright/crx/utils/test.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import type { BrowserContext } from '@playwright/test';
 import { test as base, chromium } from '@playwright/test';
 import { delay } from '../../commons';
-
+const __dirname = new URL('.', import.meta.url).pathname;
 const pathToExtension = path.join(__dirname, '../../../dist-crx');
 
 export const test = base.extend<{

packages/app/tsconfig.json

@@ -7,6 +7,8 @@
     "outDir": "./dist",
     "baseUrl": ".",
     "rootDir": ".",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
     "paths": {
       "~icons-url": ["./node_modules/@fuel-ui/icons/dist/icons/sprite.svg"],
       "~public/*": ["./public/*"],

packages/app/tsconfig.node.json

@@ -5,10 +5,11 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "outDir": "dist-crx"
   },
   "include": [
-    "load.envs.js",
+    "load.envs.cts",
     "./src/exports.ts",
     "env.d.ts",
     "playwright/**/*.ts",

packages/app/vite-utils/vite.base.config.ts

@@ -5,8 +5,7 @@ import cleanPlugin from 'vite-plugin-clean';
 import { Mode, plugin as viteMdPlugin } from 'vite-plugin-markdown';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-import '../load.envs.js';
-import { fixCRXBuildPlugin } from './fix-build-crx.plugin.js';
+import '../load.envs.cts';
 
 const linkDeps = process.env.LINK_DEPS?.trim().split(' ').filter(Boolean) || [];
 
@@ -33,7 +32,7 @@ export function resolveLinkDeps() {
 const baseConfig: UserConfig = {
   base: process.env.BASE_URL || '/',
   build: {
-    target: 'es2020',
+    target: 'esnext',
     sourcemap: true,
     outDir: process.env.APP_DIST || 'dist',
     rollupOptions: {
@@ -47,12 +46,12 @@ const baseConfig: UserConfig = {
     port: Number(process.env.PORT),
     strictPort: true,
     watch: {
-      ignored: ['**/playwright-html/**'], // Ignore changes in any 'playwright' folder
+      ignored: ['**/playwright*/**'], // Ignore changes in any 'playwright' folder
     },
   },
   optimizeDeps: {
     esbuildOptions: {
-      target: 'es2020',
+      target: 'esnext',
       supported: {
         bigint: true,
       },
@@ -77,14 +76,6 @@ const baseConfig: UserConfig = {
   ...(Boolean(process.env.CI) && {
     logLevel: 'silent',
   }),
-  /**
-   * Need because of this issue:
-   * https://github.com/vitejs/vite/issues/1973
-   * Avoid "process is not defined" when compiling in Cypress side
-   */
-  define: {
-    'process.env': {},
-  },
   ...resolveLinkDeps(),
   /**
    * Need because of this issue:

packages/app/vite.crx.config.ts

@@ -1,12 +1,11 @@
 import { crx } from '@crxjs/vite-plugin';
 import { defineConfig } from 'vite';
 
-import manifest from './manifest.config';
-import { fixCRXBuildPlugin } from './vite-utils/fix-build-crx.plugin';
-import baseConfig from './vite-utils/vite.base.config';
-import { zipBuildPlugin } from './vite-utils/zip-build.plugin';
+import manifest from './manifest.config.js';
+import baseConfig from './vite-utils/vite.base.config.js';
+import { zipBuildPlugin } from './vite-utils/zip-build.plugin.js';
 
-const OUT_DIT = process.env.CRX_OUT || 'dist-crx';
+const OUT_DIR = process.env.CRX_OUT || 'dist-crx';
 const APP_VERSION = process.env.VITE_APP_VERSION;
 const APP_VERSION_POSTFIX = process.env.APP_VERSION_POSTFIX || '';
 
@@ -16,17 +15,14 @@ export default defineConfig({
   base: '/',
   build: {
     ...baseConfig.build,
-    outDir: OUT_DIT,
+    outDir: OUT_DIR,
   },
   plugins: baseConfig.plugins?.concat([
     crx({
       manifest,
     }),
-    fixCRXBuildPlugin({
-      outDir: OUT_DIT,
-    }),
     zipBuildPlugin({
-      inDir: OUT_DIT,
+      inDir: OUT_DIR,
       outDir: baseConfig.build?.outDir,
       outFileName: `fuel-wallet-${APP_VERSION}${APP_VERSION_POSTFIX}.zip`,
       excludeFiles: /.map$/,

packages/e2e-contract-tests/package.json

@@ -36,6 +36,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.2.2",
-    "vite": "4.5.3"
+    "vite": "4.5.5"
   }
 }

packages/playwright-utils/package.json

@@ -3,6 +3,7 @@
   "version": "0.43.0",
   "license": "Apache-2.0",
   "main": "src/index.ts",
+  "type": "module",
   "publishConfig": {
     "access": "public",
     "main": "./dist/index.js",