package-lock.json

@@ -14981,6 +14981,11 @@
       "integrity": "sha1-xF6cYYAL0IfviNfiVkI73Unl0HE=",
       "dev": true
     },
+    "qrcodejs2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
+      "integrity": "sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE="
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",

package.json

@@ -44,6 +44,7 @@
     "medium-editor": "^5.23.2",
     "ngx-drag-drop": "^2.0.0",
     "plotly.js": "^1.47.4",
+    "qrcodejs2": "0.0.2",
     "rxjs": "~6.5.2",
     "socket.io-client": "^2.2.0",
     "textarea-caret": "^3.1.0",

src/app/app.component.scss

@@ -98,6 +98,18 @@ m-app {
     width: 300px;
   }
 
+  .m-page__goBack {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    font-weight: bold;
+    text-decoration: none;
+    margin-bottom: 8px;
+    @include m-theme() {
+      color: themed($m-grey-600);
+    }
+  }
+
   .m-page--sidebar--navigation--item {
     cursor: pointer;
     display: block;

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';
@@ -144,6 +145,7 @@ import { DndModule } from 'ngx-drag-drop';
     MindsRichEmbed,
     TagcloudComponent,
     DropdownComponent,
+    QRCodeComponent,
 
     AutoGrow,
     InlineAutoGrow,
@@ -229,6 +231,7 @@ import { DndModule } from 'ngx-drag-drop';
     MindsRichEmbed,
     TagcloudComponent,
     DropdownComponent,
+    QRCodeComponent,
 
     AutoGrow,
     InlineAutoGrow,

src/app/common/components/components.scss

@@ -66,3 +66,40 @@ minds-button-thumbs-down {
     }
   }
 }
+
+.m-selector {
+  position: relative;
+
+  select {
+    padding: 8px 16px;
+    max-width: 100%;
+    appearance: none;
+    display: block;
+    width: 100%;
+    font-family: 'Roboto', Helvetica, sans-serif;
+    font-size: 13px;
+    cursor: pointer;
+    font-weight: 600;
+    @include m-theme() {
+      border: 1px solid themed($m-grey-100);
+    }
+  }
+
+  &::before {
+    content: '\25bc';
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    bottom: 1px;
+    padding-top: 0.7em;
+    line-height: 1;
+    right: 0;
+    width: 2em;
+    text-align: center;
+    transform: scale(0.84, 0.42);
+    filter: progid:DXImageTransform.Microsoft.Matrix(M11=.84, M12=0, M21=0, M22=.42, SizingMethod='auto expand');
+    @include m-theme() {
+      color: themed($m-grey-500);
+    }
+  }
+}

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/legacy/components/buttons/buttons.scss

@@ -71,24 +71,23 @@ minds-button-remind {
 
 .minds-boost-button {
   font-size: 12px;
+  font-weight: 400;
   height: auto;
   min-height: 0;
   line-height: 18px;
-  text-transform: capitalize;
+  text-transform: uppercase;
   align-self: center;
   padding: 3px 0;
-  min-width: 62px;
+  min-width: 72px;
   width: auto;
   margin: -3px 0;
   display: block;
-  @include m-theme() {
-    background-color: themed($m-blue) !important;
-  }
+  flex: 0 !important;
 
-  &:hover {
-    @include m-theme() {
-      background-color: rgba(themed($m-blue-dark), 0.9) !important;
-    }
+  span {
+    min-width: 72px;
+    text-align: center;
+    vertical-align: middle;
   }
 }
 

src/app/modules/legacy/components/cards/activity/activity.component.scss

 .tabs .m-wire-button {
-  transform: scale(0.8) translateY(-4px);
+  //  transform: scale(0.8) translateY(-4px);
+  margin: -3px 0;
 }
 .m-pin-button {
   overflow: visible;
@@ -94,9 +95,9 @@ minds-activity {
     padding-left: 8px;
     margin: auto;
 
-    padding: 3px 0 3px 8px;
+    padding: 2px 0 2px 8px;
     font-size: 14px;
-    line-height: 9px;
+    line-height: 8px;
     border-radius: 3px;
     vertical-align: middle;
     display: flex;
@@ -124,7 +125,7 @@ minds-activity {
   }
 
   .m-activity--metrics-metric {
-    font-size: 10px;
+    font-size: 9px;
     display: inline-block;
     vertical-align: middle;
 

src/app/modules/legacy/components/cards/activity/activity.html

@@ -400,28 +400,28 @@
   <minds-button-thumbs-up [object]="activity"></minds-button-thumbs-up>
   <minds-button-thumbs-down [object]="activity"></minds-button-thumbs-down>
   <m-wire-button
-    *ngIf="session.getLoggedInUser().guid != (activity.remind_object ? activity.remind_object.owner_guid : activity.owner_guid)"
-    [object]="activity.remind_object ? activity.remind_object : activity"
+    *ngIf="session.getLoggedInUser().guid != activity.owner_guid"
+    [object]="activity"
     (done)="wireSubmitted($event)"
   ></m-wire-button>
+  <button
+    class="m-btn m-btn--action m-btn--slim minds-boost-button"
+    *ngIf="session.getLoggedInUser().guid == activity.owner_guid"
+    id="boost-actions"
+    (click)="showBoost()"
+  >
+    <span i18n="verb|@@M__ACTION__BOOST">Boost</span>
+  </button>
   <minds-button-comment
     [object]="activity"
     (click)="openComments()"
   ></minds-button-comment>
   <minds-button-remind [object]="activity"></minds-button-remind>
-  <a
-    class="mdl-button mdl-color-text--white mdl-button--colored minds-boost-button"
-    *ngIf="session.getLoggedInUser().guid == activity.owner_guid"
-    id="boost-actions"
-    (click)="showBoost()"
-  >
-    <ng-container i18n="verb|@@M__ACTION__BOOST">Boost</ng-container>
-  </a>
 </div>
+
 <!-- Activity metrics -->
 <div
-  class="impressions-tag m-activity--metrics"
-  [class.m-activity--metrics-wire]="!session.getLoggedInUser() || session.getLoggedInUser().guid != activity.owner_guid"
+  class="impressions-tag m-activity--metrics m-activity--metrics-wire"
   *ngIf="!activity.hide_impressions && !hideTabs"
 >
   <div class="m-activity--metrics-inner m-border">

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

 <div class="m-page">
   <div class="m-page--sidebar">
-    <m-wallet--balance-usd></m-wallet--balance-usd>
+    <m-wallet--balance-tokens></m-wallet--balance-tokens>
 
     <div class="m-page--sidebar--navigation">
+      <a
+        class="m-page__goBack"
+        routerLink="/wallet/tokens"
+        style="margin-top: 8px"
+      >
+        <i class="material-icons">
+          keyboard_arrow_left
+        </i>
+        <span>Back to the Token Wallet</span>
+      </a>
+
       <a
         class="m-page--sidebar--navigation--item"
         routerLink="/wallet/usd/earnings"
@@ -33,6 +44,12 @@
   </div>
 
   <div class="m-page--main">
+    <a class="m-page__goBack" routerLink="/wallet/tokens">
+      <i class="material-icons">
+        keyboard_arrow_left
+      </i>
+      <span>Back to the Token Wallet</span>
+    </a>
     <router-outlet></router-outlet>
   </div>
 </div>

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

@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { ChartColumn } from '../../../common/components/chart/chart.component';
 import { Client } from '../../../services/api';
+import { Session } from '../../../services/session';
 
 @Component({
   moduleId: module.id,
@@ -15,6 +16,16 @@ export class RevenueConsoleComponent {
     private client: Client,
     private cd: ChangeDetectorRef,
     private fb: FormBuilder,
-    private router: Router
+    private router: Router,
+    public session: Session
   ) {}
+
+  ngOnInit() {
+    if (
+      !this.session.getLoggedInUser().merchant ||
+      this.session.getLoggedInUser().merchant.deleted
+    ) {
+      this.router.navigate(['/wallet/usd/onboarding']);
+    }
+  }
 }

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

@@ -23,7 +23,7 @@
 
       <div class="m-revenue--options-payout-method-bank-account">
         <div class="m-revenue--options-payout-method-bank--name">
-          {{ payoutMethod.account.bank }}
+          {{ payoutMethod.account.bank_name }}
         </div>
         <div class="m-revenue--options-payout-method-bank--number">
           ****{{ payoutMethod.account.last4 }}

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

@@ -40,29 +40,28 @@ export class RevenueOptionsComponent {
 
   getSettings() {
     this.inProgress = true;
-    this.client
-      .get('api/v1/monetization/settings')
-      .then(({ bank, country }) => {
-        this.inProgress = false;
-        this.payoutMethod.country = country;
-        this.form.controls.country.setValue(country);
-        if (bank.last4) {
-          this.payoutMethod.account = bank;
-        }
-        this.detectChanges();
-      });
+    this.client.get('api/v2/payments/stripe/connect').then(({ account }) => {
+      this.inProgress = false;
+      this.payoutMethod.country = account.country;
+      this.form.controls.country.setValue(account.country);
+      if (account.bankAccount.last4) {
+        this.payoutMethod.account = account.bankAccount;
+      }
+      this.detectChanges();
+    });
   }
 
   addBankAccount() {
     this.inProgress = true;
     this.error = '';
-    this.editing = false;
+    // this.editing = false;
     this.detectChanges();
 
     this.client
-      .post('api/v1/monetization/settings', this.form.value)
+      .post('api/v2/payments/stripe/connect/bank', this.form.value)
       .then((response: any) => {
         this.inProgress = false;
+        this.editing = false;
         this.getSettings();
       })
       .catch(e => {
@@ -76,7 +75,7 @@ export class RevenueOptionsComponent {
     this.leaving = true;
     this.detectChanges();
     this.client
-      .delete('api/v1/monetization/settings/account')
+      .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 {
+  p {
+    padding-right: $minds-padding * 2;
+  }
+  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';
+import { OverlayModalService } from '../../../services/ux/overlay-modal';
+
+@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,
+    private overlayModal: OverlayModalService
+  ) {}
+
+  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();
+    this.overlayModal.dismiss();
+  }
+
+  detectChanges() {
+    this.cd.markForCheck();
+    this.cd.detectChanges();
+  }
+}