Add Payment ID to the transaction details (#32)

* Add Payment ID to the transaction details

* Updated highcharts packages; fix build errors

src/gui/qt-daemon/html/assets/i18n/en.json

@@ -286,6 +286,7 @@
     "FEE": "Fee",
     "ADDRESS": "Address",
     "DETAILS": {
+      "PAYMENT_ID": "Payment ID",
       "ID": "Transaction ID",
       "SIZE": "Transaction size",
       "SIZE_VALUE": "{{value}} bytes",

src/gui/qt-daemon/html_source/package.json

@@ -26,10 +26,10 @@
     "@ng-select/ng-select": "^2.16.2",
     "@ngx-translate/core": "^11.0.0",
     "@ngx-translate/http-loader": "^4.0.0",
-    "angular-highcharts": "^7.0.2",
+    "angular-highcharts": "^7.1.0",
     "bignumber.js": "^8.0.2",
     "core-js": "^2.5.4",
-    "highcharts": "^6.2.0",
+    "highcharts": "^7.0.3",
     "idlejs": "^2.0.1",
     "json-bignumber": "^1.0.1",
     "ngx-contextmenu": "^5.1.1",
@@ -42,7 +42,6 @@
     "@angular/cli": "~7.0.2",
     "@angular/compiler-cli": "^7.2.10",
     "@angular/language-service": "~7.0.0",
-    "@types/highcharts": "^5.0.34",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",

src/gui/qt-daemon/html_source/src/app/_helpers/directives/transaction-details/transaction-details.component.html

@@ -17,6 +17,13 @@
     <span class="cell label" [style.flex-basis]="sizes[2] + 'px'">{{ 'HISTORY.DETAILS.OUTPUTS' | translate }}</span>
     <span class="cell value" [style.flex-basis]="sizes[3] + 'px'" tooltip="{{outputs.join(', ')}}" placement="top" tooltipClass="table-tooltip table-tooltip-dimensions" [delay]="500" [showWhenNoOverflow]="false">{{outputs.join(', ')}}</span>
   </div>
+  <div class="row">
+    <span class="cell label" [style.flex-basis]="sizes[0] + 'px'">{{ 'HISTORY.DETAILS.PAYMENT_ID' | translate }}</span>
+    <span class="cell value" [style.flex-basis]="sizes[1] + sizes[2] + sizes[3] + 'px'"
+          tooltip="{{transaction.payment_id}}" placement="top" tooltipClass="table-tooltip comment-tooltip" [delay]="500" [showWhenNoOverflow]="false">
+      {{transaction.payment_id}}
+    </span>
+  </div>
   <div class="row">
     <span class="cell label" [style.flex-basis]="sizes[0] + 'px'">{{ 'HISTORY.DETAILS.COMMENT' | translate }}</span>
     <span class="cell value" [style.flex-basis]="sizes[1] + sizes[2] + sizes[3] + 'px'"

src/gui/qt-daemon/html_source/src/app/app.module.ts

@@ -28,7 +28,7 @@ import { TypingMessageComponent } from './typing-message/typing-message.componen
 import { StakingComponent } from './staking/staking.component';
 
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -46,24 +46,31 @@ import { StakingSwitchComponent } from './_helpers/directives/staking-switch/sta
 import { ModalContainerComponent } from './_helpers/directives/modal-container/modal-container.component';
 import { TransactionDetailsComponent } from './_helpers/directives/transaction-details/transaction-details.component';
 import { ContextMenuModule } from 'ngx-contextmenu';
+import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
+import * as highcharts from 'highcharts';
+import exporting from 'highcharts/modules/exporting.src';
+import { ProgressContainerComponent } from './_helpers/directives/progress-container/progress-container.component';
+import { InputDisableSelectionDirective } from './_helpers/directives/input-disable-selection/input-disable-selection.directive';
 
 export function HttpLoaderFactory(httpClient: HttpClient) {
   return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
 }
 
 
-import { ChartModule, HIGHCHARTS_MODULES, Highcharts} from 'angular-highcharts';
-import { ProgressContainerComponent } from './_helpers/directives/progress-container/progress-container.component';
-import { InputDisableSelectionDirective } from './_helpers/directives/input-disable-selection/input-disable-selection.directive';
 // import * as more from 'highcharts/highcharts-more.src';
 // import * as exporting from 'highcharts/modules/exporting.src';
 // import * as highstock from 'highcharts/modules/stock.src';
 
-Highcharts.setOptions({
-  global: {
-    useUTC: false
-  }
-});
+export function highchartsFactory() {
+  // Default options.
+  highcharts.setOptions({
+    global: {
+      useUTC: false
+    }
+  });
+
+  return [exporting];
+}
 
 @NgModule({
   declarations: [
@@ -125,6 +132,7 @@ Highcharts.setOptions({
     ModalService,
     MoneyToIntPipe,
     IntToMoneyPipe,
+    { provide: HIGHCHARTS_MODULES, useFactory: highchartsFactory }
     // {provide: HIGHCHARTS_MODULES, useFactory: () => [ highstock, more, exporting ] }
   ],
   entryComponents: [

src/gui/qt-daemon/html_source/src/assets/i18n/en.json

@@ -286,6 +286,7 @@
     "FEE": "Fee",
     "ADDRESS": "Address",
     "DETAILS": {
+      "PAYMENT_ID": "Payment ID",
       "ID": "Transaction ID",
       "SIZE": "Transaction size",
       "SIZE_VALUE": "{{value}} bytes",