Merge pull request #7 from stratisproject/ui

Add Breeze.UI

.gitignore

@@ -238,6 +238,44 @@ ModelManifest.xml
 # Paket dependency manager
 .paket/paket.exe
 
+# UI ignores
+# compiled output
+**/dist
+**/tmp
+**/build
+
+# dependencies
+**/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+**/.sass-cache
+**/connect.lock
+**/coverage/*
+**/libpeerconnection.log
+npm-debug.log
+testem.log
+**/typings
+
+# e2e
+**/e2e/*.js
+**/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db
 
 # ORIGINAL .gitignore STARTS HERE
 

Breeze/src/Breeze.UI/.editorconfig

+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

Breeze/src/Breeze.UI/.env

+DEBUG=true
+HOST=http://localhost:4200

Breeze/src/Breeze.UI/README.md

+# Breeze-UI
+
+Graphical User Interface for Stratis Breeze Wallet.

Breeze/src/Breeze.UI/angular-cli.json

+{
+  "project": {
+    "name": "breeze-ui"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "app",
+      "styles": [
+        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "files": "src/**/*.ts",
+      "project": "src/tsconfig.json"
+    },
+    {
+      "files": "e2e/**/*.ts",
+      "project": "e2e/tsconfig.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "prefixInterfaces": false,
+    "inline": {
+      "style": false,
+      "template": false
+    },
+    "spec": {
+      "class": false,
+      "component": true,
+      "directive": true,
+      "module": false,
+      "pipe": true,
+      "service": true
+    }
+  }
+}

Breeze/src/Breeze.UI/e2e/app.e2e-spec.ts

+import { BreezeUIPage } from './app.po';
+
+describe('breeze-ui App', function() {
+  let page: BreezeUIPage;
+
+  beforeEach(() => {
+    page = new BreezeUIPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

Breeze/src/Breeze.UI/e2e/app.po.ts

+import { browser, element, by } from 'protractor';
+
+export class BreezeUIPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

Breeze/src/Breeze.UI/e2e/tsconfig.json

+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc-e2e",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}

Breeze/src/Breeze.UI/electron.js

+const electron = require('electron')
+const dotenv = require('dotenv')
+// const edge = require('electron-edge')
+// Module to control application life.
+const app = electron.app
+// Module to create native browser window.
+const BrowserWindow = electron.BrowserWindow
+
+const path = require('path')
+const url = require('url')
+
+// Require dotenv
+dotenv.config();
+if (process.env.DEBUG === 'true'){
+  // Require electron-reload for dev options
+  require('electron-reload')(__dirname);
+}
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow = null;
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({width: 1000, height: 600, frame: true, minWidth: 1000, minHeight: 600, icon: "./src/assets/images/stratis-tray.png"})
+
+  if (process.env.DEBUG === 'false'){
+    mainWindow.loadURL(url.format({
+      pathname: path.join(__dirname, 'index.html'),
+      protocol: 'file:',
+      slashes: true
+    }));
+  } else {
+    mainWindow.loadURL('http://localhost:4200');
+    // Open the DevTools.
+    mainWindow.webContents.openDevTools();
+  }
+
+  // mainWindow.loadURL(url.format({
+  //     pathname: path.join(__dirname, 'index.html'),
+  //     protocol: 'file:',
+  //     slashes: true
+  //   }));
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', function () {
+  startServer()
+  createWindow()
+  createTray()
+})
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', function () {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+function startServer() {
+  // var startServer = edge.func('./assets/dll/Wallet.WebApi.dll');
+}
+
+function createTray() {
+  //Put the app in system tray
+  const Menu = electron.Menu
+  const Tray = electron.Tray
+
+  let appIcon = null
+
+  const iconName = process.platform === 'win32' ? './src/assets/images/stratis-tray.png' : './src/assets/images/stratis-tray.png'
+  const iconPath = path.join(__dirname, iconName)
+  appIcon = new Tray(iconPath)
+  const contextMenu = Menu.buildFromTemplate([{
+    label: 'Hide/Show',
+    click: function () {
+      mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
+    }
+  }])
+  appIcon.setToolTip('Breeze Wallet')
+  appIcon.setContextMenu(contextMenu)
+
+  app.on('window-all-closed', function () {
+    if (appIcon) appIcon.destroy()
+  })
+}

Breeze/src/Breeze.UI/karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'karma-remap-istanbul']
+              : ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

Breeze/src/Breeze.UI/package.json

+{
+  "name": "breeze-ui",
+  "version": "0.1.0",
+  "description": "Graphical User Interface for the Breeze Wallet.",
+  "main": "electron.js",
+  "license": "MIT",
+  "angular-cli": {},
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --prod",
+    "test": "ng test",
+    "pree2e": "webdriver-manager update --standalone false --gecko false",
+    "e2e": "protractor",
+    "build": "ng build --prod",
+    "electron": "electron .",
+    "electron:build": "npm run electron:prepare && npm run electron:pack-win",
+    "electron:prepare": "npm run build && xcopy package.json dist && xcopy electron.js dist",
+    "electron:package": "npm run electron:prepare && npm run electron:pack-mac && npm run electron:pack-win && npm run electron:pack-linux",
+    "electron:pack-mac": "electron-packager dist --asar --overwrite --platform=darwin --arch=x64 --out=build",
+    "electron:pack-win": "electron-packager dist --asar --overwrite --platform=win32 --arch=ia32 --out=build",
+    "electron:pack-linux": "electron-packager dist --asar --overwrite --platform=linux --arch=x64 --out=build"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^4.0.0",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/platform-server": "^4.0.0",
+    "@angular/router": "^4.0.0",
+    "bootstrap": "^4.0.0-alpha.6",
+    "core-js": "^2.4.1",
+    "dotenv": "^4.0.0",
+    "electron-edge": "^6.5.4",
+    "rxjs": "^5.2.0",
+    "ts-helpers": "^1.1.2",
+    "typescript": "^2.2.2",
+    "zone.js": "^0.8.5"
+  },
+  "devDependencies": {
+    "@angular/cli": "^1.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@types/jasmine": "2.5.46",
+    "@types/node": "~7.0.12",
+    "codelyzer": "~2.0.0",
+    "dotenv": "^4.0.0",
+    "electron": "^1.6.2",
+    "electron-reload": "^1.1.0",
+    "jasmine-core": "~2.5.2",
+    "jasmine-spec-reporter": "~3.2.0",
+    "karma": "~1.5.0",
+    "karma-chrome-launcher": "~2.0.0",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.0.0",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.1",
+    "ts-node": "~3.0.2",
+    "tslint": "~4.5.1"
+  }
+}

Breeze/src/Breeze.UI/protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};

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

+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+
+export class AppRoutingModule {}

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

+<router-outlet></router-outlet>
\ No newline at end of file

Breeze/src/Breeze.UI/src/app/app.component.spec.ts

+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

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

+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+})
+
+export class AppComponent implements OnInit {
+  constructor(private router: Router) {}
+  private isConfigured: boolean = true;
+
+  private checkConfigured(){
+    if (this.isConfigured) {
+      this.router.navigateByUrl('/wallet')
+    } else {
+      this.router.navigateByUrl('/setup')
+    }
+  }
+
+  ngOnInit() {
+    this.checkConfigured();
+  }
+
+}
\ No newline at end of file

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

+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpModule } from '@angular/http';
+
+import { SetupModule } from './setup/setup.module';
+import { WalletModule } from './wallet/wallet.module';
+import { SharedModule } from './shared/shared.module';
+
+import { AppRoutingModule } from './app-routing.module';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [
+    AppRoutingModule,
+    BrowserModule,
+    HttpModule,
+    SetupModule,
+    WalletModule,
+    SharedModule.forRoot()
+  ],
+  declarations: [
+    AppComponent
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+
+export class AppModule { }
\ No newline at end of file

Breeze/src/Breeze.UI/src/app/setup/create/api.component.ts

+import { Observable } from 'rxjs/Observable';
+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../../shared/api/api.service';
+
+@Component({
+    selector: 'is-connected',
+    template: 'Wallet connected to API: {{result}}',
+})
+
+export class ApiComponent implements OnInit {
+  result: string;
+  constructor(private apiService: ApiService) {}
+  ngOnInit() {
+    this.apiService
+        .isConnected()
+        .subscribe((data: string) => this.result = data,
+        () => console.log("isConnected() complete from init"));
+
+    if (!this.result) {
+      this.result = "false"
+    }
+  }
+}

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

+<div class="content-wrapper">
+<h1>
+  Please create a new wallet.
+</h1>
+<div>
+  <is-connected></is-connected>
+</div>
+<div class="form-group">
+  <label for="name">Name:</label>
+  <input class="form-control" type="text" #walletName required>
+</div>
+<div class="form-group">
+  <label for="password">Password:</label>
+  <input class="form-control" type="password" #walletPassword required>
+</div>
+<div class="form-group">
+  <label for="networklabel">Network:</label>
+  <select name="network" #walletNetwork>
+    <option value="main">Main</option>
+    <option value="test">Testnet</option>
+  </select>
+</div>
+<div class="form-group">
+  <label for="path">Path:</label>
+  <input class="form-control" type="text" #walletPath required>
+</div>
+<button type="submit" (click)="createWallet(walletPassword.value, walletNetwork.value, walletPath.value, walletName.value)">Create</button>
+<div>
+  <label>Mnemonic:</label>
+</div>
+<div>
+  <label>{{body}}</label>
+</div>
+</div>
\ No newline at end of file

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

+import { Component, Injectable } from '@angular/core';
+
+import { ApiService } from '../../shared/api/api.service';
+
+import { SafeCreation } from '../../shared/safe-creation';
+import { Mnemonic } from '../../shared/mnemonic';
+
+@Component({
+  selector: 'create-component',
+  templateUrl: './create.component.html',
+  styleUrls: ['./create.component.css'],
+})
+
+export class CreateComponent {
+  constructor(private apiService: ApiService) {}
+
+  private newWallet: SafeCreation;
+  private body: string;
+
+  private createWallet(password: string, network: string, folderPath: string, name: string, ) {
+    this.newWallet.password = password;
+    this.newWallet.network = network;
+    this.newWallet.folderPath = folderPath;
+    this.newWallet.name = name;
+
+    this.apiService
+      .createWallet(this.newWallet)
+      //.map(res => {let body = res.text()})
+      .subscribe((response: string) => this.body = response,
+      () => console.log("createWallet() complete from init"));
+  }
+}

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

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { SetupComponent } from './setup.component';
+
+const routes: Routes = [
+  { path: 'setup', component: SetupComponent }
+];
+
+@NgModule({
+  imports: [ RouterModule.forChild(routes) ],
+  exports: [ RouterModule ]
+})
+
+export class SetupRoutingModule {}

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

+<h1>Welcome to setup</h1>
+<create-component></create-component>
\ No newline at end of file

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'setup-component',
+  templateUrl: './setup.component.html',
+  styleUrls: ['./setup.component.css'],
+})
+export class SetupComponent {
+  
+}

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

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule }   from '@angular/router';
+
+import { SetupComponent } from './setup.component';
+import { CreateComponent } from './create/create.component';
+import { ApiComponent } from './create/api.component';
+
+import { SharedModule } from '../shared/shared.module';
+
+import { SetupRoutingModule } from './setup-routing.module';
+import { ApiService } from '../shared/api/api.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    SetupRoutingModule,
+    SharedModule
+  ],
+  declarations: [
+    CreateComponent,
+    SetupComponent,
+    ApiComponent
+  ],
+  exports: [SetupComponent],
+  providers: []
+})
+
+export class SetupModule { }

Breeze/src/Breeze.UI/src/app/shared/api/api.service.ts

+import { Injectable } from '@angular/core';
+import { Http, Headers } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/toPromise';
+
+import { SafeCreation } from '../safe-creation';
+import { Mnemonic } from '../mnemonic';
+
+@Injectable()
+export class ApiService {
+    constructor(private http: Http) {};
+
+    private webApiUrl = 'http://localhost:5000/';
+    private headers = new Headers({'Content-Type': 'application/json'});
+
+    isConnected(): Observable<string> {
+      return this.http
+        .get(this.webApiUrl + 'api/safe/connected')
+        .map(data => data.json())
+    }
+
+    createWallet(data: SafeCreation): Observable<any> {
+      console.log(JSON.stringify(data));
+      return this.http
+        .post(this.webApiUrl + 'api/safe', JSON.stringify(data), {headers: this.headers})
+        .map(response => response.json());
+    }
+
+    private handleError(error: any): Promise<any> {
+      console.error('An error occurred', error); // for demo purposes only
+      return Promise.reject(error.message || error);
+    }
+}

Breeze/src/Breeze.UI/src/app/shared/mnemonic.ts

+export class Mnemonic {
+  mnemonic: string;
+}

Breeze/src/Breeze.UI/src/app/shared/safe-creation.ts

+export class SafeCreation {
+  password: string;
+  network: string;
+  folderPath: string;
+  name: string;
+}

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

+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import { ApiService} from './api/api.service';
+
+@NgModule({
+  imports: [CommonModule, RouterModule],
+  declarations: [],
+  exports: [CommonModule, FormsModule, RouterModule]
+})
+
+export class SharedModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: SharedModule,
+      providers: [ApiService]
+    };
+  }
+}
\ No newline at end of file

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

+<h1>History</h1>
\ No newline at end of file

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'history-component',
+  templateUrl: './history.component.html',
+  styleUrls: ['./history.component.css'],
+})
+
+export class HistoryComponent {
+    
+}

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

+<nav class="navbar navbar-fixed-top">
+    <div class="container">
+        <a class="navbar-brand">Breeze</a>
+        <ul class="nav navbar-nav" routerLinkActive="active">
+            <li class="nav-item"><a class="nav-link" routerLink="send">Send</a></li>
+            <li class="nav-item"><a class="nav-link" routerLink="receive">Receive</a></li>
+            <li class="nav-item"><a class="nav-link" routerLink="history">History</a></li>
+        </ul>
+    </div>
+</nav>

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.css'],
+})
+export class MenuComponent {
+
+}

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

+<div class="content-wrapper">
+    <h1>Receive</h1>
+    <div>
+        <label>Unused Receive Addresses</label>
+        <div>
+        </div>
+    </div>
+    <div>
+        <label>Used Receive Addresses</label>
+    </div>
+    <div>
+        <label>Change Addresses</label>
+    </div>
+</div>
\ No newline at end of file

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'receive-component',
+  templateUrl: './receive.component.html',
+  styleUrls: ['./receive.component.css'],
+})
+
+export class ReceiveComponent {
+  
+}
\ No newline at end of file

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

+<div class="content-wrapper">
+    <h1>Send</h1>
+    <form (ngSubmit)="onSubmit()" #sendForm="ngForm">
+      <div class="form-group">
+        <label for="toAddress">Pay To: </label>
+        <input type="text" class="form-control" id="name" required name="toAddress">
+      </div>
+      <div class="form-group">
+        <label for="amount">Amount</label>
+        <input type="text" class="form-control" id="amount" required name="amount">
+      </div>
+      <button type="submit" class="btn btn-success">Submit</button>
+    </form>
+</div>
\ No newline at end of file

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

+import { Component } from '@angular/core';
+import { ApiService } from '../../shared/api/api.service';
+
+@Component({
+  selector: 'send-component',
+  templateUrl: './send.component.html',
+  styleUrls: ['./send.component.css'],
+})
+
+export class SendComponent {
+  constructor(private apiService: ApiService) {}
+    
+}

Breeze/src/Breeze.UI/src/app/wallet/wallet-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { WalletComponent }   from './wallet.component';
+import { SendComponent } from './send/send.component';
+import { ReceiveComponent } from './receive/receive.component';
+import { HistoryComponent } from './history/history.component';
+
+const routes: Routes = [
+  { path: 'wallet', component: WalletComponent, 
+    children: [
+      { path: '', redirectTo:'send', pathMatch:'full' },
+      { path: 'send', component: SendComponent},
+      { path: 'receive', component: ReceiveComponent},
+      { path: 'history', component: HistoryComponent}
+    ]
+  },
+];
+
+@NgModule({
+  imports: [ RouterModule.forChild(routes) ],
+  exports: [ RouterModule ]
+})
+
+export class WalletRoutingModule {}

Breeze/src/Breeze.UI/src/app/wallet/wallet.component.css

+#sidepanel {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 200px;
+    position: fixed;
+    overflow: auto;
+}
+
+#content {
+    margin-left: 200px;
+}
\ No newline at end of file

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

+<div id="container">
+  <div id="sidepanel">
+    <app-menu></app-menu>
+  </div>
+  <div id="content">
+    <router-outlet></router-outlet>
+  </div>
+</div>
\ No newline at end of file

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

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'wallet-component',
+  templateUrl: './wallet.component.html',
+  styleUrls: ['./wallet.component.css'],
+})
+export class WalletComponent {
+  
+}

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

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule }   from '@angular/router';
+
+import { WalletComponent } from './wallet.component';
+import { MenuComponent } from './menu/menu.component';
+import { SendComponent } from './send/send.component';
+import { ReceiveComponent } from './receive/receive.component';
+import { HistoryComponent } from './history/history.component';
+
+import { SharedModule } from '../shared/shared.module';
+
+import { WalletRoutingModule } from './wallet-routing.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    WalletRoutingModule,
+    SharedModule
+  ],
+  declarations: [
+    WalletComponent,
+    MenuComponent,
+    ReceiveComponent,
+    SendComponent,
+    HistoryComponent,
+  ],
+  exports: [
+    WalletComponent
+  ]
+})
+
+export class WalletModule { }

Breeze/src/Breeze.UI/src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

Breeze/src/Breeze.UI/src/environments/environment.ts

+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+  production: false
+};

Breeze/src/Breeze.UI/src/index.html

+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>BreezeUI</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

Breeze/src/Breeze.UI/src/main.ts

+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from '@angular/core';
+import { environment } from './environments/environment';
+import { AppModule } from './app/app.module';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

Breeze/src/Breeze.UI/src/polyfills.ts

+// This file includes polyfills needed by Angular and is loaded before the app.
+// You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+
+// If you need to support the browsers/features below, uncomment the import
+// and run `npm install import-name-here';
+// Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+
+// Needed for: IE9
+// import 'classlist.js';
+
+// Animations
+// Needed for: All but Chrome and Firefox, Not supported in IE9
+// import 'web-animations-js';
+
+// Date, currency, decimal and percent pipes
+// Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+// import 'intl';
+
+// NgClass on SVG elements
+// Needed for: IE10, IE11
+// import 'classlist.js';

Breeze/src/Breeze.UI/src/styles.css

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

Breeze/src/Breeze.UI/src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

Breeze/src/Breeze.UI/src/tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

Breeze/src/Breeze.UI/tslint.json

+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [true, "rxjs"],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "typeof-compare": true,
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}