(feat): eth purchase modal

src/app/modules/blockchain/marketing/eth-modal.component.html

+<m-modal
+ open="true"
+ (closed)="close.next(true)"
+ >
+
+ <div class="m-blockchain--marketing--modal">
+
+ <h2>Buy ETH</h2>
+
+ <div class="m-layout__row m-blockchainEthModal__form">
+ <div class="m-layout__cell">
+ <input type="number"
+ class="m-input"
+ [(ngModel)]="usd"
+ max="50"
+ />
+ <label>USD</label>
+ </div>
+ <div class="m-layout__cell m-blockchainEthModal__eq">
+ <span>=</span>
+ </div>
+ <div class="m-layout__cell">
+ <input type="number"
+ class="m-input"
+ [ngModel]="eth"
+ (ngModelChange)="setEth($event)"
+ />
+ <label>ETH</label>
+ </div>
+ </div>
+
+ <p>ETH is estimated at 1 ETH = <b>$</b>{{ ethRate }}. The checkout process will produce a more accurate ETH value.</p>
+
+ <p class="m-error mdl-color-text--red" *ngIf="usd > 50">
+ You can not purchase more than $50 worth of ETH
+ </p>
+
+ <button class="m-btn m-btn--slim m-btn--action" (click)="buy()">
+ Buy with SendWyre
+ </button>
+
+ </div> 
+</m-modal>

src/app/modules/blockchain/marketing/eth-modal.component.scss

+.m-blockchainEthModal__form {
+ margin: 36px 0;
+
+ .m-input {
+ padding: 16px;
+ font-size: 24px;
+ border-radius: 24px;
+ letter-spacing: 2px;
+ text-align: center;
+ }
+
+ .m-layout__cell {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: center;
+ }
+
+ label {
+ padding: 16px;
+ font-weight: 600;
+ }
+
+ .m-blockchainEthModal__eq {
+ flex: 0;
+ padding: 0 16px;
+ }
+}

src/app/modules/blockchain/marketing/eth-modal.component.ts

+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ ElementRef, Input,
+ OnDestroy,
+ OnInit,
+ ViewChild,
+ Output,
+ EventEmitter,
+} from '@angular/core';
+import { Client } from '../../../services/api/client';
+import { MindsTitle } from '../../../services/ux/title';
+import { WireCreatorComponent } from '../../wire/creator/creator.component';
+import { OverlayModalService } from '../../../services/ux/overlay-modal';
+import { BlockchainTdeBuyComponent } from '../tde-buy/tde-buy.component';
+import { Session } from '../../../services/session';
+import { Web3WalletService } from '../web3-wallet.service';
+import { TokenDistributionEventService } from '../contracts/token-distribution-event.service';
+import * as BN from 'bn.js';
+
+@Component({
+ selector: 'm-blockchain__eth-modal',
+ templateUrl: 'eth-modal.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BlockchainEthModalComponent implements OnInit {
+
+ @Input() rate = 1;
+ @Output() close: EventEmitter<boolean> = new EventEmitter(true);
+
+ error: string = '';
+ usd: number = 40;
+
+ ngOnInit() {
+ // grab latest ETH rate
+ }
+
+ get ethRate(): number {
+ const tokenUsdRate = 0.15;
+ const tokenUsd = 1 / tokenUsdRate;
+ const usd = this.rate / tokenUsd;
+ return usd;
+ }
+
+ get eth(): number {
+ return this.usd / this.ethRate; 
+ }
+
+ setEth(eth) {
+ this.usd = eth * this.ethRate;
+ }
+
+ buy() {
+ this.error = '';
+ if (this.usd > 40) {
+ this.usd = 40;
+ this.error = 'You can not purchase more than $40';
+ }
+ let win = window.open('/checkout?usd=' + this.usd);
+ this.close.next(true);
+ }
+
+}

src/app/modules/blockchain/marketing/marketing.module.ts

@@ -14,6 +14,7 @@ import { BlockchainPurchaseComponent } from './purchase.component';
 import { BlockchainMarketingOnboardComponent } from './onboard.component';
 import { BlockchainMarketingBlogsComponent } from './blogs.component';
 import { BlockchainMarketingCountdownComponent } from './countdown.component';
+import { BlockchainEthModalComponent } from './eth-modal.component';
 import { ModalsModule } from '../../modals/modals.module';
 
 const routes: Routes = [
@@ -46,6 +47,7 @@ const routes: Routes = [
  BlockchainPurchaseComponent,
  BlockchainMarketingBlogsComponent,
  BlockchainMarketingCountdownComponent,
+ BlockchainEthModalComponent,
  ],
  exports: [
  BlockchainMarketingComponent,

src/app/modules/blockchain/marketing/purchase.component.html

@@ -166,3 +166,10 @@
 
  </div>
 </m-modal>
+
+<m-blockchain__eth-modal
+ *ngIf="showEthModal"
+ [rate]="rate"
+ (close)="closePurchaseEth()"
+ >
+</m-blockchain__eth-modal>

src/app/modules/blockchain/marketing/purchase.component.ts

@@ -7,6 +7,9 @@ import {
  OnInit,
  ViewChild,
 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
+
 import { Client } from '../../../services/api/client';
 import { MindsTitle } from '../../../services/ux/title';
 import { WireCreatorComponent } from '../../wire/creator/creator.component';
@@ -44,6 +47,7 @@ export class BlockchainPurchaseComponent implements OnInit {
  minds = window.Minds;
  showPledgeModal: boolean = false;
  showLoginModal: boolean = false;
+ showEthModal: boolean = false;
  confirming: boolean = false;
  confirmed: boolean = false;
  error: string;
@@ -52,6 +56,8 @@ export class BlockchainPurchaseComponent implements OnInit {
  inProgress: boolean = false;
  rate: number = 0;
 
+ paramsSubscription: Subscription;
+
  constructor(
  protected client: Client,
  protected changeDetectorRef: ChangeDetectorRef,
@@ -59,7 +65,8 @@ export class BlockchainPurchaseComponent implements OnInit {
  protected overlayModal: OverlayModalService,
  protected web3Wallet: Web3WalletService,
  protected tde: TokenDistributionEventService,
- public session: Session
+ public session: Session,
+ private route: ActivatedRoute,
  ) { }
 
  ngOnInit() {
@@ -67,6 +74,17 @@ export class BlockchainPurchaseComponent implements OnInit {
  this.load().then(() => {
  this.amount = 0.25;
  });
+ this.paramsSubscription = this.route.params.subscribe(params => {
+ if (params.purchaseEth) {
+ this.purchaseEth();
+ }
+ });
+ }
+
+ ngOnDestroy() {
+ if (this.paramsSubscription) {
+ this.paramsSubscription.unsubscribe();
+ }
  }
 
  get amount() {
@@ -154,10 +172,17 @@ export class BlockchainPurchaseComponent implements OnInit {
  }
 
  purchaseEth() {
- let win = window.open('/checkout');
- win.onload = function() {
- alert('opened');
- }
+ this.showEthModal = true;
+ this.detectChanges();
+ //let win = window.open('/checkout');
+ //win.onload = function() {
+ // alert('opened');
+ //}
+ }
+
+ closePurchaseEth() {
+ this.showEthModal = false;
+ this.detectChanges();
  }
 
  closeLoginModal() {

src/app/modules/wallet/balances/tokens/balance.component.html

@@ -98,9 +98,8 @@
  >
  Buy Tokens
  </a>
- <a href="/checkout"
+ <a [routerLink]="['/token', { 'purchaseEth': 'open' }]"
  class="m-btn m-btn--slim m-btn--action"
- target="_blank"
  >
  Buy ETH
  </a>