Quasar v2 / Vue 3 (#425)

* buid: update deps (https://quasar.dev/start/upgrade-guide\#option-1-convert-a-project)

* build: polyfill all node.js modules

* build: update App.vue

* build: update router config

* build: update i18n (does not update usage of it, which is still broken)

* build: remove @vue/composition-api package

* wip (revert this)

* refactor: a bunch of fixes

* build: update some deps

* build/style: fix some errors and run prettier

* wip

* more fixes

* more fixes

* no more vue extend

* style: prettier

* more fixes

* fix: this line is only needed for webpack v4, not v5

* hacking the hint

* fix: i18n updates

* fix: errors in i18n boot file

* build: update deps to fix joi issue, thirdweb-dev/web3-onboard#1287

* build: dep updates

* fix: stop files from erroring

* fix: useRouter must be called in setUp

* restore original template components with manual typing fixes

* more fixes

* fixes on where lifecycle hooks can be used

* temporarily rename i18n files (so rename casing)

* rename them back

* perf: don't block on avatars

* style: prettier

* fix lint errors

* lockfile upadte

* downgrade node types

* fix: pin ethers.js to 5.6.9, since 5.7.0 doesn't work with typechain: ethers-io/ethers.js#3322

* more fixes

* component reactivity fixes

* test: need hardhat explicitly installed locally to run umbra-js tests

* update lockfile

* fix: stronger pkx check

* turn off autocomplete for input fields

* fix: button click handlers were run twice, now only runs once

* fix: network selector now works

* fix: language selector default value

* i18n param query fix (#427)

* Add param query fix for i18n

* style: add line break

Co-authored-by: Matt Solomon <[email protected]>

* chore: fix lint errors

* test: fix missing mnemonic in CI

* chore: fix typings for component refs

* Upgrade i18n syntax (#428)

* Upgrade i18n syntax

* Fix typo

* fix: FAQ link copying and auto-scrolling to element via URL

* fix: receive table now works, cleanup typos/comments

* Quasar v2 Fix Sends and Setup (#433)

* Don't let Vue refs turn ethers objects into proxies

* Prevent setup from erroring

Error was:
  "proxy must report the same value for the non-writable, non-configurable property '"interface"'

* Shamelessly copy dgrants note to improve our markRaw comment

* fix: properly load avatar

* chore: remove worker-loader package for quasar-v2 (#435)

* chore: web worker updates for webpack v5

* chore: remove unneeded file

* fix: correctly handle event types

* fix: modelValue fixes

* chore: remove console.logs from debugging

* build: bump version

* fix: vue router active class

* chore: i18n warning cleanup

* chore: typing fixes

* chore: more i18n warning cleanup

* chore: some umbra-js cleanup

* chore: some frontend cleanup

* chore: more frontend fixes

* fix: itemEvents was dropped in favor of itemProps

* fix: receive table pagination

* chore: rename L2 tokens to just be ETH, since that's what their official bridges do

* fix: improve payment link parsing

* fix: i18n key

* feat: show version in footer to facilitate debugging during phased rollout

* fix: send form validation UX

* feat: add hardcoded donation banner

* Localize alert banner (#440)

* Localize banner

* fix: i18n updates when incorporating changes from master

* Update copyright year to trigger a branch deploy

---------

Co-authored-by: wildmolasses <[email protected]>
Co-authored-by: Gary Ghayrat <[email protected]>
Co-authored-by: David Laprade <[email protected]>
Co-authored-by: Ben DiFrancesco <[email protected]>

Author: 5 people

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:@typescript-eslint/recommended-requiring-type-checking',
-        'plugin:vue/essential',
+        'plugin:vue/vue3-essential',
         'prettier',
         'prettier/@typescript-eslint',
         'prettier/vue',

README.md

@@ -137,4 +137,4 @@ Contributions to Umbra are welcome! Fork the project, create a new branch from m
 
 Umbra is available under the [MIT](LICENSE.txt) license.
 
-Copyright (c) 2022 ScopeLift
+Copyright (c) 2023 ScopeLift

contracts-core/.prettierignore

@@ -10,3 +10,4 @@ typechain/
 
 # files
 coverage.json
+*.sol

contracts-core/.solhint.json

@@ -9,7 +9,7 @@
     "func-visibility": ["error", { "ignoreConstructors": true }],
     "not-rely-on-time": "off",
     "prettier/prettier": [
-      "error",
+      "warn",
       {
         "endOfLine": "auto"
       }

contracts-core/hardhat.config.ts

@@ -36,7 +36,8 @@ const chainIds = {
 // optional so that typechain can still build its types without hard failing on this.
 let mnemonic = '';
 if (!process.env.MNEMONIC) {
-  console.warn('Please set your MNEMONIC in a .env file');
+  console.warn('MNEMONIC not found in .env file, using default mnemonic');
+  mnemonic = 'test test test test test test test test test test test junk';
 } else {
   mnemonic = process.env.MNEMONIC;
 }

contracts-core/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.2",
   "description": "Contracts for the Umbra Protocol",
   "dependencies": {
-    "@openzeppelin/contracts": "^3.4.1"
+    "@openzeppelin/contracts": "3.4.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^9.1.2",
@@ -17,7 +17,7 @@
     "@nomiclabs/hardhat-web3": "^2.0.0",
     "@openzeppelin/test-helpers": "^0.5.10",
     "@truffle/debug-utils": "^4.1.1",
-    "@typechain/ethers-v5": "^2.0.0",
+    "@typechain/ethers-v5": "^10.2.0",
     "@types/chai": "^4.2.13",
     "@types/fs-extra": "^9.0.1",
     "@types/mocha": "^7.0.2",
@@ -30,7 +30,7 @@
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.12.0",
     "ethereum-waffle": "^3.2.0",
-    "ethers": "^5.6.8",
+    "ethers": "5.6.9",
     "fs-extra": "^9.0.1",
     "hardhat": "^2.6.8",
     "hardhat-gas-reporter": "^1.0.4",
@@ -46,7 +46,7 @@
     "solidity-coverage": "^0.7.12",
     "ts-generator": "^0.1.1",
     "ts-node": "^8.10.2",
-    "typechain": "^3.0.0",
+    "typechain": "^8.1.1",
     "typescript": "^3.9.7"
   },
   "files": [
@@ -67,7 +67,7 @@
     "clean": "hardhat clean",
     "build": "hardhat compile",
     "lint": "yarn run lint:sol && yarn run lint:ts && yarn run prettier:list-different",
-    "lint:sol": "solhint --config ./.solhint.json --max-warnings 9 \"contracts/**/*.sol\"",
+    "lint:sol": "solhint --config ./.solhint.json --max-warnings 30 \"contracts/**/*.sol\"",
     "lint:ts": "eslint --ext .js,.ts .",
     "prettier": "prettier --write \"**/*.{js,json,md,sol,ts}\"",
     "prettier:list-different": "prettier --list-different \"**/*.{js,json,md,sol,ts}\"",

contracts-core/test/umbra-test.js

@@ -42,18 +42,8 @@ describe('Umbra', () => {
   const mintTokenAmount = sumTokenAmounts([totalTokenAmount, tokenAmount, metaTokenTotal]);
 
   before(async () => {
-    [
-      owner,
-      tollCollector,
-      tollReceiver,
-      payer1,
-      receiver1,
-      payer2,
-      receiver2,
-      acceptor,
-      other,
-      relayer,
-    ] = await web3.eth.getAccounts();
+    [owner, tollCollector, tollReceiver, payer1, receiver1, payer2, receiver2, acceptor, other, relayer] =
+      await web3.eth.getAccounts();
     ctx.chainId = await web3.eth.getChainId();
     ctx.umbra = await Umbra.new(deployedToll, tollCollector, tollReceiver, { from: owner });
     ctx.token = await TestToken.new('TestToken', 'TT');

frontend/.eslintrc.js

@@ -16,5 +16,8 @@ module.exports = {
   rules: {
     '@typescript-eslint/ban-ts-comment': 1,
     '@typescript-eslint/no-non-null-assertion': 0,
+    // vue/no-v-model-argument is disabled to support QTable's use of v-model:pagination.
+    // See https://quasar.dev/start/upgrade-guide#qtable
+    'vue/no-v-model-argument': 'off',
   },
 };

frontend/README.md

@@ -56,8 +56,8 @@ For more details on the internationalization approach and usage see [Quasar I18n
 
 - Inside templates: `{{ $t('key-name') }}`
 - Inside attributes: `:label="$t('key-name')"`
-- Inside scripts, import `getCurrentInstance()` from `@vue/composition-api` and create an instance inside a function using `const vm = getCurrentInstance()!;` then use `vm.$i18n.tc('AccountReceiveTable.date-received')`
-- Inside `.ts` files, `import { i18n } from "../boot/i18n";` and use `i18n.tc('key-name')`.
+- Inside scripts, import `getCurrentInstance()` from `'vue'` and create an instance inside a function using `const vm = getCurrentInstance()!;` then use `vm.$i18n.tc('AccountReceiveTable.date-received')`
+- Inside `.ts` files, `import { tc } from "../boot/i18n";` and use `tc('key-name')`.
 
 While embedding longer texts with styles and links inside template section of Vue components, there are a few options:
 
@@ -123,6 +123,6 @@ While embedding longer texts with styles and links inside template section of Vu
 If you want to add a new langauge e.g. French, you need to:
 
 1. Create a new json file in `/i18n/locales/` and name it according to the language code listed [here](https://www.roseindia.net/tutorials/I18N/locales-list.shtml) i.e., `fr.json`. You can also change your browser language in settings and `console.log(locale)` in the `src/boot/i18n.ts` file to see the language code.
-2. Copy the contents of `en-us.json` to your newly created `<language-code>.json` file and translate key values to the corresponding language of your choice.
+2. Copy the contents of `en-US.json` to your newly created `<language-code>.json` file and translate key values to the corresponding language of your choice.
 3. Import the `json` file into the `src/i18n/index.ts` file and export it to be used.
 4. Add the language name and language code to `supportedLanguages` in `src/store/settings.ts`.

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbra/frontend",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Send and receive stealth payments with the Umbra protocol",
   "productName": "Umbra",
   "author": "Matt Solomon <[email protected]>",
@@ -17,43 +17,49 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
-    "@ledgerhq/devices": "^7.0.0",
+    "@ledgerhq/devices": "^7.0.5",
     "@metamask/jazzicon": "^2.0.0",
-    "@quasar/extras": "^1.0.0",
+    "@quasar/extras": "^1.15.8",
     "@umbra/umbra-js": "^0.1.0",
     "@uniswap/token-lists": "^1.0.0-beta.19",
     "@unstoppabledomains/resolution": "8.3.1",
-    "@vue/composition-api": "^0.6.4",
-    "@web3-onboard/coinbase": "^2.1.3",
-    "@web3-onboard/core": "^2.9.0",
-    "@web3-onboard/injected-wallets": "^2.2.4",
-    "@web3-onboard/ledger": "^2.3.1",
-    "@web3-onboard/trezor": "^2.3.1",
-    "@web3-onboard/walletconnect": "^2.1.3",
+    "@web3-onboard/coinbase": "^2.2.0",
+    "@web3-onboard/core": "^2.11.1",
+    "@web3-onboard/injected-wallets": "^2.4.0",
+    "@web3-onboard/ledger": "^2.3.2",
+    "@web3-onboard/trezor": "^2.3.2",
+    "@web3-onboard/walletconnect": "^2.2.2",
     "bnc-notify": "^1.5.1",
     "core-js": "^3.6.5",
-    "ethers": "^5.6.8",
-    "quasar": "^1.0.0",
-    "vue-i18n": "8.27.1",
+    "ethers": "5.6.9",
+    "quasar": "2.10.2",
+    "vue": "3.2.45",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "4.1.6",
     "yaml-loader": "0.6.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.19.1",
     "@intlify/vue-i18n-loader": "^4.2.0",
-    "@quasar/app": "^2.0.0",
+    "@quasar/app-webpack": "3.6.2",
     "@quasar/quasar-app-extension-dotenv": "^1.0.5",
     "@types/jest": "^27.4.1",
-    "@types/node": "^12.17.15",
-    "@typescript-eslint/eslint-plugin": "^3.3.0",
-    "@typescript-eslint/parser": "^3.3.0",
-    "babel-eslint": "^10.0.1",
-    "eslint-loader": "^3.0.3",
-    "eslint-plugin-vue": "^6.1.2",
+    "@types/node": "^14.11.8",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-promise": "^6.1.0",
+    "eslint-plugin-quasar": "^1.0.0",
+    "eslint-plugin-vue": "^9.8.0",
+    "eslint-webpack-plugin": "^3.2.0",
     "jest": "^27.5.1",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "postinstall-postinstall": "^2.1.0",
     "quasar-app-extension-system-environment-variables": "^2.0.4",
     "ts-jest": "^27.1.3",
-    "vue-i18n-extract": "^2.0.6",
-    "worker-loader": "^3.0.8"
+    "vue-i18n-extract": "^2.0.7"
   },
   "browserslist": [
     "last 10 Chrome versions",