(wip):

app/angular.json

@@ -32,7 +32,7 @@
  "src/styles.scss",
  "node_modules/material-design-icons/iconfont/material-icons.css"
  ],
- "scripts": []
+ "scripts": ["node_modules/cytoscape/dist/cytoscape.min.js"]
  },
  "configurations": {
  "production": {

app/package-lock.json

@@ -2703,6 +2703,15 @@
  "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
  "dev": true
  },
+ "cytoscape": {
+ "version": "3.10.0",
+ "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.10.0.tgz",
+ "integrity": "sha512-lWOnG4HJQD0cy+tCiBmbV/QRknInuZ8HvjcUifQZ7E4LWmKMvl6d5eP0LaaRLfBJAplXWcJfwc17ZJ/nwPeaYg==",
+ "requires": {
+ "heap": "^0.2.6",
+ "lodash.debounce": "^4.0.8"
+ }
+ },
  "d": {
  "version": "1.0.1",
  "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
@@ -5253,6 +5262,11 @@
  "minimalistic-assert": "^1.0.1"
  }
  },
+ "heap": {
+ "version": "0.2.6",
+ "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.6.tgz",
+ "integrity": "sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw="
+ },
  "hmac-drbg": {
  "version": "1.0.1",
  "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6645,6 +6659,11 @@
  "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
  "dev": true
  },
+ "lodash.debounce": {
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+ "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+ },
  "lodash.omit": {
  "version": "4.5.0",
  "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",

app/package.json

@@ -20,8 +20,9 @@
  "@angular/platform-browser-dynamic": "~8.0.0",
  "@angular/router": "~8.0.0",
  "crypto-browserify": "^3.12.0",
- "material-design-icons": "^3.0.1",
+ "cytoscape": "^3.10.0",
  "ethr-did": "^1.1.0",
+ "material-design-icons": "^3.0.1",
  "rxjs": "~6.4.0",
  "tslib": "^1.9.0",
  "uport-connect": "^1.1.11",

app/src/app/app.component.html

-<t3-trust></t3-trust>
+<div class="topbar">
+ <div class="icon">T3</div>
+ <div class="links">
+ <a
+ (click)="switchView('unlock')"
+ [class.viewLink--active]="view === 'unlock'"
+ >Unlock</a
+ >
+ <span class="spacer">|</span>
+ <a (click)="switchView('vote')" [class.viewLink--active]="view === 'vote'"
+ >Vote</a
+ >
+ <span class="spacer">|</span>
+ <a (click)="switchView('tree')" [class.viewLink--active]="view === 'tree'"
+ >My Trust Tree</a
+ >
+ </div>
+</div>
+
+<div class="viewWrapper">
+ <!-- UNLOCK VIEW -->
+ <div *ngIf="view === 'unlock'" class="view--unlock">
+ <t3-verification></t3-verification>
+ </div>
+ <!-- TREE VIEW -->
+ <div *ngIf="view === 'tree'" class="view--tree">
+ <t3-tree></t3-tree>
+ </div>
+ <div class="view--vote">
+ <!-- Trust component-->
+ <t3-trust></t3-trust>
+ </div>
+</div>
 <router-outlet></router-outlet>

app/src/app/app.component.scss

+.topbar {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ color: #444;
+ font-family: Arial, Helvetica, sans-serif;
+ background-color: #eee;
+ padding: 16px;
+ min-height: 50px;
+ min-width: 50px;
+ box-sizing: border-box;
+ border-bottom: 1px solid #dedede;
+
+ a {
+ text-decoration: none;
+ color: rgba(cadetblue, 0.7);
+ padding: 0px 8px;
+ cursor: pointer;
+
+ &.viewLink--active {
+ color: rgba(cadetblue, 1);
+ font-weight: bold;
+ }
+
+ &:last-of-type {
+ padding-right: 0px;
+ }
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+
+ > * {
+ padding: 8px;
+ }
+
+ .icon {
+ border-radius: 50%;
+ color: #444;
+ background-color: rgba(cadetblue, 0.4);
+ border: 1px solid #aaa;
+ font-size: 22px;
+ padding: 12px;
+ }
+
+ .links {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ font-size: 20px;
+
+ .spacer {
+ color: #ddd;
+ font-size: 24px;
+ }
+ }
+}
+.viewWrapper {
+ font-family: Arial, Helvetica, sans-serif;
+ color: #444;
+ padding: 32px;
+
+ .view--vote {
+ text-align: center;
+ }
+}

app/src/app/app.component.ts

-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
 
 declare const Connect: any;
 
 @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
+ selector: "app-root",
+ templateUrl: "./app.component.html",
+ styleUrls: ["./app.component.scss"]
 })
 export class AppComponent {
- title = 't3';
+ title = "t3";
+ view: string = "vote"; // ! TODO later: this should be 'unlock'
 
  constructor() {}
+
+ switchView(view) {
+ this.view = view;
+ // do something with router or url?
+ }
 }

app/src/app/app.module.ts

-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { NgModule } from "@angular/core";
+import { HttpClientModule } from "@angular/common/http";
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { uPortModule } from './modules/uport/uport.module';
-import { T3VerificationModule } from './modules/verification/verification.module';
-import { T3TrustModule } from './modules/trust/trust.module';
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+import { uPortModule } from "./modules/uport/uport.module";
+import { T3VerificationModule } from "./modules/verification/verification.module";
+import { T3TrustModule } from "./modules/trust/trust.module";
+import { T3TreeModule } from "./modules/tree/tree.module";
 
 @NgModule({
  declarations: [AppComponent],
@@ -18,7 +19,8 @@ import { T3TrustModule } from './modules/trust/trust.module';
  HttpClientModule,
  uPortModule,
  T3VerificationModule,
- T3TrustModule
+ T3TrustModule,
+ T3TreeModule
  ],
  providers: [],
  bootstrap: [AppComponent]

app/src/app/modules/tree/cy-style.json

+[
+ {
+ "selector": "core",
+ "style": {
+ "selection-box-color": "#AAD8FF",
+ "selection-box-border-color": "#8BB0D0",
+ "selection-box-opacity": "0.5"
+ }
+ },
+ {
+ "selector": "node",
+ "style": {
+ "width": "mapData(score, 0, 0.006769776522008331, 20, 60)",
+ "height": "mapData(score, 0, 0.006769776522008331, 20, 60)",
+ "content": "data(name)",
+ "font-size": "12px",
+ "text-valign": "center",
+ "text-halign": "center",
+ "background-color": "#555",
+ "text-outline-color": "#555",
+ "text-outline-width": "2px",
+ "color": "#fff",
+ "overlay-padding": "6px",
+ "z-index": "10"
+ }
+ },
+ {
+ "selector": "node[?attr]",
+ "style": {
+ "shape": "rectangle",
+ "background-color": "#aaa",
+ "text-outline-color": "#aaa",
+ "width": "16px",
+ "height": "16px",
+ "font-size": "6px",
+ "z-index": "1"
+ }
+ },
+ {
+ "selector": "node[?query]",
+ "style": {
+ "background-clip": "none",
+ "background-fit": "contain"
+ }
+ },
+ {
+ "selector": "node:selected",
+ "style": {
+ "border-width": "6px",
+ "border-color": "#AAD8FF",
+ "border-opacity": "0.5",
+ "background-color": "#77828C",
+ "text-outline-color": "#77828C"
+ }
+ },
+ {
+ "selector": "edge",
+ "style": {
+ "curve-style": "haystack",
+ "haystack-radius": "0.5",
+ "opacity": "0.4",
+ "line-color": "#bbb",
+ "width": "mapData(weight, 0, 1, 1, 8)",
+ "overlay-padding": "3px"
+ }
+ },
+ {
+ "selector": "node.unhighlighted",
+ "style": {
+ "opacity": "0.2"
+ }
+ },
+ {
+ "selector": "edge.unhighlighted",
+ "style": {
+ "opacity": "0.05"
+ }
+ },
+ {
+ "selector": ".highlighted",
+ "style": {
+ "z-index": "999999"
+ }
+ },
+ {
+ "selector": "node.highlighted",
+ "style": {
+ "border-width": "6px",
+ "border-color": "#AAD8FF",
+ "border-opacity": "0.5",
+ "background-color": "#394855",
+ "text-outline-color": "#394855"
+ }
+ },
+ {
+ "selector": "edge.filtered",
+ "style": {
+ "opacity": "0"
+ }
+ },
+ {
+ "selector": "edge[group=\"coexp\"]",
+ "style": {
+ "line-color": "#d0b7d5"
+ }
+ },
+ {
+ "selector": "edge[group=\"coloc\"]",
+ "style": {
+ "line-color": "#a0b3dc"
+ }
+ },
+ {
+ "selector": "edge[group=\"gi\"]",
+ "style": {
+ "line-color": "#90e190"
+ }
+ },
+ {
+ "selector": "edge[group=\"path\"]",
+ "style": {
+ "line-color": "#9bd8de"
+ }
+ },
+ {
+ "selector": "edge[group=\"pi\"]",
+ "style": {
+ "line-color": "#eaa2a2"
+ }
+ },
+ {
+ "selector": "edge[group=\"predict\"]",
+ "style": {
+ "line-color": "#f6c384"
+ }
+ },
+ {
+ "selector": "edge[group=\"spd\"]",
+ "style": {
+ "line-color": "#dad4a2"
+ }
+ },
+ {
+ "selector": "edge[group=\"spd_attr\"]",
+ "style": {
+ "line-color": "#D0D0D0"
+ }
+ },
+ {
+ "selector": "edge[group=\"reg\"]",
+ "style": {
+ "line-color": "#D0D0D0"
+ }
+ },
+ {
+ "selector": "edge[group=\"reg_attr\"]",
+ "style": {
+ "line-color": "#D0D0D0"
+ }
+ },
+ {
+ "selector": "edge[group=\"user\"]",
+ "style": {
+ "line-color": "#f0ec86"
+ }
+ }
+]

app/src/app/modules/tree/tree.component.html

+Cytoscape will go here
+
+<div #cytoscape></div>

app/src/app/modules/tree/tree.component.ts

+import { Component, ViewChild } from "@angular/core";
+
+declare const cytoscape: any;
+
+@Component({
+ selector: "t3-tree",
+ templateUrl: "./tree.component.html"
+})
+export class T3TreeComponent {
+ cy;
+
+ @ViewChild("cyptoscape", { static: false }) element;
+ ngOnInit() {}
+}

app/src/app/modules/tree/tree.module.ts

+import { NgModule } from "@angular/core";
+import { T3TreeComponent } from "./tree.component";
+
+@NgModule({
+ declarations: [T3TreeComponent],
+ exports: [T3TreeComponent]
+})
+export class T3TreeModule {}

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

+import { Injectable, Inject } from "@angular/core";
+import { WEB3 } from "../web3/web3.module";
+import * as TrustContract from "../web3/contracts/trust.contract";
+import { BehaviorSubject } from "rxjs";
+
+@Injectable()
+export class T3TrustTraversalService {
+ from: string;
+ trusts$: BehaviorSubject<any[]> = new BehaviorSubject([]);
+
+ constructor(@Inject(WEB3) private web3) {}
+
+ async fetchFromEthereum(from: string) {
+ const contract = new this.web3.eth.Contract(
+ TrustContract.ABI,
+ TrustContract.ADDRESS
+ );
+ const trusts = await contract.methods.getTrusts(from).call();
+ console.log("eth says", trusts);
+ }
+}

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

-<div class="topbar">
- <div class="icon">T3</div>
- <div class="links">
- <a
- (click)="switchView('unlock')"
- [class.viewLink--active]="view === 'unlock'"
- >Unlock</a
- >
- <span class="spacer">|</span>
- <a (click)="switchView('vote')" [class.viewLink--active]="view === 'vote'"
- >Vote</a
- >
- <span class="spacer">|</span>
- <a (click)="switchView('tree')" [class.viewLink--active]="view === 'tree'"
- >My Trust Tree</a
- >
- </div>
-</div>
-
-<div class="viewWrapper">
- <!-- VOTE VIEW -->
- <div *ngIf="view === 'vote'" class="view--vote">
- <h1>Do you trust this person?</h1>
- <ng-container *ngFor="let user of users; let i = index">
- <div *ngIf="i === currentIndex">
- <!-- [@slowFadeAnimation]="isPaging ? 'out' : 'in'" -->
- <div class="userName">{{ user.name }}</div>
- <!-- BUTTONS -->
- <div class="actionBtns">
- <div
- class="btn btn--distrust"
- (click)="submitVote(-1)"
- [class.active]="
- (hasVotedOnUser && user.vote === -1) ||
- (!hasVotedOnUserThisSession && user.vote === 0)
- "
- [class.inactive]="
- (hasVotedOnUser && user.vote !== -1) ||
- (hasVotedOnUserThisSession && user.vote === 0)
- "
- >
- Distrust
- </div>
- <div
- class="btn btn--neutral"
- (click)="submitVote(0)"
- [class.active]="hasVotedOnUserThisSession && user.vote === 0"
- [class.inactive]="hasVotedOnUser && user.vote !== 0"
- >
- Neutral
- </div>
- <div
- class="btn btn--trust"
- (click)="submitVote(1)"
- [class.active]="
- (hasVotedOnUser && user.vote === 1) ||
- (!hasVotedOnUserThisSession && user.vote === 0)
- "
- [class.inactive]="
- (hasVotedOnUser && user.vote !== 1) ||
- (hasVotedOnUserThisSession && user.vote === 0)
- "
- >
- Trust
- </div>
+<h1>Do you trust this person?</h1>
+<ng-container *ngFor="let user of users; let i = index">
+ <div *ngIf="i === currentIndex">
+ <!-- [@slowFadeAnimation]="isPaging ? 'out' : 'in'" -->
+ <div class="userName">{{ user.name }}</div>
+ <!-- BUTTONS -->
+ <div class="actionBtns">
+ <div
+ class="btn btn--distrust"
+ (click)="submitVote(-1)"
+ [class.active]="
+ (hasVotedOnUser && user.vote === -1) ||
+ (!hasVotedOnUserThisSession && user.vote === 0)
+ "
+ [class.inactive]="
+ (hasVotedOnUser && user.vote !== -1) ||
+ (hasVotedOnUserThisSession && user.vote === 0)
+ "
+ >
+ Distrust
+ </div>
+ <div
+ class="btn btn--neutral"
+ (click)="submitVote(0)"
+ [class.active]="hasVotedOnUserThisSession && user.vote === 0"
+ [class.inactive]="hasVotedOnUser && user.vote !== 0"
+ >
+ Neutral
+ </div>
+ <div
+ class="btn btn--trust"
+ (click)="submitVote(1)"
+ [class.active]="
+ (hasVotedOnUser && user.vote === 1) ||
+ (!hasVotedOnUserThisSession && user.vote === 0)
+ "
+ [class.inactive]="
+ (hasVotedOnUser && user.vote !== 1) ||
+ (hasVotedOnUserThisSession && user.vote === 0)
+ "
+ >
+ Trust
+ </div>
+ </div>
+ <!-- AVATAR PAGER -->
+ <div class="avatarPager">
+ <i class="chevron material-icons" (click)="page(-1)"
+ >keyboard_arrow_left</i
+ >
+ <div class="avatar" [@fadeAnimation]="isPaging ? 'out' : 'in'">
+ <img [src]="user.avatarUrl" />
+ </div>
+ <i class="chevron material-icons" (click)="page(1)"
+ >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>
- <!-- AVATAR PAGER -->
- <div class="avatarPager">
- <i class="chevron material-icons" (click)="page(-1)"
- >keyboard_arrow_left</i
- >
- <div class="avatar" [@fadeAnimation]="isPaging ? 'out' : 'in'">
- <img [src]="user.avatarUrl" />
- </div>
- <i class="chevron material-icons" (click)="page(1)"
- >keyboard_arrow_right</i
- >
+ </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>
- <!-- [@pointerSlideAnimation]="!hasRecalculated ? 'current' : 'new'" -->
- <i class="material-icons pointer">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>
+ <div class="scoreSubtitle">Trustworthy</div>
+ </div>
 
- <!-- DETAILS -->
- <div class="detailsWrapper">
- <div class="detailsHeader">
- <div
- class="detailsHeader__left"
- (click)="showDetails = !showDetails"
- >
- <i *ngIf="showDetails" class="material-icons"
- >keyboard_arrow_down</i
- >
- <i *ngIf="!showDetails" class="material-icons"
- >keyboard_arrow_right</i
- >
- <span>Details</span>
- </div>
- <div class="detailsHeader__right" (click)="switchView('tree')">
- See visualization
- </div>
- </div>
- <div class="detailsContent" *ngIf="showDetails">
- <div class="detailsTier">1st degree friends</div>
- <div class="detailsTier">2nd degree friends</div>
- <div class="detailsTier">3rd degree friends</div>
- </div>
+ <!-- DETAILS -->
+ <div class="detailsWrapper">
+ <div class="detailsHeader">
+ <div class="detailsHeader__left" (click)="showDetails = !showDetails">
+ <i *ngIf="showDetails" class="material-icons"
+ >keyboard_arrow_down</i
+ >
+ <i *ngIf="!showDetails" class="material-icons"
+ >keyboard_arrow_right</i
+ >
+ <span>Details</span>
+ </div>
+ <div class="detailsHeader__right" (click)="switchView('tree')">
+ See visualization
  </div>
  </div>
+ <div class="detailsContent" *ngIf="showDetails">
+ <div class="detailsTier">1st degree friends</div>
+ <div class="detailsTier">2nd degree friends</div>
+ <div class="detailsTier">3rd degree friends</div>
+ </div>
  </div>
- </ng-container>
- </div>
-
- <!-- UNLOCK VIEW -->
- <div *ngIf="view === 'unlock'" class="view--unlock">
- <t3-verification></t3-verification>
- </div>
- <!-- TREE VIEW -->
- <div *ngIf="view === 'tree'" class="view--tree">
- <div>cytoscape tree view goes here</div>
+ </div>
  </div>
-</div>
+</ng-container>

app/src/app/modules/trust/trust.component.scss

@@ -3,239 +3,176 @@ $green: #44d7b6;
 $coolGrey: #6b717c;
 $bezier: cubic-bezier(0.23, 1, 0.32, 1);
 
-t3-trust {
+:root {
  font-family: Arial, Helvetica, sans-serif;
  color: $coolGrey;
+ text-align: center;
  // color: #444;
 }
-.topbar {
- width: 100%;
- display: flex;
- justify-content: space-between;
- color: #444;
- font-family: Arial, Helvetica, sans-serif;
- background-color: #eee;
- padding: 16px;
- min-height: 50px;
- min-width: 50px;
- box-sizing: border-box;
- border-bottom: 1px solid #dedede;
 
- a {
- text-decoration: none;
- color: rgba(cadetblue, 0.7);
- padding: 0px 8px;
- cursor: pointer;
+h1 {
+ font-weight: 500;
+ font-size: 42px;
+ text-align: center;
+ color: rgba($coolGrey, 0.3);
+}
 
- &.viewLink--active {
- color: rgba(cadetblue, 1);
- font-weight: bold;
- }
+.userName {
+ font-size: 36px;
+ font-weight: 200;
+ color: $coolGrey;
+}
+
+.actionBtns {
+ display: flex;
+ justify-content: space-around;
+ margin: 16px 0;
 
- &:last-of-type {
- padding-right: 0px;
+ .btn {
+ color: white;
+ font-size: 22px;
+ cursor: pointer;
+ background-color: #ddd;
+ width: 100%;
+ margin: 4px;
+ padding: 16px;
+ border-radius: 6px;
+ transition: background-color 0.5s $bezier;
+ &.inactive {
+ background-color: rgba(#000, 0.2);
  }
  }
- a:hover {
- text-decoration: underline;
+ .btn--distrust {
+ background-color: rgba($red, 0.5);
+ &:hover {
+ background-color: rgba($red, 0.7);
+ }
+ &.active {
+ background-color: rgba($red, 0.8);
+ }
  }
-
- > * {
- padding: 8px;
+ .btn--neutral {
+ background-color: rgba(#000, 0.35);
+ &:hover {
+ background-color: rgba(#000, 0.55);
+ }
+ &.active {
+ background-color: rgba(#000, 0.6);
+ }
  }
-
- .icon {
- border-radius: 50%;
- color: #444;
- background-color: rgba(cadetblue, 0.4);
- border: 1px solid #aaa;
- font-size: 22px;
- padding: 12px;
+ .btn--trust {
+  background-color: rgba($green, 0.6);
+ &:hover {
+  background-color: rgba($green, 0.8);
+ }
+ &.active {
+  background-color: rgba($green, 0.95);
+ }
  }
+}
 
- .links {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- font-size: 20px;
+.avatarPager {
+ display: flex;
+ justify-content: center;
+ align-items: center;
 
- .spacer {
- color: #ddd;
- font-size: 24px;
+ .chevron {
+ cursor: pointer;
+ font-size: 80px;
+ color: #ccc;
+ transition: transform 0.5s $bezier;
+ transition: color 0.5s $bezier;
+ &:hover {
+ transform: scale(1.2, 1.2);
+ color: #999;
  }
  }
-}
-.viewWrapper {
- font-family: Arial, Helvetica, sans-serif;
- color: #444;
- padding: 32px;
-
- .view--vote {
- h1 {
- font-weight: 500;
- font-size: 42px;
+ .avatar {
+ padding: 16px;
+ img {
+ border-radius: 50%;
+ width: 300px;
+ height: 300px;
+ box-sizing: border-box;
  text-align: center;
- color: rgba($coolGrey, 0.3);
+ vertical-align: middle;
+ object-fit: cover;
+ margin: auto;
  }
- text-align: center;
- .userName {
- font-size: 36px;
- font-weight: 200;
- color: $coolGrey;
- }
-
- .actionBtns {
- display: flex;
- justify-content: space-around;
- margin: 16px 0;
-
- .btn {
- color: white;
- font-size: 22px;
- cursor: pointer;
- background-color: #ddd;
- width: 100%;
- margin: 4px;
- padding: 16px;
+ }
+}
+.metricsWrapper {
+ .thermometerContainer {
+ padding-top: 16px;
+
+ .thermometerWrapper {
+ position: relative;
+ width: 80%;
+ margin: auto;
+ .thermometer {
  border-radius: 6px;
- transition: background-color 0.5s $bezier;
- &.inactive {
- background-color: rgba(#000, 0.2);
- }
- }
- .btn--distrust {
- background-color: rgba($red, 0.5);
- &:hover {
- background-color: rgba($red, 0.7);
- }
- &.active {
- background-color: rgba($red, 0.8);
- }
- }
- .btn--neutral {
- background-color: rgba(#000, 0.35);
- &:hover {
- background-color: rgba(#000, 0.55);
- }
- &.active {
- background-color: rgba(#000, 0.6);
- }
+ height: 8px;
+ width: 100%;
+ background: linear-gradient(
+ to right,
+ rgba($red, 0.6) 0%,
+ rgba(#000, 0.2) 50%,
+ rgba($green, 0.6) 80%
+ );
  }
- .btn--trust {
- background-color: rgba($green, 0.6);
- &:hover {
- background-color: rgba($green, 0.8);
- }
- &.active {
- background-color: rgba($green, 0.95);
- }
+ .pointer {
+ font-size: 70px;
+ position: absolute;
+ left: 33%;
+ top: -18px;
+ color: #555;
  }
  }
-
- .avatarPager {
+ }
+ .scoreWrapper {
+ margin-top: 32px;
+ .score {
+ color: $coolGrey;
+ font-size: 70px;
+ }
+ .scoreSubtitle {
+ color: rgba($coolGrey, 0.8);
+ font-size: 30px;
+ }
+ }
+ .detailsWrapper {
+ width: 80%;
+ margin: auto;
+
+ margin-bottom: 24px;
+ .detailsHeader {
+ border-bottom: 1px solid rgba($coolGrey, 0.5);
+ padding: 24px 16px 8px 16px;
  display: flex;
- justify-content: center;
+ justify-content: space-between;
  align-items: center;
-
- .chevron {
- cursor: pointer;
- font-size: 80px;
- color: #ccc;
- transition: transform 0.5s $bezier;
- transition: color 0.5s $bezier;
+ transition: color 0.4s $bezier;
+ > * {
  &:hover {
- transform: scale(1.2, 1.2);
- color: #999;
- }
- }
- .avatar {
- padding: 16px;
- img {
- border-radius: 50%;
- width: 300px;
- height: 300px;
- box-sizing: border-box;
- text-align: center;
- vertical-align: middle;
- object-fit: cover;
- margin: auto;
- }
- }
- }
- .metricsWrapper {
- .thermometerContainer {
- padding-top: 16px;
-
- .thermometerWrapper {
- position: relative;
- width: 80%;
- margin: auto;
- .thermometer {
- border-radius: 6px;
- height: 8px;
- width: 100%;
- background: linear-gradient(to right, rgba($red, 0.6) 0%, rgba(#000, 0.2) 50%, rgba($green, 0.6) 80%);
- }
- .pointer {
- font-size: 70px;
- position: absolute;
- left: 33%;
- top: -18px;
- color: #555;
- }
+ cursor: pointer;
+ color: rgba($coolGrey, 0.7);
  }
  }
- .scoreWrapper {
- margin-top: 32px;
- .score {
- color: $coolGrey;
- font-size: 70px;
- }
- .scoreSubtitle {
- color: rgba($coolGrey, 0.8);
- font-size: 30px;
- }
+ .detailsHeader__left {
+ display: flex;
+ align-items: center;
  }
- .detailsWrapper {
- width: 80%;
- margin: auto;
-
- margin-bottom: 24px;
- .detailsHeader {
- border-bottom: 1px solid rgba($coolGrey, 0.5);
- padding: 24px 16px 8px 16px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- transition: color 0.4s $bezier;
- > * {
- &:hover {
- cursor: pointer;
- color: rgba($coolGrey, 0.7);
- }
- }
- .detailsHeader__left {
- display: flex;
- align-items: center;
- }
- .detailsHeader__right {
- color: rgba($coolGrey, 0.7);
- text-decoration: underline;
- // &:hover {
- // text-decoration: underline;
- // }
- }
- }
- .detailsContent {
- padding: 16px;
- text-align: left;
- }
+ .detailsHeader__right {
+ color: rgba($coolGrey, 0.7);
+ text-decoration: underline;
+ // &:hover {
+ // text-decoration: underline;
+ // }
  }
  }
+ .detailsContent {
+ padding: 16px;
+ text-align: left;
+ }
  }
-
- // .view--verify {
- // }
- // .view--tree {
- // }
 }

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

@@ -5,36 +5,37 @@ import {
  Output,
  OnInit,
  OnDestroy
-} from '@angular/core';
+} from "@angular/core";
 import {
  trigger,
  state,
  style,
  animate,
  transition
-} from '@angular/animations';
-import { T3TrustService } from './trust.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")])
  ])
  // trigger('pointerSlideAnimation', [
  // state(
@@ -57,8 +58,7 @@ export class T3TrustComponent implements OnInit, OnDestroy {
  // @Input() object: any;
  // @Output("done") doneEmitter: EventEmitter<any> = new EventEmitter();
 
- view: string = 'vote'; // ! TODO later: this should be 'unlock'
- actorDid: string = '000';
+ actorDid: string = "000";
  showDetails: boolean = true; // ! default to false?
  user: any = null;
  hasVotedOnUser: boolean = false;
@@ -97,52 +97,58 @@ 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: 1.0,
- name: 'Astronaut Lily',
- avatarUrl: '/assets/moonlily.jpg'
+ name: "Astronaut Lily",
+ avatarUrl: "/assets/moonlily.jpg"
  }
  ];
 
  usersNew: Array<any> = []; //!!
 
- constructor(public trustService: T3TrustService) {}
+ constructor(
+ public trustService: T3TrustService,
+ private traversalService: T3TrustTraversalService
+ ) {}
 
  ngOnInit() {
- this.finalTrustTree = this.trustService.getTrustTree('1');
+ this.traversalService.fetchFromEthereum(
+ "0x3e010d48eeE73c9f545591C52E3bD23a7340A91F"
+ );
+ this.finalTrustTree = this.trustService.getTrustTree("1");
  console.log(this.finalTrustTree);
 
  this.joinArrays(); // ! TODO : switch trustTreeRaw for finalTrustTree
@@ -170,20 +176,16 @@ export class T3TrustComponent implements OnInit, OnDestroy {
  console.log(this.users);
  }
 
- switchView(view) {
- this.view = view;
- // do something with router or url?
- }
  submitVote(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.module.ts

-import { NgModule } from '@angular/core';
-import { T3TrustService } from './trust.service';
-import { T3TrustComponent } from './trust.component';
-import { T3VerificationModule } from '../verification/verification.module';
-import { CommonModule } from '@angular/common';
+import { NgModule } from "@angular/core";
+import { T3TrustService } from "./trust.service";
+import { T3TrustComponent } from "./trust.component";
+import { T3VerificationModule } from "../verification/verification.module";
+import { CommonModule } from "@angular/common";
+import { T3TrustTraversalService } from "./traversal.service";
 
 @NgModule({
  imports: [T3VerificationModule, CommonModule],
- providers: [T3TrustService],
+ providers: [T3TrustService, T3TrustTraversalService],
  declarations: [T3TrustComponent],
  entryComponents: [T3TrustComponent],
  exports: [T3TrustComponent]

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

-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
 
 @Injectable()
 export class T3TrustService {
@@ -81,51 +81,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"]
  }
  }
  ];
@@ -135,7 +135,7 @@ export class T3TrustService {
  return item.actorDid === actorDid;
  });
 
- console.log('raw Result');
+ console.log("raw Result");
  console.log(result);
  return result;
  }

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

@@ -108,7 +108,7 @@ export class uPortVerificationService {
  86400 * 365 // 1 year
  )
  .encodeABI();
- console.log(await uport.requestPersonalSign(tx1, null, { from: address }));
+ console.log(await uport.requestPersonalSign(tx1));
  // // contract.methods.issueTrustViaDelegate(address, address, 1);
  // // console.log(tx1);
  // const signed = await web3.eth.sendTransaction(