[_]: chore/update dependencies and project config

.wxt/eslintrc-auto-import.json

@@ -1,16 +1,43 @@
 {
   "globals": {
+    "AutoMount": true,
+    "AutoMountOptions": true,
+    "Browser": true,
+    "ContentScriptAnchoredOptions": true,
+    "ContentScriptAppendMode": true,
     "ContentScriptContext": true,
+    "ContentScriptInlinePositioningOptions": true,
+    "ContentScriptModalPositioningOptions": true,
+    "ContentScriptOverlayAlignment": true,
+    "ContentScriptOverlayPositioningOptions": true,
+    "ContentScriptPositioningOptions": true,
+    "ContentScriptUi": true,
+    "ContentScriptUiOptions": true,
+    "IframeContentScriptUi": true,
+    "IframeContentScriptUiOptions": true,
+    "InjectScriptOptions": true,
+    "IntegratedContentScriptUi": true,
+    "IntegratedContentScriptUiOptions": true,
     "InvalidMatchPattern": true,
     "MatchPattern": true,
     "MigrationError": true,
+    "ScriptPublicPath": true,
+    "ShadowRootContentScriptUi": true,
+    "ShadowRootContentScriptUiOptions": true,
+    "StopAutoMount": true,
+    "StorageArea": true,
+    "StorageAreaChanges": true,
+    "StorageItemKey": true,
+    "WxtAppConfig": true,
+    "WxtStorage": true,
+    "WxtStorageItem": true,
+    "WxtWindowEventMap": true,
     "browser": true,
     "createIframeUi": true,
     "createIntegratedUi": true,
     "createShadowRootUi": true,
     "defineAppConfig": true,
     "defineBackground": true,
-    "defineConfig": true,
     "defineContentScript": true,
     "defineUnlistedScript": true,
     "defineWxtPlugin": true,

.wxt/types/imports.d.ts

@@ -1,23 +1,51 @@
 // Generated by wxt
 export {}
 declare global {
-  const ContentScriptContext: typeof import('wxt/client')['ContentScriptContext']
-  const InvalidMatchPattern: typeof import('wxt/sandbox')['InvalidMatchPattern']
-  const MatchPattern: typeof import('wxt/sandbox')['MatchPattern']
-  const MigrationError: typeof import('wxt/storage')['MigrationError']
-  const browser: typeof import('wxt/browser')['browser']
-  const createIframeUi: typeof import('wxt/client')['createIframeUi']
-  const createIntegratedUi: typeof import('wxt/client')['createIntegratedUi']
-  const createShadowRootUi: typeof import('wxt/client')['createShadowRootUi']
-  const defineAppConfig: typeof import('wxt/sandbox')['defineAppConfig']
-  const defineBackground: typeof import('wxt/sandbox')['defineBackground']
-  const defineConfig: typeof import('wxt')['defineConfig']
-  const defineContentScript: typeof import('wxt/sandbox')['defineContentScript']
-  const defineUnlistedScript: typeof import('wxt/sandbox')['defineUnlistedScript']
-  const defineWxtPlugin: typeof import('wxt/sandbox')['defineWxtPlugin']
-  const fakeBrowser: typeof import('wxt/testing')['fakeBrowser']
-  const i18n: typeof import('#i18n')['i18n']
-  const injectScript: typeof import('wxt/client')['injectScript']
-  const storage: typeof import('wxt/storage')['storage']
-  const useAppConfig: typeof import('wxt/client')['useAppConfig']
+  const ContentScriptContext: typeof import('wxt/utils/content-script-context').ContentScriptContext
+  const InvalidMatchPattern: typeof import('wxt/utils/match-patterns').InvalidMatchPattern
+  const MatchPattern: typeof import('wxt/utils/match-patterns').MatchPattern
+  const browser: typeof import('wxt/browser').browser
+  const createIframeUi: typeof import('wxt/utils/content-script-ui/iframe').createIframeUi
+  const createIntegratedUi: typeof import('wxt/utils/content-script-ui/integrated').createIntegratedUi
+  const createShadowRootUi: typeof import('wxt/utils/content-script-ui/shadow-root').createShadowRootUi
+  const defineAppConfig: typeof import('wxt/utils/define-app-config').defineAppConfig
+  const defineBackground: typeof import('wxt/utils/define-background').defineBackground
+  const defineContentScript: typeof import('wxt/utils/define-content-script').defineContentScript
+  const defineUnlistedScript: typeof import('wxt/utils/define-unlisted-script').defineUnlistedScript
+  const defineWxtPlugin: typeof import('wxt/utils/define-wxt-plugin').defineWxtPlugin
+  const fakeBrowser: typeof import('wxt/testing').fakeBrowser
+  const i18n: typeof import('#i18n').i18n
+  const injectScript: typeof import('wxt/utils/inject-script').injectScript
+  const storage: typeof import('wxt/utils/storage').storage
+  const useAppConfig: typeof import('wxt/utils/app-config').useAppConfig
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Browser } from 'wxt/browser'
+  import('wxt/browser')
+  // @ts-ignore
+  export type { StorageArea, WxtStorage, WxtStorageItem, StorageItemKey, StorageAreaChanges, MigrationError } from 'wxt/utils/storage'
+  import('wxt/utils/storage')
+  // @ts-ignore
+  export type { WxtWindowEventMap } from 'wxt/utils/content-script-context'
+  import('wxt/utils/content-script-context')
+  // @ts-ignore
+  export type { IframeContentScriptUi, IframeContentScriptUiOptions } from 'wxt/utils/content-script-ui/iframe'
+  import('wxt/utils/content-script-ui/iframe')
+  // @ts-ignore
+  export type { IntegratedContentScriptUi, IntegratedContentScriptUiOptions } from 'wxt/utils/content-script-ui/integrated'
+  import('wxt/utils/content-script-ui/integrated')
+  // @ts-ignore
+  export type { ShadowRootContentScriptUi, ShadowRootContentScriptUiOptions } from 'wxt/utils/content-script-ui/shadow-root'
+  import('wxt/utils/content-script-ui/shadow-root')
+  // @ts-ignore
+  export type { ContentScriptUi, ContentScriptUiOptions, ContentScriptOverlayAlignment, ContentScriptAppendMode, ContentScriptInlinePositioningOptions, ContentScriptOverlayPositioningOptions, ContentScriptModalPositioningOptions, ContentScriptPositioningOptions, ContentScriptAnchoredOptions, AutoMountOptions, StopAutoMount, AutoMount } from 'wxt/utils/content-script-ui/types'
+  import('wxt/utils/content-script-ui/types')
+  // @ts-ignore
+  export type { WxtAppConfig } from 'wxt/utils/define-app-config'
+  import('wxt/utils/define-app-config')
+  // @ts-ignore
+  export type { ScriptPublicPath, InjectScriptOptions } from 'wxt/utils/inject-script'
+  import('wxt/utils/inject-script')
 }

.wxt/types/paths.d.ts

@@ -3,6 +3,7 @@ import "wxt/browser";
 
 declare module "wxt/browser" {
   export type PublicPath =
+    | ""
     | "/"
     | "/background.js"
     | "/content-scripts/content.js"

.wxt/wxt.d.ts

@@ -4,4 +4,5 @@
 /// <reference path="./types/paths.d.ts" />
 /// <reference path="./types/i18n.d.ts" />
 /// <reference path="./types/globals.d.ts" />
+/// <reference path="./types/imports-module.d.ts" />
 /// <reference path="./types/imports.d.ts" />

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "wxt -p 3001",
+    "dev:prod": "wxt -p 3001 --mode production",
     "dev:firefox": "wxt -b firefox",
     "build": "wxt build",
     "build:staging": "wxt build --mode staging",
@@ -17,29 +18,31 @@
   "dependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "@webext-core/storage": "^1.2.0",
-    "@wxt-dev/i18n": "^0.2.3",
+    "@wxt-dev/i18n": "=0.2.4",
     "axios": "^1.6.8",
     "chrome-extension-async": "^3.4.1",
     "crypto-js": "^4.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "vite": "7.3.0"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.267",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/chrome": "^0.1.32",
     "@types/crypto-js": "^4.2.2",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "@vitejs/plugin-react": "^5.1.2",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.6",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.2.2",
-    "wxt": "^0.19.27"
+    "wxt": "0.20.13"
   }
 }

postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

src/entrypoints/background.ts

@@ -1,4 +1,3 @@
-import { WebRequest } from 'wxt/browser'
 import { handleUserToken } from './utils/handleUserToken'
 import { clearProxySettings } from './popup/proxy.service'
 
@@ -67,6 +66,7 @@ export default defineBackground(() => {
     localCache.token = userToken?.token ?? null
     localCache.connection = connection ?? null
   }
+
   startInterval()
   initializeLocalCache()
 
@@ -83,7 +83,7 @@ export default defineBackground(() => {
   })
 
   browser.webRequest.onAuthRequired.addListener(
-    function (details: WebRequest.OnAuthRequiredDetailsType) {
+    function (details) {
       if (details.isProxy) {
         return {
           authCredentials: {

src/entrypoints/components/ConnectionDetails.tsx

@@ -1,4 +1,4 @@
-import { Database, MapPin } from '@phosphor-icons/react'
+import { DatabaseIcon, MapPinIcon } from '@phosphor-icons/react'
 import { Dropdown, SectionProps } from './dropdown/Dropdown'
 import { translate } from '@/constants'
 
@@ -16,7 +16,7 @@ export const ConnectionDetails = ({
   dropdownSections,
   userIp,
   isAuthenticated,
-}: ConnectionDetailsProps): JSX.Element => {
+}: ConnectionDetailsProps) => {
   const buttonLabel =
     dropdownSections
       .flatMap((s) => s.items)
@@ -28,7 +28,7 @@ export const ConnectionDetails = ({
       <div className="flex flex-col space-y-4 w-full">
         <div className="flex flex-row justify-between items-center text-white">
           <div className="flex flex-row space-x-2 items-center text-gray-100">
-            <Database size={16} />
+            <DatabaseIcon size={16} />
             <p className="text-sm font-semibold">{translate('location')}</p>
           </div>
           <div className="flex w-full z-20 justify-end">
@@ -43,7 +43,7 @@ export const ConnectionDetails = ({
         <Divider />
         <div className="flex flex-row justify-between items-center">
           <div className="flex flex-row space-x-2 items-center">
-            <MapPin size={16} className="text-gray-100" />
+            <MapPinIcon size={16} className="text-gray-100" />
             <p className="text-sm text-gray-100 font-semibold">
               {translate('ipAddress')}
             </p>

src/entrypoints/components/dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { CaretDown, CaretUp } from '@phosphor-icons/react'
+import { CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react'
 import React, { useState, useRef, useEffect } from 'react'
 import { DropdownSection } from './components/DropdownSection'
 import { VPNLocation } from '@/entrypoints/popup/App'
@@ -67,11 +67,11 @@ export const Dropdown: React.FC<DropdownProps> = ({
         aria-expanded={isOpen}
       >
         {buttonLabel}
-        {isOpen ? <CaretUp size={16} /> : <CaretDown size={16} />}
+        {isOpen ? <CaretUpIcon size={16} /> : <CaretDownIcon size={16} />}
       </button>
 
       {isOpen && (
-        <div className="origin-top-right mt-1 absolute right-0 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
+        <div className="origin-top-right mt-1 absolute right-0 w-56 rounded-md shadow-lg bg-white border border-gray-10">
           <div className="py-1">
             {sections.map((section) => (
               <DropdownSection

src/entrypoints/components/dropdown/components/DropdownItem.tsx

@@ -1,4 +1,4 @@
-import { Globe, Lock, Check } from '@phosphor-icons/react'
+import { LockIcon, GlobeIcon, CheckIcon } from '@phosphor-icons/react'
 import { SectionItemProps } from '../Dropdown'
 
 interface DropdownItemProps {
@@ -13,7 +13,7 @@ export const DropdownItem = ({
   onItemClicked,
   isLocked,
   isSelectedItem,
-}: DropdownItemProps): JSX.Element => {
+}: DropdownItemProps) => {
   return (
     <button
       key={item.value}
@@ -27,13 +27,13 @@ export const DropdownItem = ({
     >
       <div className="flex gap-2 items-center">
         {isLocked ? (
-          <Lock size={20} className="text-gray-50" />
+          <LockIcon size={20} className="text-gray-50" />
         ) : (
-          <Globe size={20} />
+          <GlobeIcon size={20} />
         )}
         <p>{item.label}</p>
       </div>
-      {isSelectedItem && <Check size={20} className="text-gray-100" />}
+      {isSelectedItem && <CheckIcon size={20} className="text-gray-100" />}
     </button>
   )
 }

src/entrypoints/content/index.ts

@@ -24,7 +24,7 @@ export default defineContentScript({
     const requestToken = () => {
       window.postMessage(
         { source: POST_MESSAGE_SOURCE, tokenStatus: MESSAGES.NOT_FOUND },
-        targetUrl
+        targetUrl,
       )
     }
 
@@ -46,7 +46,6 @@ export default defineContentScript({
           receivedToken = true
           clearTimeout(retryTimer)
 
-          console.log('Token received:', event.data)
           const eventMessage = event.data.payload.message
 
           if (eventMessage === MESSAGES.USER_TOKEN) {
@@ -61,9 +60,9 @@ export default defineContentScript({
               },
               () => {
                 console.log(
-                  'The user has been authenticated in the VPN extension'
+                  'The user has been authenticated in the VPN extension',
                 )
-              }
+              },
             )
           } else if (eventMessage === MESSAGES.USER_LOG_OUT) {
             chrome.storage.local.clear(async () => {
@@ -73,7 +72,7 @@ export default defineContentScript({
           }
         }
       },
-      { signal: abortController.signal }
+      { signal: abortController.signal },
     )
   },
 })

src/entrypoints/popup/App.tsx

@@ -56,7 +56,7 @@ export const App = () => {
         'userData',
         'userToken',
         'connection',
-      ])) as StorageData
+      ])) satisfies StorageData
 
       setUserData(storageData.userData ?? defaultUserDataInfo)
       setStatus(storageData.vpnStatus ?? 'OFF')
@@ -204,7 +204,7 @@ export const App = () => {
       },
     ].map((section) => {
       const allItemsUnavailable = section.items.every(
-        (item) => !availableLocations.includes(item.value)
+        (item) => !availableLocations.includes(item.value),
       )
 
       return {

src/entrypoints/popup/proxy.service.ts

@@ -52,7 +52,7 @@ export async function clearProxySettings() {
       if (browser.runtime.lastError) {
         console.error(
           'ERROR ADDING THE DEFAULT PROXY CONFIG: ',
-          browser.runtime.lastError
+          browser.runtime.lastError,
         )
       }
       clearProxyCache()