package.json

@@ -42,6 +42,7 @@
  "material-design-lite": "~1.3.0",
  "medium-editor": "^5.23.2",
  "plotly.js": "^1.47.4",
+ "qrcodejs2": "0.0.2",
  "rxjs": "~6.5.2",
  "socket.io-client": "^2.2.0",
  "tslib": "~1.9.3",

src/app/common/common.module.ts

@@ -32,6 +32,7 @@ import {
 import { Scheduler } from './components/scheduler/scheduler';
 import { Modal } from './components/modal/modal.component';
 import { MindsRichEmbed } from './components/rich-embed/rich-embed';
+import { QRCodeComponent } from './components/qr-code/qr-code.component';
 
 import { MDL_DIRECTIVES } from './directives/material';
 import { AutoGrow } from './directives/autogrow';
@@ -139,6 +140,7 @@ import { HorizontalInfiniteScroll } from "./components/infinite-scroll/horizonta
  MindsRichEmbed,
  TagcloudComponent,
  DropdownComponent,
+ QRCodeComponent,
 
  AutoGrow,
  InlineAutoGrow,
@@ -223,6 +225,7 @@ import { HorizontalInfiniteScroll } from "./components/infinite-scroll/horizonta
  MindsRichEmbed,
  TagcloudComponent,
  DropdownComponent,
+ QRCodeComponent,
 
  AutoGrow,
  InlineAutoGrow,

src/app/common/components/qr-code/qr-code.component.ts

+import {
+ Component,
+ Input,
+ ElementRef,
+} from '@angular/core';
+
+declare var require: any;
+let QRCode: any;
+
+@Component({
+ selector: 'm-qr-code',
+ template: '',
+})
+export class QRCodeComponent {
+
+ qrcode;
+ @Input() data: string = '';
+
+ constructor(public el: ElementRef) { }
+
+ ngOnInit() {
+ if (!QRCode) {
+ QRCode = require('qrcodejs2');
+ }
+ this.qrcode = new QRCode(this.el.nativeElement, {
+ colorDark: '#000',
+ colorLight: '#FFF',
+ correctLevel: QRCode.CorrectLevel['M'],
+ height: 300,
+ text: this.data || ' ',
+ useSVG: true,
+ width: 300,
+ });
+ }
+
+}

src/app/modules/monetization/revenue/console.component.ts

@@ -24,7 +24,7 @@ export class RevenueConsoleComponent {
  }
 
  ngOnInit() {
- if (!this.session.getLoggedInUser().merchant) {
+ if (!this.session.getLoggedInUser().merchant || this.session.getLoggedInUser().merchant.deleted) {
  this.router.navigate(['/wallet/usd/onboarding']);
  }
  }

src/app/modules/monetization/revenue/options.component.ts

@@ -37,7 +37,7 @@ export class RevenueOptionsComponent {
 
  getSettings() {
  this.inProgress = true;
- this.client.get('api/v2/wallet/usd/settings')
+ this.client.get('api/v2/payments/stripe/connect')
  .then(({ account }) => {
  this.inProgress = false;
  this.payoutMethod.country = account.country;
@@ -55,7 +55,7 @@ export class RevenueOptionsComponent {
  this.editing = false;
  this.detectChanges();
 
- this.client.post('api/v1/monetization/settings', this.form.value)
+ this.client.post('api/v2/payments/stripe/connect/bank', this.form.value)
  .then((response: any) => {
  this.inProgress = false;
  this.getSettings();
@@ -70,7 +70,7 @@ export class RevenueOptionsComponent {
  leave() {
  this.leaving = true;
  this.detectChanges();
- this.client.delete('api/v1/monetization/settings/account')
+ this.client.delete('api/v2/payments/stripe/connect')
  .then((response: any) => {
  (<any>window).Minds.user.merchant = [];
  this.router.navigate(['/newsfeed']);

src/app/modules/payments/btc/btc.component.html

+<div class="m-btc__wrapper">
+ <p>Please scan the following QR code, or send <b>{{ amount }} BTC</b> to <b>{{ address }}</b>.</p>
+
+ <m-qr-code
+ [data]="qrdata"
+ >
+ </m-qr-code>
+</div>

src/app/modules/payments/btc/btc.component.scss

+.m-btc__wrapper {
+ m-qr-code {
+ width: 300px;
+ height: 300px;
+ display: block;
+ position: relative;
+ }
+}

src/app/modules/payments/btc/btc.component.ts

+import {
+ Component,
+ ChangeDetectorRef,
+ ChangeDetectionStrategy,
+} from '@angular/core';
+
+@Component({
+ selector: 'm-btc',
+ templateUrl: 'btc.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BTCComponent {
+ 
+ address: string = '1DWPuJjcZWzsRPCwss4gYqgeUpkj5AD1yu';
+ amount: string = '0.01';
+
+ set data(data) {
+ this.address = data.address;
+ this.amount = data.amount;
+ }
+
+ get qrdata() {
+ return 'bitcoin:' + this.address + '?amount=' + this.amount;
+ }
+
+}
+

src/app/modules/payments/btc/btc.service.ts

+import { Injectable } from '@angular/core';
+
+import { OverlayModalService } from '../../../services/ux/overlay-modal';
+import { BTCComponent } from './btc.component';
+
+@Injectable()
+export class BTCService {
+
+ constructor(
+ private overlayModal: OverlayModalService,
+ ) { }
+
+ showModal(opts) {
+ this.overlayModal
+ .create(BTCComponent, opts)
+ .present();
+ }
+
+}
+

src/app/modules/payments/btc/settings.component.html

+<form class="m-form">
+ <p>You can receive Bitcoin (BTC) payments via wire by inputing a receiver address below. Note: You may want to rotate this address frequently to avoid 3rd parties tracking your transactions.</p>
+ <label>Bitcoin Address</label>
+ <input 
+ class="m-input"
+ [(ngModel)]="btcAddress"
+ [ngModelOptions]="{standalone: true}"
+ />
+ <button
+ class="m-btn m-btn--slim m-btn--action"
+ [disabled]="!btcAddress || saving"
+ (click)="save()"
+ >
+ <ng-container *ngIf="saving">
+ Saving...
+ </ng-container>
+ <ng-container *ngIf="!saving">
+ Save
+ </ng-container>
+ </button>
+</form>

src/app/modules/payments/btc/settings.component.scss

+m-btc__settings {
+ label {
+ font-weight: 600;
+ }
+ input {
+ margin: 8px 0;
+ border: 1px solid #ccc;
+ border-radius: 32px;
+ }
+}

src/app/modules/payments/btc/settings.component.ts

+import {
+ Component,
+ ChangeDetectorRef,
+ ChangeDetectionStrategy,
+} from '@angular/core';
+
+import { Client } from '../../../services/api';
+
+@Component({
+ selector: 'm-btc__settings',
+ templateUrl: 'settings.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BTCSettingsComponent {
+
+ btcAddress: string = '';
+ saving: boolean = false;
+
+ constructor(
+ private client: Client,
+ private cd: ChangeDetectorRef,
+ ) { }
+
+ ngOnInit() {
+ this.getAddressFromRemote();
+ }
+
+ async getAddressFromRemote() {
+ const { address } = <any>await this.client.get('api/v2/wallet/btc/address');
+ this.btcAddress = address;
+ this.detectChanges();
+ }
+
+ async save() {
+ this.saving = true;
+ await this.client.post('api/v2/wallet/btc/address', {
+ address: this.btcAddress,
+ });
+ this.saving = false;
+ this.detectChanges();
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+
+
+}
+

src/app/modules/payments/payments.module.ts

@@ -10,6 +10,9 @@ import { PayWall } from './paywall/paywall.component';
 import { PaywallCancelButton } from './paywall/paywall-cancel.component';
 import { PaymentsNewCard } from './new-card/new-card.component';
 import { PaymentsSelectCard } from './select-card/select-card.component';
+import { BTCService } from './btc/btc.service';
+import { BTCComponent } from './btc/btc.component';
+import { BTCSettingsComponent } from './btc/settings.component';
 
 @NgModule({
  imports: [
@@ -25,6 +28,8 @@ import { PaymentsSelectCard } from './select-card/select-card.component';
  PaywallCancelButton,
  PaymentsNewCard,
  PaymentsSelectCard,
+ BTCComponent,
+ BTCSettingsComponent,
  ],
  exports: [
  PayWall,
@@ -32,8 +37,13 @@ import { PaymentsSelectCard } from './select-card/select-card.component';
  PaymentsNewCard,
  PaymentsSelectCard,
  ],
+ providers: [
+ BTCService,
+ ],
  entryComponents: [
  PaymentsNewCard,
+ BTCComponent,
+ BTCSettingsComponent,
  ],
 })
 export class PaymentsModule {

src/app/modules/payments/select-card/select-card.component.ts

@@ -24,7 +24,7 @@ import { Session } from '../../../services/session';
 export class PaymentsSelectCard {
 
  minds = (<any>window).Minds;
- @Output() selected: EventEmitter<void> = new EventEmitter();
+ @Output() selected: EventEmitter<string> = new EventEmitter();
  paymentMethodId: string = '';
  paymentMethods = [];
 

src/app/modules/settings/billing/subscriptions/subscriptions.component.html

@@ -29,6 +29,7 @@
  <ng-template ngSwitchCase="money">{{ subscription.amount | currency:'USD':true }}</ng-template>
  <ng-template ngSwitchCase="tokens" i18n="@@SETTINGS__BILLING__SUBSCRIPTIONS__TOKENS_LABEL">{{ subscription.amount | token:18 | number }} Tokens</ng-template>
  <ng-template ngSwitchCase="points" i18n="@@SETTINGS__BILLING__SUBSCRIPTIONS__POINTS_LABEL">{{ subscription.amount | number:'1.0-0' }} Points</ng-template>
+ <ng-template ngSwitchCase="usd">{{ subscription.amount | token:2 }} USD</ng-template>
  </span>
 
  <span class="m-settings--billing-subscriptions--subscription-item-select" (click)="cancel(i)" i18n="@@M__ACTION__CANCEL">Cancel</span>

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

@@ -56,6 +56,12 @@
  >
  <i class="material-icons">attach_money</i>
  <span i18n="@@WALLET__TOKENS__TESTNET_TOKENS">USD Console</span>
+ </a>
+	 <a class="m-page--sidebar--navigation--item"
+ (click)="openBtcSettingsModal()" 
+ >
+ <i class="material-icons">settings</i>
+ <span i18n="@@WALLET__TOKENS__TESTNET_TOKENS">BTC Console</span>
  </a>
  <a class="m-page--sidebar--navigation--item"
  (click)="invite.open = true"

src/app/modules/wallet/tokens/tokens.component.ts

 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
+import { OverlayModalService } from '../../../services/ux/overlay-modal';
+import { BTCSettingsComponent } from '../../payments/btc/settings.component';
+
 @Component({
- moduleId: module.id,
  selector: 'm-wallet--tokens',
  templateUrl: 'tokens.component.html'
 })
@@ -11,9 +13,18 @@ export class WalletTokensComponent {
  showOnboarding: boolean = false;
  minds = window.Minds;
 
- constructor(route: ActivatedRoute) {
+ constructor(
+ route: ActivatedRoute,
+ private overlayModal: OverlayModalService,
+ ) {
  route.url.subscribe(() => {
  this.showOnboarding = route.snapshot.firstChild && route.snapshot.firstChild.routeConfig.path === 'transactions';
  });
  }
+
+ openBtcSettingsModal() {
+ this.overlayModal
+ .create(BTCSettingsComponent, {})
+ .present();
+ }
 }

src/app/modules/wallet/usd/onboarding/onboarding.component.ts

 import { Component, OnInit, Output, EventEmitter, Input, ChangeDetectorRef } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Client } from '../../../../services/api';
 
 import { requiredFor, optionalFor } from './onboarding.validators';
@@ -28,6 +29,7 @@ export class WalletUSDOnboardingComponent implements OnInit {
  private fb: FormBuilder,
  private client: Client,
  private cd: ChangeDetectorRef,
+ private router: Router,
  protected overlayModal: OverlayModalService,
  ) { }
 
@@ -90,7 +92,7 @@ export class WalletUSDOnboardingComponent implements OnInit {
  }
  }
 
- onboard() {
+ async onboard() {
  if (this.inProgress) {
  return;
  }
@@ -98,22 +100,25 @@ export class WalletUSDOnboardingComponent implements OnInit {
  this.inProgress = true;
  this.error = '';
 
- this.client.post('api/v2/wallet/usd/onboarding', this.form.value)
- .then((response: any) => {
-  this.inProgress = false;
+ try {
+ const response = <any>await this.client.post('api/v2/wallet/usd/onboarding', this.form.value)
+ this.inProgress = false;
 
-  if (!this.minds.user.programs)
-  this.minds.user.programs = [];
-  this.minds.user.programs.push('affiliate');
+ if (!this.minds.user.programs)
+ this.minds.user.programs = [];
+ this.minds.user.programs.push('affiliate');
 
- this.completed.emit(response);
- this.detectChanges();
- })
- .catch((e) => {
- this.inProgress = false;
- this.error = e.message;
- this.detectChanges();
- });
+ this.minds.user.merchant = {
+ 'id': response.account.id,
+ 'service': 'stripe',
+ };
+
+ this.router.navigate(['/wallet/usd/']);
+ } catch(e) {
+ this.inProgress = false;
+ this.error = e.message;
+ this.detectChanges();
+ }
  }
 
  update() {

src/app/modules/wire/button/button.component.ts

@@ -10,7 +10,7 @@ import { Session } from '../../../services/session';
  template: `
  <button class="m-btn m-btn--action m-btn--slim m-wire-button" (click)="wire()">
  <i class="ion-icon ion-flash"></i>
- <span>Donate</span>
+ <span>Wire</span>
  </button>
  `
 })

src/app/modules/wire/channel/channel.component.html

@@ -7,7 +7,7 @@
  <i class="ion-icon ion-flash"></i>
 
  <span class="m-wire-channel--cta-label">
- <span i18n="@@WIRE__CHANNEL__WIRE_ME_ACTION">Donate</span>
+ <span i18n="@@WIRE__CHANNEL__WIRE_ME_ACTION">Wire me</span>
  </span>
  </button>
 </div>

src/app/modules/wire/creator/creator.component.html

@@ -9,23 +9,33 @@
  </div>
 
  <p class="m-wire-creator--subtext" i18n="@@WIRE__CREATOR__WIRE_NOTICE_TOKENS">
- <b>Support <span>@</span>{{owner.username}}</b> by sending them Minds Tokens, ETH or USD. Once you send them the amount listed in the tiers, you can receive rewards if they are offered. Otherwise, it's a donation.
+ <b>Support <span>@</span>{{owner.username}}</b> by sending them Minds Tokens, ETH, BTC or USD. Once you send them the amount listed in the tiers, you can receive rewards if they are offered (Tokens & USD only). Otherwise, it's a donation.
  </p>
  </div>
  </div>
 
- <m-wire--creator-rewards
- [rewards]="owner?.wire_rewards"
- [type]="tokens"
- [amount]="wire.amount"
- (selectAmount)="setAmount($event)"
- [channel]="owner"
- [sums]="sums"
- ></m-wire--creator-rewards>
-
  <section class="m-wire--creator-section-row">
  <!-- Amount -->
  <section class="m-wire--creator-section">
+
+ <div class="m-wireCreator__rewardSelector" *ngIf="owner.wire_rewards?.rewards && (owner.wire_rewards.rewards['tokens'] || owner.wire_rewards.rewards['money'])">
+ <h3 class="m-wire--creator-section-title--small">
+ <ng-container i18n="@@WIRE__CREATOR__AMOUNT_TITLE_HOW_MANY_TOKENS">
+ Pick a subscriptions tier 
+ </ng-container>
+ </h3>
+
+ <m-wireCreator__rewards
+ [rewards]="owner?.wire_rewards"
+ [amount]="wire.amount"
+ (selectReward)="setTier($event)"
+ [currency]="wire.payloadType"
+ [channel]="owner"
+ [sums]="sums"
+ ></m-wireCreator__rewards>
+ </div>
+
+ <!-- Amount -->
  <h3 class="m-wire--creator-section-title--small">
  <ng-container i18n="@@WIRE__CREATOR__AMOUNT_TITLE_HOW_MANY_TOKENS">
  How much do you want to send?
@@ -53,7 +63,7 @@
  <span i18n="tokens input|@@M__COMMON__TOKENS_INPUT" *ngIf="wire.payloadType === 'usd'">USD</span>
  <span i18n="tokens input|@@M__COMMON__TOKENS_INPUT" *ngIf="wire.payloadType === 'eth'">ETH</span>
  <span i18n="tokens input|@@M__COMMON__TOKENS_INPUT" *ngIf="wire.payloadType === 'btc'">BTC</span>
- <span i18n="tokens input|@@M__COMMON__TOKENS_INPUT" *ngIf="wire.payloadType === 'money'">ERC-20</span>
+ <span i18n="tokens input|@@M__COMMON__TOKENS_INPUT" *ngIf="wire.payloadType === 'erc20'">ERC-20</span>
  <ul *ngIf="false">
  <li>USD</li>
  <li>ETH</li>
@@ -161,6 +171,21 @@
  </div>
  <span class="m-wire--creator-selector--selected-label" i18n="@@M__COMMON__SELECTED">Selected</span>
  </li>
+ <li
+ (click)="setPayloadType('btc')"
+ [class.m-wire--creator-selector--highlight]="!wire.payloadType || wire.payloadType === 'btc'"
+ >
+ <div class="m-wire--creator-selector-type">
+ <img [src]="minds.cdn_assets_url + '/assets/marketing/btc.svg'" style="margin-left: -12px">
+ <h5>
+ <span i18n="@@M__COMMON__ONCHAIN">BTC</span>
+ <m-tooltip icon="help" i18n="@@WIRE__CREATOR__OFFCHAIN_TOOLTIP">
+ You can send BTC to this user, however it will not recur. 
+ </m-tooltip>
+ </h5>
+ </div>
+ <span class="m-wire--creator-selector--selected-label" i18n="@@M__COMMON__SELECTED">Selected</span>
+ </li>
  <li
  (click)="setPayloadType('onchain')"
  [class.m-wire--creator-selector--highlight]="!wire.payloadType || wire.payloadType === 'onchain'"

src/app/modules/wire/creator/creator.component.scss

@@ -833,24 +833,12 @@
 
 // Creator Rewards component
 
-.m-wire--creator-rewards {
- display: block;
- //border-left: 1px solid rgba(0, 0, 0, 0.2);
- //padding: ($minds-padding * 3) 0 ($minds-padding * 3) 60px;
- font-family: inherit;
- font-weight: 200;
+.m-wire--creator-rewards, .m-wireCreator__rewardSelector {
+ 
  @include m-theme(){
  color: themed($m-grey-700);
  }
 
- @media screen and (max-width: $max-mobile) {
- position: initial;
- max-width: none;
- border: none;
- padding: 0 ($minds-padding * 2);
- margin: ($minds-padding * 2) 0;
- }
-
  .m-wire--creator-rewards--title {
  display: flex;
  flex-direction: row;
@@ -872,11 +860,8 @@
  }
  }
 
- .m-wire--creator-rewards--list {
+ m-wirecreator__rewards {
  //max-width: 360px;
- display: flex;
- flex-direction: row;
- list-style: none;
  margin: 0;
  padding: 0;
  @include m-theme(){
@@ -908,13 +893,19 @@
  letter-spacing: 2.5px;
  }
 
- .m-wire--creator-rewards--description p {
+ .m-wire--creator-rewards--description {
+ padding: $minds-padding;
+ > * {
+ display: inline;
+ } 
+ p {
  font-family: 'Roboto';
  padding: 0;
  margin: 4px 0;
  line-height: 1.1;
  font-size: 12px;
  font-weight: 400;
+ }
  }
  }
 }
@@ -969,3 +960,9 @@
  }
  }
 }
+
+.m-wireCreator__rewardSelector {
+ margin-right: 64px;
+ margin-bottom: 16px;
+}
+

src/app/modules/wire/creator/creator.component.ts

@@ -11,7 +11,7 @@ import { TokenContractService } from '../../blockchain/contracts/token-contract.
 import { MindsUser } from '../../../interfaces/entities';
 import { Router } from '@angular/router';
 
-export type PayloadType = 'onchain' | 'offchain' | 'usd' | 'eth';
+export type PayloadType = 'onchain' | 'offchain' | 'usd' | 'eth' | 'erc20' | 'btc';
 
 export class VisibleWireError extends Error {
  visible: boolean = true;
@@ -39,7 +39,7 @@ export class WireCreatorComponent {
  amount: 1,
  payloadType: 'onchain',
  guid: null,
- recurring: false,
+ recurring: true,
 
  // Payment
  payload: null
@@ -224,7 +224,7 @@ export class WireCreatorComponent {
 
  setDefaults() {
  this.wire.amount = 1;
- this.wire.recurring = false;
+ this.wire.recurring = true;
  let payloadType = localStorage.getItem('preferred-payment-method');
  if (['onchain', 'offchain'].indexOf(payloadType) === -1) {
  payloadType = 'offchain';
@@ -248,6 +248,10 @@ export class WireCreatorComponent {
  this.setOnchainNoncePayload('');
  }
 
+ if (payloadType === 'btc') {
+ this.setBtcNoncePayload('');
+ }
+
  localStorage.setItem('preferred-payment-method', payloadType);
 
  this.roundAmount();
@@ -269,6 +273,10 @@ export class WireCreatorComponent {
  return this.setNoncePayload({ receiver: this.owner.eth_wallet, address })
  }
 
+ setBtcNoncePayload(address: string) {
+ return this.setNoncePayload({ receiver: this.owner.btc_address, address });
+ }
+
  /**
  * Sets the creditcard specific wire payment nonce
  */
@@ -421,6 +429,11 @@ export class WireCreatorComponent {
  // throw new Error('Payment method not processed.');
  //}
  break;
+ case 'btc':
+ if (!this.wire.payload.receiver) {
+ throw new VisibleWireError('This channel has not configured their Bitcoin address yet');
+ }
+ break;
  }
 
  if (!this.wire.guid) {
@@ -517,7 +530,7 @@ export class WireCreatorComponent {
 
  get canRecur(): boolean {
  switch (this.wire.payloadType) {
- case 'onchain':
+ //case 'onchain':
  case 'offchain':
  case 'usd':
  return true;
@@ -531,4 +544,18 @@ export class WireCreatorComponent {
  };
  }
 
+ setTier(reward) {
+ if (!reward)
+ return;
+ this.wire.amount = reward.amount;
+ switch (reward.currency) {
+ case 'tokens':
+ this.wire.payloadType = 'offchain';
+ break;
+ default:
+ this.wire.payloadType = reward.currency;
+ }
+ console.log('setting tier with', this.wire.amount, this.wire.payloadType);
+ }
+
 }

src/app/modules/wire/creator/rewards/rewards.component.html

-<div *ngIf="rewards?.rewards[type]?.length"
- class="m-wire--creator-rewards"
->
-
- <div class="m-wire--creator-rewards--title">
- <h3 *ngIf="channel?.username" class="m-wire--creator-section-title--small" i18n="@@WIRE__CREATOR__REWARDS__TITLE">
- {{ channel.username }}'s rewards
- </h3>
-
- <div *ngIf="sums" class="m-wire--creator-rewards--sums">
- <ng-container i18n="@@WIRE__CREATOR__REWARDS__YOU_SENT_LABEL">You have sent</ng-container>
-
- <b *ngIf="type == 'points'" i18n="@@M__COMMON__POINTS_WITH_VALUE">
-  {{ sums.points | number }} points
-  </b>
-
-  <b *ngIf="type == 'money'">
-  {{ sums.money | currency:'USD':true:'1.0-0' }}
- </b>
+<div class="m-selector">
+ <select [ngModel]="selectedReward" (ngModelChange)="selectReward($event)">
+ <option *ngFor="let reward of rewards"
+ [ngValue]="reward"
+  >
+  {{ reward.amount }} 
+ <ng-container *ngIf="reward.currency == 'tokens'">
+  {{ reward.amount > 1 ? 'Tokens' : 'Token' }}
+ </ng-container>
+  <ng-container *ngIf="reward.currency == 'usd'">
+  USD
+ </ng-container>
+ / month
+ </option>
+ <option
+ [ngValue]="null"
+ >Custom subscription</option>
+ </select>
+</div>
 
- <b *ngIf="type == 'tokens'">
- {{ sums.tokens | number:'1.0-4' }}
- </b>
+<div>
 
- <ng-container i18n="@@WIRE__CREATOR__REWARDS__IN_THE_LAST_MONTH">in the last month.</ng-container>
+ <div *ngIf="selectedReward && !selectedReward.custom">
+ <div class="m-wire--creator-rewards--amount"> 
+ <span *ngIf="type == 'money'">{{ selectedReward.amount | currency:'USD':true:'1.0-0' }}</span>
+ <span *ngIf="type == 'points'" i18n="@@M__COMMON__POINTS_WITH_VALUE">{{ selectedReward.amount | number }} points</span>
+ <span *ngIf="type == 'tokens'" i18n="@@M__COMMON__TOKENS_WITH_VALUE">{{ selectedReward.amount | number }} Tokens</span>
+ </div>
+ <div class="m-wire--creator-rewards--description"> 
+ <b>{{ selectedReward.amount }} 
+ <ng-container *ngIf="selectedReward.currency === 'usd'">USD</ng-container>
+ <ng-container *ngIf="selectedReward.currency === 'tokens'">{{ selectedReward.amount > 1 ? 'Tokens' : 'Token' }}</ng-container>
+ </b> - <p>{{ selectedReward.description ? selectedReward.description : 'No description' }}</p>
  </div>
  </div>
-
- <ul class="m-wire--creator-rewards--list">
- <ng-container *ngFor="let reward of rewards.rewards[type]; let i = index">
- <li class="m-wire--creator-rewards--threshold"
- [class.m-wire--creator-rewards--above-threshold]="isRewardAboveThreshold(i)"
- [class.m-wire--creator-rewards--best-reward]="isBestReward(i)"
- (click)="selectReward(i)"
- >
- <div class="m-wire--creator-rewards--amount">
- <span *ngIf="type == 'money'">{{ reward.amount | currency:'USD':true:'1.0-0' }}</span>
- <span *ngIf="type == 'points'" i18n="@@M__COMMON__POINTS_WITH_VALUE">{{ reward.amount | number }} points</span>
- <span *ngIf="type == 'tokens'" i18n="@@M__COMMON__TOKENS_WITH_VALUE">{{ reward.amount | number }} Tokens</span>
- </div>
- <div class="m-wire--creator-rewards--description"> 
- <p>{{ reward.description }}</p>
- </div>
- </li>
- </ng-container>
- </ul>
 </div>

src/app/modules/wire/creator/rewards/rewards.component.ts

@@ -3,52 +3,85 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { WireRewardsType, WireRewardsStruc, WireRewardsTiers } from '../../interfaces/wire.interfaces';
 
 @Component({
- moduleId: module.id,
- selector: 'm-wire--creator-rewards',
+ selector: 'm-wireCreator__rewards',
  templateUrl: 'rewards.component.html'
 })
 export class WireCreatorRewardsComponent {
 
- @Input() rewards: WireRewardsStruc;
+ rewards: Array<any> = [];
+ @Input() amount: number = 1;
+ currency: string = 'tokens';
+
  @Input() type: WireRewardsType | null;
- @Input() amount: string | number;
  @Input() channel: any;
  @Input() sums: any;
  @Output() selectAmount: EventEmitter<any> = new EventEmitter(true);
+ @Output() selectCurrency: EventEmitter<string> = new EventEmitter(true);
+ @Output('selectReward') selectRewardEvt: EventEmitter<any> = new EventEmitter(true);
 
- isRewardAboveThreshold(index: number): boolean {
- if (!this.rewards || !this.type || !this.calcAmount()) {
- return false;
- }
-
- return this.calcAmount() >= this.rewards.rewards[this.type][index].amount;
+ selectReward(reward): void {
+ this.selectRewardEvt.next(reward);
+ // this.selectAmount.next(reward.amount);
+ //this.selectCurrency.next(reward.currency);
  }
 
- isBestReward(index: number): boolean {
- if (!this.rewards || !this.type || !this.calcAmount()) {
- return false;
+ get selectedReward() {
+ const methods = [
+ { method: 'money', currency: 'usd' },
+ { method: 'tokens', currency: 'offchain' },
+ ];
+ for (const method of methods) {
+ const match = this.findReward();
+ if (match) {
+ //this.selectReward(match);
+ return match;
+ break;
+ }
  }
-
- const lastEligibleReward = this.rewards.rewards[this.type]
- .map((reward, index) => ({ ...reward, index }))
- .filter(reward => this.calcAmount() >= reward.amount)
- .pop();
-
- return lastEligibleReward ?
- index === lastEligibleReward.index :
- false;
+ return null;
  }
 
- calcAmount(): number {
- if (this.sums && this.sums[this.type]) {
- return parseFloat(this.sums[this.type]) + parseFloat(<string>this.amount);
+ /**
+ * Return a reward that closest matches our query
+ * @param method 
+ */ 
+ private findReward() {
+ for (let r of this.rewards) {
+ if (this.currency === r.currency && this.amount == r.amount) {
+ return r;
+ }
  }
+ return null; 
+ }
 
- return <number>this.amount;
+ @Input('rewards') set _rewards(rewards) {
+ this.rewards = [];
+ const methodsMap = [
+ { method: 'money', currency: 'usd' },
+ { method: 'tokens', currency: 'tokens' },
+ ];
+ for (const { method, currency } of methodsMap) {
+ for (const reward of rewards.rewards[method]) {
+ this.rewards.push({
+ amount: parseInt(reward.amount),
+ description: reward.description,
+ currency
+ });
+ }
+ }
  }
 
- selectReward(index: number): void {
- this.selectAmount.next(this.rewards.rewards[this.type][index].amount);
+ @Input('currency') set _currency(currency: string) {
+ switch (currency) {
+ //case 'money':
+ //currency = 'usd';
+ // break;
+ case 'offchain':
+ case 'onchain':
+ currency = 'tokens';
+ break;
+ }
+ this.currency = currency;
  }
 
 }

src/app/modules/wire/wire.service.ts

@@ -4,6 +4,7 @@ import { WireContractService } from '../blockchain/contracts/wire-contract.servi
 import { TokenContractService } from '../blockchain/contracts/token-contract.service';
 import { Web3WalletService } from '../blockchain/web3-wallet.service';
 import { WireStruc } from './creator/creator.component';
+import { BTCService } from '../payments/btc/btc.service';
 
 @Injectable()
 export class WireService {
@@ -13,7 +14,8 @@ export class WireService {
  private client: Client,
  private wireContract: WireContractService,
  private tokenContract: TokenContractService,
- private web3Wallet: Web3WalletService
+ private web3Wallet: Web3WalletService,
+ private btcService: BTCService,
  ) { }
 
  async submitWire(wire: WireStruc) {
@@ -81,6 +83,14 @@ export class WireService {
  case 'offchain':
  payload = { method: 'offchain', address: 'offchain' };
  break;
+
+ case 'btc':
+ this.btcService.showModal({
+ amount: wire.amount,
+ address: wire.payload.receiver,
+ });
+ return;
+ break;
  }
 
  try {

src/assets/marketing/btc.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" width="2000" height="2000"><path d="M1970,1242c-133.48,535.66-676.18,861.68-1212,728S-103.69,1293.89,30,758.18,706.12-103.7,1241.82,30,2103.69,706.16,1970,1242h0Z" fill="#f7931a"/><path d="M1441,857.53c19.88-133.07-81.44-204.61-220-252.33l45-180.25-109.76-27.34-43.84,175.51c-28.82-7.18-58.44-14-87.88-20.68l44-176.67L958.87,348.43,914,528.61,692.68,473.79,663.48,591s81.42,18.66,79.7,19.82c44.44,11.1,52.5,40.5,51.14,63.82l-123.14,493.8c-5.44,13.5-19.22,33.74-50.28,26,1.1,1.6-79.76-20-79.76-20l-54.48,125.79,221,55.8-45.42,182.35,109.6,27.34,45-180.39c30,8.12,59,15.62,87.42,22.68l-44.82,179.55,109.74,27.34,45.42-182c187.13,35.4,327.85,21.12,387-148,47.72-136.25-2.34-214.85-100.8-266.13,71.7-16.6,125.7-63.74,140.11-161.17m-250.71,351.52c-34,136.25-263.35,62.62-337.77,44.12l60.26-241.55c74.38,18.56,312.89,55.32,277.55,197.41m34-353.5c-30.94,124-221.91,61-283.89,45.54L994.91,682c62,15.48,261.51,44.3,229.25,173.59" fill="#fff"/></svg>
\ No newline at end of file