Skip to content

Commit

Permalink
Merge branch 'develop' into widget/coldstake
Browse files Browse the repository at this point in the history
  • Loading branch information
kewde committed Nov 1, 2017
2 parents 99d824c + 04f203d commit 275277c
Show file tree
Hide file tree
Showing 34 changed files with 1,400 additions and 866 deletions.
15 changes: 7 additions & 8 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,37 +22,36 @@
<md-accordion displayMode="flat" [multi]="'multi'" class="md-expansion-menu">
<md-expansion-panel #panel1 expanded="true">
<md-expansion-panel-header>Wallet</md-expansion-panel-header>

<md-content layout-padding class="submenuarea">
<md-list class="sidesubmenu">
<a routerLinkActive="active" [routerLink]="walletInitialized ? '/wallet/receive' : null">
<a routerLinkActive="{{ walletInitialized ? 'active' : null }}" [routerLink]="walletInitialized ? '/wallet/receive' : null">
<md-list-item>
<md-icon fontSet="ncIcon" fontIcon="nc-simple-right"></md-icon>
<span class="menu-item">Receive</span>
</md-list-item>
</a>
<a routerLinkActive="active" [routerLink]="walletInitialized ? '/wallet/send' : null">
<a routerLinkActive="{{ walletInitialized ? 'active' : null }}" [routerLink]="walletInitialized ? '/wallet/send' : null">
<md-list-item>
<md-icon fontSet="ncIcon" fontIcon="nc-simple-left"></md-icon>
<span class="menu-item">Send</span>
</md-list-item>
</a>
<a routerLinkActive="active" [routerLink]="walletInitialized ? '/wallet/history' : null">
<a routerLinkActive="{{ walletInitialized ? 'active' : null }}" [routerLink]="walletInitialized ? '/wallet/history' : null">
<md-list-item>
<md-icon fontSet="ncIcon" fontIcon="nc-time-3"></md-icon>
<span class="menu-item">History</span>
</md-list-item>
</a>
<a routerLinkActive="active" [routerLink]="walletInitialized ? '/wallet/address-book' : null">
<a routerLinkActive="{{ walletInitialized ? 'active' : null }}" [routerLink]="walletInitialized ? '/wallet/address-book' : null">
<md-list-item>
<md-icon fontSet="ncIcon" fontIcon="nc-multiple-19"></md-icon>
<span class="menu-item">Address Book</span>
</md-list-item>
</a>
<a routerLinkActive="active" href="javascript:void(0)" (click)="createWallet()">
<a routerLinkActive="active" href="javascript:void(0)" (click)="createWallet()" >
<md-list-item>
<md-icon fontSet="ncIcon" fontIcon="nc-card-add" ></md-icon>
<span class="menu-item">Add Acount</span>
<span class="menu-item">Add Account</span>
</md-list-item>
</a>
</md-list>
Expand Down Expand Up @@ -81,7 +80,7 @@
</md-content-->

<md-content layout-padding *ngIf="!!daemonError || !!walletError">
<md-list class="sidesubmenu">
<md-list class="sidesubmenu error">
<md-list-item *ngIf="daemonError">
<md-icon>error</md-icon>
{{daemonError}}
Expand Down
17 changes: 12 additions & 5 deletions src/app/app.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,15 +60,22 @@

.logo {
display: inline-block;
background-image: url("../assets/particl-logo.svg");
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;
}

/deep/ input {
&.verify-sucess {
color: darken($color, 7%) !important; // #57a800
background-color: rgba($color, 0.07) !important; // #edfad7
}
&.verify-error {
color: darken($color-alert, 5%);
background: rgba($color-alert, 0.1) !important;
}
}
251 changes: 136 additions & 115 deletions src/app/modals/coldstake/coldstake.component.html
Original file line number Diff line number Diff line change
@@ -1,138 +1,159 @@
<div [@flyInOut]="animationState" class="col-xs-12">
<div [@flyInOut]="animationState">

<!-- STEP 0: Choose hot/cold wallet -->
<ng-template [ngIf]="step === 0">
<div class="container" fxFlex="100%">
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutWrap>
<p><b>Welcome</b>, read the instructions very carefully!</p>
<p>
<b>Hot wallet:</b>
Selecting this option will turn this computer into a staking node.
It will be <b>unable to spend the coins</b> but is <b>allowed to stake them</b>. <br/>
</p>
<p>
<b>Cold wallet:</b>
Selecting this option will turn this computer into a cold storage node.
It is <b>able to spend</b> the coins but is <b>not allowed to stake them</b>.<br/>
Note: this will create a special transaction with a dust output of 0.00001 and a transaction fee.
<div class="container">
<div class="content">

<div class="title">Cold Staking setup</div>
<p class="warning">
<md-icon fontSet="faIcon" fontIcon="fa-exclamation-triangle"></md-icon>
Please, read these instructions very carefully!
</p>
</div>
<hr class="hr-light">

<div fxLayout="row">

<!-- Hot wallet -->
<div class="hot-wallet" fxFlex="50">
<h2 class="subtitle">Hot wallet</h2>
<p>
Selecting this option will turn this computer into a staking node.
</p>
<ul>
<li>Hot wallet <b>can stake</b> coins</li>
<li>Hot wallet <b>cannot spend</b> coins</li>
</ul>
</div><!-- .hot-wallet -->

<!-- Cold wallet -->
<div class="cold-wallet" fxFlex="50">
<h2 class="subtitle">Cold wallet</h2>
<p>
Selecting this option will turn this computer into a cold storage node.
</p>
<ul>
<li>Cold wallet <b>cannot stake</b> coins</li>
<li>Cold wallet <b>can spend</b> coins</li>
</ul>
<small>
<strong>Note:</strong> this will create a special transaction with a dust output of 0.00001 and a transaction fee.
</small>
</div><!-- .cold-wallet -->

</div><!-- row -->
<div fxLayout="row">

<div class="hot-wallet" fxFlex="50">
<div class="actions">
<button md-raised-button color="warn" (click)="create('hot');">
<md-icon fontSet="faIcon" fontIcon="fa-fire"></md-icon>
Create hot wallet
</button>
</div><!-- .actions -->
</div><!-- .hot-wallet -->

<div class="cold-wallet" fxFlex="50">
<div class="actions">
<button md-raised-button color="primary" (click)="create('cold');">
<md-icon fontSet="faIcon" fontIcon="fa-snowflake-o"></md-icon>
Create cold wallet
</button>
</div><!-- .actions -->
</div><!-- .cold-wallet -->

</div><!-- row -->
</div><!-- .content -->
</div><!-- .container -->
</ng-template>


<hr class="hr-light">
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<div class="button-row align-center">
<button md-raised-button class="create-wallet-action-button" color="warn" (click)="create('hot');">
Create hot wallet
</button>
<button md-raised-button class="create-wallet-action-button" color="primary" (click)="create('cold');">
Create cold wallet
</button>
</div>
</div>
</div>
</ng-template><!-- Step 0 -->

<!-- BOTH WALLETS -->
<ng-template [ngIf]="[1,3].includes(step)">
<div class="container" fxFlex="100%">
<app-unlockwallet
(unlockEmitter)="unlockWallet($event)" [autoClose]="false">
</app-unlockwallet>

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<div class="button-row align-center">
<button md-raised-button class="control" (click)="prevStep();">
Back
</button>
</div>
</div>
</div>
</ng-template><!-- Step 1,3 HOT (,and COLD) -->
<div class="container">
<div class="content">

<ng-template [ngIf]="step === 2 && type === 'hot'">
<div class="container" fxFlex="100%">
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutWrap>
<p>
<b>Hot wallet:</b>
Copy this and enter this into the cold wallet.
</p>
</div>
<app-unlockwallet (unlockEmitter)="unlockWallet($event)" [autoClose]="false">
</app-unlockwallet>

<hr class="hr-light">
<!--div class="actions">
<button md-raised-button class="control" (click)="prevStep();">Back</button>
</div-->

<div class="container">
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<div class="input-gap">
<md-form-field>
<input mdInput value="{{hotStakeAddress}}" disabled readonly/>
</md-form-field>
</div>
<div class="input-gap">
<span class="icon nc-icon nc-copy-2 cursor-pointer"
tooltip="Copy address to clipboard"
placement="top"
container="body"
ngxClipboard [cbContent]="hotStakeAddress">
</span>
</div>
</div>
</div><!-- .content -->
</div><!-- .container -->
</ng-template><!-- Step 1,3 HOT (and COLD) -->

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<div class="button-row align-center">
<button md-raised-button color="primary" class="create-wallet-action-button" (click)="prevStep();">
Back
</button>
<button md-raised-button color="warn" class="create-wallet-action-button" (click)="close()">
Close


<!-- Step 2 (HOT) -->
<ng-template [ngIf]="step === 2 && type === 'hot'">
<div class="container">
<div class="content">
<h2 class="title">Hot wallet setup</h2>
<p>
Copy this address and enter it into your cold wallet.
</p>
<p class="TODO">
When you're finished, you can close this dialog safely.
</p>

<md-form-field class="hot-stake-address">
<input mdInput value="{{hotStakeAddress}}" disabled readonly />
</md-form-field>

<div class="actions text-left">
<button md-raised-button color="primary" ngxClipboard [cbContent]="hotStakeAddress">
<md-icon fontSet="faIcon" fontIcon="fa-clipboard"></md-icon>
<!--span class="icon nc-icon nc-copy-2 cursor-pointer" placement="top" container="body"></span-->
Copy to clipboard
</button>
</div>
</div>
</div>
</div>

<!--div class="actions">
<button md-button (click)="prevStep();">Back</button>
<button md-raised-button color="warn" (click)="close()">Close</button>
</div-->
</div><!-- .content -->
</div><!-- .container -->
</ng-template><!-- /Step 2 HOT -->


<!-- Step 2 (COLD) -->
<ng-template [ngIf]="step === 2 && type === 'cold'">
<div class="container" fxFlex="100%">
<div fxLayout="column" fxLayoutAlign="center center" fxLayoutWrap>
<p>
<b>Please enter the address generated by the hot wallet.</b>
</p>
</div>

<hr class="hr-light">

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<div class="row wallet-buttons-container">
<div class="center text-center">
<md-form-field>
<input mdInput class="form-control width-100" [(ngModel)]="coldStakeAddress"
placeholder="Enter the hot wallet address..."/>
</md-form-field>
<div class="container">
<div class="content">
<h2 class="title">Cold wallet setup</h2>
<p>
Please enter the address generated by the hot wallet.
</p>

<md-form-field class="cold-stake-address">
<input mdInput [(ngModel)]="coldStakeAddress" placeholder="Enter the hot wallet address"/>
</md-form-field>

<div class="actions text-left">
<button md-raised-button color="primary" (click)="nextStep();">Enable cold staking</button>
</div>
</div>
<br/>

<div class="button-row align-center">
<button md-raised-button class="create-wallet-action-button" color="primary" (click)="nextStep();">
Enable cold staking
</button>
</div>

<div class="button-row align-center">
<button md-raised-button class="create-wallet-action-button" color="warn" (click)="resetColdStakingAddress();">
Disable cold staking
</button>
</div>

</div>
</div>

<div class="actions text-left">
<button md-raised-button color="warn" (click)="resetColdStakingAddress()();">Disable cold staking</button>
</div>
</div><!-- .content -->
</div><!-- .container -->
</ng-template><!-- /Step 2 COLD -->


<!-- Step 4 (COLD) -->
<ng-template [ngIf]="step === 4 && type === 'cold'">
<div class="container" fxFlex="100%">
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutWrap>
<b>{{finalMessage}}</b>
</div>
</div>
<div class="container">
<div class="content">
<div class="title">
{{ finalMessage }}
</div>
</div><!-- .content -->
</div><!-- .container -->
</ng-template><!-- Step 4 COLD -->

</div>
21 changes: 19 additions & 2 deletions src/app/modals/coldstake/coldstake.component.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
.input-gap {
margin: 12px !important;
@import "./src/assets/_config"; // import shared colors etc.

@import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.)


.hot-stake-address {
width: 100%;
font-family: monospace;
}

.cold-stake-address {
width: 100%;
margin: 15px 0 0;
font-family: monospace;
}






@media only screen and (max-width: 480px) {
.wallet-buttons-container button {
float: none;
Expand Down
Loading

0 comments on commit 275277c

Please sign in to comment.