src/app/app.module.ts

@@ -81,6 +81,7 @@ import { CookieModule } from '@gorniv/ngx-universal';
 import { HomepageModule } from './modules/homepage/homepage.module';
 import { OnboardingV2Module } from './modules/onboarding-v2/onboarding.module';
 import { ConfigsService } from './common/services/configs.service';
+import { WalletV2Module } from './modules/wallet/v2/wallet-v2.module';
 
 @Injectable()
 export class SentryErrorHandler implements ErrorHandler {
@@ -159,6 +160,7 @@ export class SentryErrorHandler implements ErrorHandler {
     ChannelsModule,
     UpgradesModule,
     //PlotlyModule,
+    WalletV2Module,
 
     //last due to :username route
     ChannelContainerModule,

src/app/common/common.module.ts

@@ -383,6 +383,7 @@ const routes: Routes = [
     FormDescriptorComponent,
     FormToastComponent,
     ShadowboxSubmitButtonComponent,
+    ShadowboxHeaderComponent,
     ShadowboxHeaderTabsComponent,
     TimespanFilterComponent,
     EmailConfirmationComponent,

src/app/common/components/phone-input-v2/country.component.ts

@@ -14,7 +14,7 @@ import {
 } from '@angular/core';
 import { Inject, PLATFORM_ID } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
-import { verticallyScrollToEnsureElementIsInView } from '../../../helpers/scrollable-container-visibility';
+import { verticallyScrollElementIntoView } from '../../../helpers/scrollable-container-visibility';
 
 import { Country } from './country';
 import { CountryCode } from './countries';
@@ -76,7 +76,7 @@ export class PhoneInputCountryV2Component
         this.toggledDropdown.emit({ showDropdown: true });
       }, 0);
       this.scrollTimeout = setTimeout(() => {
-        verticallyScrollToEnsureElementIsInView(
+        verticallyScrollElementIntoView(
           this.dropdown.nativeElement,
           this.countryEls[this.selectedCountryIndex].nativeElement
         );

src/app/common/components/shadowbox-header-tabs/shadowbox-header-tabs.component.html

-<ng-container *ngFor="let tab of tabs">
+<ng-container *ngFor="let tab of tabs; let i = index" #shadowboxHeaderTabs>
   <div
     class="m-shadowboxHeaderTab"
     (click)="changeTabs(tab)"
@@ -6,7 +6,13 @@
   >
     <div class="m-shadowboxHeaderTab__label">
       <span>{{ tab.label }}</span>
-      <m-tooltip [anchor]="top" icon="help" *ngIf="tab.description">
+      <m-tooltip
+        [anchor]="top"
+        icon="help"
+        *ngIf="tab.description"
+        (mouseenter)="onMouseEnter($event, i)"
+        [id]="'m-shadowboxHeaderTab--' + i"
+      >
         {{ tab.description }}
       </m-tooltip>
     </div>

src/app/common/components/shadowbox-header-tabs/shadowbox-header-tabs.component.scss

@@ -35,6 +35,8 @@
   }
   .m-shadowboxHeaderTab__label {
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   m-tooltip {
     vertical-align: middle;
@@ -42,6 +44,8 @@
   .m-shadowboxHeaderTab__value {
     font-size: 17px;
     margin-top: 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
     @include m-theme() {
       color: themed($m-grey-800);
     }

src/app/common/components/shadowbox-header-tabs/shadowbox-header-tabs.component.ts

-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  Inject,
+  AfterViewInit,
+  PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import { ShadowboxHeaderTab } from '../../../interfaces/dashboard';
 
 @Component({
   selector: 'm-shadowboxHeader__tabs',
   templateUrl: './shadowbox-header-tabs.component.html',
 })
-export class ShadowboxHeaderTabsComponent {
+export class ShadowboxHeaderTabsComponent implements AfterViewInit {
   @Input() tabs: ShadowboxHeaderTab[];
   @Input() activeTabId = '';
   @Input() friendlyVals: boolean = false;
   @Output() tabChanged: EventEmitter<any> = new EventEmitter();
 
-  constructor() {}
+  container;
+  tabWidth: number;
+
+  constructor(@Inject(PLATFORM_ID) protected platformId: Object) {}
+
+  ngAfterViewInit() {
+    if (isPlatformBrowser(this.platformId)) {
+      setTimeout(() => {
+        const tabEl = <HTMLElement>(
+          document.querySelector('.m-shadowboxHeaderTab')
+        );
+        this.tabWidth = tabEl.offsetWidth;
+
+        this.container = <HTMLElement>(
+          document.querySelector('.m-shadowboxHeader__container')
+        );
+      }, 0);
+    }
+  }
+
+  onMouseEnter($event: MouseEvent, i: number) {
+    if (isPlatformBrowser(this.platformId)) {
+      if (this.tabs[i].description) {
+        const mouseEnterTabEl = document.querySelector(
+          `#m-shadowboxHeaderTab--${i}`
+        );
+
+        const bubbleEl = mouseEnterTabEl.getElementsByClassName(
+          'm-tooltip--bubble'
+        )[0];
+
+        const leftPx = i * this.tabWidth - this.container.scrollLeft;
+        bubbleEl.setAttribute('style', `left: ${leftPx}px;`);
+      }
+    }
+  }
 
   changeTabs(tab) {
     this.tabChanged.emit({ tabId: tab.id });

src/app/common/components/shadowbox-header/shadowbox-header.component.scss

@@ -33,8 +33,11 @@ m-shadowboxHeader {
       background: transparent; /* Chrome/Safari/Webkit */
     }
   }
+
   .m-tooltip--bubble {
-    width: 160px;
+    top: 50px;
+    width: 100px;
+    margin-left: 4px;
   }
 }
 [class*='m-shadowboxHeader__overflowFade--'] {

src/app/common/components/shadowbox-header/shadowbox-header.component.ts

@@ -8,6 +8,10 @@ import {
   ElementRef,
   HostListener,
 } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { horizontallyScrollElementIntoView } from '../../../helpers/scrollable-container-visibility';
 
 @Component({
   selector: 'm-shadowboxHeader',
@@ -20,6 +24,14 @@ export class ShadowboxHeaderComponent implements AfterViewInit {
   @ViewChild('shadowboxHeaderContainer', { static: false })
   containerEl: ElementRef;
   container;
+  public containerScrollLeft: number = 0;
+
+  firstMetricEl;
+  activeMetricEl;
+
+  tabsSubscription: Subscription;
+
+  tabsArray;
 
   childClientWidth: number;
   faderWidth = 24;
@@ -28,31 +40,39 @@ export class ShadowboxHeaderComponent implements AfterViewInit {
   isAtScrollStart = true;
   showButton = { left: false, right: false };
 
-  constructor(private cd: ChangeDetectorRef) {}
+  constructor(
+    private cd: ChangeDetectorRef,
+    @Inject(PLATFORM_ID) protected platformId: Object
+  ) {}
 
   ngAfterViewInit() {
-    this.checkOverflow();
-    // const activeMetric = ;//get the index of the metric with .active
-    // this.slideToActiveMetric();
+    if (isPlatformBrowser(this.platformId)) {
+      setTimeout(() => {
+        this.container = this.containerEl.nativeElement;
+
+        this.activeMetricEl = <HTMLElement>(
+          document.querySelector('.active.m-shadowboxHeaderTab')
+        );
+
+        this.firstMetricEl = <HTMLElement>(
+          document.querySelector('.m-shadowboxHeaderTab')
+        );
+        this.slideToActiveMetric(this.container, this.activeMetricEl);
+        this.checkOverflow();
+      }, 50);
+    }
   }
 
-  // updateMetric(metric) {
-  //   // TODOOJM: if clicked metric is not fully visible, slide() until it is
-  //   this.analyticsService.updateMetric(metric.id);
-  // }
-
-  // ----------------------------------------------------
-  @HostListener('click', ['$event.target'])
-  onClick(target) {
-    // console.log('***Clicked on: ', target);
-    // find index of target
-    // this.slideToActiveMetric(metricIndex);
+  slideToActiveMetric(container, el) {
+    horizontallyScrollElementIntoView(container, el, true);
   }
 
-  slideToActiveMetric(metricIndex) {
-    // TODOOJM
+  @HostListener('click', ['$event'])
+  onClick($event) {
+    //  TODO allow click to go through
+    this.slideToActiveMetric(this.container, $event.target);
+    this.checkOverflow();
   }
-  // ----------------------------------------------------
 
   @HostListener('window:resize')
   onResize() {
@@ -60,35 +80,36 @@ export class ShadowboxHeaderComponent implements AfterViewInit {
   }
 
   onScroll($event) {
+    this.containerScrollLeft = this.container.scrollLeft;
     this.checkOverflow();
   }
 
   checkOverflow() {
+    // assumes all metrics are equal width
     if (!this.isScrollable) {
       return;
     }
 
-    const firstMetric = <HTMLElement>(
-      document.querySelector('.m-shadowboxHeaderTab')
-    );
-    // TODO: figure out how to avoid test failure "Cannot read property 'clientWidth' of null"
-    this.childClientWidth = firstMetric ? firstMetric.clientWidth : 160;
+    if (this.firstMetricEl) {
+      this.childClientWidth = this.firstMetricEl.clientWidth;
 
-    this.container = this.containerEl.nativeElement;
-    this.isOverflown =
-      this.container.scrollWidth - this.container.clientWidth > 0;
+      this.isOverflown =
+        this.container.scrollWidth - this.container.clientWidth > 0;
 
-    this.isAtScrollStart = this.container.scrollLeft < this.faderWidth;
-    this.showButton.left = this.isOverflown && !this.isAtScrollStart;
+      this.isAtScrollStart = this.container.scrollLeft < this.faderWidth;
+      this.showButton.left = this.isOverflown && !this.isAtScrollStart;
 
-    this.isAtScrollEnd =
-      !this.isOverflown ||
-      this.container.scrollWidth -
-        (this.container.scrollLeft + this.container.clientWidth) <
-        this.faderWidth;
+      this.isAtScrollEnd =
+        !this.isOverflown ||
+        this.container.scrollWidth -
+          (this.container.scrollLeft + this.container.clientWidth) <
+          this.faderWidth;
 
-    this.showButton.right =
-      this.isOverflown && this.container.scrollLeft >= 0 && !this.isAtScrollEnd;
+      this.showButton.right =
+        this.isOverflown &&
+        this.container.scrollLeft >= 0 &&
+        !this.isAtScrollEnd;
+    }
     this.detectChanges();
   }
 

src/app/common/services/configs.service.ts

 import { Client } from '../api/client.service';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 @Injectable()
 export class ConfigsService {
   private configs = {};
+  public isReady$ = new Subject();
 
   constructor(private client: Client) {}
 
   async loadFromRemote() {
     try {
       this.configs = await this.client.get('api/v1/minds/config');
+      this.isReady$.next(true);
     } catch (err) {
       console.error(err);
     }

src/app/helpers/scrollable-container-visibility.ts

 // credit to Adam Reis via https://stackoverflow.com/questions/16308037/detect-when-elements-within-a-scrollable-div-are-out-of-view
 
-export default function checkIfElementIsInView(
+export default function checkIfElementIsVerticallyInView(
   container: HTMLElement,
   element: HTMLElement,
   partial?: boolean // if true, returns false if el is partially obscured
@@ -22,7 +22,29 @@ export default function checkIfElementIsInView(
   return isTotal || isPartial;
 }
 
-export function verticallyScrollToEnsureElementIsInView(
+export function checkIfElementIsHorizontallyInView(
+  container: HTMLElement,
+  element: HTMLElement,
+  partial?: boolean // if true, returns false if el is partially obscured
+) {
+  // Determine container left and right
+  const cLeft = container.scrollLeft;
+  const cRight = cLeft + container.clientWidth;
+
+  // Determine element left and right
+  const eLeft = element.offsetLeft;
+  const eRight = eLeft + element.clientWidth;
+
+  // Check if in view
+  const isTotal = eLeft >= cLeft && eRight <= cRight;
+  const isPartial =
+    partial &&
+    ((eLeft < cLeft && eRight > cLeft) || (eRight > cRight && eLeft < cRight));
+
+  return isTotal || isPartial;
+}
+
+export function verticallyScrollElementIntoView(
   container: HTMLElement,
   element: HTMLElement,
   smooth?: boolean // true if you want the scroll to be animated
@@ -49,7 +71,7 @@ export function verticallyScrollToEnsureElementIsInView(
   }
 }
 
-export function horizontallyScrollToEnsureElementIsInView(
+export function horizontallyScrollElementIntoView(
   container: HTMLElement,
   element: HTMLElement,
   smooth?: boolean // true if you want the scroll to be animated
@@ -62,16 +84,25 @@ export function horizontallyScrollToEnsureElementIsInView(
   const eLeft = element.offsetLeft;
   const eRight = eLeft + element.clientWidth;
 
-  // Check if out of view and scroll horizontally if it is
+  let targetScrollLeft;
+
+  if (eLeft < cLeft || (eLeft < cLeft && eRight > cLeft)) {
+    // wholly or partially obscured on left
+    targetScrollLeft = container.scrollLeft - cLeft - eLeft;
+  } else if (eRight > cRight || (eRight > cRight && eLeft < cRight)) {
+    // wholly or partially obscured on right
+    targetScrollLeft = container.scrollLeft + eRight - cRight;
+  }
+
   if (smooth) {
-    if (eLeft < cLeft || eRight > cRight) {
-      element.scrollIntoView({ behavior: 'smooth' });
-    }
+    const opts: ScrollToOptions = {
+      top: 0,
+      left: targetScrollLeft,
+      behavior: 'smooth',
+    };
+    container.scrollTo(opts);
   } else {
-    if (eLeft < cLeft) {
-      container.scrollLeft -= cLeft - eLeft;
-    } else if (eRight > cRight) {
-      container.scrollLeft += eRight - cRight;
-    }
+    container.scrollLeft = targetScrollLeft;
   }
+  // }
 }

src/app/modules/analytics/v2/layouts/layout-chart/layout-chart.component.ts

@@ -113,6 +113,7 @@ export class AnalyticsLayoutChartComponent implements OnInit, OnDestroy {
       }
     );
   }
+  updateMetric($event) {}
 
   detectChanges() {
     this.cd.markForCheck();

src/app/modules/wallet/v2/balance-cash/balance-cash.component.html

@@ -4,7 +4,7 @@
     *ngIf="!hasAccount && !onSettingsTab"
   >
     <p>
-      <a (click)="scrollTocashSettings.emit()">Add your bank information</a>
+      <a (click)="scrollTocCashSettings.emit()">Add your bank information</a>
     </p>
     <p>Start receiving payouts by adding your bank details.</p>
   </div>

src/app/modules/wallet/v2/balance-cash/balance-cash.component.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 import { Client } from '../../../../services/api/client';
 import { Session } from '../../../../services/session';
-import { WalletDashboardService } from './../dashboard.service';
+import { WalletDashboardService } from '../dashboard.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import * as moment from 'moment';
 @Component({

src/app/modules/wallet/v2/balance-tokens/balance-tokens.component.ts

@@ -12,7 +12,7 @@ import { isPlatformBrowser } from '@angular/common';
 import { Client } from '../../../../services/api/client';
 import { Subscription } from 'rxjs';
 import { Session } from '../../../../services/session';
-import { WalletDashboardService } from './../dashboard.service';
+import { WalletDashboardService } from '../dashboard.service';
 import { FormToastService } from '../../../../common/services/form-toast.service';
 import * as moment from 'moment';
 
@@ -65,6 +65,7 @@ export class WalletBalanceTokensV2Component implements OnInit, OnDestroy {
 
     this.detectChanges();
   }
+
   ngOnDestroy() {
     if (this.updateTimer$) {
       clearInterval(this.updateTimer$);
@@ -79,10 +80,11 @@ export class WalletBalanceTokensV2Component implements OnInit, OnDestroy {
       const result: any = await this.client.get(
         `api/v2/blockchain/contributions/overview`
       );
-
-      this.nextPayoutDate = result.nextPayout;
-      this.estimatedTokenPayout = result.currentReward;
-      this.detectChanges();
+      if (result) {
+        this.nextPayoutDate = result.nextPayout;
+        this.estimatedTokenPayout = result.currentReward;
+        this.detectChanges();
+      }
     } catch (e) {
       console.error(e);
     }

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

@@ -17,7 +17,6 @@
             [friendlyVals]="true"
             (tabChanged)="updateCurrency($event)"
           ></m-shadowboxHeader__tabs>
-
           <div class="m-shadowboxLayout__body">
             <div class="m-walletDashboardBalances__wrapper">
               <m-walletTokenOnboarding
@@ -40,7 +39,7 @@
               <div
                 class="m-walletDashboardViews__tabsContainer"
                 *ngIf="views[activeCurrencyId].length > 1"
-                #dashboardViewsTabs
+                #dashboardViews
               >
                 <div
                   class="m-walletDashboardViews__tab"

src/app/modules/wallet/v2/dashboard.component.scss

@@ -26,10 +26,19 @@
 }
 ////////////////////////////////////////////
 m-walletDashboard {
+  m-shadowboxHeader {
+    min-height: 103px;
+  }
+  .m-shadowboxHeader__wrapper {
+    height: 103px;
+  }
   .m-shadowboxHeaderTab {
     line-height: 21px;
+    min-height: 103px;
+    max-height: 103px;
+    width: 149px;
     .m-shadowboxHeaderTab__label {
-      margin-top: 10px;
+      margin-top: 6px;
       font-size: 18px;
       @include m-theme() {
         color: themed($m-grey-800);

src/app/modules/wallet/v2/dashboard.component.ts

@@ -7,6 +7,7 @@ import {
   Inject,
   ViewChild,
   ElementRef,
+  AfterViewInit,
 } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 
@@ -25,10 +26,10 @@ import { FeaturesService } from '../../../services/features.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WalletDashboardComponent implements OnInit {
-  @ViewChild('tokensSettings', { static: true }) tokenSettingsEl: ElementRef;
-  @ViewChild('cashSettings', { static: true }) cashSettingsEl: ElementRef;
-  @ViewChild('dashboardViewsTabs', { static: true })
-  dashboardViewsTabsEl: ElementRef;
+  @ViewChild('tokensSettings', { static: false }) tokenSettingsEl: ElementRef;
+  @ViewChild('cashSettings', { static: false }) cashSettingsEl: ElementRef;
+  @ViewChild('dashboardViews', { static: false })
+  dashboardViewsEl: ElementRef;
 
   menu: Menu = sidebarMenu;
   paramsSubscription: Subscription;
@@ -64,6 +65,8 @@ export class WalletDashboardComponent implements OnInit {
   ) {}
 
   ngOnInit() {
+    console.log('dashboard router config', this.router.config);
+
     if (!this.session.isLoggedIn()) {
       this.router.navigate(['/login']);
       return;
@@ -79,13 +82,20 @@ export class WalletDashboardComponent implements OnInit {
     this.wallet = this.walletService.getWallet();
 
     this.route.paramMap.subscribe((params: ParamMap) => {
-      this.activeCurrencyId = params.get('currency');
+      const currencyParam = params.get('currency');
+      const viewParam = params.get('view');
+
+      this.activeCurrencyId = currencyParam;
+      if (!this.views[this.activeCurrencyId]) {
+        this.activeCurrencyId = 'tokens';
+        this.router.navigate(['/wallet/tokens']);
+      }
 
       if (
-        params.get('view') &&
-        this.views[this.activeCurrencyId].find(v => v.id === params.get('view'))
+        viewParam &&
+        this.views[this.activeCurrencyId].find(v => v.id === viewParam)
       ) {
-        this.activeViewId = params.get('view');
+        this.activeViewId = viewParam;
       } else {
         this.activeViewId = this.views[this.activeCurrencyId][0].id;
         this.updateView(this.activeViewId);
@@ -115,31 +125,24 @@ export class WalletDashboardComponent implements OnInit {
   updateCurrency($event) {
     this.activeCurrencyId = $event.tabId;
     this.activeViewId = this.views[this.activeCurrencyId][0].id;
-    this.router.navigate([
-      '/v2wallet',
-      this.activeCurrencyId,
-      this.activeViewId,
-    ]);
+    this.router.navigate(['/wallet', this.activeCurrencyId, this.activeViewId]);
     this.detectChanges();
   }
 
   updateView(viewId) {
     this.activeViewId = viewId;
-    this.router.navigate(['/v2wallet', this.activeCurrencyId, viewId]);
+    this.router.navigate(['/wallet', this.activeCurrencyId, viewId]);
     this.detectChanges();
   }
 
   onboardingCompleted() {
-    // TODOOJM remove once verified its not necessary
-    // this.storage.set('walletOnboardingComplete', true);
     this.onboardingComplete = true;
     this.detectChanges();
   }
 
   scrollToSettings(currency: string) {
     if (this.activeCurrencyId !== currency) {
-      // TODOOJM change 'v2wallet' once url is changed in wallet module
-      this.router.navigate([`/v2wallet/${currency}/settings`]);
+      this.router.navigate([`/wallet/${currency}/settings`]);
     } else {
       const settingsEl =
         currency === 'cash'
@@ -154,7 +157,7 @@ export class WalletDashboardComponent implements OnInit {
     if (isPlatformBrowser(this.platformId)) {
       setTimeout(
         () =>
-          this.dashboardViewsTabsEl.nativeElement.scrollIntoView({
+          this.dashboardViewsEl.nativeElement.scrollIntoView({
             behavior: 'smooth',
           }),
         0

src/app/modules/wallet/v2/transactions-cash/transactions-cash.component.ts

@@ -55,11 +55,9 @@ export class WalletTransactionsCashComponent implements OnInit {
       if (stripeAccount.bankAccount) {
         this.currency = stripeAccount.bankAccount.currency.toUpperCase();
       }
-      console.log('stripe account', stripeAccount);
 
       this.runningTotal = stripeAccount.pendingBalance.amount / 100;
 
-      console.log('running - start', this.runningTotal);
       this.detectChanges();
     }
 
@@ -147,8 +145,6 @@ export class WalletTransactionsCashComponent implements OnInit {
       }
 
       formattedTx.runningTotal = this.formatAmount(this.runningTotal);
-      console.log('running A', this.runningTotal);
-      console.log('running B', formattedTx.runningTotal.total);
 
       if (formattedTx.superType === 'payout') {
         formattedTx.showRewardsPopup = false;
@@ -209,7 +205,6 @@ export class WalletTransactionsCashComponent implements OnInit {
       formattedAmount.frac = splitBalance[1].slice(0, 2);
     }
 
-    console.log('formatting...', formattedAmount.total);
     return formattedAmount;
   }
 

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

+import { NgModule } from '@angular/core';
+import { CommonModule as NgCommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '../../../common/common.module';
+
+import { WalletDashboardComponent } from './dashboard.component';
+import { WalletBalanceTokensV2Component } from './balance-tokens/balance-tokens.component';
+import { WalletChartComponent } from './chart/chart.component';
+import { WalletTransactionsTableComponent } from './transactions-table/transactions-table.component';
+import { WalletRewardsPopupComponent } from './rewards-popup/rewards-popup.component';
+import { WalletDashboardService } from './dashboard.service';
+import { WalletSettingsTokensComponent } from './settings-tokens/settings-tokens.component';
+import { WalletSettingsCashComponent } from './settings-cash/settings-cash.component';
+import { WalletSettingsETHComponent } from './settings-eth/settings-eth.component';
+import { WalletSettingsBTCComponent } from './settings-btc/settings-btc.component';
+import { WalletTokenOnboardingComponent } from './token-onboarding/token-onboarding.component';
+import { WalletModalComponent } from './modal/modal.component';
+import { WalletPhoneVerificationComponent } from './phone-verification/phone-verification.component';
+import { WalletOnchainTransferComponent } from './onchain-transfer/onchain-transfer.component';
+import { WalletBalanceCashComponent } from './balance-cash/balance-cash.component';
+import { WalletPendingCashPayoutComponent } from './pending-cash-payout/pending-cash-payout.component';
+import { WalletTransactionsTokensComponent } from './transactions-tokens/transactions-tokens.component';
+import { WalletTransactionsCashComponent } from './transactions-cash/transactions-cash.component';
+
+//////////////////////////////////////////////////
+// TODO add a wildcard and the parameter routes as children once feature-flag is lifted
+export const WALLET_V2_ROUTES: Routes = [
+  {
+    path: 'wallet',
+    component: WalletDashboardComponent,
+    data: {
+      title: 'Wallet',
+      description: 'Manage all of your transactions and earnings on Minds',
+      ogImage: '/assets/photos/graph.jpg',
+    },
+  },
+  {
+    path: 'wallet/:currency/:view',
+    component: WalletDashboardComponent,
+    data: {
+      title: 'Wallet',
+      description: 'Manage all of your transactions and earnings on Minds',
+      ogImage: '/assets/photos/graph.jpg',
+    },
+  },
+  {
+    path: 'wallet/:currency',
+    component: WalletDashboardComponent,
+    data: {
+      title: 'Wallet',
+      description: 'Manage all of your transactions and earnings on Minds',
+      ogImage: '/assets/photos/graph.jpg',
+    },
+  },
+];
+/////////////////////////////////////////////////
+
+@NgModule({
+  imports: [
+    NgCommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule,
+    RouterModule,
+  ],
+  declarations: [
+    WalletDashboardComponent,
+    WalletChartComponent,
+    WalletRewardsPopupComponent,
+    WalletTransactionsTableComponent,
+    WalletSettingsTokensComponent,
+    WalletSettingsCashComponent,
+    WalletSettingsETHComponent,
+    WalletSettingsBTCComponent,
+    WalletTokenOnboardingComponent,
+    WalletModalComponent,
+    WalletPhoneVerificationComponent,
+    WalletOnchainTransferComponent,
+    WalletBalanceTokensV2Component,
+    WalletBalanceCashComponent,
+    WalletPendingCashPayoutComponent,
+    WalletTransactionsTokensComponent,
+    WalletTransactionsCashComponent,
+  ],
+  exports: [WalletDashboardComponent],
+  providers: [WalletDashboardService],
+})
+export class WalletV2Module {}

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

-import { NgModule } from '@angular/core';
+import { NgModule, Injectable, Inject, APP_INITIALIZER } from '@angular/core';
 import { CommonModule as NgCommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes, Router } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { CommonModule } from '../../common/common.module';
@@ -48,26 +48,14 @@ import { ModalsModule } from '../modals/modals.module';
 import { ReferralsModule } from './tokens/referrals/referrals.module';
 import { ReferralsComponent } from './tokens/referrals/referrals.component';
 import { WalletUSDBalanceComponent } from './usd/balance.component';
+import { WalletV2Module } from './v2/wallet-v2.module';
+import { WALLET_V2_ROUTES } from '../wallet/v2/wallet-v2.module';
+import { FeaturesService } from '../../services/features.service';
+import { ConfigsService } from '../../common/services/configs.service';
 import { WalletDashboardComponent } from './v2/dashboard.component';
-import { WalletBalanceTokensV2Component } from './v2/balance-tokens/balance-tokens.component';
-import { WalletChartComponent } from './v2/chart/chart.component';
-import { WalletTransactionsTableComponent } from './v2/transactions-table/transactions-table.component';
-import { WalletRewardsPopupComponent } from './v2/rewards-popup/rewards-popup.component';
-import { WalletDashboardService } from './v2/dashboard.service';
-import { WalletSettingsTokensComponent } from './v2/settings-tokens/settings-tokens.component';
-import { WalletSettingsCashComponent } from './v2/settings-cash/settings-cash.component';
-import { WalletSettingsETHComponent } from './v2/settings-eth/settings-eth.component';
-import { WalletSettingsBTCComponent } from './v2/settings-btc/settings-btc.component';
-import { WalletTokenOnboardingComponent } from './v2/token-onboarding/token-onboarding.component';
-import { WalletModalComponent } from './v2/modal/modal.component';
-import { WalletPhoneVerificationComponent } from './v2/phone-verification/phone-verification.component';
-import { WalletOnchainTransferComponent } from './v2/onchain-transfer/onchain-transfer.component';
-import { WalletBalanceCashComponent } from './v2/balance-cash/balance-cash.component';
-import { WalletPendingCashPayoutComponent } from './v2/pending-cash-payout/pending-cash-payout.component';
-import { WalletTransactionsTokensComponent } from './v2/transactions-tokens/transactions-tokens.component';
-import { WalletTransactionsCashComponent } from './v2/transactions-cash/transactions-cash.component';
+import { BlockchainConsoleComponent } from '../blockchain/console/console.component';
 
-const walletRoutes: Routes = [
+export const WALLET_ROUTES: Routes = [
   {
     path: 'wallet',
     component: WalletComponent,
@@ -139,6 +127,10 @@ const walletRoutes: Routes = [
               title: 'Referrals',
             },
           },
+          {
+            path: '**',
+            redirectTo: 'contributions',
+          },
         ],
       },
       {
@@ -162,19 +154,6 @@ const walletRoutes: Routes = [
       { path: '**', component: WalletOverviewComponent },
     ],
   },
-  {
-    path: 'v2wallet',
-    // TODOOJM: choose actual path.
-    // TODOOJM:IMPORTANT - when switching, also change 'v2wallet'... in dashboard.html (scrollToTokenSettings()).
-    // TODOOJM: also allow **
-    redirectTo: 'v2wallet/tokens/overview',
-    pathMatch: 'full',
-    data: {
-      title: 'Wallet',
-    },
-  },
-  { path: 'v2wallet/:currency/:view', component: WalletDashboardComponent },
-  { path: 'v2wallet/:currency', component: WalletDashboardComponent },
 ];
 
 @NgModule({
@@ -186,7 +165,8 @@ const walletRoutes: Routes = [
     CommonModule,
     CheckoutModule,
     MonetizationOverviewModule,
-    RouterModule.forChild(walletRoutes),
+    RouterModule,
+    // RouterModule.forChild(walletRoutes),
     AdsModule,
     WireModule,
     BlockchainModule,
@@ -194,6 +174,7 @@ const walletRoutes: Routes = [
     PlusModule,
     ModalsModule,
     ReferralsModule,
+    WalletV2Module,
   ],
   declarations: [
     WalletComponent,
@@ -228,23 +209,6 @@ const walletRoutes: Routes = [
     WalletTokenContributionsChartComponent,
     WalletToken101Component,
     WalletUSDBalanceComponent,
-    WalletDashboardComponent,
-    WalletChartComponent,
-    WalletRewardsPopupComponent,
-    WalletTransactionsTableComponent,
-    WalletSettingsTokensComponent,
-    WalletSettingsCashComponent,
-    WalletSettingsETHComponent,
-    WalletSettingsBTCComponent,
-    WalletTokenOnboardingComponent,
-    WalletModalComponent,
-    WalletPhoneVerificationComponent,
-    WalletOnchainTransferComponent,
-    WalletBalanceTokensV2Component,
-    WalletBalanceCashComponent,
-    WalletPendingCashPayoutComponent,
-    WalletTransactionsTokensComponent,
-    WalletTransactionsCashComponent,
   ],
   exports: [
     WalletComponent,
@@ -259,7 +223,55 @@ const walletRoutes: Routes = [
     WalletBalanceTokensComponent,
     WalletUSDBalanceComponent,
   ],
-  entryComponents: [WalletComponent, WalletUSDTermsComponent],
-  providers: [WalletDashboardService],
+  entryComponents: [
+    WalletComponent,
+    WalletUSDTermsComponent,
+    WalletTokensComponent,
+    WalletTokenTransactionsComponent,
+    WalletTokenWithdrawComponent,
+    WalletTokenJoinComponent,
+    WalletTokenContributionsComponent,
+    WalletTokenAddressesComponent,
+    WalletToken101Component,
+    ReferralsComponent,
+    WalletUSDComponent,
+    WalletUSDTransactionsComponent,
+    WalletUSDEarningsComponent,
+    WalletUSDPayoutsComponent,
+    WalletUSDSettingsComponent,
+    WalletUSDOnboardingComponent,
+    WalletWireComponent,
+    WalletOverviewComponent,
+    WalletDashboardComponent,
+    BlockchainConsoleComponent,
+  ],
 })
-export class WalletModule {}
+export class WalletModule {
+  constructor(
+    @Inject(ConfigsService) configs: ConfigsService,
+    @Inject(FeaturesService) protected features: FeaturesService,
+    @Inject(Router) protected router: Router
+  ) {
+    configs.isReady$.subscribe(() => {
+      const v2Enabled = configs.get('features')['wallet-upgrade'];
+      let newConfig;
+      if (v2Enabled) {
+        newConfig = WALLET_V2_ROUTES.concat(router.config);
+      } else {
+        const cryptoRoutes: Routes = [
+          {
+            path: 'wallet/crypto',
+            component: WalletComponent,
+            children: [
+              { path: '', redirectTo: 'overview', pathMatch: 'full' },
+              { path: 'overview', component: BlockchainConsoleComponent },
+            ],
+          },
+        ];
+        const oldWalletRoutes = cryptoRoutes.concat(WALLET_ROUTES);
+        newConfig = oldWalletRoutes.concat(router.config);
+      }
+      router.resetConfig(newConfig);
+    });
+  }
+}