From 91b60460acf9926bc758111f6e6feaaae7c40faa Mon Sep 17 00:00:00 2001
From: JDonadio <tanojaja@gmail.com>
Date: Mon, 6 Nov 2017 17:13:55 -0300
Subject: [PATCH] add history list

---
 src/assets/img/tx-action/icon-moved.svg      | 21 +++++++++++++
 src/assets/img/tx-action/icon-received.svg   | 15 ++++++++++
 src/assets/img/tx-action/icon-sent.svg       | 20 +++++++++++++
 src/pages/wallet-details/wallet-details.html | 19 +++++++++---
 src/pages/wallet-details/wallet-details.scss | 31 ++++++++++++++------
 src/pages/wallet-details/wallet-details.ts   |  7 +++--
 6 files changed, 98 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/img/tx-action/icon-moved.svg
 create mode 100644 src/assets/img/tx-action/icon-received.svg
 create mode 100644 src/assets/img/tx-action/icon-sent.svg

diff --git a/src/assets/img/tx-action/icon-moved.svg b/src/assets/img/tx-action/icon-moved.svg
new file mode 100644
index 000000000..1f15f2d7e
--- /dev/null
+++ b/src/assets/img/tx-action/icon-moved.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icons/Transaction/Send" transform="translate(-6.000000, -6.000000)">
+            <g id="Group-2" transform="translate(24.500000, 24.500000) rotate(90.000000) translate(-24.500000, -24.500000) translate(7.000000, 7.000000)">
+                <g id="Icons/Send">
+                    <g id="icons/received">
+                        <g id="Received" transform="translate(17.244258, 17.883990) scale(-1, 1) translate(-17.244258, -17.883990) translate(0.244258, 0.883990)">
+                            <path d="M17.3272285,33.991292 C26.4399269,33.991292 33.8272285,26.6039904 33.8272285,17.491292 C33.8272285,8.37859367 26.4399269,0.991292046 17.3272285,0.991292046 C8.21453012,0.991292046 0.82722849,8.37859367 0.82722849,17.491292 C0.82722849,26.6039904 8.21453012,33.991292 17.3272285,33.991292 Z" id="Oval-204" stroke="#BDBDBD" opacity="0.8"></path>
+                            <path d="M11.0503675,17.6759465 L24.0056239,17.6759465 M15.816934,23.6130491 L10,17.7604241 L15.614688,12" id="Line" stroke="#BEBEBE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(17.002812, 17.806525) scale(1, -1) rotate(-90.000000) translate(-17.002812, -17.806525) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/tx-action/icon-received.svg b/src/assets/img/tx-action/icon-received.svg
new file mode 100644
index 000000000..c23a2111d
--- /dev/null
+++ b/src/assets/img/tx-action/icon-received.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0EC286;}
+</style>
+<g>
+	<path class="st0" d="M17.5,34.5c-9.4,0-17-7.6-17-17s7.6-17,17-17s17,7.6,17,17S26.9,34.5,17.5,34.5z M17.5,1.5
+		c-8.8,0-16,7.2-16,16s7.2,16,16,16s16-7.2,16-16S26.3,1.5,17.5,1.5z"/>
+</g>
+<path class="st0" d="M23.8,18.2c-0.3-0.3-0.8-0.3-1.1,0l-4.7,4.6V10.5c0-0.4-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8v12.1l-4.4-4.3
+	c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l5.8,5.6c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l5.9-5.8
+	C24.1,18.9,24.1,18.5,23.8,18.2z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/img/tx-action/icon-sent.svg b/src/assets/img/tx-action/icon-sent.svg
new file mode 100644
index 000000000..9da8ad2ba
--- /dev/null
+++ b/src/assets/img/tx-action/icon-sent.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icons/Transaction/Send" transform="translate(-6.000000, -8.000000)">
+            <g id="Group-2" transform="translate(7.000000, 7.000000)">
+                <g id="Icons/Send">
+                    <g id="icons/received">
+                        <g id="Received" transform="translate(17.244258, 17.883990) scale(-1, 1) translate(-17.244258, -17.883990) translate(0.244258, 0.883990)">
+                            <path d="M17.3272285,33.991292 C26.4399269,33.991292 33.8272285,26.6039904 33.8272285,17.491292 C33.8272285,8.37859367 26.4399269,0.991292046 17.3272285,0.991292046 C8.21453012,0.991292046 0.82722849,8.37859367 0.82722849,17.491292 C0.82722849,26.6039904 8.21453012,33.991292 17.3272285,33.991292 Z" id="Oval-204" stroke="#BDBDBD" opacity="0.8"></path>
+                            <path d="M11.0503675,17.6759465 L24.0056239,17.6759465 M15.816934,23.6130491 L10,17.7604241 L15.614688,12" id="Line" stroke="#BEBEBE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(17.002812, 17.806525) scale(1, -1) rotate(-90.000000) translate(-17.002812, -17.806525) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
diff --git a/src/pages/wallet-details/wallet-details.html b/src/pages/wallet-details/wallet-details.html
index 70b981c2c..ab9623ea8 100644
--- a/src/pages/wallet-details/wallet-details.html
+++ b/src/pages/wallet-details/wallet-details.html
@@ -9,8 +9,19 @@
     <div class="balance-str">{{wallet.status.availableBalanceStr}}</div>
     <div class="balance-alt-str">{{alternativeBalanceStr}}</div>
   </div>
-  
-  <div class="history">
-    
-  </div>
+
+  <ion-list>
+    <button ion-item *ngFor="let tx of wallet.completeHistory" (click)="goToTxDetails(tx.txid)">
+      <ion-icon item-start>
+        <img src="assets/img/tx-action/icon-received.svg" *ngIf="tx.action == 'received'" width="40">
+        <img src="assets/img/tx-action/icon-sent.svg" *ngIf="tx.action == 'sent'" width="40">
+        <img src="assets/img/tx-action/icon-moved.svg" *ngIf="tx.action == 'moved'" width="40">
+      </ion-icon>
+      <div class="action">{{tx.action}}</div>
+      <div class="detail">
+        <div class="amount">{{tx.amount}}</div>
+        <div class="date">{{tx.time * 1000 | amTimeAgo}}</div>
+      </div>
+    </button>
+  </ion-list>
 </ion-content>
\ No newline at end of file
diff --git a/src/pages/wallet-details/wallet-details.scss b/src/pages/wallet-details/wallet-details.scss
index 2cd1e9e68..b9baf404c 100644
--- a/src/pages/wallet-details/wallet-details.scss
+++ b/src/pages/wallet-details/wallet-details.scss
@@ -3,34 +3,47 @@ page-wallet-details {
     color: color($colors, light);
     background-color: color($colors, primary);
   }
-  
   .toolbar {
     background: transparent;
   }
-  
   .bar-button {
     color: color($colors, light);
   }
-  
   .toolbar-title {
     color: color($colors, light);
   }
-  
   .balance-header {
     color: color($colors, light);
     background-color: color($colors, primary);
-    height: 25%;
+    height: 22%;
     text-align: center;
   }
-
   .balance-str {
    padding-top: 10%;
-    font-size: 30px;
+    font-size: 35px;
     font-weight: 600;
   }
-
   .balance-alt-str {
-    font-size: 20px;
+    font-size: 25px;
     font-weight: 500;
   }
+  .label {
+    display: -webkit-inline-box !important;
+  }
+  .action {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .detail {
+    position: absolute;
+    right: 40px;
+    .amount {
+      color: color($colors, primary);
+      font-size: 16px;
+    }
+    .date {
+      font-size: 12.5px;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/pages/wallet-details/wallet-details.ts b/src/pages/wallet-details/wallet-details.ts
index 9838750fe..987513be9 100644
--- a/src/pages/wallet-details/wallet-details.ts
+++ b/src/pages/wallet-details/wallet-details.ts
@@ -23,14 +23,17 @@ export class WalletDetailsPage {
       return;
     };
     
-    console.log('Wallet:', this.wallet);
     this.getTxHistory();
   }
 
+  goToTxDetails(txid: string) {
+    return;
+  }
+
   getTxHistory(force?: boolean) {
     this.walletProvider.getTxHistory_(this.wallet, {force: force}).then((txh) => {
       this.wallet.completeHistory = txh;
-      this.alternativeBalanceStr = this.wallet.status.totalBalanceAlternative + ' USD'; //TODO use tx-format provider
+      this.alternativeBalanceStr = this.wallet.status.totalBalanceAlternative || '0.00' + ' USD'; //TODO use tx-format provider
     }).catch((err) => {
       console.log(err);
     });