From a37288ee5dc468c59fbfe74c6479e2d9018a4f1f Mon Sep 17 00:00:00 2001 From: Klas <31806893+klassare@users.noreply.github.com> Date: Wed, 1 Aug 2018 21:12:44 +0200 Subject: [PATCH] UI improvements and bug fixes (#7) * offline signing option * decode signed operation hash UI * fix new data structure * update api for operations * Account table re-adjusted * set up zeronet * minor changes * delegator pipe update * truncatePipe * time-ago pipe * tooltips for app-activity * add class for constants * switch to betanet * update betanet chain_id * ActivityComponent revamped * fix signed decoding * move online signing warning * tweak row padding * minor UI fix * minor fix * small change buttons * context-menu for electron * fix TypeError at Menu.popup * allow to unset delegate in integrity check * code cleanup * change walletService to public in home-page * delegate UI fix * minor text changes * minor spelling * spelling * fix account import bug * update to betanet --- package-lock.json | 2 +- package.json | 2 +- src/app/app.module.ts | 24 +++-- .../components/account/account.component.html | 2 + .../components/account/account.component.scss | 2 +- .../components/account/account.component.ts | 6 +- .../components/activate/activate.component.ts | 1 + .../activity/activity.component.html | 93 ++++++++++++++----- .../activity/activity.component.scss | 34 +++++++ .../components/activity/activity.component.ts | 77 ++++++++++----- .../components/backup/backup.component.html | 2 +- src/app/components/backup/backup.component.ts | 1 + src/app/components/bakery/bakery.component.ts | 3 +- .../delegate/delegate.component.html | 14 ++- .../delegate/delegate.component.scss | 8 ++ .../components/delegate/delegate.component.ts | 10 +- .../home-page/home-page.component.html | 4 +- .../home-page/home-page.component.scss | 14 ++- .../home-page/home-page.component.ts | 23 +++-- .../components/import/import.component.html | 4 +- src/app/components/import/import.component.ts | 5 +- .../components/messages/messages.component.ts | 1 + .../mnemonic-import.component.html | 4 +- .../mnemonic-import.component.ts | 3 +- .../new-account/new-account.component.html | 27 ++++-- .../new-account/new-account.component.ts | 11 +-- .../new-wallet/new-wallet.component.html | 10 +- .../new-wallet/new-wallet.component.ts | 20 ++-- .../offline-signing.component.html | 50 +++++++--- .../offline-signing.component.scss | 13 +++ .../offline-signing.component.ts | 46 +++++++-- .../overview/overview.component.scss | 2 +- .../components/overview/overview.component.ts | 12 +-- .../components/receive/receive.component.html | 5 +- .../components/receive/receive.component.scss | 15 +++ .../components/receive/receive.component.ts | 16 ++-- src/app/components/send/send.component.html | 20 ++-- src/app/components/send/send.component.scss | 4 + src/app/components/send/send.component.ts | 24 ++--- src/app/components/start/start.component.ts | 4 +- src/app/constants.ts | 33 +++++++ src/app/pipes/delegator-name.pipe.ts | 66 ++++++++----- src/app/pipes/time-ago.pipe.spec.ts | 8 ++ src/app/pipes/time-ago.pipe.ts | 91 ++++++++++++++++++ src/app/pipes/truncate.pipe.spec.ts | 8 ++ src/app/pipes/truncate.pipe.ts | 22 +++++ src/app/services/encryption.service.ts | 3 +- src/app/services/export.service.ts | 5 +- src/app/services/import.service.ts | 10 +- src/app/services/operation.service.ts | 12 ++- src/app/services/tzrate.service.ts | 6 +- src/app/services/tzscan.service.ts | 5 +- src/app/services/wallet.service.ts | 10 +- src/electron/contextMenu.js | 66 +++++++++++++ src/electron/main.js | 28 +++++- src/electron/package.json | 2 +- 56 files changed, 765 insertions(+), 228 deletions(-) create mode 100644 src/app/constants.ts create mode 100644 src/app/pipes/time-ago.pipe.spec.ts create mode 100644 src/app/pipes/time-ago.pipe.ts create mode 100644 src/app/pipes/truncate.pipe.spec.ts create mode 100644 src/app/pipes/truncate.pipe.ts create mode 100644 src/electron/contextMenu.js diff --git a/package-lock.json b/package-lock.json index dffd11a27..7ee716777 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "kukai", - "version": "0.1.0", + "version": "1.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 0ea557f75..081376263 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kukai", - "version": "1.0.3", + "version": "1.1.0", "license": "MIT", "scripts": { "ng": "ng", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1f32d87f8..e7513fa7c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,7 +13,6 @@ import { ModalModule, AlertModule, ProgressbarModule, ButtonsModule, BsDropdownM import { AppComponent } from './app.component'; // Services -import { MessagesComponent } from './components/messages/messages.component'; import { MessageService } from './services/message.service'; import { WalletService } from './services/wallet.service'; import { ActivityService } from './services/activity.service'; @@ -45,18 +44,21 @@ import { CoordinatorService } from './services/coordinator.service'; import { OperationService } from './services/operation.service'; import { BakeryComponent } from './components/bakery/bakery.component'; import { ActivateComponent } from './components/activate/activate.component'; +import { MessagesComponent } from './components/messages/messages.component'; // Empty // Pipes import { ErrorHandlingPipe } from './pipes/error-handling.pipe'; import { DelegatorNamePipe } from './pipes/delegator-name.pipe'; - +import { TruncatePipe } from './pipes/truncate.pipe'; +import { TimeAgoPipe } from './pipes/time-ago.pipe'; @NgModule({ declarations: [ + AppComponent, + + // View components HomePageComponent, NewWalletComponent, - MessagesComponent, - AppComponent, OfflineSigningComponent, ImportComponent, StartComponent, @@ -71,8 +73,13 @@ import { DelegatorNamePipe } from './pipes/delegator-name.pipe'; MnemonicImportComponent, BakeryComponent, ActivateComponent, + MessagesComponent, // Empty + + // Pipes ErrorHandlingPipe, - DelegatorNamePipe + DelegatorNamePipe, + TruncatePipe, + TimeAgoPipe ], imports: [ BrowserModule, @@ -88,6 +95,7 @@ import { DelegatorNamePipe } from './pipes/delegator-name.pipe'; TabsModule.forRoot() ], providers: [ + // Services MessageService, WalletService, ActivityService, @@ -103,8 +111,12 @@ import { DelegatorNamePipe } from './pipes/delegator-name.pipe'; ExportService, DelegateService, TzscanService, + + // Pipes ErrorHandlingPipe, - DelegatorNamePipe + DelegatorNamePipe, + TruncatePipe, + TimeAgoPipe ], bootstrap: [AppComponent] }) diff --git a/src/app/components/account/account.component.html b/src/app/components/account/account.component.html index ec8448a08..7733d80fe 100644 --- a/src/app/components/account/account.component.html +++ b/src/app/components/account/account.component.html @@ -17,10 +17,12 @@
Timestamp | -Type | -Amount (ꜩ) | -Status | -
---|
{{ transaction.timestamp | date:'yyyy-MM-dd HH:mm:ss' }} | - -{{ transaction.type }} | -
- Txn Hash |
+ Block |
+ Date |
+ Type |
+ Counterparty |
+ Amount (ꜩ) |
+ Status |
+ |
+ + {{ transaction.hash | truncate: '4':'true'}} + + | + + ++ + {{ transaction.block | truncate: '4':'true'}} + + | + + ++ + + {{ transaction.timestamp | timeAgo }} + + | + + ++ {{ getType(transaction) }} + | + + +
+
+
+ From
+ + + {{ getCounterparty(transaction) }} + + |
+
+
+
+ |
-
- - {{ getStatus(transaction) }} + + + | + {{ getStatus(transaction) }} |
---|
Wallet not configured! -
\ No newline at end of file + + + \ No newline at end of file diff --git a/src/app/components/activity/activity.component.scss b/src/app/components/activity/activity.component.scss index d3d52363b..022214e48 100644 --- a/src/app/components/activity/activity.component.scss +++ b/src/app/components/activity/activity.component.scss @@ -12,6 +12,40 @@ .mono { font-family: "Courier New", Courier, monospace; } + +.table-row { + line-height: 1.2; //original at 1.5 +} +.table-cell { + vertical-align: middle; + padding: 10px; +} + +.row-hash { + font-weight: normal; +} +.transaction { + //font-weight: bold; +} + +.counterparty { + //word-wrap: break-word; +} + +.received { + background-color: #5cb85c; // rgb(0, 110, 9); +} + +.sent { + background-color: rgb(221, 21, 21); +} + +.amount { + text-align: right; +} +.smallText { + font-size: 80%; +} @media(min-width:768px) { #page-wrapper { position: inherit; diff --git a/src/app/components/activity/activity.component.ts b/src/app/components/activity/activity.component.ts index 22b1b7800..c016de234 100644 --- a/src/app/components/activity/activity.component.ts +++ b/src/app/components/activity/activity.component.ts @@ -1,31 +1,64 @@ import { Component, Input, OnInit, AfterViewInit, SimpleChange } from '@angular/core'; import { WalletService } from '../../services/wallet.service'; -import { MessageService } from '../../services/message.service'; +import { Constants } from '../../constants'; @Component({ - selector: 'app-activity', - templateUrl: './activity.component.html', - styleUrls: ['./activity.component.scss'] + selector: 'app-activity', + templateUrl: './activity.component.html', + styleUrls: ['./activity.component.scss'] }) export class ActivityComponent implements OnInit { - accounts = null; - @Input() activePkh: string; - constructor( - private walletService: WalletService, - private messageService: MessageService - ) { } + accounts = null; + CONSTANTS = new Constants(); + @Input() activePkh: string; + constructor( + private walletService: WalletService + ) {} - ngOnInit() { if (this.walletService.wallet) { this.init(); } } - init() { - this.accounts = this.walletService.wallet.accounts; - } - getStatus(transaction: any): string { - if (transaction.failed) { - return 'Failed'; - } else if (transaction.block === 'prevalidation') { - return 'Unconfirmed'; - } else { - return 'Confirmed'; + ngOnInit() { if (this.walletService.wallet) { this.init(); } } + init() { + this.accounts = this.walletService.wallet.accounts; + console.log('transaction', this.accounts[0].activities); + } + getStatus(transaction: any): string { + if (transaction.failed) { + return 'Failed'; + } else if (transaction.block === 'prevalidation') { + return 'Unconfirmed'; + } else { + return 'Confirmed'; + } + } + + getType(transaction: any): string { + if (transaction.type !== 'transaction') { + return transaction.type; + } else { + let operationType = ''; + if (transaction.amount > 0) { + operationType = 'received'; + } else { + operationType = 'sent'; + } + return operationType; + } + } + + getCounterparty(transaction: any): string { + console.log('transaction - getCounterparty', transaction); + let counterparty = ''; + + // Checks for delegation as destination is stored in transaction.destination.tz + if (transaction.type === 'delegation') { + return transaction.destination.tz; + } + + if (this.activePkh === transaction.source) { + counterparty = transaction.destination; // to + } else { + counterparty = transaction.source; // from + } + + return counterparty; } - } } diff --git a/src/app/components/backup/backup.component.html b/src/app/components/backup/backup.component.html index 956a63b9b..e83aeb7ba 100644 --- a/src/app/components/backup/backup.component.html +++ b/src/app/components/backup/backup.component.html @@ -44,7 +44,7 @@Your funding of a new account have successfully been broadcasted to the network
+Your delegation operation has been broadcasted successfully to the network
Your unsigned transaction have successfully been created
+Your unsigned transaction have been created successfully
on a path of self-discovery
-
{{ this.walletService.walletTypePrint() }}
- [ Betanet ]
+
{{ this.walletService.walletTypePrint() }}
+
[ {{ CONSTANTS.NET.NAME }} ]
- Track a wallet from its public key hash -
+Track a wallet from its public key hash
Your funding of a new account have successfully been broadcasted to the network
+Your funding of a new account has been broadcasted successfully to the network
Your unsigned transaction have successfully been created
+Your unsigned transaction has been created successfully
Operation failed!
{{ sendResponse.payload.msg }}
When you create a new wallet, a new Tezos seed is generated. Your Tezos seed is the master key of all your wallet and any value inside it.
Make sure to back it up, write it down, and keep it incredibly safe!
-**Do not lose it!** It cannot be recovered if you lose it.
-**Do not share it!** Your funds will be stolen if you use the seed on a malicious/phishing site.
-**Make a backup!** Secure it like the millions it may be worth one day.
+**Do not lose it!** It cannot be recovered if you lose it.
+**Do not share it!** Your funds will be stolen if you use the seed on a malicious/phishing site.
+**Make a backup!** Secure it like the millions it may be worth one day.
@@ -99,7 +99,7 @@Your public key hash: {{ getPkh() }}
Your wallet is now set up and ready to use.
-Please download your Encrypted Keystore File..
+Please download your Encrypted Keystore File.
diff --git a/src/app/components/new-wallet/new-wallet.component.ts b/src/app/components/new-wallet/new-wallet.component.ts index fd688a2d8..f1e541eae 100644 --- a/src/app/components/new-wallet/new-wallet.component.ts +++ b/src/app/components/new-wallet/new-wallet.component.ts @@ -1,13 +1,14 @@ -import { Component, OnInit, Input, Query, HostListener } from '@angular/core'; -import { WalletService } from '../../services/wallet.service'; -import { MessageService } from '../../services/message.service'; -import { ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, Input, HostListener } from '@angular/core'; + import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/fromEvent'; -import * as bip39 from 'bip39'; +import * as rnd from 'randomatic'; + +import { WalletService } from '../../services/wallet.service'; +import { MessageService } from '../../services/message.service'; import { ExportService } from '../../services/export.service'; import { ImportService } from '../../services/import.service'; -import * as rnd from 'randomatic'; + @Component({ selector: 'app-new-wallet', @@ -63,11 +64,12 @@ export class NewWalletComponent implements OnInit { console.log('Out of range'); } } - constructor(private walletService: WalletService, + constructor( + private walletService: WalletService, private messageService: MessageService, private exportService: ExportService, - private importService: ImportService, - private cdRef: ChangeDetectorRef) { } + private importService: ImportService + ) { } ngOnInit() { // rnd() only to create an offset for better visualisation. diff --git a/src/app/components/offline-signing/offline-signing.component.html b/src/app/components/offline-signing/offline-signing.component.html index 4f62ceec5..53bb37fdb 100644 --- a/src/app/components/offline-signing/offline-signing.component.html +++ b/src/app/components/offline-signing/offline-signing.component.html @@ -10,13 +10,24 @@{{ decodeOutput }}+ + Wallet appear to be online. Are you really sure you want to proceed with the signature process? + + +
{{ decodeUnsignedOutput }}