UX: just update address balance that received fund.

Changed rootscope for scope to control address page.
Fixes: not alert when address change receive fund

index.html

@@ -32,15 +32,21 @@
               </div>
               <div class="large-4 medium-4 columns line-dashed-v">
                 Balance: 
-                <span ng-if="$root.updatingBalance">...</span>
-                <span ng-if="!$root.updatingBalance">{{totalBalance || 0}}</span>
-                <i class="fi-bitcoin"></i><br>
+                <span ng-if="$root.updatingBalance">
+                  <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+                </span>
+                <span ng-if="!$root.updatingBalance">{{totalBalance || 0}}
+                  <i class="fi-bitcoin"></i>
+                </span>
               </div>
               <div class="large-4 medium-4 columns">
                 Available to Spend:
-                <span ng-if="$root.updatingBalance">...</span>
-                <span ng-if="!$root.updatingBalance">{{availableBalance || 0}}</span>
-                <i class="fi-bitcoin"></i>
+                <span ng-if="$root.updatingBalance">
+                  <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+                </span>
+                <span ng-if="!$root.updatingBalance">{{availableBalance || 0}}
+                  <i class="fi-bitcoin"></i>
+                </span>
               </div>
      
             </div>
@@ -317,37 +323,58 @@
       <div class="addresses" ng-controller="AddressesController">
         <div ng-show='$root.wallet.publicKeyRing.isComplete()'>
           <div class="row">
-            <div class="large-9 medium-12 columns" ng-if="addrInfos[0]">
+            <div class="large-9 medium-12 columns" ng-if="addresses[0]">
               <div class="large-8 medium-8 columns">
-                <a class="panel radius db" ng-repeat="addrInfo in addrInfos" ng-click="$root.selectedAddr = addrInfo.address.toString()" ng-class="selectAddr('{{addrInfo.address.toString()}}')">
-                  <span>{{addrInfo.address.toString()}}</span>
-                  <span ng-if="addrInfo.isChange">(change)</span>
+                <a class="panel radius db" ng-repeat="addr in addresses" 
+                  ng-click="selectAddress(addr)" 
+                  ng-class="{selected : addr.address == selectedAddr.address}">
+                  <span>{{addr.address}}</span>
+                  <span ng-if="addr.isChange">(change)</span>
                   <span class="right">
-                    <span ng-if="$root.updatingBalance">...</span>
-                    <span ng-if="!$root.updatingBalance">{{balanceByAddr[addrInfo.address.toString()] || 0}}</span>
-                    <i class="fi-bitcoin"></i>
+                    <span ng-if="$root.receivedFund[1] == addr.address">
+                      <span ng-if="$root.updatingBalance">
+                        <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+                      </span>
+                      <span ng-if="!$root.updatingBalance">
+                        {{$root.balanceByAddr[addr.address]}}
+                        <i class="fi-bitcoin"></i>
+                      </span>
+                    </span>
+                    <span ng-if="$root.receivedFund[1] != addr.address">
+                      {{addr.balance || 0}}
+                      <i class="fi-bitcoin"></i>
+                    </span>
                   </span>
                 </a>
               </div>
-              <div class="large-4 medium-4 columns line-dashed-v text-center">
-                <qrcode size="160" data="{{selectedAddr}}"></qrcode>
+              <div class="large-4 medium-4 columns line-dashed-v text-center" ng-show="selectedAddr">
+                <qrcode size="160" data="{{selectedAddr.address}}"></qrcode>
                 <p class="m10t">
                   <strong>
-                    <span ng-if="$root.updatingBalance">...</span>
-                    <span ng-if="!$root.updatingBalance">{{balanceByAddr[selectedAddr] || 0}}</span>
-                    <i class="fi-bitcoin"></i>
+                    <span ng-if="$root.receivedFund[1] == selectedAddr.address">
+                      <span ng-if="$root.updatingBalance">
+                        <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+                      </span>
+                      <span ng-if="!$root.updatingBalance">{{balanceByAddr[selectedAddr.address] || 0}}
+                        <i class="fi-bitcoin"></i>
+                      </span>
+                    </span>
+                    <span ng-if="$root.receivedFund[1] != selectedAddr.address">
+                      {{selectedAddr.balance || 0}}
+                      <i class="fi-bitcoin"></i>
+                    </span>
                   </strong>
                 </p>
               </div>
             </div>
-            <div class="columns text-center m10t" ng-class="{'large-3' : !!addrInfos[0]}">
+            <div class="columns text-center m10t" ng-class="{'large-3' : !!addresses[0]}">
               <p> Create a New <strong> Address </strong> </p>
               <button class="secondary radius expandi new-address" ng-click="newAddr()"
                 ng-disabled="loading" loading="Creating"> Create </button>
             </div>
           </div> 
         </div> 
-      </div>
+      </div>  
     </script>
 
     <!-- TRANSACTIONS -->

js/controllers/addresses.js

@@ -11,14 +11,32 @@ angular.module('copay.addresses').controller('AddressesController',
         $timeout(function() {
           controllerUtils.setSocketHandlers();
           controllerUtils.updateAddressList();
-          $rootScope.selectedAddr = $rootScope.addrInfos[0].address.toString();
           $scope.loading = false;
-          $rootScope.$digest();
         },1);
       });
     };
 
-    $scope.selectAddr = function (addr) {
-      return addr === $rootScope.selectedAddr ? 'selected' : '';
+    $scope.selectAddress = function (addr) {
+      $scope.selectedAddr = addr;
     };
+
+    $rootScope.$watch('addrInfos', function(addrInfos) {
+      $scope.addressList(addrInfos);
+    });   
+
+    $scope.addressList = function (addrInfos) {
+      $scope.addresses = [];
+      if (addrInfos) {
+        for(var i=0;i<addrInfos.length;i++) {
+          var addrinfo = addrInfos[i];
+          $scope.addresses.push({ 
+            'address' : addrinfo.address.toString(),
+            'balance' : $rootScope.balanceByAddr ? $rootScope.balanceByAddr[addrinfo.address.toString()] : 0,
+            'isChange': addrinfo.isChange
+          });
+        }
+        $scope.selectedAddr = $scope.addresses[0];
+      }
+    }
+
   });

js/controllers/header.js

@@ -31,7 +31,17 @@ angular.module('copay.header').controller('HeaderController',
 
     $rootScope.$watch('receivedFund', function(receivedFund) {
       if (receivedFund) {
-        $notification.funds('Received fund', 'on ' + receivedFund[1], receivedFund);
+        var currentAddr;
+        for(var i=0;i<$rootScope.addrInfos.length;i++) {
+          var addrinfo = $rootScope.addrInfos[i];
+          if (addrinfo.address.toString() == receivedFund[1] && !addrinfo.isChange) {
+            currentAddr = addrinfo.address.toString();
+            break;
+          }
+        }
+        if (currentAddr) {
+          $notification.funds('Received fund', currentAddr, receivedFund);
+        }
       }
     });
 

js/services/controllerUtils.js

@@ -117,7 +117,6 @@ angular.module('copay.controllerUtils')
       w.getBalance(function(balance, balanceByAddr, safeBalance) {
         $rootScope.totalBalance = balance;
         $rootScope.balanceByAddr = balanceByAddr;
-        $rootScope.selectedAddr = $rootScope.addrInfos[0].address.toString();
         $rootScope.availableBalance = safeBalance;
         $rootScope.updatingBalance = false;
         console.log('Done updating balance.'); //TODO