(feat): various changes and send POST request on votes

app/src/app/app.component.html

 <div class="topbar">
  <div class="icon">T3</div>
- <div class="links">
+ <div class="links" *ngIf="false">
  <a
  (click)="switchView('unlock')"
  [class.viewLink--active]="view === 'unlock'"
+ *ngIf="!(verificationService.profile$ | async)"
  >Unlock</a
  >
  <span class="spacer">|</span>
- <a (click)="switchView('vote')" [class.viewLink--active]="view === 'vote'"
+ <a
+ (click)="switchView('vote')"
+ [class.viewLink--active]="view === 'vote'"
+ *ngIf="verificationService.profile$ | async"
  >Vote</a
  >
  <span class="spacer">|</span>
- <a (click)="switchView('tree')" [class.viewLink--active]="view === 'tree'"
+ <a
+ (click)="switchView('tree')"
+ [class.viewLink--active]="view === 'tree'"
+ *ngIf="false"
  >My Trust Tree</a
  >
  </div>
@@ -23,10 +30,13 @@
  <t3-verification></t3-verification>
  </div>
  <!-- TREE VIEW -->
- <div *ngIf="view === 'tree'" class="view--tree">
+ <div
+ *ngIf="view === 'tree' && (verificationService.profile$ | async)"
+ class="view--tree"
+ >
  <t3-tree></t3-tree>
  </div>
- <div class="view--vote">
+ <div class="view--vote" *ngIf="verificationService.profile$ | async">
  <!-- Trust component-->
  <t3-trust></t3-trust>
  </div>

app/src/app/app.component.ts

 import { Component } from "@angular/core";
+import { uPortVerificationService } from "./modules/uport/verification.service";
 
 declare const Connect: any;
 
@@ -9,9 +10,9 @@ declare const Connect: any;
 })
 export class AppComponent {
  title = "t3";
- view: string = "vote"; // ! TODO later: this should be 'unlock'
+ view: string = "unlock"; // ! TODO later: this should be 'unlock'
 
- constructor() {}
+ constructor(public verificationService: uPortVerificationService) {}
 
  switchView(view) {
  this.view = view;

app/src/app/modules/trust/trust.component.html

@@ -54,45 +54,34 @@
  >keyboard_arrow_right</i
  >
  </div>
- <!-- METRICS -->
- <div class="metricsWrapper">
- <!-- THERMOMETER -->
- <div class="thermometerContainer">
- <div class="thermometerWrapper">
- <div class="thermometer"></div>
- <!-- [@pointerSlideAnimation]="!hasRecalculated ? 'current' : 'new'" -->
- <i class="material-icons pointer">arrow_drop_up</i>
- </div>
+ <!-- SCORE -->
+ <div class="scoreWrapper">
+ <div class="score">
+ {{ user.score | number: "0.1-3" | percent }}
  </div>
- <!-- SCORE -->
- <div class="scoreWrapper">
- <div class="score">
- {{ user.score | number: "0.1-3" | percent }}
- </div>
- <!-- METRICS -->
- <div class="metricsWrapper">
- <!-- THERMOMETER -->
- <div class="thermometerContainer">
- <div class="thermometerWrapper">
- <div class="thermometer"></div>
+ <!-- METRICS -->
+ <div class="metricsWrapper">
+ <!-- THERMOMETER -->
+ <div class="thermometerContainer">
+ <div class="thermometerWrapper">
+ <div class="thermometer"></div>
 
- <!-- [@pointerSlideAnimation]="!hasRecalculated ? 'current' : 'new'" -->
- <div class="pointerWrapper">
- <i
- class="material-icons pointer"
- [style.left.%]="user.score * 94"
- >arrow_drop_up</i
- >
- </div>
+ <!-- [@pointerSlideAnimation]="!hasRecalculated ? 'current' : 'new'" -->
+ <div class="pointerWrapper">
+ <i class="material-icons pointer" [style.left.%]="user.score * 94"
+ >arrow_drop_up</i
+ >
  </div>
  </div>
- <!-- SCORE -->
- <div class="scoreWrapper">
- <div class="score">
- {{ user.score | number: '0.1-3' | percent }}
- </div>
- <div class="scoreSubtitle">Trustworthy</div>
+ </div>
+ <!-- SCORE -->
+ <div class="scoreWrapper">
+ <div class="score">
+ {{ user.score | number: "0.1-3" | percent }}
  </div>
+ <div class="scoreSubtitle">Trustworthy</div>
+ </div>
+ </div>
 
  <!-- DETAILS -->
  <div class="detailsWrapper">

app/src/app/modules/trust/trust.component.ts

-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy } from "@angular/core";
 import {
  trigger,
  state,
  style,
  animate,
  transition
-} from '@angular/animations';
-import { T3TrustService } from './trust.service';
-import { T3TrustTraversalService } from './traversal.service';
+} from "@angular/animations";
+import { T3TrustService } from "./trust.service";
+import { T3TrustTraversalService } from "./traversal.service";
 
 @Component({
- selector: 't3-trust',
- templateUrl: './trust.component.html',
- styleUrls: ['trust.component.scss'],
+ selector: "t3-trust",
+ templateUrl: "./trust.component.html",
+ styleUrls: ["trust.component.scss"],
  animations: [
  // Fade media in after load
- trigger('fadeAnimation', [
+ trigger("fadeAnimation", [
  state(
- 'in',
+ "in",
  style({
  opacity: 1
  })
  ),
  state(
- 'out',
+ "out",
  style({
  opacity: 0.3
  })
  ),
- transition('in <=> out', [animate('100ms')])
+ transition("in <=> out", [animate("100ms")])
  ])
  ]
 })
 export class T3TrustComponent implements OnInit, OnDestroy {
- view: string = 'unlock';
- actorDid: string = '000';
+ view: string = "unlock";
+ actorDid: string = "000";
  showDetails: boolean = false;
  user: any = null;
  hasVotedOnUser: boolean = false;
@@ -73,43 +73,43 @@ export class T3TrustComponent implements OnInit, OnDestroy {
  // ! remove one of these later
  usersRaw: Array<any> = [
  {
- entity_did: 'did:fake:2',
+ entity_did: "did:fake:2",
  score: 0.33,
- name: 'Sideshow Bob',
- avatarUrl: '/assets/brewski.jpg'
+ name: "Sideshow Bob",
+ avatarUrl: "/assets/brewski.jpg"
  },
  {
- entity_did: 'did:fake:3',
+ entity_did: "did:fake:3",
  score: 0.77,
- name: 'Good girl',
- avatarUrl: '/assets/avatar.png'
+ name: "Good girl",
+ avatarUrl: "/assets/avatar.png"
  },
  {
- entity_did: 'did:fake:4',
+ entity_did: "did:fake:4",
  score: 1.0,
- name: 'Astronaut Lily',
- avatarUrl: '/assets/moonlily.jpg'
+ name: "Astronaut Lily",
+ avatarUrl: "/assets/moonlily.jpg"
  }
  ];
 
  users: Array<any> = [
  {
- entity_did: 'did:fake:2',
+ entity_did: "did:fake:2",
  score: 0.33,
- name: 'Sideshow Bob',
- avatarUrl: '/assets/brewski.jpg'
+ name: "Sideshow Bob",
+ avatarUrl: "/assets/brewski.jpg"
  },
  {
- entity_did: 'did:fake:3',
+ entity_did: "did:fake:3",
  score: 0.77,
- name: 'Good girl',
- avatarUrl: '/assets/avatar.png'
+ name: "Good girl",
+ avatarUrl: "/assets/avatar.png"
  },
  {
- entity_did: 'did:fake:4',
+ entity_did: "did:fake:4",
  score: 0.9,
- name: 'Astronaut Lily',
- avatarUrl: '/assets/moonlily.jpg'
+ name: "Astronaut Lily",
+ avatarUrl: "/assets/moonlily.jpg"
  }
  ];
 
@@ -122,9 +122,9 @@ export class T3TrustComponent implements OnInit, OnDestroy {
 
  ngOnInit() {
  this.traversalService.fetchFromEthereum(
- '0x3e010d48eeE73c9f545591C52E3bD23a7340A91F'
+ "0x3e010d48eeE73c9f545591C52E3bD23a7340A91F"
  );
- this.finalTrustTree = this.trustService.getTrustTree('1');
+ this.finalTrustTree = this.trustService.getTrustTree("1");
  console.log(this.finalTrustTree);
 
  this.joinArrays(); // ! TODO : switch trustTreeRaw for finalTrustTree
@@ -152,16 +152,20 @@ export class T3TrustComponent implements OnInit, OnDestroy {
  console.log(this.users);
  }
 
- submitVote(vote) {
+ async submitVote(vote) {
+ await this.trustService.vote({
+ did: this.user.entity_did,
+ score: vote
+ });
  switch (vote) {
  case -1:
- console.log('ur fake news');
+ console.log("ur fake news");
  break;
  case 0:
- console.log('idk what to think');
+ console.log("idk what to think");
  break;
  case 1:
- console.log('ur legit news');
+ console.log("ur legit news");
  }
  this.hasVotedOnUser = true;
  this.hasVotedOnUserThisSession = true;

app/src/app/modules/trust/trust.service.ts

-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Injectable, Inject } from "@angular/core";
+import { Observable } from "rxjs";
+import { WEB3 } from "../web3/web3.module";
+import * as TrustContract from "../web3/contracts/trust.contract";
+import { HttpClient } from "@angular/common/http";
+import { uPortVerificationService } from "../uport/verification.service";
+import { first } from "rxjs/operators";
+
+const T3_SERVER_URI = "https://t3-backend.ngrok.io";
 
 @Injectable()
 export class T3TrustService {
- constructor() {}
+ constructor(
+ private verificationService: uPortVerificationService,
+ private http: HttpClient
+ ) {}
+
+ async vote(obj) {
+ const profile = await this.verificationService.profile$
+ .pipe(first())
+ .toPromise();
+ this.http
+ .post(T3_SERVER_URI + "/vote", {
+ profile,
+ to: obj.did.split(":")[2],
+ score: obj.score
+ })
+ .subscribe(data => {});
+ }
 
  getTrustTree(actorDid: string) {
  let penultimateTrustTree: Array<any> = [];
@@ -61,7 +84,7 @@ export class T3TrustService {
  // add all
  // go through each actor in network[] and get their network
 
- console.log('finalTrustTree');
+ console.log("finalTrustTree");
  console.log(finalTrustTree);
  return finalTrustTree;
  }
@@ -78,7 +101,7 @@ export class T3TrustService {
  newFakeResponse[0].blockchainResponse.DistrustedDids
  );
 
- console.log('allDids');
+ console.log("allDids");
  console.log(allDids);
 
  return newFakeResponse;
@@ -87,51 +110,51 @@ export class T3TrustService {
  getBlockchainResponse(actorDid: string) {
  const fakeDatabase = [
  {
- actorDid: '1',
+ actorDid: "1",
  blockchainResponse: {
- trustedDids: ['2'],
- neutralDids: ['3'],
- distrustedDids: ['4']
+ trustedDids: ["2"],
+ neutralDids: ["3"],
+ distrustedDids: ["4"]
  }
  },
  {
- actorDid: '2',
+ actorDid: "2",
  blockchainResponse: {
- trustedDids: ['1', '3', '5'],
- neutralDids: ['4'],
+ trustedDids: ["1", "3", "5"],
+ neutralDids: ["4"],
  distrustedDids: []
  }
  },
  {
- actorDid: '3',
+ actorDid: "3",
  blockchainResponse: {
- trustedDids: ['1'],
- neutralDids: ['4', '5'],
- distrustedDids: ['2']
+ trustedDids: ["1"],
+ neutralDids: ["4", "5"],
+ distrustedDids: ["2"]
  }
  },
  {
- actorDid: '4',
+ actorDid: "4",
  blockchainResponse: {
- trustedDids: ['3'],
- neutralDids: ['1'],
- distrustedDids: ['2', '5']
+ trustedDids: ["3"],
+ neutralDids: ["1"],
+ distrustedDids: ["2", "5"]
  }
  },
  {
- actorDid: '5',
+ actorDid: "5",
  blockchainResponse: {
- trustedDids: ['3', '6'],
- neutralDids: ['2'],
- distrustedDids: ['4']
+ trustedDids: ["3", "6"],
+ neutralDids: ["2"],
+ distrustedDids: ["4"]
  }
  },
  {
- actorDid: '6',
+ actorDid: "6",
  blockchainResponse: {
  trustedDids: [],
- neutralDids: ['3'],
- distrustedDids: ['7', '8']
+ neutralDids: ["3"],
+ distrustedDids: ["7", "8"]
  }
  }
  ];

app/src/app/modules/uport/uport.module.ts

-import { NgModule } from "@angular/core";
+import { NgModule, Inject } from "@angular/core";
 import { uPortVerificationService } from "./verification.service";
 import { Web3Module } from "../web3/web3.module";
+import { HttpClient, HttpClientModule } from "@angular/common/http";
+import { DomSanitizer } from "@angular/platform-browser";
+import { CommonModule } from "@angular/common";
 
 @NgModule({
- imports: [Web3Module],
- providers: [uPortVerificationService]
+ imports: [Web3Module, HttpClientModule, CommonModule],
+ providers: [
+ {
+ provide: uPortVerificationService,
+ useFactory: (http: HttpClient, domSanitizer: DomSanitizer) => {
+ return new uPortVerificationService(http, domSanitizer);
+ },
+ deps: [HttpClient, DomSanitizer]
+ }
+ ]
 })
 export class uPortModule {}

app/src/app/modules/uport/verification.service.ts

@@ -20,14 +20,11 @@ export class uPortVerificationService {
  uPortLink$: Subject<SafeUrl> = new Subject();
  data$: BehaviorSubject<any> = new BehaviorSubject(null);
  polling$: Observable<number> = interval(5000);
+ profile$: BehaviorSubject<string> = new BehaviorSubject(null);
  did$: BehaviorSubject<string> = new BehaviorSubject(null);
  addingDelegate$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
- constructor(
- private http: HttpClient,
- private sanitizer: DomSanitizer,
- @Inject(WEB3) private web3
- ) {
+ constructor(private http: HttpClient, private sanitizer: DomSanitizer) {
  this.start();
  }
 
@@ -78,9 +75,10 @@ export class uPortVerificationService {
  })
  .subscribe((data: any) => {
  if (data.status === "ok") {
+ this.profile$.next(data.profile);
  this.did$.next(data.profile.did);
  transport.ui.close(); // close modal
- this.addDelegate();
+ //this.addDelegate();
  s.unsubscribe();
  }
  });

app/src/styles.scss

 /* You can add global styles to this file, and also import other style files */
 #uport__modal-content img {
- max-width: 60vw;
+ max-width: 50vw;
 }