fix: Update npm modules, espcially Vue, Metamask and WalletConnect.

digitaldonkey · May 30, 2019 · a68bb1c · a68bb1c
1 parent 511b13b
commit a68bb1c
Show file tree

Hide file tree

Showing 13 changed files with 7,066 additions and 4,439 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -2,4 +2,5 @@ module.exports = {
   presets: [
     '@vue/app',
   ],
+  plugins: ['@babel/plugin-proposal-export-default-from']
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,38 +17,40 @@
     }
   },
   "dependencies": {
-    "@ledgerhq/hw-transport-u2f": "^4.31.0",
-    "@ledgerhq/web3-subprovider": "^4.31.0",
+    "@ledgerhq/hw-transport-u2f": "^4.60.3",
+    "@ledgerhq/web3-subprovider": "^4.60.3",
     "@vue/web-component-wrapper": "^1.2.0",
-    "custom-event-polyfill": "^1.0.6",
+    "@walletconnect/browser": "^1.0.0-beta.25",
+    "@walletconnect/web3-provider": "^1.0.0-beta.25",
+    "custom-event-polyfill": "^1.0.7",
     "qr-image": "^3.2.0",
-    "v-tooltip": "^2.0.0-rc.33",
-    "vue": "^2.5.17",
-    "vue-i18n": "^8.4.0",
+    "v-tooltip": "^2.0.2",
+    "vue": "^2.6.10",
+    "vue-i18n": "^8.11.2",
     "vue-web-component": "^1.2.0",
-    "vuex": "^3.0.1",
-    "vuex-persist": "^2.0.0",
-    "walletconnect-web3-provider": "^0.7.27",
-    "web3": "^1.0.0-beta.36",
-    "web3-provider-engine": "^14.1.0"
+    "vuex": "^3.1.1",
+    "vuex-persist": "^2.0.1",
+    "web3": "1.0.0-beta.37",
+    "web3-provider-engine": "^15"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-export-default-from": "^7.2.0",
     "@semantic-release/git": "github:semantic-release/git",
-    "@vue/cli-plugin-babel": "^3.2.0",
-    "@vue/cli-plugin-eslint": "^3.2.1",
-    "@vue/cli-service": "^3.2.0",
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
     "@vue/eslint-config-airbnb": "^4.0.0",
-    "commitizen": "^3.0.5",
-    "copy-webpack-plugin": "^4.6.0",
+    "commitizen": "^3.1.1",
+    "copy-webpack-plugin": "^5",
     "cz-conventional-changelog": "^2.1.0",
     "file-system": "^2.2.2",
     "html-loader": "^0.5.5",
-    "node-sass": "^4.10.0",
+    "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
-    "semantic-release": "^15.12.4",
+    "semantic-release": "^15.13.14",
     "svg-url-loader": "^2.3.2",
-    "travis-deploy-once": "^5.0.9",
-    "vue-template-compiler": "^2.5.17"
+    "travis-deploy-once": "^5.0.11",
+    "vue-template-compiler": "^2.6.10"
   },
   "repository": {
     "type": "git",

diff --git a/public/web3Ready-demo.inc.html b/public/web3Ready-demo.inc.html
@@ -50,9 +50,14 @@ <h3>Demo</h3>
         // Read more at
         // https://github.com/ethereum/go-ethereum/wiki/Management-APIs#personal_sign
         //
-        web3.eth.personal.sign(web3.utils.utf8ToHex("This should be a readable text."), account)
-            .then(function (result) {
-              document.getElementById('personal-sign--result').textContent = `Signature: ${result}`;
+        web3.eth.personal.sign(web3.utils.utf8ToHex("This should be a readable text."), account, null,
+            function (error, result) {
+              if(!error) {
+                document.getElementById('personal-sign--result').textContent = `Signature: ${result}`;
+              }
+              else {
+                console.log('Error at web3.eth.personal.sign', {error, result})
+              }
             })
       }
 

diff --git a/src/async/walletConnect.js b/src/async/walletConnect.js
@@ -1,2 +1,2 @@
-export { default as WalletConnectProvider } from 'walletconnect-web3-provider'
+export WalletConnectProvider from '@walletconnect/web3-provider'
 export { default as qrImage } from 'qr-image'
diff --git a/src/components/signerDialogs/WalletConnect.vue b/src/components/signerDialogs/WalletConnect.vue
@@ -3,7 +3,13 @@
     <div :class="$style.logo"/>
     <div :class="$style.dialog">
 
-      <Loading v-if="!qrImage" :centered="true"/>
+      <Loading v-if="!provider" :centered="true"/>
+
+      <NetworkIndicator
+          v-if="provider"
+          :network_id="networkId"
+          :required_network="requiredNetwork"
+      />
 
       <div v-if="isListening && qrImage">
         <img :src="qrImage"/>
@@ -35,6 +41,8 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import Loading from '../Loading'
+import NetworkIndicator from '../NetworkIndicator'
+
 
 export default {
   name: 'WalletConnect',
@@ -44,23 +52,22 @@ export default {
       TIMEOUT: 5 * 60 * 1000, // 5 min. 5 * 60 * 1000
       qrImage: null,
       isListening: null,
-      wcSession: null,
     }
   },
   components: {
     Loading,
+    NetworkIndicator,
   },
   created() {
     if (this.provider) {
-      // this.getQrImage()
       this.initSession()
     }
   },
   watch: {
     provider: {
       handler(provider) {
+        console.log('provider CHANGED at watch')
         if (provider) {
-          // this.getQrImage()
           this.initSession()
         }
       }
@@ -72,10 +79,10 @@ export default {
         }
       }
     },
-    wcSession: {
-      handler(session) {
-        if (session) {
-          this.provider.web3.eth.getAccounts()
+    account: {
+      handler(account) {
+        if (account) {
+          this.listenSessionStatus()
         }
       }
     },
@@ -102,21 +109,36 @@ export default {
   methods: {
     async initSession() {
       // This will cause walletConnect to initialize a Session.
-      await this.provider.web3.currentProvider.walletconnect.initSession()
-      this.qrImage = await this.provider.image
+
+      console.log('init Session @ connected:', this.provider.walletConnector.connected)
+
+      if (this.provider.walletConnector.connected) {
+        console.log('Found Session', this.provider)
+        this.provider.getNetwork()
+        this.provider.getDefaultAccount()
+      }
+      else {
+        console.log('Creating Session')
+        this.provider.walletConnector.createSession()
+          .then(this.listenSessionStatus.bind(this))
+      }
     },
     async listenSessionStatus() {
-      if (this.qrImage) {
-        this.isListening = true
-        try {
-          this.wcSession = await this.provider.web3.currentProvider.walletconnect.listenSessionStatus(this.POLL_INTERVAL, this.TIMEOUT)
-        }
-        catch (e) {
-          // console.log(e, 'ERROR or TIMEOUT @ walletconnect.listenSessionStatus()')
-        }
+      console.log('HERE listenSessionStatus()')
+
+      console.log('is connected?', this.provider.walletConnector && this.provider.walletConnector.connected)
+
+      if (this.provider.walletConnector && this.provider.walletConnector.connected) {
         this.isListening = false
+        this.qrImage = null
+        this.provider.getNetwork()
+        this.provider.getDefaultAccount()
       }
-    }
+      else {
+        this.isListening = true
+        this.qrImage = this.provider.image
+      }
+    },
   },
 }
 </script>

diff --git a/src/conf/default.props.js b/src/conf/default.props.js
@@ -1,7 +1,7 @@
 export default {
   walletConnect: {
     // bridgeUrl: 'https://bridge.walletconnect.org',
-    bridgeUrl: 'https://test-bridge.walletconnect.org',
+    bridge: 'https://bridge.walletconnect.org',
   },
   enabledProviders: [
     { id: 'metamask' },

diff --git a/src/example-props.js b/src/example-props.js
@@ -1,10 +1,9 @@
 export default {
-  requiredNetwork: '1',
+  requiredNetwork: '5',
   dappName: 'INSERT_A_UNIQUE_DAPP_NAME',
-  rpcUrl: 'https://mainnet.infura.io/drupal',
+  rpcUrl: 'ws://mainnet.infura.io/drupal',
   walletConnect: {
-    bridgeUrl: 'https://bridge.walletconnect.org',
-    // bridgeUrl: 'https://test-bridge.walletconnect.org',
+    bridge: 'https://bridge.walletconnect.org',
   },
   providers: 'metamask,walletConnect,ledger',
 }
diff --git a/src/store.js b/src/store.js
@@ -89,7 +89,7 @@ const store = new Vuex.Store({
     },
     walletConnectConfig(state) {
       return {
-        bridgeUrl: state.walletConnect.bridgeUrl,
+        bridge: state.walletConnect.bridge,
         dappName: state.dappName,
         rpcUrl: state.rpcUrl
       }

diff --git a/src/translations/default.js b/src/translations/default.js
@@ -59,6 +59,9 @@ const messages = {
         '4': {
           label: 'Rinkeby',
         },
+        '5': {
+          label: 'Görli',
+        },
         '8': {
           label: 'Ubiq',
         },

diff --git a/src/web3ProviderApi/Metamask.js b/src/web3ProviderApi/Metamask.js
@@ -83,9 +83,6 @@ export default class Metamask {
     this.networkChange = networkChange
     // Reset the provider if validation fails or lock status change.
     this.resetProvider = resetProvider
-    // Bugfix metamask inconsistency.
-    // toChecksumAddress might be called before web3 is loaded. Helper to provide a consistently formatted address.
-    this.toChecksumAddress = Web3.utils.toChecksumAddress
 
     // Refresh every POLL_INTERVAL [ms].
     this.POLL_INTERVAL = 800
@@ -129,7 +126,7 @@ export default class Metamask {
     try {
       if (window.ethereum) {
         // eslint-disable-next-line
-        accounts = await ethereum.enable()
+        accounts = await window.ethereum.enable()
       }
       else {
         accounts = await this.web3.eth.getAccounts()
@@ -142,8 +139,7 @@ export default class Metamask {
 
     if (accounts && accounts.length > 0) {
       [this.account] = accounts
-      // Working around "Address is returned inconsistently": https://github.com/MetaMask/metamask-extension/issues/5826
-      this.accountChange(this.toChecksumAddress(this.account))
+      this.accountChange(this.account)
       this.watchAccountChange()
     }
   }