From dae55abceb63a8bab8081eb367af6e452c34d646 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriel=20Baz=C3=A1n?= <gabrielbazan7@hotmail.com>
Date: Tue, 17 May 2016 11:10:16 -0300
Subject: [PATCH] ion refresher, ion infinite scroll and balance collapse

---
 public/views/backup.html                    |  20 +-
 public/views/includes/menu.html             |   4 +-
 public/views/includes/walletInfo.html       |   1 +
 public/views/modals/searchTransactions.html |   6 +-
 public/views/walletHome.html                | 331 ++++++++++----------
 src/css/ionic-migration.css                 |   1 -
 src/js/controllers/index.js                 |   4 +-
 src/js/controllers/walletHome.js            |   9 +-
 src/sass/main.scss                          |  28 +-
 9 files changed, 215 insertions(+), 189 deletions(-)

diff --git a/public/views/backup.html b/public/views/backup.html
index e7990c779..56d963203 100644
--- a/public/views/backup.html
+++ b/public/views/backup.html
@@ -19,7 +19,7 @@
     </section>
   </nav>
 
-  <div class="content preferences">
+  <div class="content preferences text-center">
     <div class="box-notification" ng-show="wordsC.error">
       <span class="text-warning">
         {{wordsC.error|translate}}
@@ -37,21 +37,21 @@
           <span translate>
             To restore this {{index.m}}-{{index.n}} <b>shared</b> wallet you will need
           </span>:
-          <ol class="m10t columns size-14 text-gray">
-            <li translate>Your wallet recovery phrase and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</li>
-            <li translate><b>OR</b> the wallet recovery phrase of <b>all</b> copayers in the wallet</li>
-            <li translate><b>OR</b> 1 wallet export file and the remaining quorum of wallet recovery phrases (e.g. in a 3-5 wallet: 1 wallet export file + 2 wallet recovery phrases of any of the other copayers).</li>
-          </ol>
+          <div class="m10t columns size-14 text-gray">
+            <span translate>Your wallet recovery phrase and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</span>
+            <span translate><b>OR</b> the wallet recovery phrase of <b>all</b> copayers in the wallet</span>
+            <span translate><b>OR</b> 1 wallet export file and the remaining quorum of wallet recovery phrases (e.g. in a 3-5 wallet: 1 wallet export file + 2 wallet recovery phrases of any of the other copayers).</span>
+          </div>
           </span>
         </div>
         <div class="size-14 text-gray columns" ng-show="(index.n>1 && index.m == index.n )">
           <span translate>
             To restore this {{index.m}}-{{index.n}} <b>shared</b> wallet you will need
           </span>:
-          <ol class="m10t columns size-14 text-gray">
-            <li translate>Your wallet recovery phrase and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</li>
-            <li translate><b>OR</b> the wallet recovery phrases of <b>all</b> copayers in the wallet</li>
-          </ol>
+          <div class="m10t columns size-14 text-gray">
+            <span translate>Your wallet recovery phrase and access to the server that coordinated the initial wallet creation. You still need {{index.m}} keys to spend.</span>
+            <span translate><b>OR</b> the wallet recovery phrases of <b>all</b> copayers in the wallet</span>
+          </div>
           </span>
         </div>
       </div>
diff --git a/public/views/includes/menu.html b/public/views/includes/menu.html
index 7d89c9e9f..c13a44156 100644
--- a/public/views/includes/menu.html
+++ b/public/views/includes/menu.html
@@ -1,6 +1,6 @@
-<div class="bottom-bar row collapse" ng-show="!index.notAuthorized">
+<div class="bottom-bar row collapse p0i" ng-show="!index.notAuthorized">
     <div>
-        <div class="row collapse">
+        <div class="row collapse p0i">
             <div class="medium-4 small-4 columns text-center bottombar-item"
                  ng-repeat="item in index.menu">
               <span ng-include="'views/includes/menu-item.html'"></span>
diff --git a/public/views/includes/walletInfo.html b/public/views/includes/walletInfo.html
index 81723c551..5802627e2 100644
--- a/public/views/includes/walletInfo.html
+++ b/public/views/includes/walletInfo.html
@@ -18,3 +18,4 @@ src="img/icon-ledger-white.svg">
 <img style="height:0.6em"  class="animated flash infinite" ng-show="index.loadingWallet ||
 index.updatingTxHistory" src="img/icon-sync-white.svg">
 
+<span class="size-12">{{index.txHistory.length + '/' + index.completeHistory.length}}</span>
diff --git a/public/views/modals/searchTransactions.html b/public/views/modals/searchTransactions.html
index e7e5ef22c..f9e2b23a0 100644
--- a/public/views/modals/searchTransactions.html
+++ b/public/views/modals/searchTransactions.html
@@ -1,9 +1,9 @@
 <ion-modal-view>
-  <ion-header-bar>
-    <h1 class="title" translate>Search Transactions</h1>
+  <ion-header-bar align-title="center" class="bar-stable">
     <a class="m5t" ng-click="modal.hide(); index.cancelSearch()">
       <span class="text-close">{{'Close'|translate}}</span>
     </a>
+    <h1 class="title" translate>Search Transactions</h1>
   </ion-header-bar>
 
   <ion-content>
@@ -65,4 +65,4 @@
       </div>
     </div>
   </ion-content>
-</ion-modal-view>
\ No newline at end of file
+</ion-modal-view>
diff --git a/public/views/walletHome.html b/public/views/walletHome.html
index d3447c9ea..67f40faf4 100644
--- a/public/views/walletHome.html
+++ b/public/views/walletHome.html
@@ -71,9 +71,14 @@
 
     -->
 
-    <div id="walletHome" class="walletHome tab-view tab-in">
-      <div class="oh pr" ng-show="!index.isSearching">
-        <div class="amount" ng-style="{'background-color':index.backgroundColor}">
+    <ion-content id="walletHome" class="walletHome tab-view tab-in" scroll="false">
+      <ion-content>
+        <ion-refresher
+         pulling-icon="ion-ios-refresh"
+         on-refresh="index.updateAll({triggerTxUpdate: true})">
+       </ion-refresher>
+       <div class="oh pr">
+        <div ng-style="{'background-color':index.backgroundColor}" ng-class="{amount: !shouldCollapse, amountcollapsed: shouldCollapse}">
           <div ng-if="!index.anyOnGoingProcess && !index.notAuthorized">
             <div class="m15t" ng-show="index.updateError" ng-click='index.updateAll({triggerTxUpdate: true})'>
               <span class="size-12 db m10b">{{index.updateError|translate}}</span>
@@ -86,11 +91,9 @@
             </div>
 
             <div ng-click='index.updateAll({triggerTxUpdate: true})'  ng-show="!index.updateError && index.walletScanStatus != 'error' && !index.shouldHideBalance" on-hold="index.onHold()">
-              <strong class="size-36">{{index.totalBalanceStr}}</strong>
-              <div class="size-14"
-                ng-if="index.totalBalanceAlternative">
-                {{index.totalBalanceAlternative}} {{index.alternativeIsoCode}}
-              </div>
+              <strong class="size-36" ng-if="!shouldCollapse">{{index.totalBalanceStr}}</strong>
+              <strong class="size-24" ng-if="shouldCollapse">{{index.totalBalanceStr}}</strong>
+              <div class="size-14" ng-if="index.totalBalanceAlternative && !shouldCollapse">{{index.totalBalanceAlternative}} {{index.alternativeIsoCode}}</div>
               <div class="size-14"
                 ng-if="index.pendingAmount">
                 <span translate>Pending Confirmation</span>:
@@ -100,7 +103,7 @@
             </div>
             <div ng-show="index.shouldHideBalance" on-hold="index.onHold()">
                 <strong class="size-24" translate>[Balance Hidden]</strong>
-                <div class="size-14" transalate>
+                <div class="size-14" ng-if="!shouldCollapse" transalate>
                   Tap and hold to show
                 </div>
             </div>
@@ -113,190 +116,182 @@
           </div>
         </div> <!-- amount -->
 
-        <div class="wallet-info">
+        <div ng-class="{walletinfo: !shouldCollapse, walletinfocollapsed: shouldCollapse}">
           <span ng-include="'views/includes/walletInfo.html'"></span>
         </div>
-        <div class="camera-icon" ng-show="index.isComplete">
+        <div class="camera-icon" ng-show="index.isComplete" ng-if="!shouldCollapse">
           <qr-scanner on-scan="home.onQrCodeScanned(data)"></qr-scanner>
         </div>
       </div> <!-- oh -->
+      </ion-content>
 
-      <div class="oh pr m20t" ng-show="index.incorrectDerivation">
-        <div class="text-center text-warning">
-          <i class="fi-alert"></i>
-          <span translate>
-            WARNING: Key derivation is not working on this device/wallet. Actions cannot be performed on this wallet.
-          </span>
-        </div>
- 
-      </div>
+      <ion-content overflow-scroll="true" ng-class="{m150t: !shouldCollapse, m50t: shouldCollapse}" delegate-handle="transactions" on-scroll="getScrollPosition()">
+        <div class="m50b">
+          <div class="oh pr m20t" ng-show="index.incorrectDerivation">
+            <div class="text-center text-warning">
+              <i class="fi-alert"></i>
+              <span translate>
+                WARNING: Key derivation is not working on this device/wallet. Actions cannot be performed on this wallet.
+              </span>
+            </div>
+          </div>
+          <div class="oh pr m20t" ng-show="index.notAuthorized && !index.anyOnGoingProcess">
+            <div class="text-center text-warning">
+              <i class="fi-alert"></i>
+              <span translate>
+                WARNING: Wallet not registered
+              </span>
+            </div>
+            <div class="text-center text-gray m15r m15l" translate>
+              This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.
+            </div>
+            <div class="text-center m10t ">
+              <span class="button outline round dark-gray tiny"
+                ng-click="index.recreate()">
+                <span translate>Recreate</span>
+              </span>
+            </div>
+          </div>
 
-      <div class="oh pr m20t" ng-show="index.notAuthorized && ! index.anyOnGoingProcess">
-        <div class="text-center text-warning">
-          <i class="fi-alert"></i>
-          <span translate>
-            WARNING: Wallet not registered
-          </span>
-        </div>
-        <div class="text-center text-gray m15r m15l" translate>
-          This wallet is not registered at the given Bitcore Wallet Service (BWS). You can recreate it from the local information.
-        </div>
-        <div class="text-center m10t ">
-          <span class="button outline round dark-gray tiny"
-            ng-click="index.recreate()">
-            <span translate>Recreate</span>
-          </span>
-        </div>
-      </div>
+          <div class="release size-12" ng-show="newRelease" ng-click="$root.openExternalLink('https://github.com/bitpay/copay/releases/latest')">
+            <span>{{newRelease}}</span><i class="icon-arrow-right3 right size-18"></i>
+          </div>
 
-      <div class="release size-12" ng-show="newRelease && !index.isSearching" ng-click="$root.openExternalLink('https://github.com/bitpay/copay/releases/latest')">
-        <span>{{newRelease}}</span><i class="icon-arrow-right3 right size-18"></i>
-      </div>
-
-      <div class="oh pr" ng-if="index.txps[0]" ng-show="!index.isSearching">
-        <h4 ng-show="index.requiresMultipleSignatures" class="title m0" translate>Payment Proposals</h4>
-        <h4 ng-show="!index.requiresMultipleSignatures" class="title m0" translate>Unsent transactions</h4>
-        <div class="last-transactions pr" ng-repeat="tx in index.txps">
-          <div ng-include="index.txTemplateUrl"></div>
-        </div>
-
-        <div class="text-gray text-center size-12 p10t"
-          ng-show="index.lockedBalanceSat">
-          <span translate>Total Locked Balance</span>:
-          <b>{{index.lockedBalanceStr}} </b>
-          <span> {{index.lockedBalanceAlternative}}
-            {{index.alternativeIsoCode}} </span>
-        </div>
-      </div>
-
-      <!-- Activity -->
-
-      <div
-          class="oh pr m20t text-gray size-12 text-center"
-          ng-show="!index.loadingWallet && !index.txHistory[0] && !index.updatingTxHistory && !index.txHistoryError && !index.updateError" translate>
-        No transactions yet
-      </div>
-
-      <div class="oh pr" ng-show="index.txHistory[0] || index.txProgress > 5">
-        <h4 class="title" ng-click="index.startSearch(); openModal()">
-          <span translate>Activity</span>
-          <i class="dib m5l size-16 pointer fi-magnifying-glass"></i>
-        </h4>
-
-        <div ng-show="index.updatingTxHistory && index.txProgress > 5">
-          <div  class="row p20 text-center">
-            <div class="columns large-12 medium-12 small-12 m10b">
-              <div class="spinner">
-                <div class="rect1"></div>
-                <div class="rect2"></div>
-                <div class="rect3"></div>
-                <div class="rect4"></div>
-                <div class="rect5"></div>
+          <div class="oh pr" ng-if="index.txps[0]">
+            <h4 ng-show="index.requiresMultipleSignatures" class="title m0" translate>Payment Proposals</h4>
+            <h4 ng-show="!index.requiresMultipleSignatures" class="title m0" translate>Unsent transactions</h4>
+            <div ng-repeat="tx in index.txps">
+              <div ng-include="index.txTemplateUrl">
               </div>
             </div>
-            <div class="size-12 text-gray m20t">
-              <div translate>{{index.txProgress}} transactions downloaded</div>
-              <div translate>Updating transaction history. Please stand by.</div>
+
+            <div class="text-gray text-center size-12 p10t"
+              ng-show="index.lockedBalanceSat">
+              <span translate>Total Locked Balance</span>:
+              <b>{{index.lockedBalanceStr}} </b>
+              <span> {{index.lockedBalanceAlternative}}
+                {{index.alternativeIsoCode}} </span>
             </div>
           </div>
-        </div>
 
-        <div ng-if="index.txHistory[0] && index.updatingTxHistory && index.newTx" class="row collapse last-transactions-content animated fadeInDown">
-          <div class="large-6 medium-6 small-6 columns size-14">
-            <div class="m10r left">
-              <img src="img/icon-new.svg" width="40">
-            </div>
-            <div class="m10t" style="background:#eee; width: 8em; margin-left: 52px; line-height:0.6em">
-              <span>&nbsp;</span>
-            </div>
-            <div style="margin-top:5px; background:#eee; width: 6em; margin-left: 52px; line-height:0.6em">
-              <span>&nbsp;</span>
-            </div>
+      <!-- Activity -->
+          <h4 class="title"  ng-click="index.startSearch(); openModal()">
+            <span translate>Activity</span>
+            <i class="dib m5l size-16 pointer fi-magnifying-glass"></i>
+          </h4>
+
+          <div
+              class="oh pr m20t text-gray size-12 text-center"
+              ng-show="!index.loadingWallet && !index.txHistory[0] && !index.updatingTxHistory && !index.txHistoryError && !index.updateError" translate>
+            No transactions yet
           </div>
-        </div>
 
-        <div class="row"></div>
+          <div class="oh pr" ng-show="index.txHistory[0] || index.txProgress > 5">
 
-        <div ng-repeat="btx in index.txHistory track by btx.txid"
-          ng-click="home.openTxModal(btx)"
-          class="row collapse last-transactions-content">
-          <div class="large-6 medium-6 small-6 columns size-14">
-            <div class="m10r left">
-              <img src="img/icon-receive-history.svg" alt="sync" width="40" ng-show="btx.action == 'received'">
-              <img src="img/icon-sent-history.svg" alt="sync" width="40" ng-show="btx.action == 'sent'">
-              <img src="img/icon-moved.svg" alt="sync" width="40" ng-show="btx.action == 'moved'">
+            <div ng-show="index.updatingTxHistory && index.txProgress > 5">
+              <div  class="row p20 text-center">
+                <div class="columns large-12 medium-12 small-12 m10b">
+                  <div class="spinner">
+                    <div class="rect1"></div>
+                    <div class="rect2"></div>
+                    <div class="rect3"></div>
+                    <div class="rect4"></div>
+                    <div class="rect5"></div>
+                  </div>
+                </div>
+                <div class="size-12 text-gray m20t">
+                  <div translate>{{index.txProgress}} transactions downloaded</div>
+                  <div translate>Updating transaction history. Please stand by.</div>
+                </div>
+              </div>
             </div>
-            <div class="m10t">
-              <span ng-show="btx.action == 'received'" translate>Received</span>
-              <span ng-show="btx.action == 'sent'">
-                {{index.addressbook[btx.addressTo]}}
-                <span ng-show="!index.addressbook[btx.addressTo] && btx.message">
-                  <span class="ellipsis">{{btx.message}}</span>
+
+            <div ng-if="index.txHistory[0] &&  index.updatingTxHistory && index.newTx" class="row collapse last-transactions-content animated fadeInDown">
+              <div class="large-6 medium-6 small-6 columns size-14">
+                <div class="m10r left">
+                  <img src="img/icon-new.svg" width="40">
+                </div>
+                <div class="m10t" style="background:#eee; width: 8em; margin-left: 52px; line-height:0.6em">
+                  <span>&nbsp;</span>
+                </div>
+                <div style="margin-top:5px; background:#eee; width: 6em; margin-left: 52px; line-height:0.6em">
+                  <span>&nbsp;</span>
+                </div>
+              </div>
+            </div>
+
+            <div ng-repeat="btx in index.txHistory track by btx.txid"
+              ng-click="home.openTxModal(btx)"
+              class="row collapse last-transactions-content">
+              <div class="large-6 medium-6 small-6 columns size-14">
+                <div class="m10r left">
+                  <img src="img/icon-receive-history.svg" alt="sync" width="40" ng-show="btx.action == 'received'">
+                  <img src="img/icon-sent-history.svg" alt="sync" width="40" ng-show="btx.action == 'sent'">
+                  <img src="img/icon-moved.svg" alt="sync" width="40" ng-show="btx.action == 'moved'">
+                </div>
+                <div class="m10t">
+                  <span ng-show="btx.action == 'received'" translate>Received</span>
+                  <span ng-show="btx.action == 'sent'">
+                    {{index.addressbook[btx.addressTo]}}
+                    <span ng-show="!index.addressbook[btx.addressTo] && btx.message">
+                      <span class="ellipsis">{{btx.message}}</span>
+                    </span>
+                    <span ng-show="!index.addressbook[btx.addressTo] && !btx.message">
+                      <span translate> Sent</span>
+                    </span>
+                  </span>
+                  <span ng-show="btx.action == 'moved'" translate>Moved</span>
+                  <span class="label tu warning radius" ng-show="btx.action == 'invalid'" translate>Invalid</span>
+                </div>
+              </div>
+
+              <div class="large-5 medium-5 small-5 columns text-right" >
+                <span class="size-16"  ng-class="{'text-bold': btx.recent}">
+                  <span ng-if="btx.action == 'received'">+</span>
+                  <span ng-if="btx.action == 'sent'">-</span>
+                  <span  class="size-12" ng-if="btx.action == 'invalid'" translate>
+                  (possible double spend)
+                  </span>
+                  <span  ng-if="btx.action != 'invalid'">
+                  {{btx.amountStr}}
+                  </span>
                 </span>
-                <span ng-show="!index.addressbook[btx.addressTo] && !btx.message">
-                  <span translate> Sent</span>
-                </span>
-              </span>
-              <span ng-show="btx.action == 'moved'" translate>Moved</span>
-              <span class="label tu warning radius" ng-show="btx.action == 'invalid'" translate>Invalid</span>
+                <div class="size-12 text-gray">
+                  <time ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
+                  <span translate class="text-warning"
+                    ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
+                    Unconfirmed
+                  </span>
+                </div>
+              </div>
+              <div class="large-1 medium-1 small-1 columns text-right m10t">
+                <i class="icon-arrow-right3 size-18"></i>
+              </div>
             </div>
-          </div>
 
-          <div class="large-5 medium-5 small-5 columns text-right" >
-            <span class="size-16"  ng-class="{'text-bold': btx.recent}">
-              <span ng-if="btx.action == 'received'">+</span>
-              <span ng-if="btx.action == 'sent'">-</span>
-              <span  class="size-12" ng-if="btx.action == 'invalid'" translate>
-              (possible double spend)
-              </span>
-              <span  ng-if="btx.action != 'invalid'">
-              {{btx.amountStr}}
-              </span>
-            </span>
-            <div class="size-12 text-gray">
-              <time ng-if="btx.time">{{btx.time * 1000 | amTimeAgo}}</time>
-              <span translate class="text-warning"
-                ng-show="!btx.time && (!btx.confirmations || btx.confirmations == 0)">
-                Unconfirmed
-              </span>
+            <div class="row m20t text-center" ng-show="index.historyRendering && !index.ching">
+              <div class="columns large-12 medium-12 small-12">
+                <div class="spinner">
+                  <div class="rect1"></div>
+                  <div class="rect2"></div>
+                  <div class="rect3"></div>
+                  <div class="rect4"></div>
+                  <div class="rect5"></div>
+                </div>
+              </div>
             </div>
-          </div>
-          <div class="large-1 medium-1 small-1 columns text-right m10t">
-            <i class="icon-arrow-right3 size-18"></i>
+
+            <ion-infinite-scroll
+              ng-if="index.historyShowMore"
+              on-infinite="index.showMore()"
+              distance="1%">
+            </ion-infinite-scroll>
           </div>
         </div>
 
-        <div class="row m20t text-center" ng-show="index.historyRendering && !index.isSearching">
-          <div class="columns large-12 medium-12 small-12">
-            <div class="spinner">
-              <div class="rect1"></div>
-              <div class="rect2"></div>
-              <div class="rect3"></div>
-              <div class="rect4"></div>
-              <div class="rect5"></div>
-            </div>
-          </div>
-        </div>
-
-        <div class="m20t text-center">
-          <a class="text-gray size-12"
-             ng-show="index.historyShowMore"
-             ng-click="index.showMore()">
-            <span translate>Show more</span>
-            <span ng-if="!index.isSearching">
-              ({{index.completeHistory.length - index.txHistory.length}})
-            </span>
-            <span ng-if="index.isSearching">
-              ({{index.result.length - index.txHistorySearchResults.length}})
-            </span>
-            <i class="icon-arrow-down4"></i>
-          </a>
-        </div>
-      </div>
-
-
+      </ion-content>
       <div class="extra-margin-bottom"></div>
-    </div> <!-- END WalletHome -->
+    </ion-content> <!-- END WalletHome -->
 
     <!--
 
diff --git a/src/css/ionic-migration.css b/src/css/ionic-migration.css
index dd18f67e9..2578e28bc 100644
--- a/src/css/ionic-migration.css
+++ b/src/css/ionic-migration.css
@@ -14,7 +14,6 @@
 
 .row {
 	display: inherit;
-	padding: 0;
 }
 
 button, .button {
diff --git a/src/js/controllers/index.js b/src/js/controllers/index.js
index 81269de57..1ce8d636c 100644
--- a/src/js/controllers/index.js
+++ b/src/js/controllers/index.js
@@ -16,7 +16,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
   ret.isWindowsPhoneApp = platformInfo.isWP;
   ret.onGoingProcess = {};
   ret.historyShowLimit = 10;
-  ret.historyShowMoreLimit = 100;
+  ret.historyShowMoreLimit = 10;
   ret.isSearching = false;
   ret.prevState = 'walletHome';
 
@@ -322,6 +322,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
   };
 
   self.updateAll = function(opts, initStatusHash, tries) {
+    $scope.$broadcast('scroll.refreshComplete');
     tries = tries || 0;
     opts = opts || {};
     var fc = profileService.focusedClient;
@@ -985,6 +986,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
           self.historyShowMore = false;
       }
       self.nextTxHistory += self.historyShowMoreLimit;
+      $scope.$broadcast('scroll.infiniteScrollComplete');
     }, 100);
   };
 
diff --git a/src/js/controllers/walletHome.js b/src/js/controllers/walletHome.js
index d83792e53..82e52c8c1 100644
--- a/src/js/controllers/walletHome.js
+++ b/src/js/controllers/walletHome.js
@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('walletHomeController', function($scope, $rootScope, $interval, $timeout, $filter, $modal, $log, $ionicModal, notification, txStatus, profileService, lodash, configService, rateService, storageService, bitcore, gettext, gettextCatalog, platformInfo, addressService, ledger, bwsError, confirmDialog, txFormatService, animationService, addressbookService, go, feeService, walletService, fingerprintService, nodeWebkit) {
+angular.module('copayApp.controllers').controller('walletHomeController', function($scope, $ionicScrollDelegate, $rootScope, $interval, $timeout, $filter, $modal, $log, $ionicModal, notification, txStatus, profileService, lodash, configService, rateService, storageService, bitcore, gettext, gettextCatalog, platformInfo, addressService, ledger, bwsError, confirmDialog, txFormatService, animationService, addressbookService, go, feeService, walletService, fingerprintService, nodeWebkit) {
 
   var isCordova = platformInfo.isCordova;
   var isWP = platformInfo.isWP;
@@ -32,6 +32,13 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
   ret.sendMaxInfo = {};
   var vanillaScope = ret;
 
+  $scope.getScrollPosition = function() {
+    $scope.shouldCollapse = $ionicScrollDelegate.$getByHandle('transactions').getScrollPosition().top > 50;
+    $timeout(function() {
+      $scope.$apply();
+    });
+  }
+
   var disableScannerListener = $rootScope.$on('dataScanned', function(event, data) {
     self.setForm(data);
     $rootScope.$emit('Local/SetTab', 'send');
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 299f1b8d7..fff0b70f6 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -100,7 +100,7 @@ h4.title a {
 }
 
 .walletHome h4.title {
-  padding: 0 0 10px 15px;
+  padding: 20px 0 10px 15px;
   margin: 5px 0 5px 0;
   font-size: 16px;
 }
@@ -620,6 +620,14 @@ ul.manage li {
   margin-top: 20px;
 }
 
+.m50t {
+  margin-top: 50px;
+}
+
+.m150t {
+  margin-top: 150px;
+}
+
 .m20tp {
   margin-top: 20%;
 }
@@ -1575,6 +1583,13 @@ input.ng-invalid-match {
   margin-bottom: 25px;
 }
 
+.amountcollapsed {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  height: 50px;
+}
+
 .alternative-amount {
   height: 25px;
   text-align: center;
@@ -1615,7 +1630,7 @@ input.ng-invalid-match {
     text-align: center;
     border-radius: 5px;
   }
-  .wallet-info {
+  .walletinfo {
     position: absolute;
     top: inherit;
     left: 10px;
@@ -1623,6 +1638,14 @@ input.ng-invalid-match {
     font-size: 20px;
     color: #fff;
   }
+  .walletinfocollapsed {
+    position: absolute;
+    top: inherit;
+    left: 10px;
+    bottom: 0px;
+    font-size: 20px;
+    color: #fff;
+  }
 }
 
 .camera-icon a {
@@ -2144,4 +2167,3 @@ body.modal-open {
     color: #2C3E50;
   }
 }
-