Updated so that this is now at wallet/new and old comp works

src/app/modules/wallet/old-wallet.component.html

+<div class="m-toolbar" *ngIf="false">
+ <div class="m-topbar--row">
+ <div class="m-topbar--navigation m-topbar--navigation--text-only">
+
+ <a class="m-topbar--navigation--item"
+ routerLink="/wallet/tokens"
+ routerLinkActive="m-topbar--navigation--item-active"
+ >
+ <span i18n="@@WALLET__TOKENS_NAV">Tokens</span>
+ <m-tooltip icon="help" i18n="@@MINDS__WALLET__TOPBAR__TOKENS_TOOLTIP">
+ See your contributions score and rewards, withdraw them and configure your ethereum wallet
+ </m-tooltip>
+ </a>
+
+ <!--<a class="m-topbar--navigation--item"
+ routerLink="/wallet/usd"
+ routerLinkActive="m-topbar--navigation--item-active"
+ >
+ <span i18n="@@WALLET_USD">USD</span>
+ <m-tooltip icon="help" i18n="@@MINDS__WALLET__TOPBAR__USD_TOOLTIP">
+ Your earnings in USD
+ </m-tooltip>
+ </a>-->
+
+ <a class="m-topbar--navigation--item"
+ routerLink="/wallet/wire"
+ routerLinkActive="m-topbar--navigation--item-active"
+ >
+ <span i18n="@@M__FEATURE__WIRE">Wire</span>
+ <m-tooltip icon="help" i18n="@@MINDS__WALLET__TOPBAR__WIRE_TOOLTIP">
+ Your sent and received wires ledger
+ </m-tooltip>
+ </a>
+
+ <a class="m-topbar--navigation--item"
+ routerLink="/plus"
+ routerLinkActive="m-topbar--navigation--item-active"
+ >
+ <span i18n="@@M__FEATURE__MINDS_PLUS ">Minds Plus</span>
+ <m-tooltip icon="help" i18n="@@MINDS__WALLET__TOPBAR__MINDS_PLUS_TOOLTIP">
+ Opt-out of boosts, earn 1,000 monthly points, access exclusive Minds content, and more
+ </m-tooltip>
+ </a>
+
+ </div>
+ </div>
+</div>
+
+
+<div class="m-wallet--wrapper">
+ <router-outlet></router-outlet>
+</div>
\ No newline at end of file

src/app/modules/wallet/old-wallet.component.scss

+import "defaults";
+
+.m-wallet--wrapper {
+ max-width: 1280px;
+ margin: auto;
+}
+
+.minds-wallet-points{
+ width: auto;
+ min-height: 0;
+
+ h2{
+ @include m-theme(){
+ color: themed($m-white);
+ }
+ }
+}
+
+.minds-quote-card{
+ width:100%;
+ min-height:0;
+ border-radius:0;
+
+ margin-bottom:$minds-margin*2;
+
+ .minds-boost-points-input{
+ input{
+ @include m-theme(){
+ color: themed($m-grey-100);
+ background-color: rgba(themed($m-white), 0.3);
+ }
+ }
+ input:disabled{
+ @include m-theme(){
+ background-color: rgba(themed($m-white), 0.3);
+ }
+ }
+ }
+}
+
+.m-points-balance{
+ padding:$minds-padding*4 $minds-padding;
+ text-align: center;
+
+ i{
+ width: 100%;
+ font-size: 100px;
+ text-align: center;
+ }
+ h2{
+ text-align:center;
+ }
+
+}
+
+.minds-purchase-card{
+ width:100%;
+ min-height:0;
+ padding:0;
+ border-radius:0;
+
+ .minds-purchase-vendors{
+ span{
+ font-size:13px;
+ padding:8px;
+ cursor:pointer;
+ text-transform:uppercase;
+
+ &:first-child {
+ padding-left: 0;
+ }
+ }
+ }
+
+ .mdl-grid{
+
+ .mdl-cell{
+ margin:0;
+ padding:0;
+ display: flex;
+ align-items: center;
+ -webkit-align-items: center;
+ }
+ }
+
+ select{
+ padding: 8px 16px;
+ margin-right: 16px;
+ font-size: 16px;
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ /* border-right: 1px solid themed($m-grey-100); */
+ border-radius: 0;
+ @include m-theme(){
+ border: 1px solid themed($m-grey-50);
+ background-color: rgba(themed($m-grey-50), 0.8)
+ }
+ }
+}
+
+.minds-purchase-card-confirm{
+ width:100%;
+ min-height:0;
+ margin-top:$minds-margin;
+
+ button {
+ float:right;
+ }
+}
+
+.minds-purchase-recurring-option{
+ padding:16px;
+ label{
+ font-size:12px;
+ }
+ span{
+ font-style:italic;
+ font-size:12px;
+ }
+ .minds-purchase-recurring-cancel{
+ cursor:pointer;
+ font-weigth:bold;
+ }
+}
+
+.minds-transaction-card{
+ width:auto;
+ min-height:0;
+ margin-bottom:$minds-padding * 2;
+
+ .minds-transaction-points{
+ font-size:30px;
+ .positive{
+ @include m-theme(){
+ color: themed($m-green-dark);
+ }
+ }
+ .negative{
+ @include m-theme(){
+ color: themed($m-red);
+ }
+ }
+ }
+
+ .minds-transaction-details{
+ display:flex;
+ p{
+ margin:0;
+ }
+ .ts{
+ font-size:11px;
+ padding-left:$minds-padding;
+ }
+ }
+}
+
+minds-wallet-transactions {
+ .mdl-tabs__tab-bar {
+ margin-bottom: $minds-padding * 2;
+ }
+}
+
+.m-root-other {
+ font-size: 12px;
+ font-weight: 400;
+ text-align: center;
+ @include m-theme(){
+ color: themed($m-grey-200);
+ }
+}
+
+.m-root-loader {
+ text-align: center;
+}
+
+.m-wallet-local-settings {
+ margin-top: $minds-padding;
+ padding: $minds-padding;
+}
+
+.m-wallet--boost-ads {
+ margin-top: $minds-padding * 2;
+}
+
+.m-wallet--wire-link{
+ i {
+ width: 25px;
+ text-align: center;
+ }
+}
+
+.m-wire--overview-hero{
+ padding-bottom: 32px;
+
+ @media only screen and (max-width: 400px) {
+ padding-bottom:0;
+ }
+}
+.m-wire--overview-overview{
+ padding: 100px 16px 75px 140px;
+ margin: auto;
+ max-width:990px;
+ display:flex;
+ align-items:center;
+ font-family: 'Roboto', Helvetica, sans-serif;
+
+ @media only screen and (max-width: 400px) {
+ padding:0;
+ text-align: center;
+ }
+
+ i{
+ font-style: normal;
+ font-weight:100;
+ }
+
+ m--crypto-token-symbol {
+ .m--crypto-token-symbol--stroke {
+ @include m-theme(){
+ stroke: themed($m-white);
+ }
+ }
+
+ .m--crypto-token-symbol--fill {
+ @include m-theme(){
+ fill: themed($m-white);
+ }
+ }
+ }
+
+ > div{
+ font-size:48px;
+ letter-spacing:2px;
+ line-height:48px;
+ flex:1;
+ padding:8px 16px;
+ }
+
+ .m-wire--overview-label{
+ display:block;
+
+ > * {
+ vertical-align:middle;
+ }
+
+ label{
+ text-transform: uppercase;
+ font-family: 'Roboto', Helvetica, sans-serif;
+ letter-spacing:1px;
+ font-size:14px;
+ }
+ i{
+ font-size: 16px;
+ opacity: 0.5;
+ cursor: pointer;
+ }
+ }
+
+ .m-wire--overview-breakdown{
+ flex: 1;
+ letter-spacing: 2px;
+ font-size: 16px;
+
+ > * {
+ padding: 4px 0;
+ }
+ }
+}
+
+m-monetization--graph{
+ margin-bottom:32px;
+}
+
+.m-wire--overview-nav{
+ padding: 0;
+ text-align: center;
+ text-transform: uppercase;
+
+ display: flex;
+ justify-content: center;
+
+ @media only screen and (max-width: 400px) {
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ }
+
+ .m-wire--overview-nav-item {
+ padding: 16px 32px;
+ font-family: 'Roboto', Helvetica, sans-serif;
+ font-weight: 300;
+ letter-spacing: 2px;
+ cursor: pointer;
+
+ @media only screen and (max-width: 400px) {
+ flex: 1;
+ }
+ }
+}
+
+.m-wire--overview{
+
+ m-revenue--ledger{
+ display: block;
+ max-width: 600px;
+ margin: auto;
+
+ table{
+ width:100%;
+ }
+ }
+
+ .minds-card-navigation {
+ m--crypto-token-symbol {
+ font-size: 24px;
+
+ .m--crypto-token-symbol--stroke {
+ @include m-theme(){
+ stroke: themed($m-blue-grey-500);
+ }
+ }
+
+ .m--crypto-token-symbol--fill {
+ @include m-theme(){
+ fill: themed($m-blue-grey-500);
+ }
+ }
+ }
+
+ .selected m--crypto-token-symbol {
+ .m--crypto-token-symbol--stroke {
+ @include m-theme(){
+ stroke: themed($m-blue);
+ }
+ }
+
+ .m--crypto-token-symbol--fill {
+ @include m-theme(){
+ fill: themed($m-blue);
+ }
+ }
+ }
+ }
+}
+h2.m-wire--overview-product-header{
+ margin: 0;
+ padding: 16px 16px 0;
+ text-transform: uppercase;
+ font-size: 24px;
+ line-height: 24px;
+ letter-spacing: 2px;
+}
+
+
+
+.m-wallet--token {
+ img{
+ width: 30px;
+ //margin-top: 4px;
+ margin-right: 8px;
+
+ vertical-align: middle;
+ opacity: 0.75;
+ }
+
+ span{
+ vertical-align: middle;
+ }
+}
\ No newline at end of file

src/app/modules/wallet/wallet-tabs.component.ts → src/app/modules/wallet/old-wallet.component.ts

@@ -14,16 +14,13 @@ import { BlockchainService } from '../blockchain/blockchain.service';
 
 @Component({
  moduleId: module.id,
- selector: 'minds-wallet-tabs',
- templateUrl: 'wallet-tabs.component.html'
+ selector: 'm-wallet',
+ templateUrl: 'old-wallet.component.html'
 })
-export class WalletTabsComponent {
+
+export class OldWalletComponent {
 
  disablePointsAnimation: boolean = false;
- 
- state = {
- activeOption: 'history'
- }
 
  constructor(
  private session: Session,
@@ -43,11 +40,10 @@ export class WalletTabsComponent {
  this.title.setTitle('Wallet');
  }
 
- onOptionSelect = (opt: string) => this.state.activeOption = opt;
 
  // Animations
  setDisablePointsAnimation(value) {
  this.disablePointsAnimation = !!value;
  this.storage.set('disablePointsAnimation', !!value ? '1' : '');
  }
-}
+}
\ No newline at end of file

src/app/modules/wallet/tabs/wallet-settings.component.html

+<!-- <m-verify-mobile *ngIf="!state.phoneVerified"></m-verify-mobile> -->
+Settings
\ No newline at end of file

src/app/modules/wallet/wallet-settings.component.ts → src/app/modules/wallet/tabs/wallet-settings.component.ts

 import { Component } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-
-import { Subscription } from 'rxjs';
-
-import { Storage } from '../../services/storage';
-import { Client } from '../../services/api';
-import { MindsTitle } from '../../services/ux/title';
-import { Session } from '../../services/session';
-
-import { WalletService } from '../../services/wallet';
-import { BlockchainService } from '../blockchain/blockchain.service';
-import { CurrencyPipe } from '@angular/common';
-import { Currencies } from './currencies';
+import { Router } from '@angular/router';
+import { Storage } from '../../../services/storage';
+import { MindsTitle } from '../../../services/ux/title';
+import { Session } from '../../../services/session';
 
 @Component({
  moduleId: module.id,
  selector: 'minds-wallet-settings',
  templateUrl: 'wallet-settings.component.html'
 })
-export class WalletSummaryComponent {
+export class WalletSettingsComponent {
+ 
+ state = {
+ phoneVerified: false,
+ }
 
  disablePointsAnimation: boolean = false;
 

src/app/modules/wallet/wallet-tabs.component.html → src/app/modules/wallet/tabs/wallet-tabs.component.html

@@ -5,8 +5,5 @@
  <button class="m-wallet-tabsContainer-tab" (click)="onOptionSelect('settings')">Wallet Settings</button>
  </div>
  <div class="m-wallet-tabsContainer-content">
- <!-- <minds-wallet-history *ngIf="state.activeOption === 'history'"/> -->
- <!-- <minds-wallet-activity *ngIf="state.activeOption === 'activity'"/> -->
- <minds-wallet-settings *ngIf="state.activeOption === 'settings'"/> 
  </div>
 </div>

src/app/modules/wallet/tabs/wallet-tabs.component.ts

+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { Storage } from '../../../services/storage';
+import { MindsTitle } from '../../../services/ux/title';
+import { Session } from '../../../services/session';
+
+@Component({
+ moduleId: module.id,
+ selector: 'minds-wallet-tabs',
+ templateUrl: 'wallet-tabs.component.html'
+})
+export class WalletTabsComponent {
+
+ disablePointsAnimation: boolean = false;
+ 
+ state = {
+ activeOption: 'history'
+ }
+
+ constructor(
+ private session: Session,
+ public storage: Storage,
+ private router: Router,
+ private title: MindsTitle,
+ ) {
+ this.disablePointsAnimation = !!this.storage.get('disablePointsAnimation');
+ }
+
+ ngOnInit() {
+ if (!this.session.isLoggedIn()) {
+ this.router.navigate(['/login']);
+ return;
+ }
+
+ this.title.setTitle('Wallet');
+ }
+
+ onOptionSelect = (opt: string) => this.state.activeOption = opt;
+
+ // Animations
+ setDisablePointsAnimation(value) {
+ this.disablePointsAnimation = !!value;
+ this.storage.set('disablePointsAnimation', !!value ? '1' : '');
+ }
+}

src/app/modules/wallet/verify-mobile/verify-mobile.component.html

+<div class="m-wallet-verifyMobile-container">
+
+ <h1>Phone Verification</h1>
+
+ <span class="m-wallet-verifyMobile-step">Step {{ !confirming ? 1 : 2 }} of 2</span>
+ <p>Getting started with your wallet is easy.</p>
+ <p>We simply need to verify you're a unique individual, and not a pesky bot.</p>
+
+ <div class="m-wallet-verifyMobile-enterNumberContainer" *ngIf="!confirming">
+ <span>Mobile/Cell number</span>
+ <m-phone-input [(ngModel)]="number"></m-phone-input>
+ <!-- <m-tooltip icon="help">Please enter your phone number in order to join the rewards program</m-tooltip> -->
+ <button (click)="verify()" [disabled]="inProgress">Send Verification</button>
+
+ <div *ngIf="inProgress" class="m-wallet-verifyMobile--inProgress mdl-spinner mdl-js-spinner is-active" [mdl]></div>
+ 
+ <p class="m-wallet-verifyMobile-error" *ngIf="error">
+ {{error}}
+ </p>
+ </div>
+
+ <p style="font-style: italic">Don't worry. We do not save your phone number or use it for any other purpose than verifying that you're a unique individual.</p>
+ <div class="m-wallet-verifyMobile-enterCodeContainer" *ngIf="confirming">
+ <div class="m-wallet-verifyMobile-">
+ <input 
+ type="number"
+ [(ngModel)]="code"
+ placeholder="eg. 198349"
+ i18n-placeholder="@@WALLET__TOKENS__JOIN__CODE_EXAMPLE_PH"
+ class="m-token-join--form--input-input m-border"
+ />
+ <m-tooltip icon="help" i18n="@@WALLET__TOKENS__JOIN__ENTER_CODE_TOOLTIP">Please enter the code we just sent you, to verify that your number is correct</m-tooltip>
+ </div>
+ 
+ <button class="m-btn" (click)="cancel()" i18n="@@WALLET__TOKENS__JOIN__GO_BACK_ACTION">Go Back</button>
+ <button class="m-btn m-btn--action" (click)="confirm()" [disabled]="inProgress" i18n="@@WALLET__TOKENS__JOIN__CONFIRM_ACTION">Confirm</button>
+
+ <div *ngIf="inProgress" class="m-wallet-verifyMobile--inProgress mdl-spinner mdl-js-spinner is-active" [mdl]></div>
+
+ <p class="m-wallet-verifyMobile-error" *ngIf="error">
+ {{error}}
+ </p>
+ </div>
+</div>

src/app/modules/wallet/verify-mobile/verify-mobile.component.scss

+
+.m-wallet-verifyMobile-container {
+ h1 {
+ font-weight: 400;
+ font-size: 18pt;
+ letter-spacing: 2px;
+ margin: $minds-padding 0;
+ }
+ .m-wallet-verifyMobile-enterNumberContainer {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ background-color: #eee;
+ padding: ($minds-padding * 3) 0;
+ margin-bottom: 24px;
+
+ button {
+ width: 25%;
+ border-radius: 6px;
+ background-color: #FFF;
+ border-radius: 6px;
+ margin: 0 16px;
+ border: none;
+ color: #666;
+ letter-spacing: 1.5px;
+ padding: 16px;
+ font-size: 11pt;
+ }
+
+ m-phone-input {
+ height: 50px;
+ width: 50%;
+
+ .m-phone-input--wrapper {
+ margin-bottom: 0;
+ height: 100%;
+ width: 100%;
+
+ input {
+ height: 100%;
+ }
+ }
+
+ .m-phone-input--selected-flag {
+ height: 100%;
+ border-right: 1px solid lightgrey;
+
+ .m-phone-input--dial-code {
+ color: #777;
+ }
+ }
+
+ input {
+ letter-spacing: 1.5px;
+ padding-left: 8px;
+ color: #777;
+ }
+
+ .m-phone-input--country-list {
+ position: unset;
+ box-shadow: unset;
+ border: unset;
+ width: fit-content;
+ display: flex;
+ }
+ }
+ }
+}

src/app/modules/wallet/verify-mobile/verify-mobile.component.ts

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Client } from '../../../services/api/client';
+import { Session } from '../../../services/session';
+
+@Component({
+ moduleId: module.id,
+ selector: 'm-verify-mobile',
+ templateUrl: 'verify-mobile.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class VerifyMobileComponent {
+
+ confirming: boolean = false;
+ number: number;
+ code: number;
+ secret: string;
+ inProgress: boolean = false;
+ error: string;
+ plusPrompt: boolean = false;
+
+ constructor(
+ protected client: Client,
+ protected cd: ChangeDetectorRef,
+ protected session: Session,
+ protected router: Router,
+ ) { 
+
+ }
+
+ ngOnInit() {
+ if (this.session.getLoggedInUser().tel_no_hash) {
+ console.log('sticking around!');
+ //this.router.navigate(['/wallet/tokens/contributions']);
+ }
+ }
+
+ async verify() {
+ this.plusPrompt = true;
+
+ /*this.inProgress = true;
+ this.error = null;
+ try {
+ let response: any = await this.client.post('api/v2/blockchain/rewards/verify', {
+ number: this.number,
+ });
+ this.secret = response.secret;
+ this.plusPrompt = true;
+ } catch (e) {
+ this.error = e.message;
+ }
+ this.inProgress = false;
+*/
+ this.detectChange();
+ }
+
+ cancel() {
+ this.confirming = false;
+ this.code = null;
+ this.secret = null;
+ this.inProgress = false;
+ this.error = null;
+ this.detectChange();
+ }
+
+ async confirm() {
+ this.inProgress = true;
+ this.error = null;
+ try {
+ let response: any = await this.client.post('api/v2/blockchain/rewards/confirm', {
+ number: this.number,
+ code: this.code,
+ secret: this.secret,
+ });
+
+ window.Minds.user.rewards = true;
+ this.join();
+ } catch (e) {
+ this.error = e.message;
+ }
+
+ this.inProgress = false;
+ this.detectChange();
+ }
+
+ join() {
+ this.router.navigate(['/wallet/tokens/contributions']);
+ }
+
+ detectChange() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+
+}

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

@@ -2,5 +2,5 @@
  <h1>Your Wallet</h1>
  <minds-wallet-summary></minds-wallet-summary>
  <div class="m-wallet-subtext">Reward payouts are made on a daily basis at 02:00am UTC</div>
- <!-- <minds-wallet-tabs></minds-wallet-tabs> -->
+ <minds-wallet-tabs></minds-wallet-tabs>
 </div>

src/app/modules/wallet/wallet.module.ts

@@ -46,10 +46,12 @@ import { WalletTokenTestnetComponent } from './tokens/testnet/testnet.component'
 import { ReferralsModule } from './tokens/referrals/referrals.module';
 import { ReferralsComponent } from './tokens/referrals/referrals.component';
 import { WalletSummaryComponent } from './wallet-summary.component';
-import { WalletTabsComponent } from './wallet-tabs.component';
+import { WalletTabsComponent } from './tabs/wallet-tabs.component';
+import { OldWalletComponent } from './old-wallet.component';
+import { VerifyMobileComponent } from './verify-mobile/verify-mobile.component';
 
 const walletRoutes: Routes = [
- { path: 'wallet', component: WalletComponent,
+ { path: 'wallet', component: OldWalletComponent,
  children: [
  { path: '', redirectTo: 'tokens', pathMatch: 'full' },
  { path: 'overview', redirectTo: 'tokens', pathMatch: 'full' },
@@ -80,6 +82,10 @@ const walletRoutes: Routes = [
  ]
  },
  { path: 'wire', component: WalletWireComponent },
+ { path: 'new', component: WalletComponent,
+ children: [
+ { path: 'verify', component: VerifyMobileComponent },
+ ]},
  { path: '**', component: WalletOverviewComponent },
  ]
  }
@@ -105,6 +111,7 @@ const walletRoutes: Routes = [
  ],
  declarations: [
  WalletComponent,
+ OldWalletComponent,
  PointsOverviewComponent,
  WalletOverviewComponent,
  WalletTransactionsComponent,
@@ -135,9 +142,11 @@ const walletRoutes: Routes = [
  WalletTokenTestnetComponent,
  WalletSummaryComponent,
  WalletTabsComponent,
+ VerifyMobileComponent,
  ],
  exports: [
  WalletComponent,
+ OldWalletComponent,
  PointsOverviewComponent,
  WalletTransactionsComponent,
  WalletPointsTransactionsComponent,
@@ -148,8 +157,9 @@ const walletRoutes: Routes = [
  WalletBalanceUSDComponent,
  WalletSummaryComponent,
  WalletTabsComponent,
+ VerifyMobileComponent,
  ],
- entryComponents: [ WalletComponent ]
+ entryComponents: [ WalletComponent, OldWalletComponent ]
 })
 
 export class WalletModule {}