(feat): wallet upgrade superstructure

src/app/common/common.module.ts

@@ -126,7 +126,6 @@ import { ShadowboxSubmitButtonComponent } from './components/shadowbox-submit-bu
 import { FormDescriptorComponent } from './components/form-descriptor/form-descriptor.component';
 import { FormToastComponent } from './components/form-toast/form-toast.component';
 import { SsoService } from './services/sso.service';
-import { TopTabsComponent } from './layout/top-tabs/top-tabs.component';
 import { ShadowboxHeaderTabsComponent } from './components/shadowbox-header-tabs/shadowbox-header-tabs.component';
 import { TimespanFilterComponent } from './components/timespan-filter/timespan-filter.component';
 
@@ -244,7 +243,6 @@ PlotlyModule.plotlyjs = PlotlyJS;
     FormDescriptorComponent,
     FormToastComponent,
     ShadowboxSubmitButtonComponent,
-    TopTabsComponent,
     ShadowboxHeaderTabsComponent,
     TimespanFilterComponent,
   ],
@@ -347,7 +345,6 @@ PlotlyModule.plotlyjs = PlotlyJS;
     FormToastComponent,
     ShadowboxSubmitButtonComponent,
     ShadowboxHeaderTabsComponent,
-    TopTabsComponent,
     TimespanFilterComponent,
   ],
   providers: [

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

@@ -37,7 +37,7 @@ export class ShadowboxHeaderComponent implements AfterViewInit {
   }
 
   // updateMetric(metric) {
-  //   // TODO: if clicked metric is not fully visible, slide() until it is
+  //   // TODOOJM: if clicked metric is not fully visible, slide() until it is
   //   this.analyticsService.updateMetric(metric.id);
   // }
 

src/app/common/components/timespan-filter/timespan-filter.component.html

 <div class="m-timespanFilter__container" *ngIf="timespans">
   <div
     class="m-timespanFilter__option"
-    [ngClass]="{ selected: timespan.selected }"
+    [ngClass]="{ active: timespan.id === activeTimespanId }"
     *ngFor="let timespan of timespans"
     (click)="changeTimespan(timespan.id)"
   >

src/app/common/components/timespan-filter/timespan-filter.component.scss

 m-timespanFilter {
+  display: flex;
+  justify-content: flex-end;
+  flex-flow: row nowrap;
   .m-timespanFilter__container {
     display: flex;
     flex-flow: row nowrap;
     border-radius: 5px;
+    cursor: pointer;
     @include m-theme() {
       border: 1px solid themed($m-grey-50);
+      color: themed($m-grey-300);
     }
   }
   .m-timespanFilter__option {
+    padding: 5px 16px;
     &:not(:last-child) {
       @include m-theme() {
         border-right: 1px solid themed($m-grey-50);
       }
     }
+    &.active {
+      @include m-theme() {
+        color: themed($m-grey-800);
+      }
+    }
   }
 }

src/app/common/components/timespan-filter/timespan-filter.component.ts

@@ -7,6 +7,7 @@ import { Timespan } from '../../../interfaces/dashboard';
 })
 export class TimespanFilterComponent {
   @Input() timespans: Timespan[];
+  @Input() activeTimespanId: string;
   @Output() timespanChanged: EventEmitter<any> = new EventEmitter();
 
   constructor() {}

src/app/common/layout/top-tabs/top-tabs.component.html

-<div class="m-topTabs__wrapper" *ngIf="tabs">
-  <div class="m-topTabs__tabsContainer">
-    <div
-      class="m-topTabs__tab"
-      [ngClass]="{ active: tab.id === activeTabId }"
-      *ngFor="let tab of tabs"
-      (click)="changeTab(tab.id)"
-    >
-      {{ tab.label }}
-    </div>
-  </div>
-  <div class="m-topTabs__viewsContainer">
-    <ng-content select="[topTab]"></ng-content>
-  </div>
-</div>

src/app/common/layout/top-tabs/top-tabs.component.scss

-m-topTabs {
-  .m-topTabs__tabsContainer {
-    box-sizing: border-box;
-    display: flex;
-    flex-flow: row nowrap;
-    @include m-theme() {
-      border-bottom: 1px solid themed($m-grey-100);
-    }
-  }
-  .m-topTabs__tab {
-    cursor: pointer;
-    padding: 13px 20px;
-    margin: 0 13px;
-    box-sizing: border-box;
-    font-size: 15px;
-    font-weight: 300;
-    line-height: 20px;
-    @include m-theme() {
-      color: themed($m-grey-300);
-      border-bottom: 3px solid themed($m-white);
-    }
-    &.active {
-      @include m-theme() {
-        color: themed($m-grey-800);
-        border-bottom: 3px solid themed($m-blue);
-      }
-    }
-    &:hover {
-      @include m-theme() {
-        color: themed($m-grey-800);
-      }
-    }
-  }
-}

src/app/common/layout/top-tabs/top-tabs.component.ts

-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { TopTab } from '../../../interfaces/dashboard';
-
-@Component({
-  selector: 'm-topTabs',
-  templateUrl: './top-tabs.component.html',
-})
-export class TopTabsComponent implements OnInit {
-  @Input() tabs: TopTab[];
-  @Input() activeTabId: string;
-
-  @Output() tabChanged: EventEmitter<any> = new EventEmitter();
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  changeTab(tabId) {
-    this.activeTabId = tabId;
-    this.tabChanged.emit({ tabId: tabId });
-  }
-}

src/app/interfaces/dashboard.ts

@@ -42,15 +42,8 @@ export interface Metric {
   unit?: string;
   description?: string;
   visualisation: Visualisation | null;
-  tabs?: TopTab[];
   value?: number;
 }
-
-export interface TopTab {
-  id: string;
-  label: string;
-  selected: boolean;
-}
 export interface Summary {
   current_value: number;
   comparison_value: number;
@@ -82,7 +75,7 @@ export interface Timespan {
   comparison_interval?: number;
   from_ts_ms: number;
   from_ts_iso: string;
-  selected: boolean;
+  selected?: boolean;
 }
 
 export interface UserState {

src/app/modules/pro/subscription/subscription.component.html

@@ -57,7 +57,7 @@
         </button>
       </ng-template>
       <p class="m-marketing__subText">
-        By purchasing PRO you agree to
+        By purchasing Pro you agree to
         <a
           href="https://cdn-assets.minds.com/pro-terms-27-11-2019.pdf"
           target="_blank"

src/app/modules/wallet/v2/action-button/action-button.component.html

 <p>
-  wallet-action-button works!
+  todo: m-walletActionButton
 </p>

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

 <p>
-  wallet-balance works!
+  TODO: m-walletBalance
 </p>

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

+m-walletBalance {
+  display: block;
+  margin: 50px 57px;
+}

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

 <m-timespanFilter
   [timespans]="timespans"
+  [activeTimespanId]="activeTimespanId"
   (timespanChanged)="updateTimespan($event)"
 ></m-timespanFilter>
 <m-chartV2

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

@@ -9,24 +9,26 @@ import { Timespan } from '../../../../interfaces/dashboard';
 export class WalletChartComponent implements OnInit {
   @Input() activeCurrencyId;
   timespans: Timespan[];
-  selectedTimespan;
+  activeTimespanId;
   data;
+  selectedCurrency;
 
   constructor(protected walletService: WalletDashboardService) {}
 
   ngOnInit() {
     this.data = this.walletService.getData();
-    this.timespans = this.data.timespans;
+    this.timespans = this.walletService.getTimespans();
 
-    this.selectedTimespan = this.timespans.find(
+    this.activeTimespanId = this.timespans.find(
       ts => ts.id === this.data.timespan
     ).id;
-    this.data = this.walletService
+    this.selectedCurrency = this.walletService
       .getCurrencies()
       .find(currency => currency.id === this.activeCurrencyId);
   }
 
   updateTimespan($event) {
-    // $event.timespanId
+    this.activeTimespanId = $event.timespanId;
+    // this.walletService.updateTimespan($event.timespanId);
   }
 }

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

@@ -20,42 +20,50 @@
 
           <div class="m-shadowboxLayout__body">
             <m-walletBalance class="m-shadowboxLayout__body"></m-walletBalance>
-            <m-topTabs
-              [tabs]="topTabOptions"
-              [activeTabId]="activeTabId"
-              (tabChanged)="updateActiveTabId($event)"
-            >
-              <!-- <div class="m-walletDashboard__spinnerContainer" *ngIf="loading">
+            <div class="m-walletDashboardViews__wrapper">
+              <div class="m-walletDashboardViews__tabsContainer">
+                <div
+                  class="m-walletDashboardViews__tab"
+                  [ngClass]="{ active: view.id === activeViewId }"
+                  *ngFor="let view of views[activeCurrencyId]"
+                  (click)="updateView(view.id)"
+                >
+                  {{ view.label }}
+                </div>
+              </div>
+              <div class="m-walletDashboardViews__viewsContainer">
+                <!-- <div class="m-walletDashboard__spinnerContainer" *ngIf="loading">
                 <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
               </div> -->
-              <m-walletChart
-                topTab
-                [activeCurrencyId]="activeCurrencyId"
-                *ngIf="activeTabId === 'overview'"
-              ></m-walletChart>
-              <m-walletTransactionsTable
-                topTab
-                *ngIf="activeTabId === 'transactions'"
-              ></m-walletTransactionsTable>
-              <ng-container *ngIf="activeTabId === 'settings'">
-                <m-walletSettings--tokens
-                  topTab
-                  *ngIf="activeCurrencyId === 'tokens'"
-                ></m-walletSettings--tokens>
-                <m-walletSettings--usd
-                  topTab
-                  *ngIf="activeCurrencyId === 'usd'"
-                ></m-walletSettings--usd>
-                <m-walletSettings--eth
-                  topTab
-                  *ngIf="activeCurrencyId === 'eth'"
-                ></m-walletSettings--eth>
-                <m-walletSettings--btc
-                  topTab
-                  *ngIf="activeCurrencyId === 'btc'"
-                ></m-walletSettings--btc>
-              </ng-container>
-            </m-topTabs>
+                <m-walletChart
+                  class="m-walletDashboardViews__view"
+                  [activeCurrencyId]="activeCurrencyId"
+                  *ngIf="activeViewId === 'overview'"
+                ></m-walletChart>
+                <m-walletTransactionsTable
+                  class="m-walletDashboardViews__view"
+                  *ngIf="activeViewId === 'transactions'"
+                ></m-walletTransactionsTable>
+                <ng-container *ngIf="activeViewId === 'settings'">
+                  <m-walletSettings--tokens
+                    class="m-walletDashboardViews__view"
+                    *ngIf="activeCurrencyId === 'tokens'"
+                  ></m-walletSettings--tokens>
+                  <m-walletSettings--usd
+                    class="m-walletDashboardViews__view"
+                    *ngIf="activeCurrencyId === 'usd'"
+                  ></m-walletSettings--usd>
+                  <m-walletSettings--eth
+                    class="m-walletDashboardViews__view"
+                    *ngIf="activeCurrencyId === 'eth'"
+                  ></m-walletSettings--eth>
+                  <m-walletSettings--btc
+                    class="m-walletDashboardViews__view"
+                    *ngIf="activeCurrencyId === 'btc'"
+                  ></m-walletSettings--btc>
+                </ng-container>
+              </div>
+            </div>
           </div>
         </m-shadowboxLayout>
       </ng-container>

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

@@ -15,4 +15,42 @@ m-walletDashboard {
       }
     }
   }
+  .m-walletDashboardViews__tabsContainer {
+    box-sizing: border-box;
+    display: flex;
+    flex-flow: row nowrap;
+    margin: 0 40px;
+    @include m-theme() {
+      border-bottom: 1px solid themed($m-grey-100);
+    }
+  }
+  .m-walletDashboardViews__tab {
+    cursor: pointer;
+    padding: 13px 20px;
+    margin: 0 13px;
+    box-sizing: border-box;
+    font-size: 15px;
+    font-weight: 300;
+    line-height: 20px;
+    @include m-theme() {
+      color: themed($m-grey-300);
+      border-bottom: 3px solid themed($m-white);
+    }
+    &.active {
+      @include m-theme() {
+        color: themed($m-grey-800);
+        border-bottom: 3px solid themed($m-blue);
+      }
+    }
+    &:hover {
+      @include m-theme() {
+        color: themed($m-grey-800);
+      }
+    }
+  }
+  .m-walletDashboardViews__view {
+    display: block;
+    margin: 50px 57px 0 57px;
+    padding-bottom: 50px;
+  }
 }

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

-// TODOOJM rename all the toptab stuff to 'view'
-
 import {
   Component,
   OnInit,
@@ -14,7 +12,7 @@ import { ActivatedRoute, Router, ParamMap } from '@angular/router';
 import { MindsTitle } from '../../../services/ux/title';
 import sidebarMenu from './sidebar-menu.default';
 import { Menu } from '../../../common/components/sidebar-menu/sidebar-menu.component';
-import { ShadowboxHeaderTab, TopTab } from '../../../interfaces/dashboard';
+import { ShadowboxHeaderTab } from '../../../interfaces/dashboard';
 
 @Component({
   selector: 'm-walletDashboard',
@@ -26,36 +24,23 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
   paramsSubscription: Subscription;
 
   currencies: ShadowboxHeaderTab[];
-  activeCurrencyId;
-  activeTabId;
-  topTabOptions;
+  activeCurrencyId: string;
+  activeViewId: string;
   chartData;
 
-  topTabs = [
-    {
-      id: 'tokens',
-      tabs: [
-        { id: 'overview', label: 'Overview' },
-        { id: 'transactions', label: 'Transactions' },
-        { id: 'settings', label: 'Settings' },
-      ],
-    },
-    {
-      id: 'usd',
-      tabs: [
-        { id: 'transactions', label: 'Transactions' },
-        { id: 'settings', label: 'Settings' },
-      ],
-    },
-    {
-      id: 'eth',
-      tabs: [{ id: 'settings', label: 'Settings' }],
-    },
-    {
-      id: 'btc',
-      tabs: [{ id: 'settings', label: 'Settings' }],
-    },
-  ];
+  views: any = {
+    tokens: [
+      { id: 'overview', label: 'Overview' },
+      { id: 'transactions', label: 'Transactions' },
+      { id: 'settings', label: 'Settings' },
+    ],
+    usd: [
+      { id: 'transactions', label: 'Transactions' },
+      { id: 'settings', label: 'Settings' },
+    ],
+    eth: [{ id: 'settings', label: 'Settings' }],
+    btc: [{ id: 'settings', label: 'Settings' }],
+  };
 
   constructor(
     protected walletService: WalletDashboardService,
@@ -77,18 +62,15 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
 
     this.route.paramMap.subscribe((params: ParamMap) => {
       this.activeCurrencyId = params.get('currency');
-      this.topTabOptions = this.topTabs.find(
-        currencyTabsObj => currencyTabsObj.id === this.activeCurrencyId
-      ).tabs;
 
-      if (params.get('topTab')) {
-        this.activeTabId = params.get('topTab');
+      if (params.get('view')) {
+        this.activeViewId = params.get('view');
       } else {
-        this.activeTabId = this.topTabOptions[0];
-        this.rerouteTopTab(this.activeTabId);
+        this.activeViewId = this.views[this.activeCurrencyId][0];
+        this.updateView(this.activeViewId);
       }
 
-      if (this.activeTabId === 'overview') {
+      if (this.activeViewId === 'overview') {
         this.chartData = this.currencies.find(
           currency => currency.id === this.activeCurrencyId
         );
@@ -106,16 +88,12 @@ export class WalletDashboardComponent implements OnInit, OnDestroy {
   }
 
   updateCurrency($event) {
-    // this.walletService.updazteCurrency($event.tabId);
-  }
-
-  updateActiveTabId($event) {
-    this.activeTabId = $event.tabId;
-    this.rerouteTopTab(this.activeCurrencyId);
+    // this.walletService.updateCurrency($event.tabId);
   }
 
-  rerouteTopTab(topTabId) {
-    this.router.navigate(['/v2wallet', this.activeCurrencyId, topTabId]);
+  updateView(viewId) {
+    this.activeViewId = viewId;
+    this.router.navigate(['/v2wallet', this.activeCurrencyId, viewId]);
 
     this.detectChanges();
   }

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

@@ -9,7 +9,11 @@ import {
 } from 'rxjs/operators';
 import { MindsHttpClient } from '../../../common/api/client.service';
 import fakeData from './fake-data';
-import { Response, UserState } from '../../../interfaces/dashboard';
+import {
+  Response,
+  UserState,
+  ShadowboxHeaderTab,
+} from '../../../interfaces/dashboard';
 
 // export interface UserState {}
 
@@ -19,6 +23,16 @@ import { Response, UserState } from '../../../interfaces/dashboard';
 
 @Injectable()
 export class WalletDashboardService {
+  // private currencies = new BehaviorSubject<ShadowboxHeaderTab[]>([
+  //   {
+  //     id: 'tokens',
+  //     label: 'Tokens',
+  //     unit: 'tokens',
+  //     value: 0,
+  //   },
+  // ]);
+  // private currencies$ = this.currencies.asObservable();
+
   // private store = new BehaviorSubject<UserState>(_state);
   // private state$ = this.store.asObservable();
 
@@ -73,13 +87,27 @@ export class WalletDashboardService {
   }
 
   getTimespans() {
-    return fakeData;
+    return fakeData.timespans;
   }
 
   getData() {
     return fakeData;
   }
 
+  updateCurrency(currencyId) {}
+
+  private getCurrencySubtotals() {
+    // return this.http
+    //   .get(`api/v2/analytics/dashboards/${category}`, {
+    //     metric,
+    //   })
+    //   .pipe(
+    //     catchError(_ => of(null)),
+    //     map(response => response)
+    //   );
+    // }
+  }
+
   // loadFromRemote() {
   //   combineLatest([this.category$, this.timespan$, this.metric$, this.filter$])
   //     .pipe(

src/app/modules/wallet/v2/fake-data.ts

@@ -8,7 +8,6 @@ const fakeData = {
       interval: 'day',
       from_ts_ms: 1572566400000,
       from_ts_iso: '2019-11-01T00:00:00+00:00',
-      selected: true,
     },
     {
       id: '30d',
@@ -16,7 +15,6 @@ const fakeData = {
       interval: 'day',
       from_ts_ms: 1571270400000,
       from_ts_iso: '2019-10-17T00:00:00+00:00',
-      selected: false,
     },
     {
       id: '12m',
@@ -24,7 +22,6 @@ const fakeData = {
       interval: 'month',
       from_ts_ms: 1542412800000,
       from_ts_iso: '2018-11-17T00:00:00+00:00',
-      selected: false,
     },
   ],
   currency: 'tokens',

src/app/modules/wallet/v2/rewards-popup/rewards-popup.component.html

 <p>
-  wallet-rewards-popup works!
+  TODO: m-walletRewardsPopup
 </p>

src/app/modules/wallet/v2/settings-btc/settings-btc.component.html

 <p>
-  settings-btc works!
+  TODO: m-walletSettings--btc
 </p>

src/app/modules/wallet/v2/settings-btc/wallet-settings-btc.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WalletSettingsBTCComponent } from './settings-btc.component';
-
-describe('WalletSettingsBTCComponent', () => {
-  let component: WalletSettingsBTCComponent;
-  let fixture: ComponentFixture<WalletSettingsBTCComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [WalletSettingsBTCComponent],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WalletSettingsBTCComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/modules/wallet/v2/settings-eth/settings-eth.component.html

 <p>
-  wallet-settings-eth works!
+  TODO: m-walletSettings--eth
 </p>

src/app/modules/wallet/v2/settings-eth/wallet-settings-eth.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WalletSettingsETHComponent } from './settings-eth.component';
-
-describe('WalletSettingsETHComponent', () => {
-  let component: WalletSettingsETHComponent;
-  let fixture: ComponentFixture<WalletSettingsETHComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [WalletSettingsETHComponent],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WalletSettingsETHComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/modules/wallet/v2/settings-tokens/settings-tokens.component.html

 <p>
-  settings--tokens works!
+  TODO: m-walletSettings--tokens
 </p>

src/app/modules/wallet/v2/settings-usd/settings-usd.component.html

 <p>
-  settings--usd works!
+  TODO: m-walletSettings--usd
 </p>

src/app/modules/wallet/v2/transactions-table/transactions-table.component.html

 <p>
-  wallet-transactions works!
+  TODO: m-walletTransactionsTable
 </p>

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

@@ -115,7 +115,7 @@ const walletRoutes: Routes = [
     redirectTo: 'v2wallet/tokens/overview',
     pathMatch: 'full',
   },
-  { path: 'v2wallet/:currency/:topTab', component: WalletDashboardComponent },
+  { path: 'v2wallet/:currency/:view', component: WalletDashboardComponent },
   { path: 'v2wallet/:currency', component: WalletDashboardComponent },
 ];