Merge pull request #51 from stratisproject/ui

- Show five transactions on dashboard
- Add wallet recovery option (with date picker)

Breeze.UI/package.json

@@ -33,6 +33,7 @@
     "@angular/platform-browser-dynamic": "^4.1.2",
     "@angular/platform-server": "^4.1.2",
     "@angular/router": "^4.1.2",
+    "angular2-material-datepicker": "^0.5.0",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
     "rxjs": "^5.4.0",

Breeze.UI/src/app/app.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { HttpModule } from '@angular/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { SharedModule } from './shared/shared.module';
 
@@ -18,6 +19,7 @@ import { GlobalService } from './shared/services/global.service';
   imports: [
     AppRoutingModule,
     BrowserModule,
+    BrowserAnimationsModule,
     ReactiveFormsModule,
     FormsModule,
     HttpModule,

Breeze.UI/src/app/setup/recover/recover.component.html

-<h1>Recover your wallet</h1>
-<p>
-  Welcome, please complete the form below to recover your wallet.
-</p>
-<form [formGroup]="recoverWalletForm" (ngSubmit)="onRecoverClicked()">
-  <div class="form-group">
-    <label>Mnemonic:</label>
-    <input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic.">
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <h1>Recover your wallet</h1>
+    </div>
   </div>
-  <div class="form-group">
-    <label>Wallet password: </label>
-    <input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here.">
+  <div class="row">
+    <div class="col">
+      <p>Welcome, please complete the form below to recover your wallet.</p>
+    </div>
   </div>
-  <div class="form-group">
-    <label>Name:</label>
-    <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
+  <div class="row">
+    <div class="col">
+      <form [formGroup]="recoverWalletForm" (ngSubmit)="onRecoverClicked()">
+        <div class="form-group">
+          <label>Mnemonic:</label>
+          <input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic.">
+        </div>
+        <div class="form-group">
+          <label>Wallet password: </label>
+          <input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here.">
+        </div>
+        <div class="form-group">
+          <label>Name:</label>
+          <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
+        </div>
+        <div class="form-group">
+          <label>Network:</label>
+          <select name="network" formControlName="selectNetwork">
+            <option value="main">Main</option>
+            <option value="test">Testnet</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Creation date:</label>
+          <material-datepicker [(date)]="creationDate"></material-datepicker>
+        </div>
+        <div class="form-group">
+          <button type="submit" [disabled]="!recoverWalletForm.valid" class="btn btn-success">Recover Wallet</button>
+        </div>
+        <div class="form-group">
+          <button type="button" class="btn btn-success" (click)="onBackClicked()">Back</button>
+        </div>
+      </form>
+    </div>
   </div>
-  <div class="form-group">
-    <label>Network:</label>
-    <select name="network" formControlName="selectNetwork">
-      <option value="main">Main</option>
-      <option value="test">Testnet</option>
-    </select>
-  </div>
-  <div class="form-group">
-    <button type="submit" [disabled]="!recoverWalletForm.valid" class="btn btn-success">Recover Wallet</button>
-  </div>
-  <div class="form-group">
-    <button type="button" class="btn btn-success" (click)="onBackClicked()">Back</button>
-  </div>
-</form>
+</div>

Breeze.UI/src/app/setup/recover/recover.component.ts

@@ -24,6 +24,7 @@ export class RecoverComponent implements OnInit {
   }
 
   private recoverWalletForm: FormGroup;
+  private creationDate: Date;
   private walletRecovery: WalletRecovery;
 
   private responseMessage: string;
@@ -42,7 +43,8 @@ export class RecoverComponent implements OnInit {
       this.recoverWalletForm.get("walletPassword").value,
       this.recoverWalletForm.get("selectNetwork").value,
       this.globalService.getWalletPath(),
-      this.recoverWalletForm.get("walletName").value
+      this.recoverWalletForm.get("walletName").value,
+      this.creationDate
       );
     this.recoverWallet(this.walletRecovery);
   }

Breeze.UI/src/app/setup/setup.module.ts

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { DatepickerModule } from 'angular2-material-datepicker'
 
 import { SetupComponent } from './setup.component';
 import { CreateComponent } from './create/create.component';
@@ -13,6 +14,7 @@ import { RecoverComponent } from './recover/recover.component';
 @NgModule({
   imports: [
     CommonModule,
+    DatepickerModule,
     ReactiveFormsModule,
     SetupRoutingModule,
     SharedModule.forRoot()

Breeze.UI/src/app/shared/classes/wallet-recovery.ts

 export class WalletRecovery {
 
-  constructor(mnemonic: string, password: string, network:string, folderPath: string, name: string) {
+  constructor(mnemonic: string, password: string, network:string, folderPath: string, walletName: string, creationDate: Date) {
     this.mnemonic = mnemonic;
     this.password = password;
     this.network = network;
     this.folderPath = folderPath;
-    this.name = name;
+    this.name = walletName;
+    this.creationDate = creationDate;
   }
 
   mnemonic: string;
@@ -13,4 +14,5 @@ export class WalletRecovery {
   folderPath: string;
   name: string;
   network: string;
+  creationDate: Date;
 }

Breeze.UI/src/app/wallet/dashboard/dashboard.component.html

@@ -8,6 +8,12 @@
       <div>Current Value</div>
       <div>Over 9000</div>
     </div>
+    <div class="col">
+      <div>
+        <button (click)="openSendDialog()" class="btn">SEND</button>
+        <button (click)="openReceiveDialog()" class="btn">RECEIVE</button>
+      </div>
+    </div>
   </div>
   <div class="row">
     <div class="col">
@@ -20,17 +26,15 @@
           <th>Transaction ID</th>
         </thead>
         <tr *ngFor="let transaction of transactions; let i=index">
-          <div *ngIf="i<5">
-            <!--<td *ngIf="{{ transaction.amount }} < 0; else received">SENT</td>
-            <td #received>RECEIVED</td>-->
-            <td>{{ transaction.timestamp }}</td>
-            <td>{{ transaction.amount }}</td>
-            <td>{{ transaction.confirmed }}</td>
-            <td>{{ transaction.txId }}</td>
-          </div>
+            <!--<td *ngIf="{{ transaction.amount }} < 0">SENT</td>
+            <td *ngIf="{{ transaction.amount }} > 0">RECEIVED</td>-->
+            <td *ngIf="i<5">{{ transaction.timestamp }}</td>
+            <td *ngIf="i<5">{{ transaction.amount }}</td>
+            <td *ngIf="i<5">{{ transaction.confirmed }}</td>
+            <td *ngIf="i<5">{{ transaction.txId }}</td>
         </tr>
       </table>
-    <ng-template #noTransactions>Looks like you haven't had any transactions yet</ng-template>
+    <ng-template #noTransactions>Looks like you haven't made any transactions yet</ng-template>
     </div>
   </div>
 </div>

Breeze.UI/src/app/wallet/dashboard/dashboard.component.ts

@@ -23,6 +23,14 @@ export class DashboardComponent {
       this.getHistory();
   };
 
+  private openSendDialog() {
+
+  };
+
+  private openReceiveDialog() {
+
+  };
+
   private getWalletBalance() {
     let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
     this.apiService.getWalletBalance(walletInfo)

Breeze.UI/src/electron.js

@@ -14,7 +14,7 @@ let mainWindow = null;
 
 function createWindow () {
   // Create the browser window.
-  mainWindow = new BrowserWindow({width: 1000, height: 600, frame: true, minWidth: 1000, minHeight: 600, icon: "./assets/images/stratis-tray.png"})
+  mainWindow = new BrowserWindow({width: 1200, height: 700, frame: true, minWidth: 1200, minHeight: 700, icon: "./assets/images/stratis-tray.png"})
 
   // and load the index.html of the app.
   mainWindow.loadURL(url.format({

Breeze.UI/src/electron.live.js

@@ -15,7 +15,7 @@ let mainWindow = null;
 function createWindow () {
   setTimeout(() => {
     // Create the browser window.
-    mainWindow = new BrowserWindow({width: 1000, height: 600, frame: true, minWidth: 1000, minHeight: 600, icon: "./src/assets/images/stratis-tray.png"})
+    mainWindow = new BrowserWindow({width: 1200, height: 700, frame: true, minWidth: 1200, minHeight: 700, icon: "./src/assets/images/stratis-tray.png"})
 
     mainWindow.loadURL(url.format({
         pathname: 'localhost:4200',

Breeze.UI/src/index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>Breeze</title>
   <base href="./">
+  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>

Breeze.UI/src/styles.css

 /* You can add global styles to this file, and also import other style files */
+
+* {
+  font-family: "Lato";
+}
+
 .content-wrapper {
     width: 100%;
     height: 100%;
-}
\ No newline at end of file
+}