(feat) Display token multiplier on contributions page and apply to the...

(feat) Display token multiplier on contributions page and apply to the displayed contributions chart - #1488

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

@@ -47,7 +47,7 @@
  </p>
  </div>
 
- <m-wallet-token--chart></m-wallet-token--chart>
+ <m-wallet-token--chart [contributionValues]=this.contributionValues></m-wallet-token--chart>
 
  <div class="m-token-101--section">
  <h3 i18n="@@WALLET__TOKENS__101__ONCHAIN_VS_OFFCHAIN_TITLE">OnChain vs. Offchain</h3>

src/app/modules/wallet/tokens/101/101.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';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
  moduleId: module.id,
@@ -11,14 +7,14 @@ import { Session } from '../../../../services/session';
  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class WalletToken101Component {
-
- constructor(
- ) {
-
- }
-
- ngOnInit() {
-
- }
-
+ contributionValues = {
+  comments: 2,
+  reminds: 4,
+ votes: 1,
+  subscribers: 4,
+ referrals: 50,
+  referrals_welcome: 50,
+ checkin: 2,
+  jury_duty: 25
+ };
 }

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

@@ -3,35 +3,35 @@
  <i class="material-icons">thumb_up</i>
  <div class="m-token-contributions--chart--contribution-text">
  <span>Votes</span>
- <span>+1</span>
+ <span>+{{contributionValues.votes | number}}</span>
  </div>
  </div>
  <div class="m-token-contributions--chart--contribution">
- <i class="material-icons" style="width:60px;">mode_comments</i>
+ <i class="material-icons" style="width: 42px">mode_comments</i>
  <div class="m-token-contributions--chart--contribution-text">
  <span>Comments</span>
- <span>+2</span>
+ <span>+{{contributionValues.comments | number}}</span>
  </div>
  </div>
  <div class="m-token-contributions--chart--contribution">
  <i class="material-icons">person_add</i>
  <div class="m-token-contributions--chart--contribution-text">
  <span>Subscribers</span>
- <span>+4</span>
+ <span>+{{contributionValues.subscribers | number}}</span>
  </div>
  </div>
  <div class="m-token-contributions--chart--contribution">
  <i class="material-icons">repeat</i>
  <div class="m-token-contributions--chart--contribution-text">
  <span>Reminds</span>
- <span>+4</span>
+ <span>+{{contributionValues.reminds | number}}</span>
  </div>
  </div>
  <div class="m-token-contributions--chart--contribution">
  <i class="material-icons">people</i>
  <div class="m-token-contributions--chart--contribution-text">
  <span>Referrals</span>
- <span>+50</span>
+ <span>+{{contributionValues.referrals | number}}</span>
  </div>
  </div>
  <div class="m-token-contributions--chart--contribution">
@@ -45,14 +45,14 @@
  <i class="material-icons">gavel</i>
  <div class="m-token-contributions--chart--contribution-text">
  <span>Jury Duty</span>
- <span>+25</span>
+ <span>+{{contributionValues.jury_duty | number}}</span>
  </div>
  </div>
  <div class="m-token-contributions--chart--contribution">
  <i class="material-icons">check_circle</i>
  <div class="m-token-contributions--chart--contribution-text">
  <span>Check-ins</span>
- <span>+2</span>
+ <span>+{{contributionValues.checkin | number}}</span>
  </div>
  </div>
  <div class="m-token-contributions--chart--contribution">

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

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from '@angular/core';
 import { Router } from '@angular/router';
 
 import { Client } from '../../../../services/api/client';
@@ -18,4 +18,5 @@ export class WalletTokenContributionsChartComponent {
  protected router: Router,
  ) { }
 
+ @Input() contributionValues;
 }

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

@@ -2,9 +2,9 @@
  <m-token--onboarding--rewards skippable="false"></m-token--onboarding--rewards>
 </div>
 
-<m-wallet-token--overview></m-wallet-token--overview>
+<m-wallet-token--overview #overviewComponent></m-wallet-token--overview>
 
-<m-wallet-token--chart></m-wallet-token--chart>
+<m-wallet-token--chart [contributionValues]=overviewComponent.overview.contributionValues></m-wallet-token--chart>
 
 <div class="m-token-contributions--ledger">
  <div class="m-token-contributions--ledger-filters m-border">

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

 import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-
-import { Component, DebugElement, ChangeDetectorRef, Input, Output } from '@angular/core';
+import { Component, ChangeDetectorRef } from '@angular/core';
 import { WalletTokenContributionsComponent } from './contributions.component';
 import { clientMock } from '../../../../../tests/client-mock.spec';
 import { Client } from '../../../../services/api/client';
-import { Web3WalletService } from '../../../blockchain/web3-wallet.service';
-
-import { of } from 'rxjs/internal/observable/of';
-import { ActivatedRoute, Router } from '@angular/router';
-import { MockComponent, MockDirective, MockService } from '../../../../utils/mock';
+import { Router } from '@angular/router';
+import { MockComponent, MockDirective } from '../../../../utils/mock';
 import { Session } from '../../../../services/session';
 import { RouterTestingModule } from '@angular/router/testing';
 import { By } from '@angular/platform-browser';
@@ -19,13 +15,23 @@ describe('WalletTokenContributionsComponent', () => {
  let comp: WalletTokenContributionsComponent;
  let fixture: ComponentFixture<WalletTokenContributionsComponent>;
 
+ @Component({
+ selector: 'm-wallet-token--overview',
+ template: '<p>Mock Token Chart</p>'
+ })
+ class MockTokenOverviewComponent {
+ overview = {
+ contributionValues: null
+ };
+ }
+
  beforeEach(async(() => {
 
  TestBed.configureTestingModule({
  declarations: [
  MockDirective({ selector: '[mdl]', inputs: ['mdl'] }),
- MockComponent({ selector: 'm-wallet-token--overview'}),
- MockComponent({ selector: 'm-wallet-token--chart'}),
+ MockTokenOverviewComponent,
+ MockComponent({ selector: 'm-wallet-token--chart', inputs: ['contributionValues']}),
  MockComponent({ selector: 'm-date-selector', inputs: ['label', 'date', 'dateChange', 'dateFormat'] }),
  MockComponent({ selector: 'm-token--onboarding--rewards', inputs: ['skippable']}),
  WalletTokenContributionsComponent

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

@@ -43,6 +43,13 @@
  </ng-container>
  </div>
 
+ <div class="m-token-contributions--overview--row">
+ <span i18n="@@WALLET__TOKENS__CONTRIBUTIONS__OVERVIEW__YOUR_MULTIPLIER">Reward Multiplier:</span>
+ <ng-container *ngIf="overview.yourRewardFactor !== null">
+ {{ overview.yourRewardFactor | number }}x
+ </ng-container>
+ </div>
+
  </div>
 
  </div>

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

@@ -23,6 +23,17 @@ export class WalletTokenContributionsOverviewComponent implements OnInit, OnDest
  yourContribution: null,
  totalNetworkContribution: null,
  yourShare: null,
+ yourRewardFactor: null,
+ contributionValues: {
+ comments: null,
+ reminds: null,
+ votes: null,
+ subscribers: null,
+ referrals: null,
+ referrals_welcome: null,
+ checkin: null,
+ jury_duty: null
+ }
  };
 
  protected updateTimer$;
@@ -45,6 +56,8 @@ export class WalletTokenContributionsOverviewComponent implements OnInit, OnDest
  this.overview.yourContribution = result.yourContribution;
  this.overview.totalNetworkContribution = result.totalNetworkContribution;
  this.overview.yourShare = result.yourShare;
+ this.overview.yourRewardFactor = result.yourRewardFactor;
+ this.overview.contributionValues = result.contributionValues;
 
  this.detectChanges();
  } catch (e) {