#205: add modal output box to get basic info from tx type 17

TurtleNetwork · Nov 17, 2021 · 3356a18 · 3356a18
1 parent e562750
commit 3356a18
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 2 deletions.
diff --git a/locale/en/app.ui.json b/locale/en/app.ui.json
@@ -576,7 +576,9 @@
 
             "viewTransactionKey": "Transaction",
 
-            "viewTransactionValue": "View Transaction"
+            "viewTransactionValue": "View Transaction",
+
+            "name": "Name"
 
         },
 

diff --git a/src/modules/app/less/app-icons.less b/src/modules/app/less/app-icons.less
@@ -324,6 +324,14 @@
   background-color: rgba(90, 129, 234, 0.1);
 }
 
+.icon-tx-update-asset {
+  &::before {
+    display: block;
+    background-position-x: -@tx-icon-size * 15;
+  }
+  background-color: rgba(90, 129, 234, 0.1);
+}
+
 .icon-info {
   width: 20px;
   height: 20px;

diff --git a/src/modules/ui/directives/transaction/transactions.less b/src/modules/ui/directives/transaction/transactions.less
@@ -13,7 +13,7 @@
       border-top-left-radius: @border-radius;
       border-top-right-radius: @border-radius;
     }
-    
+
     &:last-child {
       border-bottom-left-radius: @border-radius;
       border-bottom-right-radius: @border-radius;
@@ -214,6 +214,10 @@ w-transaction .transaction {
     &.script-invocation {
       .icon-tx-script-invocation();
     }
+
+    &.update-asset {
+      .icon-tx-update-asset();
+    }
   }
 
   &.spam .icon {

diff --git a/src/modules/ui/directives/transactionInfo/transaction-info-content.html b/src/modules/ui/directives/transactionInfo/transaction-info-content.html
@@ -13,6 +13,7 @@
     <w-sponsorship-info ng-if="$ctrl.signable.type === 14" signable="$ctrl.signable"></w-sponsorship-info>
     <w-set-asset-script-info ng-if="$ctrl.signable.type === 15" signable="$ctrl.signable"></w-set-asset-script-info>
     <w-script-invocation-info ng-if="$ctrl.signable.type === 16" signable="$ctrl.signable"></w-script-invocation-info>
+    <w-update-asset-info ng-if="$ctrl.signable.type === 17" signable="$ctrl.signable"></w-update-asset-info>
     <w-create-order-info ng-if="$ctrl.signable.type === 1002" signable="$ctrl.signable"></w-create-order-info>
     <w-cancel-order-info ng-if="$ctrl.signable.type === 1003" signable="$ctrl.signable"></w-cancel-order-info>
 </div>
diff --git a/src/modules/ui/directives/transactionInfo/transactionInfo.less b/src/modules/ui/directives/transactionInfo/transactionInfo.less
@@ -346,6 +346,10 @@ w-transaction-info-header + w-transaction-info-general {
       .icon-tx-script-invocation();
     }
 
+    &.update-asset {
+      .icon-tx-update-asset();
+    }
+
     &::before {
       width: @tx-icon-size;
       height: @tx-icon-size;
@@ -370,6 +374,7 @@ w-transaction-info-header + w-transaction-info-general {
       &.sponsorship-stop,
       &.sponsorship-fee,
       &.set-asset-script,
+      &.update-asset,
       &.mass-send {
         &::before {
           background-position-y: bottom;

diff --git a/src/modules/ui/directives/transactionInfo/types/update-asset/UpdateAssetHeader.js b/src/modules/ui/directives/transactionInfo/types/update-asset/UpdateAssetHeader.js
@@ -0,0 +1,42 @@
+(function () {
+    'use strict';
+
+    /**
+     * @return {UpdateAssetHeader}
+     */
+    const controller = function () {
+
+        class UpdateAssetHeader {
+
+            /**
+             * @type {Signable}
+             */
+            signable;
+            /**
+             * @type {*}
+             * @private
+             */
+            _tx;
+
+            $postLink() {
+                this._tx = this.signable.getTxData();
+                this.name = this._tx.name;
+                this.description = this._tx.description;
+            }
+
+        }
+
+        return new UpdateAssetHeader();
+    };
+
+    controller.$inject = [];
+
+    angular.module('app.ui').component('wUpdateAssetHeader', {
+        bindings: {
+            signable: '<',
+            isScam: '<'
+        },
+        controller,
+        templateUrl: 'modules/ui/directives/transactionInfo/types/update-asset/update-asset-header.html'
+    });
+})();
diff --git a/src/modules/ui/directives/transactionInfo/types/update-asset/UpdateAssetInfo.js b/src/modules/ui/directives/transactionInfo/types/update-asset/UpdateAssetInfo.js
@@ -0,0 +1,61 @@
+(function () {
+    'use strict';
+
+    /**
+     * @param {$rootScope.Scope} $scope
+     * @param {JQuery} $element
+     * @return {UpdateAssetInfo}
+     */
+    const controller = function ($scope, $element) {
+
+        class UpdateAssetInfo {
+
+            /**
+             * @type {Signable}
+             */
+            signable;
+            /**
+             * @type {Asset}
+             */
+            asset;
+            /**
+             * @type {boolean}
+             */
+            shownScript = false;
+            /**
+             * @type {JQuery}
+             */
+            $container;
+
+
+            $postLink() {
+                this.$container = $element.find('.js-script-container');
+                this.$container.hide();
+                this.transaction = this.signable.getTxData();
+                (this.transaction.id ? Promise.resolve(this.transaction.id) : this.signable.getId())
+                    .then(id => {
+                        this.id = id;
+                        $scope.$apply();
+                    });
+            }
+
+            toggleScript() {
+                this.shownScript = !this.shownScript;
+                this.$container.stop(true, true).slideToggle(100);
+            }
+
+        }
+
+        return new UpdateAssetInfo();
+    };
+
+    controller.$inject = ['$scope', '$element'];
+
+    angular.module('app.ui').component('wUpdateAssetInfo', {
+        bindings: {
+            signable: '<'
+        },
+        controller,
+        templateUrl: 'modules/ui/directives/transactionInfo/types/update-asset/update-asset-info.html'
+    });
+})();
diff --git a/src/modules/ui/directives/transactionInfo/types/update-asset/update-asset-header.html b/src/modules/ui/directives/transactionInfo/types/update-asset/update-asset-header.html
@@ -0,0 +1,10 @@
+<div class="txinfo__lead">
+    <div class="txinfo__header-wrapper">
+        <h3 class="basic-700"
+            w-i18n="transaction.amounts.issue"
+            params="{description: $ctrl.description, name: $ctrl.name}"></h3>
+        <span ng-if="$ctrl.isScam"
+              class="status-label-min inactive"
+              w-i18n="transaction.headers.suspicious"></span>
+    </div>
+</div>
diff --git a/src/modules/ui/directives/transactionInfo/types/update-asset/update-asset-info.html b/src/modules/ui/directives/transactionInfo/types/update-asset/update-asset-info.html
@@ -0,0 +1,19 @@
+<div class="txinfo__row" ng-if="::$ctrl.transaction.assetId">
+    <div class="txinfo__key" w-i18n="transaction.modals.assetId"></div>
+    <div class="txinfo__value">{{::$ctrl.transaction.assetId}}</div>
+</div>
+
+<div class="txinfo__row txinfo__row-contains-text" ng-if="::$ctrl.transaction.name">
+    <div class="txinfo__key" w-i18n="transaction.modals.name"></div>
+    <div class="txinfo__value txinfo__text">{{$ctrl.transaction.name}}</div>
+</div>
+
+<div class="txinfo__row txinfo__row-contains-text" ng-if="::$ctrl.transaction.description">
+    <div class="txinfo__key" w-i18n="transaction.modals.description"></div>
+    <div class="txinfo__value txinfo__text">{{$ctrl.transaction.description}}</div>
+</div>
+
+<w-transaction-info-general height="$ctrl.transaction.height"
+                            timestamp="$ctrl.transaction.timestamp"
+                            id="$ctrl.id"
+                            fee="$ctrl.transaction.fee"></w-transaction-info-general>