Merge pull request #168 from HathorNetwork/dev

Release v0.18.1

package.json

@@ -21,10 +21,10 @@
   "productName": "Hathor Wallet",
   "description": "Light wallet for Hathor Network",
   "author": "Hathor Labs <contact@hathor.network> (https://hathor.network/)",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "private": true,
   "dependencies": {
-    "@hathor/wallet-lib": "^0.16.5",
+    "@hathor/wallet-lib": "^0.16.11",
     "@ledgerhq/hw-transport-node-hid": "^4.73.4",
     "@sentry/electron": "^0.17.0",
     "babel-polyfill": "^6.26.0",

public/electron.js

@@ -34,7 +34,7 @@ if (process.platform === 'darwin') {
 }
 
 const appName = 'Hathor Wallet';
-const walletVersion = '0.18.0';
+const walletVersion = '0.18.1';
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.

src/App.js

@@ -44,9 +44,7 @@ import ModalAlert from './components/ModalAlert';
 import SoftwareWalletWarningMessage from './components/SoftwareWalletWarningMessage';
 import AddressList from './screens/AddressList';
 
-hathorLib.network.setNetwork('mainnet');
 hathorLib.storage.setStore(new HybridStore());
-
 // set default server
 hathorLib.wallet.setDefaultServer(DEFAULT_SERVER);
 
@@ -225,13 +223,17 @@ const returnLoadedWalletComponent = (Component, props, rest) => {
   // For server screen we don't need to check version
   const isServerScreen = props.match.path === '/server';
   const reduxState = store.getState();
+
   // Check version
   if (reduxState.isVersionAllowed === undefined && !isServerScreen) {
     const promise = version.checkApiVersion();
     promise.then(() => {
       wallet.localStorageToRedux();
     });
-    return <WaitVersion {...props} />;
+    return <Redirect to={{
+      pathname: '/loading_addresses/',
+      state: {path: props.match.url}
+    }} />;
   } else if (reduxState.isVersionAllowed === false && !isServerScreen) {
     return <VersionError {...props} />;
   } else {
@@ -278,6 +280,15 @@ const returnStartedRoute = (Component, props, rest) => {
         return <Redirect to={{pathname: '/wallet/'}} />;
       }
     } else {
+      const reduxState = store.getState();
+      if (reduxState.loadingAddresses) {
+        // If wallet is still loading addresses we redirect to the loading screen
+        return <Redirect to={{
+          pathname: '/loading_addresses/',
+          state: {path: props.match.url}
+        }} />;
+      }
+
       if (rest.loaded) {
         // When the wallet is opened, the path that is called is '/', which currenctly redirects to the Wallet component
         // in that case, if the wallet is not loaded but it's started, it should redirect to the signin/wallet type screen

src/components/ModalAlert.js

@@ -39,6 +39,7 @@ class ModalAlert extends React.Component {
       if (this.props.showFooter) {
         return (
           <div className="modal-footer">
+            {this.props.secondaryButton}
             <button onClick={this.buttonClick} type="button" className="btn btn-hathor">{this.props.buttonName}</button>
           </div>
         );
@@ -76,6 +77,7 @@ ModalAlert.propTypes = {
   buttonName: PropTypes.string,
   title: PropTypes.string.isRequired,
   handleButton: PropTypes.func,
+  secondaryButton: PropTypes.element,
   body: PropTypes.element.isRequired,
   showFooter: PropTypes.bool,
 };

src/components/Navigation.js

@@ -11,7 +11,6 @@ import { t } from 'ttag';
 import logo from '../assets/images/hathor-white-logo.png';
 import Version from './Version';
 import ServerStatus from './ServerStatus';
-import { EXPLORER_BASE_URL } from '../constants';
 import helpers from '../utils/helpers';
 
 /**
@@ -22,13 +21,13 @@ import helpers from '../utils/helpers';
 class Navigation extends React.Component {
 
   /**
-   * Method called when user clicked on Esxplorer menu
+   * Method called when user clicked on Explorer menu
    *
    * @param {Object} e Event for the click
    */
   goToExplorer = (e) => {
     e.preventDefault();
-    helpers.openExternalURL(EXPLORER_BASE_URL);
+    helpers.openExternalURL(helpers.getExplorerURL());
   }
 
   render() {

src/constants.js

@@ -20,7 +20,7 @@ export const WALLET_HISTORY_COUNT = 10;
 /**
  * Wallet version
  */
-export const VERSION = '0.18.0';
+export const VERSION = '0.18.1';
 
 /**
  * Before this version the data in localStorage from the wallet is not compatible  
@@ -91,10 +91,15 @@ export const DEFAULT_SERVERS = [
 export const DEFAULT_SERVER = DEFAULT_SERVERS[0];
 
 /**
- * Explorer vase url
+ * Explorer base url
  */
 export const EXPLORER_BASE_URL = "https://explorer.hathor.network";
 
+/**
+ * Testnet explorer base url
+ */
+export const TESTNET_EXPLORER_BASE_URL = "https://explorer.testnet.hathor.network";
+
 /**
  * URL of token deposit RFC
  */

src/screens/AddressList.js

@@ -9,7 +9,7 @@ import React from 'react';
 import { t } from 'ttag'
 import HathorPaginate from '../components/HathorPaginate';
 import HathorAlert from '../components/HathorAlert';
-import { EXPLORER_BASE_URL, WALLET_HISTORY_COUNT } from '../constants';
+import { WALLET_HISTORY_COUNT } from '../constants';
 import helpers from '../utils/helpers';
 import path from 'path';
 
@@ -147,7 +147,7 @@ class AddressList extends React.Component {
    */
   goToAddressSearch = (e, address) => {
     e.preventDefault();
-    const url = path.join(EXPLORER_BASE_URL, `address/${address}`);
+    const url = path.join(helpers.getExplorerURL(), `address/${address}`);
     helpers.openExternalURL(url);
   }
 

src/screens/LoadWallet.js

@@ -88,9 +88,11 @@ class LoadWallet extends React.Component {
    * This method is called after the ChoosePin component has a valid PIN and succeeds
    */
   pinSuccess = () => {
+    // Getting redux variables before cleaning all data
+    const { pin, password } = this.props;
     // First we clean what can still be there of a last wallet
     wallet.cleanWallet();
-    wallet.generateWallet(this.state.words, '', this.props.pin, this.props.password, true);
+    wallet.generateWallet(this.state.words, '', pin, password, true);
     hathorLib.wallet.markBackupAsDone();
     // Clean pin and password from redux
     this.props.updatePassword(null);

src/screens/LockedWallet.js

@@ -12,6 +12,7 @@ import $ from 'jquery';
 import wallet from '../utils/wallet';
 import RequestErrorModal from '../components/RequestError';
 import hathorLib from '@hathor/wallet-lib';
+import version from '../utils/version';
 
 
 /**
@@ -53,11 +54,17 @@ class LockedWallet extends React.Component {
         return;
       }
 
-      // Everything is fine, so redirect to wallet
-      hathorLib.wallet.unlock();
-      // Reload wallet data
-      wallet.reloadData();
-      this.props.history.push('/wallet/');
+      const promise = version.checkApiVersion();
+      promise.then((data) => {
+        // Everything is fine, so redirect to wallet
+        hathorLib.wallet.unlock();
+        // Reload wallet data
+        wallet.reloadData();
+        this.props.history.push('/wallet/');
+      }, () => {
+        this.setState({ errorMessage: t`Invalid server version.` });
+        return;
+      });
     } else {
       this.refs.unlockForm.classList.add('was-validated')
     }

src/screens/NewWallet.js

@@ -102,10 +102,12 @@ class NewWallet extends React.Component {
    * After choosing a new PIN with success, executes the wallet creation and redirect to the wallet
    */
   pinSuccess = () => {
+    // Getting redux variables before cleaning all data
+    const { words, pin, password } = this.props;
     // First we clean what can still be there of a last wallet
     wallet.cleanWallet();
     // Generate addresses and load data
-    wallet.executeGenerateWallet(this.props.words, '', this.props.pin, this.props.password, true);
+    wallet.executeGenerateWallet(words, '', pin, password, true);
     // Clean pin, password and words from redux
     this.props.updatePassword(null);
     this.props.updatePin(null);

src/screens/Server.js

@@ -7,13 +7,16 @@
 
 import React from 'react';
 import { t } from 'ttag';
+import SpanFmt from '../components/SpanFmt';
 import $ from 'jquery';
 import version from '../utils/version';
 import wallet from '../utils/wallet';
+import helpers from '../utils/helpers';
 import ReactLoading from 'react-loading';
 import hathorLib from '@hathor/wallet-lib';
 import { DEFAULT_SERVERS } from '../constants';
 import colors from '../index.scss';
+import ModalAlert from '../components/ModalAlert';
 
 
 /**
@@ -30,19 +33,28 @@ class Server extends React.Component {
      * loading {boolean} If should show spinner while waiting for server response
      * newServer {boolean} If user selected checkbox that he wants to set a new server
      * selectedValue {string} Server selected from the user
+     * selectedServer {string} Server that the user wants to connect
+     * testnetError {string} Message to be shown in case of error when changing to a testnet server.
      */
     this.state = {
       newServer: false,
       errorMessage: '',
       selectedValue: '',
       loading: false,
+      selectedServer: '',
+      testnetError: '',
     }
   }
 
   componentDidMount = () => {
     $('#requestErrorModal').on('hidden.bs.modal', (e) => {
       this.setState({ loading: false });
     });
+
+    $('#alertModal').on('hidden.bs.modal', (e) => {
+      this.setState({ testnetError: '' });
+      this.refs.testnetTest.value = '';
+    });
   }
 
   /**
@@ -68,9 +80,51 @@ class Server extends React.Component {
       return;
     }
 
-    this.setState({ loading: true, errorMessage: '' });
+    this.setState({ loading: true, errorMessage: '', selectedServer: newServer });
+    const currentNetwork = hathorLib.network.getNetwork().name;
+    const currentServer = hathorLib.helpers.getServerURL();
     // Update new server in local storage
     hathorLib.wallet.changeServer(newServer);
+    hathorLib.versionApi.getVersion((data) => {
+      // If the user selected a testnet server, we show a modal to confirm the operation
+      if (data.network !== 'mainnet') {
+        // Go back to the previous server
+        // If the user decides to continue with this change, we will update again
+        hathorLib.wallet.changeServer(currentServer);
+        $('#alertModal').modal('show');
+        this.setState({ loading: false });
+      } else {
+        this.executeServerChange();
+      }
+    }, () => {
+      // Go back to the previous server
+      hathorLib.wallet.changeServer(currentServer);
+      this.setState({ loading: false });
+    });
+  }
+
+  /**
+   * Method called when user confirms that wants to connect to a testnet server
+   * Validate that the user has written 'testnet' on the input and then execute the change
+   */
+  confirmTestnetServer = () => {
+    if (this.refs.testnetTest.value.toLowerCase() !== 'testnet') {
+      this.setState({ testnetError: t`Invalid value.` });
+      return;
+    }
+    hathorLib.wallet.changeServer(this.state.selectedServer);
+    $('#alertModal').on('hidden.bs.modal', (e) => {
+      this.setState({ loading: true });
+      this.executeServerChange();
+    });
+    $('#alertModal').modal('hide');
+  }
+
+  /**
+   * Execute server change checking server API and, in case of success
+   * reloads data and redirects to wallet screen
+   */
+  executeServerChange = () => {
     const promise = version.checkApiVersion();
     promise.then(() => {
       wallet.reloadData({endConnection: true});
@@ -113,6 +167,25 @@ class Server extends React.Component {
       });
     }
 
+    const renderConfirmBody = () => {
+      return (
+        <div>
+          <p><SpanFmt>{t`The selected server connects you to a testnet. Beware if someone asked you to do it, the **tokens from testnet have no value**. Only continue if you know what you are doing.`}</SpanFmt></p>
+          <p>{t`To continue with the server change you must type 'testnet' in the box below and click on 'Connect to testnet' button.`}</p>
+          <div ref="testnetWrapper" className="mt-2 d-flex flex-row align-items-center">
+            <input type="text" ref="testnetTest" className="form-control col-4" />
+            <span className="text-danger ml-2">{this.state.testnetError}</span>
+          </div>
+        </div>
+      );
+    }
+
+    const renderSecondaryModalButton = () => {
+      return (
+        <button onClick={this.confirmTestnetServer} type="button" className="btn btn-secondary">{t`Connect to testnet`}</button>
+      );
+    }
+
     return (
       <div className="content-wrapper">
         <p><strong>{t`Select one of the default servers to connect or choose a new one`}</strong></p>
@@ -141,6 +214,7 @@ class Server extends React.Component {
           {this.state.loading && <ReactLoading type='spin' color={colors.purpleHathor} width={24} height={24} delay={200} />}
         </div>
         <p className="text-danger mt-3">{this.state.errorMessage}</p>
+        <ModalAlert title={t`Confirm testnet server`} body={renderConfirmBody()} buttonName={t`Cancel change`} handleButton={() => $('#alertModal').modal('hide')} secondaryButton={renderSecondaryModalButton()} />
       </div>
     )
   }

src/screens/TransactionDetail.js

@@ -14,7 +14,6 @@ import hathorLib from '@hathor/wallet-lib';
 import colors from '../index.scss';
 import helpers from '../utils/helpers';
 import path from 'path';
-import { EXPLORER_BASE_URL } from '../constants';
 
 
 /**
@@ -102,7 +101,7 @@ class TransactionDetail extends React.Component {
    */
   goToExplorer = (e) => {
     e.preventDefault();
-    const url = path.join(EXPLORER_BASE_URL, `transaction/${this.state.transaction.hash}`);
+    const url = path.join(helpers.getExplorerURL(), `transaction/${this.state.transaction.hash}`);
     helpers.openExternalURL(url);
   }