chore: add webpack to project

.env

@@ -1,4 +1,8 @@
 # shared basic environment variable
 # the build tool will load this file with any NODE_ENV
 SNOWPACK_PUBLIC_FLUENT_VERSION=2.6.3
-
+NODE_ENV=production
+CI=
+SNOWPACK_PUBLIC_SENTRY_DSN=
+SNOWPACK_PUBLIC_FLUENT_ENV="production"
+SNOWPACK_PUBLIC_FLUENT_VERSION=

.env.development.local.example

@@ -3,4 +3,9 @@
 # the build tool will load this file when NODE_ENV is development
 # NOTE: don't commit .env.development.local into git
 # NOTE: this file will override .env.development
-SNOWPACK_PUBLIC_IS_LOCAL_ENV=true
+SNOWPACK_PUBLIC_IS_LOCAL_ENV=true
+NODE_ENV=development
+CI=false
+SNOWPACK_PUBLIC_SENTRY_DSN=
+SNOWPACK_PUBLIC_FLUENT_ENV="debug-release"
+SNOWPACK_PUBLIC_FLUENT_VERSION="0.0.0"

.yarn/versions/ed98fc34.yml

@@ -0,0 +1,5 @@
+declined:
+  - helios
+  - helios-background
+  - "@fluent-wallet/content-script"
+  - helios-popup

package.json

@@ -1,6 +1,7 @@
 {
   "name": "helios",
   "private": true,
+  "version": "2.6.2",
   "workspaces": [
     "websites/*",
     "packages/doc-ui/*",
@@ -56,7 +57,14 @@
     "test:unit": "cross-env NODE_OPTIONS=--experimental-vm-modules NODE_ENV=test jest --no-cache --testPathIgnorePatterns '.*\\.integration\\.test\\.jsx?'",
     "test:integration": "cross-env NODE_OPTIONS=--experimental-vm-modules NODE_ENV=test node ./scripts/integration-test.js --no-cache  --config='./integration.jest.config.js'",
     "contract:compile": "bash ./scripts/solc.sh",
-    "contract:watch": "watchexec --restart --on-busy-update queue -w ./contracts/ --debounce 500 yarn run contract:compile"
+    "contract:watch": "watchexec --restart --on-busy-update queue -w ./contracts/ --debounce 500 yarn run contract:compile",
+    "dev:chrome": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --config ./scripts/webpack.config.dev.mjs",
+    "dev:firefox": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=firefox webpack --config ./scripts/webpack.config.dev.mjs",
+    "dev:edge": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=edge webpack --config ./scripts/webpack.config.dev.mjs",
+    "build:chrome": "cross-env NODE_ENV=production cross-env TARGET_BROWSER=chrome webpack --config ./scripts/webpack.config.prod.mjs",
+    "build:firefox": "cross-env NODE_ENV=production cross-env TARGET_BROWSER=firefox webpack --config ./scripts/webpack.config.prod.mjs",
+    "build:edge": "cross-env NODE_ENV=production cross-env TARGET_BROWSER=edge webpack --config ./scripts/webpack.config.prod.mjs",
+    "build": "yarn build:chrome && yarn build:firefox && yarn build:edge"
   },
   "devDependencies": {
     "@babel/core": "7.17.9",
@@ -81,17 +89,23 @@
     "@types/finalhandler": "^1",
     "@types/js-string-escape": "^1",
     "@types/serve-static": "^1",
+    "@types/webpack-bundle-analyzer": "^4",
     "@yarnpkg/esbuild-plugin-pnp": "3.0.0-rc.2",
     "@yqrashawn/snowpack": "3.8.6-fix-6",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "10.4.20",
     "babel-loader": "8.2.4",
     "browserslist": "^4.20.4",
+    "buffer": "6.0.3",
     "concurrently": "^7.2.1",
+    "copy-webpack-plugin": "12.0.2",
     "cross-env": "^7.0.3",
+    "css-loader": "7.1.2",
     "cssnano": "5.1.11",
     "dot-env": "^0.0.1",
     "dotenv-expand": "^8.0.3",
+    "dotenv-webpack": "8.1.0",
     "esbuild": "0.14.43",
+    "esbuild-loader": "4.2.2",
     "esbuild-plugin-alias": "0.2.1",
     "esbuild-plugin-browserslist": "0.4.10",
     "esbuild-style-plugin": "1.6.0",
@@ -107,16 +121,19 @@
     "finalhandler": "1.2.0",
     "fs-extra": "^10.1.0",
     "highlight.js": "9.18.5",
+    "html-webpack-plugin": "5.6.0",
     "husky": "^8.0.1",
     "identity-obj-proxy": "3.0.0",
     "jest": "^27.5.1",
     "jest-webextension-mock": "^3.7.22",
     "js-string-escape": "1.0.1",
     "lint-staged": "^13.0.1",
+    "mini-css-extract-plugin": "2.9.0",
     "mustache": "^4.2.0",
     "nock": "13.2.6",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.14",
+    "postcss-loader": "8.1.1",
     "prettier": "^2.6.2",
     "prettier-plugin-solidity": "1.0.0-beta.18",
     "ramda": "^0.28.0",
@@ -127,12 +144,20 @@
     "rimraf": "^3.0.2",
     "serve-static": "1.15.0",
     "shadow-cljs": "^2.19.4",
+    "stream-browserify": "3.0.0",
+    "style-loader": "4.0.0",
     "stylelint": "^14.9.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^26.0.0",
     "tailwindcss": "^3.1.1",
     "wait-for-expect": "3.0.2",
     "web-ext": "7.0.0",
+    "webpack": "5.93.0",
+    "webpack-bundle-analyzer": "4.10.2",
+    "webpack-cli": "5.1.4",
+    "webpack-merge": "6.0.1",
+    "wext-manifest-loader": "2.4.2",
+    "wext-manifest-webpack-plugin": "1.4.1",
     "zip-a-folder": "1.1.3"
   },
   "nohoist": [
@@ -203,5 +228,8 @@
       "no-descending-specificity": null
     }
   },
-  "packageManager": "yarn@3.2.0"
+  "packageManager": "yarn@3.2.0",
+  "dependencies": {
+    "@svgr/webpack": "8.1.0"
+  }
 }

packages/background/src/index.js

@@ -1,6 +1,4 @@
 // # imports
-import 'regenerator-runtime/runtime'
-
 import {IS_PROD_MODE, IS_TEST_MODE} from '@fluent-wallet/inner-utils'
 import {EXT_STORAGE} from '@fluent-wallet/consts'
 

packages/content-script/indexTemplate.js

@@ -0,0 +1,131 @@
+import browser from 'webextension-polyfill'
+import {stream} from '@thi.ng/rstream'
+import {getSiteMetadata} from '@fluent-wallet/site-metadata'
+
+let INPAGE_INJECTED = false
+
+function _retry() {
+  let retryTimeout = 100
+  if (CONNECT_RETRY_COUNT >= 10) {
+    retryTimeout = 1000
+  } else if (CONNECT_RETRY_COUNT >= 60) {
+    retryTimeout = 30000
+  } else if (CONNECT_RETRY_COUNT >= 120) {
+    console.error(
+      `[Fluent] Failed to connect background with 120 retry. Give up`,
+    )
+    return
+  }
+
+  console.warn(
+    `[Fluent] Failed to connect background, retry: ${++CONNECT_RETRY_COUNT}`,
+  )
+  setTimeout(setup, retryTimeout)
+}
+
+function injectInpage(content) {
+  try {
+    const container = document.head || document.documentElement
+    const scriptTag = document.createElement('script')
+    scriptTag.setAttribute('async', 'false')
+    if (content) scriptTag.textContent = content
+    else scriptTag.src = browser.runtime.getURL('inpage.js')
+    container.insertBefore(scriptTag, container.children[0])
+    container.removeChild(scriptTag)
+    INPAGE_INJECTED = true
+    registerSite()
+  } catch (error) {
+    console.error('Fluent Wallet: Provider injection failed.', error)
+  }
+}
+
+let CONNECT_RETRY_COUNT = 0
+let s
+
+// need to call this after inpage.js is injected
+// so that the dapp page can get the connected event
+function registerSite() {
+  if (!s) return
+  getSiteMetadata()
+    .then(metadata => {
+      if (!metadata.icon) delete metadata.icon
+      s.next.call(s, {
+        method: 'wallet_registerSiteMetadata',
+        params: metadata,
+        _origin: location.host,
+      })
+    })
+    .catch(() => null)
+}
+
+function setup() {
+  s = stream({
+    id: 'content-script',
+    closeIn: false,
+    closeOut: false,
+    cache: false,
+  })
+
+  let port
+  try {
+    port = browser.runtime.connect({name: 'content-script'})
+  } catch (err) {
+    // reload dapp page when ext bg is reloaded
+    // this only happends in development env
+    if (err.message.match(/extension.*context.*invalid/i))
+      setTimeout(() => window.location.reload(), 500)
+    else _retry()
+  }
+  if (!port) return
+  const sub = {next: port.postMessage.bind(port)}
+
+  s.subscribe(sub)
+
+  const listenToInpageMessage = e => {
+    if (e.origin !== location.origin) return
+    if (e.source !== window) return
+    if (
+      !e.data ||
+      !e.data.__fromFluentInpage ||
+      !e.data.msg ||
+      typeof e.data.msg !== 'object'
+    )
+      return
+    if (!e.data.msg.method) return
+    if (e.data.msg.jsonrpc !== '2.0') return
+    if (!Number.isInteger(e.data.msg.id)) return
+    if (e.data.msg.method === 'wallet_registerSiteMetadata') return
+    CONNECT_RETRY_COUNT = 0
+    s.next.call(s, {...e.data.msg, _origin: location.host})
+  }
+
+  window.addEventListener('message', listenToInpageMessage, false)
+
+  port.onDisconnect.addListener(() => {
+    window.postMessage({
+      msg: {
+        event: 'disconnect',
+        params: {
+          code: 4900,
+          message:
+            "Can't connect to extension runtime, disconnected from all chain. Please refresh the page or tell user to refresh the page.",
+        },
+      },
+    })
+    window.removeEventListener('message', listenToInpageMessage)
+    s.unsubscribe(sub)
+    s = null
+    _retry()
+  })
+
+  port.onMessage.addListener(e => {
+    window.postMessage(
+      {msg: e, __fromFluentContentScript: true},
+      location.origin,
+    )
+  })
+
+  if (INPAGE_INJECTED) registerSite()
+}
+injectInpage()
+setup()

packages/manifest/manifestv2.json

@@ -0,0 +1,94 @@
+{
+  "name": "__MSG_extensionNAME__",
+  "short_name": "__MSG_extensionNAME__",
+  "version": "",
+  "version_name": "",
+  "manifest_version": 2,
+  "author": "Conflux Network",
+  "homepage_url": "https://github.com/Conflux-Chain/helios#readme",
+  "description": "__MSG_extensionDescription__",
+  "commands": {
+    "_execute_browser_action": {
+      "suggested_key": {
+        "windows": "Alt+Shift+F",
+        "mac": "Alt+Shift+F",
+        "chromeos": "Alt+Shift+F",
+        "linux": "Alt+Shift+F"
+      },
+      "description": "Open the extension popup"
+    },
+    "inner_debug_only": {
+      "suggested_key": {
+        "default": "Alt+Shift+3",
+        "mac": "Ctrl+MacCtrl+3"
+      },
+      "description": "Can only debug internally"
+    }
+  },
+  "icons": {
+    "16": "images/icon-16.png",
+    "19": "images/icon-19.png",
+    "32": "images/icon-32.png",
+    "38": "images/icon-38.png",
+    "64": "images/icon-64.png",
+    "128": "images/icon-128.png",
+    "512": "images/icon-512.png"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "fluent-wallet@confluxnetwork.org",
+      "strict_min_version": "69.0"
+    },
+    "safari": {
+      "strict_min_version": "14"
+    }
+  },
+  "default_locale": "en",
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": true
+  },
+  "browser_action": {
+    "default_icon": {
+      "16": "images/icon-16.png",
+      "19": "images/icon-19.png",
+      "32": "images/icon-32.png",
+      "38": "images/icon-38.png",
+      "64": "images/icon-64.png",
+      "128": "images/icon-128.png",
+      "512": "images/icon-512.png"
+    },
+    "default_title": "Fluent",
+    "default_popup": "popup.html"
+  },
+  "content_scripts": [
+    {
+      "matches": ["file://*/*", "http://*/*", "https://*/*"],
+      "js": ["content-script.js"],
+      "run_at": "document_start",
+      "all_frames": true
+    }
+  ],
+  "content_security_policy": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
+  "permissions": [
+    "storage",
+    "unlimitedStorage",
+    "clipboardWrite",
+    "http://localhost:12537/",
+    "tabs",
+    "https://confluxscan.net/*",
+    "https://*.confluxscan.net/*",
+    "activeTab",
+    "notifications"
+  ],
+  "web_accessible_resources": ["content-script.js", "inpage.js"],
+  "externally_connectable": {
+    "matches": [
+      "https://confluxscan.net/*",
+      "https://*.confluxscan.net/*",
+      "https://confluxnetwork.org/*",
+      "https://wallet-main.confluxrpc.org/*",
+      "https://wallet-test.confluxrpc.org/*"
+    ]
+  }
+}

packages/popup/public/template.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" class="notranslate" translate="no">
+  <head>
+    <meta charset="utf-8" />
+    <title>Fluent</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="Index, Follow" />
+    <meta name="description" content="" />
+    <meta name="keywords" content="" />
+    <meta name="popup-type" content="popup" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>