Merge pull request #373 from theQRL/testnet

WebUSB/Nano X support in web wallet
theQRL · Jun 26, 2019 · 4e0e236 · 4e0e236
2 parents add5e5f + 4bd95d0
commit 4e0e236
Show file tree

Hide file tree

Showing 18 changed files with 2,869 additions and 803 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -1,7 +1,7 @@
 # root: true
 # enable ES6
 parserOptions:
-  ecmaVersion: 6
+  ecmaVersion: 2017
   sourceType: "module"
   ecmaFeatures:
     jsx: true # enable React's JSX

diff --git a/client/head.html b/client/head.html
@@ -2,6 +2,4 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>QRL Wallet</title>
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <script src="/ledger.js"></script>
-  <script src="/qrl-ledger-library.js"></script>
 </head>
diff --git a/imports/startup/both/index.js b/imports/startup/both/index.js
@@ -13,7 +13,7 @@ import './nodes.js'
 SHOR_PER_QUANTA = 1000000000
 
 // qrl-wallet Version
-WALLET_VERSION = '1.1.1'
+WALLET_VERSION = '1.2.0'
 
 // qrl.proto sha256 sum for each release of QRL Node
 QRLPROTO_SHA256 = [

diff --git a/imports/startup/client/functions.js b/imports/startup/client/functions.js
@@ -10,10 +10,43 @@ import aes256 from 'aes256'
 import qrlAddressValdidator from '@theqrl/validate-qrl-address'
 import helpers from '@theqrl/explorer-helpers'
 
+import 'babel-polyfill'
+import Qrl from '@theqrl/hw-app-qrl'
+import TransportWebUSB from "@ledgerhq/hw-transport-webusb";
+
+
 bech32 = require('bech32') // eslint-disable-line
 
+export function ledgerReturnedError(e) {
+  let r = false;
+  try {
+    if (e instanceof DOMException) {
+      // DOMException will be thrown if WebUSB device is unplugged during Ledger UI event
+      r = true;
+    }
+  } catch (e) {
+    r = false;
+  }
+  try {
+    if (e.name === 'TransportStatusError' || e instanceof TransportStatusError || e.name === 'TransportOpenUserCancelled') {
+      r = true;
+    }
+  } catch (e) {
+    r = false;
+  }
+  return r;
+}
+
+export async function createTransport() {
+  var transport = null;
+  transport = await TransportWebUSB.create();
+  console.log('USING WEBUSB');
+  var qrl = await new Qrl(transport);
+  return qrl
+}
+
 // Client side function to detmine if running within Electron
-isElectrified = () => {
+export function isElectrified () {
   const userAgent = navigator.userAgent.toLowerCase()
   if (userAgent.indexOf(' electron/') > -1) {
     return true
@@ -341,7 +374,7 @@ getBalance = (getAddress, callBack) => {
     network: selectedNetwork(),
   }
 
-  wrapMeteorCall('getAddress', request, (err, res) => {
+  wrapMeteorCall('getAddress', request, async (err, res) => {
     if (err) {
       console.log('err: ', err)
       Session.set('transferFromBalance', 0)
@@ -400,8 +433,9 @@ getBalance = (getAddress, callBack) => {
             callBack()
           })
         } else {
+          const QrlLedger = await createTransport()
           QrlLedger.get_state().then(data => {
-            console.log('> Got Ledger Nano State from U2F')
+            console.log('> Got Ledger Nano State from WebUSB')
             Session.set('otsKeyEstimate', data.xmss_index)
             // Get remaining OTS Keys
             const validationResult = qrlAddressValdidator.hexString(getAddress)

diff --git a/imports/startup/client/index.js b/imports/startup/client/index.js
@@ -6,7 +6,8 @@
 /* global resetWalletStatus, passwordPolicyValid, countDecimals, supportedBrowser, wrapMeteorCall, getBalance, otsIndexUsed, ledgerHasNoTokenSupport, resetLocalStorageState, nodeReturnedValidResponse */
 /* global POLL_TXN_RATE, POLL_MAX_CHECKS, DEFAULT_NETWORKS, findNetworkData, SHOR_PER_QUANTA, WALLET_VERSION, QRLPROTO_SHA256,  */
 
-import { QRLLIB } from 'qrllib/build/web-libjsqrl.js' // eslint-disable-line
+// import { QRLLIB } from 'qrllib/build/web-libjsqrl.js' // eslint-disable-line
+import { QRLLIBmodule } from 'qrllib/build/offline-libjsqrl' // eslint-disable-line
 import './routes.js'
 import './functions.js'
 
@@ -28,6 +29,6 @@ if ((!openWalletPref) || (openWalletPref === 'undefined')) {
 
 // Developer note
 console.log('qrl-wallet - ', WALLET_VERSION)
-console.log('We\'re hiring! [email protected]')
+console.log('Work with us! [email protected]')
 console.log('Found a security bug? [email protected]')
 console.log('Found a problem? https://github.com/theQRL/qrl-wallet/issues')
diff --git a/imports/startup/server/index.js b/imports/startup/server/index.js
@@ -23,6 +23,7 @@ BrowserPolicy.content.disallowInlineScripts()
 BrowserPolicy.content.allowStyleOrigin('fonts.googleapis.com')
 BrowserPolicy.content.allowFontOrigin('fonts.gstatic.com')
 BrowserPolicy.content.allowFontDataUrl()
+BrowserPolicy.content.allowDataUrlForAll()
 
 // An array of grpc connections and associated proto file paths
 const qrlClient = []

diff --git a/imports/ui/layouts/body/body.html b/imports/ui/layouts/body/body.html
@@ -1,137 +1,160 @@
 <template name="appBody">
-  <!-- Custom Node Modal -->
-  {{>customNode}}
+    <!-- Custom Node Modal -->
+    {{>customNode}}
 
-  <!-- Main Menu -->
-  <div class="ui visible left vertical inverted sidebar labeled icon menu">
-      <a href="/" class="item logoArea">
+    <!-- Main Menu -->
+    <div class="ui visible left vertical inverted sidebar labeled icon menu">
+        <a href="/" class="item logoArea">
         <img class="main-menu-logo" src="/img/qrl-logo-white.png" />
         QRL
       </a>
-      <a id="newWalletButton" href="/create" class="item main-menu-btn {{menuNewWalletActive}}">
+        <a id="newWalletButton" href="/create" class="item main-menu-btn {{menuNewWalletActive}}">
         <img class="icon svg" src="/img/icons/new-wallet.svg" />
         New Wallet
       </a>
-      <a id="openWalletButton" href="/open" class="item main-menu-btn {{menuOpenWalletActive}}" style="{{walletStatus.menuHiddenInverse}}">
+        <a id="openWalletButton" href="/open" class="item main-menu-btn {{menuOpenWalletActive}}" style="{{walletStatus.menuHiddenInverse}}">
         <img class="icon svg" src="/img/icons/open-wallet.svg" />
         Open Wallet
       </a>
-      <a id="closeWalletButton" href="/close" class="item main-menu-btn" style="{{walletStatus.menuHidden}}">
+        <a id="closeWalletButton" href="/close" class="item main-menu-btn" style="{{walletStatus.menuHidden}}">
         <img class="icon svg" src="/img/icons/lock.svg" />
         Close Wallet
       </a>
 
-      <a id="sendAndReceiveButton" href="/transfer" class="item main-menu-btn {{menuTransferActive}}" style="{{walletStatus.menuHidden}}">
+        <a id="sendAndReceiveButton" href="/transfer" class="item main-menu-btn {{menuTransferActive}}" style="{{walletStatus.menuHidden}}">
         <img class="icon svg" src="/img/icons/transfer.svg" />
         Send &amp;<br />Receive
       </a>
 
-      <a id="toolsButton" href="/tools" class="item main-menu-btn {{menuToolsActive}}" style="{{walletStatus.menuHidden}}">
+        <a id="toolsButton" href="/tools" class="item main-menu-btn {{menuToolsActive}}" style="{{walletStatus.menuHidden}}">
         <i class="wrench icon"></i>
         Tools
       </a>
 
-      <a href="/verify" class="item main-menu-btn {{menuVerifyActive}}">
+        <a href="/verify" class="item main-menu-btn {{menuVerifyActive}}">
         <img class="icon svg" src="/img/icons/tick.svg" />
         Verify<br />Transaction
       </a>
-      
-      <a href="{{nodeExplorerUrl}}" target="_blank" class="item main-menu-btn">
+
+        <a href="{{nodeExplorerUrl}}" target="_blank" class="item main-menu-btn">
         <i class="search icon"></i>
         Explorer
       </a>
 
-      <a class="item main-menu-btn sidebarConnectionStatus">
+        <a class="item main-menu-btn sidebarConnectionStatus">
         <i class="{{connectionStatus.colour}} signal icon"></i>
       </a>
-  </div>
-
-
-  <!-- Content Wrapper -->
-  <div class="main-content-wrapper">
-      <!-- Top Message Bar -->
-      <div class="main-content-warning ui fixed secondary menu">
-          <div class="center menu">
-              <div class="ui item">
-                <span class="title breakable">
-                  <strong>Notice: </strong>This wallet provides functionality for the QRL Mainnet and QRL Testnet. <strong>It is safe to use this service to generate your token migration QRL wallet.</strong><br />
-                </span>
-              </div>
-          </div>
-      </div>
-
-      <!-- Main Content Area -->
-      <div class="main-content">
-
-        <!-- Web Assembly Warning -->
-        <div class="small ui modal" id="webassemblyWarning">
-          <div class="header">Your browser is not supported!</div>
-          <div class="content">
-            <div class="ui warning icon message">
-              <i class="warning icon"></i>
-              <div class="content">
-                <p>Your browser does not support Web Assembly which is a core component in the QRL Wallet.</p>
-                <p>It is recommended that you use the latest version of Google Chrome or Mozilla Firefox to access the QRL Wallet.</p>
-                <p><a href="https://www.mozilla.org/" target="_blank">Download Mozilla Firefox</a></p>
-                <p><a href="https://www.google.com/chrome/" target="_blank">Download Google Chrome</a></p>
+    </div>
+
+
+    <!-- Content Wrapper -->
+    <div class="main-content-wrapper">
+        <!-- Top Message Bar -->
+        <div class="main-content-warning ui fixed secondary menu">
+            <div class="center menu">
+                <div class="ui item">
+                    <a href="https://medium.com/the-quantum-resistant-ledger/last-week-in-qrl-may-21st-27th-fa8fb1017e02#1150"><div class="ui icon tiny message">
+                  <i class="help icon"></i>
+                  <div class="content">
+                    <div class="header">
+                      Problems using a Ledger Nano device?
+                    </div>
+                    <p>Read our blog for info and help &raquo;</p>
+                  </div>
+                </div></a>
+                </div>
+                <div class="ui item">
+                    <a href="https://medium.com/the-quantum-resistant-ledger/warning-fake-qrl-wallet-in-microsoft-store-a96f8318af1f">
+                  <div class="ui icon red tiny message">
+                    <i class="warning small icon"></i>
+                    <div class="content">
+                      <div class="header">
+                        Beware of fake apps
+                      </div>
+                      <p>Fake QRL app on Microsoft Store &raquo;</p>
+                    </div>
+                  </div>
+              </a>
+                </div>
               </div>
+                <div class="right menu">
+                    <div class="ui item">
+                        <i class="close icon"></i>
+                    </div>
+                </div>
+            </div>
+        <!-- Main Content Area -->
+        <div class="main-content">
+
+            <!-- Web Assembly Warning -->
+            <div class="small ui modal" id="webassemblyWarning">
+                <div class="header">Your browser is not supported!</div>
+                <div class="content">
+                    <div class="ui warning icon message">
+                        <i class="warning icon"></i>
+                        <div class="content">
+                            <p>Your browser does not support Web Assembly which is a core component in the QRL Wallet.</p>
+                            <p>It is recommended that you use the latest version of Google Chrome or Mozilla Firefox to access the QRL Wallet.</p>
+                            <p><a href="https://www.mozilla.org/" target="_blank">Download Mozilla Firefox</a></p>
+                            <p><a href="https://www.google.com/chrome/" target="_blank">Download Google Chrome</a></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="actions">
+                    <div class="ui approve button green">Okay</div>
+                </div>
             </div>
-          </div>
-          <div class="actions">
-            <div class="ui approve button green">Okay</div>
-          </div>
-        </div>
 
-        <!-- Temporarily disable Address Format Selection so it doesn't disturb other goings-on
+            <!-- Temporarily disable Address Format Selection so it doesn't disturb other goings-on
         <div class="ui toggle checkbox floatleft">
           <input type="checkbox" id="addressFormatCheckbox" name="addressFormatCheckbox" {{ addressFormatChecked }} ><label for="addressFormatCheckbox"><strong>Address Format</strong> {{ addressFormat }} </label>
         </div>
         -->
 
-        <!-- Top Right Network Selection -->
-        <div class="ui selection dropdown floatright" id="networkDropdown">
-          <input id="network" type="hidden" value="{{nodeId}}">
-          <i class="dropdown icon"></i>
-          <div class="text"></div>
-          <div class="menu">
-            {{#each defaultNetworks}}
-            <div class="{{this.disabled}} item" data-value="{{this.id}}">{{this.name}}</div>
-            {{/each}}
-            {{#if customNodeCreated}}
-            <div class="item" data-value="custom">{{customNodeName}}</div>
-            {{/if}}
-            <div class="item" data-value="add">Add/Edit Custom Node</div>
-          </div>
-        </div>
+            <!-- Top Right Network Selection -->
+            <div class="ui selection dropdown floatright" id="networkDropdown">
+                <input id="network" type="hidden" value="{{nodeId}}">
+                <i class="dropdown icon"></i>
+                <div class="text"></div>
+                <div class="menu">
+                    {{#each defaultNetworks}}
+                        <div class="{{this.disabled}} item" data-value="{{this.id}}">{{this.name}}</div>
+                    {{/each}}
+                    {{#if customNodeCreated}}
+                        <div class="item" data-value="custom">{{customNodeName}}</div>
+                    {{/if}}
+                    <div class="item" data-value="add">Add/Edit Custom Node</div>
+                </div>
+            </div>
 
-        <!-- Page Content -->
-        <div class="subPageContent">
-          <div class="ui container">
-            {{> Template.dynamic template=main}}
+            <!-- Page Content -->
+            <div class="subPageContent">
+                <div class="ui container">
+                    {{> Template.dynamic template=main}}
 
-            <!-- Footer -->
-            <div class="footer">
-              <div class="ui center aligned container">
-                <a href="/">
+                    <!-- Footer -->
+                    <div class="footer">
+                        <div class="ui center aligned container">
+                            <a href="/">
                   <img class="footerLogo" src="/img/[email protected]">
                 </a>
-                <br />
-                <div class="ui horizontal small divided link list">
-                  <a class="item" target="_blank" href="http://theqrl.org/">theQRL.org</a>
-                  <a class="item" target="_blank" href="http://theqrl.org/whitepaper/QRL_whitepaper.pdf">White Paper</a>
-                  <a class="item" target="_blank" href="https://github.com/theQRL">Github</a>
-                  <a class="item" target="_blank" href="https://github.com/theQRL/qrl-wallet/issues">Found a Problem?</a>
-                  <a class="item" target="_blank" href="https://github.com/theQRL/qrl-wallet">qrl-wallet v{{qrlWalletVersion}}</a>
+                            <br />
+                            <div class="ui horizontal small divided link list">
+                                <a class="item" target="_blank" href="http://theqrl.org/">theQRL.org</a>
+                                <a class="item" target="_blank" href="http://theqrl.org/whitepaper/QRL_whitepaper.pdf">White Paper</a>
+                                <a class="item" target="_blank" href="https://github.com/theQRL">Github</a>
+                                <a class="item" target="_blank" href="https://github.com/theQRL/qrl-wallet/issues">Found a Problem?</a>
+                                <a class="item" target="_blank" href="https://github.com/theQRL/qrl-wallet">qrl-wallet v{{qrlWalletVersion}}</a>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
         </div>
-      </div>
 
-  </div>
+    </div>
 
 
 
 
-</template>
+</template>
diff --git a/imports/ui/layouts/body/body.js b/imports/ui/layouts/body/body.js
@@ -8,6 +8,7 @@
 import './body.html'
 import './customNode.html'
 import '../../stylesheets/overrides.css'
+import { isElectrified } from '../../../startup/client/functions'
 
 BlazeLayout.setRoot('body')
 
@@ -200,12 +201,18 @@ Template.appBody.onRendered(() => {
 })
 
 Template.appBody.events({
+  'click .main-content-warning .right .item': () => {
+    $('.main-content-wrapper').css('padding-top', '0')
+    $('.main-content-warning').hide('slow')
+  },
   'click #hamburger': (event) => {
     event.preventDefault()
     $('.sidebar').sidebar('show')
   },
   'change #network': () => {
     updateNetwork(selectedNetwork())
+    // reload to update balances/Txs if on different network
+    window.Reload._reload()
   },
   'change #addressFormatCheckbox': () => {
     const checked = $('#addressFormatCheckbox').prop('checked')