From ec4a271bdf6657ae8290820e5cd341225246a1f2 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Sun, 18 Apr 2021 21:53:43 -0300
Subject: [PATCH 01/66] Creating dashboard's view

---
 src/app/app-routing.module.ts                 |   4 +
 .../views/dashboard/dashboard.component.html  |  18 +++
 .../views/dashboard/dashboard.component.scss  |  20 ++++
 .../views/dashboard/dashboard.component.ts    | 111 ++++++++++++++++++
 src/app/views/dashboard/dashboard.module.ts   |  36 ++++++
 5 files changed, 189 insertions(+)
 create mode 100644 src/app/views/dashboard/dashboard.component.html
 create mode 100644 src/app/views/dashboard/dashboard.component.scss
 create mode 100644 src/app/views/dashboard/dashboard.component.ts
 create mode 100644 src/app/views/dashboard/dashboard.module.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d41f7dcdd..63ed83cd7 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -10,6 +10,10 @@ const routes: Routes = [
     path: 'activity',
     loadChildren: () => import('./views/active-loans/active-loans.module').then(m => m.ActiveLoansModule)
   },
+  {
+    path: 'dashboard/:address',
+    loadChildren: () => import('./views/dashboard/dashboard.module').then(m => m.DashboardModule)
+  },
   {
     path: 'address/:address',
     loadChildren: () => import('./views/address/address.module').then(m => m.AddressModule)
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
new file mode 100644
index 000000000..c1fe11007
--- /dev/null
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -0,0 +1,18 @@
+<div
+  class="body-scrollable requested-wrapper"
+  [ngClass]="{ active: filtersOpen, disabled: filtersOpen === false }"
+>
+  <div class="container">
+    <div class="page-header">
+      <app-page-header
+        title="MY DASHBOARD"
+        description="Check all your loans status and operations."
+      >
+      </app-page-header>
+    </div>
+    <div class="dashboard">
+      <p class="dashboard__title">MY LOANS</p>
+    </div>
+  </div>
+  <app-footer></app-footer>
+</div>
\ No newline at end of file
diff --git a/src/app/views/dashboard/dashboard.component.scss b/src/app/views/dashboard/dashboard.component.scss
new file mode 100644
index 000000000..d45c85d99
--- /dev/null
+++ b/src/app/views/dashboard/dashboard.component.scss
@@ -0,0 +1,20 @@
+@import 'src/scss/fonts';
+
+@media (min-width: 768px) {
+}
+
+@media (min-width: 992px) {
+
+  .page-header {
+    margin-bottom: 30px;
+  }
+
+  .dashboard {
+    background-color: #212124;
+    padding: 21px 25px;
+    &__title {
+      @include styled-font('proxima-nova', 800, 18px);
+    }
+  }
+
+}
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
new file mode 100644
index 000000000..b55383813
--- /dev/null
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -0,0 +1,111 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Loan, LoanType } from '../../models/loan.model';
+import { LoanContentApi } from '../../interfaces/loan-api-diaspore';
+import { LoanUtils } from '../../utils/loan-utils';
+import { ProxyApiService } from '../../services/proxy-api.service';
+import { EventsService } from '../../services/events.service';
+import { TitleService } from '../../services/title.service';
+import { LoanTypeService } from '../../services/loan-type.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit, OnDestroy {
+  pageId = 'active-loans';
+  loans = [];
+  // pagination
+  page = 1;
+  count = 0;
+  sort: object;
+  filters: object;
+  filtersState = {
+    currency: undefined,
+    amountStart: null,
+    amountEnd: null,
+    interest: null,
+    duration: null
+  };
+  isLoading: boolean;
+  isFullScrolled: boolean;
+  isAvailableLoans = true;
+  // filters component
+  filtersOpen: boolean;
+
+  constructor(
+    private proxyApiService: ProxyApiService,
+    private titleService: TitleService,
+    private eventsService: EventsService,
+    private loanTypeService: LoanTypeService,
+  ) { }
+
+  ngOnInit() {
+    this.titleService.changeTitle('Dashboard');
+    this.loadLoans();
+  }
+
+  ngOnDestroy() {
+    this.loading = false;
+  }
+
+  /**
+   * Load active loans
+   * @param page Page
+   * @param sort Order by
+   * @return Loans
+   */
+  private async loadLoans(
+    page: number = this.page,
+    sort: object = this.sort,
+    filters: object = this.filters,
+    currentLoadedLoans = 0
+  ) {
+    this.loading = true;
+
+    try {
+      const PAGE_SIZE = 20;
+      const { content, meta } = await this.proxyApiService.getRequests(page, PAGE_SIZE, sort, filters);
+      this.count = meta.count;
+
+      const loans: Loan[] = content.map((loanData: LoanContentApi) => LoanUtils.buildLoan(loanData));
+      const ALLOWED_TYPES = [LoanType.UnknownWithCollateral, LoanType.FintechOriginator, LoanType.NftCollateral];
+      const filteredLoans: Loan[] = this.loanTypeService.filterLoanByType(loans, ALLOWED_TYPES);
+
+      // if there are no more loans
+      if (!loans.length) {
+        this.isFullScrolled = true;
+        this.isAvailableLoans = this.loans.length ? true : false;
+      }
+
+      // set loan index as positions
+      filteredLoans.map((loan: Loan, i: number) => loan.position = i);
+
+      // if there are more loans add them and continue
+      if (loans.length) {
+        this.loans = this.loans.concat(filteredLoans);
+        this.page++;
+      }
+
+      // incrase current paginator results
+      currentLoadedLoans = currentLoadedLoans + filteredLoans.length;
+
+      const MINIMUN_LOANS_TO_SHOW = 12;
+      if (loans.length && currentLoadedLoans < MINIMUN_LOANS_TO_SHOW) {
+        await this.loadLoans(this.page, this.sort, this.filters, currentLoadedLoans);
+      }
+    } catch (err) {
+      this.eventsService.trackError(err);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  private set loading(loading: boolean) {
+    this.isLoading = loading;
+  }
+
+  private get loading() {
+    return this.isLoading;
+  }
+}
diff --git a/src/app/views/dashboard/dashboard.module.ts b/src/app/views/dashboard/dashboard.module.ts
new file mode 100644
index 000000000..7dc1f31f2
--- /dev/null
+++ b/src/app/views/dashboard/dashboard.module.ts
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+import { VirtualScrollerModule } from 'ngx-virtual-scroller';
+// App Modules
+import { SharedModule } from '../../shared/shared.module';
+// App Services
+import { ContractsService } from '../../services/contracts.service';
+// App Component
+import { DashboardComponent } from './dashboard.component';
+
+const routes: Routes = [
+  { path: '', component: DashboardComponent }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    VirtualScrollerModule,
+    SharedModule,
+    ReactiveFormsModule,
+    FormsModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [
+    DashboardComponent
+  ],
+  providers: [
+    ContractsService
+  ],
+  exports: [
+    DashboardComponent
+  ]
+})
+export class DashboardModule { }

From 64df460154a3d576e9637153091016a2a3954da7 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Sun, 18 Apr 2021 21:54:30 -0300
Subject: [PATCH 02/66] Creating dashboard's view

---
 src/app/views/dashboard/dashboard.component.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index b55383813..eefb6e866 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -37,7 +37,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     private proxyApiService: ProxyApiService,
     private titleService: TitleService,
     private eventsService: EventsService,
-    private loanTypeService: LoanTypeService,
+    private loanTypeService: LoanTypeService
   ) { }
 
   ngOnInit() {
@@ -105,7 +105,4 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.isLoading = loading;
   }
 
-  private get loading() {
-    return this.isLoading;
-  }
 }

From 2e39c9cb4ecb664effaf9903f3700ad428c32636 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 19 Apr 2021 15:32:08 -0300
Subject: [PATCH 03/66] adding dashboard list component

---
 .../dashboard-list.component.html             | 28 ++++++++++
 .../dashboard-list.component.scss             | 52 +++++++++++++++++++
 .../dashboard-list.component.spec.ts          | 26 ++++++++++
 .../dashboard-list.component.ts               | 17 ++++++
 4 files changed, 123 insertions(+)
 create mode 100644 src/app/shared/dashboard-list/dashboard-list.component.html
 create mode 100644 src/app/shared/dashboard-list/dashboard-list.component.scss
 create mode 100644 src/app/shared/dashboard-list/dashboard-list.component.spec.ts
 create mode 100644 src/app/shared/dashboard-list/dashboard-list.component.ts

diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
new file mode 100644
index 000000000..1146fbb6e
--- /dev/null
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -0,0 +1,28 @@
+<div class="list">
+    <div class="list__header">
+        <p class="list__header__title">
+            {{ title }}
+        </p>
+        <div class="list__header__table">
+            <p>Borrowed</p>
+            <p>Repaid</p>
+            <p>Anual Rate</p>
+            <p>Time Progress</p>
+            <p>Payment Progress</p>
+        </div>
+    </div>
+    <div class="list__item">
+        <div class="list__item__column">8,000 ARS</div>
+        <div class="list__item__column">8,466.67</div>
+        <div class="list__item__column">70.00%</div>
+        <div class="list__item__column list__item__column__progress">
+            <app-progress-bar progress="50%" subprogress="70%"></app-progress-bar>
+        </div>
+        <div class="list__item__column list__item__column__payment">
+            <div class="row">
+                <div class="col-6">0%</div>
+                <div class="col-2"><i class="fas fa-ellipsis-v"></i></div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.scss b/src/app/shared/dashboard-list/dashboard-list.component.scss
new file mode 100644
index 000000000..ba9b7a35b
--- /dev/null
+++ b/src/app/shared/dashboard-list/dashboard-list.component.scss
@@ -0,0 +1,52 @@
+@import 'src/scss/fonts';
+
+@media (min-width: 768px) {
+}
+
+@media (min-width: 992px) {
+
+  .list {
+      &__header {
+          text-align: center;
+          background-color: #262629;
+          border-radius: 5px;
+          padding: 13px 5px 15px;
+          &__title {
+            @include styled-font('proxima-nova', 700, 14px);
+            margin-bottom: 15px;
+          }
+          &__table p{
+            width: 20%;
+            display: inline-block;
+            color: #A09F9F;
+            @include styled-font('proxima-nova', 1000, 11px);
+          }
+      }
+      &__item {
+          margin-top: 10px;
+          background-color: #313134;
+          box-shadow: 0px 3px 6px #00000029;
+          border-radius: 5px;
+          height: 65px;
+          border-left: 6px solid #4155FF;
+          &__column {
+            @include styled-font('Roboto', 400, 15px);
+            display: inline-block;
+            width: 20%;
+            margin-top: 22px;
+            &__progress {
+                padding: 0 10px;
+            }
+            &__payment {
+                padding-left: 15px;
+            }
+            svg {
+                color: #A09F9F;
+                font-size: 22px;
+                cursor: pointer;
+            }
+          }
+      }
+  }
+
+}
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.spec.ts b/src/app/shared/dashboard-list/dashboard-list.component.spec.ts
new file mode 100644
index 000000000..ff1888952
--- /dev/null
+++ b/src/app/shared/dashboard-list/dashboard-list.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { DashboardListComponent } from './dashboard-list.component';
+
+describe('DashboardListComponent', () => {
+  let component: DashboardListComponent;
+  let fixture: ComponentFixture<DashboardListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardListComponent ],
+      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.ts b/src/app/shared/dashboard-list/dashboard-list.component.ts
new file mode 100644
index 000000000..db26b5be7
--- /dev/null
+++ b/src/app/shared/dashboard-list/dashboard-list.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard-list',
+  templateUrl: './dashboard-list.component.html',
+  styleUrls: ['./dashboard-list.component.scss']
+})
+export class DashboardListComponent implements OnInit {
+
+  @Input() title: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

From e9c741d1504818966e80014e694d229a3a122c23 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 19 Apr 2021 15:33:42 -0300
Subject: [PATCH 04/66] adding progressbar component

---
 .../progress-bar/progress-bar.component.html  |  5 ++++
 .../progress-bar/progress-bar.component.scss  | 25 +++++++++++++++++++
 .../progress-bar.component.spec.ts            | 25 +++++++++++++++++++
 .../progress-bar/progress-bar.component.ts    | 18 +++++++++++++
 4 files changed, 73 insertions(+)
 create mode 100644 src/app/shared/progress-bar/progress-bar.component.html
 create mode 100644 src/app/shared/progress-bar/progress-bar.component.scss
 create mode 100644 src/app/shared/progress-bar/progress-bar.component.spec.ts
 create mode 100644 src/app/shared/progress-bar/progress-bar.component.ts

diff --git a/src/app/shared/progress-bar/progress-bar.component.html b/src/app/shared/progress-bar/progress-bar.component.html
new file mode 100644
index 000000000..830b1814c
--- /dev/null
+++ b/src/app/shared/progress-bar/progress-bar.component.html
@@ -0,0 +1,5 @@
+<div class="container-progress-bar">
+    <div class="progress-bar progress-bar--default"></div>
+    <div class="progress-bar progress-bar--primary" [ngStyle]="{'width': progress}"></div>
+    <div class="progress-bar progress-bar--secondary" [ngStyle]="{'width': subprogress}"></div>
+</div>
diff --git a/src/app/shared/progress-bar/progress-bar.component.scss b/src/app/shared/progress-bar/progress-bar.component.scss
new file mode 100644
index 000000000..e8247fbde
--- /dev/null
+++ b/src/app/shared/progress-bar/progress-bar.component.scss
@@ -0,0 +1,25 @@
+.container-progress-bar{
+    position: relative;
+}
+
+.progress-bar {
+    height: 5px;
+    border-radius: 5px;
+    &--default {
+        width: 100%;
+        background-color: #3B3B3B;
+    }
+    &--primary, &--secondary {
+        position: absolute;
+        top: 0%;
+    }
+    &--primary {
+        z-index: 2;
+        background-color: #4155FF;
+    }
+    &--secondary {
+        z-index: 1;
+        width: 0%;
+        background-color: #D97D3A;
+    }
+}
\ No newline at end of file
diff --git a/src/app/shared/progress-bar/progress-bar.component.spec.ts b/src/app/shared/progress-bar/progress-bar.component.spec.ts
new file mode 100644
index 000000000..f41343a1f
--- /dev/null
+++ b/src/app/shared/progress-bar/progress-bar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressBarComponent } from './progress-bar.component';
+
+describe('ProgressBarComponent', () => {
+  let component: ProgressBarComponent;
+  let fixture: ComponentFixture<ProgressBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProgressBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProgressBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/progress-bar/progress-bar.component.ts b/src/app/shared/progress-bar/progress-bar.component.ts
new file mode 100644
index 000000000..da5e55ca0
--- /dev/null
+++ b/src/app/shared/progress-bar/progress-bar.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-progress-bar',
+  templateUrl: './progress-bar.component.html',
+  styleUrls: ['./progress-bar.component.scss']
+})
+export class ProgressBarComponent implements OnInit {
+
+  @Input() progress: string;
+  @Input() subprogress: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

From eb2a0effd600bfc0ef8ffd57f958dc22d9b33df0 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 19 Apr 2021 15:35:03 -0300
Subject: [PATCH 05/66] layout address

---
 src/app/shared/shared.module.ts               |  8 +++++++-
 .../views/dashboard/dashboard.component.html  | 19 ++++++++++++++++++-
 .../views/dashboard/dashboard.component.scss  | 17 +++++++++++++++--
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 76a54cd4a..a4699b68e 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -60,6 +60,8 @@ import { IdentityService } from './../services/identity.service';
 import { CountriesService } from './../services/countries.service';
 import { CollateralService } from './../services/collateral.service';
 import { EventsService } from './../services/events.service';
+import { DashboardListComponent } from './dashboard-list/dashboard-list.component';
+import { ProgressBarComponent } from './progress-bar/progress-bar.component';
 
 @NgModule({
   imports: [
@@ -115,7 +117,9 @@ import { EventsService } from './../services/events.service';
 
     VisualUrlPipe,
     FormatAmountPipe,
-    FormatAddressPipe
+    FormatAddressPipe,
+    DashboardListComponent,
+    ProgressBarComponent
   ],
   entryComponents: [
     DialogInsufficientfundsComponent,
@@ -149,6 +153,8 @@ import { EventsService } from './../services/events.service';
     DialogHeaderComponent,
     LendButtonComponent,
     DetailButtonComponent,
+    DashboardListComponent,
+    ProgressBarComponent,
     PayButtonComponent,
     CloseButtonComponent,
     RedeemButtonComponent,
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index c1fe11007..a40f80909 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -11,7 +11,24 @@
       </app-page-header>
     </div>
     <div class="dashboard">
-      <p class="dashboard__title">MY LOANS</p>
+      <div class="row">
+        <div class="col-md-9">
+          <p class="dashboard__title">MY LOANS</p>
+        </div>
+        <div class="col-md-3">
+          <p class="dashboard__link">SEE OLD LOANS <i class="fas fa-plus-circle"></i></p>
+        </div>
+      </div>
+      <div class="dashboard__content">
+        <div class="row">
+          <div class="col-md-6">
+            <app-dashboard-list title="CURRENT BORROWED"></app-dashboard-list>
+          </div>
+          <div class="col-md-6">
+            <app-dashboard-list title="CURRENT LENT"></app-dashboard-list>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <app-footer></app-footer>
diff --git a/src/app/views/dashboard/dashboard.component.scss b/src/app/views/dashboard/dashboard.component.scss
index d45c85d99..2d6e069fa 100644
--- a/src/app/views/dashboard/dashboard.component.scss
+++ b/src/app/views/dashboard/dashboard.component.scss
@@ -13,8 +13,21 @@
     background-color: #212124;
     padding: 21px 25px;
     &__title {
-      @include styled-font('proxima-nova', 800, 18px);
+      @include styled-font('proxima-nova', 600, 18px);
+    }
+    &__link {
+      @include styled-font('proxima-nova', 800, 11px);
+      color: #7684FF;
+      margin-top: 4px;
+      cursor: pointer;
+      text-align: right;
+      svg {
+        margin-left: 4px;
+      }
+    }
+    &__content {
+      margin-top: 30px;
+      text-align: center;
     }
   }
-
 }

From 3548d6f29273990d4ac4a893707358441d7acdb0 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Tue, 20 Apr 2021 17:10:17 -0300
Subject: [PATCH 06/66] adding menu and styles in dashboardlist

---
 .../dashboard-list.component.html             | 48 ++++++++++++++-----
 .../dashboard-list.component.scss             | 23 +++++++++
 .../dashboard-list.component.ts               |  3 ++
 .../views/dashboard/dashboard.component.html  | 11 +++--
 .../views/dashboard/dashboard.component.scss  |  1 +
 .../views/dashboard/dashboard.component.ts    | 33 ++++++-------
 src/styles.scss                               |  2 +-
 7 files changed, 88 insertions(+), 33 deletions(-)

diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index 1146fbb6e..4ad4a23f6 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -11,18 +11,44 @@
             <p>Payment Progress</p>
         </div>
     </div>
-    <div class="list__item">
-        <div class="list__item__column">8,000 ARS</div>
-        <div class="list__item__column">8,466.67</div>
-        <div class="list__item__column">70.00%</div>
-        <div class="list__item__column list__item__column__progress">
-            <app-progress-bar progress="50%" subprogress="70%"></app-progress-bar>
-        </div>
-        <div class="list__item__column list__item__column__payment">
-            <div class="row">
-                <div class="col-6">0%</div>
-                <div class="col-2"><i class="fas fa-ellipsis-v"></i></div>
+    <div class="list__item-container" *ngIf="loans.length">
+        <div *ngFor="let loan of loans" class="list__item">
+            <div class="list__item__column">8,000 ARS</div>
+            <div class="list__item__column">8,466.67</div>
+            <div class="list__item__column">70.00%</div>
+            <div class="list__item__column list__item__column__progress">
+                <app-progress-bar progress="50%" subprogress="70%"></app-progress-bar>
+            </div>
+            <div class="list__item__column list__item__column__payment">
+                <div class="row">
+                    <div class="col-6">0%</div>
+                    <div *ngIf="showOptions" class="col-2">
+                        <button mat-icon-button [matMenuTriggerFor]="appMenu">
+                            <i class="fas fa-ellipsis-v"></i>
+                        </button>
+                    </div>
+                    <mat-menu #appMenu="matMenu" yPosition="below">
+                        <button class="list__item__button--separator" mat-menu-item>Pay</button>
+                        <button mat-menu-item>Withdraw Collateral</button>
+                        <button mat-menu-item>Add Collateral</button>
+                    </mat-menu>
+                </div>
             </div>
         </div>
     </div>
+    <ng-container *ngIf="!loans.length">
+        <div class="list__empty-state row justify-content-md-center">
+            <div class="col-md-10">
+                <div class="row">
+                    <div class="col-md-3">
+                        <img src="./assets/empty-states/lent.svg" alt="Not Found Lend">
+                    </div>
+                    <div class="col-md-9">
+                        <p class="list__empty-state__title">Hey! You don´t have any funded loans yet.</p>
+                        <p class="list__empty-state__subtitle">If you want to start lending, check the Lend section.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-container>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.scss b/src/app/shared/dashboard-list/dashboard-list.component.scss
index ba9b7a35b..605f95636 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.scss
+++ b/src/app/shared/dashboard-list/dashboard-list.component.scss
@@ -39,6 +39,10 @@
             }
             &__payment {
                 padding-left: 15px;
+                button {
+                    top: -10px;
+                    left: -10px;
+                }
             }
             svg {
                 color: #A09F9F;
@@ -46,6 +50,25 @@
                 cursor: pointer;
             }
           }
+          &__button--separator {
+              border-bottom: 1px solid #6a6a6b;
+          }
+      }
+      &__empty-state {
+          margin-top: 140px;
+          text-align: left;
+          &__title {
+            margin-top: 10px;
+            @include styled-font('proxima-nova', 400, 18px);
+          }
+          &__subtitle {
+            @include styled-font('proxima-nova', 400, 12px);
+            margin-top: 16px;
+          }
+      }
+      &__item-container {
+          overflow: scroll;
+          height: 405px;
       }
   }
 
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.ts b/src/app/shared/dashboard-list/dashboard-list.component.ts
index db26b5be7..3ec4e249f 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.ts
+++ b/src/app/shared/dashboard-list/dashboard-list.component.ts
@@ -8,6 +8,9 @@ import { Component, Input, OnInit } from '@angular/core';
 export class DashboardListComponent implements OnInit {
 
   @Input() title: string;
+  @Input() isCurrentLoans: boolean;
+  @Input() showOptions: boolean;
+  @Input() loans: [];
 
   constructor() { }
 
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index a40f80909..c0a819c72 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -16,16 +16,17 @@
           <p class="dashboard__title">MY LOANS</p>
         </div>
         <div class="col-md-3">
-          <p class="dashboard__link">SEE OLD LOANS <i class="fas fa-plus-circle"></i></p>
+          <p *ngIf="isCurrentLoans" (click)="setCurrentLoans(false)" class="dashboard__link">SEE OLD LOANS <i class="fas fa-plus-circle"></i></p>
+          <p *ngIf="!isCurrentLoans" (click)="setCurrentLoans(true)" class="dashboard__link">SEE CURRENT LOANS <i class="fas fa-plus-circle"></i></p>
         </div>
       </div>
       <div class="dashboard__content">
         <div class="row">
-          <div class="col-md-6">
-            <app-dashboard-list title="CURRENT BORROWED"></app-dashboard-list>
+          <div *ngIf="!isLoading" class="col-md-6">
+            <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="loans" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
           </div>
-          <div class="col-md-6">
-            <app-dashboard-list title="CURRENT LENT"></app-dashboard-list>
+          <div *ngIf="!isLoading" class="col-md-6">
+            <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="[]" [showOptions]="false" title="CURRENT LENT"></app-dashboard-list>
           </div>
         </div>
       </div>
diff --git a/src/app/views/dashboard/dashboard.component.scss b/src/app/views/dashboard/dashboard.component.scss
index 2d6e069fa..a6b425633 100644
--- a/src/app/views/dashboard/dashboard.component.scss
+++ b/src/app/views/dashboard/dashboard.component.scss
@@ -12,6 +12,7 @@
   .dashboard {
     background-color: #212124;
     padding: 21px 25px;
+    height: 550px;
     &__title {
       @include styled-font('proxima-nova', 600, 18px);
     }
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index eefb6e866..3cc7edee6 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -1,11 +1,10 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Loan, LoanType } from '../../models/loan.model';
+import { Loan } from '../../models/loan.model';
 import { LoanContentApi } from '../../interfaces/loan-api-diaspore';
 import { LoanUtils } from '../../utils/loan-utils';
 import { ProxyApiService } from '../../services/proxy-api.service';
 import { EventsService } from '../../services/events.service';
 import { TitleService } from '../../services/title.service';
-import { LoanTypeService } from '../../services/loan-type.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -14,6 +13,8 @@ import { LoanTypeService } from '../../services/loan-type.service';
 })
 export class DashboardComponent implements OnInit, OnDestroy {
   pageId = 'active-loans';
+  address = '0x6b800281ca137fE073c662e34440420E91F43DeB';
+  // FIXME: Change var dynamic
   loans = [];
   // pagination
   page = 1;
@@ -32,12 +33,12 @@ export class DashboardComponent implements OnInit, OnDestroy {
   isAvailableLoans = true;
   // filters component
   filtersOpen: boolean;
+  isCurrentLoans = true;
 
   constructor(
     private proxyApiService: ProxyApiService,
     private titleService: TitleService,
-    private eventsService: EventsService,
-    private loanTypeService: LoanTypeService
+    private eventsService: EventsService
   ) { }
 
   ngOnInit() {
@@ -49,6 +50,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.loading = false;
   }
 
+  setCurrentLoans(isCurrentLoans: boolean) {
+    this.isCurrentLoans = isCurrentLoans;
+  }
+
   /**
    * Load active loans
    * @param page Page
@@ -56,21 +61,17 @@ export class DashboardComponent implements OnInit, OnDestroy {
    * @return Loans
    */
   private async loadLoans(
+    address: string = this.address,
     page: number = this.page,
     sort: object = this.sort,
-    filters: object = this.filters,
     currentLoadedLoans = 0
   ) {
     this.loading = true;
 
     try {
-      const PAGE_SIZE = 20;
-      const { content, meta } = await this.proxyApiService.getRequests(page, PAGE_SIZE, sort, filters);
-      this.count = meta.count;
-
+      const PAGE_SIZE = 4;
+      const { content } = await this.proxyApiService.getBorrowed(address, page, PAGE_SIZE, sort);
       const loans: Loan[] = content.map((loanData: LoanContentApi) => LoanUtils.buildLoan(loanData));
-      const ALLOWED_TYPES = [LoanType.UnknownWithCollateral, LoanType.FintechOriginator, LoanType.NftCollateral];
-      const filteredLoans: Loan[] = this.loanTypeService.filterLoanByType(loans, ALLOWED_TYPES);
 
       // if there are no more loans
       if (!loans.length) {
@@ -79,20 +80,20 @@ export class DashboardComponent implements OnInit, OnDestroy {
       }
 
       // set loan index as positions
-      filteredLoans.map((loan: Loan, i: number) => loan.position = i);
+      loans.map((loan: Loan, i: number) => loan.position = i);
 
       // if there are more loans add them and continue
       if (loans.length) {
-        this.loans = this.loans.concat(filteredLoans);
+        this.loans = this.loans.concat(loans);
         this.page++;
       }
 
       // incrase current paginator results
-      currentLoadedLoans = currentLoadedLoans + filteredLoans.length;
+      currentLoadedLoans = currentLoadedLoans + loans.length;
 
-      const MINIMUN_LOANS_TO_SHOW = 12;
+      const MINIMUN_LOANS_TO_SHOW = 4;
       if (loans.length && currentLoadedLoans < MINIMUN_LOANS_TO_SHOW) {
-        await this.loadLoans(this.page, this.sort, this.filters, currentLoadedLoans);
+        await this.loadLoans(this.address, this.page, this.sort, currentLoadedLoans);
       }
     } catch (err) {
       this.eventsService.trackError(err);
diff --git a/src/styles.scss b/src/styles.scss
index c4eccd9bb..e7c262a16 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -347,7 +347,7 @@ mat-chip.mat-chip {
 }
 
 // Menu
-.mat-menu-panel {
+.button-group .mat-menu-panel {
   margin-top: 70px;
   border-top-right-radius: 0px !important;
   border-top-left-radius: 0px !important;

From d63d66f3101948b9cecfe0fce6202c40f3b0b7c4 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Tue, 20 Apr 2021 17:51:20 -0300
Subject: [PATCH 07/66] using empty state component

---
 .../dashboard-list/dashboard-list.component.html   | 14 ++------------
 .../dashboard-list/dashboard-list.component.scss   | 11 +----------
 2 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index 4ad4a23f6..9d17bdea5 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -37,18 +37,8 @@
         </div>
     </div>
     <ng-container *ngIf="!loans.length">
-        <div class="list__empty-state row justify-content-md-center">
-            <div class="col-md-10">
-                <div class="row">
-                    <div class="col-md-3">
-                        <img src="./assets/empty-states/lent.svg" alt="Not Found Lend">
-                    </div>
-                    <div class="col-md-9">
-                        <p class="list__empty-state__title">Hey! You don´t have any funded loans yet.</p>
-                        <p class="list__empty-state__subtitle">If you want to start lending, check the Lend section.</p>
-                    </div>
-                </div>
-            </div>
+        <div class="list__empty-state">
+            <app-empty-state title="Hey! You don´t have any funded loans yet." image="./assets/empty-states/lent.svg" description="If you want to start lending, check the Lend section."></app-empty-state>
         </div>
     </ng-container>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.scss b/src/app/shared/dashboard-list/dashboard-list.component.scss
index 605f95636..f6d9caa68 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.scss
+++ b/src/app/shared/dashboard-list/dashboard-list.component.scss
@@ -55,16 +55,7 @@
           }
       }
       &__empty-state {
-          margin-top: 140px;
-          text-align: left;
-          &__title {
-            margin-top: 10px;
-            @include styled-font('proxima-nova', 400, 18px);
-          }
-          &__subtitle {
-            @include styled-font('proxima-nova', 400, 12px);
-            margin-top: 16px;
-          }
+          padding: 0 40px;
       }
       &__item-container {
           overflow: scroll;

From 943bb973655f64477b50cd81ae57356c045d6409 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Tue, 20 Apr 2021 18:27:36 -0300
Subject: [PATCH 08/66] change route dashboard

---
 src/app/app-routing.module.ts                 |  2 +-
 .../views/dashboard/dashboard.component.html  |  6 ++--
 .../views/dashboard/dashboard.component.ts    | 36 +++++++++++++++++--
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 63ed83cd7..6f5cc67bd 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -11,7 +11,7 @@ const routes: Routes = [
     loadChildren: () => import('./views/active-loans/active-loans.module').then(m => m.ActiveLoansModule)
   },
   {
-    path: 'dashboard/:address',
+    path: 'dashboard',
     loadChildren: () => import('./views/dashboard/dashboard.module').then(m => m.DashboardModule)
   },
   {
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index c0a819c72..c554f9619 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -13,11 +13,11 @@
     <div class="dashboard">
       <div class="row">
         <div class="col-md-9">
-          <p class="dashboard__title">MY LOANS</p>
+          <p class="dashboard__title">LOANS</p>
         </div>
         <div class="col-md-3">
-          <p *ngIf="isCurrentLoans" (click)="setCurrentLoans(false)" class="dashboard__link">SEE OLD LOANS <i class="fas fa-plus-circle"></i></p>
-          <p *ngIf="!isCurrentLoans" (click)="setCurrentLoans(true)" class="dashboard__link">SEE CURRENT LOANS <i class="fas fa-plus-circle"></i></p>
+          <p *ngIf="isCurrentLoans" (click)="setCurrentLoans(false)" class="dashboard__link">INACTIVES <i class="fas fa-plus-circle"></i></p>
+          <p *ngIf="!isCurrentLoans" (click)="setCurrentLoans(true)" class="dashboard__link">ACTIVES <i class="fas fa-plus-circle"></i></p>
         </div>
       </div>
       <div class="dashboard__content">
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index 3cc7edee6..efc498864 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -1,10 +1,12 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { Loan } from '../../models/loan.model';
 import { LoanContentApi } from '../../interfaces/loan-api-diaspore';
 import { LoanUtils } from '../../utils/loan-utils';
 import { ProxyApiService } from '../../services/proxy-api.service';
 import { EventsService } from '../../services/events.service';
 import { TitleService } from '../../services/title.service';
+import { Web3Service } from '../../services/web3.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -34,26 +36,44 @@ export class DashboardComponent implements OnInit, OnDestroy {
   // filters component
   filtersOpen: boolean;
   isCurrentLoans = true;
+  private subscriptionAccount: Subscription;
 
   constructor(
     private proxyApiService: ProxyApiService,
     private titleService: TitleService,
-    private eventsService: EventsService
+    private eventsService: EventsService,
+    private web3Service: Web3Service
   ) { }
 
-  ngOnInit() {
+  async ngOnInit() {
     this.titleService.changeTitle('Dashboard');
+    await this.loadAccount();
+    this.handleLoginEvents();
     this.loadLoans();
   }
 
   ngOnDestroy() {
     this.loading = false;
+    this.subscriptionAccount.unsubscribe();
   }
 
+  /**
+   * Change status of active and inactive loans
+   * @param isCurrentLoans boolean
+   * @return Status active or inactive loans
+   */
   setCurrentLoans(isCurrentLoans: boolean) {
     this.isCurrentLoans = isCurrentLoans;
   }
 
+  /**
+   * Load user account
+   */
+  private async loadAccount() {
+    const account = await this.web3Service.getAccount();
+    this.address = account;
+  }
+
   /**
    * Load active loans
    * @param page Page
@@ -106,4 +126,16 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.isLoading = loading;
   }
 
+  /**
+   * Listen and handle login events for account changes and logout
+   */
+  private handleLoginEvents() {
+    this.subscriptionAccount = this
+      .web3Service
+      .loginEvent
+      .subscribe((_: boolean) => {
+        this.loadAccount();
+      });
+  }
+
 }

From 45827d045010ce30b5306d2ad7da87a51808c7af Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Wed, 21 Apr 2021 16:14:41 -0300
Subject: [PATCH 09/66] pagination and segment loans borrowed and lent

---
 .prettierrc.json                              |   5 +
 .../views/dashboard/dashboard.component.html  |  16 +-
 .../views/dashboard/dashboard.component.ts    | 171 +++++++++++++-----
 3 files changed, 147 insertions(+), 45 deletions(-)
 create mode 100644 .prettierrc.json

diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 000000000..5639f0b03
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+    "trailingComma": "none",
+    "tabWidth": 2,
+    "singleQuote": true
+}
\ No newline at end of file
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index c554f9619..39b4333d5 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -22,11 +22,19 @@
       </div>
       <div class="dashboard__content">
         <div class="row">
-          <div *ngIf="!isLoading" class="col-md-6">
-            <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="loans" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
+          <div *ngIf="loansBorrowed.length" class="col-md-6">
+            <virtual-scroller
+              #scroll
+              [items]="loansBorrowed"
+              [bufferAmount]="12"
+              [scrollThrottlingTime]="500"
+              (scroll)="onScrollBorrowed($event)"
+            >
+            <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="loansBorrowed" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
+            </virtual-scroller>
           </div>
-          <div *ngIf="!isLoading" class="col-md-6">
-            <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="[]" [showOptions]="false" title="CURRENT LENT"></app-dashboard-list>
+          <div *ngIf="loansBorrowed.length" class="col-md-6">
+            <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="loansLent" [showOptions]="false" title="CURRENT LENT"></app-dashboard-list>
           </div>
         </div>
       </div>
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index efc498864..c638ef024 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -15,26 +15,16 @@ import { Web3Service } from '../../services/web3.service';
 })
 export class DashboardComponent implements OnInit, OnDestroy {
   pageId = 'active-loans';
-  address = '0x6b800281ca137fE073c662e34440420E91F43DeB';
-  // FIXME: Change var dynamic
-  loans = [];
-  // pagination
-  page = 1;
-  count = 0;
-  sort: object;
-  filters: object;
-  filtersState = {
-    currency: undefined,
-    amountStart: null,
-    amountEnd: null,
-    interest: null,
-    duration: null
-  };
+  address;
   isLoading: boolean;
-  isFullScrolled: boolean;
-  isAvailableLoans = true;
-  // filters component
-  filtersOpen: boolean;
+  loansBorrowed = [];
+  pageBorrowed = 1;
+  isFullScrolledBorrowed: boolean;
+  isAvailableLoansBorrowed = true;
+  loansLent = [];
+  pageLent = 1;
+  isFullScrolledLent: boolean;
+  isAvailableLoansLent = true;
   isCurrentLoans = true;
   private subscriptionAccount: Subscription;
 
@@ -43,13 +33,14 @@ export class DashboardComponent implements OnInit, OnDestroy {
     private titleService: TitleService,
     private eventsService: EventsService,
     private web3Service: Web3Service
-  ) { }
+  ) {}
 
   async ngOnInit() {
     this.titleService.changeTitle('Dashboard');
     await this.loadAccount();
     this.handleLoginEvents();
-    this.loadLoans();
+    this.loadLoansBorrowed();
+    this.loadLoansLent();
   }
 
   ngOnDestroy() {
@@ -66,6 +57,36 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.isCurrentLoans = isCurrentLoans;
   }
 
+  /**
+   * Event when loans borrowed scroll
+   * @param event Event
+   */
+  async onScrollBorrowed(event: any) {
+    if (this.loading || this.isFullScrolledBorrowed) {
+      return;
+    }
+
+    const { offsetHeight, scrollTop } = event.target;
+    if (offsetHeight + scrollTop >= 900) {
+      await this.loadLoansBorrowed(this.address, this.pageBorrowed);
+    }
+  }
+
+  /**
+   * Event when loans lent scroll
+   * @param event Event
+   */
+  async onScrollLent(event: any) {
+    if (this.loading || this.isFullScrolledLent) {
+      return;
+    }
+
+    const { offsetHeight, scrollTop } = event.target;
+    if (offsetHeight + scrollTop >= 900) {
+      await this.loadLoansBorrowed(this.address, this.pageLent);
+    }
+  }
+
   /**
    * Load user account
    */
@@ -75,37 +96,103 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Load active loans
+   * Load loans borrowed
+   * @param address Address
+   * @param page Page
+   * @param currentLoadedLoans CurrentLoadedLoans
+   * @return Loans
+   */
+  private async loadLoansBorrowed(
+    address: string = this.address,
+    page: number = this.pageBorrowed,
+    currentLoadedLoans = 0
+  ) {
+    this.loading = true;
+
+    try {
+      const PAGE_SIZE = 20;
+      const { content } = await this.proxyApiService.getBorrowed(
+        address,
+        page,
+        PAGE_SIZE
+      );
+      const loans: Loan[] = content.map((loanData: LoanContentApi) =>
+        LoanUtils.buildLoan(loanData)
+      );
+
+      // if there are no more loans
+      if (!loans.length) {
+        this.isFullScrolledBorrowed = true;
+        this.isAvailableLoansBorrowed = this.loansBorrowed.length
+          ? true
+          : false;
+      }
+
+      // set loan index as positions
+      loans.map((loan: Loan, i: number) => (loan.position = i));
+
+      // if there are more loans add them and continue
+      if (loans.length) {
+        this.loansBorrowed = this.loansBorrowed.concat(loans);
+        this.pageBorrowed++;
+      }
+
+      // incrase current paginator results
+      currentLoadedLoans = currentLoadedLoans + loans.length;
+
+      const MINIMUN_LOANS_TO_SHOW = 4;
+      if (loans.length && currentLoadedLoans < MINIMUN_LOANS_TO_SHOW) {
+        await this.loadLoansBorrowed(
+          this.address,
+          this.pageBorrowed,
+          currentLoadedLoans
+        );
+      }
+    } catch (err) {
+      this.eventsService.trackError(err);
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  /**
+   * Load loans lent
+   * @param address Address
    * @param page Page
-   * @param sort Order by
+   * @param currentLoadedLoans CurrentLoadedLoans
    * @return Loans
    */
-  private async loadLoans(
+  private async loadLoansLent(
     address: string = this.address,
-    page: number = this.page,
-    sort: object = this.sort,
+    page: number = this.pageLent,
     currentLoadedLoans = 0
   ) {
     this.loading = true;
 
     try {
-      const PAGE_SIZE = 4;
-      const { content } = await this.proxyApiService.getBorrowed(address, page, PAGE_SIZE, sort);
-      const loans: Loan[] = content.map((loanData: LoanContentApi) => LoanUtils.buildLoan(loanData));
+      const PAGE_SIZE = 20;
+      const { content } = await this.proxyApiService.getLent(
+        address,
+        page,
+        PAGE_SIZE
+      );
+      const loans: Loan[] = content.map((loanData: LoanContentApi) =>
+        LoanUtils.buildLoan(loanData)
+      );
 
       // if there are no more loans
       if (!loans.length) {
-        this.isFullScrolled = true;
-        this.isAvailableLoans = this.loans.length ? true : false;
+        this.isFullScrolledLent = true;
+        this.isAvailableLoansLent = this.loansLent.length ? true : false;
       }
 
       // set loan index as positions
-      loans.map((loan: Loan, i: number) => loan.position = i);
+      loans.map((loan: Loan, i: number) => (loan.position = i));
 
       // if there are more loans add them and continue
       if (loans.length) {
-        this.loans = this.loans.concat(loans);
-        this.page++;
+        this.loansLent = this.loansLent.concat(loans);
+        this.pageLent++;
       }
 
       // incrase current paginator results
@@ -113,7 +200,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
       const MINIMUN_LOANS_TO_SHOW = 4;
       if (loans.length && currentLoadedLoans < MINIMUN_LOANS_TO_SHOW) {
-        await this.loadLoans(this.address, this.page, this.sort, currentLoadedLoans);
+        await this.loadLoansLent(
+          this.address,
+          this.pageLent,
+          currentLoadedLoans
+        );
       }
     } catch (err) {
       this.eventsService.trackError(err);
@@ -130,12 +221,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
    * Listen and handle login events for account changes and logout
    */
   private handleLoginEvents() {
-    this.subscriptionAccount = this
-      .web3Service
-      .loginEvent
-      .subscribe((_: boolean) => {
+    this.subscriptionAccount = this.web3Service.loginEvent.subscribe(
+      (_: boolean) => {
         this.loadAccount();
-      });
+      }
+    );
   }
-
 }

From dbe3b77a1bc9e8083b934d7a34403a1bb4be70d9 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Wed, 21 Apr 2021 16:20:23 -0300
Subject: [PATCH 10/66] remove prettier file

---
 .prettierrc.json | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 .prettierrc.json

diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index 5639f0b03..000000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-    "trailingComma": "none",
-    "tabWidth": 2,
-    "singleQuote": true
-}
\ No newline at end of file

From afe94fde450bc3c2c699e9d31ab04183e5b464d9 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Thu, 22 Apr 2021 15:16:40 -0300
Subject: [PATCH 11/66] desktop view

---
 .gitignore                                    |  2 +
 .../dashboard-list.component.html             | 10 +++--
 .../dashboard-list.component.ts               | 20 +++++++--
 .../progress-bar/progress-bar.component.html  |  2 +-
 .../progress-bar/progress-bar.component.ts    |  1 +
 .../views/dashboard/dashboard.component.html  | 16 +++++--
 .../views/dashboard/dashboard.component.ts    | 43 +++++++++++++++++--
 7 files changed, 78 insertions(+), 16 deletions(-)

diff --git a/.gitignore b/.gitignore
index e3f001b80..c1055cad5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,3 +57,5 @@ config.js
 # Visal studio code
 /.vscode/
 
+# Prettier
+.prettierrc.json
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index 9d17bdea5..829bf1f89 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -12,16 +12,18 @@
         </div>
     </div>
     <div class="list__item-container" *ngIf="loans.length">
-        <div *ngFor="let loan of loans" class="list__item">
+        <div *ngFor="let loan of loans" class="list__item" [ngStyle]="{'border-color': getBorderColorByStatus(loan.status)}">
             <div class="list__item__column">8,000 ARS</div>
             <div class="list__item__column">8,466.67</div>
-            <div class="list__item__column">70.00%</div>
+            <div class="list__item__column" matTooltip="Effective rate: X.XX%">70.00%</div>
             <div class="list__item__column list__item__column__progress">
-                <app-progress-bar progress="50%" subprogress="70%"></app-progress-bar>
+                <app-progress-bar [color]="getProgressBarColorByStatus(loan.status)" progress="100%" subprogress="70%"></app-progress-bar>
             </div>
             <div class="list__item__column list__item__column__payment">
                 <div class="row">
-                    <div class="col-6">0%</div>
+                    <div class="col-6">
+                        <p matTooltip="Accrued interest: X.XX">0%</p>
+                    </div>
                     <div *ngIf="showOptions" class="col-2">
                         <button mat-icon-button [matMenuTriggerFor]="appMenu">
                             <i class="fas fa-ellipsis-v"></i>
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.ts b/src/app/shared/dashboard-list/dashboard-list.component.ts
index 3ec4e249f..f88c9f292 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.ts
+++ b/src/app/shared/dashboard-list/dashboard-list.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { Loan, Status } from '../../models/loan.model';
 
 @Component({
   selector: 'app-dashboard-list',
@@ -6,15 +7,26 @@ import { Component, Input, OnInit } from '@angular/core';
   styleUrls: ['./dashboard-list.component.scss']
 })
 export class DashboardListComponent implements OnInit {
-
   @Input() title: string;
   @Input() isCurrentLoans: boolean;
   @Input() showOptions: boolean;
-  @Input() loans: [];
+  @Input() loans: Loan[];
+
+  constructor() {}
 
-  constructor() { }
+  ngOnInit() {}
 
-  ngOnInit() {
+  getBorderColorByStatus = (status: number) => {
+    if (status === Status.Request) return '#FFFFFF';
+    if (status === Status.Ongoing) return '#4155FF';
+    if (status === Status.Paid) return '#59B159';
+    if (status === Status.Indebt) return '#D97D3A';
+    return '#000000';
   }
 
+  getProgressBarColorByStatus = (status: number) => {
+    if (status === Status.Request) return '#FFFFFF';
+    if (status === Status.Paid) return '#59B159';
+    return '#4155FF';
+  }
 }
diff --git a/src/app/shared/progress-bar/progress-bar.component.html b/src/app/shared/progress-bar/progress-bar.component.html
index 830b1814c..7dc8017c3 100644
--- a/src/app/shared/progress-bar/progress-bar.component.html
+++ b/src/app/shared/progress-bar/progress-bar.component.html
@@ -1,5 +1,5 @@
 <div class="container-progress-bar">
     <div class="progress-bar progress-bar--default"></div>
-    <div class="progress-bar progress-bar--primary" [ngStyle]="{'width': progress}"></div>
+    <div class="progress-bar progress-bar--primary" [ngStyle]="{'width': progress, 'background-color': color}"></div>
     <div class="progress-bar progress-bar--secondary" [ngStyle]="{'width': subprogress}"></div>
 </div>
diff --git a/src/app/shared/progress-bar/progress-bar.component.ts b/src/app/shared/progress-bar/progress-bar.component.ts
index da5e55ca0..c6cdc3ba2 100644
--- a/src/app/shared/progress-bar/progress-bar.component.ts
+++ b/src/app/shared/progress-bar/progress-bar.component.ts
@@ -9,6 +9,7 @@ export class ProgressBarComponent implements OnInit {
 
   @Input() progress: string;
   @Input() subprogress: string;
+  @Input() color: string;
 
   constructor() { }
 
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index 39b4333d5..a2d54c0c6 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -22,7 +22,7 @@
       </div>
       <div class="dashboard__content">
         <div class="row">
-          <div *ngIf="loansBorrowed.length" class="col-md-6">
+          <div *ngIf="!isLoading" class="col-md-6">
             <virtual-scroller
               #scroll
               [items]="loansBorrowed"
@@ -30,11 +30,19 @@
               [scrollThrottlingTime]="500"
               (scroll)="onScrollBorrowed($event)"
             >
-            <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="loansBorrowed" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
+              <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="loansBorrowed" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
             </virtual-scroller>
           </div>
-          <div *ngIf="loansBorrowed.length" class="col-md-6">
-            <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="loansLent" [showOptions]="false" title="CURRENT LENT"></app-dashboard-list>
+          <div *ngIf="!isLoading" class="col-md-6">
+            <virtual-scroller
+              #scroll
+              [items]="loansLent"
+              [bufferAmount]="12"
+              [scrollThrottlingTime]="500"
+              (scroll)="onScrollLent($event)"
+            >
+              <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="loansLent" [showOptions]="false" title="CURRENT LENT"></app-dashboard-list>
+            </virtual-scroller>
           </div>
         </div>
       </div>
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index c638ef024..7cc39e5f1 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { Loan } from '../../models/loan.model';
+import { Loan, Status } from '../../models/loan.model';
 import { LoanContentApi } from '../../interfaces/loan-api-diaspore';
 import { LoanUtils } from '../../utils/loan-utils';
 import { ProxyApiService } from '../../services/proxy-api.service';
@@ -55,6 +55,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
    */
   setCurrentLoans(isCurrentLoans: boolean) {
     this.isCurrentLoans = isCurrentLoans;
+    this.resetLoans();
   }
 
   /**
@@ -116,10 +117,21 @@ export class DashboardComponent implements OnInit, OnDestroy {
         page,
         PAGE_SIZE
       );
-      const loans: Loan[] = content.map((loanData: LoanContentApi) =>
+      let loans: Loan[] = content.map((loanData: LoanContentApi) =>
         LoanUtils.buildLoan(loanData)
       );
 
+      // filter status destroyed, expired and paid
+      loans = loans.filter(
+        (l) => l.status !== Status.Expired && l.status !== Status.Destroyed
+      );
+      if (this.isCurrentLoans) {
+        loans = loans.filter((l) => l.status !== Status.Paid);
+      }
+      if (!this.isCurrentLoans) {
+        loans = loans.filter((l) => l.status === Status.Paid);
+      }
+
       // if there are no more loans
       if (!loans.length) {
         this.isFullScrolledBorrowed = true;
@@ -176,10 +188,21 @@ export class DashboardComponent implements OnInit, OnDestroy {
         page,
         PAGE_SIZE
       );
-      const loans: Loan[] = content.map((loanData: LoanContentApi) =>
+      let loans: Loan[] = content.map((loanData: LoanContentApi) =>
         LoanUtils.buildLoan(loanData)
       );
 
+      // filter status destroyed, expired and paid
+      loans = loans.filter(
+        (l) => l.status !== Status.Expired && l.status !== Status.Destroyed
+      );
+      if (this.isCurrentLoans) {
+        loans = loans.filter((l) => l.status !== Status.Paid);
+      }
+      if (!this.isCurrentLoans) {
+        loans = loans.filter((l) => l.status === Status.Paid);
+      }
+
       // if there are no more loans
       if (!loans.length) {
         this.isFullScrolledLent = true;
@@ -217,6 +240,20 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.isLoading = loading;
   }
 
+  /**
+   * Reset and clean loans
+   */
+  private resetLoans() {
+    this.loansBorrowed = [];
+    this.loansLent = [];
+    this.pageBorrowed = 1;
+    this.pageLent = 1;
+    this.isFullScrolledBorrowed = false;
+    this.isFullScrolledLent = false;
+    this.loadLoansBorrowed();
+    this.loadLoansLent();
+  }
+
   /**
    * Listen and handle login events for account changes and logout
    */

From 8713fbc7a7069be8a6a001aca260e559b549c70a Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Thu, 22 Apr 2021 15:22:39 -0300
Subject: [PATCH 12/66] desktop view

---
 .../dashboard-list.component.ts               | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/app/shared/dashboard-list/dashboard-list.component.ts b/src/app/shared/dashboard-list/dashboard-list.component.ts
index f88c9f292..d79dc531b 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.ts
+++ b/src/app/shared/dashboard-list/dashboard-list.component.ts
@@ -17,16 +17,28 @@ export class DashboardListComponent implements OnInit {
   ngOnInit() {}
 
   getBorderColorByStatus = (status: number) => {
-    if (status === Status.Request) return '#FFFFFF';
-    if (status === Status.Ongoing) return '#4155FF';
-    if (status === Status.Paid) return '#59B159';
-    if (status === Status.Indebt) return '#D97D3A';
-    return '#000000';
+    switch (status) {
+      case Status.Request:
+        return '#FFFFFF';
+      case Status.Ongoing:
+        return '#4155FF';
+      case Status.Paid:
+        return '#59B159';
+      case Status.Indebt:
+        return '#D97D3A';
+      default:
+        return '#000000';
+    }
   }
 
   getProgressBarColorByStatus = (status: number) => {
-    if (status === Status.Request) return '#FFFFFF';
-    if (status === Status.Paid) return '#59B159';
-    return '#4155FF';
+    switch (status) {
+      case Status.Request:
+        return '#FFFFFF';
+      case Status.Paid:
+        return '#59B159';
+      default:
+        return '#4155FF';
+    }
   }
 }

From 55b803564eaccdce3f6ddaf0683842e22256284c Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 26 Apr 2021 20:04:16 -0300
Subject: [PATCH 13/66] dashboard list component and not harcoded data

---
 .../dashboard-list-item.component.html        |  51 +++++++
 .../dashboard-list-item.component.scss        |  92 ++++++++++++
 .../dashboard-list-item.component.spec.ts     |  74 ++++++++++
 .../dashboard-list-item.component.ts          | 133 ++++++++++++++++++
 .../dashboard-list.component.html             |  42 ++----
 .../dashboard-list.component.scss             |  79 +++--------
 .../dashboard-list.component.ts               |  35 +----
 .../progress-bar.component.spec.ts            |   7 +-
 src/app/shared/shared.module.ts               |   4 +-
 .../views/dashboard/dashboard.component.html  |  23 +--
 .../views/dashboard/dashboard.component.scss  |  29 +++-
 .../views/dashboard/dashboard.component.ts    |  54 +++++--
 src/styles.scss                               |  18 +++
 13 files changed, 488 insertions(+), 153 deletions(-)
 create mode 100644 src/app/shared/dashboard-list-item/dashboard-list-item.component.html
 create mode 100644 src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
 create mode 100644 src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
 create mode 100644 src/app/shared/dashboard-list-item/dashboard-list-item.component.ts

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
new file mode 100644
index 000000000..9e128ff55
--- /dev/null
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -0,0 +1,51 @@
+<div class="list__item" [ngStyle]="{'border-color': getBorderColorByStatus()}">
+    <div class="list__item__title d-sm-none">
+        <p><i class="fas" [ngClass]="'fa-'+getIconByStatus()"></i> {{ getStatusTextByStatus() }}</p>
+    </div>
+    <div class="list__item__column">
+        <div class="row">
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">BORROWED</div>
+            <div class="col-md-12 col-6">{{ borrowed }}</div>
+        </div>
+    </div>
+    <div class="list__item__column">
+        <div class="row">
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAID</div>
+            <div class="col-md-12 col-6">{{ repaid }}</div>
+        </div>
+    </div>
+    <div class="list__item__column" matTooltip="Effective rate: X.XX%">
+        <div class="row">
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
+            <div class="col-md-12 col-6">{{ anualRate }}</div>
+        </div>
+    </div>
+    <div class="list__item__column">
+        <div class="row">
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">SCHEDULE PROGRESS</div>
+            <div class="list__item__column__progress col-md-12 col-6">
+                <app-progress-bar [color]="getBorderColorByStatus()" [progress]="timeProgress"></app-progress-bar>
+            </div>
+        </div>
+    </div>
+    <div class="list__item__column list__item__column__payment">
+        <div class="row">
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAYMENT PROGRESS</div>
+            <div class="col-6">
+                <p matTooltip="Accrued interest: X.XX">{{ paymentProgress }}</p>
+            </div>
+            <div *ngIf="showOptions" class="col-2 list__item__column__payment__button">
+                <button mat-icon-button [matMenuTriggerFor]="appMenu">
+                    <i class="fas fa-ellipsis-v"></i>
+                </button>
+                <mat-menu #appMenu="matMenu" yPosition="below">
+                    <button class="list__item__button--separator" mat-menu-item>Pay</button>
+                    <button mat-menu-item>Withdraw Collateral</button>
+                    <button mat-menu-item>Add Collateral</button>
+                </mat-menu>
+            </div>
+        </div>
+    </div>
+    <div class="list__item__tooltip d-none d-sm-block" [matTooltipClass]="'dashboard-tooltip'+' '+getStatusTextByStatus().toLowerCase().split(' ').join('')" [matTooltip]="getStatusTextByStatus()" matTooltipPosition="before">
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
new file mode 100644
index 000000000..fee886de3
--- /dev/null
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
@@ -0,0 +1,92 @@
+@import 'src/scss/fonts';
+
+::ng-deep {
+  .mat-menu-content:not(:empty) {
+    background-color: #565759;
+    width: 215px;
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+  }
+}
+
+.list {
+  &__item {
+    margin-top: 15px;
+    border-left: 6px solid #4155ff;
+    border-radius: 5px;
+    background-color: #313134;
+    box-shadow: 0px 3px 6px #00000029;
+    padding: 10px 15px;
+    position: relative;
+    &__title {
+      @include styled-font('proxima-nova', 700, 14px);
+      margin-bottom: 16px;
+    }
+    &__title svg {
+      margin-right: 8px;
+    }
+    &__column {
+      margin-bottom: 10px;
+      @include styled-font('proxima-nova', 400, 13px);
+      &__title {
+        @include styled-font('proxima-nova', 650, 13px);
+      }
+      &__progress {
+        margin-top: 5px;
+      }
+      &__payment {
+        &__button {
+          position: absolute;
+          top: 4px;
+          right: 6px;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .list {
+    &__item {
+      margin-top: 10px;
+      height: 65px;
+      padding: 0;
+      &__column {
+        @include styled-font('Roboto', 400, 15px);
+        display: inline-block;
+        width: 20%;
+        margin-top: 22px;
+        margin-bottom: 0;
+        &__progress {
+          padding: 0 25px 4px 25px;
+        }
+        &__payment {
+          padding-left: 15px;
+          &__button {
+            top: 10px;
+            right: -20px;
+          }
+        }
+        svg {
+          color: #a09f9f;
+          font-size: 22px;
+          cursor: pointer;
+        }
+      }
+      &__button {
+        display: none;
+      }
+      &__button--separator {
+        border-bottom: 1px solid #6a6a6b;
+      }
+      &__tooltip {
+        position: absolute;
+        left: -6px;
+        top: 0%;
+        width: 12px;
+        height: 66px;
+        background: transparent;
+      }
+    }
+  }
+}
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
new file mode 100644
index 000000000..b3975593a
--- /dev/null
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
@@ -0,0 +1,74 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { DashboardListItemComponent } from './dashboard-list-item.component';
+import { MaterialModule } from '../..//material.module';
+import { Engine, Loan, Status } from '../..//models/loan.model';
+
+describe('DashboardListItemComponent', () => {
+  let component: DashboardListItemComponent;
+  let fixture: ComponentFixture<DashboardListItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MaterialModule],
+      declarations: [DashboardListItemComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardListItemComponent);
+    component = fixture.componentInstance;
+    const loan = new Loan(
+      Engine.RcnEngine,
+      '0x212c362e33abf6e3e6354363e0634aa1300c3045a18c8c5a08f3bb2a17184768',
+      '0xc78a11c729275e656fa3decc1f15aebee69d08fc',
+      11000000000000000000,
+      {
+        'address': '0x0000000000000000000000000000000000000000',
+        'currency': 'RCN',
+        'code': '0x0000000000000000000000000000000000000000000000000000000000000000'
+      },
+      {
+        'firstObligation': 1000000000000000000,
+        'totalObligation': 12000000000000000000,
+        'duration': 31104000,
+        'interestRate': 9.048821548821541,
+        'punitiveInterestRate': 11.976896418944936,
+        'frequency': 2592000,
+        'installments': 12
+      },
+      '0x06779a9848e5Df60ce0F5f63F88c5310C4c7289C',
+      '0x06779a9848e5Df60ce0F5f63F88c5310C4c7289C',
+      Status.Request,
+      1677953062,
+      '0x97d0300281C55DC6BE27Cf57343184Ab5C8dcdFF',
+      '0x0000000000000000000000000000000000000000',
+      {
+        'id' : '0x212c362e33abf6e3e6354363e0634aa1300c3045a18c8c5a08f3bb2a17184768',
+        'model' : {
+          'address' : '0x97d0300281C55DC6BE27Cf57343184Ab5C8dcdFF',
+          'paid' : 10000000000000000000,
+          'nextObligation' : 1000000000000000000,
+          'currentObligation' : 0,
+          'estimatedObligation' : 2000000000000000000,
+          'dueTime' : 1580148440
+        },
+        'balance' : 6000000000000000000,
+        'creator' : '0xc78a11c729275e656fa3decc1f15aebee69d08fc',
+        'owner' : '0xA5823617776f816e4AD1a26cb51Df2eF9458D0EA',
+        'oracle' : {
+          'address' : '0x0000000000000000000000000000000000000000',
+          'currency' : 'RCN',
+          'code' : '0x0000000000000000000000000000000000000000000000000000000000000000'
+        }
+      }
+    );
+    component.loan = loan;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
new file mode 100644
index 000000000..20e144026
--- /dev/null
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -0,0 +1,133 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Loan, Status } from 'app/models/loan.model';
+import { Utils } from 'app/utils/utils';
+
+@Component({
+  selector: 'app-dashboard-list-item',
+  templateUrl: './dashboard-list-item.component.html',
+  styleUrls: ['./dashboard-list-item.component.scss']
+})
+export class DashboardListItemComponent implements OnInit {
+  @Input() loan: Loan;
+  @Input() showOptions: boolean;
+
+  borrowed = '-';
+  repaid = '-';
+  anualRate = '-';
+  paymentProgress = '-';
+  timeProgress = '0%';
+
+  constructor() {}
+
+  ngOnInit() {
+    this.loadBasicData();
+    this.loadPaymentProgress();
+    this.loadTimeProgress();
+  }
+
+  getBorderColorByStatus = () => {
+    switch (this.loan.status) {
+      case Status.Request:
+        return '#FFFFFF';
+      case Status.Ongoing:
+        return '#4155FF';
+      case Status.Paid:
+        return '#59B159';
+      case Status.Indebt:
+        return '#D97D3A';
+      default:
+        return '#000000';
+    }
+  }
+
+  getStatusTextByStatus = () => {
+    switch (this.loan.status) {
+      case Status.Request:
+        return 'Requested';
+      case Status.Ongoing:
+        return 'Ongoing';
+      case Status.Paid:
+        return 'Fully Repaid';
+      case Status.Indebt:
+        return 'Overdue';
+      default:
+        return '';
+    }
+  }
+
+  getIconByStatus = () => {
+    switch (this.loan.status) {
+      case Status.Request:
+        return 'calendar';
+      case Status.Ongoing:
+        return 'angle-double-up';
+      case Status.Paid:
+        return 'check';
+      case Status.Indebt:
+        return 'exclamation';
+      default:
+        return '';
+    }
+  }
+
+  private loadBasicData() {
+    const { amount, currency, debt, descriptor, status } = this.loan;
+
+    this.borrowed =
+      Utils.formatAmount(amount / 10 ** currency.decimals, 2) +
+      ' ' +
+      currency.symbol;
+    if (status !== Status.Request) {
+      this.repaid =
+        Utils.formatAmount(debt.model.paid / 10 ** currency.decimals, 2) +
+        ' ' +
+        currency.symbol;
+    }
+    this.anualRate = descriptor.interestRate + '%';
+  }
+
+  private loadPaymentProgress() {
+    const { descriptor, debt, status } = this.loan;
+
+    if (status === Status.Ongoing || status === Status.Indebt) {
+      const endProgress = descriptor.totalObligation;
+      const currentProgress = debt.model.paid;
+      this.paymentProgress =
+        Utils.formatAmount((currentProgress * 100) / endProgress, 0) + '%';
+    }
+    if (status === Status.Request || status === Status.Expired) {
+      this.paymentProgress = 0 + '%';
+    }
+    if (status === Status.Paid) {
+      this.paymentProgress = 100 + '%';
+    }
+  }
+
+  private loadTimeProgress() {
+    const loan: Loan = this.loan;
+    const nowDate: number = Math.floor(new Date().getTime() / 1000);
+    const { installments = 1, frequency } = loan.descriptor;
+    const installmentDays = ['0'];
+
+    // load installments days
+    Array.from(Array(installments)).map((_: any, i: number) => {
+      const installmentNumber = i + 1;
+      installmentDays.push(Utils.formatDelta(frequency * installmentNumber));
+    });
+
+    // load installments average
+    const startDate = [Status.Request, Status.Expired].includes(loan.status)
+      ? nowDate
+      : loan.config.lentTime;
+    const endDate = startDate + installments * frequency;
+
+    const MAX_AVERAGE = 100;
+    const SECONDS_IN_DAY = 24 * 60 * 60;
+    const diffDays = (endDate - startDate) / SECONDS_IN_DAY;
+    const diffToNowDays = (endDate - nowDate) / SECONDS_IN_DAY;
+    const daysAverage = 100 - (diffToNowDays * 100) / diffDays;
+    this.timeProgress = `${
+      daysAverage > MAX_AVERAGE ? MAX_AVERAGE : daysAverage
+    }%`;
+  }
+}
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index 829bf1f89..601c5e082 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -1,5 +1,5 @@
 <div class="list">
-    <div class="list__header">
+    <div class="list__header d-none d-sm-block">
         <p class="list__header__title">
             {{ title }}
         </p>
@@ -11,36 +11,16 @@
             <p>Payment Progress</p>
         </div>
     </div>
-    <div class="list__item-container" *ngIf="loans.length">
-        <div *ngFor="let loan of loans" class="list__item" [ngStyle]="{'border-color': getBorderColorByStatus(loan.status)}">
-            <div class="list__item__column">8,000 ARS</div>
-            <div class="list__item__column">8,466.67</div>
-            <div class="list__item__column" matTooltip="Effective rate: X.XX%">70.00%</div>
-            <div class="list__item__column list__item__column__progress">
-                <app-progress-bar [color]="getProgressBarColorByStatus(loan.status)" progress="100%" subprogress="70%"></app-progress-bar>
-            </div>
-            <div class="list__item__column list__item__column__payment">
-                <div class="row">
-                    <div class="col-6">
-                        <p matTooltip="Accrued interest: X.XX">0%</p>
-                    </div>
-                    <div *ngIf="showOptions" class="col-2">
-                        <button mat-icon-button [matMenuTriggerFor]="appMenu">
-                            <i class="fas fa-ellipsis-v"></i>
-                        </button>
-                    </div>
-                    <mat-menu #appMenu="matMenu" yPosition="below">
-                        <button class="list__item__button--separator" mat-menu-item>Pay</button>
-                        <button mat-menu-item>Withdraw Collateral</button>
-                        <button mat-menu-item>Add Collateral</button>
-                    </mat-menu>
-                </div>
-            </div>
-        </div>
-    </div>
-    <ng-container *ngIf="!loans.length">
-        <div class="list__empty-state">
-            <app-empty-state title="Hey! You don´t have any funded loans yet." image="./assets/empty-states/lent.svg" description="If you want to start lending, check the Lend section."></app-empty-state>
+    <ng-container *ngIf="loans">
+        <div class="list__item-container" *ngIf="loans.length">
+            <ng-container *ngFor="let loan of loans">
+                <app-dashboard-list-item [showOptions]="showOptions" [loan]="loan"></app-dashboard-list-item>
+            </ng-container>
         </div>
+        <ng-container *ngIf="!loans.length">
+            <div class="list__empty-state">
+                <app-empty-state title="Hey! You don´t have any funded loans yet." image="./assets/empty-states/lent.svg" description="If you want to start lending, check the Lend section."></app-empty-state>
+            </div>
+        </ng-container>
     </ng-container>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.scss b/src/app/shared/dashboard-list/dashboard-list.component.scss
index f6d9caa68..1fc0b06a3 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.scss
+++ b/src/app/shared/dashboard-list/dashboard-list.component.scss
@@ -1,66 +1,29 @@
 @import 'src/scss/fonts';
 
-@media (min-width: 768px) {
-}
-
 @media (min-width: 992px) {
-
   .list {
-      &__header {
-          text-align: center;
-          background-color: #262629;
-          border-radius: 5px;
-          padding: 13px 5px 15px;
-          &__title {
-            @include styled-font('proxima-nova', 700, 14px);
-            margin-bottom: 15px;
-          }
-          &__table p{
-            width: 20%;
-            display: inline-block;
-            color: #A09F9F;
-            @include styled-font('proxima-nova', 1000, 11px);
-          }
+    &__header {
+      text-align: center;
+      background-color: #262629;
+      border-radius: 5px;
+      padding: 13px 5px 15px;
+      &__title {
+        @include styled-font('proxima-nova', 800, 14px);
+        margin-bottom: 15px;
       }
-      &__item {
-          margin-top: 10px;
-          background-color: #313134;
-          box-shadow: 0px 3px 6px #00000029;
-          border-radius: 5px;
-          height: 65px;
-          border-left: 6px solid #4155FF;
-          &__column {
-            @include styled-font('Roboto', 400, 15px);
-            display: inline-block;
-            width: 20%;
-            margin-top: 22px;
-            &__progress {
-                padding: 0 10px;
-            }
-            &__payment {
-                padding-left: 15px;
-                button {
-                    top: -10px;
-                    left: -10px;
-                }
-            }
-            svg {
-                color: #A09F9F;
-                font-size: 22px;
-                cursor: pointer;
-            }
-          }
-          &__button--separator {
-              border-bottom: 1px solid #6a6a6b;
-          }
-      }
-      &__empty-state {
-          padding: 0 40px;
-      }
-      &__item-container {
-          overflow: scroll;
-          height: 405px;
+      &__table p {
+        width: 20%;
+        display: inline-block;
+        color: #a09f9f;
+        @include styled-font('proxima-nova', 1000, 11px);
       }
+    }
+    &__empty-state {
+      padding: 0 40px;
+    }
+    &__item-container {
+      overflow: scroll;
+      height: 405px;
+    }
   }
-
 }
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.ts b/src/app/shared/dashboard-list/dashboard-list.component.ts
index d79dc531b..facbcf5a6 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.ts
+++ b/src/app/shared/dashboard-list/dashboard-list.component.ts
@@ -1,44 +1,15 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Loan, Status } from '../../models/loan.model';
+import { Component, Input } from '@angular/core';
+import { Loan } from '../../models/loan.model';
 
 @Component({
   selector: 'app-dashboard-list',
   templateUrl: './dashboard-list.component.html',
   styleUrls: ['./dashboard-list.component.scss']
 })
-export class DashboardListComponent implements OnInit {
+export class DashboardListComponent {
   @Input() title: string;
-  @Input() isCurrentLoans: boolean;
   @Input() showOptions: boolean;
   @Input() loans: Loan[];
 
   constructor() {}
-
-  ngOnInit() {}
-
-  getBorderColorByStatus = (status: number) => {
-    switch (status) {
-      case Status.Request:
-        return '#FFFFFF';
-      case Status.Ongoing:
-        return '#4155FF';
-      case Status.Paid:
-        return '#59B159';
-      case Status.Indebt:
-        return '#D97D3A';
-      default:
-        return '#000000';
-    }
-  }
-
-  getProgressBarColorByStatus = (status: number) => {
-    switch (status) {
-      case Status.Request:
-        return '#FFFFFF';
-      case Status.Paid:
-        return '#59B159';
-      default:
-        return '#4155FF';
-    }
-  }
 }
diff --git a/src/app/shared/progress-bar/progress-bar.component.spec.ts b/src/app/shared/progress-bar/progress-bar.component.spec.ts
index f41343a1f..cbe14e820 100644
--- a/src/app/shared/progress-bar/progress-bar.component.spec.ts
+++ b/src/app/shared/progress-bar/progress-bar.component.spec.ts
@@ -1,3 +1,4 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ProgressBarComponent } from './progress-bar.component';
@@ -8,7 +9,8 @@ describe('ProgressBarComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProgressBarComponent ]
+      declarations: [ ProgressBarComponent ],
+      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
     })
     .compileComponents();
   }));
@@ -16,6 +18,9 @@ describe('ProgressBarComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ProgressBarComponent);
     component = fixture.componentInstance;
+    component.color = '#FFFFFF';
+    component.progress = '75%';
+    component.subprogress = '0%';
     fixture.detectChanges();
   });
 
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index a4699b68e..2c8454bd0 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -62,6 +62,7 @@ import { CollateralService } from './../services/collateral.service';
 import { EventsService } from './../services/events.service';
 import { DashboardListComponent } from './dashboard-list/dashboard-list.component';
 import { ProgressBarComponent } from './progress-bar/progress-bar.component';
+import { DashboardListItemComponent } from './dashboard-list-item/dashboard-list-item.component';
 
 @NgModule({
   imports: [
@@ -119,7 +120,8 @@ import { ProgressBarComponent } from './progress-bar/progress-bar.component';
     FormatAmountPipe,
     FormatAddressPipe,
     DashboardListComponent,
-    ProgressBarComponent
+    ProgressBarComponent,
+    DashboardListItemComponent
   ],
   entryComponents: [
     DialogInsufficientfundsComponent,
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index a2d54c0c6..b1b13d27a 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -1,6 +1,5 @@
 <div
   class="body-scrollable requested-wrapper"
-  [ngClass]="{ active: filtersOpen, disabled: filtersOpen === false }"
 >
   <div class="container">
     <div class="page-header">
@@ -12,17 +11,23 @@
     </div>
     <div class="dashboard">
       <div class="row">
-        <div class="col-md-9">
+        <div class="col-12 col-md-9">
           <p class="dashboard__title">LOANS</p>
         </div>
-        <div class="col-md-3">
-          <p *ngIf="isCurrentLoans" (click)="setCurrentLoans(false)" class="dashboard__link">INACTIVES <i class="fas fa-plus-circle"></i></p>
-          <p *ngIf="!isCurrentLoans" (click)="setCurrentLoans(true)" class="dashboard__link">ACTIVES <i class="fas fa-plus-circle"></i></p>
+        <div class="col-6 d-sm-none">
+          <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
+            <mat-button-toggle (click)="setPageBorrow(true)" [checked]="isPageBorrow">BORROW</mat-button-toggle>
+            <mat-button-toggle (click)="setPageBorrow(false)" [checked]="!isPageBorrow">LENT</mat-button-toggle>
+          </mat-button-toggle-group>
+        </div>
+        <div class="col-6 col-md-3">
+          <p *ngIf="isCurrentLoans" (click)="setCurrentLoans(false)" class="dashboard__link">INACTIVES LOANS <i class="fas fa-plus-circle"></i></p>
+          <p *ngIf="!isCurrentLoans" (click)="setCurrentLoans(true)" class="dashboard__link">ACTIVES LOANS <i class="fas fa-plus-circle"></i></p>
         </div>
       </div>
       <div class="dashboard__content">
         <div class="row">
-          <div *ngIf="!isLoading" class="col-md-6">
+          <div *ngIf="(!isLoading || isAvailableLoansBorrowed) && (!isMobile || isPageBorrow)" class="col-md-6">
             <virtual-scroller
               #scroll
               [items]="loansBorrowed"
@@ -30,10 +35,10 @@
               [scrollThrottlingTime]="500"
               (scroll)="onScrollBorrowed($event)"
             >
-              <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="loansBorrowed" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
+              <app-dashboard-list [loans]="loansBorrowed" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
             </virtual-scroller>
           </div>
-          <div *ngIf="!isLoading" class="col-md-6">
+          <div *ngIf="(!isLoading || isAvailableLoansBorrowed) && (!isMobile || !isPageBorrow)" class="col-md-6">
             <virtual-scroller
               #scroll
               [items]="loansLent"
@@ -41,7 +46,7 @@
               [scrollThrottlingTime]="500"
               (scroll)="onScrollLent($event)"
             >
-              <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loans]="loansLent" [showOptions]="false" title="CURRENT LENT"></app-dashboard-list>
+              <app-dashboard-list [loans]="loansLent" [showOptions]="false" title="CURRENT LENT"></app-dashboard-list>
             </virtual-scroller>
           </div>
         </div>
diff --git a/src/app/views/dashboard/dashboard.component.scss b/src/app/views/dashboard/dashboard.component.scss
index a6b425633..d4efb0e98 100644
--- a/src/app/views/dashboard/dashboard.component.scss
+++ b/src/app/views/dashboard/dashboard.component.scss
@@ -1,24 +1,41 @@
 @import 'src/scss/fonts';
 
-@media (min-width: 768px) {
+.dashboard {
+  margin-top: 20px;
+  &__title {
+    @include styled-font('proxima-nova', 600, 18px);
+    margin-bottom: 16px;
+  }
+  &__link {
+    @include styled-font('proxima-nova', 800, 11px);
+    color: #7684FF;
+    text-align: right;
+    margin-top: 8px;
+  }
+  ::ng-deep {
+    .mat-button-toggle-group {
+      height: 35px;
+      @include styled-font('proxima-nova', 600, 13px);
+    }
+    .mat-button-toggle-label-content {
+      line-height: 36px;
+    }
+  }
 }
 
 @media (min-width: 992px) {
-
   .page-header {
     margin-bottom: 30px;
   }
-
   .dashboard {
     background-color: #212124;
     padding: 21px 25px;
     height: 550px;
+    margin-top: 0px;
     &__title {
-      @include styled-font('proxima-nova', 600, 18px);
+      margin-bottom: 0px;
     }
     &__link {
-      @include styled-font('proxima-nova', 800, 11px);
-      color: #7684FF;
       margin-top: 4px;
       cursor: pointer;
       text-align: right;
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index 7cc39e5f1..c6dc62fcc 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { Loan, Status } from '../../models/loan.model';
 import { LoanContentApi } from '../../interfaces/loan-api-diaspore';
@@ -19,13 +19,16 @@ export class DashboardComponent implements OnInit, OnDestroy {
   isLoading: boolean;
   loansBorrowed = [];
   pageBorrowed = 1;
-  isFullScrolledBorrowed: boolean;
+  isFullScrolledBorrowed = false;
   isAvailableLoansBorrowed = true;
   loansLent = [];
   pageLent = 1;
-  isFullScrolledLent: boolean;
+  isFullScrolledLent = false;
   isAvailableLoansLent = true;
   isCurrentLoans = true;
+  isMobile: boolean;
+  isPageBorrow = true;
+
   private subscriptionAccount: Subscription;
 
   constructor(
@@ -38,6 +41,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   async ngOnInit() {
     this.titleService.changeTitle('Dashboard');
     await this.loadAccount();
+    this.checkIfIsMobile();
     this.handleLoginEvents();
     this.loadLoansBorrowed();
     this.loadLoansLent();
@@ -48,6 +52,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.subscriptionAccount.unsubscribe();
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.checkIfIsMobile();
+  }
+
   /**
    * Change status of active and inactive loans
    * @param isCurrentLoans boolean
@@ -58,12 +67,21 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.resetLoans();
   }
 
+  /**
+   * Change status of page mobile
+   * @param isCurrentLoans boolean
+   * @return Status of page mobile
+   */
+  setPageBorrow(status: boolean) {
+    this.isPageBorrow = status;
+  }
+
   /**
    * Event when loans borrowed scroll
    * @param event Event
    */
   async onScrollBorrowed(event: any) {
-    if (this.loading || this.isFullScrolledBorrowed) {
+    if (this.isLoading || this.isFullScrolledBorrowed) {
       return;
     }
 
@@ -78,7 +96,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
    * @param event Event
    */
   async onScrollLent(event: any) {
-    if (this.loading || this.isFullScrolledLent) {
+    if (this.isLoading || this.isFullScrolledLent) {
       return;
     }
 
@@ -88,14 +106,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * Load user account
-   */
-  private async loadAccount() {
-    const account = await this.web3Service.getAccount();
-    this.address = account;
-  }
-
   /**
    * Load loans borrowed
    * @param address Address
@@ -152,7 +162,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       // incrase current paginator results
       currentLoadedLoans = currentLoadedLoans + loans.length;
 
-      const MINIMUN_LOANS_TO_SHOW = 4;
+      const MINIMUN_LOANS_TO_SHOW = 6;
       if (loans.length && currentLoadedLoans < MINIMUN_LOANS_TO_SHOW) {
         await this.loadLoansBorrowed(
           this.address,
@@ -221,7 +231,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       // incrase current paginator results
       currentLoadedLoans = currentLoadedLoans + loans.length;
 
-      const MINIMUN_LOANS_TO_SHOW = 4;
+      const MINIMUN_LOANS_TO_SHOW = 6;
       if (loans.length && currentLoadedLoans < MINIMUN_LOANS_TO_SHOW) {
         await this.loadLoansLent(
           this.address,
@@ -254,6 +264,12 @@ export class DashboardComponent implements OnInit, OnDestroy {
     this.loadLoansLent();
   }
 
+  private checkIfIsMobile(e?) {
+    const MOBILE_WIDTH_PX = 992;
+    const currentDeviceWidth = e ? e.target.innerWidth : window.innerWidth;
+    this.isMobile = currentDeviceWidth <= MOBILE_WIDTH_PX;
+  }
+
   /**
    * Listen and handle login events for account changes and logout
    */
@@ -264,4 +280,12 @@ export class DashboardComponent implements OnInit, OnDestroy {
       }
     );
   }
+
+  /**
+   * Load user account
+   */
+  private async loadAccount() {
+    const account = await this.web3Service.getAccount();
+    this.address = account;
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
index e7c262a16..cd7c413fa 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -212,6 +212,24 @@ mat-tooltip-component .mat-tooltip {
   font-weight: 500;
   font-size: .85em;
 }
+mat-tooltip-component {
+  .dashboard-tooltip {
+    color: white;
+  }
+  .ongoing {
+    background-color: #4155FF;
+  }
+  .overdue {
+    background-color: #D97D3A;
+  }
+  .requested {
+    background-color: #FFFFFF;
+    color: #101010;
+  }
+  .fullyrepaid {
+    background-color: #59B159;
+  }
+}
 
 // Tables
 .table{

From db7585216936ddd2cf443eb8ac941c826f8ddb0a Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Tue, 27 Apr 2021 10:40:55 -0300
Subject: [PATCH 14/66] add login handler update account

---
 src/app/views/dashboard/dashboard.component.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index c6dc62fcc..57fcf6a24 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -275,8 +275,9 @@ export class DashboardComponent implements OnInit, OnDestroy {
    */
   private handleLoginEvents() {
     this.subscriptionAccount = this.web3Service.loginEvent.subscribe(
-      (_: boolean) => {
-        this.loadAccount();
+      async() => {
+        await this.loadAccount();
+        await this.resetLoans();
       }
     );
   }

From 51f1aa166637e72c60f526ce3c2409f3cd2bf997 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Tue, 27 Apr 2021 16:05:34 -0300
Subject: [PATCH 15/66] fix menu mobile in dashboard list and comment skeleton
 dashboard component

---
 .../dashboard-list-item.component.scss        |  8 ++++
 .../dashboard-list-item.component.ts          |  8 +++-
 .../dashboard-list-skeleton.component.html    | 35 +++++++++++++++
 .../dashboard-list-skeleton.component.scss    | 43 +++++++++++++++++++
 .../dashboard-list-skeleton.component.spec.ts | 25 +++++++++++
 .../dashboard-list-skeleton.component.ts      | 15 +++++++
 .../dashboard-list.component.html             | 10 +++--
 .../dashboard-list.component.ts               |  1 +
 src/app/shared/shared.module.ts               |  4 +-
 .../views/dashboard/dashboard.component.html  |  8 ++--
 .../views/dashboard/dashboard.component.ts    | 16 +++----
 11 files changed, 155 insertions(+), 18 deletions(-)
 create mode 100644 src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
 create mode 100644 src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss
 create mode 100644 src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.spec.ts
 create mode 100644 src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
index fee886de3..41812260f 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
@@ -7,6 +7,9 @@
     padding-top: 0px !important;
     padding-bottom: 0px !important;
   }
+  .cdk-overlay-pane {
+    height: 144px !important;
+  }
 }
 
 .list {
@@ -89,4 +92,9 @@
       }
     }
   }
+  ::ng-deep {
+    .cdk-overlay-pane {
+      height: 127px !important;
+    }
+  }
 }
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index 20e144026..303f014c9 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -35,6 +35,8 @@ export class DashboardListItemComponent implements OnInit {
         return '#59B159';
       case Status.Indebt:
         return '#D97D3A';
+      case Status.Expired:
+        return '#A3A5A6';
       default:
         return '#000000';
     }
@@ -50,6 +52,8 @@ export class DashboardListItemComponent implements OnInit {
         return 'Fully Repaid';
       case Status.Indebt:
         return 'Overdue';
+      case Status.Expired:
+        return 'Expired';
       default:
         return '';
     }
@@ -65,6 +69,8 @@ export class DashboardListItemComponent implements OnInit {
         return 'check';
       case Status.Indebt:
         return 'exclamation';
+      case Status.Expired:
+        return 'times';
       default:
         return '';
     }
@@ -77,7 +83,7 @@ export class DashboardListItemComponent implements OnInit {
       Utils.formatAmount(amount / 10 ** currency.decimals, 2) +
       ' ' +
       currency.symbol;
-    if (status !== Status.Request) {
+    if (status !== Status.Request && status !== Status.Expired) {
       this.repaid =
         Utils.formatAmount(debt.model.paid / 10 ** currency.decimals, 2) +
         ' ' +
diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
new file mode 100644
index 000000000..eb54aebaf
--- /dev/null
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
@@ -0,0 +1,35 @@
+<div class="list__item">
+    <div class="list__item__title d-sm-none">
+        <p>skeleton</p>
+    </div>
+    <div class="list__item__column">
+        <div class="row">
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">BORROWED</div>
+            <div class="col-md-12 col-6">skeleton</div>
+        </div>
+    </div>
+    <div class="list__item__column">
+        <div class="row">
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAID</div>
+            <div class="col-md-12 col-6">skeleton</div>
+        </div>
+    </div>
+    <div class="list__item__column">
+        <div class="row">
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
+            <div class="col-md-12 col-6">skeleton</div>
+        </div>
+    </div>
+    <div class="list__item__column">
+        <div class="row">
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
+            <div class="col-md-12 col-6">skeleton</div>
+        </div>
+    </div>
+    <div class="list__item__column list__item__column__payment">
+        <div class="row">
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
+            <div class="col-md-12 col-6">skeleton</div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss
new file mode 100644
index 000000000..597017c83
--- /dev/null
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss
@@ -0,0 +1,43 @@
+@import 'src/scss/fonts';
+
+.list {
+  &__item {
+    margin-top: 15px;
+    border-radius: 5px;
+    background-color: #313134;
+    box-shadow: 0px 3px 6px #00000029;
+    padding: 10px 15px;
+    position: relative;
+    &__title {
+      @include styled-font('proxima-nova', 700, 14px);
+      margin-bottom: 16px;
+    }
+    &__title svg {
+      margin-right: 8px;
+    }
+    &__column {
+      margin-bottom: 10px;
+      @include styled-font('proxima-nova', 400, 13px);
+      &__title {
+        @include styled-font('proxima-nova', 650, 13px);
+      }
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  .list {
+    &__item {
+      margin-top: 10px;
+      height: 65px;
+      padding: 0;
+      &__column {
+        @include styled-font('Roboto', 400, 15px);
+        display: inline-block;
+        width: 20%;
+        margin-top: 22px;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.spec.ts b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.spec.ts
new file mode 100644
index 000000000..84781bfb7
--- /dev/null
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardListSkeletonComponent } from './dashboard-list-skeleton.component';
+
+describe('DashboardListSkeletonComponent', () => {
+  let component: DashboardListSkeletonComponent;
+  let fixture: ComponentFixture<DashboardListSkeletonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardListSkeletonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardListSkeletonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts
new file mode 100644
index 000000000..1abe65d50
--- /dev/null
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard-list-skeleton',
+  templateUrl: './dashboard-list-skeleton.component.html',
+  styleUrls: ['./dashboard-list-skeleton.component.scss']
+})
+export class DashboardListSkeletonComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index 601c5e082..6e3c5bcfb 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -17,10 +17,12 @@
                 <app-dashboard-list-item [showOptions]="showOptions" [loan]="loan"></app-dashboard-list-item>
             </ng-container>
         </div>
-        <ng-container *ngIf="!loans.length">
-            <div class="list__empty-state">
-                <app-empty-state title="Hey! You don´t have any funded loans yet." image="./assets/empty-states/lent.svg" description="If you want to start lending, check the Lend section."></app-empty-state>
-            </div>
+        <div *ngIf="!loans.length && !loading" class="list__empty-state">
+            <app-empty-state title="Hey! You don´t have any funded loans yet." image="./assets/empty-states/lent.svg" description="If you want to start lending, check the Lend section."></app-empty-state>
+        </div>
+        <ng-container *ngIf="!loans.length && loading">
+            <app-empty-state title="Hey! You don´t have any funded loans yet." image="./assets/empty-states/lent.svg" description="If you want to start lending, check the Lend section."></app-empty-state>
+            <!-- <app-dashboard-list-skeleton></app-dashboard-list-skeleton> -->
         </ng-container>
     </ng-container>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.ts b/src/app/shared/dashboard-list/dashboard-list.component.ts
index facbcf5a6..3cb04715f 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.ts
+++ b/src/app/shared/dashboard-list/dashboard-list.component.ts
@@ -10,6 +10,7 @@ export class DashboardListComponent {
   @Input() title: string;
   @Input() showOptions: boolean;
   @Input() loans: Loan[];
+  @Input() loading: boolean;
 
   constructor() {}
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 2c8454bd0..b10fa9ae9 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -63,6 +63,7 @@ import { EventsService } from './../services/events.service';
 import { DashboardListComponent } from './dashboard-list/dashboard-list.component';
 import { ProgressBarComponent } from './progress-bar/progress-bar.component';
 import { DashboardListItemComponent } from './dashboard-list-item/dashboard-list-item.component';
+import { DashboardListSkeletonComponent } from './dashboard-list-skeleton/dashboard-list-skeleton.component';
 
 @NgModule({
   imports: [
@@ -121,7 +122,8 @@ import { DashboardListItemComponent } from './dashboard-list-item/dashboard-list
     FormatAddressPipe,
     DashboardListComponent,
     ProgressBarComponent,
-    DashboardListItemComponent
+    DashboardListItemComponent,
+    DashboardListSkeletonComponent
   ],
   entryComponents: [
     DialogInsufficientfundsComponent,
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index b1b13d27a..f7c0bebf0 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -27,7 +27,7 @@
       </div>
       <div class="dashboard__content">
         <div class="row">
-          <div *ngIf="(!isLoading || isAvailableLoansBorrowed) && (!isMobile || isPageBorrow)" class="col-md-6">
+          <div *ngIf="!isMobile || isPageBorrow" class="col-md-6">
             <virtual-scroller
               #scroll
               [items]="loansBorrowed"
@@ -35,10 +35,10 @@
               [scrollThrottlingTime]="500"
               (scroll)="onScrollBorrowed($event)"
             >
-              <app-dashboard-list [loans]="loansBorrowed" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
+              <app-dashboard-list [loading]="isLoading" [loans]="loansBorrowed" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
             </virtual-scroller>
           </div>
-          <div *ngIf="(!isLoading || isAvailableLoansBorrowed) && (!isMobile || !isPageBorrow)" class="col-md-6">
+          <div *ngIf="!isMobile || !isPageBorrow" class="col-md-6">
             <virtual-scroller
               #scroll
               [items]="loansLent"
@@ -46,7 +46,7 @@
               [scrollThrottlingTime]="500"
               (scroll)="onScrollLent($event)"
             >
-              <app-dashboard-list [loans]="loansLent" [showOptions]="false" title="CURRENT LENT"></app-dashboard-list>
+              <app-dashboard-list [loading]="isLoading" [loans]="loansLent" [showOptions]="false" title="CURRENT LENT"></app-dashboard-list>
             </virtual-scroller>
           </div>
         </div>
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index 57fcf6a24..b1dce3c11 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -43,8 +43,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
     await this.loadAccount();
     this.checkIfIsMobile();
     this.handleLoginEvents();
-    this.loadLoansBorrowed();
-    this.loadLoansLent();
+    await this.loadLoansBorrowed();
+    await this.loadLoansLent();
   }
 
   ngOnDestroy() {
@@ -133,13 +133,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
       // filter status destroyed, expired and paid
       loans = loans.filter(
-        (l) => l.status !== Status.Expired && l.status !== Status.Destroyed
+        (l) => l.status !== Status.Destroyed
       );
       if (this.isCurrentLoans) {
-        loans = loans.filter((l) => l.status !== Status.Paid);
+        loans = loans.filter((l) => l.status !== Status.Paid && l.status !== Status.Expired);
       }
       if (!this.isCurrentLoans) {
-        loans = loans.filter((l) => l.status === Status.Paid);
+        loans = loans.filter((l) => l.status === Status.Paid || l.status === Status.Expired);
       }
 
       // if there are no more loans
@@ -162,7 +162,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       // incrase current paginator results
       currentLoadedLoans = currentLoadedLoans + loans.length;
 
-      const MINIMUN_LOANS_TO_SHOW = 6;
+      const MINIMUN_LOANS_TO_SHOW = 20;
       if (loans.length && currentLoadedLoans < MINIMUN_LOANS_TO_SHOW) {
         await this.loadLoansBorrowed(
           this.address,
@@ -204,7 +204,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
       // filter status destroyed, expired and paid
       loans = loans.filter(
-        (l) => l.status !== Status.Expired && l.status !== Status.Destroyed
+        (l) => l.status !== Status.Destroyed
       );
       if (this.isCurrentLoans) {
         loans = loans.filter((l) => l.status !== Status.Paid);
@@ -231,7 +231,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       // incrase current paginator results
       currentLoadedLoans = currentLoadedLoans + loans.length;
 
-      const MINIMUN_LOANS_TO_SHOW = 6;
+      const MINIMUN_LOANS_TO_SHOW = 20;
       if (loans.length && currentLoadedLoans < MINIMUN_LOANS_TO_SHOW) {
         await this.loadLoansLent(
           this.address,

From 9b16a815bec5e7f8a5cf1158f8a1a16719a32b91 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Wed, 28 Apr 2021 14:16:18 -0300
Subject: [PATCH 16/66] fix duplicate loans in dashboard

---
 .../dashboard-list-skeleton.component.html    | 26 +++++++++++++------
 .../dashboard-list-skeleton.component.scss    |  1 +
 .../dashboard-list-skeleton.component.ts      |  4 ++-
 .../dashboard-list.component.html             |  3 +--
 .../views/dashboard/dashboard.component.ts    |  9 ++++---
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
index eb54aebaf..d39db346b 100644
--- a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
@@ -1,35 +1,45 @@
-<div class="list__item">
+<div  *ngFor="let dummy of ' '.repeat(items).split(''), let x = index" class="list__item">
     <div class="list__item__title d-sm-none">
         <p>skeleton</p>
     </div>
     <div class="list__item__column">
         <div class="row">
             <div class="list__item__column__title col-md-12 col-6 d-sm-none">BORROWED</div>
-            <div class="col-md-12 col-6">skeleton</div>
+            <div class="col-md-12 col-6">
+                <app-skeleton borderRadius="15px"></app-skeleton>
+            </div>
         </div>
     </div>
     <div class="list__item__column">
         <div class="row">
             <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAID</div>
-            <div class="col-md-12 col-6">skeleton</div>
+            <div class="col-md-12 col-6">
+                <app-skeleton borderRadius="15px"></app-skeleton>
+            </div>
         </div>
     </div>
     <div class="list__item__column">
         <div class="row">
             <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
-            <div class="col-md-12 col-6">skeleton</div>
+            <div class="col-md-12 col-6">
+                <app-skeleton borderRadius="15px"></app-skeleton>
+            </div>
         </div>
     </div>
     <div class="list__item__column">
         <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
-            <div class="col-md-12 col-6">skeleton</div>
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">SCHEDULE PROGRESS</div>
+            <div class="col-md-12 col-6">
+                <app-skeleton borderRadius="15px"></app-skeleton>
+            </div>
         </div>
     </div>
     <div class="list__item__column list__item__column__payment">
         <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
-            <div class="col-md-12 col-6">skeleton</div>
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAYMENT PROGRESS</div>
+            <div class="col-md-12 col-6">
+                <app-skeleton borderRadius="15px"></app-skeleton>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss
index 597017c83..9c6cebec6 100644
--- a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss
@@ -37,6 +37,7 @@
         width: 20%;
         margin-top: 22px;
         margin-bottom: 0;
+        padding: 0 10px;
       }
     }
   }
diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts
index 1abe65d50..bebfbec42 100644
--- a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-dashboard-list-skeleton',
@@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardListSkeletonComponent implements OnInit {
 
+  @Input() items: number;
+
   constructor() { }
 
   ngOnInit() {
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index 6e3c5bcfb..d4d4d4d1e 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -21,8 +21,7 @@
             <app-empty-state title="Hey! You don´t have any funded loans yet." image="./assets/empty-states/lent.svg" description="If you want to start lending, check the Lend section."></app-empty-state>
         </div>
         <ng-container *ngIf="!loans.length && loading">
-            <app-empty-state title="Hey! You don´t have any funded loans yet." image="./assets/empty-states/lent.svg" description="If you want to start lending, check the Lend section."></app-empty-state>
-            <!-- <app-dashboard-list-skeleton></app-dashboard-list-skeleton> -->
+            <app-dashboard-list-skeleton items="5"></app-dashboard-list-skeleton>
         </ng-container>
     </ng-container>
 </div>
\ No newline at end of file
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index b1dce3c11..ed0a1d167 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -162,7 +162,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       // incrase current paginator results
       currentLoadedLoans = currentLoadedLoans + loans.length;
 
-      const MINIMUN_LOANS_TO_SHOW = 20;
+      const MINIMUN_LOANS_TO_SHOW = 5;
       if (loans.length && currentLoadedLoans < MINIMUN_LOANS_TO_SHOW) {
         await this.loadLoansBorrowed(
           this.address,
@@ -231,7 +231,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       // incrase current paginator results
       currentLoadedLoans = currentLoadedLoans + loans.length;
 
-      const MINIMUN_LOANS_TO_SHOW = 20;
+      const MINIMUN_LOANS_TO_SHOW = 5;
       if (loans.length && currentLoadedLoans < MINIMUN_LOANS_TO_SHOW) {
         await this.loadLoansLent(
           this.address,
@@ -276,8 +276,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
   private handleLoginEvents() {
     this.subscriptionAccount = this.web3Service.loginEvent.subscribe(
       async() => {
+        const prevAddress = this.address;
         await this.loadAccount();
-        await this.resetLoans();
+        if (prevAddress !== this.address) {
+          await this.resetLoans();
+        }
       }
     );
   }

From 0f750d9452a5b3259e9e0787680a8e62324ae08e Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Wed, 28 Apr 2021 14:52:01 -0300
Subject: [PATCH 17/66] improve styles mobile in dashboard

---
 .../dashboard-list-skeleton.component.html    | 20 ++++++++++++-------
 .../dashboard-list-skeleton.component.scss    | 10 +---------
 .../dashboard-list-skeleton.component.spec.ts |  5 +++--
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
index d39db346b..b66fa1def 100644
--- a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
@@ -1,10 +1,12 @@
 <div  *ngFor="let dummy of ' '.repeat(items).split(''), let x = index" class="list__item">
     <div class="list__item__title d-sm-none">
-        <p>skeleton</p>
+        <app-skeleton borderRadius="15px" width="200px"></app-skeleton>
     </div>
     <div class="list__item__column">
         <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">BORROWED</div>
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+                <app-skeleton borderRadius="15px"></app-skeleton>
+            </div>
             <div class="col-md-12 col-6">
                 <app-skeleton borderRadius="15px"></app-skeleton>
             </div>
@@ -12,7 +14,9 @@
     </div>
     <div class="list__item__column">
         <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAID</div>
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+                <app-skeleton borderRadius="15px"></app-skeleton>
+            </div>
             <div class="col-md-12 col-6">
                 <app-skeleton borderRadius="15px"></app-skeleton>
             </div>
@@ -20,22 +24,24 @@
     </div>
     <div class="list__item__column">
         <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
+            <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+                <app-skeleton borderRadius="15px"></app-skeleton>
+            </div>
             <div class="col-md-12 col-6">
                 <app-skeleton borderRadius="15px"></app-skeleton>
             </div>
         </div>
     </div>
     <div class="list__item__column">
-        <div class="row">
+        <div class="row d-none d-sm-block">
             <div class="list__item__column__title col-md-12 col-6 d-sm-none">SCHEDULE PROGRESS</div>
             <div class="col-md-12 col-6">
                 <app-skeleton borderRadius="15px"></app-skeleton>
             </div>
         </div>
     </div>
-    <div class="list__item__column list__item__column__payment">
-        <div class="row">
+    <div class="list__item__column">
+        <div class="row d-none d-sm-block">
             <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAYMENT PROGRESS</div>
             <div class="col-md-12 col-6">
                 <app-skeleton borderRadius="15px"></app-skeleton>
diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss
index 9c6cebec6..201175bf0 100644
--- a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.scss
@@ -9,18 +9,11 @@
     padding: 10px 15px;
     position: relative;
     &__title {
-      @include styled-font('proxima-nova', 700, 14px);
       margin-bottom: 16px;
-    }
-    &__title svg {
-      margin-right: 8px;
+      text-align: center;
     }
     &__column {
       margin-bottom: 10px;
-      @include styled-font('proxima-nova', 400, 13px);
-      &__title {
-        @include styled-font('proxima-nova', 650, 13px);
-      }
     }
   }
 }
@@ -32,7 +25,6 @@
       height: 65px;
       padding: 0;
       &__column {
-        @include styled-font('Roboto', 400, 15px);
         display: inline-block;
         width: 20%;
         margin-top: 22px;
diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.spec.ts b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.spec.ts
index 84781bfb7..fc51a1deb 100644
--- a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.spec.ts
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.spec.ts
@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { DashboardListSkeletonComponent } from './dashboard-list-skeleton.component';
 
 describe('DashboardListSkeletonComponent', () => {
@@ -8,7 +8,8 @@ describe('DashboardListSkeletonComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DashboardListSkeletonComponent ]
+      declarations: [ DashboardListSkeletonComponent ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
     })
     .compileComponents();
   }));

From 58929401c2579f56abee6c4d761e232777e70d61 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Wed, 28 Apr 2021 15:25:38 -0300
Subject: [PATCH 18/66] fix error without account in icon group

---
 .../header/icon-group-header/icon-group-header.component.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/core/header/icon-group-header/icon-group-header.component.ts b/src/app/core/header/icon-group-header/icon-group-header.component.ts
index 83a243554..d5b955cf2 100644
--- a/src/app/core/header/icon-group-header/icon-group-header.component.ts
+++ b/src/app/core/header/icon-group-header/icon-group-header.component.ts
@@ -39,7 +39,7 @@ export class IconGroupHeaderComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnChanges() {
     const { account } = this;
-    this.shortAccount = Utils.shortAddress(account);
+    if (account) this.shortAccount = Utils.shortAddress(account);
   }
 
   ngOnDestroy() {

From 5211476f67364fad4f7c04992c8c0f490c18770d Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Thu, 29 Apr 2021 13:38:54 -0300
Subject: [PATCH 19/66] add status collateral pending in dashboard

---
 .../dashboard-list-item.component.html                 |  4 +++-
 .../dashboard-list-item.component.scss                 |  9 ++++++---
 .../dashboard-list-item.component.ts                   | 10 +++++++---
 .../dashboard-list/dashboard-list.component.html       |  2 +-
 .../shared/dashboard-list/dashboard-list.component.ts  |  1 +
 src/app/shared/loan-list/loan-list.component.ts        |  2 +-
 src/app/views/dashboard/dashboard.component.html       |  2 +-
 src/app/views/dashboard/dashboard.component.ts         |  8 ++++++--
 8 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index 9e128ff55..ace869509 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -1,6 +1,8 @@
 <div class="list__item" [ngStyle]="{'border-color': getBorderColorByStatus()}">
     <div class="list__item__title d-sm-none">
-        <p><i class="fas" [ngClass]="'fa-'+getIconByStatus()"></i> {{ getStatusTextByStatus() }}</p>
+        <p [ngClass]="getStatusTextByStatus() === 'Collateral Pending' ? 'list__item__title--warning' : ''"><i class="fas" [ngClass]="'fa-'+getIconByStatus()"></i> 
+            {{ getStatusTextByStatus() }}
+        </p>
     </div>
     <div class="list__item__column">
         <div class="row">
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
index 41812260f..8f25904dc 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
@@ -24,9 +24,12 @@
     &__title {
       @include styled-font('proxima-nova', 700, 14px);
       margin-bottom: 16px;
-    }
-    &__title svg {
-      margin-right: 8px;
+      &--warning {
+        color: #EAA219;
+      }
+      svg {
+        margin-right: 8px;
+      }
     }
     &__column {
       margin-bottom: 10px;
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index 303f014c9..3afd2442d 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -10,6 +10,7 @@ import { Utils } from 'app/utils/utils';
 export class DashboardListItemComponent implements OnInit {
   @Input() loan: Loan;
   @Input() showOptions: boolean;
+  @Input() isCurrentLoans: boolean;
 
   borrowed = '-';
   repaid = '-';
@@ -28,7 +29,8 @@ export class DashboardListItemComponent implements OnInit {
   getBorderColorByStatus = () => {
     switch (this.loan.status) {
       case Status.Request:
-        return '#FFFFFF';
+        if (this.isCurrentLoans) return '#FFFFFF';
+        return '#565759';
       case Status.Ongoing:
         return '#4155FF';
       case Status.Paid:
@@ -45,7 +47,8 @@ export class DashboardListItemComponent implements OnInit {
   getStatusTextByStatus = () => {
     switch (this.loan.status) {
       case Status.Request:
-        return 'Requested';
+        if (this.isCurrentLoans) return 'Requested';
+        return 'Collateral Pending';
       case Status.Ongoing:
         return 'Ongoing';
       case Status.Paid:
@@ -62,7 +65,8 @@ export class DashboardListItemComponent implements OnInit {
   getIconByStatus = () => {
     switch (this.loan.status) {
       case Status.Request:
-        return 'calendar';
+        if (this.isCurrentLoans) return 'calendar';
+        return 'exclamation';
       case Status.Ongoing:
         return 'angle-double-up';
       case Status.Paid:
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index d4d4d4d1e..29e227893 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -14,7 +14,7 @@
     <ng-container *ngIf="loans">
         <div class="list__item-container" *ngIf="loans.length">
             <ng-container *ngFor="let loan of loans">
-                <app-dashboard-list-item [showOptions]="showOptions" [loan]="loan"></app-dashboard-list-item>
+                <app-dashboard-list-item [isCurrentLoans]="isCurrentLoans" [showOptions]="showOptions" [loan]="loan"></app-dashboard-list-item>
             </ng-container>
         </div>
         <div *ngIf="!loans.length && !loading" class="list__empty-state">
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.ts b/src/app/shared/dashboard-list/dashboard-list.component.ts
index 3cb04715f..42d24ca06 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.ts
+++ b/src/app/shared/dashboard-list/dashboard-list.component.ts
@@ -11,6 +11,7 @@ export class DashboardListComponent {
   @Input() showOptions: boolean;
   @Input() loans: Loan[];
   @Input() loading: boolean;
+  @Input() isCurrentLoans: boolean;
 
   constructor() {}
 }
diff --git a/src/app/shared/loan-list/loan-list.component.ts b/src/app/shared/loan-list/loan-list.component.ts
index 51a90c753..ce47fcab1 100644
--- a/src/app/shared/loan-list/loan-list.component.ts
+++ b/src/app/shared/loan-list/loan-list.component.ts
@@ -217,7 +217,7 @@ export class LoanListComponent implements OnInit, OnDestroy {
     }
 
     const collateralCurrency = this.currenciesService.getCurrencyByKey('address', collateral.token);
-    this.collateralAsset = collateralCurrency.symbol;
+    if (collateralCurrency) this.collateralAsset = collateralCurrency.symbol;
 
     const collateralRatio = await this.calculateCollateralRatio();
     this.collateralRatio = Utils.formatAmount(collateralRatio, 0);
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index f7c0bebf0..e43687635 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -35,7 +35,7 @@
               [scrollThrottlingTime]="500"
               (scroll)="onScrollBorrowed($event)"
             >
-              <app-dashboard-list [loading]="isLoading" [loans]="loansBorrowed" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
+              <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loading]="isLoading" [loans]="loansBorrowed" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
             </virtual-scroller>
           </div>
           <div *ngIf="!isMobile || !isPageBorrow" class="col-md-6">
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index ed0a1d167..f0f167a3e 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -137,9 +137,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
       );
       if (this.isCurrentLoans) {
         loans = loans.filter((l) => l.status !== Status.Paid && l.status !== Status.Expired);
+        loans = loans.filter((l) => l.collateral);
       }
       if (!this.isCurrentLoans) {
-        loans = loans.filter((l) => l.status === Status.Paid || l.status === Status.Expired);
+        loans = loans.filter((l) => l.status === Status.Paid || l.status === Status.Expired || l.status === Status.Request);
+        loans = loans.filter((l) => !l.collateral);
       }
 
       // if there are no more loans
@@ -208,9 +210,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
       );
       if (this.isCurrentLoans) {
         loans = loans.filter((l) => l.status !== Status.Paid);
+        loans = loans.filter((l) => l.collateral);
       }
       if (!this.isCurrentLoans) {
-        loans = loans.filter((l) => l.status === Status.Paid);
+        loans = loans.filter((l) => l.status === Status.Paid || l.status === Status.Expired || l.status === Status.Request);
+        loans = loans.filter((l) => !l.collateral);
       }
 
       // if there are no more loans

From c45eac4e76310b4af7de0f90accceeef99578aec Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Fri, 30 Apr 2021 13:27:39 -0300
Subject: [PATCH 20/66] fix filter in dashboard

---
 .../dashboard-list-item.component.html        |  3 +-
 .../dashboard-list-item.component.scss        |  3 ++
 .../dashboard-list-item.component.ts          |  2 +-
 .../views/dashboard/dashboard.component.ts    | 40 +++++++++++++------
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index ace869509..6ce7f0a29 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -1,6 +1,7 @@
 <div class="list__item" [ngStyle]="{'border-color': getBorderColorByStatus()}">
     <div class="list__item__title d-sm-none">
-        <p [ngClass]="getStatusTextByStatus() === 'Collateral Pending' ? 'list__item__title--warning' : ''"><i class="fas" [ngClass]="'fa-'+getIconByStatus()"></i> 
+        <p [ngClass]="{'list__item__title--warning': getStatusTextByStatus() === 'Collateral Pending', 'list__item__title--expired' : getStatusTextByStatus() === 'Expired' }">
+            <i class="fas" [ngClass]="'fa-'+getIconByStatus()"></i> 
             {{ getStatusTextByStatus() }}
         </p>
     </div>
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
index 8f25904dc..872c6bb8d 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
@@ -27,6 +27,9 @@
       &--warning {
         color: #EAA219;
       }
+      &--expired {
+        color: #A3A5A6;
+      }
       svg {
         margin-right: 8px;
       }
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index 3afd2442d..3da2cf695 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -30,7 +30,7 @@ export class DashboardListItemComponent implements OnInit {
     switch (this.loan.status) {
       case Status.Request:
         if (this.isCurrentLoans) return '#FFFFFF';
-        return '#565759';
+        return '#A3A5A6';
       case Status.Ongoing:
         return '#4155FF';
       case Status.Paid:
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index f0f167a3e..e185ca674 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -132,16 +132,23 @@ export class DashboardComponent implements OnInit, OnDestroy {
       );
 
       // filter status destroyed, expired and paid
-      loans = loans.filter(
-        (l) => l.status !== Status.Destroyed
-      );
+      loans = loans.filter((l) => l.status !== Status.Destroyed);
       if (this.isCurrentLoans) {
-        loans = loans.filter((l) => l.status !== Status.Paid && l.status !== Status.Expired);
+        loans = loans.filter(
+          (l) =>
+            l.status === Status.Ongoing ||
+            l.status === Status.Indebt ||
+            l.status === Status.Request
+        );
         loans = loans.filter((l) => l.collateral);
       }
       if (!this.isCurrentLoans) {
-        loans = loans.filter((l) => l.status === Status.Paid || l.status === Status.Expired || l.status === Status.Request);
-        loans = loans.filter((l) => !l.collateral);
+        loans = loans.filter(
+          (l) =>
+            l.status === Status.Paid ||
+            l.status === Status.Expired ||
+            (l.status === Status.Request && !l.collateral)
+        );
       }
 
       // if there are no more loans
@@ -205,16 +212,23 @@ export class DashboardComponent implements OnInit, OnDestroy {
       );
 
       // filter status destroyed, expired and paid
-      loans = loans.filter(
-        (l) => l.status !== Status.Destroyed
-      );
+      loans = loans.filter((l) => l.status !== Status.Destroyed);
       if (this.isCurrentLoans) {
-        loans = loans.filter((l) => l.status !== Status.Paid);
+        loans = loans.filter(
+          (l) =>
+            l.status === Status.Ongoing ||
+            l.status === Status.Indebt ||
+            l.status === Status.Request
+        );
         loans = loans.filter((l) => l.collateral);
       }
       if (!this.isCurrentLoans) {
-        loans = loans.filter((l) => l.status === Status.Paid || l.status === Status.Expired || l.status === Status.Request);
-        loans = loans.filter((l) => !l.collateral);
+        loans = loans.filter(
+          (l) =>
+            l.status === Status.Paid ||
+            l.status === Status.Expired ||
+            (l.status === Status.Request && !l.collateral)
+        );
       }
 
       // if there are no more loans
@@ -279,7 +293,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
    */
   private handleLoginEvents() {
     this.subscriptionAccount = this.web3Service.loginEvent.subscribe(
-      async() => {
+      async () => {
         const prevAddress = this.address;
         await this.loadAccount();
         if (prevAddress !== this.address) {

From 809b82db6f5cc26ca4007fe3b746e1dd16832ec9 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 3 May 2021 11:20:37 -0300
Subject: [PATCH 21/66] fix styles in modals and redirect in aside

---
 src/app/core/navrail/navrail.component.html                   | 2 +-
 .../dashboard-list-item/dashboard-list-item.component.scss    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/core/navrail/navrail.component.html b/src/app/core/navrail/navrail.component.html
index 89855cc58..570124bd2 100644
--- a/src/app/core/navrail/navrail.component.html
+++ b/src/app/core/navrail/navrail.component.html
@@ -42,7 +42,7 @@
       </a>
       <ng-container *ngIf="hasAccount; else connectButtonTemplate">
         <a
-          routerLink='/address/{{ account }}/'
+          routerLink='/dashboard'
           class="menu__item"
           routerLinkActive="menu__item--active"
         >
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
index 872c6bb8d..6f8ed7050 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
@@ -7,7 +7,7 @@
     padding-top: 0px !important;
     padding-bottom: 0px !important;
   }
-  .cdk-overlay-pane {
+  .cdk-overlay-connected-position-bounding-box {
     height: 144px !important;
   }
 }
@@ -99,7 +99,7 @@
     }
   }
   ::ng-deep {
-    .cdk-overlay-pane {
+    .cdk-overlay-connected-position-bounding-box {
       height: 127px !important;
     }
   }

From 31695c7918e396004d0a7e0a294c6cbd27347b32 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Tue, 4 May 2021 15:59:44 -0300
Subject: [PATCH 22/66] tooltip of timeprogress in dashboard

---
 .../dashboard-list-item.component.html        |  8 +--
 .../dashboard-list-item.component.ts          | 54 ++++++++++++++++++-
 src/app/shared/footer/footer.component.html   |  2 +-
 src/app/views/dashboard/dashboard.module.ts   |  4 +-
 4 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index 6ce7f0a29..646dbb59c 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -26,7 +26,7 @@
     <div class="list__item__column">
         <div class="row">
             <div class="list__item__column__title col-md-12 col-6 d-sm-none">SCHEDULE PROGRESS</div>
-            <div class="list__item__column__progress col-md-12 col-6">
+            <div class="list__item__column__progress col-md-12 col-6" [matTooltip]="(scheduleTooltip && installmentTooltip) ? scheduleTooltip + ' ' + installmentTooltip : ''" matTooltipPosition="below">
                 <app-progress-bar [color]="getBorderColorByStatus()" [progress]="timeProgress"></app-progress-bar>
             </div>
         </div>
@@ -35,7 +35,7 @@
         <div class="row">
             <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAYMENT PROGRESS</div>
             <div class="col-6">
-                <p matTooltip="Accrued interest: X.XX">{{ paymentProgress }}</p>
+                <p matTooltip="Accrued interest: X.XX" matTooltipPosition="below">{{ paymentProgress }}</p>
             </div>
             <div *ngIf="showOptions" class="col-2 list__item__column__payment__button">
                 <button mat-icon-button [matMenuTriggerFor]="appMenu">
@@ -43,8 +43,8 @@
                 </button>
                 <mat-menu #appMenu="matMenu" yPosition="below">
                     <button class="list__item__button--separator" mat-menu-item>Pay</button>
-                    <button mat-menu-item>Withdraw Collateral</button>
-                    <button mat-menu-item>Add Collateral</button>
+                    <button (click)="openDialog('withdraw')" mat-menu-item>Withdraw Collateral</button>
+                    <button (click)="openDialog('add')" mat-menu-item>Add Collateral</button>
                 </mat-menu>
             </div>
         </div>
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index 3da2cf695..c958b9f94 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -1,6 +1,10 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material';
+import { DialogCollateralComponent } from 'app/dialogs/dialog-collateral/dialog-collateral.component';
 import { Loan, Status } from 'app/models/loan.model';
 import { Utils } from 'app/utils/utils';
+import { Installment } from 'app/interfaces/installment';
+import { InstallmentsService } from 'app/services/installments.service';
 
 @Component({
   selector: 'app-dashboard-list-item',
@@ -17,13 +21,20 @@ export class DashboardListItemComponent implements OnInit {
   anualRate = '-';
   paymentProgress = '-';
   timeProgress = '0%';
+  scheduleTooltip: string;
+  installmentTooltip: string;
 
-  constructor() {}
+  constructor(
+    private dialog: MatDialog,
+    private installmentsService: InstallmentsService
+  ) {}
 
   ngOnInit() {
     this.loadBasicData();
     this.loadPaymentProgress();
     this.loadTimeProgress();
+    this.loadDuration();
+    this.loadInstallments();
   }
 
   getBorderColorByStatus = () => {
@@ -80,6 +91,18 @@ export class DashboardListItemComponent implements OnInit {
     }
   }
 
+  async openDialog(action: 'add' | 'withdraw') {
+    const dialogConfig: MatDialogConfig = {
+      data: {
+        loan: this.loan,
+        collateral: this.loan.collateral,
+        action
+      }
+    };
+
+    this.dialog.open(DialogCollateralComponent, dialogConfig);
+  }
+
   private loadBasicData() {
     const { amount, currency, debt, descriptor, status } = this.loan;
 
@@ -140,4 +163,33 @@ export class DashboardListItemComponent implements OnInit {
       daysAverage > MAX_AVERAGE ? MAX_AVERAGE : daysAverage
     }%`;
   }
+
+  private loadDuration() {
+    const loan: Loan = this.loan;
+    if (loan.status === Status.Ongoing || loan.status === Status.Indebt) {
+      const durationDynamic = Utils.formatDelta(
+        loan.debt.model.dueTime - new Date().getTime() / 1000
+      );
+      this.scheduleTooltip =
+        loan.status === Status.Indebt
+          ? `Overdue for ${durationDynamic}`
+          : `Next payment in ${durationDynamic}`;
+    }
+  }
+
+  private async loadInstallments() {
+    const loan: Loan = this.loan;
+    if (loan.status === Status.Ongoing || loan.status === Status.Indebt) {
+      const installment: Installment = await this.installmentsService.getCurrentInstallment(
+        loan
+      );
+      if (!installment) {
+        return;
+      }
+
+      const payNumber = installment.payNumber;
+      this.installmentTooltip = `Instalments: ${payNumber} of ${loan.config.installments}`;
+    }
+  }
+
 }
diff --git a/src/app/shared/footer/footer.component.html b/src/app/shared/footer/footer.component.html
index 6ed583606..c81e5d33c 100644
--- a/src/app/shared/footer/footer.component.html
+++ b/src/app/shared/footer/footer.component.html
@@ -24,7 +24,7 @@
 
       <ng-container *ngIf="hasAccount">
         <li
-          routerLink='/address/{{ account }}/'
+          routerLink='/dashboard'
           routerLinkActive="active"
         >
           <i class="fas fa-hand-holding-usd"></i>
diff --git a/src/app/views/dashboard/dashboard.module.ts b/src/app/views/dashboard/dashboard.module.ts
index 7dc1f31f2..217e0fb81 100644
--- a/src/app/views/dashboard/dashboard.module.ts
+++ b/src/app/views/dashboard/dashboard.module.ts
@@ -7,6 +7,7 @@ import { VirtualScrollerModule } from 'ngx-virtual-scroller';
 import { SharedModule } from '../../shared/shared.module';
 // App Services
 import { ContractsService } from '../../services/contracts.service';
+import { InstallmentsService } from '../../services/installments.service';
 // App Component
 import { DashboardComponent } from './dashboard.component';
 
@@ -27,7 +28,8 @@ const routes: Routes = [
     DashboardComponent
   ],
   providers: [
-    ContractsService
+    ContractsService,
+    InstallmentsService
   ],
   exports: [
     DashboardComponent

From ef0455f3034b1e4fb4459de2ea4289ae66e124c9 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Tue, 4 May 2021 16:28:58 -0300
Subject: [PATCH 23/66] fix unit testing

---
 .../dashboard-list-item.component.spec.ts                  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
index b3975593a..f838c8aee 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
@@ -1,8 +1,10 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
 import { DashboardListItemComponent } from './dashboard-list-item.component';
 import { MaterialModule } from '../..//material.module';
 import { Engine, Loan, Status } from '../..//models/loan.model';
+import { InstallmentsService } from '../../services/installments.service';
 
 describe('DashboardListItemComponent', () => {
   let component: DashboardListItemComponent;
@@ -10,9 +12,10 @@ describe('DashboardListItemComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
+      imports: [MaterialModule, HttpClientModule],
       declarations: [DashboardListItemComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      providers: [InstallmentsService]
     }).compileComponents();
   }));
 

From d786b1d2826e535ee72478b4fefa5df01edcfae9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Wed, 5 May 2021 15:37:27 -0300
Subject: [PATCH 24/66] fix method loanWasCreated

---
 src/app/services/contracts.service.ts              | 2 +-
 src/app/views/create-loan/create-loan.component.ts | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/services/contracts.service.ts b/src/app/services/contracts.service.ts
index ee8015484..f58c0a3b6 100644
--- a/src/app/services/contracts.service.ts
+++ b/src/app/services/contracts.service.ts
@@ -855,7 +855,7 @@ export class ContractsService {
     try {
       const loan = await this._loanManager[engine].methods.getLoanData(loanId).call();
 
-      if (Utils.isEmpty(loan)) {
+      if (!loan || Utils.isEmpty(loan)) {
         throw Error('Loan does not exist');
       }
 
diff --git a/src/app/views/create-loan/create-loan.component.ts b/src/app/views/create-loan/create-loan.component.ts
index 9e34ba295..ede44fcbf 100644
--- a/src/app/views/create-loan/create-loan.component.ts
+++ b/src/app/views/create-loan/create-loan.component.ts
@@ -155,6 +155,11 @@ export class CreateLoanComponent implements OnInit, OnDestroy {
       this.showMessage('Please wait until your collateral supplying transaction is completed.', 'snackbar');
       return;
     }
+    const loanWasCreated = await this.contractsService.loanWasCreated(loan.engine, loan.id);
+    if (!loanWasCreated) {
+      this.showMessage('A problem occurred during loan creation. Please try again.', 'snackbar');
+      return;
+    }
     // unlogged user
     if (!this.web3Service.loggedIn) {
       await this.walletConnectService.connect();

From 38b58a8e450dfd2707db0cd5f8f262caf16874e4 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Wed, 5 May 2021 15:53:58 -0300
Subject: [PATCH 25/66] add functionality in dashboard buttons

---
 .../dashboard-list-item.component.html        |  8 +--
 .../dashboard-list-item.component.scss        |  9 ++-
 .../dashboard-list-item.component.spec.ts     |  3 +-
 .../dashboard-list-item.component.ts          | 69 ++++++++++++++++---
 src/app/shared/shared.module.ts               |  9 ++-
 .../views/loan-detail/loan-detail.module.ts   |  9 +--
 6 files changed, 79 insertions(+), 28 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index 646dbb59c..ad07a2913 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -38,13 +38,13 @@
                 <p matTooltip="Accrued interest: X.XX" matTooltipPosition="below">{{ paymentProgress }}</p>
             </div>
             <div *ngIf="showOptions" class="col-2 list__item__column__payment__button">
-                <button mat-icon-button [matMenuTriggerFor]="appMenu">
+                <button *ngIf="canPay || canRedeem || canAdjustCollateral" mat-icon-button [matMenuTriggerFor]="appMenu">
                     <i class="fas fa-ellipsis-v"></i>
                 </button>
                 <mat-menu #appMenu="matMenu" yPosition="below">
-                    <button class="list__item__button--separator" mat-menu-item>Pay</button>
-                    <button (click)="openDialog('withdraw')" mat-menu-item>Withdraw Collateral</button>
-                    <button (click)="openDialog('add')" mat-menu-item>Add Collateral</button>
+                    <button *ngIf="canPay" (click)="openDialog('pay')" mat-menu-item>Pay</button>
+                    <button *ngIf="canRedeem" (click)="openDialog('withdraw')" mat-menu-item>Withdraw Collateral</button>
+                    <button *ngIf="canAdjustCollateral" (click)="openDialog('add')" mat-menu-item>Add Collateral</button>
                 </mat-menu>
             </div>
         </div>
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
index 6f8ed7050..e48b93bc4 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
@@ -10,6 +10,12 @@
   .cdk-overlay-connected-position-bounding-box {
     height: 144px !important;
   }
+  .mat-menu-panel {
+    min-height: 0px !important;
+  }
+  .cdk-overlay-pane{
+    height: auto !important;
+  }
 }
 
 .list {
@@ -85,9 +91,6 @@
       &__button {
         display: none;
       }
-      &__button--separator {
-        border-bottom: 1px solid #6a6a6b;
-      }
       &__tooltip {
         position: absolute;
         left: -6px;
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
index f838c8aee..f8453fd5b 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
@@ -1,4 +1,5 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientModule } from '@angular/common/http';
 import { DashboardListItemComponent } from './dashboard-list-item.component';
@@ -12,7 +13,7 @@ describe('DashboardListItemComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule, HttpClientModule],
+      imports: [MaterialModule, HttpClientModule, RouterModule.forRoot([])],
       declarations: [DashboardListItemComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       providers: [InstallmentsService]
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index c958b9f94..d18d4669b 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -1,10 +1,14 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material';
+import { Router } from '@angular/router';
 import { DialogCollateralComponent } from 'app/dialogs/dialog-collateral/dialog-collateral.component';
 import { Loan, Status } from 'app/models/loan.model';
+import { Status as CollateralStatus } from 'app/models/collateral.model';
 import { Utils } from 'app/utils/utils';
 import { Installment } from 'app/interfaces/installment';
 import { InstallmentsService } from 'app/services/installments.service';
+import { Web3Service } from 'app/services/web3.service';
+import { DialogLoanPayComponent } from 'app/dialogs/dialog-loan-pay/dialog-loan-pay.component';
 
 @Component({
   selector: 'app-dashboard-list-item',
@@ -24,9 +28,15 @@ export class DashboardListItemComponent implements OnInit {
   scheduleTooltip: string;
   installmentTooltip: string;
 
+  canRedeem: boolean;
+  canPay: boolean;
+  canAdjustCollateral: boolean;
+
   constructor(
     private dialog: MatDialog,
-    private installmentsService: InstallmentsService
+    private installmentsService: InstallmentsService,
+    private web3Service: Web3Service,
+    private router: Router
   ) {}
 
   ngOnInit() {
@@ -35,6 +45,7 @@ export class DashboardListItemComponent implements OnInit {
     this.loadTimeProgress();
     this.loadDuration();
     this.loadInstallments();
+    this.checkValidations();
   }
 
   getBorderColorByStatus = () => {
@@ -91,16 +102,28 @@ export class DashboardListItemComponent implements OnInit {
     }
   }
 
-  async openDialog(action: 'add' | 'withdraw') {
-    const dialogConfig: MatDialogConfig = {
-      data: {
-        loan: this.loan,
-        collateral: this.loan.collateral,
-        action
-      }
-    };
-
-    this.dialog.open(DialogCollateralComponent, dialogConfig);
+  async openDialog(action: 'add' | 'withdraw' | 'pay') {
+    if (action === 'pay') {
+      const dialog = this.dialog.open(DialogLoanPayComponent, {
+        data: {
+          loan: this.loan
+        }
+      });
+      dialog.afterClosed().subscribe(() => {
+
+      });
+    } else if (action === 'add') {
+      this.router.navigate(['/borrow', this.loan.id]);
+    } else {
+      const dialogConfig: MatDialogConfig = {
+        data: {
+          loan: this.loan,
+          collateral: this.loan.collateral,
+          action
+        }
+      };
+      this.dialog.open(DialogCollateralComponent, dialogConfig);
+    }
   }
 
   private loadBasicData() {
@@ -192,4 +215,28 @@ export class DashboardListItemComponent implements OnInit {
     }
   }
 
+  /**
+   * Check if collateral can withdraw all
+   */
+  private async checkValidations() {
+    const account: string = await this.web3Service.getAccount();
+
+    if ([Status.Paid, Status.Expired].includes(this.loan.status)) {
+      const isBorrower = this.loan.borrower.toUpperCase() === account.toUpperCase();
+      const { collateral } = this.loan;
+
+      this.canRedeem =
+        isBorrower &&
+        collateral &&
+        [CollateralStatus.ToWithdraw, CollateralStatus.Created].includes(collateral.status) &&
+        Number(collateral.amount) > 0;
+    }
+    if (this.loan.status === Status.Ongoing || this.loan.status === Status.Indebt && this.loan.debt && this.loan.debt.balance) {
+      this.canPay = true;
+    }
+    if (!this.loan.collateral && this.loan.status === Status.Request) {
+      this.canAdjustCollateral = true;
+    }
+  }
+
 }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index de6c3d25e..28e045797 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -51,6 +51,8 @@ import { DialogFrontRunningComponent } from '../dialogs/dialog-front-running/dia
 import { DialogCollateralComponent } from '../dialogs/dialog-collateral/dialog-collateral.component';
 import { DialogNeedWithdrawComponent } from '../dialogs/dialog-need-withdraw/dialog-need-withdraw.component';
 import { DialogPohComponent } from '../dialogs/dialog-poh/dialog-poh.component';
+import { DialogLoanPayComponent } from '../dialogs/dialog-loan-pay/dialog-loan-pay.component';
+
 // Pipes
 import { VisualUrlPipe } from './../pipes/visual-url.pipe';
 import { FormatAmountPipe } from './../pipes/format-amount.pipe';
@@ -121,6 +123,7 @@ import { DashboardListSkeletonComponent } from './dashboard-list-skeleton/dashbo
     DialogCollateralComponent,
     DialogNeedWithdrawComponent,
     DialogPohComponent,
+    DialogLoanPayComponent,
 
     VisualUrlPipe,
     FormatAmountPipe,
@@ -142,7 +145,8 @@ import { DashboardListSkeletonComponent } from './dashboard-list-skeleton/dashbo
     DialogFrontRunningComponent,
     DialogCollateralComponent,
     DialogNeedWithdrawComponent,
-    DialogPohComponent
+    DialogPohComponent,
+    DialogLoanPayComponent
   ],
   providers: [
     ContractsService,
@@ -189,7 +193,8 @@ import { DashboardListSkeletonComponent } from './dashboard-list-skeleton/dashbo
     FormatAmountPipe,
     FormatAddressPipe,
     SkeletonComponent,
-    LoanListSkeletonComponent
+    LoanListSkeletonComponent,
+    DialogLoanPayComponent
   ]
 })
 export class SharedModule { }
diff --git a/src/app/views/loan-detail/loan-detail.module.ts b/src/app/views/loan-detail/loan-detail.module.ts
index cc1e7a4bb..8649610ed 100644
--- a/src/app/views/loan-detail/loan-detail.module.ts
+++ b/src/app/views/loan-detail/loan-detail.module.ts
@@ -16,7 +16,6 @@ import { DetailInstallmentsComponent } from './detail-installments/detail-instal
 import { DetailHistoryComponent } from './detail-history/detail-history.component';
 import { GobackButtonComponent } from '../../shared/goback-button/goback-button.component';
 import { TransferButtonComponent } from './../../shared/transfer-button/transfer-button.component';
-import { DialogLoanPayComponent } from '../../dialogs/dialog-loan-pay/dialog-loan-pay.component';
 import { DialogLoanTransferComponent } from './../../dialogs/dialog-loan-transfer/dialog-loan-transfer.component';
 import { DialogInsufficientfundsComponent } from './../../dialogs/dialog-insufficient-funds/dialog-insufficient-funds.component';
 import { ItemFeatureComponent } from './detail-identity/item-feature/item-feature.component';
@@ -52,18 +51,14 @@ const routes: Routes = [
     GobackButtonComponent,
     TransferButtonComponent,
     DialogLoanTransferComponent,
-    DialogLoanPayComponent,
     ItemFeatureComponent,
     LoanDoesNotExistComponent,
     LoanOverviewPanelComponent
   ],
   entryComponents: [
     DialogLoanTransferComponent,
-    DialogInsufficientfundsComponent,
-    DialogLoanPayComponent
+    DialogInsufficientfundsComponent
   ],
-  exports: [
-    DialogLoanPayComponent
-  ]
+  exports: []
 })
 export class LoanDetailModule { }

From 1aede0ff848023c5ff5ff462f50a10f5deff0940 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Thu, 6 May 2021 22:57:48 -0300
Subject: [PATCH 26/66] add navrail service

---
 src/app/services/navrail.service.spec.ts | 12 ++++++++
 src/app/services/navrail.service.ts      | 36 ++++++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 src/app/services/navrail.service.spec.ts
 create mode 100644 src/app/services/navrail.service.ts

diff --git a/src/app/services/navrail.service.spec.ts b/src/app/services/navrail.service.spec.ts
new file mode 100644
index 000000000..3bdc83031
--- /dev/null
+++ b/src/app/services/navrail.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NavrailService } from './navrail.service';
+
+describe('NavrailService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: NavrailService = TestBed.get(NavrailService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/navrail.service.ts b/src/app/services/navrail.service.ts
new file mode 100644
index 000000000..e0d577ba6
--- /dev/null
+++ b/src/app/services/navrail.service.ts
@@ -0,0 +1,36 @@
+import { Injectable, EventEmitter } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NavrailService {
+  refreshNavrailEvent = new EventEmitter<boolean>();
+  private bulletMyLoans: boolean;
+
+  constructor() { }
+
+  /**
+   * Show bullet on 'My loans' navrail button
+   * @return Show or not
+   */
+  get showBulletMyLoans(): boolean {
+    return this.bulletMyLoans;
+  }
+
+  /**
+   * Show bullet on 'My loans' navrail button
+   * @param show Show or not
+   */
+  set showBulletMyLoans(show: boolean) {
+    this.bulletMyLoans = show;
+    this.refreshNavrail();
+  }
+
+  /**
+   * Emit refreshNavrailEvent
+   * @fires refreshNavrailEvent
+   */
+  refreshNavrail() {
+    this.refreshNavrailEvent.emit(true);
+  }
+}

From 7bd38c6003767d7f71196b6fec888db820a775f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Thu, 6 May 2021 22:58:08 -0300
Subject: [PATCH 27/66] wip - start navrail-service implementation

---
 src/app/core/navrail/navrail.component.ts     | 39 ++++++++++++++++++-
 .../create-loan/create-loan.component.ts      | 10 +++++
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/app/core/navrail/navrail.component.ts b/src/app/core/navrail/navrail.component.ts
index 739035cfd..9854abee3 100644
--- a/src/app/core/navrail/navrail.component.ts
+++ b/src/app/core/navrail/navrail.component.ts
@@ -3,9 +3,10 @@ import { Router, Event, NavigationEnd } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { environment } from 'environments/environment';
 import { Engine } from 'app/models/loan.model';
-import { WalletConnectService } from 'app/services/wallet-connect.service';
 import { Web3Service } from 'app/services/web3.service';
 import { ChainService } from 'app/services/chain.service';
+import { NavrailService } from 'app/services/navrail.service';
+import { WalletConnectService } from 'app/services/wallet-connect.service';
 
 interface FooterButton {
   url: string;
@@ -27,13 +28,16 @@ export class NavrailComponent implements OnInit, OnDestroy {
   private navrailOpened: boolean;
   private navrailHidden: boolean;
   private socialNetworksOpened: boolean;
+  private bulletMyLoans: boolean;
   private subscriptionAccount: Subscription;
   private subscribtionRouter: Subscription;
+  private subscriptionRefreshNavrail: Subscription;
 
   constructor(
     private router: Router,
     private web3Service: Web3Service,
     private chainService: ChainService,
+    private navrailService: NavrailService,
     private walletConnectService: WalletConnectService
   ) {
     this.navrailHidden = true;
@@ -42,13 +46,16 @@ export class NavrailComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.loadAccount();
     this.loadFooterButtons();
+    this.loadNavrailBullets();
     this.handleLoginEvents();
     this.listenRouter();
+    this.listenRefreshNavrail();
   }
 
   ngOnDestroy() {
     this.subscriptionAccount.unsubscribe();
     this.subscribtionRouter.unsubscribe();
+    this.subscriptionRefreshNavrail.unsubscribe();
   }
 
   /**
@@ -94,16 +101,26 @@ export class NavrailComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Navrail is opened
+   * Is Navrail opened
    */
   get isNavrailOpened() {
     return this.navrailOpened;
   }
 
+  /**
+   * Is Navrail hidden
+   */
   get isNavrailHidden() {
     return this.navrailHidden;
   }
 
+  /**
+   * Show bullet on 'My Loans' button
+   */
+  get isBulletMyLoans() {
+    return this.bulletMyLoans;
+  }
+
   /**
    * User is logged in
    */
@@ -138,6 +155,16 @@ export class NavrailComponent implements OnInit, OnDestroy {
         });
   }
 
+  /**
+   * Listen navrail refresh event
+   */
+  private listenRefreshNavrail() {
+    this.subscriptionRefreshNavrail = this
+        .navrailService
+        .refreshNavrailEvent
+        .subscribe(() => this.loadNavrailBullets());
+  }
+
   /**
    * Load user account
    */
@@ -146,6 +173,14 @@ export class NavrailComponent implements OnInit, OnDestroy {
     this.account = account;
   }
 
+  /**
+   * Load navrail bullets
+   */
+  private loadNavrailBullets() {
+    const { showBulletMyLoans } = this.navrailService;
+    this.bulletMyLoans = showBulletMyLoans;
+  }
+
   /**
    * Load social network and dApp version icons
    */
diff --git a/src/app/views/create-loan/create-loan.component.ts b/src/app/views/create-loan/create-loan.component.ts
index 9e34ba295..f2498139a 100644
--- a/src/app/views/create-loan/create-loan.component.ts
+++ b/src/app/views/create-loan/create-loan.component.ts
@@ -15,6 +15,7 @@ import { DialogInsufficientfundsComponent } from 'app/dialogs/dialog-insufficien
 import { Web3Service } from 'app/services/web3.service';
 import { WalletConnectService } from 'app/services/wallet-connect.service';
 import { TitleService } from 'app/services/title.service';
+import { NavrailService } from 'app/services/navrail.service';
 import { ContractsService } from 'app/services/contracts.service';
 import { CurrenciesService, CurrencyItem } from 'app/services/currencies.service';
 import { TxService, Tx, Type } from 'app/services/tx.service';
@@ -56,6 +57,7 @@ export class CreateLoanComponent implements OnInit, OnDestroy {
     private walletConnectService: WalletConnectService,
     private titleService: TitleService,
     private chainService: ChainService,
+    private navrailService: NavrailService,
     private contractsService: ContractsService,
     private currenciesService: CurrenciesService,
     private txService: TxService
@@ -233,6 +235,9 @@ export class CreateLoanComponent implements OnInit, OnDestroy {
       this.location.replaceState(`/borrow/${ id }`);
       this.retrievePendingTx();
       this.loanWasCreated = true;
+
+      // TODO: call navrailService and set showBulletMyLoans to true
+      this.navrailService.showBulletMyLoans = true;
     } catch (e) {
       // Don't show 'User denied transaction signature' error
       if (e.stack.indexOf('User denied transaction signature') < 0) {
@@ -333,6 +338,9 @@ export class CreateLoanComponent implements OnInit, OnDestroy {
         this.startProgress = false;
         this.createPendingTx = undefined;
       }, 1000);
+
+      // TODO: call navrailService and set showBulletMyLoans to true
+      // this.navrailService.showBulletMyLoans = false;
     }
   }
 
@@ -352,6 +360,8 @@ export class CreateLoanComponent implements OnInit, OnDestroy {
 
     this.spinner.hide();
     this.router.navigate(['/', 'loan', loan.id]);
+
+    // TODO: call navrailService and refresh showBulletMyLoans
   }
 
   /**

From 71563ef0c7e3fc2e3d77932389ef9b3843f7f84b Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Fri, 7 May 2021 13:31:37 -0300
Subject: [PATCH 28/66] unit tests

---
 .../dashboard-list-item.component.html        |  56 ++++-----
 .../dashboard-list-item.component.spec.ts     | 108 ++++++++++--------
 2 files changed, 92 insertions(+), 72 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index ad07a2913..d889b0b8a 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -1,36 +1,38 @@
 <div class="list__item" [ngStyle]="{'border-color': getBorderColorByStatus()}">
-    <div class="list__item__title d-sm-none">
-        <p [ngClass]="{'list__item__title--warning': getStatusTextByStatus() === 'Collateral Pending', 'list__item__title--expired' : getStatusTextByStatus() === 'Expired' }">
-            <i class="fas" [ngClass]="'fa-'+getIconByStatus()"></i> 
-            {{ getStatusTextByStatus() }}
-        </p>
-    </div>
-    <div class="list__item__column">
-        <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">BORROWED</div>
-            <div class="col-md-12 col-6">{{ borrowed }}</div>
+    <a [routerLink]="'/loan/'+loan.id">
+        <div class="list__item__title d-sm-none">
+            <p [ngClass]="{'list__item__title--warning': getStatusTextByStatus() === 'Collateral Pending', 'list__item__title--expired' : getStatusTextByStatus() === 'Expired' }">
+                <i class="fas" [ngClass]="'fa-'+getIconByStatus()"></i> 
+                {{ getStatusTextByStatus() }}
+            </p>
         </div>
-    </div>
-    <div class="list__item__column">
-        <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAID</div>
-            <div class="col-md-12 col-6">{{ repaid }}</div>
+        <div class="list__item__column">
+            <div class="row">
+                <div class="list__item__column__title col-md-12 col-6 d-sm-none">BORROWED</div>
+                <div id="label-borrowed" class="col-md-12 col-6">{{ borrowed }}</div>
+            </div>
         </div>
-    </div>
-    <div class="list__item__column" matTooltip="Effective rate: X.XX%">
-        <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
-            <div class="col-md-12 col-6">{{ anualRate }}</div>
+        <div class="list__item__column">
+            <div class="row">
+                <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAID</div>
+                <div class="col-md-12 col-6">{{ repaid }}</div>
+            </div>
         </div>
-    </div>
-    <div class="list__item__column">
-        <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">SCHEDULE PROGRESS</div>
-            <div class="list__item__column__progress col-md-12 col-6" [matTooltip]="(scheduleTooltip && installmentTooltip) ? scheduleTooltip + ' ' + installmentTooltip : ''" matTooltipPosition="below">
-                <app-progress-bar [color]="getBorderColorByStatus()" [progress]="timeProgress"></app-progress-bar>
+        <div class="list__item__column" matTooltip="Effective rate: X.XX%">
+            <div class="row">
+                <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
+                <div class="col-md-12 col-6">{{ anualRate }}</div>
             </div>
         </div>
-    </div>
+        <div class="list__item__column">
+            <div class="row">
+                <div class="list__item__column__title col-md-12 col-6 d-sm-none">SCHEDULE PROGRESS</div>
+                <div class="list__item__column__progress col-md-12 col-6" [matTooltip]="(scheduleTooltip && installmentTooltip) ? scheduleTooltip + ' ' + installmentTooltip : ''" matTooltipPosition="below">
+                    <app-progress-bar [color]="getBorderColorByStatus()" [progress]="timeProgress"></app-progress-bar>
+                </div>
+            </div>
+        </div>
+    </a>
     <div class="list__item__column list__item__column__payment">
         <div class="row">
             <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAYMENT PROGRESS</div>
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
index f8453fd5b..7326f27fd 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
@@ -6,10 +6,56 @@ import { DashboardListItemComponent } from './dashboard-list-item.component';
 import { MaterialModule } from '../..//material.module';
 import { Engine, Loan, Status } from '../..//models/loan.model';
 import { InstallmentsService } from '../../services/installments.service';
+import { readComponent } from '../../utils/utils.test';
 
 describe('DashboardListItemComponent', () => {
   let component: DashboardListItemComponent;
   let fixture: ComponentFixture<DashboardListItemComponent>;
+  const loan = new Loan(
+    Engine.RcnEngine,
+    '0x212c362e33abf6e3e6354363e0634aa1300c3045a18c8c5a08f3bb2a17184768',
+    '0xc78a11c729275e656fa3decc1f15aebee69d08fc',
+    11000000000000000000,
+    {
+      'address': '0x0000000000000000000000000000000000000000',
+      'currency': 'RCN',
+      'code': '0x0000000000000000000000000000000000000000000000000000000000000000'
+    },
+    {
+      'firstObligation': 1000000000000000000,
+      'totalObligation': 12000000000000000000,
+      'duration': 31104000,
+      'interestRate': 9.048821548821541,
+      'punitiveInterestRate': 11.976896418944936,
+      'frequency': 2592000,
+      'installments': 12
+    },
+    '0x06779a9848e5Df60ce0F5f63F88c5310C4c7289C',
+    '0x06779a9848e5Df60ce0F5f63F88c5310C4c7289C',
+    Status.Request,
+    1677953062,
+    '0x97d0300281C55DC6BE27Cf57343184Ab5C8dcdFF',
+    '0x0000000000000000000000000000000000000000',
+    {
+      'id' : '0x212c362e33abf6e3e6354363e0634aa1300c3045a18c8c5a08f3bb2a17184768',
+      'model' : {
+        'address' : '0x97d0300281C55DC6BE27Cf57343184Ab5C8dcdFF',
+        'paid' : 10000000000000000000,
+        'nextObligation' : 1000000000000000000,
+        'currentObligation' : 0,
+        'estimatedObligation' : 2000000000000000000,
+        'dueTime' : 1580148440
+      },
+      'balance' : 6000000000000000000,
+      'creator' : '0xc78a11c729275e656fa3decc1f15aebee69d08fc',
+      'owner' : '0xA5823617776f816e4AD1a26cb51Df2eF9458D0EA',
+      'oracle' : {
+        'address' : '0x0000000000000000000000000000000000000000',
+        'currency' : 'RCN',
+        'code' : '0x0000000000000000000000000000000000000000000000000000000000000000'
+      }
+    }
+  );
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -23,51 +69,6 @@ describe('DashboardListItemComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DashboardListItemComponent);
     component = fixture.componentInstance;
-    const loan = new Loan(
-      Engine.RcnEngine,
-      '0x212c362e33abf6e3e6354363e0634aa1300c3045a18c8c5a08f3bb2a17184768',
-      '0xc78a11c729275e656fa3decc1f15aebee69d08fc',
-      11000000000000000000,
-      {
-        'address': '0x0000000000000000000000000000000000000000',
-        'currency': 'RCN',
-        'code': '0x0000000000000000000000000000000000000000000000000000000000000000'
-      },
-      {
-        'firstObligation': 1000000000000000000,
-        'totalObligation': 12000000000000000000,
-        'duration': 31104000,
-        'interestRate': 9.048821548821541,
-        'punitiveInterestRate': 11.976896418944936,
-        'frequency': 2592000,
-        'installments': 12
-      },
-      '0x06779a9848e5Df60ce0F5f63F88c5310C4c7289C',
-      '0x06779a9848e5Df60ce0F5f63F88c5310C4c7289C',
-      Status.Request,
-      1677953062,
-      '0x97d0300281C55DC6BE27Cf57343184Ab5C8dcdFF',
-      '0x0000000000000000000000000000000000000000',
-      {
-        'id' : '0x212c362e33abf6e3e6354363e0634aa1300c3045a18c8c5a08f3bb2a17184768',
-        'model' : {
-          'address' : '0x97d0300281C55DC6BE27Cf57343184Ab5C8dcdFF',
-          'paid' : 10000000000000000000,
-          'nextObligation' : 1000000000000000000,
-          'currentObligation' : 0,
-          'estimatedObligation' : 2000000000000000000,
-          'dueTime' : 1580148440
-        },
-        'balance' : 6000000000000000000,
-        'creator' : '0xc78a11c729275e656fa3decc1f15aebee69d08fc',
-        'owner' : '0xA5823617776f816e4AD1a26cb51Df2eF9458D0EA',
-        'oracle' : {
-          'address' : '0x0000000000000000000000000000000000000000',
-          'currency' : 'RCN',
-          'code' : '0x0000000000000000000000000000000000000000000000000000000000000000'
-        }
-      }
-    );
     component.loan = loan;
     fixture.detectChanges();
   });
@@ -75,4 +76,21 @@ describe('DashboardListItemComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should return correct status text', () => {
+    expect(component.getStatusTextByStatus()).toEqual('Collateral Pending');
+  });
+
+  it('should return correct color', () => {
+    expect(component.getBorderColorByStatus()).toEqual('#A3A5A6');
+  });
+
+  it('should display borrowed label', () => {
+    const expectedValue = component.borrowed;
+    fixture.detectChanges();
+
+    const value = readComponent(fixture, '#label-borrowed');
+    expect(value.innerText).toBe(expectedValue);
+  });
+
 });

From 8e86a185f9d425346bdd47ce36e3a3e1ebe2cc1b Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Fri, 7 May 2021 16:46:30 -0300
Subject: [PATCH 29/66] fix loans in dashboard without value

---
 src/app/config/chain/1.ts                                  | 4 +++-
 src/app/config/chain/3.ts                                  | 4 +++-
 .../dashboard-list-item/dashboard-list-item.component.html | 4 ++--
 .../dashboard-list-item/dashboard-list-item.component.ts   | 7 +++++--
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/config/chain/1.ts b/src/app/config/chain/1.ts
index 93f8abe7b..627530693 100644
--- a/src/app/config/chain/1.ts
+++ b/src/app/config/chain/1.ts
@@ -126,7 +126,9 @@ export const chain = {
         address: '0x0000000000000000000000000000000000000000'
       }
     ],
-    currencyDecimals: {},
+    currencyDecimals: {
+      'USDC': 6
+    },
     createLoanCurrencies: ['RCN', 'USDC', 'ARS'],
     createCollateralCurrencies: ['RCN', 'USDC']
   },
diff --git a/src/app/config/chain/3.ts b/src/app/config/chain/3.ts
index 1f7260df4..8651bfae3 100644
--- a/src/app/config/chain/3.ts
+++ b/src/app/config/chain/3.ts
@@ -131,7 +131,9 @@ export const chain = {
         address: '0x0000000000000000000000000000000000000000'
       }
     ],
-    currencyDecimals: {},
+    currencyDecimals: {
+      'USDC': 6
+    },
     createLoanCurrencies: ['RCN', 'USDC', 'ARS'],
     createCollateralCurrencies: ['RCN', 'USDC']
   },
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index d889b0b8a..994519749 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -18,7 +18,7 @@
                 <div class="col-md-12 col-6">{{ repaid }}</div>
             </div>
         </div>
-        <div class="list__item__column" matTooltip="Effective rate: X.XX%">
+        <div class="list__item__column" [matTooltip]="'Effective rate: '+anualRate">
             <div class="row">
                 <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
                 <div class="col-md-12 col-6">{{ anualRate }}</div>
@@ -37,7 +37,7 @@
         <div class="row">
             <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAYMENT PROGRESS</div>
             <div class="col-6">
-                <p matTooltip="Accrued interest: X.XX" matTooltipPosition="below">{{ paymentProgress }}</p>
+                <p [matTooltip]="'Accrued interest: '+paymentProgress" matTooltipPosition="below">{{ paymentProgress }}</p>
             </div>
             <div *ngIf="showOptions" class="col-2 list__item__column__payment__button">
                 <button *ngIf="canPay || canRedeem || canAdjustCollateral" mat-icon-button [matMenuTriggerFor]="appMenu">
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index d18d4669b..65dc9dcf4 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -9,6 +9,7 @@ import { Installment } from 'app/interfaces/installment';
 import { InstallmentsService } from 'app/services/installments.service';
 import { Web3Service } from 'app/services/web3.service';
 import { DialogLoanPayComponent } from 'app/dialogs/dialog-loan-pay/dialog-loan-pay.component';
+import { CurrenciesService } from 'app/services/currencies.service';
 
 @Component({
   selector: 'app-dashboard-list-item',
@@ -35,6 +36,7 @@ export class DashboardListItemComponent implements OnInit {
   constructor(
     private dialog: MatDialog,
     private installmentsService: InstallmentsService,
+    private currenciesService: CurrenciesService,
     private web3Service: Web3Service,
     private router: Router
   ) {}
@@ -129,13 +131,14 @@ export class DashboardListItemComponent implements OnInit {
   private loadBasicData() {
     const { amount, currency, debt, descriptor, status } = this.loan;
 
+    const decimals = this.currenciesService.getCurrencyDecimals('symbol', currency.symbol);
     this.borrowed =
-      Utils.formatAmount(amount / 10 ** currency.decimals, 2) +
+      Utils.formatAmount(amount / 10 ** decimals, 2) +
       ' ' +
       currency.symbol;
     if (status !== Status.Request && status !== Status.Expired) {
       this.repaid =
-        Utils.formatAmount(debt.model.paid / 10 ** currency.decimals, 2) +
+        Utils.formatAmount(debt.model.paid / 10 ** decimals, 2) +
         ' ' +
         currency.symbol;
     }

From 303220db324c8de341fa6f44549432f7be9d7270 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 8 May 2021 10:26:58 +0000
Subject: [PATCH 30/66] Bump handlebars from 4.7.6 to 4.7.7

Bumps [handlebars](https://github.com/wycats/handlebars.js) from 4.7.6 to 4.7.7.
- [Release notes](https://github.com/wycats/handlebars.js/releases)
- [Changelog](https://github.com/handlebars-lang/handlebars.js/blob/master/release-notes.md)
- [Commits](https://github.com/wycats/handlebars.js/compare/v4.7.6...v4.7.7)

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 66bbd5168..ca353f8bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8736,9 +8736,9 @@
       "dev": true
     },
     "handlebars": {
-      "version": "4.7.6",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
-      "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
+      "version": "4.7.7",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
+      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
       "dev": true,
       "requires": {
         "minimist": "^1.2.5",

From 43526fb03ea90d12cae52e6a59eed64748b4f01e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 8 May 2021 19:13:33 +0000
Subject: [PATCH 31/66] Bump url-parse from 1.4.7 to 1.5.1

Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.4.7 to 1.5.1.
- [Release notes](https://github.com/unshiftio/url-parse/releases)
- [Commits](https://github.com/unshiftio/url-parse/compare/1.4.7...1.5.1)

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 66bbd5168..eb42ae14a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18136,9 +18136,9 @@
       }
     },
     "url-parse": {
-      "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
-      "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
+      "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
       "dev": true,
       "requires": {
         "querystringify": "^2.1.1",

From ac6c063166e679b8e4f898d229bbc599c08785f1 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 10 May 2021 13:44:25 -0300
Subject: [PATCH 32/66] animations in home page

---
 .gitignore                                |  2 ++
 src/app/views/home/home.component.html    | 22 +++++++-------
 src/app/views/home/home.component.spec.ts |  2 ++
 src/app/views/home/home.component.ts      | 35 ++++++++++++++++++++++-
 4 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/.gitignore b/.gitignore
index e3f001b80..c1055cad5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,3 +57,5 @@ config.js
 # Visal studio code
 /.vscode/
 
+# Prettier
+.prettierrc.json
diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html
index 4f78e5803..2a67ad9a0 100644
--- a/src/app/views/home/home.component.html
+++ b/src/app/views/home/home.component.html
@@ -2,13 +2,13 @@
 
   <section class="section--intro">
     <div class="section__content">
-      <h1 class="section__title">
+      <h1 @fadeInSlow class="section__title">
         Global Credit Marketplace
       </h1>
-      <h2 class="section__subtitle">
+      <h2 @fadeInFast class="section__subtitle">
         Lend DeFi & CeFi Loans. Borrow P2P Loans. Manage it all in one place.
       </h2>
-      <div class="section__actions">
+      <div @fadeInFast class="section__actions">
         <button
           mat-raised-button
           class="button button-primary"
@@ -24,7 +24,7 @@ <h2 class="section__subtitle">
   <section class="section section--lend">
     <div class="container">
       <div class="row align-items-center flex-column-reverse flex-md-row">
-        <div class="col-12 col-md-4">
+        <div @fadeInFast class="col-12 col-md-4">
           <h3 class="section__title">
             Lend
           </h3>
@@ -39,7 +39,7 @@ <h3 class="section__title">
             Start lending
           </button>
         </div>
-        <div class="col-12 col-md-8 d-flex justify-content-end">
+        <div @fadeInRight class="col-12 col-md-8 d-flex justify-content-end">
           <div class="section__image">
             <img
               src="assets/home/home-lend-desktop.png"
@@ -58,7 +58,7 @@ <h3 class="section__title">
   <section class="section section--borrow">
     <div class="container">
       <div class="row align-items-center">
-        <div class="col-12 col-md-8">
+        <div @fadeInLeft class="col-12 col-md-8">
           <div class="section__image">
             <img
               src="assets/home/home-borrow-desktop.png"
@@ -70,7 +70,7 @@ <h3 class="section__title">
             >
           </div>
         </div>
-        <div class="col-12 col-md-4">
+        <div @fadeInFast class="col-12 col-md-4">
           <h3 class="section__title">
             Borrow
           </h3>
@@ -92,7 +92,7 @@ <h3 class="section__title">
   <section class="section section--manage">
     <div class="container">
       <div class="row align-items-center flex-column-reverse flex-md-row">
-        <div class="col-12 col-md-4">
+        <div @fadeInFast class="col-12 col-md-4">
           <h3 class="section__title">
             Manage
           </h3>
@@ -107,7 +107,7 @@ <h3 class="section__title">
             Start managing
           </button>
         </div>
-        <div class="col-12 col-md-8 d-flex justify-content-end">
+        <div @fadeInRight class="col-12 col-md-8 d-flex justify-content-end">
           <div class="section__image">
             <img
               src="assets/home/home-myloans-desktop.png"
@@ -126,7 +126,7 @@ <h3 class="section__title">
   <section class="section section--connect">
     <div class="container">
       <div class="row">
-        <div class="col-12 col-md-6 pr-0">
+        <div @fadeInBottom class="col-12 col-md-6 pr-0">
           <div class="section__image">
             <img
               src="assets/home/home-connect.png"
@@ -134,7 +134,7 @@ <h3 class="section__title">
             >
           </div>
         </div>
-        <div class="col-12 col-md-6">
+        <div @fadeInFast class="col-12 col-md-6">
           <h3 class="section__title">
             Connect
           </h3>
diff --git a/src/app/views/home/home.component.spec.ts b/src/app/views/home/home.component.spec.ts
index 1594ff128..b3e675aae 100644
--- a/src/app/views/home/home.component.spec.ts
+++ b/src/app/views/home/home.component.spec.ts
@@ -1,4 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { SharedModule } from 'app/shared/shared.module';
@@ -11,6 +12,7 @@ describe('HomeComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
+        BrowserAnimationsModule,
         RouterModule.forRoot([]),
         SharedModule
       ],
diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts
index 9315098be..5b102d2d2 100644
--- a/src/app/views/home/home.component.ts
+++ b/src/app/views/home/home.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material';
+import { animate, style, transition, trigger } from '@angular/animations';
 import { Subscription } from 'rxjs';
 import { Web3Service } from 'app/services/web3.service';
 import { TitleService } from 'app/services/title.service';
@@ -11,7 +12,39 @@ import { DialogWalletSelectComponent } from 'app/dialogs/dialog-wallet-select/di
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+  styleUrls: ['./home.component.scss'],
+  animations: [
+    trigger('fadeInSlow', [
+      transition('void => *', [
+        style({ opacity: 0 }),
+        animate(2000, style({ opacity: 1 }))
+      ])
+    ]),
+    trigger('fadeInFast', [
+      transition('void => *', [
+        style({ opacity: 0 }),
+        animate(1000, style({ opacity: 1 }))
+      ])
+    ]),
+    trigger('fadeInRight', [
+      transition('void => *', [
+        style({ opacity: 1, transform: 'translateX(100%)' }),
+        animate(1500, style({ transform: 'translateX(0%)' }))
+      ])
+    ]),
+    trigger('fadeInLeft', [
+      transition('void => *', [
+        style({ opacity: 1, transform: 'translateX(-100%)' }),
+        animate(1500, style({ transform: 'translateX(0%)' }))
+      ])
+    ]),
+    trigger('fadeInBottom', [
+      transition('void => *', [
+        style({ opacity: 1, transform: 'translateY(100%)' }),
+        animate(1500, style({ transform: 'translateY(0%)' }))
+      ])
+    ])
+  ]
 })
 export class HomeComponent implements OnInit, OnDestroy {
   private account: string;

From 5a0cd9c134329b74c42cba5db8caec1048345401 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 10 May 2021 18:18:45 +0000
Subject: [PATCH 33/66] Bump lodash from 4.17.19 to 4.17.21

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.19 to 4.17.21.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.17.19...4.17.21)

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 66bbd5168..ec4953d30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12454,9 +12454,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.19",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
-      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.clonedeep": {
       "version": "4.5.0",

From e558f34a21e643bf8bbd94b07e486a83c3409cad Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 10 May 2021 15:31:35 -0300
Subject: [PATCH 34/66] update animation home

---
 src/app/views/home/home.component.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts
index 5b102d2d2..186408677 100644
--- a/src/app/views/home/home.component.ts
+++ b/src/app/views/home/home.component.ts
@@ -27,21 +27,24 @@ import { DialogWalletSelectComponent } from 'app/dialogs/dialog-wallet-select/di
       ])
     ]),
     trigger('fadeInRight', [
-      transition('void => *', [
-        style({ opacity: 1, transform: 'translateX(100%)' }),
-        animate(1500, style({ transform: 'translateX(0%)' }))
+      transition('* => *', [
+        style({ opacity: .3, transform: 'translateX(100%)' }),
+        animate(1000, style({ transform: 'translateX(0%)' })),
+        animate(2000, style({ opacity: 1 }))
       ])
     ]),
     trigger('fadeInLeft', [
-      transition('void => *', [
-        style({ opacity: 1, transform: 'translateX(-100%)' }),
-        animate(1500, style({ transform: 'translateX(0%)' }))
+      transition('* => *', [
+        style({ opacity: .3, transform: 'translateX(-100%)' }),
+        animate(1000, style({ transform: 'translateX(0%)' })),
+        animate(2000, style({ opacity: 1 }))
       ])
     ]),
     trigger('fadeInBottom', [
-      transition('void => *', [
-        style({ opacity: 1, transform: 'translateY(100%)' }),
-        animate(1500, style({ transform: 'translateY(0%)' }))
+      transition('* => *', [
+        style({ opacity: .3, transform: 'translateY(-100%)' }),
+        animate(1000, style({ transform: 'translateY(0%)' })),
+        animate(2000, style({ opacity: 1 }))
       ])
     ])
   ]

From 4a4e9a9203bb11ee878511f2f4d765c292ac479f Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 10 May 2021 16:23:44 -0300
Subject: [PATCH 35/66] update animation in home

---
 src/app/views/home/home.component.ts | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts
index 186408677..ed2fdbbd7 100644
--- a/src/app/views/home/home.component.ts
+++ b/src/app/views/home/home.component.ts
@@ -28,23 +28,20 @@ import { DialogWalletSelectComponent } from 'app/dialogs/dialog-wallet-select/di
     ]),
     trigger('fadeInRight', [
       transition('* => *', [
-        style({ opacity: .3, transform: 'translateX(100%)' }),
-        animate(1000, style({ transform: 'translateX(0%)' })),
-        animate(2000, style({ opacity: 1 }))
+        style({ opacity: .5, transform: 'translateX(100%)' }),
+        animate(1000, style({ transform: 'translateX(0%)', opacity: 1 }))
       ])
     ]),
     trigger('fadeInLeft', [
       transition('* => *', [
-        style({ opacity: .3, transform: 'translateX(-100%)' }),
-        animate(1000, style({ transform: 'translateX(0%)' })),
-        animate(2000, style({ opacity: 1 }))
+        style({ opacity: .5, transform: 'translateX(-100%)' }),
+        animate(1000, style({ transform: 'translateX(0%)', opacity: 1 }))
       ])
     ]),
     trigger('fadeInBottom', [
       transition('* => *', [
-        style({ opacity: .3, transform: 'translateY(-100%)' }),
-        animate(1000, style({ transform: 'translateY(0%)' })),
-        animate(2000, style({ opacity: 1 }))
+        style({ opacity: .5, transform: 'translateY(-100%)' }),
+        animate(1000, style({ transform: 'translateY(0%)', opacity: 1 }))
       ])
     ])
   ]

From 21dfd8a1c2d3bdc3240e54fdfb0d3ef4e5d518be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Tue, 11 May 2021 00:27:21 -0300
Subject: [PATCH 36/66] implement navrail service

---
 .../content-wrapper.component.ts              | 11 +++++++
 src/app/core/navrail/navrail.component.html   |  1 +
 src/app/core/navrail/navrail.component.scss   |  9 ++++++
 src/app/services/navrail.service.ts           | 30 +++++++++++++++++--
 src/app/views/address/address.module.ts       |  2 +-
 .../create-loan/create-loan.component.ts      | 10 +++----
 6 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/app/core/content-wrapper/content-wrapper.component.ts b/src/app/core/content-wrapper/content-wrapper.component.ts
index f3e1aa786..a261c72f3 100644
--- a/src/app/core/content-wrapper/content-wrapper.component.ts
+++ b/src/app/core/content-wrapper/content-wrapper.component.ts
@@ -12,6 +12,7 @@ import { ProxyApiService } from 'app/services/proxy-api.service';
 import { ApplicationAdsService, Ad } from 'app/services/application-ads.service';
 import { Web3Service } from 'app/services/web3.service';
 import { ChainService } from 'app/services/chain.service';
+import { NavrailService } from 'app/services/navrail.service';
 import { CountriesService } from 'app/services/countries.service';
 
 @Component({
@@ -39,6 +40,7 @@ export class ContentWrapperComponent implements OnInit {
     private applicationAdsService: ApplicationAdsService,
     private web3Service: Web3Service,
     private chainService: ChainService,
+    private navrailService: NavrailService,
     private countriesService: CountriesService
   ) {}
 
@@ -50,11 +52,13 @@ export class ContentWrapperComponent implements OnInit {
         if (isLogged) {
           await this.loadAccount();
           this.checkPendingWithdraw();
+          this.loadNavrailBullets();
         }
       }
     );
     await this.loadAccount();
     this.checkPendingWithdraw();
+    this.loadNavrailBullets();
     this.canLend();
     this.checkIfIsHome();
     this.loadBscAd();
@@ -156,4 +160,11 @@ export class ContentWrapperComponent implements OnInit {
       image: 'assets/bnb-big.png'
     });
   }
+
+  /**
+   * Check for Navrail bullets
+   */
+  private async loadNavrailBullets() {
+    await this.navrailService.refreshNavrail();
+  }
 }
diff --git a/src/app/core/navrail/navrail.component.html b/src/app/core/navrail/navrail.component.html
index 89855cc58..333fbe434 100644
--- a/src/app/core/navrail/navrail.component.html
+++ b/src/app/core/navrail/navrail.component.html
@@ -52,6 +52,7 @@
           <span class="menu__item-label">
             My loans
           </span>
+          <span *ngIf="isBulletMyLoans" class="menu__item-bullet"></span>
         </a>
       </ng-container>
       <ng-template #connectButtonTemplate>
diff --git a/src/app/core/navrail/navrail.component.scss b/src/app/core/navrail/navrail.component.scss
index 6f0f3182a..25c3ed95d 100644
--- a/src/app/core/navrail/navrail.component.scss
+++ b/src/app/core/navrail/navrail.component.scss
@@ -50,6 +50,15 @@ $navrailWidth: 169px;
         &-label {
           transition: .15s;
         }
+        &-bullet {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: var(--app-color-red);
+          position: absolute;
+          bottom: 9px;
+          left: 45px;
+        }
         &::before {
           content: '';
           position: absolute;
diff --git a/src/app/services/navrail.service.ts b/src/app/services/navrail.service.ts
index e0d577ba6..3548b99a7 100644
--- a/src/app/services/navrail.service.ts
+++ b/src/app/services/navrail.service.ts
@@ -1,4 +1,10 @@
 import { Injectable, EventEmitter } from '@angular/core';
+import { Web3Service } from 'app/services/web3.service';
+import { ChainService } from 'app/services/chain.service';
+import { ProxyApiService } from 'app/services/proxy-api.service';
+import { LoanUtils } from 'app/utils/loan-utils';
+import { LoanContentApi } from 'app/interfaces/loan-api-diaspore';
+import { Loan, Status } from 'app/models/loan.model';
 
 @Injectable({
   providedIn: 'root'
@@ -7,7 +13,11 @@ export class NavrailService {
   refreshNavrailEvent = new EventEmitter<boolean>();
   private bulletMyLoans: boolean;
 
-  constructor() { }
+  constructor(
+    private web3Service: Web3Service,
+    private chainService: ChainService,
+    private proxyApiService: ProxyApiService
+  ) { }
 
   /**
    * Show bullet on 'My loans' navrail button
@@ -23,14 +33,28 @@ export class NavrailService {
    */
   set showBulletMyLoans(show: boolean) {
     this.bulletMyLoans = show;
-    this.refreshNavrail();
   }
 
   /**
    * Emit refreshNavrailEvent
    * @fires refreshNavrailEvent
    */
-  refreshNavrail() {
+  async refreshNavrail() {
+    await this.checkMyLoansBullet();
     this.refreshNavrailEvent.emit(true);
   }
+
+  /**
+   * Check if 'My Loans' button requires a bullet
+   */
+  private async checkMyLoansBullet() {
+    const address = await this.web3Service.getAccount();
+    const PAGE = 1;
+    const PAGE_SIZE = 100;
+    const { content } = await this.proxyApiService.getBorrowed(address, PAGE, PAGE_SIZE, {});
+    const { config } = this.chainService;
+    const loans: Loan[] = content.map((loanData: LoanContentApi) => LoanUtils.buildLoan(loanData, config));
+    const pendingCollateralLoans = loans.filter(({ status, collateral }) => status === Status.Request && !collateral);
+    this.showBulletMyLoans = pendingCollateralLoans.length >= 1;
+  }
 }
diff --git a/src/app/views/address/address.module.ts b/src/app/views/address/address.module.ts
index a4738f29f..fc5d6e14b 100644
--- a/src/app/views/address/address.module.ts
+++ b/src/app/views/address/address.module.ts
@@ -15,7 +15,7 @@ import { MyLoansTabsComponent } from './my-loans-tabs/my-loans-tabs.component';
 const routes: Routes = [
   {
     path: '',
-    redirectTo: 'lent'
+    redirectTo: 'borrowed'
   },
   {
     path: 'lent',
diff --git a/src/app/views/create-loan/create-loan.component.ts b/src/app/views/create-loan/create-loan.component.ts
index f2498139a..f1953a9df 100644
--- a/src/app/views/create-loan/create-loan.component.ts
+++ b/src/app/views/create-loan/create-loan.component.ts
@@ -236,8 +236,7 @@ export class CreateLoanComponent implements OnInit, OnDestroy {
       this.retrievePendingTx();
       this.loanWasCreated = true;
 
-      // TODO: call navrailService and set showBulletMyLoans to true
-      this.navrailService.showBulletMyLoans = true;
+      await this.navrailService.refreshNavrail();
     } catch (e) {
       // Don't show 'User denied transaction signature' error
       if (e.stack.indexOf('User denied transaction signature') < 0) {
@@ -338,10 +337,9 @@ export class CreateLoanComponent implements OnInit, OnDestroy {
         this.startProgress = false;
         this.createPendingTx = undefined;
       }, 1000);
-
-      // TODO: call navrailService and set showBulletMyLoans to true
-      // this.navrailService.showBulletMyLoans = false;
     }
+
+    await this.navrailService.refreshNavrail();
   }
 
   /**
@@ -361,7 +359,7 @@ export class CreateLoanComponent implements OnInit, OnDestroy {
     this.spinner.hide();
     this.router.navigate(['/', 'loan', loan.id]);
 
-    // TODO: call navrailService and refresh showBulletMyLoans
+    await this.navrailService.refreshNavrail();
   }
 
   /**

From 7c5913ff07e967b11b8433310c69173ccc62c43e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Tue, 11 May 2021 00:27:48 -0300
Subject: [PATCH 37/66] add eth mainnet/ropsten usdc decimals

---
 src/app/config/chain/1.ts | 4 +++-
 src/app/config/chain/3.ts | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/config/chain/1.ts b/src/app/config/chain/1.ts
index 93f8abe7b..627530693 100644
--- a/src/app/config/chain/1.ts
+++ b/src/app/config/chain/1.ts
@@ -126,7 +126,9 @@ export const chain = {
         address: '0x0000000000000000000000000000000000000000'
       }
     ],
-    currencyDecimals: {},
+    currencyDecimals: {
+      'USDC': 6
+    },
     createLoanCurrencies: ['RCN', 'USDC', 'ARS'],
     createCollateralCurrencies: ['RCN', 'USDC']
   },
diff --git a/src/app/config/chain/3.ts b/src/app/config/chain/3.ts
index 1f7260df4..8651bfae3 100644
--- a/src/app/config/chain/3.ts
+++ b/src/app/config/chain/3.ts
@@ -131,7 +131,9 @@ export const chain = {
         address: '0x0000000000000000000000000000000000000000'
       }
     ],
-    currencyDecimals: {},
+    currencyDecimals: {
+      'USDC': 6
+    },
     createLoanCurrencies: ['RCN', 'USDC', 'ARS'],
     createCollateralCurrencies: ['RCN', 'USDC']
   },

From 2507d2693b399c43c95bf80fca0f706db6f3fda0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Tue, 11 May 2021 00:39:00 -0300
Subject: [PATCH 38/66] update unit tests imports

---
 src/app/core/navrail/navrail.component.spec.ts | 3 ++-
 src/app/services/navrail.service.spec.ts       | 7 +++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/core/navrail/navrail.component.spec.ts b/src/app/core/navrail/navrail.component.spec.ts
index b18df4eec..cf8e2367c 100644
--- a/src/app/core/navrail/navrail.component.spec.ts
+++ b/src/app/core/navrail/navrail.component.spec.ts
@@ -1,4 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { SharedModule } from 'app/shared/shared.module';
@@ -10,7 +11,7 @@ describe('NavrailComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [ RouterModule.forRoot([]), SharedModule ],
+      imports: [ RouterModule.forRoot([]), HttpClientModule, SharedModule ],
       declarations: [ NavrailComponent ],
       schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
     })
diff --git a/src/app/services/navrail.service.spec.ts b/src/app/services/navrail.service.spec.ts
index 3bdc83031..96c8cb72f 100644
--- a/src/app/services/navrail.service.spec.ts
+++ b/src/app/services/navrail.service.spec.ts
@@ -1,9 +1,12 @@
 import { TestBed } from '@angular/core/testing';
-
+import { HttpClientModule } from '@angular/common/http';
+import { SharedModule } from 'app/shared/shared.module';
 import { NavrailService } from './navrail.service';
 
 describe('NavrailService', () => {
-  beforeEach(() => TestBed.configureTestingModule({}));
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [HttpClientModule, SharedModule]
+  }));
 
   it('should be created', () => {
     const service: NavrailService = TestBed.get(NavrailService);

From 725b102d6f42bb5ef0ad5e77813c94da06da39fd Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 11 May 2021 06:35:11 +0000
Subject: [PATCH 39/66] Bump hosted-git-info from 2.8.5 to 2.8.9

Bumps [hosted-git-info](https://github.com/npm/hosted-git-info) from 2.8.5 to 2.8.9.
- [Release notes](https://github.com/npm/hosted-git-info/releases)
- [Changelog](https://github.com/npm/hosted-git-info/blob/v2.8.9/CHANGELOG.md)
- [Commits](https://github.com/npm/hosted-git-info/compare/v2.8.5...v2.8.9)

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 66bbd5168..0d9288eb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8928,9 +8928,9 @@
       }
     },
     "hosted-git-info": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
-      "integrity": "sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg=="
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
     "hpack.js": {
       "version": "2.1.6",

From d11425b479fa28b57219278a01a1d575ed3526fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Tue, 11 May 2021 11:42:06 -0300
Subject: [PATCH 40/66] change bullet position

---
 src/app/core/navrail/navrail.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/core/navrail/navrail.component.scss b/src/app/core/navrail/navrail.component.scss
index 25c3ed95d..97ab09ceb 100644
--- a/src/app/core/navrail/navrail.component.scss
+++ b/src/app/core/navrail/navrail.component.scss
@@ -56,7 +56,7 @@ $navrailWidth: 169px;
           border-radius: 50%;
           background: var(--app-color-red);
           position: absolute;
-          bottom: 9px;
+          top: 13px;
           left: 45px;
         }
         &::before {

From 7f510871b7275c83d78d879c959e5fcb9a8832c6 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MBP-de-To.fibertel.com.ar>
Date: Wed, 12 May 2021 17:10:51 -0300
Subject: [PATCH 41/66] animation in home with scroll

---
 src/app/views/home/home.component.html | 30 ++++-----
 src/app/views/home/home.component.ts   | 86 +++++++++++++++++++++-----
 2 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html
index 2a67ad9a0..6f779a38f 100644
--- a/src/app/views/home/home.component.html
+++ b/src/app/views/home/home.component.html
@@ -2,13 +2,13 @@
 
   <section class="section--intro">
     <div class="section__content">
-      <h1 @fadeInSlow class="section__title">
+      <h1 [@fadeInSlow]="animationSectionIntro" class="section__title">
         Global Credit Marketplace
       </h1>
-      <h2 @fadeInFast class="section__subtitle">
+      <h2 [@fadeInFast]="animationSectionIntro" class="section__subtitle">
         Lend DeFi & CeFi Loans. Borrow P2P Loans. Manage it all in one place.
       </h2>
-      <div @fadeInFast class="section__actions">
+      <div [@fadeInFast]="animationSectionIntro" class="section__actions">
         <button
           mat-raised-button
           class="button button-primary"
@@ -21,10 +21,10 @@ <h2 @fadeInFast class="section__subtitle">
     <div class="section__background"></div>
   </section>
 
-  <section class="section section--lend">
+  <section #sectionLend class="section section--lend">
     <div class="container">
       <div class="row align-items-center flex-column-reverse flex-md-row">
-        <div @fadeInFast class="col-12 col-md-4">
+        <div [@fadeInFast]="animationSectionLend" class="col-12 col-md-4">
           <h3 class="section__title">
             Lend
           </h3>
@@ -39,7 +39,7 @@ <h3 class="section__title">
             Start lending
           </button>
         </div>
-        <div @fadeInRight class="col-12 col-md-8 d-flex justify-content-end">
+        <div [@fadeInRight]="animationSectionLend" class="col-12 col-md-8 d-flex justify-content-end">
           <div class="section__image">
             <img
               src="assets/home/home-lend-desktop.png"
@@ -55,10 +55,10 @@ <h3 class="section__title">
     </div>
   </section>
 
-  <section class="section section--borrow">
+  <section #sectionBorrow class="section section--borrow">
     <div class="container">
       <div class="row align-items-center">
-        <div @fadeInLeft class="col-12 col-md-8">
+        <div [@fadeInLeft]="animationSectionBorrow" class="col-12 col-md-8">
           <div class="section__image">
             <img
               src="assets/home/home-borrow-desktop.png"
@@ -70,7 +70,7 @@ <h3 class="section__title">
             >
           </div>
         </div>
-        <div @fadeInFast class="col-12 col-md-4">
+        <div [@fadeInFast]="animationSectionBorrow" class="col-12 col-md-4">
           <h3 class="section__title">
             Borrow
           </h3>
@@ -89,10 +89,10 @@ <h3 class="section__title">
     </div>
   </section>
 
-  <section class="section section--manage">
+  <section #sectionManage class="section section--manage">
     <div class="container">
       <div class="row align-items-center flex-column-reverse flex-md-row">
-        <div @fadeInFast class="col-12 col-md-4">
+        <div [@fadeInFast]="animationSectionManage" class="col-12 col-md-4">
           <h3 class="section__title">
             Manage
           </h3>
@@ -107,7 +107,7 @@ <h3 class="section__title">
             Start managing
           </button>
         </div>
-        <div @fadeInRight class="col-12 col-md-8 d-flex justify-content-end">
+        <div [@fadeInRight]="animationSectionManage" class="col-12 col-md-8 d-flex justify-content-end">
           <div class="section__image">
             <img
               src="assets/home/home-myloans-desktop.png"
@@ -123,10 +123,10 @@ <h3 class="section__title">
     </div>
   </section>
 
-  <section class="section section--connect">
+  <section #sectionConnect class="section section--connect">
     <div class="container">
       <div class="row">
-        <div @fadeInBottom class="col-12 col-md-6 pr-0">
+        <div [@fadeInBottom]="animationSectionConnect" class="col-12 col-md-6 pr-0">
           <div class="section__image">
             <img
               src="assets/home/home-connect.png"
@@ -134,7 +134,7 @@ <h3 class="section__title">
             >
           </div>
         </div>
-        <div @fadeInFast class="col-12 col-md-6">
+        <div [@fadeInFast]="animationSectionConnect" class="col-12 col-md-6">
           <h3 class="section__title">
             Connect
           </h3>
diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts
index ed2fdbbd7..e9b68e5ff 100644
--- a/src/app/views/home/home.component.ts
+++ b/src/app/views/home/home.component.ts
@@ -1,10 +1,18 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  HostListener,
+  ViewChild,
+  ElementRef
+} from '@angular/core';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { Subscription } from 'rxjs';
 import { Web3Service } from 'app/services/web3.service';
 import { TitleService } from 'app/services/title.service';
+import { DeviceService } from 'app/services/device.service';
 import { WalletConnectService } from 'app/services/wallet-connect.service';
 import { WalletType } from 'app/interfaces/wallet.interface';
 import { DialogWalletSelectComponent } from 'app/dialogs/dialog-wallet-select/dialog-wallet-select.component';
@@ -15,32 +23,32 @@ import { DialogWalletSelectComponent } from 'app/dialogs/dialog-wallet-select/di
   styleUrls: ['./home.component.scss'],
   animations: [
     trigger('fadeInSlow', [
-      transition('void => *', [
+      transition('* => true', [
         style({ opacity: 0 }),
         animate(2000, style({ opacity: 1 }))
       ])
     ]),
     trigger('fadeInFast', [
-      transition('void => *', [
+      transition('* => true', [
         style({ opacity: 0 }),
         animate(1000, style({ opacity: 1 }))
       ])
     ]),
     trigger('fadeInRight', [
-      transition('* => *', [
-        style({ opacity: .5, transform: 'translateX(100%)' }),
+      transition('* => true', [
+        style({ opacity: 0.5, transform: 'translateX(100%)' }),
         animate(1000, style({ transform: 'translateX(0%)', opacity: 1 }))
       ])
     ]),
     trigger('fadeInLeft', [
-      transition('* => *', [
-        style({ opacity: .5, transform: 'translateX(-100%)' }),
-        animate(1000, style({ transform: 'translateX(0%)', opacity: 1 }))
+      transition('* => true', [
+        style({ opacity: 0.5, transform: 'translateX(-100%)', transitionDelay: 2000 }),
+        animate(1000, style({ transform: 'translateX(0%)', opacity: 1, transitionDelay: 2000 }))
       ])
     ]),
     trigger('fadeInBottom', [
-      transition('* => *', [
-        style({ opacity: .5, transform: 'translateY(-100%)' }),
+      transition('* => true', [
+        style({ opacity: 0.5, transform: 'translateY(-100%)' }),
         animate(1000, style({ transform: 'translateY(0%)', opacity: 1 }))
       ])
     ])
@@ -50,18 +58,54 @@ export class HomeComponent implements OnInit, OnDestroy {
   private account: string;
   private subscriptionAccount: Subscription;
 
+  animationSectionIntro = true;
+  animationSectionConnect = false;
+  animationSectionManage = false;
+  animationSectionLend = false;
+  animationSectionBorrow = false;
+
+  @ViewChild('sectionConnect', { static: false }) sectionConnect: ElementRef;
+  @ViewChild('sectionManage', { static: false }) sectionManage: ElementRef;
+  @ViewChild('sectionLend', { static: false }) sectionLend: ElementRef;
+  @ViewChild('sectionBorrow', { static: false }) sectionBorrow: ElementRef;
+
   constructor(
     private router: Router,
     private dialog: MatDialog,
     private web3Service: Web3Service,
     private titleService: TitleService,
-    private walletConnectService: WalletConnectService
-  ) { }
+    private walletConnectService: WalletConnectService,
+    private deviceService: DeviceService
+  ) {}
+
+  @HostListener('window:scroll', ['$event'])
+  checkScroll() {
+    const tolerancePixels = this.deviceService.isMobile() ? 850 : 1000;
+    const scrollPosition = window.pageYOffset + tolerancePixels;
+    const sectionConnectPosition = this.sectionConnect.nativeElement.offsetTop;
+    const sectionManagePosition = this.sectionManage.nativeElement.offsetTop;
+    const sectionLendPosition = this.sectionLend.nativeElement.offsetTop;
+    const sectionBorrowPosition = this.sectionBorrow.nativeElement.offsetTop;
+
+    if (scrollPosition >= sectionConnectPosition) {
+      this.animationSectionConnect = true;
+    }
+    if (scrollPosition >= sectionManagePosition) {
+      this.animationSectionManage = true;
+    }
+    if (scrollPosition >= sectionLendPosition) {
+      this.animationSectionLend = true;
+    }
+    if (scrollPosition >= sectionBorrowPosition) {
+      this.animationSectionBorrow = true;
+    }
+  }
 
   ngOnInit() {
     this.titleService.changeTitle('RCN');
     this.loadAccount();
     this.listenLoginEvents();
+    this.checkAnimations();
   }
 
   ngOnDestroy() {
@@ -89,10 +133,11 @@ export class HomeComponent implements OnInit, OnDestroy {
    * Listen and handle login events for account changes and logout
    */
   private listenLoginEvents() {
-    this.subscriptionAccount =
-        this.web3Service.loginEvent.subscribe(async () => {
-          this.loadAccount();
-        });
+    this.subscriptionAccount = this.web3Service.loginEvent.subscribe(
+      async () => {
+        this.loadAccount();
+      }
+    );
   }
 
   /**
@@ -102,4 +147,13 @@ export class HomeComponent implements OnInit, OnDestroy {
     const account = await this.web3Service.getAccount();
     this.account = account;
   }
+
+  /**
+   * Check mobile screen to adjust animations
+   */
+  private async checkAnimations() {
+    if (this.deviceService.isMobile()) {
+      this.animationSectionLend = true;
+    }
+  }
 }

From 701ed59d02a16a788ce59f3bb2d71e6d10063088 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Wed, 12 May 2021 19:46:49 -0300
Subject: [PATCH 42/66] clean code

---
 .../dashboard-list-item.component.html        | 203 +++++++++++++-----
 .../dashboard-list-item.component.spec.ts     |   4 +-
 .../dashboard-list-item.component.ts          |  86 ++++----
 .../dashboard-list-skeleton.component.html    |  99 +++++----
 .../dashboard-list-skeleton.component.ts      |   9 +-
 .../dashboard-list.component.html             |  58 ++---
 .../dashboard-list.component.ts               |   2 +-
 .../views/dashboard/dashboard.component.html  |  51 ++++-
 .../views/dashboard/dashboard.component.ts    |  18 +-
 9 files changed, 337 insertions(+), 193 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index 994519749..5812587e3 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -1,56 +1,153 @@
-<div class="list__item" [ngStyle]="{'border-color': getBorderColorByStatus()}">
-    <a [routerLink]="'/loan/'+loan.id">
-        <div class="list__item__title d-sm-none">
-            <p [ngClass]="{'list__item__title--warning': getStatusTextByStatus() === 'Collateral Pending', 'list__item__title--expired' : getStatusTextByStatus() === 'Expired' }">
-                <i class="fas" [ngClass]="'fa-'+getIconByStatus()"></i> 
-                {{ getStatusTextByStatus() }}
-            </p>
-        </div>
-        <div class="list__item__column">
-            <div class="row">
-                <div class="list__item__column__title col-md-12 col-6 d-sm-none">BORROWED</div>
-                <div id="label-borrowed" class="col-md-12 col-6">{{ borrowed }}</div>
-            </div>
-        </div>
-        <div class="list__item__column">
-            <div class="row">
-                <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAID</div>
-                <div class="col-md-12 col-6">{{ repaid }}</div>
-            </div>
-        </div>
-        <div class="list__item__column" [matTooltip]="'Effective rate: '+anualRate">
-            <div class="row">
-                <div class="list__item__column__title col-md-12 col-6 d-sm-none">ANNUAL RATE</div>
-                <div class="col-md-12 col-6">{{ anualRate }}</div>
-            </div>
-        </div>
-        <div class="list__item__column">
-            <div class="row">
-                <div class="list__item__column__title col-md-12 col-6 d-sm-none">SCHEDULE PROGRESS</div>
-                <div class="list__item__column__progress col-md-12 col-6" [matTooltip]="(scheduleTooltip && installmentTooltip) ? scheduleTooltip + ' ' + installmentTooltip : ''" matTooltipPosition="below">
-                    <app-progress-bar [color]="getBorderColorByStatus()" [progress]="timeProgress"></app-progress-bar>
-                </div>
-            </div>
-        </div>
-    </a>
-    <div class="list__item__column list__item__column__payment">
-        <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAYMENT PROGRESS</div>
-            <div class="col-6">
-                <p [matTooltip]="'Accrued interest: '+paymentProgress" matTooltipPosition="below">{{ paymentProgress }}</p>
-            </div>
-            <div *ngIf="showOptions" class="col-2 list__item__column__payment__button">
-                <button *ngIf="canPay || canRedeem || canAdjustCollateral" mat-icon-button [matMenuTriggerFor]="appMenu">
-                    <i class="fas fa-ellipsis-v"></i>
-                </button>
-                <mat-menu #appMenu="matMenu" yPosition="below">
-                    <button *ngIf="canPay" (click)="openDialog('pay')" mat-menu-item>Pay</button>
-                    <button *ngIf="canRedeem" (click)="openDialog('withdraw')" mat-menu-item>Withdraw Collateral</button>
-                    <button *ngIf="canAdjustCollateral" (click)="openDialog('add')" mat-menu-item>Add Collateral</button>
-                </mat-menu>
-            </div>
+<div
+  class="list__item"
+  [ngStyle]="{
+    'border-color': statusColor
+  }"
+>
+  <a [routerLink]="['/loan', loan.id]">
+    <div class="list__item__title d-sm-none">
+      <p
+        [class.list__item__title--warning]="loan.status === 0 && !loan.collateral"
+        [class.list__item__title--expired]="loan.status === 4"
+      >
+        <i
+          class="fas"
+          [ngClass]="'fa-' + statusIcon"
+        >
+        </i>
+        {{ statusText }}
+      </p>
+    </div>
+
+    <div class="list__item__column">
+      <div class="row">
+        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+          BORROWED
+        </div>
+        <div
+          id="label-borrowed"
+          class="col-md-12 col-6"
+        >
+          {{ borrowed }}
+        </div>
+      </div>
+    </div>
+
+    <div class="list__item__column">
+      <div class="row">
+        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+          REPAID
+        </div>
+        <div class="col-md-12 col-6">
+          {{ repaid }}
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="list__item__column"
+      [matTooltip]="'Effective rate: ' + anualRate"
+    >
+      <div class="row">
+        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+          ANNUAL RATE
+        </div>
+        <div class="col-md-12 col-6">
+          {{ anualRate }}
+        </div>
+      </div>
+    </div>
+
+    <div class="list__item__column">
+      <div class="row">
+        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+          SCHEDULE PROGRESS
+        </div>
+        <div
+          class="list__item__column__progress col-md-12 col-6"
+          [matTooltip]="
+            (scheduleTooltip && installmentTooltip) ?
+            scheduleTooltip + ' ' + installmentTooltip :
+            ''
+          "
+          matTooltipPosition="below"
+        >
+          <app-progress-bar
+            [color]="statusColor"
+            [progress]="timeProgress"
+          >
+          </app-progress-bar>
         </div>
+      </div>
     </div>
-    <div class="list__item__tooltip d-none d-sm-block" [matTooltipClass]="'dashboard-tooltip'+' '+getStatusTextByStatus().toLowerCase().split(' ').join('')" [matTooltip]="getStatusTextByStatus()" matTooltipPosition="before">
+  </a>
+
+  <div class="list__item__column list__item__column__payment">
+    <div class="row">
+      <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        REPAYMENT PROGRESS
+      </div>
+
+      <div class="col-6">
+        <p
+          [matTooltip]="'Accrued interest: ' + paymentProgress"
+          matTooltipPosition="below"
+        >
+          {{ paymentProgress }}
+        </p>
+      </div>
+
+      <div
+        class="col-2 list__item__column__payment__button"
+        *ngIf="showOptions"
+      >
+        <button
+          *ngIf="canPay || canRedeem || canAdjustCollateral"
+          mat-icon-button
+          [matMenuTriggerFor]="appMenu"
+        >
+          <i class="fas fa-ellipsis-v"></i>
+        </button>
+
+        <mat-menu
+          #appmenu="matMenu"
+          yPosition="below"
+        >
+          <button
+            *ngIf="canPay"
+            (click)="openDialog('pay')"
+            mat-menu-item
+          >
+            Pay
+          </button>
+
+          <button
+            *ngIf="canRedeem"
+            (click)="openDialog('withdraw')"
+            mat-menu-item
+          >
+            Withdraw Collateral
+          </button>
+
+          <button
+            *ngIf="canAdjustCollateral"
+            (click)="openDialog('add')"
+            mat-menu-item
+          >
+            Add Collateral
+          </button>
+        </mat-menu>
+      </div>
     </div>
-</div>
\ No newline at end of file
+  </div>
+
+  <div
+    class="list__item__tooltip d-none d-sm-block"
+    [matTooltipClass]="
+      'dashboard-tooltip' + ' ' + statusText.toLowerCase().split(' ').join('')
+    "
+    [matTooltip]="statusText"
+    matTooltiPosition="before"
+  >
+  </div>
+</div>
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
index 7326f27fd..b48380644 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
@@ -78,11 +78,11 @@ describe('DashboardListItemComponent', () => {
   });
 
   it('should return correct status text', () => {
-    expect(component.getStatusTextByStatus()).toEqual('Collateral Pending');
+    expect(component.statusText).toEqual('Collateral Pending');
   });
 
   it('should return correct color', () => {
-    expect(component.getBorderColorByStatus()).toEqual('#A3A5A6');
+    expect(component.statusColor).toEqual('#A3A5A6');
   });
 
   it('should display borrowed label', () => {
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index 65dc9dcf4..35c05a89f 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -28,6 +28,9 @@ export class DashboardListItemComponent implements OnInit {
   timeProgress = '0%';
   scheduleTooltip: string;
   installmentTooltip: string;
+  statusText: string;
+  statusIcon: string;
+  statusColor: string;
 
   canRedeem: boolean;
   canPay: boolean;
@@ -48,60 +51,57 @@ export class DashboardListItemComponent implements OnInit {
     this.loadDuration();
     this.loadInstallments();
     this.checkValidations();
+    this.loadStatus();
   }
 
-  getBorderColorByStatus = () => {
-    switch (this.loan.status) {
-      case Status.Request:
-        if (this.isCurrentLoans) return '#FFFFFF';
-        return '#A3A5A6';
-      case Status.Ongoing:
-        return '#4155FF';
-      case Status.Paid:
-        return '#59B159';
-      case Status.Indebt:
-        return '#D97D3A';
-      case Status.Expired:
-        return '#A3A5A6';
-      default:
-        return '#000000';
-    }
-  }
+  /**
+   * Load loan status text, icon and color
+   */
+  loadStatus() {
+    let statusText: string;
+    let statusIcon: string;
+    let statusColor: string;
 
-  getStatusTextByStatus = () => {
-    switch (this.loan.status) {
+    const { status } = this.loan;
+    switch (status) {
       case Status.Request:
-        if (this.isCurrentLoans) return 'Requested';
-        return 'Collateral Pending';
+        if (this.isCurrentLoans) {
+          statusText = 'Requested';
+          statusIcon = 'calendar';
+          statusColor = '#FFFFFF';
+        } else {
+          statusText = 'Collateral Pending';
+          statusIcon = 'exclamation';
+          statusColor = '#A3A5A6';
+        }
+        break;
       case Status.Ongoing:
-        return 'Ongoing';
+        statusText = 'Ongoing';
+        statusIcon = 'angle-double-up';
+        statusColor = '#4155FF';
+        break;
       case Status.Paid:
-        return 'Fully Repaid';
+        statusText = 'Fully Repaid';
+        statusIcon = 'check';
+        statusColor = '#59B159';
+        break;
       case Status.Indebt:
-        return 'Overdue';
+        statusText = 'Overdue';
+        statusIcon = 'exclamation';
+        statusColor = '#D97D3A';
+        break;
       case Status.Expired:
-        return 'Expired';
+        statusText = 'Expired';
+        statusIcon = 'times';
+        statusColor = '#A3A5A6';
+        break;
       default:
-        return '';
+        break;
     }
-  }
 
-  getIconByStatus = () => {
-    switch (this.loan.status) {
-      case Status.Request:
-        if (this.isCurrentLoans) return 'calendar';
-        return 'exclamation';
-      case Status.Ongoing:
-        return 'angle-double-up';
-      case Status.Paid:
-        return 'check';
-      case Status.Indebt:
-        return 'exclamation';
-      case Status.Expired:
-        return 'times';
-      default:
-        return '';
-    }
+    this.statusText = statusText;
+    this.statusIcon = statusIcon;
+    this.statusColor = statusColor;
   }
 
   async openDialog(action: 'add' | 'withdraw' | 'pay') {
diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
index b66fa1def..5034cfbf7 100644
--- a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.html
@@ -1,51 +1,58 @@
-<div  *ngFor="let dummy of ' '.repeat(items).split(''), let x = index" class="list__item">
-    <div class="list__item__title d-sm-none">
-        <app-skeleton borderRadius="15px" width="200px"></app-skeleton>
+<div
+  *ngFor="let dummy of ' '.repeat(items).split(''); let x = index"
+  class="list__item"
+>
+  <div class="list__item__title d-sm-none">
+    <app-skeleton borderRadius="15px" width="200px"></app-skeleton>
+  </div>
+  <div class="list__item__column">
+    <div class="row">
+      <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <app-skeleton borderRadius="15px"></app-skeleton>
+      </div>
+      <div class="col-md-12 col-6">
+        <app-skeleton borderRadius="15px"></app-skeleton>
+      </div>
     </div>
-    <div class="list__item__column">
-        <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">
-                <app-skeleton borderRadius="15px"></app-skeleton>
-            </div>
-            <div class="col-md-12 col-6">
-                <app-skeleton borderRadius="15px"></app-skeleton>
-            </div>
-        </div>
+  </div>
+  <div class="list__item__column">
+    <div class="row">
+      <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <app-skeleton borderRadius="15px"></app-skeleton>
+      </div>
+      <div class="col-md-12 col-6">
+        <app-skeleton borderRadius="15px"></app-skeleton>
+      </div>
     </div>
-    <div class="list__item__column">
-        <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">
-                <app-skeleton borderRadius="15px"></app-skeleton>
-            </div>
-            <div class="col-md-12 col-6">
-                <app-skeleton borderRadius="15px"></app-skeleton>
-            </div>
-        </div>
+  </div>
+  <div class="list__item__column">
+    <div class="row">
+      <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <app-skeleton borderRadius="15px"></app-skeleton>
+      </div>
+      <div class="col-md-12 col-6">
+        <app-skeleton borderRadius="15px"></app-skeleton>
+      </div>
     </div>
-    <div class="list__item__column">
-        <div class="row">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">
-                <app-skeleton borderRadius="15px"></app-skeleton>
-            </div>
-            <div class="col-md-12 col-6">
-                <app-skeleton borderRadius="15px"></app-skeleton>
-            </div>
-        </div>
+  </div>
+  <div class="list__item__column">
+    <div class="row d-none d-sm-block">
+      <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        SCHEDULE PROGRESS
+      </div>
+      <div class="col-md-12 col-6">
+        <app-skeleton borderRadius="15px"></app-skeleton>
+      </div>
     </div>
-    <div class="list__item__column">
-        <div class="row d-none d-sm-block">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">SCHEDULE PROGRESS</div>
-            <div class="col-md-12 col-6">
-                <app-skeleton borderRadius="15px"></app-skeleton>
-            </div>
-        </div>
+  </div>
+  <div class="list__item__column">
+    <div class="row d-none d-sm-block">
+      <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        REPAYMENT PROGRESS
+      </div>
+      <div class="col-md-12 col-6">
+        <app-skeleton borderRadius="15px"></app-skeleton>
+      </div>
     </div>
-    <div class="list__item__column">
-        <div class="row d-none d-sm-block">
-            <div class="list__item__column__title col-md-12 col-6 d-sm-none">REPAYMENT PROGRESS</div>
-            <div class="col-md-12 col-6">
-                <app-skeleton borderRadius="15px"></app-skeleton>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+  </div>
+</div>
diff --git a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts
index bebfbec42..22038dea5 100644
--- a/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts
+++ b/src/app/shared/dashboard-list-skeleton/dashboard-list-skeleton.component.ts
@@ -1,17 +1,12 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-dashboard-list-skeleton',
   templateUrl: './dashboard-list-skeleton.component.html',
   styleUrls: ['./dashboard-list-skeleton.component.scss']
 })
-export class DashboardListSkeletonComponent implements OnInit {
-
+export class DashboardListSkeletonComponent {
   @Input() items: number;
 
   constructor() { }
-
-  ngOnInit() {
-  }
-
 }
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index 29e227893..f2979e26a 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -1,27 +1,37 @@
 <div class="list">
-    <div class="list__header d-none d-sm-block">
-        <p class="list__header__title">
-            {{ title }}
-        </p>
-        <div class="list__header__table">
-            <p>Borrowed</p>
-            <p>Repaid</p>
-            <p>Anual Rate</p>
-            <p>Time Progress</p>
-            <p>Payment Progress</p>
-        </div>
+  <div class="list__header d-none d-sm-block">
+    <p class="list__header__title">
+      {{ title }}
+    </p>
+    <div class="list__header__table">
+      <p>Borrowed</p>
+      <p>Repaid</p>
+      <p>Anual Rate</p>
+      <p>Time Progress</p>
+      <p>Payment Progress</p>
     </div>
-    <ng-container *ngIf="loans">
-        <div class="list__item-container" *ngIf="loans.length">
-            <ng-container *ngFor="let loan of loans">
-                <app-dashboard-list-item [isCurrentLoans]="isCurrentLoans" [showOptions]="showOptions" [loan]="loan"></app-dashboard-list-item>
-            </ng-container>
-        </div>
-        <div *ngIf="!loans.length && !loading" class="list__empty-state">
-            <app-empty-state title="Hey! You don´t have any funded loans yet." image="./assets/empty-states/lent.svg" description="If you want to start lending, check the Lend section."></app-empty-state>
-        </div>
-        <ng-container *ngIf="!loans.length && loading">
-            <app-dashboard-list-skeleton items="5"></app-dashboard-list-skeleton>
-        </ng-container>
+  </div>
+  <ng-container *ngIf="loans">
+    <div class="list__item-container" *ngIf="loans.length">
+      <ng-container *ngFor="let loan of loans">
+        <app-dashboard-list-item
+          [isCurrentLoans]="isCurrentLoans"
+          [showOptions]="showOptions"
+          [loan]="loan"
+        ></app-dashboard-list-item>
+      </ng-container>
+    </div>
+    <div *ngIf="!loans.length && !loading" class="list__empty-state">
+      <app-empty-state
+        title="Hey! You don´t have any funded loans yet."
+        image="./assets/empty-states/lent.svg"
+        description="If you want to start lending, check the Lend section."
+      >
+      </app-empty-state>
+    </div>
+    <ng-container *ngIf="!loans.length && loading">
+      <app-dashboard-list-skeleton items="5">
+      </app-dashboard-list-skeleton>
     </ng-container>
-</div>
\ No newline at end of file
+  </ng-container>
+</div>
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.ts b/src/app/shared/dashboard-list/dashboard-list.component.ts
index 42d24ca06..3a8f87dc8 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.ts
+++ b/src/app/shared/dashboard-list/dashboard-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { Loan } from '../../models/loan.model';
+import { Loan } from 'app/models/loan.model';
 
 @Component({
   selector: 'app-dashboard-list',
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index e43687635..10e039897 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -12,17 +12,41 @@
     <div class="dashboard">
       <div class="row">
         <div class="col-12 col-md-9">
-          <p class="dashboard__title">LOANS</p>
+          <p class="dashboard__title">
+            LOANS
+          </p>
         </div>
         <div class="col-6 d-sm-none">
           <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-            <mat-button-toggle (click)="setPageBorrow(true)" [checked]="isPageBorrow">BORROW</mat-button-toggle>
-            <mat-button-toggle (click)="setPageBorrow(false)" [checked]="!isPageBorrow">LENT</mat-button-toggle>
+            <mat-button-toggle
+              [checked]="isPageBorrow"
+              (click)="setPageBorrow(true)"
+            >
+              BORROW
+            </mat-button-toggle>
+            <mat-button-toggle
+              [checked]="!isPageBorrow"
+              (click)="setPageBorrow(false)"
+            >
+              LENT
+            </mat-button-toggle>
           </mat-button-toggle-group>
         </div>
         <div class="col-6 col-md-3">
-          <p *ngIf="isCurrentLoans" (click)="setCurrentLoans(false)" class="dashboard__link">INACTIVES LOANS <i class="fas fa-plus-circle"></i></p>
-          <p *ngIf="!isCurrentLoans" (click)="setCurrentLoans(true)" class="dashboard__link">ACTIVES LOANS <i class="fas fa-plus-circle"></i></p>
+          <p
+            *ngIf="isCurrentLoans"
+            (click)="setCurrentLoans(false)"
+            class="dashboard__link"
+          >
+            INACTIVES LOANS <i class="fas fa-plus-circle"></i>
+          </p>
+          <p
+            *ngIf="!isCurrentLoans"
+            (click)="setCurrentLoans(true)"
+            class="dashboard__link"
+          >
+            ACTIVES LOANS <i class="fas fa-plus-circle"></i>
+          </p>
         </div>
       </div>
       <div class="dashboard__content">
@@ -35,7 +59,13 @@
               [scrollThrottlingTime]="500"
               (scroll)="onScrollBorrowed($event)"
             >
-              <app-dashboard-list [isCurrentLoans]="isCurrentLoans" [loading]="isLoading" [loans]="loansBorrowed" [showOptions]="true" title="CURRENT BORROWED"></app-dashboard-list>
+              <app-dashboard-list
+                [isCurrentLoans]="isCurrentLoans"
+                [loading]="isLoading"
+                [loans]="loansBorrowed"
+                [showOptions]="true"
+                title="CURRENT BORROWED"
+              ></app-dashboard-list>
             </virtual-scroller>
           </div>
           <div *ngIf="!isMobile || !isPageBorrow" class="col-md-6">
@@ -46,7 +76,12 @@
               [scrollThrottlingTime]="500"
               (scroll)="onScrollLent($event)"
             >
-              <app-dashboard-list [loading]="isLoading" [loans]="loansLent" [showOptions]="false" title="CURRENT LENT"></app-dashboard-list>
+              <app-dashboard-list
+                [loading]="isLoading"
+                [loans]="loansLent"
+                [showOptions]="false"
+                title="CURRENT LENT"
+              ></app-dashboard-list>
             </virtual-scroller>
           </div>
         </div>
@@ -54,4 +89,4 @@
     </div>
   </div>
   <app-footer></app-footer>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts
index a582d4b84..58c4804b1 100644
--- a/src/app/views/dashboard/dashboard.component.ts
+++ b/src/app/views/dashboard/dashboard.component.ts
@@ -1,13 +1,13 @@
 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { Loan, Status } from '../../models/loan.model';
-import { LoanContentApi } from '../../interfaces/loan-api-diaspore';
-import { LoanUtils } from '../../utils/loan-utils';
-import { ProxyApiService } from '../../services/proxy-api.service';
-import { EventsService } from '../../services/events.service';
-import { TitleService } from '../../services/title.service';
-import { Web3Service } from '../../services/web3.service';
-import { ChainService } from '../../services/chain.service';
+import { Loan, Status } from 'app/models/loan.model';
+import { LoanContentApi } from 'app/interfaces/loan-api-diaspore';
+import { LoanUtils } from 'app/utils/loan-utils';
+import { ProxyApiService } from 'app/services/proxy-api.service';
+import { EventsService } from 'app/services/events.service';
+import { TitleService } from 'app/services/title.service';
+import { Web3Service } from 'app/services/web3.service';
+import { ChainService } from 'app/services/chain.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -16,7 +16,7 @@ import { ChainService } from '../../services/chain.service';
 })
 export class DashboardComponent implements OnInit, OnDestroy {
   pageId = 'active-loans';
-  address;
+  address: string;
   isLoading: boolean;
   loansBorrowed = [];
   pageBorrowed = 1;

From 8d1b9e0055fa05e5fdcb8b819950ae15a9b830da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Wed, 12 May 2021 20:21:41 -0300
Subject: [PATCH 43/66] reload on pay

---
 .../dashboard-list-item/dashboard-list-item.component.ts   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index 35c05a89f..f43d6af4f 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -111,8 +111,11 @@ export class DashboardListItemComponent implements OnInit {
           loan: this.loan
         }
       });
-      dialog.afterClosed().subscribe(() => {
-
+      dialog.afterClosed().subscribe((update: boolean) => {
+        if (update) {
+          window.location.reload();
+          // FIXME: use better methods
+        }
       });
     } else if (action === 'add') {
       this.router.navigate(['/borrow', this.loan.id]);

From 9c111d09892aca0f055a7cddb40cba4d5e4d8b62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Wed, 12 May 2021 20:23:44 -0300
Subject: [PATCH 44/66] fix syntax

---
 .../dashboard-list-item/dashboard-list-item.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index 5812587e3..1a3699aa5 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -110,7 +110,7 @@
         </button>
 
         <mat-menu
-          #appmenu="matMenu"
+          #appMenu="matMenu"
           yPosition="below"
         >
           <button

From 0f7e635177081fb0f06225aaa75a1e9be167a2d0 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Thu, 13 May 2021 16:15:43 -0300
Subject: [PATCH 45/66] fix scroll table in dashboard

---
 .../dashboard-list-header.component.html      | 12 +++++++++
 .../dashboard-list-header.component.scss      | 23 +++++++++++++++++
 .../dashboard-list-header.component.spec.ts   | 25 +++++++++++++++++++
 .../dashboard-list-header.component.ts        | 17 +++++++++++++
 .../dashboard-list.component.html             | 12 ---------
 .../dashboard-list.component.scss             | 16 ------------
 .../dashboard-list.component.ts               |  1 -
 src/app/shared/shared.module.ts               |  7 ++++--
 .../views/dashboard/dashboard.component.html  |  4 +--
 9 files changed, 84 insertions(+), 33 deletions(-)
 create mode 100644 src/app/shared/dashboard-list-header/dashboard-list-header.component.html
 create mode 100644 src/app/shared/dashboard-list-header/dashboard-list-header.component.scss
 create mode 100644 src/app/shared/dashboard-list-header/dashboard-list-header.component.spec.ts
 create mode 100644 src/app/shared/dashboard-list-header/dashboard-list-header.component.ts

diff --git a/src/app/shared/dashboard-list-header/dashboard-list-header.component.html b/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
new file mode 100644
index 000000000..098f72bd1
--- /dev/null
+++ b/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
@@ -0,0 +1,12 @@
+<div class="list__header d-none d-sm-block">
+  <p class="list__header__title">
+    {{ name }}
+  </p>
+  <div class="list__header__table">
+    <p>Borrowed</p>
+    <p>Repaid</p>
+    <p>Anual Rate</p>
+    <p>Time Progress</p>
+    <p>Payment Progress</p>
+  </div>
+</div>
diff --git a/src/app/shared/dashboard-list-header/dashboard-list-header.component.scss b/src/app/shared/dashboard-list-header/dashboard-list-header.component.scss
new file mode 100644
index 000000000..0ab95456c
--- /dev/null
+++ b/src/app/shared/dashboard-list-header/dashboard-list-header.component.scss
@@ -0,0 +1,23 @@
+@import 'src/scss/fonts';
+
+@media (min-width: 992px) {
+  .list {
+    &__header {
+      text-align: center;
+      background-color: #262629;
+      border-radius: 5px;
+      padding: 13px 5px 15px;
+      &__title {
+        @include styled-font('proxima-nova', 800, 14px);
+        margin-bottom: 15px;
+        text-transform: uppercase;
+      }
+      &__table p {
+        width: 20%;
+        display: inline-block;
+        color: #a09f9f;
+        @include styled-font('proxima-nova', 1000, 11px);
+      }
+    }
+  }
+}
diff --git a/src/app/shared/dashboard-list-header/dashboard-list-header.component.spec.ts b/src/app/shared/dashboard-list-header/dashboard-list-header.component.spec.ts
new file mode 100644
index 000000000..5f844e2f8
--- /dev/null
+++ b/src/app/shared/dashboard-list-header/dashboard-list-header.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardListHeaderComponent } from './dashboard-list-header.component';
+
+describe('DashboardListHeaderComponent', () => {
+  let component: DashboardListHeaderComponent;
+  let fixture: ComponentFixture<DashboardListHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardListHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardListHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/dashboard-list-header/dashboard-list-header.component.ts b/src/app/shared/dashboard-list-header/dashboard-list-header.component.ts
new file mode 100644
index 000000000..9cd6d4d48
--- /dev/null
+++ b/src/app/shared/dashboard-list-header/dashboard-list-header.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard-list-header',
+  templateUrl: './dashboard-list-header.component.html',
+  styleUrls: ['./dashboard-list-header.component.scss']
+})
+export class DashboardListHeaderComponent implements OnInit {
+
+  @Input() name: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index f2979e26a..d8a19048c 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -1,16 +1,4 @@
 <div class="list">
-  <div class="list__header d-none d-sm-block">
-    <p class="list__header__title">
-      {{ title }}
-    </p>
-    <div class="list__header__table">
-      <p>Borrowed</p>
-      <p>Repaid</p>
-      <p>Anual Rate</p>
-      <p>Time Progress</p>
-      <p>Payment Progress</p>
-    </div>
-  </div>
   <ng-container *ngIf="loans">
     <div class="list__item-container" *ngIf="loans.length">
       <ng-container *ngFor="let loan of loans">
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.scss b/src/app/shared/dashboard-list/dashboard-list.component.scss
index 1fc0b06a3..f192fac9c 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.scss
+++ b/src/app/shared/dashboard-list/dashboard-list.component.scss
@@ -2,22 +2,6 @@
 
 @media (min-width: 992px) {
   .list {
-    &__header {
-      text-align: center;
-      background-color: #262629;
-      border-radius: 5px;
-      padding: 13px 5px 15px;
-      &__title {
-        @include styled-font('proxima-nova', 800, 14px);
-        margin-bottom: 15px;
-      }
-      &__table p {
-        width: 20%;
-        display: inline-block;
-        color: #a09f9f;
-        @include styled-font('proxima-nova', 1000, 11px);
-      }
-    }
     &__empty-state {
       padding: 0 40px;
     }
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.ts b/src/app/shared/dashboard-list/dashboard-list.component.ts
index 3a8f87dc8..5f6ca82fb 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.ts
+++ b/src/app/shared/dashboard-list/dashboard-list.component.ts
@@ -7,7 +7,6 @@ import { Loan } from 'app/models/loan.model';
   styleUrls: ['./dashboard-list.component.scss']
 })
 export class DashboardListComponent {
-  @Input() title: string;
   @Input() showOptions: boolean;
   @Input() loans: Loan[];
   @Input() loading: boolean;
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 90bf5da2e..6c14a2755 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -69,6 +69,7 @@ import { DashboardListComponent } from './dashboard-list/dashboard-list.componen
 import { ProgressBarComponent } from './progress-bar/progress-bar.component';
 import { DashboardListItemComponent } from './dashboard-list-item/dashboard-list-item.component';
 import { DashboardListSkeletonComponent } from './dashboard-list-skeleton/dashboard-list-skeleton.component';
+import { DashboardListHeaderComponent } from './dashboard-list-header/dashboard-list-header.component';
 
 @NgModule({
   imports: [
@@ -134,7 +135,8 @@ import { DashboardListSkeletonComponent } from './dashboard-list-skeleton/dashbo
     DashboardListComponent,
     ProgressBarComponent,
     DashboardListItemComponent,
-    DashboardListSkeletonComponent
+    DashboardListSkeletonComponent,
+    DashboardListHeaderComponent
   ],
   entryComponents: [
     DialogInsufficientfundsComponent,
@@ -199,7 +201,8 @@ import { DashboardListSkeletonComponent } from './dashboard-list-skeleton/dashbo
     FormatAddressPipe,
     SkeletonComponent,
     LoanListSkeletonComponent,
-    DialogLoanPayComponent
+    DialogLoanPayComponent,
+    DashboardListHeaderComponent
   ]
 })
 export class SharedModule { }
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index 10e039897..b7dedf820 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -52,6 +52,7 @@
       <div class="dashboard__content">
         <div class="row">
           <div *ngIf="!isMobile || isPageBorrow" class="col-md-6">
+            <app-dashboard-list-header name="Current Borrowed"></app-dashboard-list-header>
             <virtual-scroller
               #scroll
               [items]="loansBorrowed"
@@ -64,11 +65,11 @@
                 [loading]="isLoading"
                 [loans]="loansBorrowed"
                 [showOptions]="true"
-                title="CURRENT BORROWED"
               ></app-dashboard-list>
             </virtual-scroller>
           </div>
           <div *ngIf="!isMobile || !isPageBorrow" class="col-md-6">
+            <app-dashboard-list-header name="Current Lent"></app-dashboard-list-header>
             <virtual-scroller
               #scroll
               [items]="loansLent"
@@ -80,7 +81,6 @@
                 [loading]="isLoading"
                 [loans]="loansLent"
                 [showOptions]="false"
-                title="CURRENT LENT"
               ></app-dashboard-list>
             </virtual-scroller>
           </div>

From 5dfdc569bc80b482f095c49585c15e7240c533a2 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Fri, 14 May 2021 13:13:32 -0300
Subject: [PATCH 46/66] fix scroll and add button redeem in dashboard

---
 .../dashboard-list-item.component.html        | 55 +++++++------------
 .../dashboard-list-item.component.ts          | 40 ++++++++++----
 .../redeem-button.component.html              |  3 +-
 .../redeem-button.component.scss              | 11 ++++
 .../redeem-button/redeem-button.component.ts  |  2 +
 5 files changed, 62 insertions(+), 49 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index 1a3699aa5..ca63f8e02 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -7,14 +7,12 @@
   <a [routerLink]="['/loan', loan.id]">
     <div class="list__item__title d-sm-none">
       <p
-        [class.list__item__title--warning]="loan.status === 0 && !loan.collateral"
+        [class.list__item__title--warning]="
+          loan.status === 0 && !loan.collateral
+        "
         [class.list__item__title--expired]="loan.status === 4"
       >
-        <i
-          class="fas"
-          [ngClass]="'fa-' + statusIcon"
-        >
-        </i>
+        <i class="fas" [ngClass]="'fa-' + statusIcon"> </i>
         {{ statusText }}
       </p>
     </div>
@@ -24,10 +22,7 @@
         <div class="list__item__column__title col-md-12 col-6 d-sm-none">
           BORROWED
         </div>
-        <div
-          id="label-borrowed"
-          class="col-md-12 col-6"
-        >
+        <div id="label-borrowed" class="col-md-12 col-6">
           {{ borrowed }}
         </div>
       </div>
@@ -66,16 +61,13 @@
         <div
           class="list__item__column__progress col-md-12 col-6"
           [matTooltip]="
-            (scheduleTooltip && installmentTooltip) ?
-            scheduleTooltip + ' ' + installmentTooltip :
-            ''
+            scheduleTooltip && installmentTooltip
+              ? scheduleTooltip + ' ' + installmentTooltip
+              : ''
           "
           matTooltipPosition="below"
         >
-          <app-progress-bar
-            [color]="statusColor"
-            [progress]="timeProgress"
-          >
+          <app-progress-bar [color]="statusColor" [progress]="timeProgress">
           </app-progress-bar>
         </div>
       </div>
@@ -109,26 +101,18 @@
           <i class="fas fa-ellipsis-v"></i>
         </button>
 
-        <mat-menu
-          #appMenu="matMenu"
-          yPosition="below"
-        >
-          <button
-            *ngIf="canPay"
-            (click)="openDialog('pay')"
-            mat-menu-item
-          >
+        <mat-menu #appMenu="matMenu" yPosition="below">
+          <button *ngIf="canPay" (click)="openDialog('pay')" mat-menu-item>
             Pay
           </button>
-
-          <button
+          <app-redeem-button
+            (startRedeem)="startRedeem()"
+            [loan]="loan"
             *ngIf="canRedeem"
-            (click)="openDialog('withdraw')"
-            mat-menu-item
+            name="Withdraw Collateral"
+            className="dashboard"
           >
-            Withdraw Collateral
-          </button>
-
+          </app-redeem-button>
           <button
             *ngIf="canAdjustCollateral"
             (click)="openDialog('add')"
@@ -148,6 +132,5 @@
     "
     [matTooltip]="statusText"
     matTooltiPosition="before"
-  >
-  </div>
-</div>
+  ></div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index f43d6af4f..a1a817787 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MatDialog, MatDialogConfig } from '@angular/material';
+import { MatDialog } from '@angular/material';
 import { Router } from '@angular/router';
-import { DialogCollateralComponent } from 'app/dialogs/dialog-collateral/dialog-collateral.component';
 import { Loan, Status } from 'app/models/loan.model';
 import { Status as CollateralStatus } from 'app/models/collateral.model';
 import { Utils } from 'app/utils/utils';
@@ -104,7 +103,11 @@ export class DashboardListItemComponent implements OnInit {
     this.statusColor = statusColor;
   }
 
-  async openDialog(action: 'add' | 'withdraw' | 'pay') {
+  /**
+   * Open dialog on material menu for pay or add collateral
+   * @param action can be 'pay' or 'add'
+   */
+  openDialog(action: 'add' | 'pay') {
     if (action === 'pay') {
       const dialog = this.dialog.open(DialogLoanPayComponent, {
         data: {
@@ -119,18 +122,19 @@ export class DashboardListItemComponent implements OnInit {
       });
     } else if (action === 'add') {
       this.router.navigate(['/borrow', this.loan.id]);
-    } else {
-      const dialogConfig: MatDialogConfig = {
-        data: {
-          loan: this.loan,
-          collateral: this.loan.collateral,
-          action
-        }
-      };
-      this.dialog.open(DialogCollateralComponent, dialogConfig);
     }
   }
 
+  /**
+   * Set can't redeem
+   */
+  startRedeem() {
+    this.canRedeem = false;
+  }
+
+  /**
+   * Load loan's basic data
+   */
   private loadBasicData() {
     const { amount, currency, debt, descriptor, status } = this.loan;
 
@@ -148,6 +152,9 @@ export class DashboardListItemComponent implements OnInit {
     this.anualRate = descriptor.interestRate + '%';
   }
 
+  /**
+   * Load loan's payment progress to show time
+   */
   private loadPaymentProgress() {
     const { descriptor, debt, status } = this.loan;
 
@@ -165,6 +172,9 @@ export class DashboardListItemComponent implements OnInit {
     }
   }
 
+  /**
+   * Load loan's time progress
+   */
   private loadTimeProgress() {
     const loan: Loan = this.loan;
     const nowDate: number = Math.floor(new Date().getTime() / 1000);
@@ -193,6 +203,9 @@ export class DashboardListItemComponent implements OnInit {
     }%`;
   }
 
+  /**
+   * Load loan's duration for the tooltip
+   */
   private loadDuration() {
     const loan: Loan = this.loan;
     if (loan.status === Status.Ongoing || loan.status === Status.Indebt) {
@@ -206,6 +219,9 @@ export class DashboardListItemComponent implements OnInit {
     }
   }
 
+  /**
+   * Load loan's installmanets
+   */
   private async loadInstallments() {
     const loan: Loan = this.loan;
     if (loan.status === Status.Ongoing || loan.status === Status.Indebt) {
diff --git a/src/app/shared/redeem-button/redeem-button.component.html b/src/app/shared/redeem-button/redeem-button.component.html
index dbe3f823c..34c8378d9 100644
--- a/src/app/shared/redeem-button/redeem-button.component.html
+++ b/src/app/shared/redeem-button/redeem-button.component.html
@@ -2,9 +2,10 @@
   mat-raised-button
   (click)='clickRedeem()'
   class="button button-primary"
+  [ngClass]="className"
   [class.button-disabled]="disabled"
 >
-  Withdraw
+  {{ name }}
   <div
     style="display: inline; margin-left: 5px; vertical-align: baseline;"
     *ngIf='opPending'
diff --git a/src/app/shared/redeem-button/redeem-button.component.scss b/src/app/shared/redeem-button/redeem-button.component.scss
index e69de29bb..2233746fb 100644
--- a/src/app/shared/redeem-button/redeem-button.component.scss
+++ b/src/app/shared/redeem-button/redeem-button.component.scss
@@ -0,0 +1,11 @@
+.dashboard {
+  background-color: #565759;
+  width: 100%;
+  height: 40px;
+  box-shadow: none;
+  text-align: left;
+  font-weight: 400;
+}
+.dashboard:hover {
+  background-color: rgba(255, 255, 255, 0.04);
+}
diff --git a/src/app/shared/redeem-button/redeem-button.component.ts b/src/app/shared/redeem-button/redeem-button.component.ts
index 9b55a25ba..a5374c640 100644
--- a/src/app/shared/redeem-button/redeem-button.component.ts
+++ b/src/app/shared/redeem-button/redeem-button.component.ts
@@ -23,6 +23,8 @@ import { WalletConnectService } from 'app/services/wallet-connect.service';
   styleUrls: ['./redeem-button.component.scss']
 })
 export class RedeemButtonComponent implements OnInit, OnDestroy {
+  @Input() name = 'Withdraw';
+  @Input() className = '';
   @Input() loan: Loan;
   @Input() disabled: boolean;
   @Output() startRedeem = new EventEmitter();

From 62bcb4b459783c8826e6f8415045802714481c61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 11:55:26 -0300
Subject: [PATCH 47/66] fix usdc decimals on eth chains

---
 src/app/config/chain/1.ts | 4 +++-
 src/app/config/chain/3.ts | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/config/chain/1.ts b/src/app/config/chain/1.ts
index 93f8abe7b..627530693 100644
--- a/src/app/config/chain/1.ts
+++ b/src/app/config/chain/1.ts
@@ -126,7 +126,9 @@ export const chain = {
         address: '0x0000000000000000000000000000000000000000'
       }
     ],
-    currencyDecimals: {},
+    currencyDecimals: {
+      'USDC': 6
+    },
     createLoanCurrencies: ['RCN', 'USDC', 'ARS'],
     createCollateralCurrencies: ['RCN', 'USDC']
   },
diff --git a/src/app/config/chain/3.ts b/src/app/config/chain/3.ts
index 1f7260df4..8651bfae3 100644
--- a/src/app/config/chain/3.ts
+++ b/src/app/config/chain/3.ts
@@ -131,7 +131,9 @@ export const chain = {
         address: '0x0000000000000000000000000000000000000000'
       }
     ],
-    currencyDecimals: {},
+    currencyDecimals: {
+      'USDC': 6
+    },
     createLoanCurrencies: ['RCN', 'USDC', 'ARS'],
     createCollateralCurrencies: ['RCN', 'USDC']
   },

From a4b9065ada67c831becef56f46e8c4feec9b3512 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 11:55:45 -0300
Subject: [PATCH 48/66] fix collateral eth decimals

---
 .../step-create-collateral.component.ts                    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/views/create-loan/step-create-collateral/step-create-collateral.component.ts b/src/app/views/create-loan/step-create-collateral/step-create-collateral.component.ts
index 89e2b159f..d5e7dbf11 100644
--- a/src/app/views/create-loan/step-create-collateral/step-create-collateral.component.ts
+++ b/src/app/views/create-loan/step-create-collateral/step-create-collateral.component.ts
@@ -366,7 +366,12 @@ ${ value } %`;
         .div(Utils.bn(100));
 
     const rawAmount: number = Number(collateralAmountInRcn) / Number(collateralRate);
-    const amount = Math.ceil((rawAmount + Number.EPSILON) * 100) / 100;
+
+    // if currency is eth, use 6 decimals instead of 4
+    const showFourDecimals = currency.symbol === 'ETH';
+    const n = showFourDecimals ? 100000 : 10000;
+    const amount = Math.ceil((rawAmount + Number.EPSILON) * n) / n;
+
     this.form.controls.formUi.patchValue({ amount });
 
     return amount;

From 30e313e9edb1b1437095dd8ce056ec710411729d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 11:56:30 -0300
Subject: [PATCH 49/66] improves performance in the loan history component. fix
 eth/bsc scan links

---
 .../detail-history.component.html             |   2 +-
 .../detail-history.component.ts               | 124 +++++++++++-------
 2 files changed, 79 insertions(+), 47 deletions(-)

diff --git a/src/app/views/loan-detail/detail-history/detail-history.component.html b/src/app/views/loan-detail/detail-history/detail-history.component.html
index 60c1c8125..9a083fadd 100644
--- a/src/app/views/loan-detail/detail-history/detail-history.component.html
+++ b/src/app/views/loan-detail/detail-history/detail-history.component.html
@@ -74,7 +74,7 @@
           </div>
           <div
             class="message__details"
-            *ngFor="let item of historyItem.commitProperties.handler(commit)"
+            *ngFor="let item of commit.properties"
           >
             <span class="message__details-label">
               {{ item.label }}:
diff --git a/src/app/views/loan-detail/detail-history/detail-history.component.ts b/src/app/views/loan-detail/detail-history/detail-history.component.ts
index c079fc5b2..1d16f6885 100644
--- a/src/app/views/loan-detail/detail-history/detail-history.component.ts
+++ b/src/app/views/loan-detail/detail-history/detail-history.component.ts
@@ -10,6 +10,16 @@ import { Commit, CommitTypes, CommitProperties } from 'app/interfaces/commit.int
 import { LoanUtils } from 'app/utils/loan-utils';
 import { DialogPohComponent } from 'app/dialogs/dialog-poh/dialog-poh.component';
 
+interface CommitWithProperties extends Commit {
+  properties?: [{
+    label: string;
+    value: string;
+    isAddress?: boolean;
+    isHash?: boolean;
+    hasPoh?: boolean;
+  }];
+}
+
 @Component({
   selector: 'app-detail-history',
   templateUrl: './detail-history.component.html',
@@ -21,7 +31,7 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
   commits: Commit[];
   historyItems: {
     commitProperties: object;
-    commits: Commit[];
+    commits: CommitWithProperties[];
   }[];
   historyItemSelected: number;
   explorerTx = this.chainService.config.network.explorer.tx;
@@ -53,7 +63,56 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
     private formatAmountPipe: FormatAmountPipe,
     private apiService: ApiService,
     private chainService: ChainService
-  ) {
+  ) { }
+
+  async ngOnInit() {
+    const { loan } = this;
+    if (!loan) return;
+
+    this.loadCommitsProperties();
+    await this.loadCommits();
+    await this.completeCommitProperties();
+  }
+
+  ngOnChanges() {
+    this.loadCommits();
+  }
+
+  @HostListener('document:click', ['$event'])
+  clickOutside(_: any) {
+    if (!this.historyItemSelected) {
+      return;
+    }
+
+    this.historyItemSelected = null;
+  }
+
+  /**
+   * Click on an address
+   * @param address Borrower address
+   */
+  clickAddress(address: string, hasPoh: boolean) {
+    if (hasPoh) {
+      this.dialog.open(DialogPohComponent, {
+        panelClass: 'dialog-poh-wrapper',
+        data: { address }
+      });
+      return;
+    }
+
+    const { config } = this.chainService;
+    window.open(config.network.explorer.address.replace('${address}', address));
+  }
+
+  async clickHistoryItemCircle(index?: number) {
+    await timer(50).toPromise();
+    this.historyItemSelected = index;
+  }
+
+  /**
+   * Load commit properties
+   */
+  private loadCommitsProperties() {
     this.commitProperties = {
       [CommitTypes.Requested]: {
         'show': true,
@@ -175,48 +234,6 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
     };
   }
 
-  async ngOnInit() {
-    const { loan } = this;
-    if (!loan) return;
-
-    await this.loadCommits();
-  }
-
-  ngOnChanges() {
-    this.loadCommits();
-  }
-
-  @HostListener('document:click', ['$event'])
-  clickOutside(_: any) {
-    if (!this.historyItemSelected) {
-      return;
-    }
-
-    this.historyItemSelected = null;
-  }
-
-  /**
-   * Click on an address
-   * @param address Borrower address
-   */
-  clickAddress(address: string, hasPoh: boolean) {
-    if (hasPoh) {
-      this.dialog.open(DialogPohComponent, {
-        panelClass: 'dialog-poh-wrapper',
-        data: { address }
-      });
-      return;
-    }
-
-    const { config } = this.chainService;
-    window.open(config.network.explorer.address.replace('${address}', address));
-  }
-
-  async clickHistoryItemCircle(index?: number) {
-    await timer(50).toPromise();
-    this.historyItemSelected = index;
-  }
-
   private async loadCommits() {
     const { engine, id } = this.loan;
 
@@ -281,8 +298,7 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
 
   private sortByTimestamp(commits: Commit[]) {
     return commits.sort((commit, nextCommit) => {
-      return Number(commit.timestamp) - Number(nextCommit.timestamp) &&
-        commit.data.priority - nextCommit.data.priority;
+      return commit.data.priority - nextCommit.data.priority;
     });
   }
 
@@ -327,4 +343,20 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
       return commit;
     });
   }
+
+  /**
+   * Load properties for each commit
+   */
+  private async completeCommitProperties() {
+    const { historyItems } = this;
+
+    this.historyItems = historyItems.map((historyItem) => {
+      historyItem.commits.map((commit) => {
+        const properties = (historyItem.commitProperties as any).handler(commit);
+        commit.properties = properties;
+        return commit;
+      });
+      return historyItem;
+    });
+  }
 }

From 1ec24233f53419139ab3142b2e3790857ab16072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 11:57:00 -0300
Subject: [PATCH 50/66] fix penalty rate visibility

---
 .../loan-overview-panel/loan-overview-panel.component.html    | 4 ++--
 .../loan-overview-panel/loan-overview-panel.component.ts      | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.html b/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.html
index 9e165b3fd..3bae80bb6 100644
--- a/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.html
+++ b/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.html
@@ -139,8 +139,8 @@ <h3 class="page-content__subtitle">
                   Penalty rate:
                 </span>
                 <span class="accordion-details__item-value">
-                  <ng-container *ngIf="interestPunitory">
-                    {{ interestPunitory | formatAmount: 0 }}%
+                  <ng-container *ngIf="interestRate">
+                    {{ interestRate | formatAmount: 0 }}%
                   </ng-container>
                 </span>
               </div>
diff --git a/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.ts b/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.ts
index 605a0d701..8ea020b95 100644
--- a/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.ts
+++ b/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.ts
@@ -20,7 +20,6 @@ export class LoanOverviewPanelComponent implements OnInit, OnChanges {
   amountBorrow: number;
   amountRepay: number;
   interestRate: number;
-  interestPunitory: number;
   duration: string;
   durationTooltip: string;
   paymentDate: string[] = [];
@@ -107,7 +106,6 @@ export class LoanOverviewPanelComponent implements OnInit, OnChanges {
         const { duration } = this.loan.descriptor;
         const formattedDduration: string = Utils.formatDelta(duration);
         this.interestRate = interestRate;
-        this.interestPunitory = punitiveInterestRate;
 
         // set duration
         this.duration = formattedDduration;

From 7b1a8effa5c554e283dc82e48bce9aeb29977fbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 11:59:41 -0300
Subject: [PATCH 51/66] dashboard copy

---
 .../dashboard-list-header.component.html             |  6 +++---
 .../dashboard-list-item.component.html               |  8 +++++---
 .../dashboard-list/dashboard-list.component.html     | 12 ++++++++++--
 .../dashboard-list/dashboard-list.component.scss     |  5 +++++
 .../dashboard-list/dashboard-list.component.ts       |  2 ++
 src/app/views/dashboard/dashboard.component.html     | 10 ++++++----
 6 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/app/shared/dashboard-list-header/dashboard-list-header.component.html b/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
index 098f72bd1..d11da90ca 100644
--- a/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
+++ b/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
@@ -5,8 +5,8 @@
   <div class="list__header__table">
     <p>Borrowed</p>
     <p>Repaid</p>
-    <p>Anual Rate</p>
-    <p>Time Progress</p>
-    <p>Payment Progress</p>
+    <p>Annual Rate</p>
+    <p>Schedule Progress</p>
+    <p>Repayment Progress</p>
   </div>
 </div>
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index ca63f8e02..ff83e20cc 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -39,9 +39,10 @@
       </div>
     </div>
 
+    <!-- TODO: check tooltip logic -->
+    <!-- [matTooltip]="'Effective rate: ' + anualRate" -->
     <div
       class="list__item__column"
-      [matTooltip]="'Effective rate: ' + anualRate"
     >
       <div class="row">
         <div class="list__item__column__title col-md-12 col-6 d-sm-none">
@@ -81,8 +82,9 @@
       </div>
 
       <div class="col-6">
+        <!-- TODO: check tooltip logic -->
+        <!-- [matTooltip]="'Accrued interest: ' + paymentProgress + ' ' + loan?.currency" -->
         <p
-          [matTooltip]="'Accrued interest: ' + paymentProgress"
           matTooltipPosition="below"
         >
           {{ paymentProgress }}
@@ -133,4 +135,4 @@
     [matTooltip]="statusText"
     matTooltiPosition="before"
   ></div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index d8a19048c..d338cdd75 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -11,9 +11,17 @@
     </div>
     <div *ngIf="!loans.length && !loading" class="list__empty-state">
       <app-empty-state
-        title="Hey! You don´t have any funded loans yet."
+        *ngIf="isBorrowed"
+        title="Hmm, it seems like you haven't requested any loans yet."
+        description='If you want to become a borrower, check the <a href="/borrow">Borrow Section</a>.'
+        image="./assets/empty-states/borrow.svg"
+      >
+      </app-empty-state>
+      <app-empty-state
+        *ngIf="isLent"
+        title="Hmm, it seems like you haven't funded any loans yet."
+        description='If you want to become a lender, check the <a href="/">Lend Section</a>.'
         image="./assets/empty-states/lent.svg"
-        description="If you want to start lending, check the Lend section."
       >
       </app-empty-state>
     </div>
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.scss b/src/app/shared/dashboard-list/dashboard-list.component.scss
index f192fac9c..6a39d322e 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.scss
+++ b/src/app/shared/dashboard-list/dashboard-list.component.scss
@@ -4,6 +4,11 @@
   .list {
     &__empty-state {
       padding: 0 40px;
+      app-empty-state::ng-deep {
+        .app-empty-state {
+          padding: 64px 0;
+        }
+      }
     }
     &__item-container {
       overflow: scroll;
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.ts b/src/app/shared/dashboard-list/dashboard-list.component.ts
index 5f6ca82fb..488720022 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.ts
+++ b/src/app/shared/dashboard-list/dashboard-list.component.ts
@@ -11,6 +11,8 @@ export class DashboardListComponent {
   @Input() loans: Loan[];
   @Input() loading: boolean;
   @Input() isCurrentLoans: boolean;
+  @Input() isBorrowed: boolean;
+  @Input() isLent: boolean;
 
   constructor() {}
 }
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index b7dedf820..a9e4f40e8 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -4,8 +4,8 @@
   <div class="container">
     <div class="page-header">
       <app-page-header
-        title="MY DASHBOARD"
-        description="Check all your loans status and operations."
+        title="DASHBOARD"
+        description="Check your total repayments, loans’ status and more."
       >
       </app-page-header>
     </div>
@@ -52,7 +52,7 @@
       <div class="dashboard__content">
         <div class="row">
           <div *ngIf="!isMobile || isPageBorrow" class="col-md-6">
-            <app-dashboard-list-header name="Current Borrowed"></app-dashboard-list-header>
+            <app-dashboard-list-header name="Borrowed"></app-dashboard-list-header>
             <virtual-scroller
               #scroll
               [items]="loansBorrowed"
@@ -62,6 +62,7 @@
             >
               <app-dashboard-list
                 [isCurrentLoans]="isCurrentLoans"
+                [isBorrowed]="true"
                 [loading]="isLoading"
                 [loans]="loansBorrowed"
                 [showOptions]="true"
@@ -69,7 +70,7 @@
             </virtual-scroller>
           </div>
           <div *ngIf="!isMobile || !isPageBorrow" class="col-md-6">
-            <app-dashboard-list-header name="Current Lent"></app-dashboard-list-header>
+            <app-dashboard-list-header name="Lent"></app-dashboard-list-header>
             <virtual-scroller
               #scroll
               [items]="loansLent"
@@ -78,6 +79,7 @@
               (scroll)="onScrollLent($event)"
             >
               <app-dashboard-list
+                [isLent]="true"
                 [loading]="isLoading"
                 [loans]="loansLent"
                 [showOptions]="false"

From c95bfc224a7f027ca0cd35c95d4d678f794738ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 12:24:54 -0300
Subject: [PATCH 52/66] fix redeem collateral tx tracking

---
 src/app/services/tx.service.ts                | 19 ++++++++++++++++++-
 .../redeem-button/redeem-button.component.ts  | 13 +++++++------
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/app/services/tx.service.ts b/src/app/services/tx.service.ts
index ec99a45b2..a64af51a1 100644
--- a/src/app/services/tx.service.ts
+++ b/src/app/services/tx.service.ts
@@ -17,7 +17,8 @@ export enum Type {
   create = 'create',
   createCollateral = 'createCollateral',
   addCollateral = 'addCollateral',
-  withdrawCollateral = 'withdrawCollateral'
+  withdrawCollateral = 'withdrawCollateral',
+  redeemCollateral = 'redeemCollateral'
 }
 
 export class Tx {
@@ -242,6 +243,22 @@ export class TxService {
       .sort((tx1, tx2) => tx2.timestamp - tx1.timestamp)[0];
   }
 
+  registerRedeemCollateralTx(tx: string, loan: Loan) {
+    const { engine } = loan;
+    const { id } = loan.collateral;
+    const data = { engine, id };
+    this.registerTx(new Tx(tx, data.engine, false, Type.redeemCollateral, data));
+  }
+
+  getLastPendingRedeemCollateral(loan: Loan) {
+    return this.txMemory
+      .filter(tx =>
+        !tx.confirmed &&
+        tx.type === Type.redeemCollateral &&
+        tx.data.id === loan.collateral.id)
+      .sort((tx1, tx2) => tx2.timestamp - tx1.timestamp)[0];
+  }
+
   registerAddCollateralTx(tx: string, loan: Loan, collateral: Collateral, amount: number) {
     const data = {
       engine: loan.address,
diff --git a/src/app/shared/redeem-button/redeem-button.component.ts b/src/app/shared/redeem-button/redeem-button.component.ts
index 9b55a25ba..f2efd9a38 100644
--- a/src/app/shared/redeem-button/redeem-button.component.ts
+++ b/src/app/shared/redeem-button/redeem-button.component.ts
@@ -51,7 +51,7 @@ export class RedeemButtonComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     if (this.txSubscription) {
-      this.txService.unsubscribeConfirmedTx(async (tx: Tx) => this.trackLendTx(tx));
+      this.txService.unsubscribeConfirmedTx(async (tx: Tx) => this.trackRedeemTx(tx));
     }
   }
 
@@ -59,7 +59,7 @@ export class RedeemButtonComponent implements OnInit, OnDestroy {
    * Retrieve pending Tx
    */
   retrievePendingTx() {
-    this.pendingTx = this.txService.getLastPendingLend(this.loan);
+    this.pendingTx = this.txService.getLastPendingRedeemCollateral(this.loan);
 
     if (this.pendingTx) {
       this.startRedeem.emit();
@@ -68,15 +68,16 @@ export class RedeemButtonComponent implements OnInit, OnDestroy {
 
     if (!this.txSubscription) {
       this.txSubscription = true;
-      this.txService.subscribeConfirmedTx(async (tx: Tx) => this.trackLendTx(tx));
+      this.txService.subscribeConfirmedTx(async (tx: Tx) => this.trackRedeemTx(tx));
     }
   }
 
   /**
    * Track tx
    */
-  trackLendTx(tx: Tx) {
-    if (tx.type === Type.withdrawCollateral && tx.data.id === this.loan.id) {
+  trackRedeemTx(tx: Tx) {
+    const { id } = this.loan.collateral;
+    if (tx.type === Type.redeemCollateral && tx.data.id === id) {
       this.endRedeem.emit();
       this.txSubscription = false;
       this.finishProgress = true;
@@ -155,7 +156,7 @@ export class RedeemButtonComponent implements OnInit, OnDestroy {
         account
       );
 
-      this.txService.registerWithdrawCollateralTx(tx, this.loan, collateral, collateralAmount as any);
+      this.txService.registerRedeemCollateralTx(tx, this.loan);
       this.retrievePendingTx();
     } catch (err) {
       // Don't show 'User denied transaction signature' error

From ece9126df37658a40f913ebfc967b2effb49a9e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 12:45:24 -0300
Subject: [PATCH 53/66] my loans -> dashboard copy

---
 src/app/core/navrail/navrail.component.html                   | 4 ++--
 src/app/shared/footer/footer.component.html                   | 4 ++--
 .../loan-does-not-exist/loan-does-not-exist.component.html    | 2 +-
 src/app/views/not-found/not-found.component.html              | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/core/navrail/navrail.component.html b/src/app/core/navrail/navrail.component.html
index 6a1ba86c4..1cf733fa5 100644
--- a/src/app/core/navrail/navrail.component.html
+++ b/src/app/core/navrail/navrail.component.html
@@ -50,7 +50,7 @@
             <i class="fas fa-hand-holding-usd"></i>
           </span>
           <span class="menu__item-label">
-            My loans
+            Dashboard
           </span>
           <span *ngIf="isBulletMyLoans" class="menu__item-bullet"></span>
         </a>
@@ -64,7 +64,7 @@
             <i class="fas fa-hand-holding-usd"></i>
           </span>
           <span class="menu__item-label">
-            My loans
+            Dashboard
           </span>
         </a>
       </ng-template>
diff --git a/src/app/shared/footer/footer.component.html b/src/app/shared/footer/footer.component.html
index c81e5d33c..6c9537fd4 100644
--- a/src/app/shared/footer/footer.component.html
+++ b/src/app/shared/footer/footer.component.html
@@ -29,7 +29,7 @@
         >
           <i class="fas fa-hand-holding-usd"></i>
           <p>
-            My loans
+            Dashboard
           </p>
         </li>
         <li
@@ -47,7 +47,7 @@
         <li (click)="clickLogin()">
           <i class="fas fa-hand-holding-usd"></i>
           <p>
-            My loans
+            Dashboard
           </p>
         </li>
         <li (click)="clickLogin()">
diff --git a/src/app/views/loan-detail/loan-does-not-exist/loan-does-not-exist.component.html b/src/app/views/loan-detail/loan-does-not-exist/loan-does-not-exist.component.html
index e92b3ef54..e46788fd2 100644
--- a/src/app/views/loan-detail/loan-does-not-exist/loan-does-not-exist.component.html
+++ b/src/app/views/loan-detail/loan-does-not-exist/loan-does-not-exist.component.html
@@ -10,7 +10,7 @@
         class: 'button-primary'
       },
       {
-        text: account ? 'Go to My Loans' : 'Go to Activity',
+        text: account ? 'Go to Dashboard' : 'Go to Activity',
         url: account ? ('/address/' + account) : '/activity',
         class: 'button-clear'
       }
diff --git a/src/app/views/not-found/not-found.component.html b/src/app/views/not-found/not-found.component.html
index e54cf8e50..cdd0a077a 100644
--- a/src/app/views/not-found/not-found.component.html
+++ b/src/app/views/not-found/not-found.component.html
@@ -10,7 +10,7 @@
         class: 'button-primary'
       },
       {
-        text: account ? 'Go to My Loans' : 'Go to Activity',
+        text: account ? 'Go to Dashboard' : 'Go to Activity',
         url: account ? ('/address/' + account) : '/activity',
         class: 'button-clear'
       }

From ef882f67e723fcdc7bec7ff141f354057dba68e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 13:13:14 -0300
Subject: [PATCH 54/66] update changelog

---
 CHANGELOG.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c6d076c6..4653bdfca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,24 @@
 # Changelog
 
+## **0.4.1** Boggart 👻
+
+### Feature:
+- New dashboard component
+- New navrail bullets component
+
+### Enhancement:
+- New animations
+- Upgrade dependencies
+- Shows more decimal when creating ETH collateral
+- Improves performance in the loan detail view
+
+### Fix:
+- Fix USDC decimals on Ethereum chains
+- Fix penalty rate display
+- Fix Etherscan/BSC scan links in the loan history component
+- Fix Withdraw Collateral TX tracking
+- Fix the verification of whether a loan was created
+
 ## **0.4.0** Boggart 👻
 
 ### Feature:

From 3c3a1f583cd9064b571aa06bfe6d268b3fa671b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 13:13:35 -0300
Subject: [PATCH 55/66] update package version

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ae02aedb2..9baaab980 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "rcn-angular-dapp",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index b3aa0d9b8..a36f47de5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rcn-angular-dapp",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "version_name": "Boggart",
   "license": "MIT",
   "scripts": {

From 3a825c5c0a11ce74e6d147f36f683446a1588b0a Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 17 May 2021 16:11:43 -0300
Subject: [PATCH 56/66] fix responsive

---
 .../dashboard-list-header.component.html      |  2 +-
 .../dashboard-list-item.component.html        | 26 +++++++------------
 .../views/dashboard/dashboard.component.html  |  2 +-
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/app/shared/dashboard-list-header/dashboard-list-header.component.html b/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
index d11da90ca..af1e859de 100644
--- a/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
+++ b/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
@@ -1,4 +1,4 @@
-<div class="list__header d-none d-sm-block">
+<div class="list__header d-none d-lg-block">
   <p class="list__header__title">
     {{ name }}
   </p>
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index ff83e20cc..002204a9d 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -5,7 +5,7 @@
   }"
 >
   <a [routerLink]="['/loan', loan.id]">
-    <div class="list__item__title d-sm-none">
+    <div class="list__item__title d-lg-none">
       <p
         [class.list__item__title--warning]="
           loan.status === 0 && !loan.collateral
@@ -19,7 +19,7 @@
 
     <div class="list__item__column">
       <div class="row">
-        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <div class="list__item__column__title col-md-12 col-6 d-lg-none">
           BORROWED
         </div>
         <div id="label-borrowed" class="col-md-12 col-6">
@@ -30,7 +30,7 @@
 
     <div class="list__item__column">
       <div class="row">
-        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <div class="list__item__column__title col-md-12 col-6 d-lg-none">
           REPAID
         </div>
         <div class="col-md-12 col-6">
@@ -39,13 +39,12 @@
       </div>
     </div>
 
-    <!-- TODO: check tooltip logic -->
-    <!-- [matTooltip]="'Effective rate: ' + anualRate" -->
     <div
       class="list__item__column"
+      [matTooltip]="'Effective rate: ' + anualRate"
     >
       <div class="row">
-        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <div class="list__item__column__title col-md-12 col-6 d-lg-none">
           ANNUAL RATE
         </div>
         <div class="col-md-12 col-6">
@@ -56,7 +55,7 @@
 
     <div class="list__item__column">
       <div class="row">
-        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <div class="list__item__column__title col-md-12 col-6 d-lg-none">
           SCHEDULE PROGRESS
         </div>
         <div
@@ -77,14 +76,13 @@
 
   <div class="list__item__column list__item__column__payment">
     <div class="row">
-      <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+      <div class="list__item__column__title col-md-12 col-6 d-lg-none">
         REPAYMENT PROGRESS
       </div>
 
       <div class="col-6">
-        <!-- TODO: check tooltip logic -->
-        <!-- [matTooltip]="'Accrued interest: ' + paymentProgress + ' ' + loan?.currency" -->
         <p
+          [matTooltip]="'Accrued interest: ' + paymentProgress"
           matTooltipPosition="below"
         >
           {{ paymentProgress }}
@@ -107,13 +105,7 @@
           <button *ngIf="canPay" (click)="openDialog('pay')" mat-menu-item>
             Pay
           </button>
-          <app-redeem-button
-            (startRedeem)="startRedeem()"
-            [loan]="loan"
-            *ngIf="canRedeem"
-            name="Withdraw Collateral"
-            className="dashboard"
-          >
+          <app-redeem-button [loan]="loan" *ngIf="canRedeem" name="Withdraw Collateral">
           </app-redeem-button>
           <button
             *ngIf="canAdjustCollateral"
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index a9e4f40e8..e92415eb3 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -16,7 +16,7 @@
             LOANS
           </p>
         </div>
-        <div class="col-6 d-sm-none">
+        <div class="col-6 d-lg-none">
           <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
             <mat-button-toggle
               [checked]="isPageBorrow"

From f4881443e993233b426c652d15e78b929649f59f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 18:07:02 -0300
Subject: [PATCH 57/66] get usdc decimals dynamically

---
 .../collateral-form.component.ts              |  5 ++--
 .../dialog-loan-lend.component.ts             |  4 +--
 .../dialog-loan-pay.component.ts              |  5 ++--
 src/app/services/collateral.service.ts        |  8 +++---
 src/app/services/currencies.service.ts        | 12 +++++++++
 src/app/services/installments.service.spec.ts |  6 ++---
 src/app/services/installments.service.ts      | 26 ++++++++++---------
 .../shared/loan-list/loan-list.component.ts   | 16 +++++++++---
 src/app/utils/currencies.ts                   |  9 -------
 .../create-loan-card.component.ts             |  6 +++--
 .../detail-history.component.ts               |  8 ++++--
 .../loan-detail/loan-detail.component.ts      | 12 ++++++---
 .../loan-overview-panel.component.ts          |  4 +--
 13 files changed, 73 insertions(+), 48 deletions(-)

diff --git a/src/app/dialogs/dialog-collateral/collateral-form/collateral-form.component.ts b/src/app/dialogs/dialog-collateral/collateral-form/collateral-form.component.ts
index e33bec2c4..b3246c952 100644
--- a/src/app/dialogs/dialog-collateral/collateral-form/collateral-form.component.ts
+++ b/src/app/dialogs/dialog-collateral/collateral-form/collateral-form.component.ts
@@ -5,7 +5,6 @@ import { NgxSpinnerService } from 'ngx-spinner';
 import { timer } from 'rxjs';
 import * as BN from 'bn.js';
 import { Utils } from 'app/utils/utils';
-import { Currency } from 'app/utils/currencies';
 // App models
 import { Loan } from 'app/models/loan.model';
 import { Collateral } from 'app/models/collateral.model';
@@ -246,7 +245,7 @@ export class CollateralFormComponent implements OnInit {
       });
 
       const originalAmount = Utils.formatAmount(
-        new Currency(currency.symbol).fromUnit(amount),
+        this.currenciesService.getAmountFromDecimals(amount, currency.symbol),
         4
       );
       const originalCollateralRatio: string =
@@ -287,7 +286,7 @@ export class CollateralFormComponent implements OnInit {
   private calculateMaxWithdraw() {
     const { amount } = this.form.value.formCollateral;
     const { currency, collateralRatio, balanceRatio } = this.form.value.formRatios;
-    const decimals: number = new Currency(currency.symbol).decimals;
+    const decimals: number = this.currenciesService.getCurrencyDecimals('symbol', currency.symbol);
 
     const collateralAdjustment: number = Math.floor(Number(collateralRatio));
     const balanceAmount = Utils.bn(balanceRatio)
diff --git a/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.ts b/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.ts
index 9a81f85c8..1fd1b093e 100644
--- a/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.ts
+++ b/src/app/dialogs/dialog-loan-lend/dialog-loan-lend.component.ts
@@ -79,8 +79,8 @@ export class DialogLoanLendComponent implements OnInit {
 
     // set loan amount and rate
     const rate: BN = await this.getLoanRate();
-    this.loanAmount = Utils.formatAmount(loanCurrency.fromUnit(loanAmount));
-    this.loanExpectedReturn = Utils.formatAmount(loanCurrency.fromUnit(loanExpectedReturn));
+    this.loanAmount = Utils.formatAmount(this.currenciesService.getAmountFromDecimals(loanAmount, loanCurrency.symbol));
+    this.loanExpectedReturn = Utils.formatAmount(this.currenciesService.getAmountFromDecimals(loanExpectedReturn, loanCurrency.symbol));
     this.exchangeEngineToken = Utils.formatAmount(rate as any / 10 ** engineCurrencyDecimals, 4);
 
     // set loan status
diff --git a/src/app/dialogs/dialog-loan-pay/dialog-loan-pay.component.ts b/src/app/dialogs/dialog-loan-pay/dialog-loan-pay.component.ts
index 94fd1f162..f431e6bac 100644
--- a/src/app/dialogs/dialog-loan-pay/dialog-loan-pay.component.ts
+++ b/src/app/dialogs/dialog-loan-pay/dialog-loan-pay.component.ts
@@ -176,8 +176,9 @@ export class DialogLoanPayComponent implements OnInit {
    */
   private calculatePendingAmount() {
     const loan: Loan = this.loan;
-    const currency = loan.currency;
-    const pendingAmount = currency.fromUnit(loan.debt.model.estimatedObligation);
+    const { symbol } = loan.currency;
+    const { estimatedObligation } = loan.debt.model;
+    const pendingAmount = this.currenciesService.getAmountFromDecimals(estimatedObligation, symbol);
 
     // adds 0,001% to the amount for prevent a small due
     const additional = (0.001 * pendingAmount) / 100;
diff --git a/src/app/services/collateral.service.ts b/src/app/services/collateral.service.ts
index 6aada67c0..239716535 100644
--- a/src/app/services/collateral.service.ts
+++ b/src/app/services/collateral.service.ts
@@ -5,7 +5,6 @@ import { Tx, Type } from '../services/tx.service';
 import { Loan } from './../models/loan.model';
 import { Collateral } from './../models/collateral.model';
 import { Utils } from './../utils/utils';
-import { Currency } from './../utils/currencies';
 import { CurrenciesService, CurrencyItem } from './../services/currencies.service';
 
 @Injectable()
@@ -91,14 +90,15 @@ export class CollateralService {
    */
   async calculateLiquidationPrice(loan: Loan, collateral: Collateral): Promise<number> {
     const { liquidationRatio, amount, token } = collateral;
-    const currency: CurrencyItem =
+    const { symbol }: CurrencyItem =
       this.currenciesService.getCurrencyByKey('address', token.toLowerCase());
     const liquidationPercentage: string =
       this.rawToPercentage(liquidationRatio).toString();
 
     const loanDebt =
       loan.debt ? loan.debt.model.estimatedObligation : loan.descriptor.totalObligation;
-    const collateralAmount = new Currency(currency.symbol).fromUnit(amount);
+    const collateralAmount = this.currenciesService.getAmountFromDecimals(amount, symbol);
+
     const liquidationPrice = (Number(liquidationPercentage) / 100 * loanDebt) / collateralAmount;
     const loanCurrencyDecimals = this.currenciesService.getCurrencyDecimals('symbol', loan.currency.symbol);
     const formattedLiquidationPrice: number =
@@ -120,7 +120,7 @@ export class CollateralService {
 
     const loanDebt =
       loan.debt ? loan.debt.model.estimatedObligation : loan.descriptor.totalObligation;
-    const collateralAmount = new Currency(currency.symbol).fromUnit(amount);
+    const collateralAmount = this.currenciesService.getAmountFromDecimals(amount, currency.symbol);
     const currentPrice = (Number(collateralPercentage) / 100 * loanDebt) / collateralAmount;
     const loanCurrencyDecimals = this.currenciesService.getCurrencyDecimals('symbol', loan.currency.symbol);
     const formattedCurrentPrice: number =
diff --git a/src/app/services/currencies.service.ts b/src/app/services/currencies.service.ts
index 07dcb02b8..029938f31 100644
--- a/src/app/services/currencies.service.ts
+++ b/src/app/services/currencies.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import * as BN from 'bn.js';
 import { Utils } from 'app/utils/utils';
 import { Currency } from 'app/utils/currencies';
 import { ChainService } from 'app/services/chain.service';
@@ -127,6 +128,17 @@ export class CurrenciesService {
     };
   }
 
+  /**
+   * Raw amount to readable amount
+   * @param amount Raw amount
+   * @param symbol Currency symbol
+   * @return Formatted amount
+   */
+  getAmountFromDecimals(amount: number | string | BN, symbol: string): number {
+    const decimals = this.getCurrencyDecimals('symbol', symbol);
+    return Number(amount) / 10 ** decimals;
+  }
+
   /**
    * Get currency decimals
    * @param key CurrencyItem key
diff --git a/src/app/services/installments.service.spec.ts b/src/app/services/installments.service.spec.ts
index 6739d944f..803d88905 100644
--- a/src/app/services/installments.service.spec.ts
+++ b/src/app/services/installments.service.spec.ts
@@ -36,7 +36,7 @@ describe('InstallmentsService', () => {
     firstInstallment.startDate = moment().format();
     firstInstallment.dueDate = moment().format();
 
-    const { descriptor, currency } = LOAN_EXAMPLE_REQUESTED;
+    const { descriptor } = LOAN_EXAMPLE_REQUESTED;
     expect(firstInstallment).toEqual(jasmine.objectContaining({
       isCurrent: true,
       isLast: false,
@@ -46,9 +46,9 @@ describe('InstallmentsService', () => {
       startDate: moment().format(),
       dueDate: moment().format(),
       currency: 'RCN',
-      amount: currency.fromUnit(descriptor.firstObligation),
+      amount: descriptor.firstObligation / 10 ** 18,
       punitory: descriptor.punitiveInterestRate,
-      pendingAmount: currency.fromUnit(descriptor.firstObligation),
+      pendingAmount: descriptor.firstObligation / 10 ** 18,
       totalPaid: 0,
       pays: [],
       status: InstallmentStatus.OnTime
diff --git a/src/app/services/installments.service.ts b/src/app/services/installments.service.ts
index 1588a6d0a..725386487 100644
--- a/src/app/services/installments.service.ts
+++ b/src/app/services/installments.service.ts
@@ -1,17 +1,18 @@
 import { Injectable } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import * as moment from 'moment';
-import { Loan, Status } from './../models/loan.model';
-import { Installment, InstallmentStatus } from './../interfaces/installment';
-import { Commit, CommitTypes } from './../interfaces/commit.interface';
-import { LoanUtils } from './../utils/loan-utils';
-// App services
-import { ApiService } from './api.service';
+import { Loan, Status } from 'app/models/loan.model';
+import { Installment, InstallmentStatus } from 'app/interfaces/installment';
+import { Commit, CommitTypes } from 'app/interfaces/commit.interface';
+import { LoanUtils } from 'app/utils/loan-utils';
+import { CurrenciesService } from 'app/services/currencies.service';
+import { ApiService } from 'app/services/api.service';
 
 @Injectable()
 export class InstallmentsService {
 
   constructor(
+    private currenciesService: CurrenciesService,
     private apiService: ApiService
   ) { }
 
@@ -103,7 +104,7 @@ export class InstallmentsService {
         this.unixToDate(TODAY_DATE_UNIX) <= dueDate;
 
       const currency = loan.currency.toString();
-      const amount = loan.currency.fromUnit(loan.descriptor.firstObligation);
+      const amount = this.currenciesService.getAmountFromDecimals(loan.descriptor.firstObligation, currency);
       const punitory = loan.descriptor.punitiveInterestRate;
       const pendingAmount = amount;
       const totalPaid = 0;
@@ -243,6 +244,7 @@ export class InstallmentsService {
 
     // get estimated installments calendar
     const { lentTime } = loan.config;
+    const { symbol } = loan.currency;
     const estimatedInstallments = this.getEstimatedInstallments(loan, lentTime * 1000);
 
     // assign calculated payments to the estimated installments
@@ -262,16 +264,16 @@ export class InstallmentsService {
         installment.pays.push({
           date: new DatePipe('en-US').transform(timestamp as any * 1000, `yyyy-MM-dd'T'HH:mm:ssZ`),
           punitory: 0,
-          pending: loan.currency.fromUnit(amountRequiredByInstallment - accumulatorLocaleTotalPaid),
-          amount: loan.currency.fromUnit(amountUsed),
-          totalPaid: loan.currency.fromUnit(accumulatorTotalPaid)
+          pending: this.currenciesService.getAmountFromDecimals(amountRequiredByInstallment - accumulatorLocaleTotalPaid, symbol),
+          amount: this.currenciesService.getAmountFromDecimals(amountUsed, symbol),
+          totalPaid: this.currenciesService.getAmountFromDecimals(accumulatorTotalPaid, symbol)
         });
       });
 
       // set installment paid
       const paid = accumulatorLocaleTotalPaid;
-      installment.totalPaid = loan.currency.fromUnit(paid);
-      installment.pendingAmount = loan.currency.fromUnit(amountRequiredByInstallment - paid);
+      installment.totalPaid = this.currenciesService.getAmountFromDecimals(paid, symbol);
+      installment.pendingAmount = this.currenciesService.getAmountFromDecimals(amountRequiredByInstallment - paid, symbol);
 
       // set installment status
       let status: InstallmentStatus;
diff --git a/src/app/shared/loan-list/loan-list.component.ts b/src/app/shared/loan-list/loan-list.component.ts
index 66feaf954..a514a7bd2 100644
--- a/src/app/shared/loan-list/loan-list.component.ts
+++ b/src/app/shared/loan-list/loan-list.component.ts
@@ -163,22 +163,30 @@ export class LoanListComponent implements OnInit, OnDestroy {
     if (loan.isRequest) {
       // requested case
       this.leftLabel = 'Lend';
-      this.leftValue = Utils.formatAmount(currency.fromUnit(loan.amount));
+      this.leftValue = Utils.formatAmount(
+        this.currenciesService.getAmountFromDecimals(loan.amount, currency.symbol)
+      );
       this.rightLabel = 'Receive';
-      this.rightValue = Utils.formatAmount(currency.fromUnit(loan.descriptor.totalObligation));
+      this.rightValue = Utils.formatAmount(
+        this.currenciesService.getAmountFromDecimals(loan.descriptor.totalObligation, currency.symbol)
+      );
       this.durationLabel = 'Duration';
       this.durationValue = Utils.formatDelta(loan.descriptor.duration);
       this.durationTooltip = this.durationValue + ' Duration';
     } else {
       // ongoing/overdue/paid/expired case
       this.leftLabel = 'Repaid';
-      this.leftValue = Utils.formatAmount(currency.fromUnit(loan.debt.model.paid));
+      this.leftValue = Utils.formatAmount(
+        this.currenciesService.getAmountFromDecimals(loan.debt.model.paid, currency.symbol)
+      );
       this.durationLabel = 'Next payment in';
       this.durationValue = loan.status !== Status.Paid ?
         Utils.formatDelta(loan.debt.model.dueTime - (new Date().getTime() / 1000)) :
         '-';
       this.rightLabel = 'Due';
-      this.rightValue = Utils.formatAmount(currency.fromUnit(loan.debt.model.estimatedObligation));
+      this.rightValue = Utils.formatAmount(
+        this.currenciesService.getAmountFromDecimals(loan.debt.model.estimatedObligation, currency.symbol)
+      );
       this.canLend = false;
       if (loan.status === Status.Indebt) {
         this.durationLabel = 'Overdue for';
diff --git a/src/app/utils/currencies.ts b/src/app/utils/currencies.ts
index 9f64f3055..b38dd96f6 100644
--- a/src/app/utils/currencies.ts
+++ b/src/app/utils/currencies.ts
@@ -1,5 +1,3 @@
-import * as BN from 'bn.js';
-
 export class Currency {
   decimals: number;
   constructor(
@@ -28,12 +26,5 @@ export class Currency {
         return 0;
     }
   }
-  fromUnit(n: number | string | BN): number {
-    if (typeof n !== 'number') {
-      n = Number(n);
-    }
-
-    return n / 10 ** this.decimals;
-  }
   toString = (): string => this.symbol;
 }
diff --git a/src/app/views/create-loan/create-loan-card/create-loan-card.component.ts b/src/app/views/create-loan/create-loan-card/create-loan-card.component.ts
index 914533423..f39bfa0d7 100644
--- a/src/app/views/create-loan/create-loan-card/create-loan-card.component.ts
+++ b/src/app/views/create-loan/create-loan-card/create-loan-card.component.ts
@@ -72,7 +72,7 @@ export class CreateLoanCardComponent implements OnInit, OnChanges {
   private loadDetail() {
     const loan: Loan = this.loan;
 
-    const amount = loan.currency.fromUnit(loan.amount);
+    const amount = this.currenciesService.getAmountFromDecimals(loan.amount, loan.currency.symbol);
     this.amount = amount ? Utils.formatAmount(amount) : null;
 
     if (loan.descriptor) {
@@ -184,7 +184,9 @@ export class CreateLoanCardComponent implements OnInit, OnChanges {
       }
 
       const time = pay * 15;
-      const amount = Utils.formatAmount(loan.currency.fromUnit(paymentAmount));
+      const amount = Utils.formatAmount(
+        this.currenciesService.getAmountFromDecimals(paymentAmount, loan.currency.symbol)
+      );
       const currency = loan.currency.toString();
       const payData = {
         pay: pay + payLabel,
diff --git a/src/app/views/loan-detail/detail-history/detail-history.component.ts b/src/app/views/loan-detail/detail-history/detail-history.component.ts
index 1d16f6885..e46f3bde4 100644
--- a/src/app/views/loan-detail/detail-history/detail-history.component.ts
+++ b/src/app/views/loan-detail/detail-history/detail-history.component.ts
@@ -4,6 +4,7 @@ import { timer } from 'rxjs';
 import * as moment from 'moment';
 import { ApiService } from 'app/services/api.service';
 import { ChainService } from 'app/services/chain.service';
+import { CurrenciesService } from 'app/services/currencies.service';
 import { FormatAmountPipe } from 'app/pipes/format-amount.pipe';
 import { Loan } from 'app/models/loan.model';
 import { Commit, CommitTypes, CommitProperties } from 'app/interfaces/commit.interface';
@@ -62,7 +63,8 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
     private dialog: MatDialog,
     private formatAmountPipe: FormatAmountPipe,
     private apiService: ApiService,
-    private chainService: ChainService
+    private chainService: ChainService,
+    private currenciesService: CurrenciesService
   ) { }
 
   async ngOnInit() {
@@ -177,7 +179,9 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
         handler: (commit: Commit) => {
           const { currency } = this.loan;
           const payedAmount = LoanUtils.getCommitPaidAmount(this.allCommits, commit.timestamp);
-          const amount = this.formatAmountPipe.transform(currency.fromUnit(payedAmount));
+          const amount = this.formatAmountPipe.transform(
+            this.currenciesService.getAmountFromDecimals(payedAmount, currency.symbol)
+          );
           return [{
             label: 'Date',
             value: moment(Number(commit.timestamp) * 1000).format('DD/MM/YYYY HH:mm')
diff --git a/src/app/views/loan-detail/loan-detail.component.ts b/src/app/views/loan-detail/loan-detail.component.ts
index 836f5ce7f..78a817a06 100644
--- a/src/app/views/loan-detail/loan-detail.component.ts
+++ b/src/app/views/loan-detail/loan-detail.component.ts
@@ -348,9 +348,15 @@ export class LoanDetailComponent implements OnInit, OnDestroy {
         }
 
         // Load status data
-        this.totalDebt = Utils.formatAmount(currency.fromUnit(this.loan.descriptor.totalObligation));
-        this.pendingAmount = Utils.formatAmount(currency.fromUnit(this.loan.debt.model.estimatedObligation));
-        this.paid = Utils.formatAmount(currency.fromUnit(this.loan.debt.model.paid));
+        this.totalDebt = Utils.formatAmount(
+          this.currenciesService.getAmountFromDecimals(this.loan.descriptor.totalObligation, currency.symbol)
+        );
+        this.pendingAmount = Utils.formatAmount(
+          this.currenciesService.getAmountFromDecimals(this.loan.debt.model.estimatedObligation, currency.symbol)
+        );
+        this.paid = Utils.formatAmount(
+          this.currenciesService.getAmountFromDecimals(this.loan.debt.model.paid, currency.symbol)
+        );
         break;
 
       default:
diff --git a/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.ts b/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.ts
index 8ea020b95..bd9f0a591 100644
--- a/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.ts
+++ b/src/app/views/loan-detail/loan-overview-panel/loan-overview-panel.component.ts
@@ -95,8 +95,8 @@ export class LoanOverviewPanelComponent implements OnInit, OnChanges {
     const { currency } = this.loan;
 
     // set amounts
-    this.amountBorrow = currency.fromUnit(amount);
-    this.amountRepay = currency.fromUnit(totalObligation);
+    this.amountBorrow = this.currenciesService.getAmountFromDecimals(amount, currency.symbol);
+    this.amountRepay = this.currenciesService.getAmountFromDecimals(totalObligation, currency.symbol);
 
     switch (this.loan.status) {
       case Status.Expired:

From de515b5d5214a4024a35c2f2c5ed177e404ed2c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Mon, 17 May 2021 18:22:41 -0300
Subject: [PATCH 58/66] fix withdraw button progressbar position

---
 src/app/shared/redeem-button/redeem-button.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/redeem-button/redeem-button.component.html b/src/app/shared/redeem-button/redeem-button.component.html
index 34c8378d9..06f8a5593 100644
--- a/src/app/shared/redeem-button/redeem-button.component.html
+++ b/src/app/shared/redeem-button/redeem-button.component.html
@@ -1,7 +1,7 @@
 <a
   mat-raised-button
   (click)='clickRedeem()'
-  class="button button-primary"
+  class="button button-primary button--progress"
   [ngClass]="className"
   [class.button-disabled]="disabled"
 >

From 1a1a399c29d91786bbeb50d369307131642568d6 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 17 May 2021 20:26:09 -0300
Subject: [PATCH 59/66] remove tooltip and add ToDo

---
 .../dashboard-list-item/dashboard-list-item.component.html  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index 002204a9d..b9d6fe278 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -39,9 +39,10 @@
       </div>
     </div>
 
+    <!-- TODO: check tooltip logic -->
+    <!-- [matTooltip]="'Effective rate: ' + anualRate" -->
     <div
       class="list__item__column"
-      [matTooltip]="'Effective rate: ' + anualRate"
     >
       <div class="row">
         <div class="list__item__column__title col-md-12 col-6 d-lg-none">
@@ -81,8 +82,9 @@
       </div>
 
       <div class="col-6">
+        <!-- TODO: check tooltip logic -->
+        <!-- [matTooltip]="'Accrued interest: ' + paymentProgress + ' ' + loan?.currency" -->
         <p
-          [matTooltip]="'Accrued interest: ' + paymentProgress"
           matTooltipPosition="below"
         >
           {{ paymentProgress }}

From b5731fe268aa107b820377c216234d63908f58b0 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 17 May 2021 22:41:57 -0300
Subject: [PATCH 60/66] resolve design issues

---
 .../dashboard-list-header.component.scss      |  5 ++--
 .../dashboard-list-item.component.html        | 23 ++++++++-----------
 .../dashboard-list-item.component.scss        |  3 ++-
 .../dashboard-list-item.component.ts          |  2 +-
 .../dashboard-list.component.scss             |  3 ++-
 .../views/dashboard/dashboard.component.scss  |  2 +-
 src/styles.scss                               |  3 +++
 7 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/app/shared/dashboard-list-header/dashboard-list-header.component.scss b/src/app/shared/dashboard-list-header/dashboard-list-header.component.scss
index 0ab95456c..82c7ea47b 100644
--- a/src/app/shared/dashboard-list-header/dashboard-list-header.component.scss
+++ b/src/app/shared/dashboard-list-header/dashboard-list-header.component.scss
@@ -8,7 +8,7 @@
       border-radius: 5px;
       padding: 13px 5px 15px;
       &__title {
-        @include styled-font('proxima-nova', 800, 14px);
+        @include styled-font('proxima-nova', 700, 14px);
         margin-bottom: 15px;
         text-transform: uppercase;
       }
@@ -16,7 +16,8 @@
         width: 20%;
         display: inline-block;
         color: #a09f9f;
-        @include styled-font('proxima-nova', 1000, 11px);
+        max-height: 15px;
+        @include styled-font('proxima-nova', 700, 11px);
       }
     }
   }
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index ff83e20cc..f048410f3 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -4,8 +4,8 @@
     'border-color': statusColor
   }"
 >
-  <a [routerLink]="['/loan', loan.id]">
-    <div class="list__item__title d-sm-none">
+  <a [routerLink]="[statusText === 'Collateral Pending' ? '/borrow' : '/loan', loan.id]">
+    <div class="list__item__title d-lg-none">
       <p
         [class.list__item__title--warning]="
           loan.status === 0 && !loan.collateral
@@ -19,7 +19,7 @@
 
     <div class="list__item__column">
       <div class="row">
-        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <div class="list__item__column__title col-md-12 col-6 d-lg-none">
           BORROWED
         </div>
         <div id="label-borrowed" class="col-md-12 col-6">
@@ -30,7 +30,7 @@
 
     <div class="list__item__column">
       <div class="row">
-        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <div class="list__item__column__title col-md-12 col-6 d-lg-none">
           REPAID
         </div>
         <div class="col-md-12 col-6">
@@ -45,7 +45,7 @@
       class="list__item__column"
     >
       <div class="row">
-        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <div class="list__item__column__title col-md-12 col-6 d-lg-none">
           ANNUAL RATE
         </div>
         <div class="col-md-12 col-6">
@@ -56,7 +56,7 @@
 
     <div class="list__item__column">
       <div class="row">
-        <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+        <div class="list__item__column__title col-md-12 col-6 d-lg-none">
           SCHEDULE PROGRESS
         </div>
         <div
@@ -77,7 +77,7 @@
 
   <div class="list__item__column list__item__column__payment">
     <div class="row">
-      <div class="list__item__column__title col-md-12 col-6 d-sm-none">
+      <div class="list__item__column__title col-md-12 col-6 d-lg-none">
         REPAYMENT PROGRESS
       </div>
 
@@ -85,6 +85,7 @@
         <!-- TODO: check tooltip logic -->
         <!-- [matTooltip]="'Accrued interest: ' + paymentProgress + ' ' + loan?.currency" -->
         <p
+          [matTooltip]="'Accrued interest: ' + paymentProgress"
           matTooltipPosition="below"
         >
           {{ paymentProgress }}
@@ -107,13 +108,7 @@
           <button *ngIf="canPay" (click)="openDialog('pay')" mat-menu-item>
             Pay
           </button>
-          <app-redeem-button
-            (startRedeem)="startRedeem()"
-            [loan]="loan"
-            *ngIf="canRedeem"
-            name="Withdraw Collateral"
-            className="dashboard"
-          >
+          <app-redeem-button [loan]="loan" *ngIf="canRedeem" name="Withdraw Collateral">
           </app-redeem-button>
           <button
             *ngIf="canAdjustCollateral"
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
index e48b93bc4..1ef03cad7 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.scss
@@ -70,8 +70,9 @@
         @include styled-font('Roboto', 400, 15px);
         display: inline-block;
         width: 20%;
-        margin-top: 22px;
+        padding-top: 22px;
         margin-bottom: 0;
+        height: 65px;
         &__progress {
           padding: 0 25px 4px 25px;
         }
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index a1a817787..6f9680b32 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -71,7 +71,7 @@ export class DashboardListItemComponent implements OnInit {
         } else {
           statusText = 'Collateral Pending';
           statusIcon = 'exclamation';
-          statusColor = '#A3A5A6';
+          statusColor = '#EAA219';
         }
         break;
       case Status.Ongoing:
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.scss b/src/app/shared/dashboard-list/dashboard-list.component.scss
index 6a39d322e..cf20fde98 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.scss
+++ b/src/app/shared/dashboard-list/dashboard-list.component.scss
@@ -12,7 +12,8 @@
     }
     &__item-container {
       overflow: scroll;
-      height: 405px;
+      overflow-x: hidden;
+      height: 375px;
     }
   }
 }
diff --git a/src/app/views/dashboard/dashboard.component.scss b/src/app/views/dashboard/dashboard.component.scss
index d4efb0e98..716bc2143 100644
--- a/src/app/views/dashboard/dashboard.component.scss
+++ b/src/app/views/dashboard/dashboard.component.scss
@@ -7,7 +7,7 @@
     margin-bottom: 16px;
   }
   &__link {
-    @include styled-font('proxima-nova', 800, 11px);
+    @include styled-font('proxima-nova', 700, 11px);
     color: #7684FF;
     text-align: right;
     margin-top: 8px;
diff --git a/src/styles.scss b/src/styles.scss
index cd7c413fa..1e0be8329 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -229,6 +229,9 @@ mat-tooltip-component {
   .fullyrepaid {
     background-color: #59B159;
   }
+  .collateralpending {
+    background-color: #EAA219;
+  }
 }
 
 // Tables

From c909f018e2810531638c4039f9b9c739a9082b0b Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Mon, 17 May 2021 22:52:53 -0300
Subject: [PATCH 61/66] fix unit testing

---
 .../dashboard-list-item/dashboard-list-item.component.spec.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
index b48380644..16ad36af6 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.spec.ts
@@ -82,7 +82,7 @@ describe('DashboardListItemComponent', () => {
   });
 
   it('should return correct color', () => {
-    expect(component.statusColor).toEqual('#A3A5A6');
+    expect(component.statusColor).toEqual('#EAA219');
   });
 
   it('should display borrowed label', () => {

From 677bd71ea7411d89c6cfa30084f66406e48ef5f0 Mon Sep 17 00:00:00 2001
From: Martin Bobbio <martinbobbio@MacBook-Pro-de-To.local>
Date: Tue, 18 May 2021 11:49:56 -0300
Subject: [PATCH 62/66] fix style of redeem button in dashboard and validation
 in startRedeem

---
 .../dashboard-list-item/dashboard-list-item.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index f048410f3..65297b2ed 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -108,7 +108,7 @@
           <button *ngIf="canPay" (click)="openDialog('pay')" mat-menu-item>
             Pay
           </button>
-          <app-redeem-button [loan]="loan" *ngIf="canRedeem" name="Withdraw Collateral">
+          <app-redeem-button [loan]="loan" *ngIf="canRedeem" name="Withdraw Collateral" className="dashboard" (startRedeem)="startRedeem()">
           </app-redeem-button>
           <button
             *ngIf="canAdjustCollateral"

From 5ffe1a5ff8471da72fc56a4887825953807e29e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Tue, 18 May 2021 12:21:22 -0300
Subject: [PATCH 63/66] update dashboard copy

---
 .../dashboard-list-header.component.html      |  4 ++--
 .../dashboard-list-header.component.ts        |  3 ++-
 .../dashboard-list-item.component.html        |  8 +++----
 .../dashboard-list-item.component.ts          | 24 ++++++++++++-------
 .../dashboard-list.component.html             |  2 ++
 .../dashboard-list.component.scss             |  3 ++-
 .../views/dashboard/dashboard.component.html  | 14 +++++++----
 .../views/dashboard/dashboard.component.scss  |  4 +++-
 8 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/app/shared/dashboard-list-header/dashboard-list-header.component.html b/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
index d11da90ca..329dcf65e 100644
--- a/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
+++ b/src/app/shared/dashboard-list-header/dashboard-list-header.component.html
@@ -3,8 +3,8 @@
     {{ name }}
   </p>
   <div class="list__header__table">
-    <p>Borrowed</p>
-    <p>Repaid</p>
+    <p>{{ isBorrowed ? 'Borrowed' : 'Lent' }}</p>
+    <p>{{ isBorrowed ? 'Repaid' : 'Interest' }}</p>
     <p>Annual Rate</p>
     <p>Schedule Progress</p>
     <p>Repayment Progress</p>
diff --git a/src/app/shared/dashboard-list-header/dashboard-list-header.component.ts b/src/app/shared/dashboard-list-header/dashboard-list-header.component.ts
index 9cd6d4d48..59ec3be16 100644
--- a/src/app/shared/dashboard-list-header/dashboard-list-header.component.ts
+++ b/src/app/shared/dashboard-list-header/dashboard-list-header.component.ts
@@ -6,8 +6,9 @@ import { Component, Input, OnInit } from '@angular/core';
   styleUrls: ['./dashboard-list-header.component.scss']
 })
 export class DashboardListHeaderComponent implements OnInit {
-
   @Input() name: string;
+  @Input() isBorrowed: boolean;
+  @Input() isLent: boolean;
 
   constructor() { }
 
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index ff83e20cc..fe52edebc 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -20,10 +20,10 @@
     <div class="list__item__column">
       <div class="row">
         <div class="list__item__column__title col-md-12 col-6 d-sm-none">
-          BORROWED
+          {{ isBorrowed ? 'BORROWED' : 'LENT' }}
         </div>
         <div id="label-borrowed" class="col-md-12 col-6">
-          {{ borrowed }}
+          {{ isBorrowed ? borrowed : lent }}
         </div>
       </div>
     </div>
@@ -31,10 +31,10 @@
     <div class="list__item__column">
       <div class="row">
         <div class="list__item__column__title col-md-12 col-6 d-sm-none">
-          REPAID
+          {{ isBorrowed ? 'REPAID' : 'INTEREST' }}
         </div>
         <div class="col-md-12 col-6">
-          {{ repaid }}
+          {{ isBorrowed ? repaid : interest }}
         </div>
       </div>
     </div>
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index a1a817787..6b690d762 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -19,9 +19,13 @@ export class DashboardListItemComponent implements OnInit {
   @Input() loan: Loan;
   @Input() showOptions: boolean;
   @Input() isCurrentLoans: boolean;
+  @Input() isBorrowed: boolean;
+  @Input() isLent: boolean;
 
   borrowed = '-';
+  lent = '-';
   repaid = '-';
+  interest = '-';
   anualRate = '-';
   paymentProgress = '-';
   timeProgress = '0%';
@@ -138,16 +142,18 @@ export class DashboardListItemComponent implements OnInit {
   private loadBasicData() {
     const { amount, currency, debt, descriptor, status } = this.loan;
 
-    const decimals = this.currenciesService.getCurrencyDecimals('symbol', currency.symbol);
-    this.borrowed =
-      Utils.formatAmount(amount / 10 ** decimals, 2) +
-      ' ' +
-      currency.symbol;
+    const formattedAmount = this.currenciesService.getAmountFromDecimals(amount, currency.symbol);
+    const borrowedAndLent = `${ Utils.formatAmount(formattedAmount) } ${ currency.symbol }`;
+    this.borrowed = borrowedAndLent;
+    this.lent = borrowedAndLent;
+
     if (status !== Status.Request && status !== Status.Expired) {
-      this.repaid =
-        Utils.formatAmount(debt.model.paid / 10 ** decimals, 2) +
-        ' ' +
-        currency.symbol;
+      const formattedRepaid = this.currenciesService.getAmountFromDecimals(debt.model.paid, currency.symbol);
+      this.repaid = `${ Utils.formatAmount(formattedRepaid) } ${ currency.symbol }`;
+
+      const interest = descriptor.totalObligation - amount;
+      const formattedInterest = this.currenciesService.getAmountFromDecimals(interest, currency.symbol);
+      this.interest = `${ Utils.formatAmount(formattedInterest) } ${ currency.symbol }`;
     }
     this.anualRate = descriptor.interestRate + '%';
   }
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.html b/src/app/shared/dashboard-list/dashboard-list.component.html
index d338cdd75..4fc0ce110 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.html
+++ b/src/app/shared/dashboard-list/dashboard-list.component.html
@@ -4,6 +4,8 @@
       <ng-container *ngFor="let loan of loans">
         <app-dashboard-list-item
           [isCurrentLoans]="isCurrentLoans"
+          [isBorrowed]="isBorrowed"
+          [isLent]="isLent"
           [showOptions]="showOptions"
           [loan]="loan"
         ></app-dashboard-list-item>
diff --git a/src/app/shared/dashboard-list/dashboard-list.component.scss b/src/app/shared/dashboard-list/dashboard-list.component.scss
index 6a39d322e..666df2348 100644
--- a/src/app/shared/dashboard-list/dashboard-list.component.scss
+++ b/src/app/shared/dashboard-list/dashboard-list.component.scss
@@ -11,7 +11,8 @@
       }
     }
     &__item-container {
-      overflow: scroll;
+      overflow-y: scroll;
+      overflow-x: hidden;
       height: 405px;
     }
   }
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index a9e4f40e8..f1f419e8e 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -38,21 +38,24 @@
             (click)="setCurrentLoans(false)"
             class="dashboard__link"
           >
-            INACTIVES LOANS <i class="fas fa-plus-circle"></i>
+            INACTIVE LOANS <i class="fas fa-plus-circle"></i>
           </p>
           <p
             *ngIf="!isCurrentLoans"
             (click)="setCurrentLoans(true)"
             class="dashboard__link"
           >
-            ACTIVES LOANS <i class="fas fa-plus-circle"></i>
+            ACTIVE LOANS <i class="fas fa-plus-circle"></i>
           </p>
         </div>
       </div>
       <div class="dashboard__content">
         <div class="row">
           <div *ngIf="!isMobile || isPageBorrow" class="col-md-6">
-            <app-dashboard-list-header name="Borrowed"></app-dashboard-list-header>
+            <app-dashboard-list-header
+              name="Borrowed"
+              [isBorrowed]="true"
+            ></app-dashboard-list-header>
             <virtual-scroller
               #scroll
               [items]="loansBorrowed"
@@ -70,7 +73,10 @@
             </virtual-scroller>
           </div>
           <div *ngIf="!isMobile || !isPageBorrow" class="col-md-6">
-            <app-dashboard-list-header name="Lent"></app-dashboard-list-header>
+            <app-dashboard-list-header
+              name="Lent"
+              [isLent]="true"
+            ></app-dashboard-list-header>
             <virtual-scroller
               #scroll
               [items]="loansLent"
diff --git a/src/app/views/dashboard/dashboard.component.scss b/src/app/views/dashboard/dashboard.component.scss
index d4efb0e98..e1b41dddb 100644
--- a/src/app/views/dashboard/dashboard.component.scss
+++ b/src/app/views/dashboard/dashboard.component.scss
@@ -30,8 +30,10 @@
   .dashboard {
     background-color: #212124;
     padding: 21px 25px;
+    margin-top: 0;
+    margin-bottom: 56px;
     height: 550px;
-    margin-top: 0px;
+    overflow: hidden;
     &__title {
       margin-bottom: 0px;
     }

From e56843cbfe27cc3ef8c4f6e27b321687a80eaa50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Tue, 18 May 2021 12:51:45 -0300
Subject: [PATCH 64/66] add dashboard tooltips

---
 .../dashboard-list-item.component.html          |  9 +++------
 .../dashboard-list-item.component.ts            | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
index b37e82255..7acb4ee17 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.html
@@ -39,10 +39,9 @@
       </div>
     </div>
 
-    <!-- TODO: check tooltip logic -->
-    <!-- [matTooltip]="'Effective rate: ' + anualRate" -->
     <div
       class="list__item__column"
+      [matTooltip]="'Effective rate: ' + anualRate"
     >
       <div class="row">
         <div class="list__item__column__title col-md-12 col-6 d-lg-none">
@@ -63,7 +62,7 @@
           class="list__item__column__progress col-md-12 col-6"
           [matTooltip]="
             scheduleTooltip && installmentTooltip
-              ? scheduleTooltip + ' ' + installmentTooltip
+              ? scheduleTooltip + '. ' + installmentTooltip
               : ''
           "
           matTooltipPosition="below"
@@ -82,10 +81,8 @@
       </div>
 
       <div class="col-6">
-        <!-- TODO: check tooltip logic -->
-        <!-- [matTooltip]="'Accrued interest: ' + paymentProgress + ' ' + loan?.currency" -->
         <p
-          [matTooltip]="'Accrued interest: ' + paymentProgress"
+          [matTooltip]="'Accrued interest: ' + accruedInterest"
           matTooltipPosition="below"
         >
           {{ paymentProgress }}
diff --git a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
index 1bd50450b..efa09efed 100644
--- a/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
+++ b/src/app/shared/dashboard-list-item/dashboard-list-item.component.ts
@@ -28,6 +28,7 @@ export class DashboardListItemComponent implements OnInit {
   interest = '-';
   anualRate = '-';
   paymentProgress = '-';
+  accruedInterest = '-';
   timeProgress = '0%';
   scheduleTooltip: string;
   installmentTooltip: string;
@@ -50,6 +51,7 @@ export class DashboardListItemComponent implements OnInit {
   ngOnInit() {
     this.loadBasicData();
     this.loadPaymentProgress();
+    this.loadAccruedInterest();
     this.loadTimeProgress();
     this.loadDuration();
     this.loadInstallments();
@@ -153,7 +155,7 @@ export class DashboardListItemComponent implements OnInit {
 
       const interest = descriptor.totalObligation - amount;
       const formattedInterest = this.currenciesService.getAmountFromDecimals(interest, currency.symbol);
-      this.interest = `${ Utils.formatAmount(formattedInterest) } ${ currency.symbol }`;
+      this.interest = `${ Utils.formatAmount(formattedInterest, 4) } ${ currency.symbol }`;
     }
     this.anualRate = descriptor.interestRate + '%';
   }
@@ -178,6 +180,19 @@ export class DashboardListItemComponent implements OnInit {
     }
   }
 
+  private loadAccruedInterest() {
+    const { paymentProgress, interest } = this;
+    const { debt, currency } = this.loan;
+    const interestAmount = String(interest).split(' ')[0];
+    const paymentAverage = String(paymentProgress).split('%')[0];
+
+    if (paymentAverage && interestAmount && debt) {
+      const accruedInterest = (Number(paymentAverage) * Number(interestAmount)) / 100;
+      const formattedAccruedInterest = Utils.formatAmount(accruedInterest, 2);
+      this.accruedInterest = `${ formattedAccruedInterest } ${ currency.symbol }`;
+    }
+  }
+
   /**
    * Load loan's time progress
    */

From 172c5d61ec93036faaa9d9694b0b95db8d60f12f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Tue, 18 May 2021 12:58:55 -0300
Subject: [PATCH 65/66] adjust redeem collateral notification ui

---
 .../core/header/notifications/notifications.component.ts  | 8 ++++++++
 src/app/services/tx.service.ts                            | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/core/header/notifications/notifications.component.ts b/src/app/core/header/notifications/notifications.component.ts
index 38e4bdcf0..8070587d6 100644
--- a/src/app/core/header/notifications/notifications.component.ts
+++ b/src/app/core/header/notifications/notifications.component.ts
@@ -161,6 +161,9 @@ export class NotificationsComponent implements OnInit {
       case 'withdrawCollateral':
         message = `Withdrawing the ${ tx.data.collateralId } collateral`;
         break;
+      case 'redeemCollateral':
+        message = `Withdrawing the ${ tx.data.id } collateral`;
+        break;
       default:
         break;
     }
@@ -204,6 +207,7 @@ export class NotificationsComponent implements OnInit {
         return 'Deposited';
 
       case 'withdrawCollateral':
+      case 'redeemCollateral':
         return 'Withdrawn';
 
       default:
@@ -264,6 +268,9 @@ export class NotificationsComponent implements OnInit {
       case 'withdrawCollateral':
         message = `You've withdrawn the ${ tx.data.collateralId } collateral`;
         break;
+      case 'redeemCollateral':
+        message = `You've withdrawn the ${ tx.data.id } collateral`;
+        break;
       default:
         break;
     }
@@ -324,6 +331,7 @@ export class NotificationsComponent implements OnInit {
         txObject = new TxObject(id, 'Depositing', message, 'material-icons', 'add', '', 'violet');
         break;
       case 'withdrawCollateral':
+      case 'redeemCollateral':
         txObject = new TxObject(id, 'Withdrawing', message, 'material-icons', 'remove_circle_outline', '', 'violet');
         break;
       default:
diff --git a/src/app/services/tx.service.ts b/src/app/services/tx.service.ts
index a64af51a1..cbd92cd82 100644
--- a/src/app/services/tx.service.ts
+++ b/src/app/services/tx.service.ts
@@ -244,9 +244,9 @@ export class TxService {
   }
 
   registerRedeemCollateralTx(tx: string, loan: Loan) {
-    const { engine } = loan;
+    const { address } = loan;
     const { id } = loan.collateral;
-    const data = { engine, id };
+    const data = { engine: address, id };
     this.registerTx(new Tx(tx, data.engine, false, Type.redeemCollateral, data));
   }
 

From dfb96737c66bf2c09e313b4d81fc3cbdc5a63a8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Acosta?= <nadesarrolloweb@gmail.com>
Date: Tue, 18 May 2021 14:49:41 -0300
Subject: [PATCH 66/66] optimize loan-history code

---
 .../detail-history.component.ts               | 29 +++++++------------
 1 file changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/app/views/loan-detail/detail-history/detail-history.component.ts b/src/app/views/loan-detail/detail-history/detail-history.component.ts
index e46f3bde4..4234a88f0 100644
--- a/src/app/views/loan-detail/detail-history/detail-history.component.ts
+++ b/src/app/views/loan-detail/detail-history/detail-history.component.ts
@@ -73,7 +73,6 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
 
     this.loadCommitsProperties();
     await this.loadCommits();
-    await this.completeCommitProperties();
   }
 
   ngOnChanges() {
@@ -266,7 +265,7 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
     // prepare history
     const historyItems: {
       commitProperties: object,
-      commits: Commit[]
+      commits: CommitWithProperties[]
     }[] = [];
     Object.keys(commitsByType).map((opcode: CommitTypes, index: number) => {
       commitsByType[opcode].map((commitIndex) => {
@@ -297,6 +296,16 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
           }
         });
 
+    // complete commits properties
+    historyItems.map((historyItem) => {
+      historyItem.commits.map((commit) => {
+        const properties = (historyItem.commitProperties as any).handler(commit);
+        commit.properties = properties;
+        return commit;
+      });
+      return historyItem;
+    });
+
     this.historyItems = historyItems;
   }
 
@@ -347,20 +356,4 @@ export class DetailHistoryComponent implements OnInit, OnChanges {
       return commit;
     });
   }
-
-  /**
-   * Load properties for each commit
-   */
-  private async completeCommitProperties() {
-    const { historyItems } = this;
-
-    this.historyItems = historyItems.map((historyItem) => {
-      historyItem.commits.map((commit) => {
-        const properties = (historyItem.commitProperties as any).handler(commit);
-        commit.properties = properties;
-        return commit;
-      });
-      return historyItem;
-    });
-  }
 }