app/src/app/app.component.html

-<!--The content below is only a placeholder and can be replaced.-->
-<div>
- <h1>
- Welcome to T3
- </h1>
-</div>
-
+<t3-trust></t3-trust>
 <router-outlet></router-outlet>

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';
 
  constructor() {}
 }

app/src/app/app.module.ts

-import { BrowserModule } from "@angular/platform-browser";
-import { NgModule } from "@angular/core";
-import { HttpClientModule } from "@angular/common/http";
+import { BrowserModule } from '@angular/platform-browser';
+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 { 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';
 
 @NgModule({
  declarations: [AppComponent],
@@ -14,7 +15,8 @@ import { T3VerificationModule } from "./modules/verification/verification.module
  AppRoutingModule,
  HttpClientModule,
  uPortModule,
- T3VerificationModule
+ T3VerificationModule,
+ T3TrustModule
  ],
  providers: [],
  bootstrap: [AppComponent]

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>
+ <div *ngFor="let user of users" class="userWrapper">
+ <div class="userName">{{ user.name }}</div>
+ <div class="avatarPager">
+ <div class="avatar">
+ <img [src]="user.avatarUrl" />
+ </div>
+ </div>
+ <div class="actionBtns">
+ <div class="btn btn--distrust" (click)="submitVote(-1)">distrust</div>
+ <div class="btn btn--neutral" (click)="submitVote(0)">neutral</div>
+ <div class="btn btn--trust" (click)="submitVote(1)">trust</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- UNLOCK VIEW -->
+ <div *ngIf="view === 'unlock'" class="view--unlock">
+ <div>t3-verification component goes here</div>
+ <!-- <t3-verification></t3-verification> -->
+ </div>
+ <!-- TREE VIEW -->
+ <div *ngIf="view === 'tree'" class="view--tree">
+ <div>cytoscape tree view goes here</div>
+ </div>
+</div>

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

+$red: #e02020;
+$green: #44d7b6;
+
+t3-trust {
+ font-family: Arial, Helvetica, sans-serif;
+ 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;
+
+ &.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 {
+ h1 {
+ font-weight: 500;
+ font-size: 42px;
+ text-align: center;
+ color: #bbb;
+ }
+ .userWrapper {
+ text-align: center;
+ .userName {
+ font-size: 36px;
+ font-weight: 200;
+ }
+ .avatar {
+ padding: 16px;
+ img {
+ border-radius: 50%;
+ width: 300px;
+ height: 300px;
+ box-sizing: border-box;
+ text-align: center;
+ vertical-align: middle;
+ object-fit: cover;
+ }
+ }
+ }
+
+ .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;
+ border-radius: 6px;
+ transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+ &.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.7);
+ }
+ }
+ .btn--trust {
+ background-color: rgba($green, 0.6);
+ &:hover {
+ background-color: rgba($green, 0.8);
+ }
+ &.active {
+ background-color: rgba($green, 0.9);
+ }
+ }
+ }
+ }
+}

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

+import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
+import { T3TrustService } from './trust.service';
+
+@Component({
+ selector: 't3-trust',
+ templateUrl: './trust.component.html',
+ styleUrls: ['trust.component.scss']
+})
+export class T3TrustComponent implements OnInit {
+ // @Input() object: any;
+ // @Output("done") doneEmitter: EventEmitter<any> = new EventEmitter();
+
+ view: string = 'vote'; // ! TODO later: this should be 'unlock'
+ actorDid: string = '000';
+
+ users: Array<any> = [
+ {
+ actor_did: '000',
+ entity_did: '111',
+ entity_type: 'user',
+ vote: -1,
+ degree: 1,
+ score: 0.33,
+ name: 'Sideshow Bob',
+ avatarUrl: '/assets/brewski.jpg'
+ }
+ // ,
+ // {
+ // actor_did: 1,
+ // entity_did: '222',
+ // entity_type: 'user',
+ // vote: 0,
+ // degree: 1,
+ // score: 0.77,
+ // name: 'Good girl',
+ // avatarUrl: '/assets/avatar.png'
+ // }
+ ];
+ currentUser: number;
+
+ constructor(public trustService: T3TrustService) {}
+
+ ngOnInit() {
+ this.currentUser = this.users[0].id;
+ }
+ switchView(view) {
+ this.view = view;
+ // do something with router or url?
+ }
+ submitVote(vote) {
+ switch (vote) {
+ case -1:
+ console.log('ur fake news');
+ break;
+ case 0:
+ console.log('idk what to think');
+ break;
+ case 1:
+ console.log('ur legit news');
+ }
+
+ this.calculateScore();
+ }
+
+ calculateScore() {}
+}

app/src/app/modules/trust/trust.fake.ts

+const trustTree = [
+ {
+ actor_did: 1,
+ entity_did: 2,
+ entity_type: 'user',
+ trust: 1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 3,
+ entity_type: 'user',
+ trust: 1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 5,
+ entity_type: 'user',
+ trust: 1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 9,
+ entity_type: 'user',
+ trust: 1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 4,
+ entity_type: 'user',
+ trust: 0,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 7,
+ entity_type: 'user',
+ trust: 0,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 8,
+ entity_type: 'user',
+ trust: 0,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 50,
+ entity_type: 'user',
+ trust: 0,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 6,
+ entity_type: 'user',
+ trust: -1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 10,
+ entity_type: 'user',
+ trust: -1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 11,
+ entity_type: 'user',
+ trust: -1,
+ degree: 1
+ },
+ ///////////////////////////////////
+ // 2nd degree
+ {
+ actor_did: 2,
+ entity_did: 1,
+ entity_type: 'user',
+ trust: 1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 3,
+ entity_type: 'user',
+ trust: 1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 5,
+ entity_type: 'user',
+ trust: 1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 50,
+ entity_type: 'user',
+ trust: 1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 6,
+ entity_type: 'user',
+ trust: 0,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 8,
+ entity_type: 'user',
+ trust: 0,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 4,
+ entity_type: 'user',
+ trust: -1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 7,
+ entity_type: 'user',
+ trust: -1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 11,
+ entity_type: 'user',
+ trust: -1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 51,
+ entity_type: 'user',
+ trust: -1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 9,
+ entity_type: 'user',
+ trust: -1,
+ degree: 2
+ },
+ ///////////////////////////////////
+ // 3rd degree
+ {
+ actor_did: 50,
+ entity_did: 6,
+ entity_type: 'user',
+ trust: 1,
+ degree: 3
+ },
+ {
+ actor_did: 50,
+ entity_did: 3,
+ entity_type: 'user',
+ trust: 1,
+ degree: 3
+ },
+ {
+ actor_did: 50,
+ entity_did: 7,
+ entity_type: 'user',
+ trust: 0,
+ degree: 3
+ },
+ {
+ actor_did: 50,
+ entity_did: 11,
+ entity_type: 'user',
+ trust: -1,
+ degree: 3
+ },
+ ///////////////////////////////
+ // Artifacts
+ {
+ actor_did: 1,
+ entity_did: 200,
+ entity_type: 'artifact',
+ trust: 1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 300,
+ entity_type: 'artifact',
+ trust: 1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 500,
+ entity_type: 'artifact',
+ trust: 1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 900,
+ entity_type: 'artifact',
+ trust: 1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 400,
+ entity_type: 'artifact',
+ trust: 0,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 700,
+ entity_type: 'artifact',
+ trust: 0,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 800,
+ entity_type: 'artifact',
+ trust: 0,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 500,
+ entity_type: 'artifact',
+ trust: 0,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 600,
+ entity_type: 'artifact',
+ trust: -1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 1000,
+ entity_type: 'artifact',
+ trust: -1,
+ degree: 1
+ },
+ {
+ actor_did: 1,
+ entity_did: 1100,
+ entity_type: 'artifact',
+ trust: -1,
+ degree: 1
+ },
+ ///////////////////////////////////
+ // 2nd degree
+ {
+ actor_did: 2,
+ entity_did: 100,
+ entity_type: 'artifact',
+ trust: 1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 300,
+ entity_type: 'artifact',
+ trust: 1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 500,
+ entity_type: 'artifact',
+ trust: 1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 5000,
+ entity_type: 'artifact',
+ trust: 1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 600,
+ entity_type: 'artifact',
+ trust: 0,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 800,
+ entity_type: 'artifact',
+ trust: 0,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 400,
+ entity_type: 'artifact',
+ trust: -1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 700,
+ entity_type: 'artifact',
+ trust: -1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 1100,
+ entity_type: 'artifact',
+ trust: -1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 5100,
+ entity_type: 'artifact',
+ trust: -1,
+ degree: 2
+ },
+ {
+ actor_did: 2,
+ entity_did: 900,
+ entity_type: 'artifact',
+ trust: -1,
+ degree: 2
+ },
+ ///////////////////////////////////
+ // 3rd degree
+ {
+ actor_did: 50,
+ entity_did: 600,
+ entity_type: 'artifact',
+ trust: 1,
+ degree: 3
+ },
+ {
+ actor_did: 50,
+ entity_did: 300,
+ entity_type: 'artifact',
+ trust: 1,
+ degree: 3
+ },
+ {
+ actor_did: 50,
+ entity_did: 700,
+ entity_type: 'artifact',
+ trust: 0,
+ degree: 3
+ },
+ {
+ actor_did: 50,
+ entity_did: 1100,
+ entity_type: 'artifact',
+ trust: -1,
+ degree: 3
+ }
+];

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';
+
+@NgModule({
+ imports: [T3VerificationModule, CommonModule],
+ providers: [T3TrustService],
+ declarations: [T3TrustComponent],
+ entryComponents: [T3TrustComponent],
+ exports: [T3TrustComponent]
+})
+export class T3TrustModule {}

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

+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+
+@Injectable()
+export class T3TrustService {
+ constructor() {
+ this.getTrustTree();
+ }
+
+ getTrustTree() {}
+}

app/src/app/modules/verification/verification.component.ts

-import { Component } from "@angular/core";
-import { uPortVerificationService } from "../uport/verification.service";
+import { Component } from '@angular/core';
+import { uPortVerificationService } from '../uport/verification.service';
 
 @Component({
- selector: "t3-verification",
- templateUrl: "./verification.component.html"
+ selector: 't3-verification',
+ templateUrl: './verification.component.html'
 })
 export class T3VerificationComponent {
  constructor(public verificationService: uPortVerificationService) {}

app/src/app/modules/verification/verification.module.ts

-import { NgModule } from "@angular/core";
-import { T3VerificationComponent } from "./verification.component";
-import { uPortModule } from "../uport/uport.module";
-import { Router, RouterModule } from "@angular/router";
-import { CommonModule } from "@angular/common";
+import { NgModule } from '@angular/core';
+import { T3VerificationComponent } from './verification.component';
+import { uPortModule } from '../uport/uport.module';
+import { Router, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
  imports: [
@@ -11,12 +11,13 @@ import { CommonModule } from "@angular/common";
  RouterModule,
  RouterModule.forChild([
  {
- path: "verification",
+ path: 'verification',
  component: T3VerificationComponent
  }
  ])
  ],
  declarations: [T3VerificationComponent],
- entryComponents: [T3VerificationComponent]
+ entryComponents: [T3VerificationComponent],
+ exports: [T3VerificationComponent]
 })
 export class T3VerificationModule {}