diff --git a/.angular-cli.json b/.angular-cli.json index 20a8bec04..541bcce7c 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -19,10 +19,10 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ - "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.min.css", "../node_modules/open-sans-all/css/open-sans.min.css", - "styles.scss" + "styles.scss", + "assets/theme.scss" ], "scripts": [ ], diff --git a/.editorconfig b/.editorconfig index 6e87a003d..3d2cbe21e 100644 --- a/.editorconfig +++ b/.editorconfig @@ -11,3 +11,11 @@ trim_trailing_whitespace = true [*.md] max_line_length = off trim_trailing_whitespace = false + + +[*.scss] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/main.js b/main.js index d2724e10d..22a038928 100644 --- a/main.js +++ b/main.js @@ -172,11 +172,7 @@ function makeTray() { // Set the tray icon tray.setToolTip('Particl ' + app.getVersion()); tray.setContextMenu(contextMenu) - - // Always show window when tray icon clicked - tray.on('click',function() { - mainWindow.show() - }); + return trayImage; } diff --git a/modules/rpc/daemon.js b/modules/rpc/daemon.js index 690f64084..eeefd61ad 100644 --- a/modules/rpc/daemon.js +++ b/modules/rpc/daemon.js @@ -28,8 +28,8 @@ function init(callback) { function startDaemon(restart, callback) { if (restart && daemon) { if (daemon.exitCode !== 0) { - setTimeout(() => startDaemon(restart, callback), 100); - return; + setTimeout(() => startDaemon(restart, callback), 200); + return false; } } @@ -40,22 +40,40 @@ function startDaemon(restart, callback) { waitForDaemon(callback); } }).catch(error => log.error(error)); + + return true; } function waitForDaemon(callback) { const maxRetries = 10; // Some slow computers... let retries = 0; + let errorString = ''; const daemonStartup = () => { rpc.checkDaemon(options) .then(callback) - .catch(() => retries < maxRetries && setTimeout(daemonStartup, 1000)); + .catch(() => !daemon.exitCode && retries < maxRetries && setTimeout(daemonStartup, 1000)); retries++; + if (daemon.exitCode || retries >= maxRetries) { - console.log(daemon.exitCode, retries); + // Rebuild block and transaction indexes + if (errorString.includes('-reindex')) { + log.info('Corrupted block database detected, ' + + 'restarting the daemon with the -reindex flag.'); + process.argv.push('-reindex'); + daemon.exitCode = 0; // Hack a bit here... + // We don't want it to exit at this stage if start was called.. + // it will probably error again if it has to. + if(startDaemon(true, callback)) { + return; + } + } electron.app.exit(991); } } if (daemon && !daemon.exitCode) { + daemon.stderr.on('data', data => { + errorString = data.toString('utf8'); + }); setTimeout(daemonStartup, 1000); } } diff --git a/modules/rpc/rpc.js b/modules/rpc/rpc.js index 8b93b11cd..1b24f9843 100644 --- a/modules/rpc/rpc.js +++ b/modules/rpc/rpc.js @@ -6,7 +6,7 @@ const rxIpc = require('rx-ipc-electron/lib/main').default; const cookie = require('./cookie'); const daemon = require('./daemon'); -let TIMEOUT = 10000; +let TIMEOUT = 15000; let HOSTNAME; let PORT; let rpcOptions; @@ -122,7 +122,7 @@ function init(options) { function checkDaemon(options) { return new Promise((resolve, reject) => { const _timeout = TIMEOUT; - TIMEOUT = 200; + TIMEOUT = 150; rpcCall( 'getnetworkinfo', null, cookie.getAuth(options), (error, response) => { rxIpc.removeListeners(); diff --git a/package.json b/package.json index 878cb67ae..6cb0f0515 100644 --- a/package.json +++ b/package.json @@ -82,11 +82,14 @@ }, "dependencies": { "@angular/animations": "^4.4.6", + "@angular/cdk": "2.0.0-beta.9", "@angular/common": "^4.4.6", "@angular/compiler": "^4.4.6", "@angular/core": "^4.4.6", + "@angular/flex-layout": "^2.0.0-beta.9", "@angular/forms": "^4.4.6", "@angular/http": "^4.4.6", + "@angular/material": "2.0.0-beta.9", "@angular/platform-browser": "^4.4.6", "@angular/platform-browser-dynamic": "^4.4.6", "@angular/router": "^4.4.6", @@ -98,7 +101,11 @@ "electron-log": "^2.2.10", "font-awesome": "^4.7.0", "got": "^7.1.0", + "hammerjs": "^2.0.8", "lodash": "^4.17.4", + "lodash.get": "^4.4.2", + "lodash.isempty": "^4.4.0", + "lodash.values": "^4.3.0", "ng2-logger": "^1.0.3", "ngx-bootstrap": "^1.8.0", "ngx-clipboard": "^8.0.3", diff --git a/src/app/app.component.controls.scss b/src/app/app.component.controls.scss index e5c65bb31..e77f2c0ac 100644 --- a/src/app/app.component.controls.scss +++ b/src/app/app.component.controls.scss @@ -1,3 +1,5 @@ +@import "./src/assets/_config"; // import shared colors etc. + :host /deep/ { button.control { border: 0; diff --git a/src/app/app.component.html b/src/app/app.component.html index 819d5bd88..cfe53a816 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,91 +1,114 @@ - + + - - -
- - + -
-
- - - - - Overview - - - - - - Wallet - - - -
- - - Receive - - - - Send - - - - History - - - - Address Book - - - - Add account - - - - - + + - + + + + Wallet - -
- - - {{ title }} -
-
- + + + + + + Receive + + + + + + Send + + + + + + History + + + + + + Address Book + + + + + + Add Acount + + + + + + + + + + + + Settings + + + + + + + Settings + + + + + + + + + + + + error + {{daemonError}} + + + error + {{walletError}} + + + + + + + + + {{ title }} +
+
+ +
- + - +
+ +
- - - + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 7791dafdc..55532b556 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,144 +1,73 @@ +@import "./src/assets/_config"; // import shared colors etc. + + +// ----------- GENERAL ----------- // + .center-vertical { position: relative; top: 50%; transform: translateY(-50%); } -.logo { - display: inline-block; - background-image: url("../assets/particl-logo.svg"); - background-repeat: no-repeat; - background-position: 0 0; - background-size: 120px 50px; - height: 50px; - width: 120px; -} -sidebar[position="left"] { - & { - background-color: #222828; - padding-left: 20px; - padding-right: 20px; - } - .full-width { - margin-left: -20px; - margin-right: -20px; +.mat-expansion-panel { // accordion submenu + border-bottom: 1px solid #15191A; + box-shadow: 0 1px 0 #333 !important; + .mat-expansion-panel-header { // submenu toggle + font-family: $font; + font-size: 11.5px; + color: #646869; + text-transform: uppercase; + padding: 0 24px 0 38px; } - hr { - @extend .full-width; - margin-top: 0; - margin-bottom: 0; - padding: 0; - border-top: 1px solid #191D1F; - border-bottom: 1px solid #272B2B; + .sidesubmenu { // submenu content + padding-top: 0; } - .header { - & { - @extend .full-width; - height: 100px; - text-align: center; - transform-style: preserve-3d; - } - .logo { - @extend .center-vertical; - } - .toggle-pinned { - cursor: pointer; - position: absolute; - top: 10px; - right: 20px; - color: #595D5E; - } +} + + +.mat-list { // menu item (whole) + .mat-list-item { + padding: 0 24px; } - .menu { - .item { - display: block; - text-decoration: none; - margin-left: -20px; - margin-right: -20px; - padding: 15px 20px; - color: #FFF; - text-transform: uppercase; - font-size: 11px; - font-weight: bold; - } - .icon { - color: #595D5E; - padding: 0 10px 0 10px; - } - .category { - & { - @extend .item; - color: #595D5E; - } - .icon { - padding: 0 0 0 10px; - float: right; - color: #00E8AF; - transition: all .2s ease; - } - .icon.collapsed { - transform: rotate(90deg); - } - } - .item.active .icon { - color: #00E8AF; - } + .mat-icon { // all icons in menu + margin: 8px 10px 0 0; + color: #4B4A4F; } - &.docked { - .header { - & { - text-align: right; - } - .logo { - width: 50px; - margin-right: 10px; - } - .toggle-pinned { - display: none; - } - } - .menu { - .icon, .category .icon { - float: right; - padding: 0 10px; - } - } + .menu-item { // menu-item (name only) + font-family: $font; + font-size: 11.5px; + font-weight: 600; + color: white; } } -sidebar[position="top"] { - & { - background-color: #FFF; - border-bottom: 1px solid #F2F2F2; - box-shadow: 0 0 1px #F2F2F2; - padding: 0 15px; - transform-style: preserve-3d; - } - .header { - & { - position: relative; - top: 50%; - transform: translateY(-50%); - color: #000; - text-transform: uppercase; - font-size: 12px; - } - a { - text-decoration: none; - color: inherit; - } - .icon { - vertical-align: middle; - } - * + * { - margin-left: 10px; - } - .toggle-menu { - cursor: pointer; - } +.mat-divider { // section divider + border-bottom: 1px solid #333; + border-top: 1px solid #15191A; +} + + +// ----------- SPECIFIC ----------- // + +.mat-sidenav { // nav container + width: 250px; + background-color: #222828; + color: #fff; + .mat-toolbar { + background: transparent; } } +.logo { + display: inline-block; + background-image: url("../assets/particl-logo.svg"); + background-repeat: no-repeat; + background-position: 0 0; + background-size: 144px 60px; + height: 60px; + width: 144px; +} + /deep/ .verify-sucess { color: #4F8A10; background-color: #DFF2BF !important; diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 657749fb4..cf71faa5c 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -53,11 +53,11 @@ let component: AppComponent; })); */ it('should get isCollapsed', () => { - expect(component.isCollapsed).toBe(true); + expect(component.isCollapsed).toBeTruthy() }); it('should get isFixed', () => { - expect(component.isFixed).toBe(false); + expect(component.isFixed).toBeFalsy(); }); it('should get log', () => { diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 1d48f1a9b..5a02ca02f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,13 +1,19 @@ import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; import { Log } from 'ng2-logger'; +import { MdDialog, MdIconRegistry } from '@angular/material'; import { WindowService } from './core/window.service'; import { SettingsService } from './settings/settings.service'; +import { RPCService } from './core/rpc/rpc.service'; import { ModalsService } from './modals/modals.service'; +// Syncing example +import { BlockStatusService } from './core/rpc/blockstatus.service'; +import { ModalsComponent } from './modals/modals.component'; + @Component({ selector: 'app-root', templateUrl: './app.component.html', @@ -21,14 +27,23 @@ export class AppComponent implements OnInit { isFixed: boolean = false; title: string = ''; log: any = Log.create('app.component'); - + walletInitialized: boolean = false; + daemonRunning: boolean = false; + daemonError: string = ''; + walletError: string = ''; constructor( private _router: Router, private _route: ActivatedRoute, public window: WindowService, - // Modal example - private _modalsService: ModalsService + private _rpc: RPCService, + private _modalsService: ModalsService, + private dialog: MdDialog, + private iconRegistry: MdIconRegistry ) { + + iconRegistry + .registerFontClassAlias('ncIcon', 'nc-icon') + .registerFontClassAlias('faIcon', 'fa'); } ngOnInit() { @@ -51,10 +66,23 @@ export class AppComponent implements OnInit { this.log.w('warn!'); this.log.i('info'); this.log.d('debug'); + + this._rpc.modalUpdates.asObservable().subscribe(status => { + this.daemonRunning = !status.error; + this.daemonError = this.daemonRunning ? '' : 'Connection Refused, Daemon is not connected'; + }); + + this._rpc.state.observe('walletInitialized') + .subscribe( + status => { + this.walletInitialized = status; + this.walletError = status ? '' : 'Please create wallet first to access other tabs'; + }); } createWallet() { + // this.dialog.open(ModalsComponent, {disableClose: true, width: '100%', height: '100%'}); this._modalsService.open('createWallet', {forceOpen: true}); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6e9f303ff..cd195e5fc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,9 +1,17 @@ import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule, Routes } from '@angular/router'; -import { BsDropdownModule, CollapseModule, ModalModule, ModalDirective, PaginationModule, TooltipModule } from 'ngx-bootstrap'; +import { + MdButtonModule, MdCardModule, MdCheckboxModule, MdExpansionModule, MdGridListModule, MdIconModule, MdListModule, + MdMenuModule, + MdProgressBarModule, + MdSidenavModule, + MdSnackBarModule, MdTabsModule, MdToolbarModule, + MdTooltipModule +} from '@angular/material'; +import { FlexLayoutModule } from '@angular/flex-layout'; import { SharedModule } from './shared/shared.module'; import { SidebarModule } from './core/sidebar/sidebar.module'; @@ -19,6 +27,12 @@ import { AppComponent } from './app.component'; import { StatusComponent } from './core/status/status.component'; import { OverviewComponent } from './overview/overview.component'; import { SettingsComponent } from './settings/settings.component'; +import { StakinginfoComponent } from './overview/widgets/stakinginfo/stakinginfo.component'; + +import 'hammerjs'; +import { FlashNotificationService } from './services/flash-notification.service'; +import { BlockStatusService } from './core/rpc/blockstatus.service'; +import { ColdstakeComponent } from './overview/widgets/coldstake/coldstake.component'; const routes: Routes = [ { path: 'overview', component: OverviewComponent, data: { title: 'Overview' } }, @@ -31,7 +45,9 @@ const routes: Routes = [ AppComponent, StatusComponent, OverviewComponent, - SettingsComponent + SettingsComponent, + StakinginfoComponent, + ColdstakeComponent ], imports: [ BrowserModule, @@ -41,12 +57,30 @@ const routes: Routes = [ SidebarModule.forRoot(), WalletModule.forRoot(), RpcModule.forRoot(), - ModalsModule + ModalsModule, + MdButtonModule, + MdCheckboxModule, + MdListModule, + MdExpansionModule, + FlexLayoutModule, + MdTooltipModule, + MdSnackBarModule, + MdMenuModule, + MdProgressBarModule, + MdIconModule, + MdSidenavModule, + MdGridListModule, + MdCardModule, + MdToolbarModule ], providers: [ + WindowService, + BlockStatusService, + FlashNotificationService, WindowService ], - bootstrap: [ AppComponent ] + bootstrap: [ AppComponent ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule { diff --git a/src/app/core/rpc/rpc-state.class.ts b/src/app/core/rpc/rpc-state.class.ts index c602ede5b..846cba62a 100644 --- a/src/app/core/rpc/rpc-state.class.ts +++ b/src/app/core/rpc/rpc-state.class.ts @@ -1,6 +1,10 @@ +import { Log } from 'ng2-logger'; import { RPCService } from './rpc.service'; + export class RPCStateClass { + private log: any = Log.create('rpc-state.class'); + constructor(private rpc: RPCService) { // Start polling... @@ -12,6 +16,7 @@ export class RPCStateClass { this.lastBlockTimeState(); this.blockLoop(); this.walletLockedState(); + this.initWalletState(); } private lastBlockTimeState() { @@ -43,4 +48,30 @@ export class RPCStateClass { .subscribe(status => this.rpc.state .set('locked', ['Locked', 'Unlocked, staking only'].includes(status))); } + + private initWalletState() { + + this.rpc.state.observe('encryptionstatus').take(1) + .subscribe( + status => { + const locked = this.rpc.state.get('locked'); + + if (locked) { + this.rpc.state.set('walletInitialized', true); + return; + } + + this.rpc.call('extkey', ['list']) + .subscribe( + response => { + // check if account is active + if (response.result === 'No keys to list.') { + this.rpc.state.set('walletInitialized', false); + } else { + this.rpc.state.set('walletInitialized', true); + } + }, + error => this.log.er('RPC Call returned an error', error)); + }); + } } diff --git a/src/app/core/status/status.component.html b/src/app/core/status/status.component.html index 263c92a12..78963784d 100644 --- a/src/app/core/status/status.component.html +++ b/src/app/core/status/status.component.html @@ -1,40 +1,24 @@ - - Peers: {{ peerListCount }} - - - - {{ encryptionStatus }} - - - - Cold - - - - + + - + - - + + diff --git a/src/app/core/status/status.component.spec.ts b/src/app/core/status/status.component.spec.ts index 503ffe9a5..8e0e99a3a 100644 --- a/src/app/core/status/status.component.spec.ts +++ b/src/app/core/status/status.component.spec.ts @@ -1,11 +1,11 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { TooltipModule } from 'ngx-bootstrap'; import { StatusComponent } from './status.component'; import { ModalsModule } from '../../modals/modals.module'; import { SharedModule } from '../../shared/shared.module'; import { RpcModule } from '../rpc/rpc.module'; +import { MdTooltipModule } from '@angular/material'; describe('StatusComponent', () => { let component: StatusComponent; @@ -15,10 +15,10 @@ describe('StatusComponent', () => { TestBed.configureTestingModule({ declarations: [ StatusComponent ], imports: [ - SharedModule, - RpcModule.forRoot(), - TooltipModule.forRoot(), - ModalsModule + SharedModule, + RpcModule.forRoot(), + ModalsModule, + MdTooltipModule ] }) .compileComponents(); diff --git a/src/app/core/status/status.component.ts b/src/app/core/status/status.component.ts index 7964240b6..a520de133 100644 --- a/src/app/core/status/status.component.ts +++ b/src/app/core/status/status.component.ts @@ -5,7 +5,8 @@ import { Log } from 'ng2-logger'; import { ModalsService } from '../../modals/modals.service'; import { StateService } from '../state/state.service'; -import { PeerService, RPCService, BlockStatusService } from '../rpc/rpc.module'; +import { RPCService } from '../rpc/rpc.module'; +import { MdDialog} from '@angular/material'; @Component({ selector: 'app-status', @@ -82,6 +83,6 @@ export class StatusComponent implements OnInit { } openColdStakeModal() { - this._modalsService.open('coldStake', {forceOpen: true}); + this._modalsService.open('coldStake', {'forceOpen': true}); } } diff --git a/src/app/layouts/layouts.module.spec.ts b/src/app/layouts/layouts.module.spec.ts new file mode 100644 index 000000000..0a94a0ebd --- /dev/null +++ b/src/app/layouts/layouts.module.spec.ts @@ -0,0 +1,13 @@ +import { LayoutsModule } from './layouts.module'; + +describe('LayoutsModule', () => { + let layoutsModule: LayoutsModule; + + beforeEach(() => { + layoutsModule = new LayoutsModule(); + }); + + it('should create an instance', () => { + expect(layoutsModule).toBeTruthy(); + }); +}); diff --git a/src/app/layouts/layouts.module.ts b/src/app/layouts/layouts.module.ts new file mode 100644 index 000000000..4c8777875 --- /dev/null +++ b/src/app/layouts/layouts.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { LayoutSideNavComponent } from './side-nav/side-nav.component'; +import { MdDialogModule, MdExpansionModule } from '@angular/material'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { ModalsService } from '../modals/modals.service'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +@NgModule({ + imports: [ + CommonModule, + MdDialogModule, + FlexLayoutModule, + MdExpansionModule, + BrowserAnimationsModule + ], + declarations: [LayoutSideNavComponent], + exports: [ + LayoutSideNavComponent + ], + providers: [ + ModalsService + ] +}) +export class LayoutsModule { +} diff --git a/src/app/layouts/side-nav/side-nav.component.css b/src/app/layouts/side-nav/side-nav.component.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/layouts/side-nav/side-nav.component.html b/src/app/layouts/side-nav/side-nav.component.html new file mode 100644 index 000000000..bd74addf9 --- /dev/null +++ b/src/app/layouts/side-nav/side-nav.component.html @@ -0,0 +1,42 @@ + + + Wallet + +
+ + + + arrow_forward + Recieve + + + + + arrow_back + Send + + + + + history + History + + + + + people + Addess Book + + + + + library_add + Add Acount + + + +
+ + + diff --git a/src/app/layouts/side-nav/side-nav.component.spec.ts b/src/app/layouts/side-nav/side-nav.component.spec.ts new file mode 100644 index 000000000..97550efd4 --- /dev/null +++ b/src/app/layouts/side-nav/side-nav.component.spec.ts @@ -0,0 +1,41 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LayoutSideNavComponent } from './side-nav.component'; +import { MdDialog, MdDialogModule, MdExpansionModule, MdIconModule } from '@angular/material'; +import { ModalsService} from '../../modals/modals.service'; +import { BlockStatusService } from '../../core/rpc/blockstatus.service'; +import { PeerService } from '../../core/rpc/peer.service'; +import { RpcModule } from '../../core/rpc/rpc.module'; +import { SharedModule } from '../../shared/shared.module'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +describe('LayoutSideNavComponent', () => { + let component: LayoutSideNavComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + SharedModule, + MdExpansionModule, + MdIconModule, + MdDialogModule, + RpcModule.forRoot(), + BrowserAnimationsModule + ], + providers: [ MdDialog, ModalsService, BlockStatusService, PeerService ], + declarations: [ LayoutSideNavComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LayoutSideNavComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/layouts/side-nav/side-nav.component.ts b/src/app/layouts/side-nav/side-nav.component.ts new file mode 100644 index 000000000..6a74799e3 --- /dev/null +++ b/src/app/layouts/side-nav/side-nav.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import { ModalsComponent } from '../../modals/modals.component'; +import { MdDialog } from '@angular/material'; +import { ModalsService } from '../../modals/modals.service'; + +@Component({ + selector: 'app-side-nav', + templateUrl: './side-nav.component.html', + styleUrls: ['./side-nav.component.css'] +}) +export class LayoutSideNavComponent implements OnInit { + + constructor(private dialog: MdDialog, + private _modalsService: ModalsService) { + } + + ngOnInit() { + } + + createWallet() { + // this.dialog.open(ModalsComponent, {disableClose: true, width: '100%', height: '100%'}); + // this._modalsService.open('createWallet', {forceOpen: true}); + } + +} diff --git a/src/app/modals/coldstake/coldstake.component.html b/src/app/modals/coldstake/coldstake.component.html index 6ccbe17c1..558339ba5 100644 --- a/src/app/modals/coldstake/coldstake.component.html +++ b/src/app/modals/coldstake/coldstake.component.html @@ -1,32 +1,29 @@
-
-

Welcome, read the instructions very carefully!

-

- Hot wallet: - Selecting this option will turn this computer into a staking node. - It will be unable to spend the coins but is allowed to stake them.
-

-

- Cold wallet: - Selecting this option will turn this computer into a cold storage node. - It is able to spend the coins but is not allowed to stake them.
- Note: this will create a special transaction with a dust output of 0.00001 and a transaction fee. -

-
- -
+
+
+

Welcome, read the instructions very carefully!

+

+ Hot wallet: + Selecting this option will turn this computer into a staking node. + It will be unable to spend the coins but is allowed to stake them.
+

+

+ Cold wallet: + Selecting this option will turn this computer into a cold storage node. + It is able to spend the coins but is not allowed to stake them.
+ Note: this will create a special transaction with a dust output of 0.00001 and a transaction fee. +

+
-
-
-
- -
-
-
@@ -36,90 +33,98 @@ - - - - -
- +
+ + + +
+
+ +
+
-
+
+

Hot wallet: Copy this and enter this into the cold wallet.

-
+
-
-
- +
+
+ + +
-
- +
+
-
-
- -
-
-
+
-
+
+

Please enter the address generated by the hot wallet.

-
+
-
+
-
- +
+ + +
-
+
-
-
- +
-
-

+

+
{{finalMessage}} -

+
diff --git a/src/app/modals/coldstake/coldstake.component.scss b/src/app/modals/coldstake/coldstake.component.scss index 3c66ccdcb..bbf357734 100644 --- a/src/app/modals/coldstake/coldstake.component.scss +++ b/src/app/modals/coldstake/coldstake.component.scss @@ -1,12 +1,5 @@ -.icon { - padding: 7px 2px; -} -.red-bg { - background-color: red !important; -} - -.blue-bg { - background-color: #00d2ff !important; +.input-gap { + margin: 12px !important; } @media only screen and (max-width: 480px) { diff --git a/src/app/modals/coldstake/coldstake.component.spec.ts b/src/app/modals/coldstake/coldstake.component.spec.ts index 95f57ae55..f78571d28 100644 --- a/src/app/modals/coldstake/coldstake.component.spec.ts +++ b/src/app/modals/coldstake/coldstake.component.spec.ts @@ -6,6 +6,7 @@ import { RpcModule } from '../../core/rpc/rpc.module'; import { ModalsModule } from '../modals.module'; import { ColdstakeComponent } from './coldstake.component'; +import { MdDialogRef } from '@angular/material'; describe('ColdstakeComponent', () => { let component: ColdstakeComponent; @@ -18,6 +19,9 @@ describe('ColdstakeComponent', () => { SharedModule, RpcModule.forRoot(), ModalsModule + ], + providers: [ + { provide: MdDialogRef} ] }) .compileComponents(); diff --git a/src/app/modals/coldstake/coldstake.component.ts b/src/app/modals/coldstake/coldstake.component.ts index 5a0cc81bc..1f00f3181 100644 --- a/src/app/modals/coldstake/coldstake.component.ts +++ b/src/app/modals/coldstake/coldstake.component.ts @@ -7,6 +7,8 @@ import { ModalsService } from '../modals.service'; import { RPCService } from '../../core/rpc/rpc.module'; import { PasswordComponent } from '../shared/password/password.component'; +import { MdDialogRef } from '@angular/material'; +import { ModalsComponent } from '../modals.component'; @Component({ selector: 'app-coldstake', @@ -39,7 +41,8 @@ export class ColdstakeComponent { constructor( @Inject(forwardRef(() => ModalsService)) private _modalsService: ModalsService, - private _rpc: RPCService + private _rpc: RPCService, + public dialogRef: MdDialogRef ) { } nextStep () { @@ -164,8 +167,7 @@ export class ColdstakeComponent { } close() { - const escape = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }); - document.body.dispatchEvent(escape); + this.dialogRef.componentInstance.close(); } /** diff --git a/src/app/modals/createwallet/createwallet.component.html b/src/app/modals/createwallet/createwallet.component.html index 8acf77c1a..92d6b3174 100644 --- a/src/app/modals/createwallet/createwallet.component.html +++ b/src/app/modals/createwallet/createwallet.component.html @@ -1,159 +1,154 @@
-
- Welcome, please select one of the options below. - -
- It is recommended to encrypt your wallet before creating or restoring a wallet, in order to not leave any possible key fragments lying around. -
-
- -
- -
-
-
- -
-
- -
-
- +
+
+ Welcome, please select one of the options below. +
+ It is recommended to encrypt your wallet before creating or restoring a wallet, in order to not leave any + possible key fragments lying around.
+
+ +
+ + + +
-
- Lets create a new wallet -
- -
- -
- -
-
- +
+
+ Let's create a new wallet
-
-
- + -
-
- Wallet Name is required +
+ + +
+
+
-
- Wallet Name cannot be more than 32 characters long. + +
+
+ + + + +
+
+ Wallet Name is required +
+
+ Wallet Name cannot be more than 32 characters long. +
+
+
+
+ + +
-
-
-
- -
-
-
- -
-
- -
+
- -
- +
+ +
+ Generate your wallet recovery phrase - - Write down your wallet recovery phrase
-
+ + Write down your wallet recovery phrase
+
It is very important to write down your recovery phrase and to remember your password. You will not be able to restore your wallet without them.
- - Enter your wallet recovery phrase
+ + Enter your wallet recovery phrase
Fill in the missing words of the recovery passphrase.
-
-
- -
-
- +
+
+
+
+ +
-
-
- +
+
+ + + +
+
-
- - + - - + + - - -
- {{ errorString }} -
- -
-
-
- + +
+
+ {{ errorString }}
-
- +
@@ -161,81 +156,94 @@ -
+
+
Please enter your 24 word recovery phrase and optional recovery passphrase below. -
-
- -
-
- +
+
+
+
+ +
-
-
- +
+
+ + + +
+
-
- -
+ - + -
- {{ errorString }} -
+
+ {{ errorString }} +
- + -
-
-
- -
+
+
+
+
+ +
+
+
-
-
-
-

Congratulations with your new wallet

-
- Your new wallet has been set as the default wallet, you can new generate new addresses on your wallet. -
+
+
+

Congratulations with your new wallet

+
+ Your new wallet has been set as the default wallet, you can now generate new addresses on your wallet.
-
+
-
- -
- +
+
+ +
+
- - +
+ + + + + + + +
diff --git a/src/app/modals/createwallet/createwallet.component.scss b/src/app/modals/createwallet/createwallet.component.scss index 5e6d49b4c..eaf6c43be 100644 --- a/src/app/modals/createwallet/createwallet.component.scss +++ b/src/app/modals/createwallet/createwallet.component.scss @@ -1,17 +1,34 @@ /deep/ app-password > div { - margin-top: 20px; + margin-top: 20px; } /deep/ input.recovery-word { - max-width: 100%; + max-width: 100%; } .alert { - margin-bottom: 0; + margin-bottom: 0; +} + +.align-center { + text-align: center; +} + +.create-wallet-action-button { + margin: 3px; +} + +.mat-dialog-content { + width: 100% !important; + height: 100% !important; +} + +.gap50 { + height: 50px; } @media only screen and (max-width: 480px) { - .wallet-buttons-container button{ + .wallet-buttons-container button { float: none; display: block; margin: 10px auto 0; diff --git a/src/app/modals/createwallet/createwallet.component.ts b/src/app/modals/createwallet/createwallet.component.ts index 2e6ad9bbb..e39420c91 100644 --- a/src/app/modals/createwallet/createwallet.component.ts +++ b/src/app/modals/createwallet/createwallet.component.ts @@ -55,6 +55,7 @@ export class CreateWalletComponent { reset() { this._modalsService.enableClose = true; + this.state.set('modal:fullWidth:enableClose', true); this.words = Array(24).fill(''); this.isRestore = false; this.name = ''; @@ -137,6 +138,7 @@ export class CreateWalletComponent { break; } this._modalsService.enableClose = (this.step === 0); + this.state.set('modal:fullWidth:enableClose', (this.step === 0)); } private mnemonicCallback(response: Object) { @@ -156,12 +158,14 @@ export class CreateWalletComponent { success => { this.animationState = 'next'; this.step = 5; + this.state.set('activeWallet', true); this.log.i('Mnemonic imported successfully'); }, error => { this.log.er(error); this.errorString = error.message; this._modalsService.enableClose = true; + this.state.set('modal:fullWidth:enableClose', true); this.log.er('Mnemonic import failed'); }); } diff --git a/src/app/modals/createwallet/passphrase/passphrase.component.html b/src/app/modals/createwallet/passphrase/passphrase.component.html index 43909e8ef..61ae5bf46 100644 --- a/src/app/modals/createwallet/passphrase/passphrase.component.html +++ b/src/app/modals/createwallet/passphrase/passphrase.component.html @@ -1,69 +1,33 @@ - - - - - -
-
- -
-
-
- -
-
- - -
-
-
+
diff --git a/src/app/modals/createwallet/passphrase/passphrase.component.spec.ts b/src/app/modals/createwallet/passphrase/passphrase.component.spec.ts index 980cf5b1e..ab60a6fa3 100644 --- a/src/app/modals/createwallet/passphrase/passphrase.component.spec.ts +++ b/src/app/modals/createwallet/passphrase/passphrase.component.spec.ts @@ -8,6 +8,9 @@ import { PassphraseService } from './passphrase.service'; import { FormsModule } from '@angular/forms'; import { FocusDirective } from '../../modals.directives'; import { PassphraseComponent } from './passphrase.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MdDialogRef, MdIconModule, MdInputModule, MdSnackBarModule } from '@angular/material'; +import { FlashNotificationService } from '../../../services/flash-notification.service'; describe('PassphraseComponent', () => { @@ -19,13 +22,20 @@ describe('PassphraseComponent', () => { imports: [ FormsModule, SharedModule, - RpcModule.forRoot() + RpcModule.forRoot(), + BrowserAnimationsModule, + MdIconModule, + MdSnackBarModule ], declarations: [ FocusDirective, PassphraseComponent ], - providers: [PassphraseService] + providers: [ + { provide: MdDialogRef}, + PassphraseService, + FlashNotificationService + ] }) .compileComponents(); })); diff --git a/src/app/modals/createwallet/passphrase/passphrase.component.ts b/src/app/modals/createwallet/passphrase/passphrase.component.ts index 72fbfa00f..96b85386f 100644 --- a/src/app/modals/createwallet/passphrase/passphrase.component.ts +++ b/src/app/modals/createwallet/passphrase/passphrase.component.ts @@ -4,6 +4,7 @@ import { ClipboardModule } from 'ngx-clipboard'; import { PassphraseService } from './passphrase.service'; import { Log } from 'ng2-logger'; +import { FlashNotificationService } from '../../../services/flash-notification.service'; const MAX_WORDS = 24; @@ -24,13 +25,17 @@ export class PassphraseComponent implements OnChanges { @Input() readOnly: boolean = false; @Input() isDisabled: boolean = false; @Input() partialDisable: boolean = false; + @Input() generate: boolean = false; @Output() wordsEmitter: EventEmitter = new EventEmitter(); @Output() seedImportedSuccesfulEmitter: EventEmitter = new EventEmitter(); log: any = Log.create('passphrase.component'); - constructor (private _passphraseService: PassphraseService) {} + constructor( + private _passphraseService: PassphraseService, + private flashNotificationService: FlashNotificationService) { + } ngOnChanges(): void { this.editable = []; @@ -75,4 +80,8 @@ export class PassphraseComponent implements OnChanges { clear() { this.words = Array(MAX_WORDS).fill(''); } + + copyToClipBoard(): void { + this.flashNotificationService.open('Wallet recovery phrase copied to clipboard.', '', 1000); + } } diff --git a/src/app/modals/daemon/daemon.component.ts b/src/app/modals/daemon/daemon.component.ts index 7c44eb39f..dee5038b3 100644 --- a/src/app/modals/daemon/daemon.component.ts +++ b/src/app/modals/daemon/daemon.component.ts @@ -1,6 +1,4 @@ -import { Component, Inject, forwardRef } from '@angular/core'; - -import { ModalsService } from '../modals.service'; +import { Component } from '@angular/core'; @Component({ selector: 'app-daemon', diff --git a/src/app/modals/encryptwallet/encryptwallet.component.html b/src/app/modals/encryptwallet/encryptwallet.component.html index 69d3ba28e..abca03888 100644 --- a/src/app/modals/encryptwallet/encryptwallet.component.html +++ b/src/app/modals/encryptwallet/encryptwallet.component.html @@ -1,19 +1,15 @@ -
-
-
+
+
+

Please enter a password to encrypt your wallet.

Do NOT forget this password or you will be unable to access your coins.

-
+

Please enter your password again to confirm that you've typed the right password.

Do NOT forget this password or you will be unable to access your coins.

-
-
- -
Do NOT forget this password or you will be unable to access your coins. -
-
-
- -
+
+
+
- - - \ No newline at end of file +
+ diff --git a/src/app/modals/encryptwallet/encryptwallet.component.spec.ts b/src/app/modals/encryptwallet/encryptwallet.component.spec.ts index cab329f9c..771eb083e 100644 --- a/src/app/modals/encryptwallet/encryptwallet.component.spec.ts +++ b/src/app/modals/encryptwallet/encryptwallet.component.spec.ts @@ -5,6 +5,7 @@ import { RpcModule } from '../../core/rpc/rpc.module'; import { EncryptwalletComponent } from './encryptwallet.component'; import { ModalsModule } from '../modals.module'; +import { MdSnackBarModule } from '@angular/material'; describe('EncryptwalletComponent', () => { @@ -16,7 +17,8 @@ describe('EncryptwalletComponent', () => { imports: [ SharedModule, ModalsModule, - RpcModule.forRoot() + RpcModule.forRoot(), + MdSnackBarModule ] }) .compileComponents(); diff --git a/src/app/modals/encryptwallet/encryptwallet.component.ts b/src/app/modals/encryptwallet/encryptwallet.component.ts index 26b86bfb8..5ea6982b0 100644 --- a/src/app/modals/encryptwallet/encryptwallet.component.ts +++ b/src/app/modals/encryptwallet/encryptwallet.component.ts @@ -1,14 +1,11 @@ -import { - Component, ComponentRef, Inject, - forwardRef, ElementRef, ViewChild -} from '@angular/core'; +import {Component, forwardRef, Inject, ViewChild} from '@angular/core'; import { Log } from 'ng2-logger'; -import { ModalsService } from 'app/modals/modals.service'; import { RPCService } from '../../core/rpc/rpc.module'; import { PasswordComponent } from '../shared/password/password.component'; -import { AlertComponent } from '../shared/alert/alert.component'; import { IPassword } from '../shared/password/password.interface'; +import { FlashNotificationService } from '../../services/flash-notification.service'; +import { ModalsService } from '../modals.service'; @Component({ selector: 'app-encryptwallet', @@ -23,13 +20,11 @@ export class EncryptwalletComponent { @ViewChild('passwordElement') passwordElement: PasswordComponent; - @ViewChild('alertBox') - alertBox: AlertComponent; - - constructor( - private _rpc: RPCService, - @Inject(forwardRef(() => ModalsService)) - private _modalsService: ModalsService) { } + constructor(private _rpc: RPCService, + private flashNotification: FlashNotificationService, + @Inject(forwardRef(() => ModalsService)) + private _modalsService: ModalsService) { + } encryptwallet(password: IPassword) { if (this.password) { @@ -43,7 +38,7 @@ export class EncryptwalletComponent { .subscribe( response => { this._rpc.toggleState(false); - this.alertBox.open(response, 'Wallet'); + this.flashNotification.open(response); if (this._rpc.isElectron) { this._rpc.call('restart-daemon') @@ -59,11 +54,11 @@ export class EncryptwalletComponent { }, // Handle error appropriately error => { - this.alertBox.open('Wallet failed to encrypt properly!', 'Wallet'); + this.flashNotification.open('Wallet failed to encrypt properly!'); this.log.er('error encrypting wallet', error) }); } else { - this.alertBox.open('The passwords do not match!', 'Wallet'); + this.flashNotification.open('The passwords do not match!'); } } else { diff --git a/src/app/modals/modals.component.html b/src/app/modals/modals.component.html index bb81816ab..a8a67cbbd 100644 --- a/src/app/modals/modals.component.html +++ b/src/app/modals/modals.component.html @@ -1,29 +1,13 @@ -
- -
-
- - - -
- -
-
- -
- -
-
- -
-
-
{{syncString}}
-
-
-
{{syncString}}
-
+ +
+
+
+ +
+
+
diff --git a/src/app/modals/modals.component.scss b/src/app/modals/modals.component.scss index d13b51828..5b6ee0ed2 100644 --- a/src/app/modals/modals.component.scss +++ b/src/app/modals/modals.component.scss @@ -66,3 +66,15 @@ color: #02e8b0 !important; right: 0 !important; } + +img.logo { + max-height: 295px; + width: 100%; + height: 100%; + margin-bottom: 45px; +} + +.close_button { + border: none !important; + box-shadow: none !important; +} diff --git a/src/app/modals/modals.component.spec.ts b/src/app/modals/modals.component.spec.ts index 8fdff82e9..92872fc6b 100644 --- a/src/app/modals/modals.component.spec.ts +++ b/src/app/modals/modals.component.spec.ts @@ -9,6 +9,8 @@ import { BlockStatusService } from '../core/rpc/blockstatus.service'; import { UnlockwalletComponent } from './unlockwallet/unlockwallet.component'; import { ModalsComponent } from './modals.component'; +import { MdDialogModule, MdDialogRef, MdSnackBarModule } from '@angular/material'; +import { ModalsService } from './modals.service'; describe('ModalsComponent', () => { @@ -18,13 +20,17 @@ describe('ModalsComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ + MdDialogModule, ModalsModule, ModalModule.forRoot(), SharedModule, - RpcModule.forRoot() + RpcModule.forRoot(), + MdSnackBarModule ], providers: [ BlockStatusService, + ModalsService, + { provide: MdDialogRef } ] }) .compileComponents(); @@ -40,26 +46,21 @@ describe('ModalsComponent', () => { expect(component).toBeTruthy(); }); - it('should update progress', () => { - component.updateProgress(5); - expect(component.syncPercentage).toBe(5); - }); - it('should open and close', () => { component.open(UnlockwalletComponent, {forceOpen: true}); expect(component.modal).toBeDefined(); - component.close(); + // component.close(); }); it('should get closeOnEscape', () => { - expect(component.closeOnEscape).toBe(true); + expect(component.closeOnEscape).toBeTruthy() }); it('should get hasScrollY', () => { - expect(component.hasScrollY).toBe(false); + expect(component.hasScrollY).toBeFalsy(); }); it('should get modal', () => { - expect(component.modal).toBe(undefined); + expect(component.modal).toBeUndefined() }); }); diff --git a/src/app/modals/modals.component.ts b/src/app/modals/modals.component.ts index f0c88ea66..72bda322d 100644 --- a/src/app/modals/modals.component.ts +++ b/src/app/modals/modals.component.ts @@ -6,23 +6,19 @@ import { DoCheck, ElementRef, HostListener, - ReflectiveInjector, ViewChild, ViewContainerRef } from '@angular/core'; import { Log } from 'ng2-logger' -import { Subscription } from 'rxjs/Subscription'; -import { ModalDirective } from 'ngx-bootstrap/modal'; - -import { ModalsService } from './modals.service'; - import { CreateWalletComponent } from './createwallet/createwallet.component'; import { ColdstakeComponent } from './coldstake/coldstake.component'; import { DaemonComponent } from './daemon/daemon.component'; import { SyncingComponent } from './syncing/syncing.component'; import { UnlockwalletComponent } from './unlockwallet/unlockwallet.component'; import { EncryptwalletComponent } from './encryptwallet/encryptwallet.component'; +import { MdDialogRef } from '@angular/material'; +import { StateService } from '../core/state/state.service'; @Component({ selector: 'app-modals', @@ -39,49 +35,29 @@ import { EncryptwalletComponent } from './encryptwallet/encryptwallet.component' }) export class ModalsComponent implements DoCheck, OnInit { - @ViewChild('staticModal') - public staticModal: ModalDirective; - @ViewChild('modalContainer', { read: ViewContainerRef }) private modalContainer: ViewContainerRef; modal: ComponentRef; hasScrollY: boolean = false; - syncPercentage: number = 0; - syncString: string; closeOnEscape: boolean = true; enableClose: boolean; private logger: any = Log.create('modals.component'); - constructor ( + constructor( private _element: ElementRef, private _resolver: ComponentFactoryResolver, - private _modalService: ModalsService - ) { - // update new modal, open it - this._modalService.getMessage().subscribe( - message => { - if (message.close) { - this.close(); - } else { - this.open(message.modal, message.data); - } - } - ); - - // update progress bar blockstatus - this._modalService.getProgress().subscribe( - progress => this.updateProgress(progress) - ); + public _dialogRef: MdDialogRef, + private state: StateService) { } ngOnInit() { - this.enableClose = this._modalService.enableClose; + this.state.observe('modal:fullWidth:enableClose') + .subscribe(status => this.enableClose = status); } ngDoCheck() { - this.enableClose = this._modalService.enableClose; if (this._element) { const element = this._element.nativeElement; const style = element.ownerDocument.defaultView.getComputedStyle(element, undefined); @@ -100,13 +76,11 @@ export class ModalsComponent implements DoCheck, OnInit { if (data !== undefined && dynamicModal.instance.setData !== undefined) { dynamicModal.instance.setData(data); } - this.staticModal.show(); } close() { + this._dialogRef.close(); // remove and destroy message - this._modalService.close(); - this.staticModal.hide(); this.modalContainer.remove(); this.modal.destroy(); } @@ -114,20 +88,9 @@ export class ModalsComponent implements DoCheck, OnInit { // close window on escape @HostListener('window:keydown', ['$event']) keyDownEvent(event: any) { - if (this.closeOnEscape && this._modalService.enableClose - && event.key.toLowerCase() === 'escape' && this.modal) { - this.close(); + if (this.closeOnEscape && this.enableClose + && event.key.toLowerCase() === 'escape' && this.modal) { + this.close(); } } - - /** - * Update sync progress - * @param {number} number The sync percentage - */ - updateProgress(progress: number) { - this.syncPercentage = progress; - this.syncString = progress === 100 - ? 'blockchain fully synced' - : `${progress.toFixed(2)} %` - } } diff --git a/src/app/modals/modals.module.ts b/src/app/modals/modals.module.ts index a346ef803..6fce2aa37 100644 --- a/src/app/modals/modals.module.ts +++ b/src/app/modals/modals.module.ts @@ -1,4 +1,4 @@ -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { ModalModule, TooltipModule } from 'ngx-bootstrap'; @@ -19,13 +19,30 @@ import { SyncingComponent } from './syncing/syncing.component'; import { UnlockwalletComponent } from './unlockwallet/unlockwallet.component'; import { EncryptwalletComponent } from './encryptwallet/encryptwallet.component'; import { AlertComponent } from './shared/alert/alert.component'; - +import { + MdButtonModule, MdCheckboxModule, MdDialogModule, MdIconModule, MdInputModule, MdProgressBarModule, + MdTooltipModule +} from '@angular/material'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { FlashNotificationService } from '../services/flash-notification.service'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { PercentageBarComponent } from './shared/percentage-bar/percentage-bar.component'; @NgModule({ imports: [ CommonModule, FormsModule, + ClipboardModule, + MdDialogModule, + FlexLayoutModule, + BrowserAnimationsModule, + MdButtonModule, + MdIconModule, + MdInputModule, + MdCheckboxModule, ModalModule, + MdTooltipModule, + MdProgressBarModule, TooltipModule, ClipboardModule ], @@ -41,14 +58,24 @@ import { AlertComponent } from './shared/alert/alert.component'; UnlockwalletComponent, EncryptwalletComponent, AlertComponent, - ColdstakeComponent + ColdstakeComponent, + PercentageBarComponent ], exports: [ ModalsComponent ], providers: [ ModalsService, - PassphraseService - ] + PassphraseService, + FlashNotificationService + ], + entryComponents: [ + ModalsComponent, + DaemonComponent, + SyncingComponent, + UnlockwalletComponent, + EncryptwalletComponent, + AlertComponent + ], }) export class ModalsModule { } diff --git a/src/app/modals/modals.service.ts b/src/app/modals/modals.service.ts index c5510cfcc..d602e68c6 100644 --- a/src/app/modals/modals.service.ts +++ b/src/app/modals/modals.service.ts @@ -1,4 +1,4 @@ -import { Injectable, Injector } from '@angular/core'; +import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; import { Log } from 'ng2-logger'; @@ -11,6 +11,8 @@ import { DaemonComponent } from './daemon/daemon.component'; import { SyncingComponent } from './syncing/syncing.component'; import { UnlockwalletComponent } from './unlockwallet/unlockwallet.component'; import { EncryptwalletComponent } from './encryptwallet/encryptwallet.component'; +import { MdDialog } from '@angular/material'; +import { ModalsComponent } from './modals.component'; @Injectable() export class ModalsService { @@ -41,7 +43,8 @@ export class ModalsService { constructor ( private _blockStatusService: BlockStatusService, - private _rpcService: RPCService + private _rpc: RPCService, + private dialog: MdDialog ) { // open syncing modal this._blockStatusService.statusUpdates.asObservable().subscribe(status => { @@ -52,7 +55,7 @@ export class ModalsService { this.openInitialCreateWallet(); // open daemon model on error - this._rpcService.modalUpdates.asObservable().subscribe(status => { + this._rpc.modalUpdates.asObservable().subscribe(status => { if (status.error) { this.enableClose = true; this.open('daemon', status); @@ -69,6 +72,7 @@ export class ModalsService { * @param {any} data Optional - data to pass through to the modal. */ open(modal: string, data?: any): void { + const dialogRef = this.dialog.open(ModalsComponent, {disableClose: true, width: '100%', height: '100%'}); if (modal in this.messages) { if ( (data && data.forceOpen) @@ -77,9 +81,13 @@ export class ModalsService { if (!this.wasAlreadyOpen(modal)) { this.log.d(`next modal: ${modal}`); this.modal = this.messages[modal]; - this.message.next({modal: this.modal, data: data}); + dialogRef.componentInstance.open(this.modal, {data: data}); + // this.message.next({modal: this.modal, data: data}); this.isOpen = true; - this.enableClose = true; + dialogRef.componentInstance.enableClose = true; + dialogRef.afterClosed().subscribe(() => { + this.close(); + }); } } } else { @@ -149,35 +157,15 @@ export class ModalsService { /** Initial wallet creation */ openInitialCreateWallet() { - if (this.initializedWallet) { - return; - } - - // Use 'encryptionstatus' as 'locked' isn't replaying due to no connections... - this._rpcService.state.observe('encryptionstatus').take(1) + this._rpc.state.observe('walletInitialized') .subscribe( - status => { - const locked = this._rpcService.state.get('locked'); - if (locked) { - this.initializedWallet = true; - this.log.d('Wallet already initialized.'); + state => { + this.initializedWallet = state; + if (state) { + this.log.i('Wallet already initialized.'); return; } - this._rpcService.call('extkey', ['list']) - .subscribe( - response => { - // check if account is active - if (response.result === 'No keys to list.') { - this.open('createWallet', {forceOpen: true}); - } else { - this.log.d('Already has imported their keys.'); - this.initializedWallet = true; - } - }, - error => { - // maybe wallet is locked? - this.log.er('RPC Call returned an error', error); - }); + this.open('createWallet', {forceOpen: true}); }); } diff --git a/src/app/modals/shared/alert/alert.component.html b/src/app/modals/shared/alert/alert.component.html index d2a16c94e..7785112c2 100644 --- a/src/app/modals/shared/alert/alert.component.html +++ b/src/app/modals/shared/alert/alert.component.html @@ -1,32 +1,8 @@ - \ No newline at end of file +

{{title}}

+
+ {{text}} +
+ + + + diff --git a/src/app/modals/shared/alert/alert.component.spec.ts b/src/app/modals/shared/alert/alert.component.spec.ts index 97ade5049..060e7ef79 100644 --- a/src/app/modals/shared/alert/alert.component.spec.ts +++ b/src/app/modals/shared/alert/alert.component.spec.ts @@ -6,6 +6,7 @@ import { ModalsModule } from '../../modals.module'; import { SharedModule } from '../../../shared/shared.module'; import { RpcModule } from '../../../core/rpc/rpc.module'; +import {MdDialogModule, MdDialogRef} from '@angular/material'; describe('AlertComponent', () => { @@ -17,10 +18,12 @@ describe('AlertComponent', () => { imports: [ SharedModule, RpcModule.forRoot(), - ModalsModule - ] + ModalsModule, + MdDialogModule + ], + providers: [ { provide: MdDialogRef } ] }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/modals/shared/alert/alert.component.ts b/src/app/modals/shared/alert/alert.component.ts index 17a7e2949..e3746fba2 100644 --- a/src/app/modals/shared/alert/alert.component.ts +++ b/src/app/modals/shared/alert/alert.component.ts @@ -1,6 +1,4 @@ -import { Component, OnInit, Input, ViewChild } from '@angular/core'; - -import { ModalDirective } from 'ngx-bootstrap/modal'; +import { Component, OnInit } from '@angular/core'; import { Log } from 'ng2-logger'; @@ -9,25 +7,15 @@ import { Log } from 'ng2-logger'; templateUrl: './alert.component.html', styleUrls: ['./alert.component.scss'] }) -export class AlertComponent implements OnInit { - - @ViewChild('alertBoxModal') - public alertBoxModal: ModalDirective; - - @Input() - text: string; - - @Input() - title: string = 'Alert'; +export class AlertComponent { + public title: string; + public text: string; log: any = Log.create('alertbox.component'); constructor() { } - ngOnInit() { - } - - open(text: string, title?: string) { + open(text: string, title?: string): void { if (text) { this.text = text; } @@ -35,16 +23,6 @@ export class AlertComponent implements OnInit { if (title) { this.title = title; } - - this.show(); - } - - show() { - this.alertBoxModal.show(); - } - - hide() { - this.alertBoxModal.hide(); } } diff --git a/src/app/modals/shared/password/password.component.html b/src/app/modals/shared/password/password.component.html index 695eb2342..e227cf9cb 100644 --- a/src/app/modals/shared/password/password.component.html +++ b/src/app/modals/shared/password/password.component.html @@ -1,35 +1,39 @@ -
-
- -
-
-
- -
+
+
+
+ +
+
+
+ + + +
- - - + + SHOW PASSWORD - - - + + STAKE ONLY +
+
+ +
+
-
-
-
-
+
diff --git a/src/app/modals/shared/password/password.component.spec.ts b/src/app/modals/shared/password/password.component.spec.ts index de6204d7b..cbdb95509 100644 --- a/src/app/modals/shared/password/password.component.spec.ts +++ b/src/app/modals/shared/password/password.component.spec.ts @@ -6,6 +6,7 @@ import { PasswordComponent } from './password.component'; import { SharedModule } from '../../../shared/shared.module'; import { RpcModule } from '../../../core/rpc/rpc.module'; +import { MdSnackBarModule } from '@angular/material'; describe('PasswordComponent', () => { @@ -17,7 +18,8 @@ describe('PasswordComponent', () => { imports: [ SharedModule, RpcModule.forRoot(), - ModalsModule + ModalsModule, + MdSnackBarModule ] }) .compileComponents(); @@ -39,7 +41,7 @@ describe('PasswordComponent', () => { }); it('should get showPass', () => { - expect(component.showPass).toBe(false); + expect(!component.showPass).toBeTruthy(); }); /* TODO: Can't do RPC yet diff --git a/src/app/modals/shared/password/password.component.ts b/src/app/modals/shared/password/password.component.ts index a19e6b52b..51d0919b5 100644 --- a/src/app/modals/shared/password/password.component.ts +++ b/src/app/modals/shared/password/password.component.ts @@ -4,6 +4,7 @@ import { Log } from 'ng2-logger'; import { IPassword } from './password.interface'; import { RPCService } from '../../../core/rpc/rpc.module'; +import { FlashNotificationService } from '../../../services/flash-notification.service'; @Component({ @@ -24,6 +25,7 @@ export class PasswordComponent { @Input() unlockTimeout: number = 60; @Input() showStakeOnly: boolean = true; @Input() isDisabled: boolean = false; + @Input() isButtonDisable: boolean = false; /** * The password emitter will send over an object with the password and stakingOnly info. @@ -42,7 +44,9 @@ export class PasswordComponent { log: any = Log.create('password.component'); - constructor (private _rpc: RPCService) { } + constructor(private _rpc: RPCService, + private flashNotification: FlashNotificationService) { + } /** Get the input type - password or text */ getInputType(): string { @@ -113,8 +117,7 @@ export class PasswordComponent { }, error => { this.log.i('rpc_unlock_failed: unlock failed - wrong password?', error); - // TODO: Use modals instead of alerts.. - alert('Unlock failed - password was incorrect.'); + this.flashNotification.open('Unlock failed - password was incorrect'); }); } diff --git a/src/app/modals/shared/percentage-bar/percentage-bar.component.html b/src/app/modals/shared/percentage-bar/percentage-bar.component.html new file mode 100644 index 000000000..086a2f688 --- /dev/null +++ b/src/app/modals/shared/percentage-bar/percentage-bar.component.html @@ -0,0 +1,10 @@ +
+ {{syncString }} + + +
diff --git a/src/app/modals/shared/percentage-bar/percentage-bar.component.scss b/src/app/modals/shared/percentage-bar/percentage-bar.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/modals/shared/percentage-bar/percentage-bar.component.spec.ts b/src/app/modals/shared/percentage-bar/percentage-bar.component.spec.ts new file mode 100644 index 000000000..3984fbd6a --- /dev/null +++ b/src/app/modals/shared/percentage-bar/percentage-bar.component.spec.ts @@ -0,0 +1,39 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PercentageBarComponent } from './percentage-bar.component'; +import { MdDialogModule } from '@angular/material'; +import { ModalsModule } from '../../modals.module'; +import { RpcModule } from '../../../core/rpc/rpc.module'; +import { SharedModule } from '../../../shared/shared.module'; + +describe('PercentageBarComponent', () => { + let component: PercentageBarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + SharedModule, + RpcModule.forRoot(), + ModalsModule, + MdDialogModule + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PercentageBarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should update progress', () => { + component.updateProgress(5); + expect(component.syncPercentage).toEqual(5); + }); +}); diff --git a/src/app/modals/shared/percentage-bar/percentage-bar.component.ts b/src/app/modals/shared/percentage-bar/percentage-bar.component.ts new file mode 100644 index 000000000..ba68f1240 --- /dev/null +++ b/src/app/modals/shared/percentage-bar/percentage-bar.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit } from '@angular/core'; +import { ModalsService } from '../../modals.service' +import { Log } from 'ng2-logger'; + +@Component({ + selector: 'app-percentage-bar', + templateUrl: './percentage-bar.component.html', + styleUrls: ['./percentage-bar.component.scss'] +}) +export class PercentageBarComponent implements OnInit { + + public syncPercentage: number = 0; + public syncString: string; + + private logger: any = Log.create('app-percentage-bar.component'); + constructor( private _modalService: ModalsService) { } + + ngOnInit() { + // update progress bar blockstatus + this._modalService.getProgress().subscribe( + progress => this.updateProgress(progress) + ); + } + + /** + * Update sync progress + * @param {number} number The sync percentage + */ + // @TODO create sparate component to display process + updateProgress(progress: number): void { + this.logger.d('updateProgress', progress); + this.syncPercentage = progress; + this.syncString = progress === 100 + ? 'blockchain fully synced' + : `${progress.toFixed(2)} %` + } +} diff --git a/src/app/modals/unlockwallet/unlockwallet.component.html b/src/app/modals/unlockwallet/unlockwallet.component.html index 7641ffe92..c30c9dc73 100644 --- a/src/app/modals/unlockwallet/unlockwallet.component.html +++ b/src/app/modals/unlockwallet/unlockwallet.component.html @@ -1,17 +1,16 @@ -
-
-
+
+
+

Please enter your password to unlock your wallet.

-
- -
+
- + +
diff --git a/src/app/modals/unlockwallet/unlockwallet.component.spec.ts b/src/app/modals/unlockwallet/unlockwallet.component.spec.ts index 3703cf22b..f06465c09 100644 --- a/src/app/modals/unlockwallet/unlockwallet.component.spec.ts +++ b/src/app/modals/unlockwallet/unlockwallet.component.spec.ts @@ -5,6 +5,7 @@ import { ModalsModule } from '../modals.module'; import { SharedModule } from '../../shared/shared.module'; import { RpcModule } from '../../core/rpc/rpc.module'; +import {MdDialogModule, MdDialogRef, MdSnackBarModule} from '@angular/material'; describe('UnlockwalletComponent', () => { @@ -16,8 +17,11 @@ describe('UnlockwalletComponent', () => { imports: [ SharedModule, ModalsModule, - RpcModule.forRoot() - ] + RpcModule.forRoot(), + MdDialogModule, + MdSnackBarModule + ], + providers: [ { provide: MdDialogRef } ] }) .compileComponents(); })); @@ -29,6 +33,6 @@ describe('UnlockwalletComponent', () => { }); it('should be created', () => { - expect(component).toBeTruthy(); + expect(component).toBeTruthy(); }); }); diff --git a/src/app/modals/unlockwallet/unlockwallet.component.ts b/src/app/modals/unlockwallet/unlockwallet.component.ts index 9daa1c542..246469f25 100644 --- a/src/app/modals/unlockwallet/unlockwallet.component.ts +++ b/src/app/modals/unlockwallet/unlockwallet.component.ts @@ -1,8 +1,9 @@ -import { Component, Injectable, EventEmitter, Input, Output } from '@angular/core'; -import { ModalsModule } from '../modals.module'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; import { Log } from 'ng2-logger'; import { RPCService } from '../../core/rpc/rpc.service'; +import { MdDialogRef } from '@angular/material'; +import { ModalsComponent } from '../modals.component'; @Component({ @@ -23,7 +24,9 @@ export class UnlockwalletComponent { timeout: number = this.DEFAULT_TIMEOUT; showStakeOnly: boolean = false; - constructor (private _rpc: RPCService) { } + constructor(private _rpc: RPCService, + public dialogRef: MdDialogRef) { + } unlock(encryptionStatus: string) { // unlock actually happened in password.component.ts @@ -60,11 +63,11 @@ export class UnlockwalletComponent { // clear callback data this.timeout = this.DEFAULT_TIMEOUT; this.showStakeOnly = true; + this.log.d('Closing modal!'); - if (this.autoClose && document.getElementById('close')) { + if (this.autoClose ) { + this.dialogRef.componentInstance.close(); this.log.d('Closing modal!'); - - document.getElementById('close').click(); } } } diff --git a/src/app/overview/overview.component.html b/src/app/overview/overview.component.html index cff18470b..36f24dbfb 100644 --- a/src/app/overview/overview.component.html +++ b/src/app/overview/overview.component.html @@ -1,69 +1,46 @@ -
-
-
- -
-
- -
-
- -
-
- -
-
- -
+ + +
+
-
+
+ +
+
+ +
+
+ +
+
+ +
+ -
-
-
- -
    -
  • Recent Transactions
    • -
-
    - -
- - - -
-
-
-
- -
    -
  • Widget Section 2
    • -
-
    - -
- -
-
-
-
-
-
- -
    -
  • Widget Section 3
    • -
-
    - -
- -
+
-
-
-
-
-
-
+
+ +
    +
  • Recent Transactions
    • +
+ + + + +
+ + +
+ + + + +
+ + +
\ No newline at end of file diff --git a/src/app/overview/overview.component.scss b/src/app/overview/overview.component.scss index 41edbc3c0..4c8195d7e 100644 --- a/src/app/overview/overview.component.scss +++ b/src/app/overview/overview.component.scss @@ -1,14 +1,16 @@ -.reserved-area { - height: 250px; - border-style: dashed; - border-width: 2px; - border-color: #EBEBEB; - background-color: #F7F7F7; - margin-bottom: 15px; +@import 'widgets/shared/shared.scss'; + +.balance-overview { // list of balances + padding: 24px 50px; + .balance-item { + border-right: 1px solid $bg-shadow; + &:last-of-type { + border: none; margin: none; + } + } } -.balance-bg { - background: #fff; - padding-bottom: 30px; - padding-top: 20px; - border-bottom: 1px solid #EAEAEA; -} \ No newline at end of file + +.overview-content { // area with widgets + padding: 10px 50px; +} + diff --git a/src/app/overview/overview.component.spec.ts b/src/app/overview/overview.component.spec.ts index 69f4af0e8..f22612e3d 100644 --- a/src/app/overview/overview.component.spec.ts +++ b/src/app/overview/overview.component.spec.ts @@ -1,10 +1,13 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { OverviewComponent } from './overview.component'; - +import { StakinginfoComponent } from './widgets/stakinginfo/stakinginfo.component'; +import { ColdstakeComponent } from './widgets/coldstake/coldstake.component'; import { SharedModule } from '../shared/shared.module'; import { WalletModule } from '../wallet/wallet.module'; import { RpcModule } from '../core/rpc/rpc.module'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { MdCardModule } from '@angular/material'; describe('OverviewComponent', () => { let component: OverviewComponent; @@ -13,13 +16,19 @@ describe('OverviewComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - SharedModule, - WalletModule.forRoot(), - RpcModule.forRoot() + SharedModule, + WalletModule.forRoot(), + RpcModule.forRoot(), + FlexLayoutModule, + MdCardModule + ], + declarations: [ + OverviewComponent, + StakinginfoComponent, + ColdstakeComponent ], - declarations: [ OverviewComponent ], }) - .compileComponents(); + .compileComponents(); })); beforeEach(() => { diff --git a/src/app/overview/overview.component.ts b/src/app/overview/overview.component.ts index 4ab0355b1..5023e2c6d 100644 --- a/src/app/overview/overview.component.ts +++ b/src/app/overview/overview.component.ts @@ -1,15 +1,15 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; + +import { StakinginfoComponent } from './widgets/stakinginfo/stakinginfo.component'; +import { ColdstakeComponent } from './widgets/coldstake/coldstake.component'; @Component({ selector: 'app-overview', templateUrl: './overview.component.html', styleUrls: ['./overview.component.scss'] }) -export class OverviewComponent implements OnInit { +export class OverviewComponent { constructor() { } - ngOnInit() { - } - } diff --git a/src/app/overview/widgets/coldstake/coldstake.component.html b/src/app/overview/widgets/coldstake/coldstake.component.html new file mode 100644 index 000000000..69929832c --- /dev/null +++ b/src/app/overview/widgets/coldstake/coldstake.component.html @@ -0,0 +1,31 @@ +
+ +
    +
  • Cold Staking
    • +
+ + + +
+ + Cold Staking Node inactive +
+ + + + +
+ + Cold Staking Node active +
+ + + +

+ @FIXME: Cold Staking lets you spend from one machine and stake from another. This greatly increases safety of your coins. +

+
\ No newline at end of file diff --git a/src/app/overview/widgets/coldstake/coldstake.component.scss b/src/app/overview/widgets/coldstake/coldstake.component.scss new file mode 100644 index 000000000..04a663035 --- /dev/null +++ b/src/app/overview/widgets/coldstake/coldstake.component.scss @@ -0,0 +1,39 @@ +@import "./src/assets/_config"; // import shared colors etc. +@import '../shared/shared.scss'; + +.cold-staking { + .staking-node { + padding: 24px 24px 30px; + /*.cs-icon { // snowflake + font-size: 40px; + color: $bg-shadow; + position: relative; + top: 9px; + width: auto; + height: auto; + margin: -11px 15px 0 0; + }*/ + .title { + display: inline-block; + text-transform: uppercase; + font-weight: bold; + & > .active { color: $color; } + & > .inactive { color: $text-muted; } + } + .status { + display: block; + } + button { + font-size: 12px; + text-transform: uppercase; + min-width: 0; + padding: 0 10px; + margin-right: 20px; + border: 1px solid transparent; + top: -1px; + &.secondary { + border-color: $bg-shadow; + } + } + } +} \ No newline at end of file diff --git a/src/app/overview/widgets/coldstake/coldstake.component.spec.ts b/src/app/overview/widgets/coldstake/coldstake.component.spec.ts new file mode 100644 index 000000000..b3033230b --- /dev/null +++ b/src/app/overview/widgets/coldstake/coldstake.component.spec.ts @@ -0,0 +1,34 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ColdstakeComponent } from './coldstake.component'; +import { SharedModule } from '../../../shared/shared.module'; + +import { FlexLayoutModule } from '@angular/flex-layout'; +import { MdCardModule } from '@angular/material'; + +describe('ColdstakeComponent', () => { + let component: ColdstakeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + SharedModule, + FlexLayoutModule, + MdCardModule + ], + declarations: [ ColdstakeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ColdstakeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/overview/widgets/coldstake/coldstake.component.ts b/src/app/overview/widgets/coldstake/coldstake.component.ts new file mode 100644 index 000000000..ce404fa8e --- /dev/null +++ b/src/app/overview/widgets/coldstake/coldstake.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-coldstake', + templateUrl: './coldstake.component.html', + styleUrls: ['./coldstake.component.scss'] +}) +export class ColdstakeComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/overview/widgets/shared/shared.scss b/src/app/overview/widgets/shared/shared.scss new file mode 100644 index 000000000..40d8340ce --- /dev/null +++ b/src/app/overview/widgets/shared/shared.scss @@ -0,0 +1,25 @@ +/* + Values shared among widgets +*/ +@import "./src/assets/_config"; // import shared colors etc. + +.header-nav { // section titles + padding: 0 0 20px; margin: 30px 0 30px; + border-bottom: 1px solid $bg-shadow; +} + +/* + Shared among widgets +*/ + +span.point { color: $color; } + +md-card.multiple { + margin-bottom: 20px; +} + +p.widget-help { + color: grey; + font-size: 11px; + margin-bottom: 25px; +} \ No newline at end of file diff --git a/src/app/overview/widgets/stakinginfo/stakinginfo.component.html b/src/app/overview/widgets/stakinginfo/stakinginfo.component.html new file mode 100644 index 000000000..4ffadc312 --- /dev/null +++ b/src/app/overview/widgets/stakinginfo/stakinginfo.component.html @@ -0,0 +1,37 @@ +
+ +
    +
  • Staking Information
    • +
+ + + + + + + + + + + + + + + + + + + + + +
Next reward~3 hours
Your Stake weight3.48 ‰
Stake percentage{{splitAmountByDot(dynamicStakingReward)}}.{{splitAmountByDot(dynamicStakingReward,true)}} %
Stake reward1.4949327 PART
+ + +
+ + + + diff --git a/src/app/overview/widgets/stakinginfo/stakinginfo.component.scss b/src/app/overview/widgets/stakinginfo/stakinginfo.component.scss new file mode 100644 index 000000000..f472ecd84 --- /dev/null +++ b/src/app/overview/widgets/stakinginfo/stakinginfo.component.scss @@ -0,0 +1,14 @@ +@import "./src/assets/_config"; // import shared colors etc. +@import '../shared/shared.scss'; + +.staking-overview { // listing of staking stats + th { + text-align: left; + padding-right: 20px; + font-weight: normal; + } + td { + font-weight: 600; + } + +} \ No newline at end of file diff --git a/src/app/overview/widgets/stakinginfo/stakinginfo.component.spec.ts b/src/app/overview/widgets/stakinginfo/stakinginfo.component.spec.ts new file mode 100644 index 000000000..c9fdd5811 --- /dev/null +++ b/src/app/overview/widgets/stakinginfo/stakinginfo.component.spec.ts @@ -0,0 +1,36 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StakinginfoComponent } from './stakinginfo.component'; +import { StateService } from '../../../core/state/state.service'; +import { SharedModule } from '../../../shared/shared.module'; + +import { FlexLayoutModule } from '@angular/flex-layout'; +import { MdCardModule } from '@angular/material'; + +describe('StakinginfoComponent', () => { + let component: StakinginfoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + SharedModule, + FlexLayoutModule, + MdCardModule + ], + declarations: [ StakinginfoComponent ], + providers: [StateService] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StakinginfoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/overview/widgets/stakinginfo/stakinginfo.component.ts b/src/app/overview/widgets/stakinginfo/stakinginfo.component.ts new file mode 100644 index 000000000..cb62cb1a4 --- /dev/null +++ b/src/app/overview/widgets/stakinginfo/stakinginfo.component.ts @@ -0,0 +1,77 @@ +import { Component } from '@angular/core'; +import { Log } from 'ng2-logger'; + +import { StateService } from '../../../core/state/state.service'; + +@Component({ + selector: 'app-stakinginfo', + templateUrl: './stakinginfo.component.html', + styleUrls: ['./stakinginfo.component.scss'] +}) +export class StakinginfoComponent { + + + /* General */ + log: any = Log.create('send.component'); + + + /* UI */ + dynamicStakingReward: number = 2; + + + /* RPC */ + private curStakeReward: number = 0; + public curWeight: number = 1; + private curSupply: number = 0; + + + constructor( + private state: StateService + ) { + this.log.d(`constructor, started`); + this.state.observe('percentyearreward') + .subscribe( + success => { + this.log.d(`setting curStakeReward ${success}`); + this.curStakeReward = success; + this.calculateDynamicStakingReward(); + }, + error => this.log.er('Constructor, percentyearreward error:' + error)); + + + this.state.observe('netstakeweight') + .subscribe( + success => { + this.log.d(`setting weight ${success}`); + this.curWeight = success / (10000000); + this.calculateDynamicStakingReward(); + }, + error => this.log.er('Constructor, weight error:' + error)); + + this.state.observe('moneysupply') + .subscribe( + success => { + this.log.d(`setting moneysupply ${success}`); + this.curSupply = success; + this.calculateDynamicStakingReward(); + }, + error => this.log.er('Constructor, moneysupply error:' + error)); + + } + + private calculateDynamicStakingReward() { + this.dynamicStakingReward = Math.floor(this.curStakeReward * (this.curSupply / this.curWeight)); + this.curWeight = Math.floor(this.curWeight); + this.log.d(`calculateDynamicStakingReward, dynamicStakingReward = ${this.dynamicStakingReward}`); + } + + + public splitAmountByDot(int: number, afterDot: boolean) { + if ((int.toString()).indexOf('.') >= 0) { + return (int.toString()).split('.')[+afterDot]; + } else { + return '0'; + } + } + +} diff --git a/src/app/services/flash-notification.service.spec.ts b/src/app/services/flash-notification.service.spec.ts new file mode 100644 index 000000000..f65e044be --- /dev/null +++ b/src/app/services/flash-notification.service.spec.ts @@ -0,0 +1,19 @@ +import { TestBed, inject } from '@angular/core/testing'; +import {FlashNotificationService} from './flash-notification.service'; +import { MdSnackBarModule } from '@angular/material'; + + +describe('FlashNotificationServiceService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + MdSnackBarModule + ], + providers: [FlashNotificationService] + }); + }); + + it('should be created', inject([FlashNotificationService], (service: FlashNotificationService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/services/flash-notification.service.ts b/src/app/services/flash-notification.service.ts new file mode 100644 index 000000000..476b679a8 --- /dev/null +++ b/src/app/services/flash-notification.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { MdSnackBar, MdSnackBarConfig } from '@angular/material'; + +@Injectable() +export class FlashNotificationService { + + constructor(private snackBar: MdSnackBar) { + } + + open(message: string, action?: string, duration?: number): void { + const config = new MdSnackBarConfig(); + config.duration = duration ? duration : 10000; + this.snackBar.open(message, action ? action : 'Dismiss', config); + } + +} diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss index 78e75897a..1e602a87c 100644 --- a/src/app/settings/settings.component.scss +++ b/src/app/settings/settings.component.scss @@ -1,5 +1,6 @@ //@import '~https://fonts.googleapis.com/icon?family=Material+Icons'; //@import '~@angular/material/prebuilt-themes/indigo-pink.css'; +@import "./src/assets/_config"; // import shared colors etc. /* card element */ .card { diff --git a/src/app/settings/settings.service.spec.ts b/src/app/settings/settings.service.spec.ts index cd4cbebac..478eb0615 100644 --- a/src/app/settings/settings.service.spec.ts +++ b/src/app/settings/settings.service.spec.ts @@ -1,7 +1,6 @@ import { TestBed, inject } from '@angular/core/testing'; import { SettingsService } from './settings.service'; -import { SettingsComponent } from './settings.component'; describe('SettingsService', () => { beforeEach(() => { diff --git a/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.html b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.html new file mode 100644 index 000000000..81498e373 --- /dev/null +++ b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.html @@ -0,0 +1,10 @@ +

Are you sure you want to delete ?

+ +
+ {{dialogContent}} +
+ + + + + diff --git a/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.scss b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.scss new file mode 100644 index 000000000..21c2296a9 --- /dev/null +++ b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.scss @@ -0,0 +1,3 @@ +.mat-dialog-content { + padding: 10px 26px; +} diff --git a/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts new file mode 100644 index 000000000..2af999fc9 --- /dev/null +++ b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.spec.ts @@ -0,0 +1,29 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DeleteConfirmationModalComponent } from './delete-confirmation-modal.component'; +import { FormsModule } from '@angular/forms'; +import { MdDialogModule, MdDialogRef } from '@angular/material'; + +describe('DeleteConfirmationModalComponent', () => { + let component: DeleteConfirmationModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ FormsModule, MdDialogModule ], + declarations: [ DeleteConfirmationModalComponent ], + providers: [ { provide: MdDialogRef } ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DeleteConfirmationModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.ts b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.ts new file mode 100644 index 000000000..f3199dae1 --- /dev/null +++ b/src/app/shared/delete-confirmation-modal/delete-confirmation-modal.component.ts @@ -0,0 +1,24 @@ +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { MdDialogRef } from '@angular/material'; + +@Component({ + selector: 'app-delete-confirmation-modal', + templateUrl: './delete-confirmation-modal.component.html', + styleUrls: ['./delete-confirmation-modal.component.scss'] +}) +export class DeleteConfirmationModalComponent implements OnInit { + + public dialogContent: string; + + @Output() onDelete: EventEmitter = new EventEmitter(); + + constructor(private diloagRef: MdDialogRef) { } + + ngOnInit(): void { + this.dialogContent = (this.dialogContent) ? this.dialogContent : 'This item'; + } + + onConfirmDelete(): void { + this.onDelete.emit(); + } +} diff --git a/src/app/shared/header/header.component.scss b/src/app/shared/header/header.component.scss index c7afe7c25..e69de29bb 100644 --- a/src/app/shared/header/header.component.scss +++ b/src/app/shared/header/header.component.scss @@ -1,106 +0,0 @@ -.center-vertical { - position: relative; - top: 50%; - transform: translateY(-50%); -} - -$header-height: 60px; - -:host { - & { - display: block; - border-top: 1px solid transparent; - border-bottom: 1px solid #EAEAEA; - color: #7A8693; - margin-bottom: 15px; - } - /deep/ { - .color-red { - color: #EE4A52; - } - .color-green { - color: #03E8B0; - } - .icon { - vertical-align: middle; - } - ul.header-nav { - & { - display: inline-block; - list-style-type: none; - padding: 0; - margin: -1px 0; - text-transform: uppercase; - font-size: 12px; - font-weight: bold; - height: $header-height + 2px; - line-height: $header-height + 2px - 8px; - } - & > li { - display: inline-block; - height: inherit; - padding: 0 10px; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - } - & > li > a, & > li > .header-link { - display: inline-block; - height: 100%; - text-decoration: none; - color: #7A8693; - cursor: pointer; - } - & > li > a:hover, & > li > .header-link:hover { - color: #000; - } - & > li.active { - border-bottom: 4px solid #41ECC2; - } - & > li.active > a, & > li.active > .header-link { - color: #000; - } - } - form.header-form { - & { - display: inline-block; - height: $header-height; - } - & > * { - @extend .center-vertical; - display: inline-block; - } - & > input[type="text"] { - & { - height: 60%; - background-color: transparent; - border: 0; - outline: none; - padding: 0 10px; - border-left: 1px solid #EAEAEA; - } - &::placeholder { - color: #7A8693; - } - &:focus { - outline: none; - border-left: 1px solid #41ECC2; - } - } - & > button.btn { - & { - text-indent: 0; - height: 60%; - background-color: transparent; - border: 0; - outline: none; - box-shadow: none; - } - &:hover, &:focus { - outline: none; - color: #000; - } - } - } - - } -} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 8fbcf91e8..f01a8bf82 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -11,6 +11,10 @@ import { AccordionModule } from './accordion/accordion.module'; import { HeaderComponent } from './header/header.component'; import { TableComponent } from './table/table.component'; import { GridComponent } from './grid/grid.component'; +import { MdButtonModule, MdDialogModule, MdExpansionModule, MdIconModule, MdInputModule } from '@angular/material'; +import { FlexLayoutModule } from '@angular/flex-layout'; +import { DeleteConfirmationModalComponent } from './delete-confirmation-modal/delete-confirmation-modal.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ @@ -20,12 +24,20 @@ import { GridComponent } from './grid/grid.component'; PaginationModule.forRoot(), AccordionModule, ModalModule.forRoot(), - TooltipModule.forRoot() + TooltipModule.forRoot(), + MdDialogModule, + MdExpansionModule, + MdInputModule, + MdIconModule, + BrowserAnimationsModule, + MdButtonModule, + FlexLayoutModule ], declarations: [ HeaderComponent, TableComponent, - GridComponent + GridComponent, + DeleteConfirmationModalComponent ], exports: [ CommonModule, @@ -41,6 +53,9 @@ import { GridComponent } from './grid/grid.component'; TableComponent, GridComponent, AccordionModule - ] + ], + entryComponents: [ + DeleteConfirmationModalComponent + ], }) export class SharedModule { } diff --git a/src/app/wallet/address-book/address-book.component.html b/src/app/wallet/address-book/address-book.component.html index b73192c8e..0e6d5b53c 100644 --- a/src/app/wallet/address-book/address-book.component.html +++ b/src/app/wallet/address-book/address-book.component.html @@ -1,23 +1,19 @@ - -
- -
- - -
-
-
- - -
- -
-
- × - -
Add label to address
-
- -
-
- -
-
- -
-
-
-
- {{ errorString }} -
-
- - - +
-
\ No newline at end of file +
diff --git a/src/app/wallet/address-book/address-book.component.scss b/src/app/wallet/address-book/address-book.component.scss index 3bd1ea4c7..e69de29bb 100644 --- a/src/app/wallet/address-book/address-book.component.scss +++ b/src/app/wallet/address-book/address-book.component.scss @@ -1,57 +0,0 @@ -app-header { - li.add-address .icon { - font-size: 28px; - margin-right: 5px; - } -} - -#address-modal { - position: absolute; - z-index: 100000; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: rgba(0, 0, 0, 0.3); -} - -#address-modal.hide { - width: 0!important; - height: 0!important; - display: none; -} - -.address-modal-container { - position: absolute; - top: 20%; - left: 50%; - transform: translateX(-50%); - background-color: white; - width: 600px; - padding: 30px; -} - -.close { - position: absolute; - top: 30px; - right: 30px; -} - -.modal-content-header { - font-size: 1.2em; -} - -.modal-label { - text-transform: uppercase; - font-weight: bold; - font-size: 0.7em; - margin-bottom: 10px; -} - -#address-modal .row { - margin-bottom: 30px; -} - -.margin-top-5px { - margin-top: 5px; -} diff --git a/src/app/wallet/address-book/address-book.component.spec.ts b/src/app/wallet/address-book/address-book.component.spec.ts index 20fe55b08..cb019ac48 100644 --- a/src/app/wallet/address-book/address-book.component.spec.ts +++ b/src/app/wallet/address-book/address-book.component.spec.ts @@ -8,6 +8,9 @@ import { RpcModule } from '../../core/rpc/rpc.module'; import { ModalsService } from '../../modals/modals.service'; import { AddressBookComponent } from './address-book.component'; +import { FlashNotificationService } from '../../services/flash-notification.service'; +import { MdSnackBarModule } from '@angular/material'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; describe('AddressBookComponent', () => { let component: AddressBookComponent; @@ -16,14 +19,14 @@ describe('AddressBookComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - SharedModule, - WalletModule.forRoot(), - RpcModule.forRoot() + SharedModule, + WalletModule.forRoot(), + RpcModule.forRoot(), + MdSnackBarModule, + BrowserAnimationsModule ], declarations: [ ], - providers: [ - ModalsService - ] + providers: [ FlashNotificationService, ModalsService ] }) .compileComponents(); })); diff --git a/src/app/wallet/address-book/address-book.component.ts b/src/app/wallet/address-book/address-book.component.ts index 33982eb02..f10a312c8 100644 --- a/src/app/wallet/address-book/address-book.component.ts +++ b/src/app/wallet/address-book/address-book.component.ts @@ -1,164 +1,28 @@ -import { Component, OnInit, HostListener } from '@angular/core'; - -import { RPCService } from '../../core/rpc/rpc.service'; - -import { Log } from 'ng2-logger' -import { ModalsService } from '../../modals/modals.service'; +import { Component } from '@angular/core'; +import { MdDialog } from '@angular/material'; +import { NewAddressModalComponent } from './modal/new-address-modal/new-address-modal.component'; +import { Log } from 'ng2-logger'; @Component({ selector: 'app-address-book', templateUrl: './address-book.component.html', styleUrls: ['./address-book.component.scss'] }) -export class AddressBookComponent implements OnInit { +export class AddressBookComponent { log: any = Log.create('address-book.component'); - - query: string; - - // UI state - label: string = ''; - address: string; - openNewAddressModal: boolean = false; - public errorAddress: boolean = false; - public errorString: string = ''; - // Validation state - public validAddress: boolean = undefined; - public isMine: boolean = undefined; - - constructor(private _rpc: RPCService, private _modals: ModalsService) { } - - ngOnInit() { - } - - openNewAddress() { - this.openNewAddressModal = true; + public query: string; + constructor(private dialog: MdDialog) { } - closeNewAddress() { - this.openNewAddressModal = false; + openNewAddress(): void { + const dialogRef = this.dialog.open(NewAddressModalComponent); } - clearAndClose() { - // reset UI state - this.label = ''; - this.address = ''; - - // reset validation - this.validAddress = undefined; - this.isMine = undefined; - this.errorString = ''; - - this.closeNewAddress(); - } - - /** Returns if the entered address is valid or not AND if it is not ours (isMine). */ - checkAddress(): boolean { - return this.validAddress === true && !this.isMine; - } - - /** Add address to addressbook */ - editLabel(address: string) { + editLabel(address: string): void { this.log.d(`editLabel, address: ${address}`); - this.address = address; - this.verifyAddress(); - this.openNewAddress(); - } - /** - * Adds the address to the addressbook if address is valid and - * has a label (in the textbox) and is not one of our own addresses. - */ - addAddressToBook() { - if (this.label && this.label.trim() && !this.isMine) { - if (this._rpc.state.get('locked')) { - // unlock wallet and send transaction - this._modals.open('unlock', { - forceOpen: true, timeout: 3, callback: this.addressCallBack.bind(this) - }); - } else { - // wallet already unlocked - this.addressCallBack(); - } - this.closeNewAddress(); - } - } - - private addressCallBack() { - this._rpc.call('manageaddressbook', ['newsend', this.address, this.label]) - .subscribe( - response => this.rpc_addAddressToBook_success(response), - error => this.rpc_addAddressToBook_failed(error)); - } - - /** - * Address was added succesfully to the address book. - * TODO: INTERFACE - */ - rpc_addAddressToBook_success(response: any) { - this.address = undefined; - this.label = ''; - this.closeNewAddress(); - // TODO: remove specialPoll! (updates the address table) - this._rpc.specialPoll(); - - this.validAddress = undefined; - this.isMine = undefined; - } - - /** - * Address was not added to the addressbook - * e.g: wallet still locked - * TODO: Error interface - */ - rpc_addAddressToBook_failed(response: any) { - this.log.er('rpc_addAddressToBook_failed', response); - this.log.er(response); - - if (response.error) { - this.errorString = response.error.message; - } - // TODO: remove specialPoll! (updates the address table) - this._rpc.specialPoll(); - } - - /** Verify if address is valid through RPC call and sets state to validAddress.. */ - verifyAddress() { - if (this.address === undefined || this.address === '') { - this.validAddress = undefined; - this.isMine = undefined; - this.errorString = ''; - return; - } - - this._rpc.call('validateaddress', [this.address]) - .subscribe( - response => this.rpc_verifyAddress_success(response), - error => this.log.er('rpc_validateaddress_failed')); - } - - /** - * Callback of verifyAddress - * - sets state. - * TODO: Success INTERFACE - */ - rpc_verifyAddress_success(response: any) { - this.validAddress = response.isvalid; - this.isMine = response.ismine; - if (response.account !== undefined) { - this.label = response.account; - } - if (this.isMine) { - this.errorString = 'Error: Can\'t add own address to address book.'; - } - if (!this.validAddress) { - this.errorString = 'Error: Invalid Particl address.'; - } - } - - @HostListener('window:keydown', ['$event']) - keyDownEvent(event: any) { - if (event.key.toLowerCase() === 'escape') { - this.closeNewAddress(); - } + const dialogRef = this.dialog.open(NewAddressModalComponent); + dialogRef.componentInstance.address = address; + dialogRef.componentInstance.isEdit = true; } } diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html new file mode 100644 index 000000000..fe2d12511 --- /dev/null +++ b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.html @@ -0,0 +1,23 @@ +

{{modalTitle}}

+
+
+ + + + + + + +
+ + + + +
diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.scss b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.spec.ts b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.spec.ts new file mode 100644 index 000000000..3f1cf9703 --- /dev/null +++ b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.spec.ts @@ -0,0 +1,48 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NewAddressModalComponent } from './new-address-modal.component'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { SharedModule } from '../../../../shared/shared.module'; +import { RpcModule } from '../../../../core/rpc/rpc.module'; +import { BrowserModule } from '@angular/platform-browser'; +import { MdDialogModule, MdDialogRef, MdFormFieldModule, MdInputModule, MdSnackBarModule } from '@angular/material'; +import { FlashNotificationService } from '../../../../services/flash-notification.service'; +import { ModalsService } from '../../../../modals/modals.service'; + +describe('NewAddressModalComponent', () => { + let component: NewAddressModalComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + SharedModule, + RpcModule.forRoot(), + BrowserModule, + ReactiveFormsModule, + FormsModule, + MdFormFieldModule, + MdDialogModule, + MdSnackBarModule, + MdInputModule + ], + declarations: [ NewAddressModalComponent ], + providers: [ + FlashNotificationService, + ModalsService, + { provide: MdDialogRef} + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NewAddressModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts new file mode 100644 index 000000000..3769f8116 --- /dev/null +++ b/src/app/wallet/address-book/modal/new-address-modal/new-address-modal.component.ts @@ -0,0 +1,178 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { FlashNotificationService } from '../../../../services/flash-notification.service'; +import { RPCService } from '../../../../core/rpc/rpc.service'; +import { MdDialog, MdDialogRef } from '@angular/material'; +import { Log } from 'ng2-logger'; +import { ModalsService } from '../../../../modals/modals.service'; +import { ModalsComponent } from '../../../../modals/modals.component'; + +@Component({ + selector: 'app-new-address-modal', + templateUrl: './new-address-modal.component.html', + styleUrls: ['./new-address-modal.component.scss'] +}) +export class NewAddressModalComponent implements OnInit { + public addAddressBookForm: FormGroup; + public address: string; + public label: string; + public isEdit: boolean; + public modalTitle: string; + + log: any = Log.create('app-new-address-modal'); + + /* + Validation state + */ + public validAddress: boolean = undefined; + public isMine: boolean = undefined; + + constructor(public dialogRef: MdDialogRef, + private formBuilder: FormBuilder, + private _rpc: RPCService, + private flashNotificationService: FlashNotificationService, + private _modals: ModalsService, + private dialog: MdDialog) { + } + + ngOnInit(): void { + if (this.isEdit) { + this.verifyAddress(); + this.modalTitle = 'Edit address'; + } else { + this.modalTitle = 'Add new address to addresbook'; + } + this.buildForm(); + } + + buildForm(): void { + this.addAddressBookForm = this.formBuilder.group({ + address: this.formBuilder.control(null, [Validators.required]), + label: this.formBuilder.control(null, [Validators.required]), + }); + } + + closeModal(): void { + this.addAddressBookForm.reset(); + this.dialogRef.close(); + } + + + /** + * Returns if the entered address is valid or not AND if it is not ours (isMine). + */ + checkAddress(): boolean { + return this.validAddress && !this.isMine; + } + + /* + + RPC Logic + + */ + + + /* + Add address to addressbook + */ + + + /** + * Adds the address to the addressbook if address is valid & has label (in UI textbox) AND is not one of our own addresses. + */ + onSubmitForm(): void { + if (!this.validAddress) { + this.flashNotificationService.open('Please enter a valid address!'); + return; + } + + if (this.isMine) { + this.flashNotificationService.open('This is your own address - can not be added to addressbook!'); + return; + } + + if (this.label !== undefined && this.label.trim() && !this.isMine) { + if (this._rpc.state.get('locked')) { + // unlock wallet and send transaction + this._modals.open('unlock', { + forceOpen: true, timeout: 3, callback: this.addressCallBack.bind(this) + }); + } else { + // wallet already unlocked + this.addressCallBack(); + } + this.dialogRef.close(); + } + } + + private addressCallBack() { + this._rpc.call('manageaddressbook', ['newsend', this.address, this.label]) + .subscribe( + response => this.rpc_addAddressToBook_success(response), + error => this.rpc_addAddressToBook_failed(error)); + } + + /** + * Address was added succesfully to the address book. + */ + rpc_addAddressToBook_success(json: Object): void { + if (json['result'] === 'success') { + this.closeModal(); + const mesage: string = (this.isEdit) ? 'Address successfully updated to the addressbook!' + : 'Address successfully added to the addressbook!'; + + this.flashNotificationService.open(mesage); + // TODO: remove specialPoll! (updates the address table) + this._rpc.specialPoll(); + } + } + + /** + * Address was not added to the addressbook + * e.g: wallet still locked + */ + rpc_addAddressToBook_failed(json: Object): void { + this.closeModal(); + this.log.er('rpc_addAddressToBook_failed'); + this.log.er(json); + // TODO: remove specialPoll! (updates the address table) + this._rpc.specialPoll(); + } + + /* + Verify address + */ + + /** + * Verify if address is valid through RPC call and set state to validAddress.. + */ + verifyAddress() { + if (this.address === undefined || this.address === '') { + this.validAddress = undefined; + this.isMine = undefined; + return; + } + + this._rpc.call('validateaddress', [this.address]) + .subscribe(response => { + this.rpc_verifyAddress_success(response) + }, + error => { + this.log.er('rpc_validateaddress_failed'); + }); + return; + } + + /** + * Callback of verifyAddress, sets state. + */ + rpc_verifyAddress_success(json: Object): void { + this.validAddress = json['isvalid']; + this.isMine = json['ismine']; + if (json['account'] !== undefined) { + this.label = json['account']; + } + } + + +} diff --git a/src/app/wallet/addresslookup/addresslookup.component.html b/src/app/wallet/addresslookup/addresslookup.component.html index c0ba0068d..f3e407f03 100644 --- a/src/app/wallet/addresslookup/addresslookup.component.html +++ b/src/app/wallet/addresslookup/addresslookup.component.html @@ -1,51 +1,42 @@ -