Merge pull request #521 from EagleEye25/coldstaking_alert

added alerts for cold staking
particl · Jan 4, 2018 · e863851 · e863851
2 parents bec1e13 + b98fc6c
commit e863851
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 26 deletions.
diff --git a/src/app/core/rpc/rpc-state/rpc-state.class.ts b/src/app/core/rpc/rpc-state/rpc-state.class.ts
@@ -44,8 +44,12 @@ export class RpcStateClass {
 
   private walletLockedState() {
     this._rpc.state.observe('encryptionstatus')
-      .subscribe(status => this._rpc.state
-        .set('locked', ['Locked', 'Unlocked, staking only'].includes(status)));
+    .subscribe(status => {
+      this._rpc.state
+        .set('locked', ['Locked', 'Unlocked, staking only'].includes(status));
+      this._rpc.state
+        .set('ui:coldstaking:stake', 'Unlocked, staking only' === status);
+    });
   }
 
   /*

diff --git a/src/app/wallet/overview/widgets/coldstake/coldstake.component.html b/src/app/wallet/overview/widgets/coldstake/coldstake.component.html
@@ -5,22 +5,20 @@
     </ul>
   </app-header>
 
-  <mat-card *ngIf="coldStakingEnabled === undefined" class="staking-node">
-    <div class="title">
-      Cold Staking Node <span class="status inactive">Unlock to check</span>
-    </div>
-    <button class="mat-raised-button mat-primary pull-left" (click)="openUnlockWalletModal()" matTooltip="Unlock wallet to enable cold staking">
+  <mat-card *ngIf="coldStakingEnabled === undefined" class="staking-node inactive">
+    <button mat-raised-button color="primary" class="pull-left" (click)="openUnlockWalletModal()" matTooltip="Unlock wallet to enable cold staking">
       <mat-icon fontSet="partIcon" fontIcon="part-lock"></mat-icon>
     </button>
+    <div class="title">Cold Staking Node</div>
+    <div class="subtitle">Unlock to check</div>
   </mat-card>
 
-  <mat-card *ngIf="coldStakingEnabled === false" class="staking-node">
-    <div class="title">
-      Cold Staking Node <span class="status inactive">inactive</span>
-    </div>
-    <button class="mat-raised-button mat-primary pull-left" (click)="openColdStakeModal()" matTooltip="Add Cold Staking node key">
+  <mat-card *ngIf="coldStakingEnabled === false" class="staking-node inactive">
+    <button mat-raised-button color="primary" class="pull-left" (click)="openColdStakeModal()" matTooltip="Add Cold Staking node key">
       <mat-icon fontSet="partIcon" fontIcon="part-plus"></mat-icon>
     </button>
+    <div class="title">Cold Staking Node</div>
+    <div class="subtitle">Inactive</div>
   </mat-card>
 
   <p class="widget-help" *ngIf="!coldStakingEnabled">
@@ -39,23 +37,46 @@
 
 
   <!-- if cold staking is under 100% progress -->
-  <mat-card *ngIf="coldStakingEnabled" class="staking-node">
-    <div class="title">
-      Cold Staking Progress <span class="status active">{{coldstakeProgress}}%</span>
+  <mat-card *ngIf="coldStakingEnabled && stakingTowardsCold" class="staking-node active">
+    <div class="title">Cold Staking Node</div>
+    <div class="subtitle in-progress">
+      Activation in progress
+      <span class="progress">{{coldstakeProgress}}%</span>
     </div>
     <mat-progress-bar
-      class="progress-bar-bottom"
+      class="progress-bar"
       [color]="'primary'"
       [bufferValue]="coldstakeProgress"
       [mode]="'determinate'"
       [value]="coldstakeProgress">
     </mat-progress-bar>
-
     <p class="widget-help" *ngIf="coldStakingEnabled">
+      {{coldstakeProgress}}% of your balance is now safely staking on your staking node.
       Please keep this wallet online until the cold staking activation process is complete.
     </p>
   </mat-card>
 
+  <!-- if cold staking is under 100% progress -->
+  <mat-card *ngIf="coldStakingEnabled && !stakingTowardsCold" class="staking-node warning">
+    <div class="title">Cold Staking Node</div>
+    <div class="subtitle in-progress">
+      <strong>Paused</strong> &ndash; Wallet locked
+      <span class="progress">{{coldstakeProgress}}%</span>
+    </div>
+    <mat-progress-bar
+      class="progress-bar"
+      [color]="'warn'"
+      [bufferValue]="coldstakeProgress"
+      [mode]="'determinate'"
+      [value]="coldstakeProgress">
+    </mat-progress-bar>
+    <p class="widget-help">
+      The cold staking activation is paused. Unlock wallet for staking to continue the process.
+      Whilst paused, {{coldstakeProgress}}% of your balance that has already converted
+      will continue to stake on your staking node.
+    </p>
+  </mat-card>
+
 
   <!-- if Cold staking is at 100% show Disable button etc.
   <mat-card *ngIf="????" class="staking-node">

diff --git a/src/app/wallet/overview/widgets/coldstake/coldstake.component.scss b/src/app/wallet/overview/widgets/coldstake/coldstake.component.scss
@@ -6,19 +6,35 @@
   .staking-node {
     padding: 24px 24px 30px;
     margin-bottom: 20px;
+    &.active .subtitle {
+      color: $color;
+    }
+    &.inactive {
+      padding: 24px;
+      .subtitle {
+        color: $text-muted;
+      }
+    }
+    &.warning .subtitle {
+      color: $color-alert;
+    }
     .title {
       display: inline-block;
       text-transform: uppercase;
       font-weight: bold;
-      & > .active {
-        color: $color;
+    }
+    .subtitle {
+      display: block;
+      margin-top: 2px;
+      &.in-progress {
+        margin: 10px 0 5px;
       }
-      & > .inactive {
-        color: $text-muted;
+      .progress {
+        float: right;
       }
     }
-    .status {
-      display: block;
+    .progress-bar {
+      margin: 5px 0 15px;
     }
     button {
       font-size: 12px;
@@ -32,10 +48,9 @@
         border-color: $bg-shadow;
       }
       .mat-icon {
+        font-size: 14px;
+        margin: 0;
         width: 24px;
-        height: 24px;
-        margin-right: 0;
-        top: 1px;
       }
     }
   }

diff --git a/src/app/wallet/overview/widgets/coldstake/coldstake.component.ts b/src/app/wallet/overview/widgets/coldstake/coldstake.component.ts
@@ -16,6 +16,7 @@ export class ColdstakeComponent implements OnInit {
   /*  General   */
   private log: any = Log.create('coldstake.component');
   coldStakingEnabled: boolean = undefined;
+  stakingTowardsCold: boolean = undefined;
 
   private progress: Amount = new Amount(0, 2);
   get coldstakeProgress(): number { return this.progress.getAmount() }
@@ -27,6 +28,9 @@ export class ColdstakeComponent implements OnInit {
     this._rpc.state.observe('ui:coldstaking')
     .subscribe(status => this.coldStakingEnabled = status);
 
+    this._rpc.state.observe('ui:coldstaking:stake')
+    .subscribe(status => this.stakingTowardsCold = this.coldStakingEnabled && status);
+
     this.rpc_progressLoop();
   }