Merge pull request #424 from wavesplatform/client-359-dex-routing

Client 359 dex routing

Author: tsigel

src/index.html

@@ -358,6 +358,8 @@
                     {
                         id: 'dex',
                         data: {
+                            url:'/dex?assetId1&assetId2',
+                            reloadOnSearch: false,
                             views: [{ name: 'mainContent' }]
                         }
                     },

src/modules/dex/directives/dexWatchlist/DexWatchlist.js

@@ -7,9 +7,11 @@
      * @param {app.utils} utils
      * @param {JQuery} $element
      * @param $scope
+     * @param {$state} $state
+     * @param {$location} $location
      * @return {DexWatchlist}
      */
-    const controller = function (Base, waves, utils, $element, $scope) {
+    const controller = function (Base, waves, utils, $element, $scope, $state, $location) {
 
         class DexWatchlist extends Base {
 
@@ -104,14 +106,20 @@
                     _activeWatchListId: 'dex.watchlist.activeWatchListId'
                 });
 
-                this.observe('activeRowId', this._onChangeActiveRow);
-                this.observe('baseAssetId', this._onChangeBaseAsset);
-                this.observe('_idWatchList', this._onChangeIdWatchList);
-                this.observe('_activeWatchListId', this._onChangeActiveWatchList);
+                this._resolveState().then(() => {
+                    this.observe(['_amountAssetId', '_priceAssetId'], () => {
+                        $location.search('assetId2', this._priceAssetId);
+                        $location.search('assetId1', this._amountAssetId);
+                    });
+                    this.observe('activeRowId', this._onChangeActiveRow);
+                    this.observe('baseAssetId', this._onChangeBaseAsset);
+                    this.observe('_idWatchList', this._onChangeIdWatchList);
+                    this.observe('_activeWatchListId', this._onChangeActiveWatchList);
 
-                this._initRowId();
-                this._onChangeBaseAsset();
-                this._onChangeIdWatchList();
+                    this._initRowId();
+                    this._onChangeBaseAsset();
+                    this._onChangeIdWatchList();
+                });
             }
 
             removeWatchedAsset(event, asset) {
@@ -128,16 +136,48 @@
              * @param value
              * @private
              */
-            _onChangeSearchFocus({ value }) {
+            _onChangeSearchFocus({value}) {
                 const state = !value || !this._$searchList.children().length;
                 this._$searchList.toggleClass('hidden', state);
             }
 
+            /**
+             * @returns {Promise}
+             * @private
+             */
+            _resolveState() {
+                if ($state.params.assetId1 && $state.params.assetId2) {
+                    return Waves.AssetPair.get($state.params.assetId1, $state.params.assetId2)
+                        .then((pair) => {
+                            this._amountAssetId = pair.amountAsset.id;
+                            this._priceAssetId = pair.priceAsset.id;
+                            const list = this._idWatchList.slice();
+                            utils.addUniqueToArray([this._amountAssetId, this._priceAssetId], list);
+                            this._idWatchList = list;
+                        }).catch(() => {
+                            return Waves.AssetPair.get(WavesApp.defaultAssets.WAVES, WavesApp.defaultAssets.BTC)
+                                .then((pair) => {
+                                    this._amountAssetId = pair.amountAsset.id;
+                                    this._priceAssetId = pair.priceAsset.id;
+                                    $location.search('assetId2', this._priceAssetId);
+                                    $location.search('assetId1', this._amountAssetId);
+                                    const list = this._idWatchList.slice();
+                                    utils.addUniqueToArray([this._amountAssetId, this._priceAssetId], list);
+                                    this._idWatchList = list;
+                                });
+                        });
+                } else {
+                    $location.search('assetId2', this._priceAssetId);
+                    $location.search('assetId1', this._amountAssetId);
+                    return Promise.resolve();
+                }
+            }
+
             /**
              * @param value
              * @private
              */
-            _onChangeSearch({ value }) {
+            _onChangeSearch({value}) {
                 if (this._activeXHR) {
                     this._activeXHR.abort();
                     this._activeXHR = null;
@@ -168,17 +208,17 @@
                             });
                             this._$searchList.empty();
                             this._$searchList.append($elements);
-                            this._onChangeSearchFocus({ value: this._parent.focused });
+                            this._onChangeSearchFocus({value: this._parent.focused});
                         }, () => {
                             this._$searchList.empty();
                             this._$searchList
                                 .append('<div class="not-found footnote-1 basic-500">No assets found</div>');
-                            this._onChangeSearchFocus({ value: this._parent.focused });
+                            this._onChangeSearchFocus({value: this._parent.focused});
                         });
                     }, 500);
                 } else {
                     this._$searchList.empty();
-                    this._onChangeSearchFocus({ value: this._parent.focused });
+                    this._onChangeSearchFocus({value: this._parent.focused});
                 }
             }
 
@@ -188,7 +228,7 @@
              * @param isWatched
              * @private
              */
-            _clickSearchItem({ id }, isChangeBase, isWatched) {
+            _clickSearchItem({id}, isChangeBase, isWatched) {
                 if (isChangeBase) {
                     this.baseAssetId = id;
                     if (this.activeRowId === id) {
@@ -332,7 +372,7 @@
         return new DexWatchlist();
     };
 
-    controller.$inject = ['Base', 'waves', 'utils', '$element', '$scope'];
+    controller.$inject = ['Base', 'waves', 'utils', '$element', '$scope', '$state', '$location'];
 
     angular.module('app.dex')
         .component('wDexWatchlist', {

src/modules/utils/services/utils.js

@@ -372,6 +372,19 @@
                 });
             },
 
+            /**
+             * @name app.utils#addUniqueToArray
+             * @param {Array} list
+             * @param {Array} array
+             */
+            addUniqueToArray(list, array) {
+                list.forEach((item) => {
+                    if (array.indexOf(item) === -1) {
+                        array.push(item);
+                    }
+                });
+            },
+
             /**
              * @name app.utils#comparators
              */