Skip to content

Commit

Permalink
UI improvements and bug fixes (#7)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
klassare authored Aug 1, 2018
1 parent 6ab1b98 commit a37288e
Show file tree
Hide file tree
Showing 56 changed files with 765 additions and 228 deletions.
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "kukai",
"version": "1.0.3",
"version": "1.1.0",
"license": "MIT",
"scripts": {
"ng": "ng",
Expand Down
24 changes: 18 additions & 6 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -71,8 +73,13 @@ import { DelegatorNamePipe } from './pipes/delegator-name.pipe';
MnemonicImportComponent,
BakeryComponent,
ActivateComponent,
MessagesComponent, // Empty

// Pipes
ErrorHandlingPipe,
DelegatorNamePipe
DelegatorNamePipe,
TruncatePipe,
TimeAgoPipe
],
imports: [
BrowserModule,
Expand All @@ -88,6 +95,7 @@ import { DelegatorNamePipe } from './pipes/delegator-name.pipe';
TabsModule.forRoot()
],
providers: [
// Services
MessageService,
WalletService,
ActivityService,
Expand All @@ -103,8 +111,12 @@ import { DelegatorNamePipe } from './pipes/delegator-name.pipe';
ExportService,
DelegateService,
TzscanService,

// Pipes
ErrorHandlingPipe,
DelegatorNamePipe
DelegatorNamePipe,
TruncatePipe,
TimeAgoPipe
],
bootstrap: [AppComponent]
})
Expand Down
2 changes: 2 additions & 0 deletions src/app/components/account/account.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@ <h1 class="page-header">Account</h1>
<span *ngIf="balanceUSD > 0">(${{ balanceUSD | number:'1.00'}} USD)</span>
</div>
</div>

<div class="row">
<app-activity [activePkh]="activePkh"></app-activity>
</div>
</div>

<div class="container" *ngIf="!this.walletService.wallet">
<div class="row bottom-separator-no-account">
<div class="col-lg-12">
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/account/account.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

.min-width {
min-width: 394px !important;
min-width: 825px !important;
}

/* Responsive breakpoints */
Expand Down
6 changes: 2 additions & 4 deletions src/app/components/account/account.component.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { WalletService } from '../../services/wallet.service';
import { MessageService } from '../../services/message.service';
import { BalanceService } from '../../services/balance.service';

import { CoordinatorService } from '../../services/coordinator.service';

@Component({
Expand All @@ -16,7 +15,6 @@ export class AccountComponent implements OnInit {
activePkh: string;
constructor(
public walletService: WalletService,
private messageService: MessageService,
private coordinatorService: CoordinatorService
) { }

Expand Down
1 change: 1 addition & 0 deletions src/app/components/activate/activate.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';

import { MessageService } from '../../services/message.service';
import { OperationService } from '../../services/operation.service';

Expand Down
93 changes: 69 additions & 24 deletions src/app/components/activity/activity.component.html
Original file line number Diff line number Diff line change
@@ -1,36 +1,81 @@
<div *ngIf='accounts'>
<table class="table table-striped">
<thead>
<tr>
<th>Timestamp</th>
<th>Type</th>
<th>Amount (&#42793;)</th>
<th>Status</th>
</tr>
</thead>
<ng-container *ngFor="let aData of accounts">
<ng-container *ngIf="aData.pkh === activePkh">
<tbody *ngFor="let transaction of aData.activities">
<ng-container *ngFor="let account of accounts">
<ng-container *ngIf="account.pkh === activePkh && account.activities.length > 0">
<table class="table table-striped">
<thead>
<tr>
<td>{{ transaction.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</td>
<!-- <td>{{ transaction.source }}</td>
<td>{{ transaction.destination }}</td> -->
<td>{{ transaction.type }}</td>
<td>
<ng-container *ngIf="transaction.amount">{{ transaction.amount / 1000000 | number:'1.0' }} &#42793;
<th scope="col">Txn Hash</th>
<th scope="col">Block</th>
<th scope="col">Date</th>
<th scope="col">Type</th>
<th scope="col">Counterparty</th> <!-- To or From -->
<th scope="col">Amount (&#42793;)</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody *ngFor="let transaction of account.activities">
<tr class="table-row">
<!-- Txn Hash -->
<th scope="row" class="row-hash table-cell">
<span data-toggle="tooltip" [title]="transaction.hash">
<a href="{{ CONSTANTS.NET.BLOCK_EXPLORER_URL + transaction.hash }}" target="_blank"> {{ transaction.hash | truncate: '4':'true'}} </a>
</span>
</th>

<!-- Block -->
<td class="table-cell">
<span data-toggle="tooltip" [title]="transaction.block">
<a href="{{ CONSTANTS.NET.BLOCK_EXPLORER_URL + transaction.block }}" target="_blank"> {{ transaction.block | truncate: '4':'true'}} </a>
</span>
</td>

<!-- Date -->
<td class="table-cell">
<!-- {{ transaction.timestamp | date:'yyyy-MM-dd HH:mm:ss' }} -->
<span data-toggle="tooltip" [title]="transaction.timestamp | date:'yyyy-MM-dd HH:mm:ss'">
{{ transaction.timestamp | timeAgo }}
</span>
</td>

<!-- Type -->
<td class="table-cell">
<span class = "transaction badge badge-secondary" [ngClass]="{'received' : getType(transaction) == 'received', 'sent' : getType(transaction) == 'sent'}"> {{ getType(transaction) }} </span>
</td>

<!-- Counterparty: `To` or `From` -->
<td class="table-cell">
<!-- {{ transaction.source.tz }} -->
<span *ngIf="transaction.type != 'activation'">
<span *ngIf="activePkh === transaction.source;then to else from"> From </span>
<ng-template #from><span class="smallText">from</span></ng-template>
<ng-template #to><span class="smallText">to</span></ng-template>
</span>
<br>
<span class="counterparty">
{{ getCounterparty(transaction) }}
</span>
</td>

<!-- Amount -->
<td class="amount table-cell">
<ng-container *ngIf="transaction.amount">
{{ transaction.amount / 1000000 | number:'1.0' }} &#42793;
</ng-container>
</td>
<!-- <td>{{ transaction.fee / 100 }}</td> -->
<td>
<a href="https://tzscan.io/{{transaction.hash}}" target="_blank">{{ getStatus(transaction) }}</a>

<!-- Status -->
<td class="amount table-cell">
<a href="{{ CONSTANTS.NET.BLOCK_EXPLORER_URL + transaction.hash }}" target="_blank">{{ getStatus(transaction) }}</a>
</td>
</tr>
</tbody>
</ng-container>
</table>
</ng-container>
</table>
</ng-container>
</div>

<p *ngIf='!accounts'>
Wallet not configured!
</p>
</p>

<!-- Type of operations: activation, transfers, delegation, origination --- endorsements, baking, rewards -->
34 changes: 34 additions & 0 deletions src/app/components/activity/activity.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
77 changes: 55 additions & 22 deletions src/app/components/activity/activity.component.ts
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
2 changes: 1 addition & 1 deletion src/app/components/backup/backup.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ <h3>2. Export View-only Wallet to file</h3>
</div>
<form class="form-inline">
<label class="sr-only" for="inlineFormInputPassword3">Password</label>
<input type="password" class="form-control mb-2 mr-sm-2" [(ngModel)]="pwd2" name="pwd2" placeholder="{{ pwdType }}" aria-describedby="passwordHelpInline">
<input type="password" class="form-control mb-2 mr-sm-2" [(ngModel)]="pwd2" name="pwd2" placeholder="Password" aria-describedby="passwordHelpInline">
<button type="submit" id="pkDecrypt" class="btn btn-clear btn-second mb-2 mr-sm-2" [class.wait]="wait === 1" (click)="decryptPk()">Generate</button>
<small *ngIf="pk">
{{ pk }}
Expand Down
1 change: 1 addition & 0 deletions src/app/components/backup/backup.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Component, OnInit, OnDestroy, Input } from '@angular/core';

import { WalletService } from '../../services/wallet.service';
import { ExportService } from '../../services/export.service';
import { MessageService } from '../../services/message.service';
Expand Down
3 changes: 2 additions & 1 deletion src/app/components/bakery/bakery.component.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Component, OnInit } from '@angular/core';

import { WalletService } from '../../services/wallet.service';
import { MessageService } from '../../services/message.service';
import { ActivityService } from '../../services/activity.service';
import { Account, Balance, Activity } from '../../interfaces';

import { DelegatorNamePipe } from '../../pipes/delegator-name.pipe';


Expand Down
Loading

0 comments on commit a37288e

Please sign in to comment.