Merge pull request #1477 from loomnetwork/develop

WalletConnect v2 and Coinbase Wallet support.

.github/workflows/main.yaml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@master
         with:
-          node-version: "11.x"
+          node-version: "16.x"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -37,3 +37,7 @@ jobs:
             ${{ runner.os }}-${{ matrix.node-version }}-nodemodules-
       - run: yarn install
       - run: yarn test
+        env:
+          INFURA_PROJECT_ID: "12345"
+          EXT_VALIDATORS_URL: ""
+          WALLETCONNECT_PROJECT_ID: "12345"

README.md

@@ -1,6 +1,7 @@
 # Plasmachain Staking and Validator Dashboard
 
 Set the following environment variables before running anything:
+- `WALLETCONNECT_PROJECT_ID` - should be set to the project ID generated by WalletConnect Developer Cloud.
 - `INFURA_PROJECT_ID` - should be set to the project ID generated by Infura.
 - `NODE_ENV` - should be set to `PRODUCTION` for production deploys.
 - `EXT_VALIDATORS_URL` - should be set to the API endpoint that provides additional information about

babel.config.js

@@ -1,15 +1,9 @@
-// module.exports = {
-//   presets: ['@vue/app']
-// }
 module.exports = {
-  presets: ["@vue/app", "@babel/preset-env"],
+  presets: ["@vue/cli-plugin-babel/preset", "@babel/preset-env"],
   env: {
     test: {
       plugins: [
-        "@babel/plugin-transform-runtime",
-        "@babel/proposal-class-properties",
-        "@babel/proposal-object-rest-spread",
-        "istanbul"
+        "@babel/plugin-transform-runtime"
       ]
     }
   }

package.json

@@ -5,20 +5,23 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "test": "NODE_ENV=test ./node_modules/.bin/nyc vue-cli-service test:unit  src/**/*.spec.ts",
-    "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit src/**/*.spec.ts",
-    "tokens": "ts-node --compiler-options '{\"noImplicitAny\": false, \"module\": \"commonjs\" }'  --project tsconfig.json ./scripts/gen-tokens-info.ts"
+    "lint": "vue-cli-service lint",
+    "test": "NODE_ENV=test vue-cli-service test:unit src/**/*.spec.ts",
+    "tokens": "ts-node --compiler-options '{\"noImplicitAny\": false, \"module\": \"commonjs\" }'  --project tsconfig.json ./scripts/gen-tokens-info.ts",
+    "gen-contract-types": "yarn typechain \"src/contracts/ERC20.json\" --target=web3-v1 --out-dir src/store/plasma/web3-contracts"
   },
   "dependencies": {
+    "@coinbase/wallet-sdk": "^3.7.1",
     "@fortawesome/fontawesome": "^1.1.3",
     "@fortawesome/fontawesome-free-brands": "5.0.6",
     "@fortawesome/fontawesome-free-regular": "^5.0.6",
     "@fortawesome/fontawesome-free-solid": "^5.0.6",
     "@fortawesome/vue-fontawesome": "^0.0.22",
     "@sentry/browser": "^5.5.0",
     "@sentry/integrations": "^5.5.0",
-    "@walletconnect/web3-provider": "^1.4.1",
+    "@walletconnect/ethereum-provider": "^2.8.1",
+    "@walletconnect/modal": "^2.4.7",
     "animate.css": "^3.7.0",
     "axios": "^0.19.0",
     "bech32": "^1.1.3",
@@ -28,14 +31,21 @@
     "bn.js": "^4.11.8",
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0-rc.22",
+    "buffer": "^6.0.3",
     "chart.js": "^2.7.2",
+    "core-js": "^3.8.3",
     "date-fns": "^1.29.0",
+    "ethers": "^5.7.0",
     "google-protobuf": "^3.6.0",
+    "https-browserify": "^1.0.0",
     "js-sha256": "^0.9.0",
-    "loom-js": "1.79.0",
+    "loom-js": "1.91.0",
     "marked": "^0.8.0",
     "rxjs": "^6.5.2",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
     "tslib": "^1.10.0",
+    "underscore": "^1.13.6",
     "v-autocomplete": "^1.8.2",
     "vue": "^2.5.16",
     "vue-chartjs": "^3.3.2",
@@ -53,14 +63,13 @@
     "vuex-class": "^0.3.1",
     "vuex-router-sync": "^5.0.0",
     "vuex-typex": "^3.1.5",
-    "walletlink": "^2.1.0",
-    "web3": "1.2.1",
-    "web3-eth-contract": "1.0.0-beta.36",
-    "web3-providers": "^1.0.0-beta.38"
+    "web3": "1.8.2",
+    "web3-eth-contract": "1.8.2"
   },
   "devDependencies": {
     "@prerenderer/renderer-jsdom": "^0.2.0",
     "@sentry/webpack-plugin": "^1.7.0",
+    "@typechain/web3-v1": "^6.0.3",
     "@types/bip39": "^2.4.2",
     "@types/bn.js": "^4.11.5",
     "@types/chai": "^4.1.7",
@@ -69,10 +78,10 @@
     "@types/mocha": "^5.2.7",
     "@types/retry": "^0.10.2",
     "@types/sinon": "^7.0.13",
-    "@vue/cli-plugin-babel": "^3.7.0",
-    "@vue/cli-plugin-typescript": "^3.7.0",
-    "@vue/cli-plugin-unit-mocha": "^3.8.0",
-    "@vue/cli-service": "^3.8.3",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-typescript": "~5.0.8",
+    "@vue/cli-plugin-unit-mocha": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-airbnb": "^4.0.0",
     "@vue/eslint-config-typescript": "^4.0.0",
     "@vue/test-utils": "1.0.0-beta.29",
@@ -86,32 +95,26 @@
     "eslint-plugin-html": "^5.0.3",
     "eslint-plugin-prettier": "^3.1.0",
     "husky": "^3.0.0",
-    "inspectpack": "^4.2.1",
-    "istanbul-instrumenter-loader": "^3.0.1",
     "jsdom": "^15.1.1",
     "jsdom-global": "^3.0.2",
     "lolex": "^4.1.0",
     "mocha": "^6.1.4",
-    "nyc": "^14.1.1",
     "prerender-spa-plugin": "^3.3.0",
     "prettier": "^1.18.2",
-    "protoc": "^1.0.3",
     "sass": "^1.35.2",
     "sass-loader": "^8.0.0",
     "sentry-testkit": "^2.2.1",
     "sinon": "^7.3.2",
-    "ts-node": "^8.2.0",
-    "ts-protoc-gen": "^0.7.3",
+    "ts-node": "^10.9.1",
     "tslint-config-prettier": "^1.18.0",
-    "typechain": "^0.3.14",
-    "typescript": "^3.4.3",
-    "wait-for-expect": "^1.1.0",
-    "webpack-bundle-analyzer": "^3.3.2",
-    "window-mock": "^0.0.13"
+    "typechain": "^8.2.0",
+    "typescript": "~4.5.5",
+    "wait-for-expect": "^1.1.0"
+  },
+  "engines": {
+    "node": ">= 16.0.0"
   },
   "husky": {
-    "hooks": {
-      "pre-push": "yarn test"
-    }
+    "hooks": {}
   }
-}
+}

src/App.vue

@@ -80,10 +80,6 @@ main.container {
   box-shadow: rgba(219, 219, 219, 0.56) 0px 3px 8px 0px;
 }
 
-#walletconnect-qrcode-modal {
-  z-index: 9999 !important;
-}
-
 .faq img {
   border: 1px solid;
   box-shadow: 0 0 5px #ccc;

src/components/HistoryEvent.vue

@@ -25,7 +25,9 @@ export default class HistoryEvent extends Vue {
   @Prop({ required: true })
   event: any
 
-  etherScanUrl = `${this.state.ethereum.blockExplorer}/tx/${this.event.transactionHash}`
+  get etherScanUrl(): string {
+    return `${this.state.ethereum.blockExplorer}/tx/${this.event.transactionHash}`
+  }
 
   get state(): DashboardState {
     return this.$store.state

src/components/InputAddress.vue

@@ -14,8 +14,6 @@
 
 <script lang="ts">
 import { Watch, Vue, Prop, Component } from "vue-property-decorator"
-import { DashboardState } from "@/types"
-import { PlasmaState } from "../store/plasma/types"
 
 @Component
 export default class InputAddress extends Vue {

src/components/Layout.vue

@@ -106,7 +106,6 @@
 
 <script lang="ts">
 import { Vue, Component, Watch } from "vue-property-decorator"
-import Web3 from "web3"
 
 import FaucetHeader from "@/components/FaucetHeader.vue"
 import FaucetSidebar from "@/components/FaucetSidebar.vue"
@@ -187,6 +186,7 @@ export default class Layout extends Vue {
   }
 
   restart() {
+    // @ts-ignore-next-line
     window.location.reload(true)
   }
 }

src/components/WalletsTooltipsEthereum.vue

@@ -38,10 +38,11 @@
     <b-popover
       class="popover"
       target="eth-walletlink-button"
-      title="WalletLink Protocol"
+      title="Coinbase Wallet"
       triggers="hover"
     >
-      For the time being WalletLink only supports Coinbase Wallet mobile app.
+      <a href="https://www.coinbase.com/wallet" target="_blank">Coinbase Wallet</a>
+      is available on <strong>iOS</strong>, <strong>Android</strong>, and as a desktop Chrome extension.
     </b-popover>
   </div>
 </template>

src/components/blockExplorer/transaction-reader.ts

@@ -28,20 +28,9 @@ export interface IDecodedTx {
 
 export function extractTxDataFromStr(base64Str: string): IOneSigTx {
   const pbBuf = CryptoUtils.bufferToProtobufBytes(CryptoUtils.B64ToUint8Array(base64Str))
-  let lastError = Error || null
-  try {
-    const sig = readTxSignature(pbBuf)
-    const payload = readTxPayload(pbBuf)
-    return { tx: payload, signed: sig }
-  } catch (e) {
-    if (e instanceof Error) {
-      throw lastError
-    } else {
-      lastError = e
-    }
-  }
-  throw  lastError
-
+  const sig = readTxSignature(pbBuf)
+  const payload = readTxPayload(pbBuf)
+  return { tx: payload, signed: sig }
 }
 
 function readTxPayload(i: Uint8Array): IDecodedTx {

src/components/game-asset/Cards.vue

@@ -47,7 +47,6 @@
 <script lang="ts">
 import Vue from "vue"
 import { Component, Watch } from "vue-property-decorator"
-import { plasmaModule } from "@/store/plasma"
 import { CardDetail } from "@/store/plasma/types"
 import { DashboardState } from "@/types"
 import TransferAllCardsModal from "@/components/modals/TransferAllCardsModal.vue"

src/components/game-asset/Packs.vue

@@ -26,7 +26,6 @@
 <script lang="ts">
 import Vue from "vue"
 import { Component, Watch } from "vue-property-decorator"
-import { plasmaModule } from "@/store/plasma"
 import { assetsModule } from "@/store/plasma/assets"
 import { PACKS_NAME } from "@/store/plasma/assets/reactions"
 import TransferPacksModal from "@/components/modals/TransferPacksModal.vue"

src/components/gateway/WithdrawConfirmed.vue

@@ -32,7 +32,6 @@ import BN from "bn.js"
 import { Component, Watch } from "vue-property-decorator"
 import { DashboardState } from "../../types"
 import { gatewayModule } from "@/store/gateway"
-import { feedbackModule } from "../../feedback/store"
 import { IWithdrawalReceipt } from "loom-js/dist/contracts/transfer-gateway"
 import { TransferGatewayTxStatus } from "loom-js/dist/proto/transfer_gateway_pb"
 import { tokenService } from "../../services/TokenService"

src/config/dev.ts

@@ -58,7 +58,6 @@ export default {
   coinDataUrl: "/tokens/dev.tokens.json",
   gateway: {
     chains: ["ethereum"],
-    checkMarketplaceURL: "",
     binance: {
       gatewayAccount: "tbnb14sa7gnlalxd0e336clc0ltgke6e6hdanyl6pqq",
       fee: 37500,

src/config/ext-dev.ts

@@ -58,7 +58,6 @@ export default {
   coinDataUrl: "/tokens/ext-dev.tokens.json",
   gateway: {
     chains: ["ethereum", "binance"],
-    checkMarketplaceURL: "",
     tokenContractLogsURL: "",
     binance: {
       gatewayAccount: "tbnb1gc7azhlup5a34t8us84x6d0fluw57deuf47q9w",

src/config/local.ts

@@ -35,7 +35,6 @@ export default {
   },
   gateway: {
     chains: ["ethereum"],
-    checkMarketplaceURL: "",
     tokenContractLogsURL: "https://dev-api.loom.games/plasma/tokencontract/eth:{address}",
     binance: {
       gatewayAccount: "tbnb14sa7gnlalxd0e336clc0ltgke6e6hdanyl6pqq",

src/config/production.ts

@@ -58,7 +58,6 @@ export default {
   },
   gateway: {
     chains: ["ethereum"],
-    checkMarketplaceURL: "https://auth.loom.games/wallet/address?address={address}&wallet=eth",
     tokenContractLogsURL: "https://api.loom.games/plasma/tokencontract/eth:{address}",
     binance: {
       gatewayAccount: "bnb17mxq8p5jmw27dtt6s92fd35yltdml6snw3r98t",