completed dashboard and exit page.

README.md

@@ -1,27 +1,68 @@
-# InstaDashboard
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.2.
+# **InstaDApp-Dashboard**
 
-## Development server
+> ### This codebase explains how to interact with InstaDApp Smart Contracts.
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
-## Code scaffolding
+This codebase was created to demonstrate InstaDApp-Dashboard built with Angular that interacts with InstaDApp [Smart Contracts]([https://github.com/InstaDApp/contract-v2](https://github.com/InstaDApp/contract-v2))
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
-## Build
+# Getting started
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Make sure you have the [Angular CLI](https://github.com/angular/angular-cli#installation) installed globally. We use [Yarn](https://yarnpkg.com) to manage the dependencies, so we strongly recommend you to use it. you can install it from [Here](https://yarnpkg.com/en/docs/install), then run `yarn install` to resolve all dependencies (might take a minute).
 
-## Running unit tests
+### Clone the repo
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```shell
+git clone https://github.com/InstaDApp/InstaDApp-Dashboard
+cd InstaDApp-Dashboard
+```
 
-## Running end-to-end tests
+### Install npm packages
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Install the `npm` packages described in the `package.json` and verify that it works:
 
-## Further help
+```shell
+npm install
+```
+### For dev server
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+```shell
+ng serve --proxy-config ./proxy.config.json
+```
+After running `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+### Building the project
+```shell
+ng build
+```
+
+After running `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. These files are available in `gh-pages` branch. Use these files to run this application on your local system without any extra dependencies.
+
+
+### Deploying into GitHub
+
+Install `angular-cli-ghpages` and follow the steps in documentation of this repo.
+
+[You can install and read steps from here]( [https://github.com/angular-schule/angular-cli-ghpages](https://github.com/angular-schule/angular-cli-ghpages))
+
+## Functionality overview
+
+
+**General functionality:**
+
+- Interact with InstaDApp Smart Contract of MakerDao and Compound Finance.
+- Exit from InstaDApp Ecosystem
+
+**The general page breakdown looks like this:**
+
+- Dashboard page (URL: #/dashboard )
+    - Supply, Borrow, Withdraw, Payback features of Compound Finance.
+    - Open / Close MakerDao CDP and use basic features of MakerDao
+-  Exit page (URL: #/exit )
+    -  Withdraw funds from InstaDapp account
+    -  Move your CDP to your wallet account
+
+<br />
+
+[![Brought to you by InstaDApp](https://instadapp.io/newsletter/img/logotext.png)](https://instadapp.io)

angular.json

@@ -52,7 +52,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "3mb",
                   "maximumError": "5mb"
                 }
               ]
@@ -67,6 +67,7 @@
           "configurations": {
             "production": {
               "browserTarget": "Insta-Dashboard:build:production"
+
             }
           }
         },
@@ -121,4 +122,4 @@
       }
     }},
   "defaultProject": "Insta-Dashboard"
-}
+}

package.json

@@ -11,16 +11,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.1.2",
+    "@angular/animations": "^8.1.2",
+    "@angular/cdk": "^8.1.1",
     "@angular/common": "~8.1.2",
     "@angular/compiler": "~8.1.2",
     "@angular/core": "~8.1.2",
     "@angular/forms": "~8.1.2",
+    "@angular/material": "^8.1.1",
     "@angular/platform-browser": "~8.1.2",
     "@angular/platform-browser-dynamic": "~8.1.2",
     "@angular/router": "~8.1.2",
+    "@makerdao/dai": "^0.17.1",
+    "@ng-bootstrap/ng-bootstrap": "^5.1.0",
+    "buffer": "^5.4.0",
+    "core-js": "^2.5.7",
+    "ethereumjs-tx": "^2.1.0",
+    "ethers": "^4.0.20",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",
+    "web3": "1.0.0-beta.55",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
@@ -28,9 +37,10 @@
     "@angular/cli": "~8.1.2",
     "@angular/compiler-cli": "~8.1.2",
     "@angular/language-service": "~8.1.2",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "angular-cli-ghpages": "^0.5.3",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
@@ -42,6 +52,8 @@
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",
-    "typescript": "~3.4.3"
+    "typescript": "~3.4.3",
+    "webpack": "^4.26.1",
+    "webpack-dev-server": "^3.1.10"
   }
 }

proxy.config.json

@@ -0,0 +1,23 @@
+{
+    "/compoundAPI/*": {
+        "target": "https://api.instadapp.io",
+        "secure": false,
+        "logLevel": "debug",
+        "changeOrigin": true,
+        "pathRewrite": {"^/compoundAPI" : ""}
+    },
+    "/instadappAPI/*": {
+        "target": "https://instadapp.io",
+        "secure": false,
+        "logLevel": "debug",
+        "changeOrigin": true,
+        "pathRewrite": {"^/instadappAPI" : ""}
+    },
+    "/mkr/*": {
+        "target": "https://mkr.tools/api/v1",
+        "secure": false,
+        "logLevel": "debug",
+        "changeOrigin": true,
+        "pathRewrite": {"^/mkr" : ""}
+    }
+}

src/app/app-routing.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-
-const routes: Routes = [];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

src/app/app.component.html

@@ -1,21 +1,3 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+
 
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -1,16 +1,96 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+
+
+import { RouterModule } from '@angular/router';
+import { AppRoutingModule } from './app.routing';
 
-import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+import {UtilModule} from './util/util.module';
+
+import { ProtcolsComponent } from './layout/protcols/protcols.component';
+import { DashboardComponent } from './layout/dashboard/dashboard.component';
+import { TXDialog } from './layout/dashboard/dashboard.component';
+
+import { ConnectbtnComponent } from './components/connectbtn/connectbtn.component';
+import { ConnectDialog } from './components/connectbtn/connectbtn.component';
+
+import { CompoundComponent } from './compound/compound.component';
+import { SupplyDialog } from './compound/compound.component';
+import { WithdrawDialog } from './compound/compound.component';
+import { BorrowDialog } from './compound/compound.component';
+import { PayBackDialog } from './compound/compound.component';
+
+import { MakerDaoComponent } from './maker-dao/maker-dao.component';
+import { DepositDialog } from './maker-dao/maker-dao.component';
+import { DaiGenerateDialog } from './maker-dao/maker-dao.component';
+import { EthWithdrawDialog } from './maker-dao/maker-dao.component';
+import { DaiPaybackDialog } from './maker-dao/maker-dao.component';
+import { MakerAlertDialog } from './maker-dao/maker-dao.component';
+
+import { ExitComponent } from './exit/exit.component';
+
+import { FooterComponent } from './components/footer/footer.component';
+import { SidebarComponent } from './components/sidebar/sidebar.component';
+
+
+import {MaterialModule} from './material/material.module';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+
+
+
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    DashboardComponent,
+    CompoundComponent,
+    SidebarComponent,
+    ConnectbtnComponent,
+    MakerDaoComponent,
+    SupplyDialog,
+    WithdrawDialog,
+    BorrowDialog,
+    PayBackDialog,
+    DepositDialog,
+    DaiGenerateDialog,
+    EthWithdrawDialog,
+    DaiPaybackDialog,
+    MakerAlertDialog,
+    TXDialog,
+    ConnectDialog,
+    FooterComponent,
+    ExitComponent,
+    ProtcolsComponent
   ],
   imports: [
+    BrowserAnimationsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    HttpClientModule,
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    UtilModule,
+    RouterModule,
+    AppRoutingModule,
+    NgbModule,
+    MaterialModule
+  ],
+  entryComponents: [
+    SupplyDialog,
+    WithdrawDialog,
+    BorrowDialog,
+    PayBackDialog,
+    DepositDialog,
+    DaiGenerateDialog,
+    EthWithdrawDialog,
+    DaiPaybackDialog,
+    MakerAlertDialog,
+    TXDialog,
+    ConnectDialog
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/app.routing.ts

@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule, } from '@angular/common';
+import { BrowserModule  } from '@angular/platform-browser';
+import { Routes, RouterModule } from '@angular/router';
+
+import { DashboardComponent } from './layout/dashboard/dashboard.component';
+
+
+import { ExitComponent } from './exit/exit.component'
+
+import { ProtcolsComponent } from './layout/protcols/protcols.component'
+
+
+
+
+const routes: Routes =[
+  {
+    path: '',
+    redirectTo: 'dashboard',
+    pathMatch: 'full',
+  },
+  {
+    path: '',
+    component: DashboardComponent,
+    children: [
+    { path: 'dashboard',      component: ProtcolsComponent },
+    {
+      path: 'exit',
+      component: ExitComponent
+    }
+    ]
+  },
+
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    BrowserModule,
+    RouterModule.forRoot(routes)
+  ],
+  exports: [
+    RouterModule
+  ],
+})
+export class AppRoutingModule { }

src/app/components/connectbtn/connectDialogBox.html

@@ -0,0 +1,10 @@
+<h2 class="text-center" mat-dialog-title>{{data.title}}</h2>
+<hr>
+<div mat-dialog-content>
+  <div class="text-center">
+    <h5 class="text-{{data.msgColor}}">{{data.msg}}</h5>
+    <a href="https://instadapp.io" *ngIf="data.link">InstaDApp</a>
+    <!-- <a (click)="connectMetamask()" class="btn btn-primary text-white tokenCardBtn mr-2">Close CDP</a> -->
+
+  </div>
+</div>

src/app/components/connectbtn/connectbtn.component.html

@@ -0,0 +1 @@
+<button type="button" (click)="btnConnect()" class="btn {{btnStatus}}">{{btntext}}</button>

src/app/components/connectbtn/connectbtn.component.spec.ts

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

src/app/components/connectbtn/connectbtn.component.ts

@@ -0,0 +1,87 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { Web3Service } from '../../util/web3.service';
+import { Subscription } from 'rxjs';
+
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-connectbtn',
+  templateUrl: './connectbtn.component.html',
+  styleUrls: ['./connectbtn.component.sass']
+})
+export class ConnectbtnComponent implements OnInit {
+  public btnStatus = "btn-primary"
+  public btntext = "Connect"
+  contractAddress: String[]
+  walletAddress: String
+  constructor(public dialog: MatDialog, public web3: Web3Service) {
+    this.walletAddress = this.web3.accounts
+    web3.accountsObservable.subscribe(value => {
+      this.dialog.closeAll()
+      web3.connectToWallet(value[0]).then(address => {
+        this.contractAddress = address
+        console.log(this.contractAddress)
+        this.connect(this.contractAddress)
+      });
+    });
+  }
+  ngOnInit() {
+    this.web3.bootstrapWeb3()
+  }
+
+  btnConnect() {
+    // console.log(this.walletAddress , this.contractAddress)
+    if (this.walletAddress || this.contractAddress) {
+      this.connect(this.contractAddress)
+    } else {
+      let data = {
+        title: "No Ethereum Address Detected!",
+        msg: "You need to login or allow access to your current ethereum address in your web3 ethereum client like Metamask (& reload)."
+      }
+      this.btnStatus = "btn-warning"
+      this.btntext = "Connect"
+      this.openAlert(data)
+    }
+  }
+
+  connect(address) {
+    let account = address
+    if (address == "0x0000000000000000000000000000000000000000") {
+      this.btnStatus = "btn-danger"
+      this.btntext = "Connect"
+      let data = {
+        title: "InstaDApp Account is not created yet!",
+        msg: "Visit Main Portal for Creating New Acount.",
+        link: "Go To"
+      }
+      this.openAlert(data)
+    } else {
+      this.btnStatus = "btn-success"
+      this.btntext = "Connected"
+    }
+  }
+
+  openAlert(data) {
+    const dialogRef = this.dialog.open(ConnectDialog, {
+      width: '400px',
+      data: data
+    }, );
+  }
+
+}
+
+//alert Modal
+@Component({
+  selector: 'connect-dialog',
+  templateUrl: 'connectDialogBox.html',
+})
+export class ConnectDialog {
+  constructor(
+    public dialogRef: MatDialogRef<ConnectDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any, public web3: Web3Service) {
+    // console.log(this.data);
+  }
+
+
+
+}

src/app/components/footer/footer.component.html

@@ -0,0 +1,28 @@
+<!-- Footer -->
+<footer class="page-footer font-small bg-light  pt-4">
+
+  <!-- Footer Elements -->
+  <div class="container">
+
+
+    <ul class="list-unstyled list-inline text-center py-2">
+      <li class="list-inline-item">
+        <h5 class="mb-1">Alternate Dashboard to InstaDApp Contract</h5>
+      </li>
+      <li class="list-inline-item">
+        <a href="https://github.com/thrilok209/InstaDApp-Dashboard" target="_blank" class="btn btn-outline-white btn-rounded"><i class="fab fa-github"></i></a>
+      </li>
+    </ul>
+
+
+  </div>
+  <!-- Footer Elements -->
+
+  <!-- Copyright -->
+  <div class="footer-copyright text-center py-3">© 2019 Copyright:
+    <a href="https://instadapp.io" class="text-muted">InstaDApp.io</a>
+  </div>
+  <!-- Copyright -->
+
+</footer>
+<!-- Footer -->

src/app/components/footer/footer.component.sass

@@ -0,0 +1,5 @@
+.fa-github
+  transform: scale(2)
+
+.footer-copyright
+  // background-color: #BBC3CA

src/app/components/footer/footer.component.spec.ts

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

src/app/components/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.sass']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/sidebar/sidebar.component.html

@@ -0,0 +1,28 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <a class="navbar-brand" href="#">
+      <img src="assets/img/instadapp/logoTextBeta.png" width="250" height="250" class="img-thumbnail border-0" alt="">
+      </a>
+      <hr>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col">
+      <a class="navbar-brand" href="compound">
+        <img src="assets/img/logos/compound.png" width="30" height="30" class="d-inline-block align-top" alt="">
+        Compound
+      </a>
+
+    </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <a class="navbar-brand" href="maker">
+          <img src="assets/img/logos/maker.png" width="30" height="30" class="d-inline-block align-top" alt="">
+          Debt Position
+        </a>
+
+      </div>
+    </div>
+</div>

src/app/components/sidebar/sidebar.component.scss

@@ -0,0 +1,19 @@
+.container {
+  margin-top: 1em;
+}
+
+.title {
+  color: #11253F;
+  margin-top: 1em;
+  text-align: center;
+}
+
+.logo {
+  width: 2px;
+  height: 2px;
+}
+
+a {
+  color: grey;
+  font-size: 1em;
+}

src/app/components/sidebar/sidebar.component.spec.ts

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

src/app/components/sidebar/sidebar.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/compound/borrowDialogBox.html

@@ -0,0 +1,23 @@
+<h1 mat-dialog-title>Borrow {{data.name}}</h1>
+
+<div mat-dialog-content>
+  <mat-form-field class="w-100">
+    <mat-label>MAX POWER TO BORROW</mat-label>
+    <input matInput [ngModel]="data.maxBorrowValue | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100">
+    <mat-label>BORROW APR %</mat-label>
+    <input matInput [ngModel]="data.borrowRate | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100" appearance="legacy" floatLabel="never">
+    <input matInput [(ngModel)]="value" (ngModelChange)="calculate($event)" placeholder="{{data.name}} TO BORROW">
+  </mat-form-field>
+  <mat-form-field class="w-100">
+    <mat-label>BORROW VALUE $</mat-label>
+    <input matInput class="text-muted" [ngModel]="data.borrowValue  | number:'1.0-5'" readonly>
+  </mat-form-field>
+  <button  [mat-dialog-close]="data" class="btn btn-primary text-white w-100" [disabled]="btnStatus">Borrow</button>
+  <div class="alert alert-danger bg-danger text-white mt-4" role="alert" *ngIf="status">
+  <h6>{{status}}</h6>
+  </div>
+</div>

src/app/compound/compound.component.html

@@ -0,0 +1,166 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <div class="card">
+        <div class="card-header text-center">
+          <h3 class="title"><b>
+            Compound Finance
+            </b>
+          </h3>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+  <div class="row text-center">
+      <div class="col-md-4 col-sm-12">
+        <div class="card">
+          <h5 class="card-header text-uppercase bg-transparent text-muted"><b>Lend</b></h5>
+          <div class="card-body">
+            <h6 class="card-title assetValue"><b>${{(lendBal) | number:'1.0-2'}}</b></h6>
+          </div>
+        </div>
+      </div>
+
+    <div class="col-md-4 col-sm-12">
+      <div class="card">
+        <h5 class="card-header text-uppercase bg-transparent text-muted"><b>Borrow</b></h5>
+        <div class="card-body">
+          <h6 class="card-title assetValue"><b>${{(borrowBal) | number:'1.0-2'}}</b></h6>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-4 col-sm-12">
+      <div class="card">
+        <h5 class="card-header text-uppercase bg-transparent text-muted"><b>Borrowing Power</b></h5>
+        <div class="card-body">
+          <h6 class="card-title assetValue"><b>${{(borrowingPowerBal) | number:'1.0-2'}}</b></h6>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+
+  <div class="row">
+    <div class="col">
+
+  <!-- Tokens table -->
+
+    <div class="card">
+      <!-- <h3 class="card-header bg-transparent text-black-50">Tokens </h3> -->
+
+      <div class="card-body tokenTable">
+        <div class="panel-body">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th class="align-middle text-center" scope="col"></th>
+                <th class="align-middle text-center" scope="col">Value</th>
+                <th class="align-middle text-center" *ngIf="tableStatus" scope="col">Amount</th>
+                <th class="align-middle text-center" scope="col">Supply (APR)</th>
+                <th class="align-middle text-center" scope="col">Borrow (APR)</th>
+                <th class="align-middle text-center" *ngIf="tableStatus" scope="col"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="tableCol" *ngFor = "let token of tokensList">
+                <td class="align-middle text-center">
+                  <img src="assets/img/icons/tokens/{{token.url}}.svg" width="50" height="50" class="avatar-img rounded-circle tokenImg" alt="...">
+                </td>
+                <td class="align-middle text-center">
+                  <h4 class="tokenValue">${{ token.balValue || 0 | number:'1.0-2'}}</h4>
+                  <!-- <br><h6 class="supTokenName text-uppercase">{{token.name}}</h6> -->
+                </td>
+                <td class="align-middle text-center" *ngIf="token.type"><span class="mb-1 badge badge-pill tokenBalAmount badge-{{token.type}}">{{token.bal | number:'1.0-3'}}</span></td>
+                <td class="align-middle text-center"  ><h4 class="tokenSupply">{{ (token.supplyRate || 0) | number:'1.0-3'}}%</h4></td>
+                <td class="align-middle text-center"><h4 class="tokenBorrow">{{( token.borrowRate || 0) | number:'1.0-3'}}%</h4></td>
+                <td class="align-middle text-center">
+                  <button type="button" *ngIf="token.type == 'primary' || token.type == 'success'" class="btn btn-{{token.type}} m-2" (click)="supply(token)"  [ngStyle]="{'width': '6em'}">Supply</button>
+                  <button type="button" *ngIf="token.type == 'success'" class="btn btn-{{token.type}} m-2" (click)="withdraw(token)" [ngStyle]="{'width': '6em'}" >Withdraw</button>
+                  <button type="button" *ngIf="token.type == 'primary' || token.type == 'warning'" class="btn btn-{{token.type}} m-2" (click)="borrow(token)" [ngStyle]="{'width': '6em'}">Borrow</button>
+                  <button type="button" *ngIf="token.type == 'warning'" class="btn btn-{{token.type}}  m-2" (click)="payBack(token)" [ngStyle]="{'width': '6em'}">Payback</button>
+                  <!-- <button type="button"  class="btn btn-{{token.type}}" (click)="payBack(token)">payback</button> -->
+
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+  <!-- <div class="row tokens-card">
+    <div class="col-md-4 py-3 tokenCol" *ngFor = "let token of tokens">
+
+
+
+      <div class="card token-card">
+
+        <div class="container">
+
+            <div class="row">
+                <div class="col-md-4">
+                  <img src="assets/img/icons/tokens/{{token.name}}.svg" width="50" height="50" class="avatar-img rounded-circle tokenImg" alt="...">
+                </div>
+                <div class="col-md-8">
+                  <h3 class="card-title token-price">$0.00</h3>
+                </div>
+            </div>
+            <hr>
+
+            <div class="card-body">
+
+              <div class="row">
+                <div class="col-md-6">
+                  <span class="badge badge-pill badge-secondary">position</span>
+                </div>
+
+                <div class="col-md-6 card-body-value">
+                  <p class="token-body-value">0</p>
+
+                </div>
+              </div>
+
+              <hr>
+
+              <div class="row">
+                <div class="col-md-6">
+                  <h5>Supply (APR)</h5>
+                </div>
+
+                <div class="col-md-6 card-body-value">
+                  <p class="token-body-value">0%</p>
+
+                </div>
+              </div>
+
+              <hr>
+
+              <div class="row">
+                <div class="col-md-6">
+                  <h5>Borrow (APR)</h5>
+                </div>
+
+                <div class="col-md-6 card-body-value">
+                  <p class="token-body-value">0%</p>
+                </div>
+              </div>
+
+              <hr>
+
+            </div>
+      </div>
+    </div>
+
+
+    </div>
+  </div> -->
+
+
+</div>

src/app/compound/compound.component.scss

@@ -0,0 +1,57 @@
+.container{
+  margin-top: 2em;
+  // margin-right: 1px;
+}
+
+.title{
+  font-size: 1.5em;
+}
+.img-thumbnail{
+  transform: scale(2.8);
+}
+.tokens-card{
+  margin-top: 3em;
+}
+.tokenCol
+
+.token-card{
+  border: 1px solid #edf2f9;
+  border-radius: .5rem;
+}
+.token-body-value{
+  font-size: 1em;
+  text-align: right;
+}
+h5{
+  font-size: 0.9em;
+}
+.card {
+  margin-top: 2.5em
+}
+
+.tokenTable{
+  padding: 0 0.2em 0.5em 0.2em
+}
+
+.tokenImg{
+  margin: 1em 0 1em 0.5em;
+}
+.supTokenName{
+  font-size: 1em;
+  line-height: 0.1em;
+}
+.table th {
+  padding-top:1em;
+}
+h4 .tokenValue .tokenSupply .tokenBorrow {
+  font-size: 2em;
+  margin: 0
+}
+.assetValue{
+  font-weight: bold;
+  font-size: 1.5em;
+}
+
+.tokenBalAmount{
+  font-size: 1.15em;
+}

src/app/compound/compound.component.spec.ts

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

src/app/compound/compound.component.ts

@@ -0,0 +1,536 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import { Web3Service } from '../util/web3.service';
+
+
+declare let require: any;
+const tokens = require('../util/common/tokens.json')
+const tokensABI = require('../util/common/ABI/cTokensAbi.json')
+
+
+import { environment } from '../../environments/environment'
+
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog';
+
+
+
+export interface DialogData {
+  animal: string;
+  name: string;
+}
+
+@Component({
+  selector: 'app-compound',
+  templateUrl: './compound.component.html',
+  styleUrls: ['./compound.component.scss']
+})
+export class CompoundComponent implements OnInit {
+  userStats: any
+  userBalances = {}
+  tokenPriceConversation;
+
+  public tokensList = [
+    { name: "ETH", url: "eth" },
+    { name: "DAI", url: "dai" },
+    { name: "USDC", url: "usdc" },
+    { name: "ZRX", url: "zrx" },
+    { name: "REP", url: "rep" },
+    { name: "BAT", url: "bat" },
+    { name: "WBTC", url: "wbtc" }
+  ]
+
+  tableStatus = false;
+  lendBal = 0
+  borrowBal = 0
+  borrowingPowerBal = 0
+  tokensListObservable: Observable<String[]>;
+
+  constructor(public dialog: MatDialog, public web3: Web3Service, private httpClient: HttpClient) {
+
+    web3.contractAccountObservable.subscribe(async (address) => {
+      if (address != "0x0000000000000000000000000000000000000000") {
+        let x = await this.httpClient.get<any[]>(`${environment.instanode}/compound/${address}`).toPromise();
+        let balancesData = await this.httpClient.get<any[]>(`${environment.instanode}/balance/${web3.accounts[0]}`).toPromise();
+        let priceConversationData = await this.httpClient.get<any[]>(`${environment.instanode}/stats/price`).toPromise();
+
+        this.tokenPriceConversation = priceConversationData
+
+        this.createTokensBalObj(balancesData)
+        this.setUserStats(this.tokenPriceConversation, x)
+
+        this.userStats = x
+        this.userStats = this.userStats.data
+
+        this.createTokenData(x)
+      } else {
+        this.tableStatus = false;
+        this.tokensList = [
+          { name: "ETH", url: "eth" },
+          { name: "DAI", url: "dai" },
+          { name: "USDC", url: "usdc" },
+          { name: "ZRX", url: "zrx" },
+          { name: "REP", url: "rep" },
+          { name: "BAT", url: "bat" },
+          { name: "WBTC", url: "wbtc" }
+        ]
+        this.lendBal = 0
+        this.borrowBal = 0
+        this.borrowingPowerBal = 0
+      }
+
+
+
+    })
+  }
+
+  ngOnInit() {
+  }
+
+  setUserStats(priceTable, userTokenStats) {
+    priceTable = priceTable.data
+    this.lendBal = userTokenStats.data.suppliedInETH * priceTable[0].price
+    this.borrowBal = userTokenStats.data.borrowedInETH * priceTable[0].price
+    this.borrowingPowerBal = userTokenStats.data.remainBorrowInETH * priceTable[0].price
+
+  }
+
+  createTokensBalObj(balData) {
+    balData = balData.data
+    balData.forEach((bal, index) => {
+      this.userBalances[tokens[index].address] = bal
+    })
+  }
+
+  private createTokenData(data) {
+    this.tokensList = []
+    let tokensPrice = this.tokenPriceConversation.data
+    tokens.forEach((token, index) => {
+
+      if (token.compound) {
+
+        let address = token.address
+        let stats = data.data[address]
+        let type = ""
+        let bal = 0
+
+        if (stats.balSupply == 0 && stats.balBorrow == 0) {
+          type = "primary"
+        } else if (stats.balSupply > 0) {
+          type = "success"
+          bal = stats.balSupply
+        } else if (stats.balBorrow > 0) {
+          type = "warning"
+          bal = stats.balBorrow
+        }
+
+        let obj = {
+          cAddress: token.compound.caddress,
+          address: token.address,
+          price: tokensPrice[index].price,
+          name: token.symbol,
+          url: (token.symbol).toLowerCase(),
+          decimals: token.decimals,
+          supplyRate: this.roundToTwo(stats.supplyRate),
+          borrowRate: this.roundToTwo(stats.borrowRate),
+          type: type,
+          bal: this.roundToTwo((bal)),
+          balValue: bal * tokensPrice[index].price,
+          exchangeRate: stats.exchangeRate
+        }
+
+        this.tokensList.push(obj)
+        this.tableStatus = true;
+      }
+    })
+    console.log(this.tokensList)
+  }
+
+  roundToTwo(num) {
+    return num
+  }
+
+
+  supply(tokenStats) {
+    let token = tokens.filter((x) => { return (x.address == tokenStats.address) })
+    let data = tokenStats
+    data.value = 0
+    data.factor = token[0].compound.factor
+    data.userTokenBal = this.userBalances[data.address] / (10 ** data.decimals)
+    data.borrowingPowerBal = this.borrowingPowerBal
+    this.openDialog("supply", data)
+  }
+
+  withdraw(tokenStats) {
+    // let token = tokens.filter((x) =>{ return (x.address == tokenStats.address)})
+    let data = tokenStats
+    data.value = 0
+    data.maxWithDraw = this.userStats[data.address].balSupply
+    this.openDialog("withdraw", data)
+  }
+
+  borrow(tokenStats) {
+    let token = tokens.filter((x) => { return (x.address == tokenStats.address) })
+    let data = tokenStats
+    data.value = 0
+    let tokenOraclePrice = this.userStats[data.address].oraclePrice
+    data.maxBorrowValue = this.userStats.remainBorrowInETH / tokenOraclePrice
+
+    this.openDialog("borrow", data)
+  }
+
+  payBack(tokenStats) {
+    let token = tokens.filter((x) => { return (x.address == tokenStats.address) })
+    let data = tokenStats
+    data.value = 0
+    data.userTokenBal = this.userBalances[data.address] / (10 ** data.decimals)
+    data.maxPayback = this.userStats[data.address].balBorrow
+    data.paybackValue = 0
+    console.log(data.userTokenBal)
+    this.openDialog("payback", data)
+  }
+
+  openDialog(type, tokenData): void {
+    if (type == "supply") {
+      const dialogRef = this.dialog.open(SupplyDialog, {
+        width: '300px',
+        data: tokenData
+      }, );
+
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          this.supplyExecute(result)
+        }
+      });
+    } else if (type == "withdraw") {
+      const dialogRef = this.dialog.open(WithdrawDialog, {
+        width: '300px',
+        data: tokenData
+      }, );
+
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          this.withdrawExecute(result)
+        }
+      });
+    } else if (type == "borrow") {
+      const dialogRef = this.dialog.open(BorrowDialog, {
+        width: '300px',
+        data: tokenData
+      }, );
+
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          this.borrowExecute(result)
+        }
+      });
+    } else if (type == "payback") {
+      const dialogRef = this.dialog.open(PayBackDialog, {
+        width: '300px',
+        data: tokenData
+      }, );
+
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          this.paybackExecute(result)
+        }
+
+      });
+    }
+
+  }
+
+  async paybackExecute(data) {
+    let amount = Number(data.value) * 1.01
+    amount = (amount * (10 ** data.decimals))
+    let amountValue = amount.toFixed(0);
+
+    let arg = [
+      data.address,
+      data.cAddress,
+      amountValue
+    ]
+
+    let ethAmt = "0"
+    if (data.address != "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee") {
+      let allowedAmt = await this.web3.getAllowance(data.address);
+      if (allowedAmt < amount) {
+        console.error("NOT ALLOWED")
+        this.web3.setAllowance(data.address)
+      }
+    } else {
+      ethAmt = amountValue
+    }
+
+    console.log(arg)
+    let callData = this.web3.getCallData(tokensABI.repayTokenLogic, arg)
+    let executeData = {
+      logicProxyName: "InstaCompound",
+      value: 0,
+    }
+    this.web3.executeFunction(callData, executeData)
+  }
+
+  async withdrawExecute(data) {
+    let amount = Number(data.value) * 1.01
+    amount = (amount * (10 ** data.decimals) / data.exchangeRate)
+    let amountValue = amount.toFixed(0);
+
+    let arg = [
+      data.address,
+      data.cAddress,
+      amountValue
+    ]
+
+    console.log(arg)
+    let callData = this.web3.getCallData(tokensABI.redeemCTokenLogic, arg)
+    let executeData = {
+      logicProxyName: "InstaCompound",
+      value: 0,
+    }
+    this.web3.executeFunction(callData, executeData)
+  }
+
+
+
+  async borrowExecute(data) {
+    let amount = Number(data.value)
+    amount = (amount * (10 ** data.decimals))
+    let amountValue = amount.toFixed(0);
+
+    let arg = [
+      data.address,
+      data.cAddress,
+      amountValue
+    ]
+
+    console.log(arg)
+    let callData = this.web3.getCallData(tokensABI.borrowLogic, arg)
+    let executeData = {
+      logicProxyName: "InstaCompound",
+      value: 0,
+    }
+    this.web3.executeFunction(callData, executeData)
+  }
+
+  async supplyExecute(data) {
+    let amount = Number(data.value)
+    amount = (amount * (10 ** data.decimals))
+    let amountValue = amount.toFixed(0);
+
+    let arg = [
+      data.address,
+      data.cAddress,
+      amountValue
+    ]
+
+    console.log(arg)
+    let callData = this.web3.getCallData(tokensABI.mintCTokenLogic, arg)
+    let ethAmt = "0"
+
+    if (data.address != "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee") {
+      let allowedAmt = await this.web3.getAllowance(data.address);
+      if (allowedAmt < amount) {
+        console.error("NOT ALLOWED")
+        this.web3.setAllowance(data.address)
+      }
+    } else {
+      ethAmt = amountValue
+    }
+
+    let executeData = {
+      logicProxyName: "InstaCompound",
+      value: ethAmt,
+    }
+
+    this.web3.executeFunction(callData, executeData)
+  }
+}
+
+
+//SUPPLY
+@Component({
+  selector: 'supply-dialog',
+  templateUrl: 'supplyDialogBox.html',
+})
+export class SupplyDialog {
+  value: number
+  btnStatus = true
+  status = ""
+  constructor(
+    public dialogRef: MatDialogRef<SupplyDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    console.log(this.data);
+    if (this.data.userTokenBal == 0) this.status = "NO BALANCE"
+    this.data.supplyValue = 0
+    this.data.borrowingPower = 0
+  }
+
+  calculate(event) {
+    this.btnStatus = event > 0 && this.data.userTokenBal ? false : true
+    this.value = Number(event)
+
+    if (this.data.userTokenBal == 0) {
+      this.value = 0
+      this.data.supplyValue = this.data.price * 0
+      return
+    }
+
+    if (Number(event) > this.data.userTokenBal) {
+      this.value = 0
+      this.value = this.data.userTokenBal
+    }
+
+    this.data.supplyValue = this.data.price * event
+    let borrowingPower = this.data.factor * this.data.supplyValue
+    this.data.borrowingPower = borrowingPower
+    this.data.value = this.value
+  }
+  someValue: boolean = false;
+  onNoClick(): void {
+    this.dialogRef.close(this.data);
+  }
+
+}
+
+// WITHDRAW
+@Component({
+  selector: 'withdraw-dialog',
+  templateUrl: 'withdrawDialogBox.html',
+})
+export class WithdrawDialog {
+  value: number
+  btnStatus = true;
+  status = "";
+  color = 'accent';
+  checked = false;
+  constructor(
+    public dialogRef: MatDialogRef<WithdrawDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    console.log(this.data);
+    if (this.data.bal == 0) this.status = "MAX AMOUNT IS WITHDRAWN"
+    this.data.withdrawValue = 0
+  }
+
+  calculate(event) {
+    if (event != this.data.maxWithDraw) {
+      this.checked = false
+    }
+    this.btnStatus = event > 0 && this.data.bal ? false : true
+    this.value = Number(event)
+
+    if (Number(event) > this.data.bal) {
+      this.value = 0
+      this.value = this.data.bal
+    }
+
+    this.data.withdrawValue = this.data.price * event
+    this.data.value = this.value
+  }
+
+  changed() {
+    if (this.checked) {
+      this.calculate(this.data.maxWithDraw * 1.01)
+    }
+  }
+
+
+  onNoClick(): void {
+    this.dialogRef.close(this.data);
+  }
+
+}
+
+
+
+//BORROW
+@Component({
+  selector: 'borrow-dialog',
+  templateUrl: 'borrowDialogBox.html',
+})
+export class BorrowDialog {
+  value: number
+  btnStatus = true
+  status = ""
+  constructor(
+    public dialogRef: MatDialogRef<BorrowDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    console.log(this.data);
+    if (this.data.maxBorrowValue == 0) this.status = "MAX AMOUNT IS WITHDRAWN"
+    this.data.borrowValue = 0
+  }
+
+  calculate(event) {
+    this.btnStatus = event > 0 && this.data.maxBorrowValue ? false : true
+    this.value = Number(event)
+    if (Number(event) > this.data.maxBorrowValue) {
+      this.value = 0
+      this.value = this.data.maxBorrowValue
+    }
+    this.data.borrowValue = this.data.price * event
+    this.data.value = this.value
+  }
+  onNoClick(): void {
+    this.dialogRef.close(this.data);
+  }
+
+}
+
+
+//PayBack
+@Component({
+  selector: 'payback-dialog',
+  templateUrl: 'payBackDialogBox.html',
+})
+export class PayBackDialog {
+  value: number
+  btnStatus = true
+  status = ""
+  color = 'accent';
+  checked = false;
+  constructor(
+    public dialogRef: MatDialogRef<PayBackDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    console.log(this.data);
+    if (this.data.userTokenBal == 0) this.status = "NO BALANCE"
+    this.data.paybackValue = 0
+  }
+
+  calculate(event) {
+    if (event != this.data.maxPayback) {
+      this.checked = false
+    }
+    this.btnStatus = event > 0 && this.data.userTokenBal ? false : true
+    this.value = Number(event)
+    if (event > this.data.maxPayback) {
+      // this.value = this.data.maxPayback
+      this.status = "Not enough debt available to payback"
+      this.btnStatus = true
+    } else if (event > this.data.userTokenBal) {
+      // this.value = this.data.userTokenBal
+      this.status = "Not enough balance available to payback"
+      this.btnStatus = true
+    } else {
+      this.status = ""
+      this.btnStatus = false
+      this.data.paybackValue = this.value * this.data.price
+      this.data.value = this.value
+    }
+  }
+
+
+
+  changed() {
+    if (this.checked) {
+      this.calculate(this.data.maxPayback)
+    }
+    console.log(this.checked)
+  }
+
+
+  onNoClick(): void {
+    this.dialogRef.close(this.data);
+  }
+
+}

src/app/compound/payBackDialogBox.html

@@ -0,0 +1,32 @@
+<h1 mat-dialog-title>PayBack {{data.name}}</h1>
+
+<div mat-dialog-content>
+  <mat-form-field class="w-100">
+    <mat-label>Balance</mat-label>
+    <input matInput [ngModel]="data.userTokenBal | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100">
+    <mat-label>MAX PAYBACK</mat-label>
+    <input matInput [ngModel]="data.maxPayback | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100" appearance="legacy" floatLabel="never">
+    <input matInput [(ngModel)]="value" (ngModelChange)="calculate($event)" placeholder="{{data.name}} TO PAYBACK">
+  </mat-form-field>
+
+  <mat-slide-toggle
+    [(ngModel)]="checked"
+    [color]="color"
+    class="pb-2"
+    (change)="changed()">
+    Set Max
+  </mat-slide-toggle>
+  <hr>
+  <mat-form-field class="w-100" >
+    <mat-label>PAYBACK VALUE $</mat-label>
+    <input matInput class="text-muted" [ngModel]="data.paybackValue  | number:'1.0-5'" readonly>
+  </mat-form-field>
+  <button  [mat-dialog-close]="data" class="btn btn-primary text-white w-100" [disabled]="btnStatus">Payback</button>
+  <div class="alert alert-danger bg-danger text-white mt-4" role="alert" *ngIf="status">
+  <h6>{{status}}</h6>
+  </div>
+</div>

src/app/compound/supplyDialogBox.html

@@ -0,0 +1,28 @@
+<h1 mat-dialog-title>Supply {{data.name}}</h1>
+
+<div mat-dialog-content>
+  <mat-form-field class="w-100">
+    <mat-label>BALANCE {{data.name}}</mat-label>
+    <input matInput [ngModel]="data.userTokenBal | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100">
+    <mat-label>SUPPLY APR%</mat-label>
+    <input matInput [ngModel]="data.supplyRate | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100" appearance="legacy" floatLabel="never">
+    <input matInput [(ngModel)]="value" (ngModelChange)="calculate($event)" placeholder="{{data.name}} TO LEND">
+  </mat-form-field>
+  <mat-form-field class="w-100">
+    <mat-label>SUPPLY VALUE $</mat-label>
+    <input matInput class="text-muted" [ngModel]="data.supplyValue | number:'1.0-5'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100">
+    <mat-label>(+) BORROWING POWER $</mat-label>
+    <input matInput class="text-muted" [ngModel]="data.borrowingPower | number:'1.0-5'" readonly>
+  </mat-form-field>
+  <!-- <button mat-button [mat-dialog-close]="data" class="w-100"></button> -->
+  <button  [mat-dialog-close]="data" class="btn btn-primary text-white w-100" [disabled]="btnStatus">Supply</button>
+  <div class="alert alert-danger bg-danger text-white mt-4" role="alert" *ngIf="status">
+  <h6>{{status}}</h6>
+  </div>
+</div>

src/app/compound/withdrawDialogBox.html

@@ -0,0 +1,28 @@
+<h1 mat-dialog-title>Withdraw {{data.name}}</h1>
+
+<div mat-dialog-content>
+  <mat-form-field class="w-100">
+    <mat-label>MAX Amount to withdraw</mat-label>
+    <input matInput [ngModel]="data.bal | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100" appearance="legacy" floatLabel="never">
+    <input matInput [(ngModel)]="value" (ngModelChange)="calculate($event)" placeholder="{{data.name}} TO WITHDRAW">
+  </mat-form-field>
+  <mat-slide-toggle
+    [(ngModel)]="checked"
+    [color]="color"
+    class="pb-2"
+    (change)="changed()">
+    Set Max
+  </mat-slide-toggle>
+  <hr>
+  <mat-form-field class="w-100">
+    <mat-label>WITHDRAW VALUE $</mat-label>
+    <input matInput class="text-muted" [ngModel]="data.withdrawValue  | number:'1.0-5'" readonly>
+  </mat-form-field>
+
+  <button  [mat-dialog-close]="data" class="btn btn-primary text-white w-100" [disabled]="btnStatus">Withdraw</button>
+  <div class="alert alert-danger bg-danger text-white mt-4" role="alert" *ngIf="status">
+  <h6>{{status}}</h6>
+  </div>
+</div>

src/app/exit/exit.component.html

@@ -0,0 +1,111 @@
+<div class="container mx-auto navBar">
+
+  <div class="row">
+    <div class="col mt-2">
+      <div class="card">
+        <div class="card-header text-center my-auto">
+            <h6 class="supTitle">EXIT FROM INSTADAPP ECOSYSTEM</h6>
+            <h3 class="title"><b>
+              Exit / Withdraw
+            </b>
+          </h3>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row mt-4">
+
+    <div class="col-md-4">
+      <div class="card align-middle text-center">
+        <div class="card-header font-weight-bold bg-white">
+          Balances
+        </div>
+        <div class="card-body">
+          <div class="tokenBals " *ngFor="let token of tokensBal">
+            <div class="row">
+              <div class="col-md-3 px-0">
+                <img src="assets/img/icons/tokens/{{token.url}}.svg" width="50" height="50" class="avatar-img rounded-circle tokenImg" alt="...">
+              </div>
+              <div class="col-md-4 text-center my-auto">
+                <h5 class="">
+                  {{token.bal || 0.00 | number:'1.0-3' }} {{token.name}}
+                </h5>
+
+              </div>
+              <div class="col-md-5">
+                <button type="button" [disabled]="!token.bal" class="btn btn-primary m-2" (click)="withdrawToken(token)" [ngStyle]="{'width': '6em'}" >Withdraw</button>
+
+              </div>
+            </div>
+
+            <hr>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  <!-- <div class="col-md-4">
+    <div class="card align-middle text-center">
+      <div class="card-header font-weight-bold bg-white">
+        Uniswap Pools
+      </div>
+      <div class="card-body">
+        <div class="tokenBals " *ngFor="let token of tokensUniSwap">
+          <div class="row">
+            <div class="col-md-3 mr-0 px-0">
+              <img src="assets/img/icons/tokens/{{token.url}}.svg" width="50" height="50" class="avatar-img rounded-circle tokenImg" alt="...">
+            </div>
+            <div class="col-md-4 text-center my-auto px-0">
+              <h6 class="uniSwapShare">
+                <b>
+                  Your Share: {{token.shareBal || 0.00 | number:'1.0-3'}}%
+                </b>
+              </h6>
+              <h6 class="uniSwapBal">
+                0.00 {{token.name}} | 0.00 ETH
+              </h6>
+
+            </div>
+            <div class="col-md-5">
+              <button type="button" [disabled]="!token.shareBal"  class="btn btn-primary m-2" (click)="withdrawUniSwap(token)" [ngStyle]="{'width': '6em'}" >Withdraw</button>
+
+            </div>
+          </div>
+
+          <hr>
+        </div>
+      </div>
+    </div>
+  </div> -->
+
+
+  <div class="col-md-4">
+    <div class="card align-middle text-center">
+      <div class="card-header font-weight-bold bg-white">
+        Debt Positions
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-7 align-middle my-auto">
+            <h4 class=" makeCDP font-weight-bolder">
+              <!-- <a href=""> -->
+                #{{CDPID}}
+              <!-- </a> -->
+            </h4>
+          </div>
+
+          <div class="col-md-5">
+            <button type="button"  class="btn btn-primary m-2" (click)="withdrawCDP(CDPID)" [disabled]="!CDPID" [ngStyle]="{'width': '6em'}" >Withdraw</button>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+
+  </div>
+</div>

src/app/exit/exit.component.scss

@@ -0,0 +1,24 @@
+.navBar{
+  margin-top: 2em;
+}
+
+.protocalContainer{
+  margin-bottom: 2em;
+}
+.title{
+  font-size: 2em;
+}
+.supTitle{
+  font-size: 0.7em;
+  line-height: 1px;
+  color: grey;
+  padding-left: 4px;
+}
+
+.uniSwapShare{
+  font-size: 1em;
+}
+
+.uniSwapBal{
+  font-size: 0.7em;
+}

src/app/exit/exit.component.spec.ts

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

src/app/exit/exit.component.ts

@@ -0,0 +1,149 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import { Web3Service } from '../util/web3.service';
+
+
+declare let require: any;
+const tokens = require('../util/common/tokens.json')
+const exitABI = require('../util/common/ABI/exitABI.json')
+
+
+import { environment } from '../../environments/environment'
+
+@Component({
+  selector: 'app-exit',
+  templateUrl: './exit.component.html',
+  styleUrls: ['./exit.component.scss']
+})
+export class ExitComponent implements OnInit {
+  public tokensBal = [
+    { name: "ETH", url: "eth" },
+    { name: "DAI", url: "dai" },
+    { name: "USDC", url: "usdc" },
+    { name: "MKR", url: "mkr" },
+    { name: "ZRX", url: "zrx" },
+    { name: "REP", url: "rep" },
+    { name: "TUSD", url: "tusd" },
+    { name: "BAT", url: "bat" },
+    { name: "KNC", url: "knc" },
+    { name: "WBTC", url: "wbtc" }
+  ]
+
+  public tokensUniSwap = [
+    { name: "DAI", url: "dai" },
+    { name: "USDC", url: "usdc" },
+    { name: "MKR", url: "mkr" },
+    { name: "ZRX", url: "zrx" },
+    { name: "REP", url: "rep" },
+    { name: "TUSD", url: "tusd" },
+    { name: "BAT", url: "bat" },
+    { name: "KNC", url: "knc" },
+    { name: "WBTC", url: "wbtc" }
+  ]
+
+  userBalStats;
+  CDPID = 0
+  constructor(public web3: Web3Service, private httpClient: HttpClient) {
+    web3.contractAccountObservable.subscribe(async (address) => {
+      if (address != "0x0000000000000000000000000000000000000000") {
+        let stats = await this.httpClient.get<any[]>(`${environment.mkr}/lad/${address}`).toPromise();
+        let balancesData = await this.httpClient.get<any>(`${environment.instanode}/balance/${address}`).toPromise();
+        this.userBalStats = balancesData.data
+        if (stats.length > 0) {
+          console.log(stats)
+          this.createTokenBalStats(balancesData)
+          this.CDPID = stats[0].id
+        } else {
+
+        }
+
+      } else {
+        this.tokensBal = [
+          { name: "ETH", url: "eth" },
+          { name: "DAI", url: "dai" },
+          { name: "USDC", url: "usdc" },
+          { name: "MKR", url: "mkr" },
+          { name: "ZRX", url: "zrx" },
+          { name: "REP", url: "rep" },
+          { name: "TUSD", url: "tusd" },
+          { name: "BAT", url: "bat" },
+          { name: "KNC", url: "knc" },
+          { name: "WBTC", url: "wbtc" }
+        ]
+        this.CDPID = 0
+      }
+    })
+  }
+
+
+  ngOnInit() {
+  }
+
+  createTokenBalStats(balStats) {
+    this.tokensBal = []
+    balStats.data.forEach((bal, index) => {
+      let token = tokens[index]
+
+      let obj = {
+        address: token.address,
+        name: token.symbol,
+        url: (token.symbol).toLowerCase(),
+        decimals: token.decimals,
+        bal: Number(bal) / (10 ** token.decimals),
+      }
+
+      this.tokensBal.push(obj)
+    })
+  }
+
+  withdrawToken(token) {
+    let address = token.address
+    console.log("Address:", address)
+    if (address == "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee") { // Transfer ETH
+      let arg = [];
+      console.log(arg)
+      let callData = this.web3.getCallData(exitABI.withdrawETHLogic, arg)
+      let executeData = {
+        logicProxyName: "Exit",
+        value: 0,
+      }
+      this.web3.executeFunction(callData, executeData)
+    } else {
+      let arg = [address];
+      console.log(arg)
+      let callData = this.web3.getCallData(exitABI.withdrawTokenLogic, arg)
+      let executeData = {
+        logicProxyName: "Exit",
+        value: 0,
+      }
+      this.web3.executeFunction(callData, executeData)
+    }
+  }
+
+
+  withdrawUniSwap(token) {
+    let poolAddr = token.poolAddr
+    let arg = [poolAddr];
+    console.log(arg)
+    let callData = this.web3.getCallData(exitABI.withdrawTokenLogic, arg)
+    let executeData = {
+      logicProxyName: "Exit",
+      value: 0,
+    }
+    this.web3.executeFunction(callData, executeData)
+  }
+
+
+  withdrawCDP(CDP) {
+    let arg = [CDP];
+    console.log(arg)
+    let callData = this.web3.getCallData(exitABI.withdrawCDPLogic, arg)
+    let executeData = {
+      logicProxyName: "Exit",
+      value: 0,
+    }
+    this.web3.executeFunction(callData, executeData)
+  }
+}

src/app/layout/dashboard/alertDialogBox.html

@@ -0,0 +1,20 @@
+<div class="text-center" mat-dialog-title>
+  <h4 >Transaction Status</h4>
+</div>
+
+<hr>
+<div mat-dialog-content>
+  <div class="text-center">
+    <h2 class="text-{{data.msgColor}}">{{data.msg}}</h2>
+    <mat-progress-spinner
+       class="loader my-3 mx-auto mat-spinner-color"
+       [color]="color"
+       [mode]="mode"
+       [value]="value"
+       [diameter]="60"
+       *ngIf="!data.status">
+   </mat-progress-spinner>
+    <a class="hashLink" href="https://etherscan.io/tx/{{data.hash}}" target="_blank">{{data.shortHash}}</a>
+    <p class="tnxHash text-muted">Transaction hash</p>
+  </div>
+</div>

src/app/layout/dashboard/dashboard.component.html

@@ -0,0 +1,52 @@
+<div class="container mx-auto navBar">
+  <!-- <div class="row">
+    <div class="col-md-3">
+      <app-sidebar></app-sidebar>
+    </div>
+
+  </div> -->
+
+  <div class="row">
+    <div class="col-md-1 col-3 pr-0">
+      <img src="assets/img/logos/logo.png" width="67" height="67" class="img-thumbnail border-0" alt="">
+    </div>
+
+    <div class="col-md-9 col-7 pl-0 mt-3">
+        <h6 class="supTitle">ALTERNATE DASHBOARD</h6>
+        <h3 class="title"><b>
+          InstaDApp
+          </b>
+        </h3>
+    </div>
+
+    <div class="col-md-2 col-12 text-center mt-3">
+      <app-connectbtn></app-connectbtn>
+    </div>
+  </div>
+</div>
+
+<div class="container protocalContainer">
+  <div class="row protcolRow">
+    <div class="col ">
+      <!-- <router-outlet></router-outlet> -->
+      <!-- <app-compound></app-compound>
+      <app-maker-dao></app-maker-dao> -->
+      <router-outlet></router-outlet>
+
+    </div>
+  </div>
+
+</div>
+
+<footer>
+  <app-footer></app-footer>
+</footer>
+<!--
+<div class="wrapper">
+    <div class="sidebar">
+
+    </div>
+    <mat-divider [vertical]="true"></mat-divider>
+    <div class="main-panel">
+    </div>
+</div> -->

src/app/layout/dashboard/dashboard.component.scss

@@ -0,0 +1,32 @@
+.navBar{
+  margin-top: 2em;
+}
+
+.protocalContainer{
+  margin-bottom: 2em;
+}
+.title{
+  font-size: 2em;
+}
+.supTitle{
+  font-size: 0.7em;
+  line-height: 1px;
+  color: grey;
+  padding-left: 4px;
+}
+.img-thumbnail{
+  padding-right: 0
+  // transform: scale(2.8);
+}
+.protcolRow{
+  // margin-left: 4em;
+}
+
+
+.mat-spinner-color::ng-deep circle{
+stroke: #FBC130 !important;
+}
+
+.hashLink{
+  font-size: 2em;
+}

src/app/layout/dashboard/dashboard.component.spec.ts

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

src/app/layout/dashboard/dashboard.component.ts

@@ -0,0 +1,85 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import { Web3Service } from '../../util/web3.service';
+
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog';
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+  tnxInterval;
+  dialogRef
+  constructor(public dialog: MatDialog, public web3: Web3Service, private httpClient: HttpClient) {
+
+    web3.tnxHashObservable.subscribe(async (hash) => {
+      this.openAlert({
+        msg: `Txn Pending...`,
+        msgColor: "warning",
+        shortHash: this.shortHash(hash),
+        hash: hash,
+        status: false
+      })
+      let isConfirmedShowed = false;
+      this.tnxInterval = setInterval(() => {
+        this.web3.getTX(hash).then((result) => {
+          if (!result) { return; }
+          if (!result.blockNumber) { return; }
+          isConfirmedShowed = true;
+          this.tnxComfirmed(hash)
+        })
+      }, 2000)
+    })
+  }
+
+  ngOnInit() {
+  }
+
+  openAlert(data) {
+    this.dialogRef = this.dialog.open(TXDialog, {
+      width: '350px',
+      data: data
+    }, );
+  }
+
+  shortHash(tx) {
+    let hash = `${tx.slice(0, 5)}....${tx.slice(tx.length - 5)}`
+    return hash
+  }
+
+  tnxComfirmed(hash) {
+    clearInterval(this.tnxInterval)
+    this.dialog.closeAll();
+    this.web3.reload()
+    this.openAlert({
+      msg: `Txn Comfirmed.`,
+      msgColor: "success",
+      shortHash: this.shortHash(hash),
+      hash: hash,
+      status: true
+    })
+  }
+
+}
+
+
+//alert Modal
+@Component({
+  selector: 'alert-dialog',
+  templateUrl: 'alertDialogBox.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class TXDialog {
+  color = 'fffff';
+  mode = 'indeterminate';
+  value = 50;
+  constructor(
+    public dialogRef: MatDialogRef<TXDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+
+}

src/app/layout/dashboard/dashboard.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+import {MatDividerModule} from '@angular/material/divider';
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    MatDividerModule
+  ]
+})
+export class DashboardModule { }

src/app/layout/protcols/protcols.component.html

@@ -0,0 +1,2 @@
+<app-compound></app-compound>
+<app-maker-dao></app-maker-dao>

src/app/layout/protcols/protcols.component.spec.ts

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

src/app/layout/protcols/protcols.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-protcols',
+  templateUrl: './protcols.component.html',
+  styleUrls: ['./protcols.component.sass']
+})
+export class ProtcolsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/maker-dao/alertDialogBox.html

@@ -0,0 +1,6 @@
+<h1 mat-dialog-title>{{data.title}}</h1>
+<hr>
+<div mat-dialog-content>
+  <h6>{{data.msg}}</h6>
+
+</div>

src/app/maker-dao/depositDialogBox.html

@@ -0,0 +1,19 @@
+<h1 mat-dialog-title>Deposit Collateral (ETH)</h1>
+
+<div mat-dialog-contents>
+  <mat-form-field class="w-100" >
+    <mat-label>Balance (ETH)</mat-label>
+    <input matInput [ngModel]="data.ethBal | number:'1.1-3'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100"  appearance="legacy" floatLabel="never">
+    <input matInput [(ngModel)]="value" (ngModelChange)="calculate($event)" placeholder="ETH to deposit">
+  </mat-form-field>
+  <mat-form-field class="w-100">
+    <mat-label>BREAKEVEN PRICE (ETH)</mat-label>
+    <input matInput [ngModel]="breakEvenPrice | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <button  [mat-dialog-close]="executeData" class="btn btn-primary text-white w-100" [disabled]="btnStatus">DEPOSIT</button>
+  <div class="alert alert-danger bg-danger text-white mt-4" role="alert" *ngIf="status">
+  <h6>{{status}}</h6>
+  </div>
+</div>

src/app/maker-dao/generateDialogBox.html

@@ -0,0 +1,19 @@
+<h1 mat-dialog-title>Generate Debt (DAI)</h1>
+
+<div mat-dialog-content>
+  <mat-form-field class="w-100">
+    <mat-label>MAX AVAILABLE TO DRAW</mat-label>
+    <input matInput [ngModel]="data.maxDrawValue | number:'1.1-3'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100" appearance="legacy" floatLabel="never">
+    <input matInput [(ngModel)]="value" (ngModelChange)="calculate($event)" placeholder="DAI to draw">
+  </mat-form-field>
+  <mat-form-field class="w-100">
+    <mat-label>BREAKEVEN PRICE (ETH)</mat-label>
+    <input matInput [ngModel]="breakEvenPrice | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <button  [mat-dialog-close]="executeData" class="btn btn-primary text-white w-100" [disabled]="btnStatus">GENERATE</button>
+  <div class="alert alert-danger bg-danger text-white mt-4" role="alert" *ngIf="status">
+  <h6>{{status}}</h6>
+  </div>
+</div>

src/app/maker-dao/maker-dao.component.html

@@ -0,0 +1,100 @@
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <div class="card">
+        <div class="card-header">
+          <div class="row">
+            <div class="col-md-6 col-6 my-auto">
+              <h3 class="title"><b>
+                MakerDAO CDP
+              </b>
+            </h3>
+
+            </div>
+            <div class="col-md-6 col-6 align-middle my-auto text-right">
+              <a (click)="close()" class="btn btn-primary text-white tokenCardBtn mr-2">Close CDP</a>
+              <!-- <a (click)="check()" class="btn btn-primary text-white tokenCardBtn mr-2">Check</a> -->
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row assetsRow text-center">
+    <div class="col-md-4 mt-4">
+      <div class="card">
+        <h5 class="card-header text-uppercase bg-transparent text-muted"><b>CDP NUMBER</b></h5>
+        <div class="card-body">
+          <h6 class="card-title assetValue">#{{makerStats.cdp || 0}}</h6>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-4 mt-4">
+      <div class="card">
+        <h5 class="card-header text-uppercase bg-transparent text-muted"><b>NET CDP VALUE</b></h5>
+        <div class="card-body">
+          <h6 class="card-title assetValue">${{(makerStats.netValue || 0) | number:'1.0-2'}}</h6>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-md-4 mt-4">
+      <div class="card">
+        <h5 class="card-header text-uppercase bg-transparent text-muted"><b>STABILITY FEES <span class="stabilityPercentage"> {{makerStats.feePercentage | number:'1.0-1'}}% </span> </b></h5>
+        <div class="card-body">
+          <h6 class="card-title assetValue">${{(makerStats.fee || 0) | number:'1.0-3'}}</h6>
+        </div>
+      </div>
+    </div>
+  </div>
+
+    <div class="row tokenCards">
+
+      <div class="col-md-6 mt-3">
+        <div class="card token-card" >
+          <div class="row">
+            <div class="col text-center">
+              <h5 class="card-header tokenCardTitle bg-transparent text-black-50"><b>Borrowed</b></h5>
+
+            </div>
+          </div>
+          <div class="card-body text-center">
+            <img src="assets/img/icons/tokens/dai.svg" width="75" height="75" class="avatar-img rounded-circle tokenImg" alt="...">
+
+            <h4 class="card-title tokenValue">${{(makerStats.dai || 0)}}</h4>
+            <a (click)="generate()" class="btn btn-primary text-white tokenCardBtn mr-2">GENERATE</a>
+            <a (click)="payBack()" class="btn btn-primary text-white tokenCardBtn mr-2">PAYBACK</a>
+
+          </div>
+        </div>
+      </div>
+
+      <div class="col-md-6 mt-3">
+        <div class="card token-card">
+            <div class="row">
+              <div class="col text-center">
+                <h5 class=" card-header tokenCardTitle bg-transparent text-black-50"><b>Collateral</b></h5>
+              </div>
+
+              <!-- <div class="col">
+                <h5 class="text-right">(${{(makerStats.collateralValue || 0) | number:'1.0-3'}})</h5>
+              </div> -->
+            </div>
+
+          <div class="card-body text-center">
+            <img src="assets/img/icons/tokens/eth.svg" width="75" height="75" class="avatar-img rounded-circle tokenImg" alt="...">
+
+            <h4 class="card-title tokenValue">Ξ{{(makerStats.eth || 0) | number:'1.0-3'}}</h4>
+            <a class="btn btn-primary text-white tokenCardBtn mr-2" (click)="deposit()">DEPOSIT</a>
+            <a class="btn btn-primary text-white tokenCardBtn mr-2" (click)="withdraw()">WITHDRAW</a>
+
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+
+</div>

src/app/maker-dao/maker-dao.component.scss

@@ -0,0 +1,55 @@
+.container{
+  margin-top: 2em;
+  margin-right: 1px;
+}
+
+
+.title{
+  font-size: 1.5em;
+}
+
+.img-thumbnail{
+  transform: scale(2.8);
+}
+
+h5{
+  font-size: 0.9em;
+}
+
+.assetsRow{
+  // margin-top: 2em;
+}
+
+.stabilityPercentage{
+  margin-top: 0.7em;
+}
+
+.assetValue{
+  font-weight: bold;
+  font-size: 1.5em;
+}
+
+.tokenCards{
+  // margin-top: 1.5em;
+}
+
+.token-card{
+  border: 1px solid #edf2f9;
+  border-radius: .5rem;
+}
+
+.tokenCardTitle{
+  font-size: 1.2em;
+}
+.tokenImg{
+  margin-bottom: 1em;
+}
+
+.tokenValue{
+  font-size: 2em
+}
+
+.tokenCardBtn{
+  width: 7em;
+  margin-bottom: 0.3em;
+}

src/app/maker-dao/maker-dao.component.spec.ts

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

src/app/maker-dao/maker-dao.component.ts

@@ -0,0 +1,540 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import { Web3Service } from '../util/web3.service';
+
+
+declare let require: any;
+const tokens = require('../util/common/tokens.json')
+const makerABI = require('../util/common/ABI/makerABI.json')
+
+
+import { environment } from '../../environments/environment'
+
+
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-maker-dao',
+  templateUrl: './maker-dao.component.html',
+  styleUrls: ['./maker-dao.component.scss']
+})
+export class MakerDaoComponent implements OnInit {
+  userStats;
+  makerStats = {
+    cdp: 0,
+    eth: 0,
+    dai: 0,
+    ratio: 0,
+    collateralValue: 0,
+    liqValue: 0,
+    debtValue: 0,
+    netValue: 0,
+    feePercentage: 0,
+    fee: 0,
+    ethPrice: 0
+  };
+  userBalStats = {}
+  userFeeStats;
+  tokenPriceConversation
+  ethPrice
+  CDPID = 0;
+  constructor(public dialog: MatDialog, public web3: Web3Service, private httpClient: HttpClient, private _snackBar: MatSnackBar) {
+    web3.contractAccountObservable.subscribe(async (address) => {
+      if (address != "0x0000000000000000000000000000000000000000") {
+        let stats = await this.httpClient.get<any[]>(`${environment.mkr}/lad/${address}`).toPromise();
+        let priceConversationData = await this.httpClient.get<any[]>(`${environment.instanode}/stats/price`).toPromise();
+        let balancesData = await this.httpClient.get<any>(`${environment.instanode}/balance/${web3.accounts[0]}`).toPromise();
+        this.tokenPriceConversation = priceConversationData
+        this.ethPrice = this.tokenPriceConversation.data[0].price
+        this.userBalStats = balancesData.data
+        this.userStats = stats[0]
+        if (stats.length > 0) {
+          // console.log(stats)
+          let feeData = await this.httpClient.get<any>(`${environment.instanode}/maker/fee/${stats[0].id}`).toPromise();
+          this.userFeeStats = feeData.data
+          this.createStats(1, stats[0])
+          this.CDPID = stats[0].id
+        } else {
+          this.createStats(2, stats)
+        }
+
+      } else {
+        this.makerStats = {
+          cdp: 0,
+          eth: 0,
+          dai: 0,
+          ratio: 0,
+          collateralValue: 0,
+          liqValue: 0,
+          debtValue: 0,
+          netValue: 0,
+          feePercentage: 0,
+          fee: 0,
+          ethPrice: 0
+        };
+        this.CDPID = 0
+      }
+
+    })
+  }
+
+  ngOnInit() {
+  }
+
+  openSnackBar(message: string, action: string) {
+    const snackBarRef = this._snackBar.open(message, action, {
+      duration: 5000,
+    });
+    snackBarRef.onAction().subscribe((result) => {
+      console.log(action);
+      if (action == "Open CDP") {
+        this.deposit()
+      }
+    });
+
+  }
+
+  createStats(type, stats) {
+    let tokensPrice = this.tokenPriceConversation.data
+    if (type == 1) {
+      // console.log(stats)
+      this.makerStats = {
+        cdp: stats.id,
+        eth: stats.ink * Number(stats.per),
+        dai: stats.art,
+        ethPrice: stats.pip,
+        ratio: (100 / stats.ratio) * 100,
+        collateralValue: stats.tab,
+        liqValue: stats.liq_price,
+        debtValue: stats.art * 1,
+        netValue: stats.tab - (stats.art + this.userFeeStats.fees),
+        feePercentage: (this.userFeeStats.feePA) * 100,
+        fee: (this.userFeeStats.fees)
+
+      }
+    } else if (type == 2) {
+      // console.log(stats)
+    }
+    console.log(this.makerStats)
+  }
+
+
+  async  close() {
+    if (this.CDPID == 0) {
+      this.openAlert({
+        title: `No CDP to close  `,
+        msg: `You don't have any CDP to close..`
+      })
+      return
+    }
+
+    let daiPayback = this.makerStats.debtValue * (10 ** 18)
+    let daiBal = this.userBalStats[1]
+
+    if (daiPayback < daiBal) {
+      this.openAlert({
+        title: `Out of Balance`,
+        msg: `You have no enough balance to close CDP.`
+      })
+      return
+    }
+
+    let allowedAmt = await this.web3.getAllowance(tokens[1].address);
+    console.log(allowedAmt)
+    if (allowedAmt < daiPayback) {
+      console.error("NOT ALLOWED")
+      this.web3.setAllowance(tokens[1].address)
+    }
+
+    let arg = [this.CDPID];
+    let callData = this.web3.getCallData(makerABI.cdpShutLogic, arg)
+    let executeData = {
+      logicProxyName: "InstaMaker",
+      value: 0,
+    }
+    this.web3.executeFunction(callData, executeData)
+  }
+
+
+  openAlert(data) {
+    const dialogRef = this.dialog.open(MakerAlertDialog, {
+      width: '350px',
+      data: data
+    }, );
+  }
+
+  check() {
+    this.web3.tnxComfirmation("0xff27770bcc53af4b20e61a1f6a10dfba5058445b55d3f1f24188bca14c49ca7d")
+  }
+  deposit() {
+    let data = {
+      ethBal: (this.userBalStats[0] / (10 ** 18)),
+      eth: this.makerStats.eth,
+      ethPrice: this.ethPrice,
+      breakEvenPrice: this.makerStats.liqValue,
+      debtValue: this.makerStats.debtValue
+    }
+    this.openDialog("deposit", data)
+  }
+
+  generate() {
+    if (this.CDPID == 0) {
+      console.log("NO CDP")
+      this.openSnackBar("NO CDP FOUND!!!", "Open CDP")
+      return
+    }
+    let data = {
+      maxDrawValue: ((this.makerStats.collateralValue * 2) / 3) - this.makerStats.dai,
+      ethPrice: this.ethPrice,
+      breakEvenPrice: this.makerStats.liqValue
+
+    }
+    this.openDialog("generate", data)
+  }
+
+  withdraw() {
+    if (this.CDPID == 0) {
+      console.log("NO CDP")
+      this.openSnackBar("NO CDP FOUND!!!", "Open CDP")
+      return
+    }
+    let data = {
+      maxWithDrawValue: (this.makerStats.eth) - (this.makerStats.debtValue * 3 / 2) / this.makerStats.ethPrice,
+      breakEvenPrice: this.makerStats.liqValue,
+      ethPrice: this.makerStats.ethPrice,
+      eth: this.makerStats.eth,
+      debtValue: this.makerStats.debtValue
+    }
+    this.openDialog("withdraw", data)
+  }
+
+  payBack() {
+    if (this.CDPID == 0) {
+      console.log("NO CDP")
+      this.openSnackBar("NO CDP FOUND!!!", "Open CDP")
+      return
+    }
+    let data = {
+      daiBal: (this.userBalStats[1] / (10 ** 18)),
+      breakEvenPrice: this.makerStats.liqValue,
+      ethPrice: this.makerStats.ethPrice,
+      eth: this.makerStats.eth,
+      debtValue: this.makerStats.debtValue
+    }
+    this.openDialog("payback", data)
+  }
+
+  depositExecute(data) {
+    let ethAmt = data.eth * (10 ** 18)
+    console.log("ETH Amt:", ethAmt)
+    console.log("CDPID", this.CDPID)
+    if (this.CDPID == 0) {
+      let arg = [];
+      console.log(arg)
+      let callData = this.web3.getCallData(makerABI.cdpLockOpenLogic, arg)
+      let executeData = {
+        logicProxyName: "InstaMaker",
+        value: ethAmt,
+      }
+      this.web3.executeFunction(callData, executeData)
+    } else {
+      let arg = [this.CDPID];
+      let callData = this.web3.getCallData(makerABI.cdpLockLogic, arg)
+      let executeData = {
+        logicProxyName: "InstaMaker",
+        value: ethAmt,
+      }
+      this.web3.executeFunction(callData, executeData)
+    }
+  }
+
+  withdrawExecute(data) {
+    console.log(data)
+    let ethAmt = data.ethFree * (10 ** 18)
+    console.log("ETH Amt:", ethAmt)
+    console.log("CDPID", this.CDPID)
+    let arg = [this.CDPID, String(ethAmt)];
+    console.log(arg)
+    let callData = this.web3.getCallData(makerABI.cdpFreeLogic, arg)
+    let executeData = {
+      logicProxyName: "InstaMaker",
+      value: 0,
+    }
+    this.web3.executeFunction(callData, executeData)
+  }
+
+  paybackExecute(data) {
+    console.log(data)
+    let daiAmt = data.daiPayback * (10 ** 18)
+    console.log("DAI Amt:", daiAmt)
+    console.log("CDPID", this.CDPID)
+    let arg = [this.CDPID, String(daiAmt)];
+    console.log(arg)
+    let callData = this.web3.getCallData(makerABI.cdpWipeLogic, arg)
+    let executeData = {
+      logicProxyName: "InstaMaker",
+      value: 0,
+    }
+    this.web3.executeFunction(callData, executeData)
+  }
+
+  generateExecute(data) {
+    console.log(data)
+    let daiAmt = data.dai * (10 ** 18)
+    console.log("DAI Amt:", daiAmt)
+    console.log("CDPID", this.CDPID)
+    let arg = [this.CDPID, String(daiAmt)];
+    console.log(arg)
+    let callData = this.web3.getCallData(makerABI.cdpDrawLogic, arg)
+    let executeData = {
+      logicProxyName: "InstaMaker",
+      value: 0,
+    }
+    this.web3.executeFunction(callData, executeData)
+  }
+
+
+  openDialog(type, tokenData): void {
+    // console.log(tokenData)
+    if (type == "deposit") {
+      const dialogRef = this.dialog.open(DepositDialog, {
+        width: '300px',
+        data: tokenData
+      }, );
+
+      dialogRef.afterClosed().subscribe(result => {
+        // console.log(result)
+        if (result) {
+          this.depositExecute(result)
+        }
+      });
+    } else if (type == "generate") {
+      const dialogRef = this.dialog.open(DaiGenerateDialog, {
+        width: '300px',
+        data: tokenData
+      }, );
+
+      dialogRef.afterClosed().subscribe(result => {
+        // console.log(result)
+        if (result) {
+          this.generateExecute(result)
+        }
+      });
+    } else if (type == "withdraw") {
+      const dialogRef = this.dialog.open(EthWithdrawDialog, {
+        width: '300px',
+        data: tokenData
+      }, );
+
+      dialogRef.afterClosed().subscribe(result => {
+        // console.log(result)
+        if (result) {
+          this.withdrawExecute(result)
+        }
+      });
+    } else if (type == "payback") {
+      const dialogRef = this.dialog.open(DaiPaybackDialog, {
+        width: '300px',
+        data: tokenData
+      }, );
+
+      dialogRef.afterClosed().subscribe(result => {
+        // console.log(result)
+        if (result) {
+          this.paybackExecute(result)
+        }
+      });
+    }
+
+  }
+
+
+}
+
+
+//ETH DEPOSIT
+@Component({
+  selector: 'deposit-dialog',
+  templateUrl: 'depositDialogBox.html',
+})
+export class DepositDialog {
+  value: number
+  breakEvenPrice: number
+  executeData;
+  btnStatus = true
+  status;
+  constructor(
+    public dialogRef: MatDialogRef<DepositDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    this.breakEvenPrice = this.data.breakEvenPrice
+    console.log(this.data);
+    if (this.data.ethBal == 0) this.status = "NO ETH TO DEPOSIT"
+  }
+
+  calculate(event) {
+    this.btnStatus = event > 0 && this.data.ethBal ? false : true
+    this.value = Number(event)
+    if (event > this.data.ethBal) {
+      this.value = this.data.ethBal
+    }
+    let maxLiq_price = ((this.data.eth + this.data.value) * this.data.ethPrice) * 2 / 3
+    this.breakEvenPrice = (this.data.debtValue) * this.data.ethPrice / maxLiq_price
+    this.breakEvenPrice = isNaN(this.breakEvenPrice) ? 0 : this.breakEvenPrice
+    this.data.value = this.value
+    this.executeData = {
+      eth: Number(this.value),
+      breakEvenPrice: this.breakEvenPrice,
+    }
+  }
+  onNoClick(): void {
+    console.log(this.executeData)
+    this.dialogRef.close(this.executeData);
+  }
+
+}
+
+
+//DAI GENERATE
+@Component({
+  selector: 'daiGenerate-dialog',
+  templateUrl: 'generateDialogBox.html',
+})
+export class DaiGenerateDialog {
+  value: number
+  breakEvenPrice: number
+  executeData;
+  btnStatus = true
+  status;
+  constructor(
+    public dialogRef: MatDialogRef<DaiGenerateDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    console.log(this.data);
+    this.breakEvenPrice = this.data.breakEvenPrice
+    if (this.data.maxDrawValue == 0) this.status = "MAX DAI IS WITHDRAWN"
+
+  }
+
+  calculate(event) {
+    this.btnStatus = event > 0 && this.data.maxDrawValue ? false : true
+
+    this.value = Number(event)
+
+    if (event > this.data.maxDrawValue) {
+      this.value = this.data.maxDrawValue
+    }
+    this.breakEvenPrice = (this.value * this.data.ethPrice) / this.data.maxDrawValue
+    this.data.value = this.value
+    this.executeData = {
+      dai: Number(this.value),
+      breakEvenPrice: this.breakEvenPrice,
+    }
+  }
+  onNoClick(): void {
+    this.data.breakEvenPrice = this.breakEvenPrice
+    this.dialogRef.close(this.executeData);
+  }
+
+}
+
+
+//ETH WITHDRAW
+@Component({
+  selector: 'ethWithdraw-dialog',
+  templateUrl: 'withdrawDialogBox.html',
+})
+export class EthWithdrawDialog {
+  value: number
+  breakEvenPrice: number
+  executeData;
+  btnStatus = true
+  status;
+  constructor(
+    public dialogRef: MatDialogRef<EthWithdrawDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    console.log(this.data);
+    this.breakEvenPrice = this.data.breakEvenPrice
+    if (this.data.maxWithDrawValue == 0) this.status = "NO FREE ETH TO DRAW"
+  }
+
+  calculate(event) {
+    this.value = Number(event)
+    this.btnStatus = event > 0 && this.data.maxWithDrawValue ? false : true
+    if (event > this.data.maxWithDrawValue) {
+      this.value = this.data.maxWithDrawValue
+    }
+    let liq_price = ((this.data.eth - this.value) * this.data.ethPrice) * 2 / 3
+    this.breakEvenPrice = this.data.debtValue * this.data.ethPrice / liq_price
+    console.log(isNaN(this.breakEvenPrice))
+    this.breakEvenPrice = isNaN(this.breakEvenPrice) ? 0 : this.breakEvenPrice
+    this.data.value = this.value
+    this.executeData = {
+      ethFree: Number(this.value),
+      breakEvenPrice: this.breakEvenPrice,
+    }
+  }
+  onNoClick(): void {
+    this.data.breakEvenPrice = this.breakEvenPrice
+    this.dialogRef.close(this.executeData);
+  }
+
+}
+
+//DAI PAYBACK
+@Component({
+  selector: 'daiPayback-dialog',
+  templateUrl: 'payBackDialogBox.html',
+})
+export class DaiPaybackDialog {
+  value: number
+  breakEvenPrice: number
+  executeData;
+  btnStatus = true
+  status;
+  constructor(
+    public dialogRef: MatDialogRef<DaiPaybackDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    console.log(this.data);
+    this.breakEvenPrice = this.data.breakEvenPrice
+    if (this.data.debtValue == 0) this.status = "No Debt to payback"
+  }
+
+  calculate(event) {
+    this.value = Number(event)
+    this.btnStatus = event > 0 && this.data.debtValue ? false : true
+    if (event > this.data.debtValue) {
+      this.value = this.data.debtValue
+    }
+
+    let maxLiq_price = ((this.data.eth) * this.data.ethPrice) * 2 / 3
+    this.breakEvenPrice = (this.data.debtValue - this.value) * this.data.ethPrice / maxLiq_price
+    this.data.value = this.value
+    this.executeData = {
+      daiPayback: Number(this.value),
+      breakEvenPrice: this.breakEvenPrice,
+    }
+  }
+  onNoClick(): void {
+    this.data.breakEvenPrice = this.breakEvenPrice
+    this.dialogRef.close(this.executeData);
+  }
+
+}
+
+
+//alert Modal
+@Component({
+  selector: 'alert-dialog',
+  templateUrl: 'alertDialogBox.html',
+})
+export class MakerAlertDialog {
+  constructor(
+    public dialogRef: MatDialogRef<MakerAlertDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: any) {
+    console.log(this.data);
+  }
+
+
+}

src/app/maker-dao/payBackDialogBox.html

@@ -0,0 +1,23 @@
+<h1 mat-dialog-title>Payback Debt (DAI)</h1>
+
+<div mat-dialog-content>
+  <mat-form-field class="w-100">
+    <mat-label>BALANCE (DAI)</mat-label>
+    <input matInput [ngModel]="data.daiBal | number:'1.0-2'" readonly>
+  </mat-form-field>
+  <!-- <mat-form-field class="w-100">
+    <mat-label>Borrow APR</mat-label>
+    <input matInput [ngModel]="data.borrowRate | number:'1.0-2'" readonly>
+  </mat-form-field> -->
+  <mat-form-field class="w-100" appearance="legacy" floatLabel="never">
+    <input matInput [(ngModel)]="value" (ngModelChange)="calculate($event)" placeholder="DAI to payback">
+  </mat-form-field>
+  <mat-form-field class="w-100">
+    <mat-label>BREAKEVEN PRICE (ETH)</mat-label>
+    <input matInput [ngModel]="breakEvenPrice | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <button  [mat-dialog-close]="executeData" class="btn btn-primary text-white w-100" [disabled]="btnStatus">PAYBACK</button>
+  <div class="alert alert-danger bg-danger text-white mt-4" role="alert" *ngIf="status">
+  <h6>{{status}}</h6>
+  </div>
+</div>

src/app/maker-dao/withdrawDialogBox.html

@@ -0,0 +1,19 @@
+<h1 mat-dialog-title>Withdraw Collateral (ETH)</h1>
+
+<div mat-dialog-content>
+  <mat-form-field class="w-100">
+    <mat-label>MAX AVAILABLE TO WITHDRAW</mat-label>
+    <input matInput [ngModel]="data.maxWithDrawValue | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <mat-form-field class="w-100" appearance="legacy" floatLabel="never">
+    <input matInput [(ngModel)]="value" (ngModelChange)="calculate($event)" placeholder="ETH to withdraw">
+  </mat-form-field>
+  <mat-form-field class="w-100">
+    <mat-label>BREAKEVEN PRICE (ETH)</mat-label>
+    <input matInput [ngModel]="breakEvenPrice | number:'1.0-3'" readonly>
+  </mat-form-field>
+  <button  [mat-dialog-close]="executeData" class="btn btn-primary text-white w-100" [disabled]="btnStatus">WITHDRAW</button>
+  <div class="alert alert-danger bg-danger text-white" role="alert" *ngIf="status">
+  {{status}}
+  </div>
+</div>

src/app/material/material.module.ts

@@ -0,0 +1,140 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {A11yModule} from '@angular/cdk/a11y';
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {PortalModule} from '@angular/cdk/portal';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {CdkStepperModule} from '@angular/cdk/stepper';
+import {CdkTableModule} from '@angular/cdk/table';
+import {CdkTreeModule} from '@angular/cdk/tree';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatBadgeModule} from '@angular/material/badge';
+import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCardModule} from '@angular/material/card';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatListModule} from '@angular/material/list';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatSortModule} from '@angular/material/sort';
+import {MatTableModule} from '@angular/material/table';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatTreeModule} from '@angular/material/tree';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    A11yModule,
+   CdkStepperModule,
+   CdkTableModule,
+   CdkTreeModule,
+   DragDropModule,
+   MatAutocompleteModule,
+   MatBadgeModule,
+   MatBottomSheetModule,
+   MatButtonModule,
+   MatButtonToggleModule,
+   MatCardModule,
+   MatCheckboxModule,
+   MatChipsModule,
+   MatStepperModule,
+   MatDatepickerModule,
+   MatDialogModule,
+   MatDividerModule,
+   MatExpansionModule,
+   MatGridListModule,
+   MatIconModule,
+   MatInputModule,
+   MatListModule,
+   MatMenuModule,
+   MatNativeDateModule,
+   MatPaginatorModule,
+   MatProgressBarModule,
+   MatProgressSpinnerModule,
+   MatRadioModule,
+   MatRippleModule,
+   MatSelectModule,
+   MatSidenavModule,
+   MatSliderModule,
+   MatSlideToggleModule,
+   MatSnackBarModule,
+   MatSortModule,
+   MatTableModule,
+   MatTabsModule,
+   MatToolbarModule,
+   MatTooltipModule,
+   MatTreeModule,
+   PortalModule,
+   ScrollingModule,
+ ],
+ exports: [
+  A11yModule,
+  CdkStepperModule,
+  CdkTableModule,
+  CdkTreeModule,
+  DragDropModule,
+  MatAutocompleteModule,
+  MatBadgeModule,
+  MatBottomSheetModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatStepperModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatDividerModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
+  MatRadioModule,
+  MatRippleModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatSortModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+  MatTreeModule,
+  PortalModule,
+  ScrollingModule,
+]
+})
+export class MaterialModule { }

src/app/util/common/ABI/ERC20ABI.json

@@ -0,0 +1,423 @@
+[
+    {
+      "constant": true,
+      "inputs": [
+
+      ],
+      "name": "name",
+      "outputs": [
+        {
+          "name": "",
+          "type": "string"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": false,
+      "inputs": [
+        {
+          "name": "_spender",
+          "type": "address"
+        },
+        {
+          "name": "_value",
+          "type": "uint256"
+        }
+      ],
+      "name": "approve",
+      "outputs": [
+        {
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": true,
+      "inputs": [
+
+      ],
+      "name": "initialized",
+      "outputs": [
+        {
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": true,
+      "inputs": [
+
+      ],
+      "name": "totalSupply",
+      "outputs": [
+        {
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": false,
+      "inputs": [
+        {
+          "name": "_from",
+          "type": "address"
+        },
+        {
+          "name": "_to",
+          "type": "address"
+        },
+        {
+          "name": "_value",
+          "type": "uint256"
+        }
+      ],
+      "name": "transferFrom",
+      "outputs": [
+        {
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": false,
+      "inputs": [
+        {
+          "name": "_holder",
+          "type": "address"
+        }
+      ],
+      "name": "migrateBalance",
+      "outputs": [
+        {
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": true,
+      "inputs": [
+
+      ],
+      "name": "targetSupply",
+      "outputs": [
+        {
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": true,
+      "inputs": [
+
+      ],
+      "name": "decimals",
+      "outputs": [
+        {
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": false,
+      "inputs": [
+
+      ],
+      "name": "unpause",
+      "outputs": [
+        {
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": false,
+      "inputs": [
+        {
+          "name": "_holders",
+          "type": "address[]"
+        }
+      ],
+      "name": "migrateBalances",
+      "outputs": [
+        {
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": true,
+      "inputs": [
+
+      ],
+      "name": "paused",
+      "outputs": [
+        {
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": true,
+      "inputs": [
+        {
+          "name": "_owner",
+          "type": "address"
+        }
+      ],
+      "name": "balanceOf",
+      "outputs": [
+        {
+          "name": "balance",
+          "type": "uint256"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": false,
+      "inputs": [
+
+      ],
+      "name": "pause",
+      "outputs": [
+        {
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": true,
+      "inputs": [
+
+      ],
+      "name": "owner",
+      "outputs": [
+        {
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": true,
+      "inputs": [
+
+      ],
+      "name": "symbol",
+      "outputs": [
+        {
+          "name": "",
+          "type": "string"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": false,
+      "inputs": [
+        {
+          "name": "_to",
+          "type": "address"
+        },
+        {
+          "name": "_value",
+          "type": "uint256"
+        }
+      ],
+      "name": "transfer",
+      "outputs": [
+        {
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": true,
+      "inputs": [
+
+      ],
+      "name": "legacyRepContract",
+      "outputs": [
+        {
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": true,
+      "inputs": [
+        {
+          "name": "_owner",
+          "type": "address"
+        },
+        {
+          "name": "_spender",
+          "type": "address"
+        }
+      ],
+      "name": "allowance",
+      "outputs": [
+        {
+          "name": "remaining",
+          "type": "uint256"
+        }
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "constant": false,
+      "inputs": [
+        {
+          "name": "newOwner",
+          "type": "address"
+        }
+      ],
+      "name": "transferOwnership",
+      "outputs": [
+
+      ],
+      "payable": false,
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "name": "_legacyRepContract",
+          "type": "address"
+        },
+        {
+          "name": "_amountUsedToFreeze",
+          "type": "uint256"
+        },
+        {
+          "name": "_accountToSendFrozenRepTo",
+          "type": "address"
+        }
+      ],
+      "payable": false,
+      "type": "constructor"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "name": "holder",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "Migrated",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+
+      ],
+      "name": "Pause",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+
+      ],
+      "name": "Unpause",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "name": "owner",
+          "type": "address"
+        },
+        {
+          "indexed": true,
+          "name": "spender",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "name": "value",
+          "type": "uint256"
+        }
+      ],
+      "name": "Approval",
+      "type": "event"
+    },
+    {
+      "anonymous": false,
+      "inputs": [
+        {
+          "indexed": true,
+          "name": "from",
+          "type": "address"
+        },
+        {
+          "indexed": true,
+          "name": "to",
+          "type": "address"
+        },
+        {
+          "indexed": false,
+          "name": "value",
+          "type": "uint256"
+        }
+      ],
+      "name": "Transfer",
+      "type": "event"
+    }
+]

src/app/util/common/ABI/cTokensAbi.json

@@ -0,0 +1,90 @@
+{
+  "mintCTokenLogic": {
+    "constant": false,
+    "inputs": [
+        {
+            "name": "erc20",
+            "type": "address"
+        },
+        {
+            "name": "cErc20",
+            "type": "address"
+        },
+        {
+            "name": "tokenAmt",
+            "type": "uint256"
+        }
+    ],
+    "name": "mintCToken",
+    "outputs": [],
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "function"
+  },
+  "redeemCTokenLogic": {
+    "constant": false,
+    "inputs": [
+        {
+            "name": "erc20",
+            "type": "address"
+        },
+        {
+            "name": "cErc20",
+            "type": "address"
+        },
+        {
+            "name": "cTokenAmt",
+            "type": "uint256"
+        }
+    ],
+    "name": "redeemCToken",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  "borrowLogic" :   {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "erc20",
+        "type": "address"
+      },
+      {
+        "name": "cErc20",
+        "type": "address"
+      },
+      {
+        "name": "tokenAmt",
+        "type": "uint256"
+      }
+    ],
+    "name": "borrow",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  "repayTokenLogic": {
+    "constant": false,
+    "inputs": [
+        {
+            "name": "erc20",
+            "type": "address"
+        },
+        {
+            "name": "cErc20",
+            "type": "address"
+        },
+        {
+            "name": "tokenAmt",
+            "type": "uint256"
+        }
+    ],
+    "name": "repayToken",
+    "outputs": [],
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "function"
+}
+}

src/app/util/common/ABI/exitABI.json

@@ -0,0 +1,50 @@
+{
+  "withdrawETHLogic" : {
+    "constant": false,
+    "inputs": [
+
+    ],
+    "name": "transferETH",
+    "outputs": [
+
+    ],
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "function"
+},
+
+"withdrawTokenLogic" : {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "tokenAddr",
+        "type": "address"
+      }
+    ],
+    "name": "transferERC20",
+    "outputs": [
+
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+},
+
+"withdrawCDPLogic" : {
+    "constant": false,
+    "inputs": [
+        {
+            "name": "num",
+            "type": "uint256"
+        }
+    ],
+    "name": "transferCDP",
+    "outputs": [
+
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+}
+
+}

src/app/util/common/ABI/instaRegistry.json

@@ -0,0 +1,250 @@
+[{
+  "constant": true,
+  "inputs": [{
+    "name": "_logicAddress",
+    "type": "address"
+  }],
+  "name": "logic",
+  "outputs": [{
+    "name": "",
+    "type": "bool"
+  }],
+  "payable": false,
+  "stateMutability": "view",
+  "type": "function"
+}, {
+  "constant": false,
+  "inputs": [{
+    "name": "_logicAddress",
+    "type": "address"
+  }],
+  "name": "enableStaticLogic",
+  "outputs": [],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "function"
+}, {
+  "constant": true,
+  "inputs": [{
+    "name": "",
+    "type": "address"
+  }],
+  "name": "logicProxies",
+  "outputs": [{
+    "name": "",
+    "type": "bool"
+  }],
+  "payable": false,
+  "stateMutability": "view",
+  "type": "function"
+}, {
+  "constant": true,
+  "inputs": [{
+    "name": "",
+    "type": "address"
+  }],
+  "name": "logicProxiesStatic",
+  "outputs": [{
+    "name": "",
+    "type": "bool"
+  }],
+  "payable": false,
+  "stateMutability": "view",
+  "type": "function"
+}, {
+  "constant": false,
+  "inputs": [{
+    "name": "_currentOwner",
+    "type": "address"
+  }, {
+    "name": "_nextOwner",
+    "type": "address"
+  }],
+  "name": "record",
+  "outputs": [],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "function"
+}, {
+  "constant": false,
+  "inputs": [{
+    "name": "_logicAddress",
+    "type": "address"
+  }],
+  "name": "enableLogic",
+  "outputs": [],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "function"
+}, {
+  "constant": false,
+  "inputs": [],
+  "name": "build",
+  "outputs": [{
+    "name": "proxy",
+    "type": "address"
+  }],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "function"
+}, {
+  "constant": false,
+  "inputs": [{
+    "name": "_name",
+    "type": "string"
+  }, {
+    "name": "_userAddress",
+    "type": "address"
+  }],
+  "name": "setAddress",
+  "outputs": [],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "function"
+}, {
+  "constant": true,
+  "inputs": [{
+    "name": "_logicAddress",
+    "type": "address"
+  }],
+  "name": "logicStatic",
+  "outputs": [{
+    "name": "",
+    "type": "bool"
+  }],
+  "payable": false,
+  "stateMutability": "view",
+  "type": "function"
+}, {
+  "constant": true,
+  "inputs": [{
+    "name": "_name",
+    "type": "string"
+  }],
+  "name": "getAddress",
+  "outputs": [{
+    "name": "",
+    "type": "address"
+  }],
+  "payable": false,
+  "stateMutability": "view",
+  "type": "function"
+}, {
+  "constant": true,
+  "inputs": [{
+    "name": "",
+    "type": "address"
+  }],
+  "name": "proxies",
+  "outputs": [{
+    "name": "",
+    "type": "address"
+  }],
+  "payable": false,
+  "stateMutability": "view",
+  "type": "function"
+}, {
+  "constant": false,
+  "inputs": [{
+    "name": "_logicAddress",
+    "type": "address"
+  }],
+  "name": "disableLogic",
+  "outputs": [],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "function"
+}, {
+  "constant": false,
+  "inputs": [{
+    "name": "_owner",
+    "type": "address"
+  }],
+  "name": "build",
+  "outputs": [{
+    "name": "proxy",
+    "type": "address"
+  }],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "function"
+}, {
+  "inputs": [],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "constructor"
+}, {
+  "anonymous": false,
+  "inputs": [{
+    "indexed": true,
+    "name": "sender",
+    "type": "address"
+  }, {
+    "indexed": true,
+    "name": "owner",
+    "type": "address"
+  }, {
+    "indexed": false,
+    "name": "proxy",
+    "type": "address"
+  }],
+  "name": "Created",
+  "type": "event"
+}, {
+  "anonymous": false,
+  "inputs": [{
+    "indexed": true,
+    "name": "currentOwner",
+    "type": "address"
+  }, {
+    "indexed": true,
+    "name": "nextOwner",
+    "type": "address"
+  }, {
+    "indexed": false,
+    "name": "proxy",
+    "type": "address"
+  }],
+  "name": "LogRecord",
+  "type": "event"
+}, {
+  "anonymous": false,
+  "inputs": [{
+    "indexed": false,
+    "name": "logicAddress",
+    "type": "address"
+  }],
+  "name": "LogEnableStaticLogic",
+  "type": "event"
+}, {
+  "anonymous": false,
+  "inputs": [{
+    "indexed": false,
+    "name": "logicAddress",
+    "type": "address"
+  }],
+  "name": "LogEnableLogic",
+  "type": "event"
+}, {
+  "anonymous": false,
+  "inputs": [{
+    "indexed": false,
+    "name": "logicAddress",
+    "type": "address"
+  }],
+  "name": "LogDisableLogic",
+  "type": "event"
+}, {
+  "anonymous": false,
+  "inputs": [{
+    "indexed": false,
+    "name": "name",
+    "type": "string"
+  }, {
+    "indexed": false,
+    "name": "addr",
+    "type": "address"
+  }],
+  "name": "LogSetAddress",
+  "type": "event"
+}]

src/app/util/common/ABI/makerABI.json

@@ -0,0 +1,141 @@
+{
+  "cdpLockOpenLogic": {
+    "constant": false,
+    "inputs": [],
+    "name": "openAndLock",
+    "outputs": [{
+        "name": "cdpNum",
+        "type": "uint256"
+    }],
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "function"
+},
+
+"cdpLockLogic": {
+    "constant": false,
+    "inputs": [{
+        "name": "cdpNum",
+        "type": "uint256"
+    }],
+    "name": "lock",
+    "outputs": [],
+    "payable": true,
+    "stateMutability": "payable",
+    "type": "function"
+},
+
+ "cdpFreeLogic" : {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "cdpNum",
+        "type": "uint256"
+      },
+      {
+        "name": "jam",
+        "type": "uint256"
+      }
+    ],
+    "name": "free",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+},
+
+"cdpDrawLogic" : {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "cdpNum",
+        "type": "uint256"
+      },
+      {
+        "name": "_wad",
+        "type": "uint256"
+      }
+    ],
+    "name": "draw",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+},
+
+ "cdpDrawSendLogic"  :   {
+  "constant": false,
+  "inputs": [
+    {
+      "name": "cdpNum",
+      "type": "uint256"
+    },
+    {
+      "name": "_wad",
+      "type": "uint256"
+    },
+    {
+      "name": "to",
+      "type": "address"
+    }
+  ],
+  "name": "drawSend",
+  "outputs": [
+
+  ],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "function"
+},
+
+"cdpWipeLogic" : {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "cdpNum",
+        "type": "uint256"
+      },
+      {
+        "name": "_wad",
+        "type": "uint256"
+      }
+    ],
+    "name": "wipe",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+},
+
+ "cdpShutLogic": {
+  "constant": false,
+  "inputs": [{
+    "name": "cdpNum",
+    "type": "uint256"
+  }],
+  "name": "shut",
+  "outputs": [],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "function"
+},
+
+"cdpGiveLogic": {
+  "constant": false,
+  "inputs": [
+    {
+      "name": "cdpNum",
+      "type": "uint256"
+    },
+    {
+      "name": "nextOwner",
+      "type": "address"
+    }
+  ],
+  "name": "give",
+  "outputs": [],
+  "payable": false,
+  "stateMutability": "nonpayable",
+  "type": "function"
+}
+}

src/app/util/common/ABI/userProxy.json

@@ -0,0 +1,176 @@
+ [
+	{
+		"constant": false,
+		"inputs": [
+			{
+				"name": "nextOwner",
+				"type": "address"
+			}
+		],
+		"name": "setOwner",
+		"outputs": [],
+		"payable": false,
+		"stateMutability": "nonpayable",
+		"type": "function"
+	},
+	{
+		"constant": true,
+		"inputs": [
+			{
+				"name": "src",
+				"type": "address"
+			}
+		],
+		"name": "isAuth",
+		"outputs": [
+			{
+				"name": "",
+				"type": "bool"
+			}
+		],
+		"payable": false,
+		"stateMutability": "view",
+		"type": "function"
+	},
+	{
+		"constant": true,
+		"inputs": [],
+		"name": "registry",
+		"outputs": [
+			{
+				"name": "",
+				"type": "address"
+			}
+		],
+		"payable": false,
+		"stateMutability": "view",
+		"type": "function"
+	},
+	{
+		"constant": true,
+		"inputs": [],
+		"name": "owner",
+		"outputs": [
+			{
+				"name": "",
+				"type": "address"
+			}
+		],
+		"payable": false,
+		"stateMutability": "view",
+		"type": "function"
+	},
+	{
+		"constant": false,
+		"inputs": [
+			{
+				"name": "_target",
+				"type": "address"
+			},
+			{
+				"name": "_data",
+				"type": "bytes"
+			},
+			{
+				"name": "_src",
+				"type": "uint256"
+			},
+			{
+				"name": "_session",
+				"type": "uint256"
+			}
+		],
+		"name": "execute",
+		"outputs": [
+			{
+				"name": "response",
+				"type": "bytes"
+			}
+		],
+		"payable": true,
+		"stateMutability": "payable",
+		"type": "function"
+	},
+	{
+		"inputs": [],
+		"payable": false,
+		"stateMutability": "nonpayable",
+		"type": "constructor"
+	},
+	{
+		"payable": true,
+		"stateMutability": "payable",
+		"type": "fallback"
+	},
+	{
+		"anonymous": false,
+		"inputs": [
+			{
+				"indexed": false,
+				"name": "target",
+				"type": "address"
+			},
+			{
+				"indexed": false,
+				"name": "srcNum",
+				"type": "uint256"
+			},
+			{
+				"indexed": false,
+				"name": "sessionNum",
+				"type": "uint256"
+			}
+		],
+		"name": "LogExecute",
+		"type": "event"
+	},
+	{
+		"anonymous": false,
+		"inputs": [
+			{
+				"indexed": true,
+				"name": "sig",
+				"type": "bytes4"
+			},
+			{
+				"indexed": true,
+				"name": "guy",
+				"type": "address"
+			},
+			{
+				"indexed": true,
+				"name": "foo",
+				"type": "bytes32"
+			},
+			{
+				"indexed": false,
+				"name": "bar",
+				"type": "bytes32"
+			},
+			{
+				"indexed": false,
+				"name": "wad",
+				"type": "uint256"
+			},
+			{
+				"indexed": false,
+				"name": "fax",
+				"type": "bytes"
+			}
+		],
+		"name": "LogNote",
+		"type": "event"
+	},
+	{
+		"anonymous": false,
+		"inputs": [
+			{
+				"indexed": true,
+				"name": "owner",
+				"type": "address"
+			}
+		],
+		"name": "LogSetOwner",
+		"type": "event"
+	}
+]

src/app/util/common/tokens.json

@@ -0,0 +1,110 @@
+[
+    {
+      "symbol": "ETH",
+      "name": "Ethereum",
+      "address": "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+      "decimals": 18,
+      "price": 0,
+      "uniPool": false,
+      "compound": {
+        "caddress": "0x4Ddc2D193948926D02f9B1fE9e1daa0718270ED5",
+        "factor": 0.75
+      }
+    },
+    {
+      "symbol": "DAI",
+      "name": "DAI Stable",
+      "address": "0x89d24a6b4ccb1b6faa2625fe562bdd9a23260359",
+      "decimals": 18,
+      "price": 0,
+      "uniPool": true,
+      "compound": {
+        "caddress": "0xF5DCe57282A584D2746FaF1593d3121Fcac444dC",
+        "factor": 0.75
+      }
+    },
+    {
+      "symbol": "USDC",
+      "name": "USD Coin",
+      "address": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+      "decimals": 6,
+      "price": 0,
+      "uniPool": true,
+      "compound": {
+        "caddress": "0x39AA39c021dfbaE8faC545936693aC917d5E7563",
+        "factor": 0.75
+      }
+    },
+    {
+      "symbol": "MKR",
+      "name": "MakerDAO",
+      "address": "0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2",
+      "decimals": 18,
+      "price": 0,
+      "uniPool": true
+    },
+    {
+      "symbol": "ZRX",
+      "name": "0x Protocol",
+      "address": "0xe41d2489571d322189246dafa5ebde1f4699f498",
+      "decimals": 18,
+      "price": 0,
+      "uniPool": true,
+      "compound": {
+        "caddress": "0xB3319f5D18Bc0D84dD1b4825Dcde5d5f7266d407",
+        "factor": 0.6
+      }
+    },
+    {
+      "symbol": "REP",
+      "name": "Augur",
+      "address": "0x1985365e9f78359a9b6ad760e32412f4a445e862",
+      "decimals": 18,
+      "price": 0,
+      "uniPool": true,
+      "compound": {
+        "caddress": "0x158079Ee67Fce2f58472A96584A73C7Ab9AC95c1",
+        "factor": 0.5
+      }
+    },
+    {
+      "symbol": "TUSD",
+      "name": "TrueUSD",
+      "address": "0x8dd5fbCe2F6a956C3022bA3663759011Dd51e73E",
+      "decimals": 18,
+      "price": 0,
+      "uniPool": true
+    },
+    {
+      "symbol": "BAT",
+      "name": "Basic Att.",
+      "address": "0x0d8775f648430679a709e98d2b0cb6250d2887ef",
+      "decimals": 18,
+      "price": 0,
+      "uniPool": true,
+      "compound": {
+        "caddress": "0x6C8c6b02E7b2BE14d4fA6022Dfd6d75921D90E4E",
+        "factor": 0.6
+      }
+    },
+    {
+      "symbol": "KNC",
+      "name": "Kyber Network",
+      "address": "0xdd974d5c2e2928dea5f71b9825b8b646686bd200",
+      "decimals": 18,
+      "price": 0,
+      "uniPool": true
+    },
+    {
+      "symbol": "WBTC",
+      "name": "Wrapped BTC",
+      "address": "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599",
+      "decimals": 8,
+      "price": 0,
+      "uniPool": true,
+      "compound": {
+        "caddress": "0xC11b1268C1A384e55C48c2391d8d480264A3A7F4",
+        "factor": 0.5
+      }
+    }
+]

src/app/util/common/variable.json

@@ -0,0 +1,3 @@
+{
+  "instaRegistry":"0x498b3bfabe9f73db90d252bcd4fa9548cd0fd981"
+}

src/app/util/util.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {Web3Service} from './web3.service';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  providers: [
+    Web3Service
+  ],
+  declarations: []
+})
+export class UtilModule {
+}

src/app/util/web3.service.spec.ts

@@ -0,0 +1,40 @@
+import {TestBed, inject} from '@angular/core/testing';
+const Web3 = require('web3');
+
+import {Web3Service} from './web3.service';
+
+import metacoin_artifacts from '../../../build/contracts/MetaCoin.json';
+
+declare let window: any;
+
+describe('Web3Service', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Web3Service]
+    });
+  });
+
+  it('should be created', inject([Web3Service], (service: Web3Service) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should inject a default web3 on a contract', inject([Web3Service], (service: Web3Service) => {
+    service.bootstrapWeb3();
+
+    return service.artifactsToContract(metacoin_artifacts).then((abstraction) => {
+      expect(abstraction.currentProvider.host).toBe('http://localhost:8545');
+    });
+  }));
+
+  it('should inject a the window web3 on a contract', inject([Web3Service], (service: Web3Service) => {
+    window.web3 = {
+      currentProvider: new Web3.providers.HttpProvider('http://localhost:1337')
+    };
+
+    service.bootstrapWeb3();
+
+    return service.artifactsToContract(metacoin_artifacts).then((abstraction) => {
+      expect(abstraction.currentProvider.host).toBe('http://localhost:1337');
+    });
+  }));
+});

src/app/util/web3.service.ts

@@ -0,0 +1,216 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+declare let require: any;
+const Web3 = require('web3');
+
+const instaRegistryABI = require('./common/ABI/instaRegistry.json')
+const userProxyABI = require('./common/ABI/userProxy.json')
+const ERC20ABI = require('./common/ABI/ERC20ABI.json')
+
+const variable = require('./common/variable.json')
+
+
+declare let window: any;
+
+@Injectable()
+export class Web3Service {
+  private web3: any;
+  public accounts: string;
+  public contractAccount: string[];
+
+  public ready = false;
+  private contractInstance: any;
+  public accountsObservable = new Subject<string[]>();
+  public contractAccountObservable = new Subject<string>();
+  public tnxHashObservable = new Subject<string>();
+  public tnxStatusObservable = new Subject<boolean>();
+  private tnxInterval;
+
+
+  private contractAddress = {
+    registry: "0x498b3BfaBE9F73db90D252bCD4Fa9548Cd0Fd981",
+    bridge: "0x37aCfEf331e6063C8507C2A69c97B4f78c770A5A",
+    splitswap: "0xa4bca645f9cb9e6f9ad8c56d90a65b07c2f4e1dd",
+    logics: {
+      InstaMaker: "0x8e18152D3C1B1dD9F6573e2aDb07744390cE5035",
+      InstaTrade: "0x750F4cbdEb98049c3Dc3492b729b66f0fA56bcBf",
+      InstaUniswapPool: "0x84055ac6916A2eB49F8b492c55a77248cde50A07",
+      InstaCompound: "0x956eBA6cc01941b50C36cf6c5c0480a14f0D669C",
+      InstaSave: "0x94F5b439993bC7069C77a690681271cdc599FE1a",
+      InstaBridge: "0xd8e0090dfA23D48cF343016758bb06f8c1567058",
+      InstaCompSave: "0xCEfd72398C9BABBD38537e72F45EdAc3DF46CA25",
+      Exit: "0xEa877248310E167B90dBA9922026b613Ce2C5cA4"
+    }
+  }
+
+  constructor() {
+    window.addEventListener('load', (event) => {
+      this.bootstrapWeb3();
+    });
+
+    // refreshing Stats
+    // setInterval(() => {
+    //   console.log("refreshing")
+    //   this.reload()
+    // }, 5*60*1000);
+  }
+
+  public async bootstrapWeb3() {
+    if (window.ethereum) { // Modern dapp browsers...
+      window.web3 = new Web3(window.ethereum);
+      try {
+        await window.ethereum.enable(); // Request account access if needed
+        this.web3 = new Web3(window.web3.currentProvider);
+      } catch (error) {
+        console.log('User denied permission / !userAccount / !userProxy');
+      }
+    }
+    // Checking if Web3 has been injected by the browser (Mist/MetaMask)
+    else if (typeof window.web3 !== 'undefined') {
+      // Use Mist/MetaMask's provider
+      this.web3 = new Web3(window.web3.currentProvider);
+    } else {
+      console.log('No web3? You should consider trying MetaMask!');
+
+      // Hack to provide backwards compatibility for Truffle, which uses web3js 0.20.x
+      // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
+    }
+
+    setInterval(() => this.refreshAccounts(), 100);
+  }
+
+
+
+
+
+  private refreshAccounts() {
+    this.web3.eth.getAccounts(async (err, accs) => {
+      if (err) {
+        console.log(err)
+        console.warn('There was an error fetching your accounts.');
+        return;
+      }
+
+      // Get the initial account balance so it can be displayed.
+      if (accs.length === 0) {
+        console.warn('Couldn\'t get any accounts! Make sure your Ethereum client is configured correctly.');
+        return;
+      }
+      if (!this.accounts || this.accounts.length !== accs.length || this.accounts[0] !== accs[0]) {
+        console.log('Observed new accounts');
+
+        this.accountsObservable.next(accs);
+        this.accounts = accs;
+        // await this.connectToWallet(accs[0])
+      }
+
+      this.ready = true;
+    });
+  }
+
+  public reload() {
+    if (this.accounts && this.accounts.length > 0) {
+      let address = [this.accounts[0]]
+      console.log(address)
+      this.accountsObservable.next(address);
+    }
+
+  }
+
+  public async connectToWallet(address) {
+    let web3 = this.web3;
+
+    this.contractInstance = new web3.eth.Contract(instaRegistryABI, variable.instaRegistry)
+
+    this.contractInstance.options.address = variable.instaRegistry
+    await this.contractInstance.methods.proxies(address).call().then(data => {
+      this.contractAccountObservable.next(data)
+      this.contractAccount = data
+    })
+    return this.contractAccount
+  }
+
+
+  public getBlock() {
+    this.web3.eth.getBlockNumber((err, accs) => { console.log(accs) })
+  }
+
+  // create call data for function
+  getCallData(abi, args) {
+    let callData = this.web3.eth.abi.encodeFunctionCall(abi, args)
+    return callData
+  }
+
+  async executeFunction(callData, data) {
+    let logicProxyAddr = this.contractAddress.logics[data.logicProxyName]
+    let userAccount = this.accounts[0]
+    let userProxy = this.contractAccount
+    let value = data.value
+    let sessionID = String(new Date().getTime());
+
+    console.log("User Proxy: ", userProxy);
+    console.log("User Account: ", userAccount);
+    console.log("Logic Proxy: ", logicProxyAddr);
+    console.log("ETH value: ", value);
+
+    let UserProxyContract = new this.web3.eth.Contract(userProxyABI, userProxy);
+    UserProxyContract.methods.execute(logicProxyAddr, callData, "3", sessionID).send({
+      from: userAccount,
+      value: value
+    },
+      (err, result) => {
+        if (err) {
+          console.log(err);
+          return
+        }
+        this.tnxHashObservable.next(result)
+        // this.tnxComfirmation(result)
+        console.log("tnx Hash: ", result);
+      }
+    )
+  }
+
+  //Sets tx has an observable
+  async tnxComfirmation(txHash) {
+    this.tnxHashObservable.next(txHash)
+  }
+
+  // get Transaction Receipt
+  async getTX(txHash) {
+    let data
+    await this.web3.eth.getTransactionReceipt(txHash).then((result) => {
+      data = result
+    })
+    return data
+  }
+
+  // get user allowance
+  async getAllowance(_tokenAddr) {
+    let userAccount = this.accounts[0]
+    let userProxy = this.contractAccount
+    let allowedAmt = 0
+    var TokenContract = new this.web3.eth.Contract(ERC20ABI, _tokenAddr);
+    await TokenContract.methods.allowance(userAccount, userProxy).call().then(data => {
+      allowedAmt = Number(data._hex)
+    })
+    console.log("Allowed Amount:",allowedAmt)
+    return allowedAmt
+  }
+
+  // set allowance for userProxy
+  async setAllowance(_tokenAddr) {
+    let userAccount = this.accounts[0]
+    let userProxy = this.contractAccount
+    let allowanceAmt = 1000000000000; // 1 trillion
+    allowanceAmt = this.web3.utils.toWei(allowanceAmt.toString(), 'ether'); // 18 decimal'ed
+    let TokenContract = new this.web3.eth.Contract(ERC20ABI, _tokenAddr);
+    TokenContract.methods.approve(userProxy, allowanceAmt.toString()).send({
+      from: userAccount,
+      value: 0
+    }).then(data => {
+      console.log(data)
+    })
+  }
+
+}

src/assets/common/ABI/instaRegistry.json

@@ -0,0 +1 @@
+[{"constant":true,"inputs":[{"name":"_logicAddress","type":"address"}],"name":"logic","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_logicAddress","type":"address"}],"name":"enableStaticLogic","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"logicProxies","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"logicProxiesStatic","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_currentOwner","type":"address"},{"name":"_nextOwner","type":"address"}],"name":"record","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_logicAddress","type":"address"}],"name":"enableLogic","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"build","outputs":[{"name":"proxy","type":"address"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"},{"name":"_userAddress","type":"address"}],"name":"setAddress","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_logicAddress","type":"address"}],"name":"logicStatic","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"string"}],"name":"getAddress","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"proxies","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_logicAddress","type":"address"}],"name":"disableLogic","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_owner","type":"address"}],"name":"build","outputs":[{"name":"proxy","type":"address"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"sender","type":"address"},{"indexed":true,"name":"owner","type":"address"},{"indexed":false,"name":"proxy","type":"address"}],"name":"Created","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"currentOwner","type":"address"},{"indexed":true,"name":"nextOwner","type":"address"},{"indexed":false,"name":"proxy","type":"address"}],"name":"LogRecord","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"logicAddress","type":"address"}],"name":"LogEnableStaticLogic","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"logicAddress","type":"address"}],"name":"LogEnableLogic","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"logicAddress","type":"address"}],"name":"LogDisableLogic","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"name","type":"string"},{"indexed":false,"name":"addr","type":"address"}],"name":"LogSetAddress","type":"event"}]

src/assets/common/variable.json

@@ -0,0 +1,3 @@
+{
+  "instaRegistryABI":"0x498b3bfabe9f73db90d252bcd4fa9548cd0fd981"
+}

src/assets/img/icons/tokens/bat.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
+    <title>bat</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#000000" offset="0%"></stop>
+            <stop stop-color="#000000" stop-opacity="0" offset="97.8336256%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Wallet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop" transform="translate(-413.000000, -320.000000)">
+            <g id="bat" transform="translate(413.000000, 320.000000)">
+                <g id="BAT">
+                    <path d="M27.9119463,13.9746746 C27.9119463,21.6682667 21.67519,27.9050229 13.981598,27.9050229 C6.28814527,27.9050229 0.0512497512,21.6682667 0.0512497512,13.9746746 C0.0512497512,6.28108259 6.28814527,0.0443263682 13.981598,0.0443263682 C21.67519,0.0443263682 27.9119463,6.28108259 27.9119463,13.9746746" id="Fill-256" fill="#672893"></path>
+                    <path d="M26.6004736,13.9753572 C26.6004736,16.7920736 25.6768915,19.3942627 24.1152995,21.4949592 C21.816792,24.5888896 18.1322149,26.5934667 13.9809711,26.5934667 C13.175797,26.5934667 12.3887323,26.5182428 11.6253493,26.3733672 C5.78156816,25.2700836 1.36286169,20.1381433 1.36286169,13.9753572 C1.36286169,7.00600398 7.01161791,1.35585473 13.9809711,1.35585473 C20.9503244,1.35585473 26.6004736,7.00600398 26.6004736,13.9753572" id="Fill-258" fill="#FFFFFF"></path>
+                    <polygon id="Fill-260" fill="#FF4F00" points="14.0096259 11.1185493 10.5476557 17.0367184 10.6355562 17.0367184 5.41822289 19.9914846 5.3626408 19.9914846 14.0096259 5.20873831"></polygon>
+                    <polygon id="Fill-262" fill="#672893" points="22.6561652 19.9915264 5.41819502 19.9915264 10.6356677 17.0367602 17.4449612 17.0367602 22.6531005 19.9865114"></polygon>
+                    <polygon id="Fill-264" fill="#A01A63" points="17.4450169 17.0367602 17.4710667 17.0367602 14.0096537 11.118591 14.0096537 5.2087801 22.6531562 19.9865114"></polygon>
+                    <polygon id="Fill-266" fill="#FFFFFF" points="14.0096259 11.1185493 10.547795 17.0367184 17.4714567 17.0367184"></polygon>
+                    <path d="M5.41793035,19.992 L11.6252935,26.3733532 C12.3888159,26.5182289 13.1758806,26.5934527 13.9809154,26.5934527 C18.1322985,26.5934527 21.8167363,24.5888756 24.1152438,21.4950846 L22.6525572,19.992 L5.41793035,19.992 Z" id="Fill-269" fill="url(#linearGradient-1)" opacity="0.100000001"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/bnb.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="201px" height="200px" viewBox="0 0 201 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>BNB</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-414.000000, -4631.000000)">
+            <g id="BNB" transform="translate(414.000000, 4630.000000)">
+                <path d="M200.9573,100.9891 C200.9573,156.2181 156.1863,200.9891 100.9573,200.9891 C45.7283,200.9891 0.9573,156.2181 0.9573,100.9891 C0.9573,45.7601 45.7283,0.9891 100.9573,0.9891 C156.1863,0.9891 200.9573,45.7601 200.9573,100.9891" id="Fill-158" fill="#212121"></path>
+                <polygon id="Fill-160" fill="#F4BB0B" points="100.9573 120.6131 81.3323 100.9891 100.9573 81.3641 120.5823 100.9891"></polygon>
+                <polygon id="Fill-162" fill="#F4BB0B" points="145.5549 100.9891 145.4719 101.0711 163.6739 119.2721 181.9569 100.9891 163.5479 82.5791 145.3459 100.7801"></polygon>
+                <polygon id="Fill-164" fill="#F4BB0B" points="69.4138 87.9344 100.9568 56.3914 132.9638 88.3984 151.1648 70.1974 100.9568 19.9894 51.2128 69.7334"></polygon>
+                <polygon id="Fill-166" fill="#F4BB0B" points="133.0901 113.4539 100.9571 145.5869 69.1091 113.7379 50.9081 131.9389 100.9571 181.9889 151.2911 131.6549"></polygon>
+                <polygon id="Fill-168" fill="#F4BB0B" points="56.3596 100.9891 57.0316 100.3171 38.8306 82.1151 19.9576 100.9891 38.5256 119.5571 56.7266 101.3561"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/cdai.svg

@@ -0,0 +1,29 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<g filter="url(#filter0_d)">
+<circle cx="24" cy="24" r="24" transform="rotate(-5.6583 24 24)" fill="white"/>
+</g>
+<path d="M39.2362 42.5434C35.5687 45.5569 31.0899 47.4151 26.3663 47.8831C20.0321 48.5107 13.7081 46.5963 8.78534 42.5611C3.86264 38.526 0.744517 32.7005 0.116937 26.3663C-0.351071 21.6427 0.592148 16.8864 2.82732 12.6988C5.06249 8.51128 8.48922 5.08056 12.6742 2.84053C16.8591 0.60049 21.6144 -0.348256 26.3385 0.114261C31.0627 0.576778 35.5436 2.42979 39.2147 5.43896L34.3736 11.3448C31.8706 9.29305 28.8155 8.02964 25.5945 7.71428C22.3734 7.39893 19.1312 8.0458 16.2778 9.5731C13.4245 11.1004 11.0881 13.4395 9.56408 16.2947C8.0401 19.1498 7.397 22.3928 7.71609 25.6134C8.14399 29.9322 10.27 33.9041 13.6264 36.6553C16.9828 39.4066 21.2946 40.7118 25.6134 40.284C28.834 39.9649 31.8877 38.6979 34.3883 36.6433L39.2362 42.5434Z" fill="url(#paint0_linear)"/>
+<path d="M24 41C33.3888 41 41 33.3888 41 24C41 14.6112 33.3888 7 24 7C14.6112 7 7 14.6112 7 24C7 33.3888 14.6112 41 24 41Z" fill="white"/>
+<path opacity="0.8" d="M23.7356 33L14.6212 23.6753L23.6655 26.9705L32.7098 23.6753L23.7356 33Z" fill="#323232"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6213 23.6752L23.6656 14.6309L32.7099 23.6752L23.6656 26.9704L14.6213 23.6752ZM17.2153 23.7455H21.1415L23.7356 21.1514L26.3297 23.7455H30.1858L23.7356 17.2953L17.2153 23.7455Z" fill="#323232"/>
+</g>
+<defs>
+<filter id="filter0_d" x="-48.2494" y="-44.2493" width="144.499" height="144.499" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="23"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="18" y1="2.5" x2="25.5258" y2="44.2248" gradientUnits="userSpaceOnUse">
+<stop stop-color="#27D3A2"/>
+<stop offset="1" stop-color="#9388FD"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="48" height="48" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/img/icons/tokens/dai.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.1 (51147) - http://www.bohemiancoding.com/sketch -->
+    <title>dai</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="13.9672627" cy="13.9672627" r="13.5"></circle>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="dai">
+            <circle id="Oval" stroke="#FEAE16" cx="13.9672627" cy="13.9672627" r="13"></circle>
+            <g id="Oval-Copy">
+                <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                <circle stroke="#FEAE16" stroke-width="1" cx="13.9672627" cy="13.9672627" r="13"></circle>
+            </g>
+            <g id="DAI" transform="translate(4.967263, 4.967263)" fill-rule="nonzero">
+                <rect id="Rectangle-path" fill="#FDC526" transform="translate(9.047575, 9.048913) rotate(-45.000000) translate(-9.047575, -9.048913) " x="2.78670592" y="2.78804373" width="12.5217392" height="12.5217392"></rect>
+                <polygon id="Shape" fill="#FEAE16" points="9.05086953 0.195652174 0.195652174 9.05086953 9.10760868 12.1813043 17.9041305 9.05086953"></polygon>
+                <polygon id="Shape" fill="#231F20" opacity="0.2" points="17.9608695 9.05086953 9.10760868 17.9041305 9.10760868 0.195652174"></polygon>
+                <polygon id="Shape" fill="#FEFEFE" points="9.10956519 2.30478261 3.23804348 8.46391305 7.2626087 8.46391305 9.10760868 6.70304348 11.0563043 8.46391305 15.1728261 8.46391305"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/dgx.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>DGX-S</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="IOS?-(for-Mike-Le)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-3" transform="translate(-497.000000, -295.000000)">
+            <g id="DGX-S" transform="translate(497.000000, 295.000000)">
+                <g id="DGX">
+                    <circle id="Oval" fill="#131E33" fill-rule="nonzero" cx="13.9921477" cy="13.9921477" r="13.9921477"></circle>
+                    <path d="M13.9921477,27.185855 C6.70546444,27.185855 0.798440492,21.2788311 0.798440492,13.9921477 C0.798440492,6.70546444 6.70546444,0.798440492 13.9921477,0.798440492 C21.2788311,0.798440492 27.185855,6.70546444 27.185855,13.9921477 C27.185855,21.2788311 21.2788311,27.185855 13.9921477,27.185855 Z M13.9921477,26.936881 C21.1413265,26.936881 26.936881,21.1413265 26.936881,13.9921477 C26.936881,6.84296898 21.1413265,1.0474145 13.9921477,1.0474145 C6.84296898,1.0474145 1.0474145,6.84296898 1.0474145,13.9921477 C1.0474145,21.1413265 6.84296898,26.936881 13.9921477,26.936881 Z" id="Oval" fill="#BF9E5B" fill-rule="nonzero"></path>
+                    <path d="M13.9921477,26.6894391 C6.97962735,26.6894391 1.29485636,21.0046681 1.29485636,13.9921477 C1.29485636,6.97962735 6.97962735,1.29485636 13.9921477,1.29485636 C21.0046681,1.29485636 26.6894391,6.97962735 26.6894391,13.9921477 C26.6894391,21.0046681 21.0046681,26.6894391 13.9921477,26.6894391 Z M13.9921477,26.5936799 C20.9517818,26.5936799 26.5936799,20.9517818 26.5936799,13.9921477 C26.5936799,7.03251371 20.9517818,1.3906156 13.9921477,1.3906156 C7.03251371,1.3906156 1.3906156,7.03251371 1.3906156,13.9921477 C1.3906156,20.9517818 7.03251371,26.5936799 13.9921477,26.5936799 Z" id="Oval" fill="#BF9E5B" fill-rule="nonzero"></path>
+                    <circle id="Oval" fill="#BF9E5B" fill-rule="nonzero" cx="13.9921477" cy="13.9921477" r="8.44213406"></circle>
+                    <polygon id="Shape" fill="#131E33" fill-rule="nonzero" points="13.9923393 7.88366621 7.88366621 13.9923393 10.1048974 16.2135705 13.9921477 12.3263201 17.8793981 16.2135705 20.1008208 13.9921477"></polygon>
+                    <rect id="Rectangle-path" fill="#BF9E5B" fill-rule="nonzero" transform="translate(13.992083, 16.768712) rotate(-45.000000) translate(-13.992083, -16.768712) " x="11.7892377" y="14.565867" width="4.40569083" height="4.40569083"></rect>
+                    <path d="M13.9921477,13.8701505 L16.8907798,16.7687825 L13.9921477,19.6674145 L11.0935157,16.7687825 L13.9921477,13.8701505 Z M13.9921477,13.4367442 L10.6597264,16.7691655 L13.9921477,20.1015869 L17.3245691,16.7691655 L13.9921477,13.4367442 Z" id="Shape" fill="#121E33" fill-rule="nonzero"></path>
+                    <path d="M13.9921477,25.2969083 C7.74870086,25.2969083 2.68738714,20.2355946 2.68738714,13.9921477 C2.68738714,7.74870086 7.74870086,2.68738714 13.9921477,2.68738714 C20.2355946,2.68738714 25.2969083,7.74870086 25.2969083,13.9921477 C25.2969083,20.2355946 20.2355946,25.2969083 13.9921477,25.2969083 Z M13.9921477,25.1436936 C20.1509764,25.1436936 25.1436936,20.1509764 25.1436936,13.9921477 C25.1436936,7.83331905 20.1509764,2.84060192 13.9921477,2.84060192 C7.83331905,2.84060192 2.84060192,7.83331905 2.84060192,13.9921477 C2.84060192,20.1509764 7.83331905,25.1436936 13.9921477,25.1436936 Z" id="Oval" fill="#BF9E5B" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/enj.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>enjin</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <radialGradient cx="19.7348992%" cy="16.048556%" fx="19.7348992%" fy="16.048556%" r="55.5423921%" id="radialGradient-1">
+            <stop stop-color="#00FAFF" offset="0%"></stop>
+            <stop stop-color="#00FAFF" offset="39%"></stop>
+            <stop stop-color="#C864E9" offset="85%"></stop>
+        </radialGradient>
+        <radialGradient cx="49.752893%" cy="45.9019054%" fx="49.752893%" fy="45.9019054%" r="57.8720653%" gradientTransform="translate(0.497529,0.459019),scale(0.788957,1.000000),translate(-0.497529,-0.459019)" id="radialGradient-2">
+            <stop stop-color="#00FFFF" offset="50%"></stop>
+            <stop stop-color="#00F4FF" stop-opacity="0" offset="100%"></stop>
+        </radialGradient>
+        <linearGradient x1="62.222603%" y1="55.5761305%" x2="116.048325%" y2="80.1326086%" id="linearGradient-3">
+            <stop stop-color="#9634D6" offset="0%"></stop>
+            <stop stop-color="#BF43DD" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="64.212147%" y1="51.1065093%" x2="99.694151%" y2="76.4327237%" id="linearGradient-4">
+            <stop stop-color="#9634D6" offset="0%"></stop>
+            <stop stop-color="#BF43DD" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="3.9491749%" y1="24.5335875%" x2="87.7109861%" y2="95.7706488%" id="linearGradient-5">
+            <stop stop-color="#BF43DD" offset="0%"></stop>
+            <stop stop-color="#8669E1" offset="50%"></stop>
+            <stop stop-color="#00FFF3" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="17.0099534%" y1="49.752128%" x2="91.7611185%" y2="74.3709662%" id="linearGradient-6">
+            <stop stop-color="#BF43DD" offset="0%"></stop>
+            <stop stop-color="#8669E1" offset="51%"></stop>
+            <stop stop-color="#04A7F1" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="13.960507%" y1="5.6309045%" x2="79.0664252%" y2="124.066972%" id="linearGradient-7">
+            <stop stop-color="#BF43DD" offset="0%"></stop>
+            <stop stop-color="#8669E1" offset="51%"></stop>
+            <stop stop-color="#04A7F1" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="82.0604342%" y1="79.4563544%" x2="57.4810034%" y2="50.6899206%" id="linearGradient-8">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#00FFF3" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0.259571309%" y1="97.9571929%" x2="62.6036012%" y2="16.3481953%" id="linearGradient-9">
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="83%"></stop>
+        </linearGradient>
+        <linearGradient x1="55.7137792%" y1="65.7295022%" x2="46.906014%" y2="32.9454722%" id="linearGradient-10">
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="enjin" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g>
+            <rect id="Rectangle-2" x="0" y="0" width="28" height="28"></rect>
+            <g id="Group-2" transform="translate(1.500000, 1.000000)" fill-rule="nonzero">
+                <circle id="Oval" fill="url(#radialGradient-1)" cx="13.0086572" cy="13.0086572" r="13.0086572"></circle>
+                <path d="M21.9267861,9.85443416 C23.5251163,11.7752894 24.6517203,14.0789756 24.6517203,16.697146 C24.6517203,22.4597117 19.6740249,27.1291768 13.533542,27.1291768 C7.39305917,27.1291768 2.41625722,22.4588183 2.41625722,16.697146 C2.41625722,10.9354736 5.80723681,11.6859473 11.9490598,11.6859473 C15.2993887,11.6859473 20.9583176,8.69209337 21.9267861,9.85443416 Z" id="Shape" fill="url(#radialGradient-2)"></path>
+                <path d="M4.26921248,15.9721348 L2.93265459,13.8064822 C4.37776313,18.8132137 6.38304667,20.1131413 8.14621311,21.284863 C6.03818615,19.1125098 4.26921248,15.9721348 4.26921248,15.9721348 Z" id="Shape" fill="url(#linearGradient-3)"></path>
+                <path d="M22.2426104,9.66324205 L22.2301025,9.49527889 L20.1019736,9.49527889 L22.2461841,7.66376575 L22.2426104,7.57442364 C22.1532683,5.45701576 21.1785459,4.09276182 21.149063,4.03558287 L21.098138,3.93775327 L9.59042824,3.93775327 C8.50313482,3.93775327 7.00933483,4.19639866 5.45969602,5.9300822 C4.57967629,6.91284536 2.96481775,9.00613087 2.8142763,11.4219414 C2.6994717,12.8514151 2.88709012,14.1218598 3.42760985,15.3677354 C3.68339053,15.9657064 3.98944244,16.5408987 4.342473,17.0871242 C5.43423352,19.0463966 6.62427036,20.4097571 7.87952693,21.1405755 C8.94269798,21.7588229 9.88436376,21.8423578 10.664767,21.8423578 L17.1867407,21.8423578 L17.2260512,21.8213624 C17.2474933,21.8101946 19.3809828,20.6943117 21.308092,19.5243769 L21.3639308,19.4904269 L21.3853729,19.4292275 C21.3916269,19.4109124 21.3987742,19.3934907 21.4063683,19.3756223 C21.4193229,19.3425657 21.4345111,19.3054887 21.4479124,19.2617111 C21.6851157,18.5822644 21.8830084,17.1219677 21.9794979,16.3134216 C22.017915,16.0190394 22.0402505,15.8256137 22.0402505,15.82204 L22.0639262,15.6196802 L22.0558854,15.6196802 L22.0724137,15.4561841 L19.79419,15.4561841 L22.2345696,13.6081427 L22.2412703,13.5272881 C22.3931518,11.7337453 22.2461841,9.68379074 22.2426104,9.66324205 Z" id="Shape" fill="url(#linearGradient-4)"></path>
+                <path d="M12.6557558,17.7790788 C12.6557558,17.7790788 10.4976973,17.9850124 4.14189998,16.3250361 C6.73550128,21.3849262 9.1642664,21.6596532 10.9725506,21.6596532 L17.1416229,21.6596532 C17.1416229,21.6596532 19.2688584,20.5486841 21.2133894,19.3680282 L12.6557558,17.7790788 Z" id="Shape" fill="#FFFFFF"></path>
+                <path d="M10.9725506,21.4832025 C10.1934874,21.4832025 9.10038679,21.4899032 8.01443351,20.7823137 C6.12708154,19.5520729 5.50481378,18.5831578 4.42556116,16.5506249 C9.27281705,17.7960538 11.5970519,17.933194 12.3801355,17.933194 C12.5226361,17.933194 12.6097447,17.9282802 12.6481618,17.9255999 L21.019517,19.2822598 C19.3037019,20.306567 17.2801032,21.3608038 17.0469203,21.4832025 L10.9725506,21.4832025 Z" id="Shape" fill="url(#linearGradient-5)"></path>
+                <path d="M8.65367627,15.8014914 C8.65367627,15.8014914 7.61150062,14.5953729 7.24832496,13.6760427 L19.0388025,15.8014914 L22.0616926,13.5125466 C22.058119,11.6363624 22.0496315,9.84013942 22.0496315,9.84013942 L7.24832496,9.84013942 C7.24832496,9.84013942 7.77142298,8.34142561 8.71398219,7.74462035 L19.5105288,9.76062495 L22.0567788,7.5811243 C21.9540354,5.53161642 20.9721657,4.28172037 20.9721657,4.28172037 L9.57881376,4.28172037 C8.58443614,4.28172037 6.55190325,4.50150195 5.02236642,6.21374339 C3.49282959,7.92598482 2.12544867,11.7395526 3.59423287,15.2944749 C5.08490589,18.9038959 7.01960917,19.3680282 8.11404995,19.3680282 L21.2133894,19.3680282 C21.2321512,19.3153163 21.2580604,19.2666249 21.2745887,19.2045321 C21.5899663,18.1386808 21.8597795,15.8014914 21.8597795,15.8014914 L8.65367627,15.8014914 Z" id="Shape" fill="#FFFFFF"></path>
+                <path d="M11.8047723,5.4882855 C11.8047723,5.4882855 7.54940785,6.31827365 7.34168746,6.4223572 C7.13396707,6.52644075 6.30397891,10.2640677 6.30397891,10.2640677 L18.6635657,10.2640677 L21.8325301,7.58380456 L11.8047723,5.4882855 Z" id="Shape" fill="url(#linearGradient-6)"></path>
+                <path d="M11.8078993,11.4197078 C11.8078993,11.4197078 7.55253483,12.249696 7.34526114,12.3537795 C7.13798746,12.4578631 6.30710589,16.19549 6.30710589,16.19549 L18.2106012,16.19549 L21.8486117,13.4459868 L11.8078993,11.4197078 Z" id="Shape" fill="url(#linearGradient-7)"></path>
+                <polygon id="Shape" fill="#BD15D4" points="6.23473878 8.25565719 5.95822497 10.8849953 8.72559666 11.0234756 8.72559666 7.18310522"></polygon>
+                <path d="M22.0616926,13.5125466 L7.25993943,13.5125466 C7.62311509,14.4287499 8.66618416,15.6379953 8.66618416,15.6379953 L21.871394,15.6379953 C21.871394,15.6379953 21.6118551,18.2445512 21.2745887,19.2045321 L8.51206903,19.2045321 C6.88559601,19.2045321 5.13672431,18.6595453 3.60584735,15.1314256 C2.07497038,11.6033059 3.50221051,7.76070193 5.03264076,6.05024733 C6.56307102,4.33979274 8.59605061,4.11822432 9.5890881,4.11822432 L20.9851203,4.11822432 C20.9851203,4.11822432 21.9719038,5.47935129 22.0572255,7.5811243 L8.72559666,7.5811243 C7.78303746,8.17792956 7.25993943,9.67664337 7.25993943,9.67664337 L22.0616926,9.67664337 C22.0616926,9.67664337 22.2126808,11.7123032 22.0616926,13.5125466 Z" id="Shape" fill="url(#linearGradient-8)"></path>
+                <path d="M4.36704208,6.59523417 C3.65766577,8.06535851 2.87279538,10.2582605 3.46468682,12.4256999 C3.79212564,10.8010138 4.32147761,8.67333153 6.34909667,6.25350062 L6.82305654,4.64087563 C6.82305654,4.64087563 5.07597168,5.12510984 4.36704208,6.59523417 Z" id="Shape" fill="url(#linearGradient-9)"></path>
+                <path d="M19.4193999,3.18459932 C19.4193999,3.18459932 18.4938157,2.46539538 16.7775539,1.89628617 C14.079869,1.00286513 9.64179995,0.480660524 5.40877102,3.70054998 C3.49863682,5.1532526 2.57707301,7.01737562 2.09551907,8.55048614 C0.829541443,12.5784749 3.2047013,15.9721348 3.2047013,15.9721348 C3.2047013,15.9721348 1.30350131,11.312944 4.43628221,7.51724469 C4.84199385,7.02838137 5.28755125,6.57400846 5.76837299,6.15879799 C6.9360743,7.09331641 8.96592692,7.1777447 10.1372019,6.22937825 C11.2736335,5.30960129 10.6607467,4.07802037 10.2864032,3.52275919 C13.169473,2.45378091 16.459496,2.19111512 19.4193999,3.18459932 Z" id="Shape" fill="url(#linearGradient-10)"></path>
+                <path d="M5.13717102,17.8000742 L3.78185129,15.7268907 C4.8816526,18.4661196 6.38974733,19.7392446 6.82305654,20.1082275 C5.3694605,18.7135973 5.13717102,17.8000742 5.13717102,17.8000742 Z" id="Shape" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/eth.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>eth</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="IOS?-(for-Mike-Le)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-2-Copy" transform="translate(-446.000000, -51.000000)">
+            <g id="eth" transform="translate(446.000000, 51.000000)">
+                <circle id="Oval-2" fill="#7986CB" cx="14" cy="14" r="14"></circle>
+                <g id="ethereum" stroke-width="1" transform="translate(8.166667, 4.277778)" fill="#FFFFFF">
+                    <polygon id="Shape" fill-rule="nonzero" opacity="0.688616071" points="0.0343894477 9.58247421 5.80975415 12.9945706 5.80975415 0"></polygon>
+                    <polygon id="Shape" fill-rule="nonzero" opacity="0.686328125" points="5.80975415 0 5.80975415 12.9945706 11.5828487 9.58247421"></polygon>
+                    <polygon id="Shape" fill-rule="nonzero" opacity="0.800000012" points="0.0343894477 10.676706 5.80975415 18.8130689 5.80975415 14.0888024"></polygon>
+                    <polygon id="Shape" fill-rule="nonzero" opacity="0.900000036" points="5.80975415 14.0888024 5.80975415 18.8130689 11.587389 10.676706"></polygon>
+                    <polygon id="Shape" fill-rule="nonzero" opacity="0.698270089" points="5.80975415 6.95586377 0.0343894477 9.58247421 5.80975415 12.9945706 11.5828487 9.58247421"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/knc.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>knc</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#31CB9E" offset="0%"></stop>
+            <stop stop-color="#2FC99E" offset="4%"></stop>
+            <stop stop-color="#18B2A1" offset="63%"></stop>
+            <stop stop-color="#0FAAA2" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-2" points="-1.89344186e-06 0.410243292 5.86094459 0.410243292 5.86094459 18.5459 -1.89344186e-06 18.5459"></polygon>
+        <path d="M3.95742049,9.47803893 L5.85185579,0.861228558 C5.92601535,0.523709708 5.53027643,0.2783215 5.24947534,0.487747243 L0.395580551,4.10735074 C0.1463115,4.29323405 -1.61184211e-05,4.58218503 -1.61184211e-05,4.88865382 L-1.61184211e-05,14.0677948 C-1.61184211e-05,14.3743099 0.1463115,14.6633072 0.395627968,14.8491905 L5.24933309,18.4684233 C5.53013418,18.6778027 5.9258731,18.4324145 5.85166613,18.0948956 L3.95742049,9.47803893 Z" id="path-4"></path>
+    </defs>
+    <g id="IOS?-(for-Mike-Le)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-2-Copy" transform="translate(-522.000000, -119.000000)">
+            <g id="knc" transform="translate(522.000000, 119.000000)">
+                <circle id="Oval-2" fill="url(#linearGradient-1)" cx="14" cy="14" r="14"></circle>
+                <g id="Group" stroke-width="1" transform="translate(7.000000, 4.666667)">
+                    <g id="Group-2">
+                        <path d="M5.81187412,9.47833089 L13.0542377,13.5395868 C13.3076794,13.681722 13.6236637,13.5028829 13.6236637,13.2172686 L13.6236637,5.73628818 C13.6236637,5.45062757 13.3075846,5.27178846 13.0540955,5.41406264 L5.81187412,9.47833089 Z" id="Fill-1" fill="#FFFFFF"></path>
+                        <path d="M12.638655,3.66782548 L7.82269346,0.0764914379 C7.60106828,-0.088769062 7.27887251,0.0275064832 7.22031301,0.293841899 L5.46248492,8.28955827 L12.5973551,4.28553641 C12.833063,4.15322606 12.8547324,3.82896141 12.638655,3.66782548" id="Fill-4" fill="#FFFFFF"></path>
+                        <path d="M7.82248957,18.8796096 L12.6420547,15.2860511 C12.8581796,15.1249151 12.8364628,14.8005578 12.6006601,14.6682938 L5.4621862,10.6652915 L7.22015653,18.6622591 C7.27871603,18.9285945 7.60086439,19.0448237 7.82248957,18.8796096" id="Fill-6" fill="#FFFFFF"></path>
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <g id="Clip-9"></g>
+                        <mask id="mask-5" fill="white">
+                            <use xlink:href="#path-4"></use>
+                        </mask>
+                        <use id="Fill-8" fill="#FFFFFF" xlink:href="#path-4"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/mana.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>mana</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="mana" fill-rule="nonzero">
+            <g>
+                <path d="M27.4549788,15.1864407 C27.4972458,14.7279973 27.5254237,14.2834462 27.5254237,13.8111106 C27.5254237,6.44823226 21.467161,0.474576271 14,0.474576271 C6.53283898,0.474576271 0.474576271,6.44823226 0.474576271,13.8111106 C0.474576271,13.8666795 27.2436441,14.4918295 27.4549788,15.1864407" id="Shape" fill="#D7D1C7"></path>
+                <path d="M0.474576271,13.8283709 C0.474576271,21.1282798 6.53283877,27.0508475 13.9999995,27.0508475 C21.4671603,27.0508475 26.7570097,22.5607148 27.5254228,15.4811805 C27.5313401,15.4260868 0.474576271,13.3738483 0.474576271,13.8283709" id="Shape" fill="#BFB5AF"></path>
+                <path d="M8.77966102,4.27118644 C10.2206921,4.27118644 11.3898305,5.44032486 11.3898305,6.88135593 C11.3898305,8.32238701 10.2206921,9.49152542 8.77966102,9.49152542 C7.33862994,9.49152542 6.16949153,8.32238701 6.16949153,6.88135593 C6.16949153,5.44032486 7.33862994,4.27118644 8.77966102,4.27118644" id="Shape" fill="#F47E33"></path>
+                <path d="M9.01694915,4.46756283 C7.81489865,4.46756283 6.84044418,5.44201729 6.84044418,6.6440678 C6.84044418,7.8461183 7.81489865,8.82057276 9.01694915,8.82057276 C10.2189997,8.82057276 11.1934541,7.8461183 11.1934541,6.6440678 C11.1934541,5.44126242 10.2054354,4.46756283 9.01694915,4.46756283 M9.01694915,9.96610169 C7.18410286,9.96610169 5.69491525,8.47691409 5.69491525,6.6440678 C5.69491525,4.81122151 7.18410286,3.3220339 9.01694915,3.3220339 C10.8497954,3.3220339 12.3389831,4.81122151 12.3389831,6.6440678 C12.3389831,8.47691409 10.8354763,9.96610169 9.01694915,9.96610169" id="Shape" fill="#35312E"></path>
+                <path d="M17.559322,3.79661017 C19.9182657,3.79661017 21.8305085,5.70885298 21.8305085,8.06779661 C21.8305085,10.4267402 19.9182657,12.3389831 17.559322,12.3389831 C15.2003784,12.3389831 13.2881356,10.4267402 13.2881356,8.06779661 C13.2881356,5.70885298 15.2003784,3.79661017 17.559322,3.79661017" id="Shape" fill="#F47E33"></path>
+                <g id="Group" transform="translate(0.474576, 9.966102)" fill="#BFB5AF">
+                    <polyline id="Shape" points="9.35451386 7.11864407 12.7460464 2.90221643 13.468832 3.31290743 14.8588043 3.81942634 15.8456847 3.31290743 19.0009219 0 20.0990001 1.45110821 20.6271896 1.02672751 21.3221757 1.02672751 23.0735409 3.43611473 24.324516 3.23076923 26.5762712 5.74967405"></polyline>
+                    <polyline id="Shape" points="11.5784696 5.02411995 9.74370612 4.02477184 7.07495922 4.70925684 5.85178356 0.725554107 3.65562726 0.725554107 1.5428693 4.38070404 0 4.43546284"></polyline>
+                </g>
+                <g id="Group" transform="translate(2.847458, 14.711864)" fill="#F47E33">
+                    <path d="M3.27595853,1.16134979 C3.27595853,1.16134979 2.28073062,4.17225664 2.28073062,4.22960725 C2.28073062,4.51636028 2.72305414,4.74576271 3.27595853,4.74576271 C3.82886293,4.74576271 4.27118644,4.51636028 4.27118644,4.22960725 C4.25736383,4.1865943 3.27595853,1.16134979 3.27595853,1.16134979" id="Shape"></path>
+                    <path d="M0.981405299,0 C0.981405299,0 0,2.9965692 0,3.05391981 C0,3.34067285 0.442323515,3.57007527 0.981405299,3.57007527 C1.52048708,3.57007527 1.9628106,3.34067285 1.9628106,3.05391981 C1.9628106,2.9965692 0.981405299,0 0.981405299,0" id="Shape"></path>
+                </g>
+                <g id="Group" transform="translate(13.762712, 12.813559)" fill="#D8A780">
+                    <path d="M8.19352851,2.05184447 C8.19352851,3.18245264 2.73590139,3.18245264 2.73590139,2.05184447 C2.73590139,0.921236291 3.9550077,0 5.45762712,0 C6.96024653,0 8.19352851,0.907278166 8.19352851,2.05184447" id="Shape"></path>
+                    <path d="M10.9152542,4.84346959 C10.9152542,5.97407777 5.45762712,5.97407777 5.45762712,4.84346959 C5.45762712,3.71286142 6.67673344,2.79162512 8.17935285,2.79162512 C9.69614792,2.777667 10.9152542,3.69890329 10.9152542,4.84346959" id="Shape"></path>
+                    <path d="M5.45762712,8.16550349 C5.45762712,9.29611167 0,9.29611167 0,8.16550349 C0,7.03489531 1.21910632,6.11365902 2.72172573,6.11365902 C4.22434515,6.11365902 5.45762712,7.03489531 5.45762712,8.16550349" id="Shape"></path>
+                </g>
+                <path d="M14.3028832,27.0508475 C8.65538605,27.0508475 3.81873862,23.4998444 1.89830508,18.5084746 C2.28239179,18.5084746 2.68070393,18.5227356 3.09324151,18.5227356 C3.29239758,18.5797799 3.52000452,18.608302 3.76183689,18.608302 C3.96099296,18.608302 4.13169816,18.5940409 4.30240336,18.5512577 C4.38775597,18.5512577 4.487334,18.5512577 4.5726866,18.5655188 C4.54423574,18.6510851 4.54423574,18.6796073 4.54423574,18.7081294 C4.54423574,19.3498769 5.22705655,19.8062307 6.15170973,19.8062307 C7.06213748,19.8062307 7.57425309,19.2357885 7.61692939,18.622563 C7.75918373,18.6368241 8.05791784,18.7794347 8.20017217,18.7936957 C12.0410392,19.2072663 12.2970971,19.9060581 12.2970971,19.9345802 C12.3113225,19.9916245 12.2117445,20.2911066 11.443571,20.8187657 C9.79342074,21.9596503 9.22440339,22.6299199 9.38088316,23.3429728 C9.5658138,24.1986361 10.6753976,24.412552 12.3539988,24.7262952 C12.8234381,24.8118616 13.3640046,24.92595 13.9187965,25.0400385 C14.5304901,25.182649 15.1706346,25.3109986 15.7823283,25.425087 C16.920363,25.6532639 18.0726231,25.8814408 18.9830508,26.166662 C17.5462821,26.7513653 15.9530335,27.0508475 14.3028832,27.0508475" id="Shape" fill="#D7D1C7"></path>
+                <path d="M25.27,12.586 L24.066,12.796 L22.33,10.388 L21.77,10.388 C22.1290053,9.70094764 22.3163412,8.93719395 22.316,8.162 C22.316,5.53 20.174,3.388 17.542,3.388 C14.91,3.388 12.754,5.516 12.754,8.148 C12.754,10.332 14.238,12.18 16.24,12.754 L16.17,12.824 L15.484,13.174 L14.364,12.768 L13.258,12.124 L11.704,14.084 L10.458,13.398 L8.064,14.014 L6.86,10.066 L3.92,10.066 L1.778,13.818 L1.12,13.832 C1.204,6.804 6.958,1.12 14,1.12 C21.098,1.12 26.88,6.902 26.88,14 L26.88,14.406 L25.27,12.586 Z M18.76,21.042 C18.564,21.182 17.836,21.406 16.632,21.406 C15.428,21.406 14.7,21.182 14.504,21.042 C14.56,20.258 15.512,19.614 16.632,19.614 C17.752,19.614 18.704,20.258 18.76,21.042 Z M22.022,16.268 C23.142,16.268 24.094,16.912 24.15,17.696 C23.954,17.836 23.212,18.06 22.022,18.06 C20.832,18.06 20.09,17.836 19.894,17.696 C19.95,16.912 20.902,16.268 22.022,16.268 Z M21.448,14.896 C21.252,15.036 20.51,15.26 19.32,15.26 C18.13,15.26 17.388,15.036 17.192,14.896 C17.248,14.112 18.2,13.468 19.32,13.468 C20.44,13.468 21.392,14.112 21.448,14.896 Z M20.594,10.15 L19.754,9.016 L17.15,11.802 C15.316,11.606 13.888,10.052 13.888,8.162 C13.888,6.146 15.526,4.508 17.542,4.508 C19.558,4.508 21.196,6.146 21.196,8.162 C21.1941715,8.86929503 20.9848599,9.56051025 20.594,10.15 Z M19.992,25.396 C18.942,24.878 17.346,24.57 15.666,24.234 C15.078,24.122 14.462,23.996 13.874,23.87 C13.328,23.744 12.796,23.646 12.32,23.562 C11.564,23.422 10.654,23.24 10.36,23.072 C10.458,22.918 10.766,22.554 11.858,21.812 C12.25,21.546 13.44,20.734 13.118,19.698 C12.824,18.732 11.298,18.144 8.19,17.808 C7.91,17.78 7.616,17.752 7.308,17.724 C7.154,17.262 6.93,16.604 6.608,15.652 L6.076,14.098 L5.544,15.652 C5.362,16.17 5.222,16.59 5.096,16.954 C4.956,16.506 4.704,15.778 4.27,14.518 L3.78,12.936 L3.248,14.49 C2.52,16.618 2.31,17.248 2.254,17.486 L1.61,17.486 C1.3815287,16.6572521 1.23153445,15.8088472 1.162,14.952 L2.45,14.91 L4.578,11.186 L6.048,11.186 L7.322,15.372 L10.318,14.602 L11.004,14.98 L9.548,16.814 L10.43,17.514 L13.538,13.58 L13.902,13.79 L15.582,14.406 L16.31,14.028 C16.17,14.322 16.086,14.644 16.086,14.98 C16.086,15.316 16.296,16.03 17.892,16.296 C18.3996917,16.3793513 18.7727214,16.8175132 18.774,17.332 L18.774,19.152 C18.55,18.998 18.298,18.858 18.018,18.76 L18.032,18.76 C17.416,18.564 16.842,18.27 16.66,17.668 C16.52,18.158 16.128,18.438 15.624,18.634 C14.322,18.984 13.384,19.964 13.384,21.126 C13.384,21.546 13.706,22.54 16.632,22.54 C19.572,22.54 19.88,21.546 19.88,21.126 L19.88,18.928 C20.076,18.998 20.3,19.054 20.566,19.096 C21.0736917,19.1793513 21.4467214,19.6175132 21.448,20.132 L21.448,21.392 C21.448,21.686 21.658,21.952 21.952,21.98 C22.288,22.008 22.568,21.742 22.568,21.42 L22.568,20.132 C22.5692786,19.6175132 22.9423083,19.1793513 23.45,19.096 C25.046,18.83 25.256,18.13 25.256,17.78 C25.256,16.842 24.64,16.03 23.73,15.568 L23.744,15.568 C23.73,15.568 23.716,15.554 23.688,15.554 C23.534,15.47 23.352,15.414 23.184,15.358 C22.932,15.232 22.708,15.064 22.554,14.854 C22.484,13.86 21.742,13.02 20.678,12.614 L20.664,12.614 C20.594,12.586 20.524,12.572 20.454,12.544 C19.922,12.348 19.46,12.054 19.306,11.536 C19.138,12.11 18.648,12.404 18.018,12.6 C17.976,12.614 17.92,12.628 17.878,12.656 L19.628,10.794 L20.678,12.208 L21.518,11.536 L21.728,11.536 L23.548,14.042 L24.836,13.818 L26.726,15.96 C26.11,20.048 23.548,23.52 19.992,25.396 Z M5.726,18.704 L6.104,17.57 L6.482,18.704 C6.23553148,18.7786709 5.97246852,18.7786709 5.726,18.704 Z M3.416,17.514 C3.5,17.262 3.626,16.856 3.78,16.422 C3.934,16.87 4.074,17.276 4.144,17.528 C3.892,17.528 3.654,17.514 3.416,17.514 Z M14,26.88 C8.526,26.88 3.836,23.45 1.974,18.62 C2.338,18.62 2.73,18.634 3.122,18.634 C3.33165098,18.6921325 3.54845206,18.7204109 3.766,18.718 C3.948,18.718 4.13,18.704 4.284,18.662 C4.37289158,18.6600363 4.46180567,18.664716 4.55,18.676 C4.522,18.76 4.522,18.788 4.522,18.816 C4.522,19.432 5.18,19.88 6.09,19.88 C6.972,19.88 7.616,19.46 7.644,18.872 C7.784,18.886 7.938,18.9 8.078,18.914 C11.802,19.32 12.054,19.992 12.054,20.02 C12.068,20.076 11.984,20.37 11.228,20.874 C9.646,21.966 9.1,22.624 9.24,23.31 C9.408,24.136 10.486,24.346 12.124,24.654 C12.586,24.738 13.104,24.836 13.636,24.962 C14.224,25.088 14.854,25.214 15.456,25.34 C16.548,25.564 17.668,25.788 18.564,26.054 C17.1048116,26.601894 15.5586583,26.8817193 14,26.88 Z M14,0 C6.286,0 0,6.286 0,14 C0,21.714 6.286,28 14,28 C21.714,28 28,21.714 28,14 C28,6.286 21.714,0 14,0 Z" id="Shape" fill="#35312E"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/mkr.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
+<g id="Layer_1">
+	<title>mkr</title>
+	<desc>Designed by Anudit Nagar</desc>
+</g>
+<g id="Layer_1">
+	<g>
+		<g>
+			<path fill="#1AAB9A" d="M15.1,27.6c-0.7,0-1.4,0-2.2,0c-1.1-0.1-2.1-0.3-3.1-0.7c-4.5-1.6-7.5-4.7-8.8-9.3c-0.3-0.8-0.3-1.7-0.5-2.6
+				c0-0.6,0-1.2,0-1.8c0-0.1,0-0.2,0-0.3c0.3-3.1,1.5-5.8,3.6-8.1c1.8-1.9,4-3.2,6.6-3.9c0.8-0.2,1.5-0.3,2.3-0.4c0.7,0,1.4,0,2.1,0
+				c0.1,0,0.1,0,0.2,0c1.4,0.1,2.8,0.5,4.2,1.1c2,0.9,3.7,2.2,5.1,3.9c1.1,1.3,1.9,2.8,2.4,4.5c0.3,0.9,0.4,1.8,0.6,2.8
+				c0,0.8,0,1.7,0,2.5c0,0.1,0,0.2-0.1,0.3c-0.3,2.4-1.1,4.5-2.5,6.4c-2,2.8-4.7,4.6-8.1,5.3C16.4,27.4,15.7,27.5,15.1,27.6z
+				 M22,14.1c0-1.4,0-2.7,0-4.1c0-0.1,0-0.2,0-0.4c0-0.5-0.4-0.7-0.9-0.5c-0.1,0.1-0.3,0.1-0.4,0.2c-1.8,1.3-3.7,2.5-5.5,3.8
+				c-0.3,0.2-0.5,0.5-0.5,0.9c0,1.4,0,2.9,0,4.3c0,0.1,0,0.2,0,0.3c0.1,0.2,0.2,0.4,0.5,0.4c0.2,0,0.4-0.1,0.5-0.2
+				c0.1-0.1,0.1-0.3,0.1-0.5c0-1.3,0-2.6,0-3.9c0-0.4,0.1-0.6,0.4-0.8c0.9-0.6,1.8-1.2,2.7-1.9c0.5-0.3,1-0.7,1.5-1
+				c0.1,0,0.1-0.1,0.2-0.1c0.1,0.1,0.1,0.2,0.1,0.3c0,0.1,0,0.2,0,0.2c0,2.3,0,4.6,0,6.9c0,0.1,0,0.3,0,0.4c0,0.3,0.3,0.5,0.6,0.5
+				c0.3,0,0.5-0.2,0.5-0.5c0-0.1,0-0.3,0-0.4C22,16.8,22,15.4,22,14.1z M6.2,14.1c0,0.8,0,1.6,0,2.3c0,0.7,0,1.4,0,2.1
+				c0,0.3,0.1,0.5,0.4,0.6c0.2,0.1,0.4,0,0.6-0.2c0.1-0.2,0.1-0.4,0.1-0.5c0-2.4,0-4.8,0-7.2c0-0.1,0-0.3,0.1-0.3
+				c0.1-0.1,0.2,0.1,0.3,0.1c1.4,1,2.8,2,4.3,3c0.2,0.1,0.3,0.3,0.3,0.5c0,1.2,0,2.3,0,3.5c0,0.2,0,0.4,0,0.6c0,0.4,0.2,0.6,0.6,0.6
+				c0.3,0,0.5-0.2,0.6-0.6c0-0.1,0-0.2,0-0.3c0-1.4,0-2.7,0-4.1c0-0.4-0.1-0.7-0.5-0.9c-1.4-0.9-2.8-1.9-4.1-2.9
+				C8.2,9.9,7.6,9.5,7,9.1c-0.4-0.2-0.8,0-0.8,0.4c0,0.1,0,0.3,0,0.4C6.2,11.3,6.2,12.7,6.2,14.1z"/>
+		</g>
+	</g>
+</g>
+</svg>

src/assets/img/icons/tokens/omg.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="29px" viewBox="0 0 28 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>omg</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="omg">
+            <g id="Vector">
+                <rect id="Path" fill="#FFFFFF" x="4" y="5" width="20" height="19"></rect>
+                <path d="M23.8901,4.12752 C18.4301,-1.37584 9.55504,-1.37584 4.09502,4.12752 C-1.36501,9.63088 -1.36501,18.5763 4.09502,24.0797 C9.55504,29.5831 18.4301,29.5831 23.8901,24.0797 C29.3501,18.5763 29.3501,9.63088 23.8901,4.12752 Z M21.7061,14.4138 L14.3003,21.8784 C14.1216,22.0585 13.8436,22.0585 13.665,21.8784 L6.25917,14.4138 C6.08048,14.2337 6.08048,13.9535 6.25917,13.7734 L13.665,6.30885 C13.8436,6.12874 14.1216,6.12874 14.3003,6.30885 L21.7061,13.7734 C21.8848,13.9535 21.8848,14.2337 21.7061,14.4138 Z" id="path0_fill" fill="#2176FF" fill-rule="nonzero"></path>
+                <path d="M28.0002,14.0736 C28.0002,10.33128 26.531,6.72908 23.9101,4.08747 C21.68642,1.846098 18.09273,1.826085 15.86901,4.06745 L13.6850001,6.24878 C13.7644187,6.16874 13.883547,6.12871 13.98282,6.12871 C14.101948,6.12871 14.221075,6.18875 14.300493,6.2688 L23.8704,15.9347 C26.0941,18.1761 26.0941,21.7983 23.8704,24.0396 C26.5111,21.398 28.0002,17.8158 28.0002,14.0736 Z" id="path1_fill" fill="#1A53F0" fill-rule="nonzero"></path>
+                <path d="M3.64056,24.2863 C5.86428,26.5276 9.45797,26.5276 11.70155,24.3063 C11.70155,24.3063 12.595,23.36572 13.8657,22.08494 C13.7069,22.26505 13.409,22.26505 13.2304,22.10495 L13.2105,22.08494 L5.84443,14.660403 C5.74516,14.580355 5.70545,14.440268 5.70545,14.320195 C5.70545,14.200122 5.74516,14.0800489 5.82457,14 L3.68027,16.16132 C1.456555,18.40269 1.4367,22.0249 3.64056,24.2863 Z" id="path2_fill" fill="#1A53F0" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/poly.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>poly</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Wallet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-49.000000, -35.000000)">
+            <g id="poly" transform="translate(49.000000, 35.000000)">
+                <g>
+                    <circle id="Oval" fill="#DBDBDB" fill-rule="nonzero" cx="14" cy="14" r="14"></circle>
+                    <g id="Group" transform="translate(2.512821, 7.897436)" fill-rule="nonzero">
+                        <polygon id="Shape" fill="#5B6FAD" points="20.3325463 0.13033759 20.4597187 0.519461883 22.0384104 0.0194618834"></polygon>
+                        <polygon id="Shape" fill="#313A63" points="16.4284168 1.41757848 19.2049094 2.22995516 18.3172086 1.56573991"></polygon>
+                        <polygon id="Shape" fill="#303863" points="22.7277452 0.697488789 22.8134285 1.47408072 22.3134285 1.31901345"></polygon>
+                        <polygon id="Shape" fill="#49578D" points="18.3172086 2.92080717 21.5027829 2.92080717 21.079919 2.42080717"></polygon>
+                        <polygon id="Shape" fill="#2F3964" points="19.2049094 2.22995516 19.6177498 2.60726457 18.3172086 2.77363229"></polygon>
+                        <polygon id="Shape" fill="#4E60A3" points="19.2544002 3.44475336 21.5027829 2.77363229 18.3172086 2.77363229"></polygon>
+                        <polygon id="Shape" fill="#3F4A81" points="16.4284168 1.41757848 18.3172086 2.77363229 19.2049094 2.22995516"></polygon>
+                        <polygon id="Shape" fill="#323967" points="19.9754613 3.22941704 20.2830556 4.2709417 19.2544002 3.44475336"></polygon>
+                        <polygon id="Shape" fill="#313A63" points="20.4240102 7.07470852 20.2830556 4.2709417 19.1629363 7.6541704"></polygon>
+                        <polygon id="Shape" fill="#3F4A80" points="19.2544002 3.44475336 19.1629363 7.6541704 20.2830556 4.2709417"></polygon>
+                        <polygon id="Shape" fill="#4A5692" points="17.0273173 6.28367713 19.2544002 3.44475336 19.1629363 7.6541704"></polygon>
+                        <polygon id="Shape" fill="#3F4A80" points="16.7172171 3.64251121 19.2544002 3.44475336 17.0273173 6.28367713"></polygon>
+                        <polygon id="Shape" fill="#4A5897" points="16.4284168 1.41757848 16.7172171 3.64251121 19.2544002 3.44475336"></polygon>
+                        <polygon id="Shape" fill="#323A65" points="16.2943533 5.54914798 17.0273173 6.28367713 16.7172171 3.64251121"></polygon>
+                        <polygon id="Shape" fill="#313A63" points="13.7220882 0.0194618834 16.4284168 1.41757848 16.7172171 3.64251121"></polygon>
+                        <polygon id="Shape" fill="#3E4A80" points="16.2943533 5.54914798 13.7220882 0.0194618834 16.7172171 3.64251121"></polygon>
+                        <polygon id="Shape" fill="#4A5897" points="12.1433965 0.339641256 13.7220882 0.0194618834 16.2943533 5.54914798"></polygon>
+                        <polygon id="Shape" fill="#5161A2" points="11.8000938 3.81892377 16.2943533 5.54914798 12.1433965 0.339641256"></polygon>
+                        <polygon id="Shape" fill="#4A5897" points="7.18179416 4.46430493 11.8000938 3.81892377 12.1433965 0.339641256"></polygon>
+                        <polygon id="Shape" fill="#3F4A80" points="11.3634477 6.907713 11.8000938 3.81892377 7.18179416 4.46430493"></polygon>
+                        <polygon id="Shape" fill="#4A5897" points="16.2943533 5.54914798 11.3634477 6.907713 11.8000938 3.81892377"></polygon>
+                        <polygon id="Shape" fill="#5260A4" points="16.2943533 5.54914798 16.2310803 6.61578475 14.0472235 6.59255605"></polygon>
+                        <polygon id="Shape" fill="#3F4980" points="11.3634477 6.907713 14.0472235 6.59255605 16.2943533 5.54914798"></polygon>
+                        <polygon id="Shape" fill="#4A5897" points="16.2310803 6.61578475 14.8403281 8.71139013 14.0472235 6.59255605"></polygon>
+                        <polygon id="Shape" fill="#313B61" points="11.3634477 6.907713 11.3916386 7.83058296 14.0472235 6.59255605"></polygon>
+                        <polygon id="Shape" fill="#3F4A80" points="14.8403281 8.71139013 13.6606947 8.48977578 14.0472235 6.59255605"></polygon>
+                        <polygon id="Shape" fill="#3F4A7F" points="11.3634477 6.907713 8.59134029 7.3503139 11.3916386 7.83058296"></polygon>
+                        <polygon id="Shape" fill="#4A5897" points="13.6606947 8.48977578 13.1344641 9.4503139 14.8403281 8.71139013"></polygon>
+                        <polygon id="Shape" fill="#3F4A80" points="12.4015001 8.55569507 13.6606947 8.48977578 12.0776177 10.166009"></polygon>
+                        <polygon id="Shape" fill="#30395F" points="13.1344641 9.4503139 12.0776177 10.166009 13.6606947 8.48977578"></polygon>
+                        <polygon id="Shape" fill="#4A5897" points="7.18179416 4.46430493 8.59134029 7.3503139 11.3634477 6.907713"></polygon>
+                        <polygon id="Shape" fill="#313A63" points="7.18179416 4.46430493 7.23316429 8.40502242 8.59134029 7.3503139"></polygon>
+                        <polygon id="Shape" fill="#3F4A80" points="5.38697209 8.57452915 7.23316429 8.40502242 7.18179416 4.46430493"></polygon>
+                        <polygon id="Shape" fill="#313A63" points="5.38697209 8.57452915 6.41124228 9.72340807 7.23316429 8.40502242"></polygon>
+                        <polygon id="Shape" fill="#4A5897" points="7.18179416 4.46430493 4.85572981 5.24591928 5.38697209 8.57452915"></polygon>
+                        <polygon id="Shape" fill="#4A5897" points="6.41124228 9.72340807 3.06591945 11.0844843 5.38697209 8.57452915"></polygon>
+                        <polygon id="Shape" fill="#5261A4" points="4.85572981 5.24591928 3.87405924 6.28618834 5.38697209 8.57452915"></polygon>
+                        <polygon id="Shape" fill="#323A63" points="3.06591945 11.0844843 5.38697209 8.57452915 3.87405924 8.87587444"></polygon>
+                        <polygon id="Shape" fill="#3F4A80" points="3.87405924 6.28618834 3.87405924 8.87587444 5.38697209 8.57452915"></polygon>
+                        <polygon id="Shape" fill="#3F4A84" points="3.06591945 11.0844843 3.2206563 12.8404484 4.32198167 10.5734529"></polygon>
+                        <polygon id="Shape" fill="#313A63" points="3.87405924 6.28618834 2.14000426 6.28618834 3.87405924 7.34089686"></polygon>
+                        <polygon id="Shape" fill="#1F2340" points="3.06591945 11.0844843 3.2206563 12.8404484 2.59607074 13.1562332"></polygon>
+                        <polygon id="Shape" fill="#3E4B80" points="2.14000426 6.28618834 2.27657362 7.03013453 3.87405924 7.34089686"></polygon>
+                        <polygon id="Shape" fill="#333C63" points="3.2206563 12.8404484 2.09301939 13.9755157 2.59607074 13.1562332"></polygon>
+                        <polygon id="Shape" fill="#3E4A82" points="2.09301939 13.9755157 3.38980183 13.7212556 3.2206563 12.8404484"></polygon>
+                        <polygon id="Shape" fill="#313B64" points="1.23789474 7.92977578 0.0494907309 8.27318386 1.20531856 8.45713004"></polygon>
+                        <polygon id="Shape" fill="#4C5DA9" points="22.3134285 1.31901345 21.5027829 2.77363229 22.6022289 1.47408072"></polygon>
+                        <polygon id="Shape" fill="#404983" points="21.079919 2.42080717 22.3134285 1.31901345 21.5027829 2.77363229"></polygon>
+                        <polygon id="Shape" fill="#475692" points="20.3325463 0.118026906 20.4597187 0.463946188 18.3172086 1.56573991"></polygon>
+                        <polygon id="Shape" fill="#3E4B83" points="19.2049094 2.22995516 18.3172086 1.56573991 20.4597187 0.463946188"></polygon>
+                        <polygon id="Shape" fill="#4D5AAE" points="2.14000426 6.28618834 1.23789474 7.92977578 2.27657362 7.03013453"></polygon>
+                        <polygon id="Shape" fill="#485E9B" points="1.20531856 8.45713004 2.27657362 7.03013453 1.23789474 7.92977578"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/rep.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="201px" height="201px" viewBox="0 0 201 201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>REP</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-755.000000, -3510.000000)">
+            <g id="REP" transform="translate(755.000000, 3510.000000)">
+                <path d="M200.2683,100.6854 C200.2683,155.9134 155.4973,200.6854 100.2683,200.6854 C45.0403,200.6854 0.2683,155.9134 0.2683,100.6854 C0.2683,45.4564 45.0403,0.6854 100.2683,0.6854 C155.4973,0.6854 200.2683,45.4564 200.2683,100.6854" id="Fill-89" fill="#602453"></path>
+                <path d="M97.594,39.8309 C97.565,39.8179 97.535,39.8059 97.505,39.7929 C81.559,68.4419 65.613,97.0909 49.667,125.7399 C49.886,125.7139 50.033,125.6339 50.181,125.5529 C51.854,124.6389 53.512,123.6979 55.203,122.8169 C59.131,120.7699 63.139,118.9039 67.356,117.5159 C68.423,117.1639 69.52,117.0369 70.63,117.1019 C73.104,117.2479 75.378,118.0909 77.577,119.1749 C80.925,120.8249 83.808,123.1019 86.569,125.5949 C89.201,127.9709 92.321,129.5179 95.811,130.2509 C96.735,130.4449 97.675,130.5599 98.653,130.7199 C98.59,130.8079 98.553,130.8809 98.497,130.9349 C97.144,132.2229 95.943,133.6279 95.039,135.2759 C94.979,135.3859 94.686,135.4639 94.546,135.4189 C92.864,134.8759 91.146,134.4139 89.527,133.7209 C87.257,132.7479 85.08,131.5739 83.226,129.8889 C81.191,128.0389 79.003,126.3889 76.628,124.9969 C75.04,124.0669 73.418,123.1939 71.615,122.7469 C70.79,122.5429 69.943,122.3449 69.096,122.6339 C67.986,123.0119 66.875,123.3939 65.783,123.8229 C61.24,125.6069 56.948,127.9009 52.71,130.3019 C51.617,130.9219 50.544,131.5789 49.411,132.2479 C65.45,141.7999 81.434,151.3199 97.515,160.8959 L97.515,160.1459 C97.515,153.9069 97.514,147.6679 97.516,141.4299 C97.516,141.0889 97.515,140.7469 97.553,140.4099 C97.792,138.3149 98.779,136.5669 100.13,135.0089 C102.648,132.1039 105.847,130.1549 109.281,128.5379 C114.372,126.1399 118.033,122.3799 120.116,117.1229 C120.192,116.9319 120.281,116.7459 120.399,116.4799 C120.534,116.7199 120.612,116.8679 120.699,117.0099 C121.472,118.2719 122.24,119.5379 123.026,120.7919 C123.259,121.1649 123.74,121.4989 123.752,121.8629 C123.764,122.2529 123.363,122.6589 123.134,123.0539 C120.548,127.5089 116.923,130.8529 112.351,133.2039 C110.884,133.9579 109.424,134.7329 108.014,135.5859 C106.449,136.5319 105.01,137.6559 103.878,139.1209 C103.362,139.7899 102.961,140.5159 102.961,141.3979 C102.962,147.7389 102.962,154.0809 102.963,160.4219 L102.963,161.0619 C119.001,151.4649 134.945,141.9229 150.946,132.3489 C150.798,132.2649 150.728,132.2219 150.655,132.1849 C144.181,128.9569 137.71,125.7249 131.233,122.5049 C129.711,121.7479 128.433,120.6929 127.346,119.4039 C124.083,115.5359 122.35,110.9529 121.371,106.0799 C120.823,103.3539 119.904,100.8319 118.506,98.4379 C116.863,95.6249 114.63,93.3699 112.001,91.5399 C109.552,89.8359 106.803,88.7139 103.831,88.2259 C103.206,88.1229 102.575,88.0489 101.935,87.9599 C101.969,87.8789 101.973,87.8399 101.995,87.8179 C103.347,86.4829 104.556,85.0379 105.469,83.3579 C105.523,83.2599 105.757,83.1849 105.882,83.2109 C106.53,83.3499 107.178,83.4989 107.812,83.6919 C112.129,85.0069 115.889,87.2539 119.102,90.4269 C122.188,93.4749 124.478,97.0239 125.769,101.1669 C126.15,102.3899 126.211,103.7089 126.481,104.9699 C127.177,108.2199 128.287,111.3169 130.036,114.1619 C131.026,115.7689 132.272,117.0919 134.006,117.9529 C139.51,120.6859 144.991,123.4629 150.482,126.2209 C150.683,126.3219 150.894,126.4029 151.214,126.5419 C135.052,97.5289 118.96,68.6379 102.867,39.7479 C102.831,39.7559 102.795,39.7639 102.758,39.7709 L102.758,40.3589 C102.758,52.4959 102.759,64.6329 102.755,76.7689 C102.755,77.2799 102.748,77.7949 102.677,78.2989 C102.358,80.5869 101.174,82.4399 99.641,84.0859 C97.239,86.6669 94.318,88.5249 91.156,90.0329 C90.219,90.4789 89.253,90.8859 88.381,91.4379 C85.088,93.5279 82.692,96.4519 80.925,99.8799 C78.773,104.0529 78.313,108.4989 79.072,113.0949 C79.208,113.9239 79.422,114.7409 79.603,115.5759 C79.532,115.5659 79.497,115.5679 79.466,115.5559 C77.609,114.8499 75.75,114.1469 73.899,113.4249 C73.765,113.3719 73.606,113.1719 73.6,113.0349 C73.528,111.2689 73.377,109.4979 73.451,107.7359 C73.615,103.8329 74.93,100.2269 76.743,96.8299 C79.252,92.1309 82.89,88.4919 87.597,85.9559 C89.185,85.0999 90.81,84.3099 92.363,83.3939 C94.06,82.3929 95.576,81.1499 96.721,79.5129 C97.278,78.7159 97.608,77.8669 97.607,76.8539 C97.588,64.8189 97.594,52.7849 97.594,40.7499 C97.594,40.4439 97.594,40.1379 97.594,39.8309 M159.146,130.5879 C159.114,132.7289 158.212,134.3919 156.364,135.4989 C147.613,140.7399 138.857,145.9729 130.103,151.2089 C121.261,156.4969 112.415,161.7789 103.579,167.0769 C101.412,168.3759 99.295,168.3749 97.124,167.0759 C79.518,156.5359 61.907,146.0039 44.29,135.4819 C42.588,134.4659 41.554,133.0619 41.405,131.0619 C41.319,129.9229 41.63,128.8799 42.184,127.8879 C44.961,122.9249 47.726,117.9559 50.494,112.9889 L93.583,35.6699 C94.238,34.4949 94.875,33.3099 95.55,32.1469 C97.24,29.2329 100.734,28.4269 103.398,30.4089 C104.082,30.9179 104.659,31.6669 105.081,32.4199 C111.019,43.0079 116.921,53.6149 122.832,64.2179 C134.67,85.4539 146.508,106.6899 158.351,127.9219 C158.817,128.7569 159.124,129.6239 159.146,130.5879" id="Fill-91" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/salt.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>SALT</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="SALT">
+            <path d="M27.8693055,14.0611264 C27.8693055,21.7547184 21.63241,27.9914746 13.9389572,27.9914746 C6.24536517,27.9914746 0.00860895522,21.7547184 0.00860895522,14.0611264 C0.00860895522,6.36753433 6.24536517,0.130778109 13.9389572,0.130778109 C21.63241,0.130778109 27.8693055,6.36753433 27.8693055,14.0611264" id="Fill-772" fill="#E2F0F2"></path>
+            <path d="M13.9389572,7.74920199 L19.4900617,19.5922269 L8.38785274,19.5922269 L13.9389572,7.74920199 Z M13.9389572,2.63704279 L4.94106667,21.3984358 L22.9368478,21.3984358 L13.9389572,2.63704279 Z" id="Fill-773" fill="#578891"></path>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/snt.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>snt</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="IOS?-(for-Mike-Le)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-2-Copy" transform="translate(-198.000000, -146.000000)" fill-rule="nonzero">
+            <g id="snt" transform="translate(198.000000, 146.000000)">
+                <path d="M28,14 C28,21.73206 21.73206,28 14,28 C6.26808,28 0,21.73206 0,14 C0,6.26794 6.26808,0 14,0 C21.73206,0 28,6.26794 28,14" id="Fill-170" fill="#4957B8"></path>
+                <path d="M8.75,12.806117 C8.75,12.806117 10.1258352,6.47633793 15.8086391,5.4500461 C21.491443,4.42348715 22.6879556,7.61682543 22.747683,8.92853965 C22.8075507,10.2399867 21.7307735,13.4904896 16.7658211,13.0912723 C11.6811334,12.2358065 8.75,12.806117 8.75,12.806117" id="Fill-172" fill="#FFFFFF"></path>
+                <path d="M19.25,15.1938599 C19.25,15.1938599 17.8741648,21.5235856 12.1913609,22.5500023 C6.50841682,23.576419 5.31204444,20.3831077 5.25231695,19.0715381 C5.19244926,17.7599685 6.26922647,14.5096266 11.2341789,14.9087071 C16.3188666,15.7641656 19.25,15.1938599 19.25,15.1938599" id="Fill-174" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/tusd.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="36px" viewBox="0 0 34 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>Tusd</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="IOS?-(for-Mike-Le)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-3" transform="translate(-537.000000, -188.000000)">
+            <g id="Tusd" transform="translate(537.000000, 188.000000)">
+                <g id="Group">
+                    <path d="M32.8505007,9.85436249 C30.6787909,6.61913624 28.7985735,4.48356656 27.2098486,3.44765347 C24.8267613,1.89378383 21.5192883,0.0516412815 17.0090572,0.39584557 C12.498826,0.740049858 7.35103252,1.81380394 3.48243198,6.63343544 C-0.386168563,11.4530669 -0.0222981431,17.8365221 1.22389859,20.9834595 C2.05469641,23.0814178 4.38625051,25.4857284 8.2185609,28.1963912 C6.32178394,26.3071894 4.89510537,23.9028788 3.93852518,20.9834595 C2.5036549,16.6043305 4.8686805,10.0554557 8.61070593,7.3384509 C12.3527314,4.62144606 18.5839793,2.68846704 23.413388,4.14500571 C26.6329938,5.11603149 29.778698,7.01915042 32.8505007,9.85436249 Z" id="Path-3" fill="#00CAF8" fill-rule="nonzero"></path>
+                    <path d="M1.04130276,26.3825883 C3.74298117,30.6225463 6.91528646,33.3530279 10.5582186,34.5740329 C16.0226169,36.4055404 22.1354814,35.7544317 26.641714,32.622028 C31.1479466,29.4896242 34.4426447,25.0590432 33.6236924,19.0848328 C33.0777241,15.1020259 30.4929317,11.3896844 25.8693151,7.94780833 C28.7762267,11.1471949 30.2296824,13.9573033 30.2296824,16.3781337 C30.2296824,20.0093792 28.5707458,25.7422925 25.2166209,28.394842 C21.8381525,31.0666431 18.7274663,33.4774009 11.9582081,32.1775617 C7.44536929,31.3110022 3.80640085,29.3793444 1.04130276,26.3825883 Z" id="Path-5" fill="#0DCCBC" fill-rule="nonzero"></path>
+                    <path d="M14.8530523,27.6713291 L14.8530523,14.218165 L8.76000643,14.218165 C9.59943637,11.7736887 11.6304517,10.5514505 14.8530523,10.5514505 C18.0756529,10.5514505 21.4054504,10.5514505 24.8424448,10.5514505 C24.612556,11.7384002 24.1010491,12.5915179 23.3079241,13.1108036 C22.1182366,13.8897321 21.3320759,14.218165 20.0162946,14.218165 C19.1391071,14.218165 18.6251786,14.218165 18.4745089,14.218165 C18.4745089,19.2997455 18.4745089,22.084375 18.4745089,22.5720536 C18.4745089,23.3035714 18.6754018,24.8200995 17.4107813,26.2457143 C16.5677009,27.1961242 15.7151246,27.6713291 14.8530523,27.6713291 Z" id="Path-6" fill="#00CAF8" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/usdc.svg

@@ -0,0 +1,6 @@
+<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48 95C57.2957 95 66.3827 92.2435 74.1118 87.0791C81.8409 81.9146 87.865 74.5743 91.4223 65.9861C94.9796 57.398 95.9104 47.9479 94.0969 38.8308C92.2834 29.7137 87.8071 21.3391 81.234 14.766C74.6609 8.19293 66.2863 3.71662 57.1692 1.90311C48.0521 0.0896077 38.602 1.02036 30.0139 4.57768C21.4257 8.135 14.0854 14.1591 8.92093 21.8882C3.7565 29.6173 1 38.7043 1 48C1 60.4652 5.95177 72.4198 14.766 81.234C23.5802 90.0482 35.5348 95 48 95Z" fill="#2775C9"/>
+<path d="M60.9433 55.4691C60.9433 48.615 56.7721 46.3041 48.7037 45.1977C42.7406 44.336 41.595 42.9358 41.595 40.155C41.595 37.3741 43.6121 35.641 47.47 35.641C50.9852 35.641 53.0121 36.865 53.8444 39.6948C53.9327 40.0045 54.1186 40.2775 54.3743 40.4732C54.6301 40.669 54.9421 40.7772 55.2642 40.7816H58.3485C58.55 40.7858 58.7499 40.7455 58.934 40.6637C59.1181 40.5818 59.2819 40.4603 59.4138 40.3079C59.5456 40.1555 59.6422 39.9759 59.6967 39.782C59.7512 39.588 59.7623 39.3843 59.7292 39.1856C58.75 34.7108 55.7342 32.0181 51.0048 31.176V26.4564C51.0048 26.0669 50.85 25.6933 50.5746 25.4179C50.2992 25.1424 49.9256 24.9877 49.536 24.9877H46.5985C46.209 24.9877 45.8354 25.1424 45.56 25.4179C45.2845 25.6933 45.1298 26.0669 45.1298 26.4564V31.0095C39.2548 31.832 35.5437 35.7095 35.5437 40.6837C35.5437 47.1168 39.4604 49.6137 47.6462 50.7202C53.2177 51.6308 54.8039 52.8352 54.8039 55.9979C54.8039 59.1606 52.1112 61.2854 48.3121 61.2854C43.191 61.2854 41.4579 59.0431 40.8802 56.135C40.813 55.8013 40.6335 55.5007 40.3716 55.2833C40.1097 55.0659 39.7812 54.9449 39.4408 54.9404H36.0921C35.8923 54.9391 35.6946 54.9815 35.5129 55.0647C35.3312 55.1478 35.1698 55.2697 35.0402 55.4217C34.9105 55.5738 34.8157 55.7523 34.7623 55.9449C34.7089 56.1374 34.6982 56.3393 34.731 56.5364C35.5829 61.4323 38.726 65.016 45.1298 65.8777V70.5189C45.1298 70.9085 45.2845 71.2821 45.56 71.5575C45.8354 71.8329 46.209 71.9877 46.5985 71.9877H49.536C49.9256 71.9877 50.2992 71.8329 50.5746 71.5575C50.85 71.2821 51.0048 70.9085 51.0048 70.5189V65.8777C57.0756 64.9181 60.9433 60.7273 60.9433 55.4691Z" fill="white"/>
+<path d="M37.9909 76.0806C32.3332 74.0147 27.4474 70.2595 23.9953 65.3239C20.5432 60.3883 18.6917 54.5108 18.6917 48.4877C18.6917 42.4647 20.5432 36.5872 23.9953 31.6516C27.4474 26.7159 32.3332 22.9608 37.9909 20.8948C38.3536 20.7356 38.6643 20.4777 38.8877 20.1505C39.111 19.8233 39.2379 19.44 39.254 19.0442V16.3025C39.2775 16.0597 39.2368 15.815 39.1358 15.593C39.0348 15.371 38.8772 15.1794 38.6788 15.0375C38.4804 14.8956 38.2481 14.8085 38.0053 14.7847C37.7626 14.761 37.5178 14.8016 37.2957 14.9023C30.1709 17.1731 23.9529 21.6509 19.5405 27.6883C15.1281 33.7257 12.75 41.0098 12.75 48.4877C12.75 55.9656 15.1281 63.2498 19.5405 69.2872C23.9529 75.3246 30.1709 79.8023 37.2957 82.0731C37.5178 82.1739 37.7626 82.2145 38.0053 82.1907C38.2481 82.167 38.4804 82.0798 38.6788 81.938C38.8772 81.7961 39.0348 81.6045 39.1358 81.3825C39.2368 81.1604 39.2775 80.9157 39.254 80.6729V77.9313C39.2379 77.5355 39.111 77.1521 38.8877 76.8249C38.6643 76.4978 38.3536 76.2399 37.9909 76.0806Z" fill="white"/>
+<path d="M58.8368 14.9023C58.6147 14.8016 58.3699 14.761 58.1272 14.7847C57.8844 14.8085 57.6522 14.8956 57.4537 15.0375C57.2553 15.1794 57.0977 15.371 56.9967 15.593C56.8958 15.815 56.855 16.0597 56.8785 16.3025V19.0442C56.8946 19.44 57.0215 19.8233 57.2448 20.1505C57.4682 20.4777 57.7789 20.7356 58.1416 20.8948C63.7993 22.9608 68.6852 26.7159 72.1373 31.6516C75.5894 36.5872 77.4408 42.4647 77.4408 48.4877C77.4408 54.5108 75.5894 60.3883 72.1373 65.3239C68.6852 70.2595 63.7993 74.0147 58.1416 76.0806C57.767 76.2229 57.4451 76.4765 57.2192 76.8075C56.9934 77.1384 56.8744 77.5306 56.8785 77.9313V80.6729C56.855 80.9157 56.8958 81.1604 56.9967 81.3825C57.0977 81.6045 57.2553 81.7961 57.4537 81.938C57.6522 82.0798 57.8844 82.167 58.1272 82.1907C58.3699 82.2145 58.6147 82.1739 58.8368 82.0731C65.9616 79.8023 72.1797 75.3246 76.5921 69.2872C81.0044 63.2498 83.3825 55.9656 83.3825 48.4877C83.3825 41.0098 81.0044 33.7257 76.5921 27.6883C72.1797 21.6509 65.9616 17.1731 58.8368 14.9023Z" fill="white"/>
+</svg>

src/assets/img/icons/tokens/wbtc.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="110px" viewBox="0 0 110 110" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>wbtc_colour</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="wbtc_colour" fill-rule="nonzero">
+            <path d="M89.1,22.94 L86.1,25.94 C100.937667,42.1660445 100.937667,67.0339555 86.1,83.26 L89.1,86.26 C105.61263,68.3560643 105.61263,40.7739357 89.1,22.87 L89.1,22.94 Z" id="Shape" fill="#5A5564"></path>
+            <path d="M26,23.2 C42.2260445,8.36233348 67.0939555,8.36233348 83.32,23.2 L86.32,20.2 C68.4160643,3.6873699 40.8339357,3.6873699 22.93,20.2 L26,23.2 Z" id="Shape" fill="#5A5564"></path>
+            <path d="M23.2,83.29 C8.3806134,67.0683667 8.3806134,42.2216333 23.2,26 L20.2,23 C3.6873699,40.9039357 3.6873699,68.4860643 20.2,86.39 L23.2,83.29 Z" id="Shape" fill="#5A5564"></path>
+            <path d="M83.29,86.06 C67.0639555,100.897667 42.1960445,100.897667 25.97,86.06 L22.97,89.06 C40.8739357,105.57263 68.4560643,105.57263 86.36,89.06 L83.29,86.06 Z" id="Shape" fill="#5A5564"></path>
+            <path d="M73.58,44.63 C72.98,38.37 67.58,36.27 60.75,35.63 L60.75,27 L55.47,27 L55.47,35.46 C54.08,35.46 52.66,35.46 51.25,35.51 L51.25,27 L46,27 L46,35.68 C44.86,35.68 43.73,35.68 42.64,35.68 L35.3,35.68 L35.3,41.33 C35.3,41.33 39.2,41.26 39.14,41.33 C40.6016106,41.1692078 41.9279842,42.1949367 42.14,43.65 L42.14,67.42 C42.1092443,67.9181898 41.8805968,68.3834088 41.5049569,68.7120936 C41.1293171,69.0407785 40.6378637,69.2056479 40.14,69.17 C40.21,69.23 36.3,69.17 36.3,69.17 L35.25,75.48 L42.13,75.48 L45.91,75.48 L45.91,84.3 L51.19,84.3 L51.19,75.61 C52.5966667,75.61 54.0033333,75.61 55.41,75.61 L55.41,84.26 L60.7,84.26 L60.7,75.54 C69.62,75 75.84,72.8 76.62,64.45 C77.25,57.73 74.09,54.73 69.04,53.52 C72.11,51.96 74.04,49.21 73.58,44.63 Z M66.18,63.41 C66.18,69.97 54.94,69.22 51.36,69.22 L51.36,57.58 C54.94,57.59 66.18,56.56 66.18,63.41 Z M63.73,47 C63.73,53 54.35,52.27 51.37,52.27 L51.37,41.7 C54.35,41.7 63.73,40.76 63.73,47 Z" id="Shape" fill="#F09242"></path>
+            <path d="M54.63,109.27 C24.4612883,109.264477 0.00816005831,84.8053794 0.0100010171,54.6366673 C0.0118419759,24.4679552 24.4679552,0.0118419759 54.6366673,0.0100010171 C84.8053794,0.00816005831 109.264477,24.4612883 109.27,54.63 C109.236932,84.7931311 84.7931311,109.236932 54.63,109.27 Z M54.63,4.27 C26.8345008,4.28656686 4.31264385,26.8278209 4.32000574,54.6233241 C4.32736763,82.4188272 26.861162,104.948148 54.656666,104.949991 C82.4521701,104.951834 104.988952,82.4255019 105,54.63 C104.966902,26.8316125 82.428405,4.3110136 54.63,4.3 L54.63,4.27 Z" id="Shape" fill="#282138"></path>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/weth.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="29px" height="28px" viewBox="0 0 29 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Wallet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="All-Tokens" transform="translate(-218.000000, -425.000000)">
+            <g id="Group-2" transform="translate(218.000000, 425.000000)">
+                <circle id="Oval-2" fill="#FF0079" fill-rule="nonzero" cx="13.0666667" cy="13.0666667" r="13.0666667"></circle>
+                <rect id="Rectangle-2" fill="#000000" fill-rule="nonzero" x="1.86666667" y="22.4" width="14.9333333" height="5.6" rx="2.8"></rect>
+                <path d="M13.0666667,26.1333333 C5.85014594,26.1333333 0,20.2831874 0,13.0666667 C0,5.85014594 5.85014594,0 13.0666667,0 C20.2831874,0 26.1333333,5.85014594 26.1333333,13.0666667 C26.1333333,20.2831874 20.2831874,26.1333333 13.0666667,26.1333333 Z M13.0666667,25.2 C19.7677216,25.2 25.2,19.7677216 25.2,13.0666667 C25.2,6.3656117 19.7677216,0.933333333 13.0666667,0.933333333 C6.3656117,0.933333333 0.933333333,6.3656117 0.933333333,13.0666667 C0.933333333,19.7677216 6.3656117,25.2 13.0666667,25.2 Z" id="Path" fill="#000000" fill-rule="nonzero"></path>
+                <circle id="Oval-2" fill="#FFFFFF" fill-rule="nonzero" cx="15.8666667" cy="14.9333333" r="12.1333333"></circle>
+                <path d="M15.8666667,28 C8.65014594,28 2.8,22.1498541 2.8,14.9333333 C2.8,7.7168126 8.65014594,1.86666667 15.8666667,1.86666667 C23.0831874,1.86666667 28.9333333,7.7168126 28.9333333,14.9333333 C28.9333333,22.1498541 23.0831874,28 15.8666667,28 Z M15.8666667,27.0666667 C22.5677216,27.0666667 28,21.6343883 28,14.9333333 C28,8.23227837 22.5677216,2.8 15.8666667,2.8 C9.1656117,2.8 3.73333333,8.23227837 3.73333333,14.9333333 C3.73333333,21.6343883 9.1656117,27.0666667 15.8666667,27.0666667 Z" id="Path" fill="#000000" fill-rule="nonzero"></path>
+                <path d="M10.7349203,18.1298177 L9.40277261,18.1298177 L8.65556227,14.9798177 C8.62788768,14.8677078 8.58071578,14.6359718 8.51404516,14.2846029 C8.44737455,13.9332339 8.40900807,13.6973964 8.39894458,13.5770833 C8.38384935,13.7247403 8.34611183,13.961945 8.28573089,14.2887044 C8.22534996,14.6154639 8.17880702,14.848567 8.14610068,14.9880208 L7.40266413,18.1298177 L6.07429019,18.1298177 L4.66666667,12.1333333 L5.81767249,12.1333333 L6.52337115,15.4063802 C6.64664889,16.0106801 6.73596102,16.5343077 6.79131021,16.9772786 C6.80640545,16.8214185 6.84099817,16.5801123 6.89508943,16.2533529 C6.94918068,15.9265934 7.00012633,15.6729827 7.0479279,15.492513 L7.85174509,12.1333333 L8.95746544,12.1333333 L9.76128263,15.492513 C9.79650484,15.6429044 9.84053194,15.8725896 9.89336526,16.1815755 C9.94619858,16.4905614 9.98645193,16.7557932 10.0141265,16.9772786 C10.0392853,16.7639963 10.0795386,16.498081 10.1348878,16.1795247 C10.190237,15.8609685 10.2405537,15.6032562 10.2858394,15.4063802 L10.9877642,12.1333333 L12.1387701,12.1333333 L10.7349203,18.1298177 Z M16.0106782,18.1298177 L12.8331474,18.1298177 L12.8331474,12.1333333 L16.0106782,12.1333333 L16.0106782,13.1751302 L14.0030221,13.1751302 L14.0030221,14.4917318 L15.871048,14.4917318 L15.871048,15.5335286 L14.0030221,15.5335286 L14.0030221,17.0798177 L16.0106782,17.0798177 L16.0106782,18.1298177 Z M19.2901014,18.1298177 L18.1202266,18.1298177 L18.1202266,13.1915365 L16.6220321,13.1915365 L16.6220321,12.1333333 L20.7882958,12.1333333 L20.7882958,13.1915365 L19.2901014,13.1915365 L19.2901014,18.1298177 Z M26.1583984,18.1298177 L24.9922975,18.1298177 L24.9922975,15.5417318 L22.8072733,15.5417318 L22.8072733,18.1298177 L21.6373985,18.1298177 L21.6373985,12.1333333 L22.8072733,12.1333333 L22.8072733,14.4835286 L24.9922975,14.4835286 L24.9922975,12.1333333 L26.1583984,12.1333333 L26.1583984,18.1298177 Z" id="WETH" fill="#000000"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/zil.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>zil</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="IOS?-(for-Mike-Le)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-2-Copy" transform="translate(-216.000000, -73.000000)">
+            <g id="zil" transform="translate(216.000000, 73.000000)">
+                <circle id="Oval-3" stroke="#298E97" fill="#FFFFFF" cx="14" cy="14" r="13.5"></circle>
+                <g transform="translate(7.000000, 5.000000)" fill-rule="nonzero" id="g3766">
+                    <g>
+                        <polygon id="polygon3768" fill="#49C1BF" points="10.1276574 6.35466966 0.0455395589 1.23598055 0.0455395589 4.04080958 6.98135422 7.56220875 0.0455395589 11.1376596 0.0455395589 13.9425529 10.1276574 19.0612421 10.1276574 16.2563487 3.31970616 12.7998758 10.1276574 9.15962738"></polygon>
+                        <polygon id="polygon3770" fill="#298E97" points="10.1276574 6.36650954 12.7464556 5.13323158 12.7464556 7.90916872 10.1276574 9.14238234"></polygon>
+                        <polygon id="polygon3772" fill="#298E97" points="10.1276574 19.060856 12.7464556 17.8329188 12.7464556 9.2596229 10.1276574 10.48756"></polygon>
+                        <polygon id="polygon3774" fill="#077A8F" points="2.68190913 0.0234223719 0.0455395589 1.23598055 0.0845734665 1.25579948 10.1276574 6.36650954 12.7464556 5.13323158"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/icons/tokens/zrx.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="201px" height="201px" viewBox="0 0 201 201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>ZRX</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-1801.000000, -7307.000000)" fill="#000000">
+            <g id="ZRX" transform="translate(1801.000000, 7307.000000)">
+                <path d="M0.7971,94.2274 C1.8281,88.6574 2.7111,83.0524 3.9261,77.5224 C5.9351,68.3824 9.3201,59.7664 14.2641,51.4284 C27.9261,69.3384 41.3551,86.8744 54.6991,104.4764 C59.2011,110.4144 59.1041,110.4884 53.9541,115.7624 C50.8641,118.9274 47.8741,122.2004 44.6471,125.2174 C42.7781,126.9644 42.6591,128.4684 43.8591,130.6474 C48.6391,139.3304 54.9581,146.6374 62.8691,152.5864 C63.7871,153.2784 64.7021,153.9744 65.9931,154.9524 C60.6091,159.0834 55.4891,163.0464 50.3301,166.9574 C46.8091,169.6284 43.1991,172.1834 39.6921,174.8724 C37.8181,176.3064 36.2491,176.7034 34.2691,174.8594 C18.9451,160.5934 8.3641,143.5654 3.8461,122.9884 C2.7181,117.8534 1.8071,112.6694 0.7971,107.5084 L0.7971,94.2274 Z" id="Fill-841"></path>
+                <path d="M107.0461,0.4774 C112.6241,1.5054 118.2251,2.4254 123.7751,3.5844 C133.1001,5.5314 141.7841,9.1484 150.6751,14.1944 C130.3081,28.8144 110.3321,43.1524 89.9551,57.7794 C85.4841,53.4084 80.9271,49.1954 76.6761,44.6934 C74.5821,42.4764 72.8821,42.3394 70.2981,43.7964 C60.8441,49.1274 53.1381,56.3214 46.6531,65.6584 C45.3441,64.0264 44.2211,62.7004 43.1771,61.3144 C37.6241,53.9434 32.1411,46.5194 26.5181,39.2024 C25.0031,37.2304 24.9051,35.8704 26.6941,33.9154 C43.2131,15.8694 63.6741,5.3354 87.7281,1.5364 C89.9991,1.1764 92.2741,0.8304 94.5461,0.4774 L107.0461,0.4774 Z" id="Fill-843"></path>
+                <path d="M51.429,186.7947 C71.439,171.8367 91.07,157.1617 111.711,141.7317 C116.098,146.5127 120.55,151.0557 124.624,155.9157 C127.096,158.8637 129.242,158.6847 132.29,156.9007 C141.417,151.5597 148.997,144.6297 155.177,135.3697 C158.427,139.5537 161.525,143.4627 164.535,147.4387 C167.986,151.9937 171.22,156.7197 174.813,161.1567 C177.117,164.0017 176.567,165.8677 174.171,168.3857 C158.334,185.0227 139.132,195.4107 116.543,199.1637 C94.293,202.8597 73.213,198.7367 53.323,188.2557 C52.763,187.9607 52.304,187.4787 51.429,186.7947" id="Fill-845"></path>
+                <path d="M135.6575,46.0906 C145.1115,39.0396 154.1075,32.4226 162.9795,25.6446 C165.0965,24.0266 166.2675,25.2306 167.6115,26.4546 C176.7285,34.7626 184.1945,44.3516 189.7785,55.3616 C197.8095,71.1956 201.6615,88.0426 200.6345,105.7376 C199.7545,120.8746 195.8455,135.3126 187.8035,149.2596 C183.7705,143.9916 180.0105,139.1246 176.2975,134.2226 C165.9405,120.5516 155.6365,106.8426 145.2225,93.2156 C143.7755,91.3206 143.5765,90.1516 145.4635,88.3486 C149.5015,84.4876 153.1535,80.2256 157.1575,76.3266 C159.1105,74.4246 159.1425,72.8046 157.9115,70.5226 C153.2645,61.9096 146.9925,54.7396 139.2495,48.8146 C138.2295,48.0326 137.2035,47.2626 135.6575,46.0906" id="Fill-847"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/environments/environment.prod.ts

@@ -1,3 +1,7 @@
 export const environment = {
-  production: true
+  production: true,
+  instanode:"https://api.instadapp.io",
+  instadapp:"https://instadapp.io",
+  mkr: "https://mkr.tools/api/v1"
+
 };

src/environments/environment.ts

@@ -3,7 +3,11 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  instanode: "/compoundAPI",
+  instadapp: "/instadappAPI",
+  mkr: "/mkr"
+
 };
 
 /*

src/index.html

@@ -1,14 +1,25 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
-  <title>InstaDashboard</title>
+  <title>InstaDApp | Alternate Dashboard</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
+  <script src="https://kit.fontawesome.com/39d1ced265.js"></script>
 </head>
+
 <body>
   <app-root></app-root>
 </body>
+
 </html>

src/main.ts

@@ -1,3 +1,4 @@
+
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
@@ -5,8 +6,8 @@ import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
 if (environment.production) {
-  enableProdMode();
-}
+    enableProdMode();
+  }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+  platformBrowserDynamic().bootstrapModule(AppModule)
+    .catch(err => console.error(err));