Merge pull request #236 from Bitcoin-com/wallet/task/428

Improvement - 428 - Send/Receive buttons

src/js/controllers/tab-home.js

@@ -224,6 +224,7 @@ angular.module('copayApp.controllers').controller('tabHomeController',
               cb();
             }
           }
+          $scope.walletsWithFunds = profileService.getWallets({hasFunds: true});
         });
       });
     };

src/js/controllers/tab-receive.js

@@ -233,10 +233,14 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
 
     if (!$scope.wallets[0]) return;
 
-    // select first wallet if no wallet selected previously
-    var selectedWallet = checkSelectedWallet($scope.wallet, $scope.wallets);
+    var selectedWallet = null;
+    if (data.stateParams.walletId) { // from walletDetails
+      selectedWallet = checkSelectedWallet(profileService.getWallet(data.stateParams.walletId), $scope.wallets);
+    } else {
+      // select first wallet if no wallet selected previously
+      selectedWallet = checkSelectedWallet($scope.wallet, $scope.wallets);
+    }
     $scope.onWalletSelect(selectedWallet);
-
     $scope.showShareButton = platformInfo.isCordova ? (platformInfo.isIOS ? 'iOS' : 'Android') : null;
 
     listeners = [

src/js/controllers/walletDetails.js

@@ -342,9 +342,9 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
       top = TOP_BALANCE_BUTTON;
     }
 
-    var amountTop = ((amountScale - 0.7) / 0.7) * top;
-    if (amountTop < -10) {
-      amountTop = -10;
+    var amountTop = ((amountScale - 0.80) / 0.80) * top;
+    if (amountTop < -2) {
+      amountTop = -2;
     }
     if (amountTop > top) {
       amountTop = top;
@@ -353,6 +353,7 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
     var t = amountTop;
 
     $scope.altAmountOpacity = (amountHeight - 100) / 80;
+    $scope.buttonsOpacity = (amountHeight - 140) / 70;
     $window.requestAnimationFrame(function() {
       $scope.amountHeight = amountHeight + 'px';
       $scope.contentMargin = contentMargin + 'px';
@@ -469,4 +470,30 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
   function rgbToHex(r, g, b) {
     return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
   }
+  $scope.goToSend = function() {
+    $state.go('tabs.home', {
+      walletId: $scope.wallet.id
+    }).then(function () {
+      $ionicHistory.clearHistory();
+      $state.go('tabs.send');
+    });
+  };
+  $scope.goToReceive = function() {
+    $state.go('tabs.home', {
+      walletId: $scope.wallet.id
+    }).then(function () {
+      $ionicHistory.clearHistory();
+      $state.go('tabs.receive', {
+        walletId: $scope.wallet.id
+      });
+    });
+  };
+  $scope.goToBuy = function() {
+    $state.go('tabs.home', {
+      walletId: $scope.wallet.id
+    }).then(function () {
+      $ionicHistory.clearHistory();
+      $state.go('tabs.buyandsell');
+    });
+  };
 });

src/js/routes.js

@@ -236,7 +236,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         }
       })
       .state('tabs.receive', {
-        url: '/receive',
+        url: '/receive/:walletId',
         views: {
           'tab-receive': {
             controller: 'tabReceiveController',

src/sass/buttons.scss

@@ -72,5 +72,17 @@
     &.activated {
       color: #FFF;
     }
+    &-outline {
+      @include button-style(transparent, #FFFFFF, #FAFAFA, #FFF, #FFFFFF);
+      @include button-outline(#FFFFFF);
+      background: none;
+      box-shadow: none;
+    }
+  }
+  &-grey-outline {
+    @include button-style(transparent, #727272, #FAFAFA, #727272, #727272);
+    @include button-outline(#727272);
+    background: none;
+    box-shadow: none;
   }
 }

src/sass/shame.scss

@@ -233,6 +233,10 @@ input[type=number] {
   font-size: 24px;
 }
 
+.size-25 {
+  font-size: 25px;
+}
+
 .size-28 {
   font-size: 28px;
 }

src/sass/views/tab-home.scss

@@ -69,6 +69,25 @@
       }
     }
   }
+  .buttons {
+    margin: 6px auto -12px;
+    max-width: 600px;
+    >.col {
+      padding: 5px 10px;
+      margin-bottom: 0;
+    }
+    .button {
+      border: 2px solid;
+      border-radius: 47px;
+      padding: 0 15px 0 15px;
+      text-align: center;
+      width: 100%;
+      font-size: 19px;
+      font-weight: bolder;
+      min-height: auto;
+      line-height: 36px;
+    }
+  }
   .wallet-coin-logo {
     vertical-align: middle;
     margin-right: 5px;

src/sass/views/walletDetails.scss

@@ -135,11 +135,12 @@
 
     &.status-bar {
       margin-top: 20px;
+      margin-top: env(safe-area-inset-top);
     }
   }
   .bar-header {
     border: 0;
-    background: none;
+    background: rgb(238, 182, 64);
     .title, .button {
       color: #fff;
     }
@@ -153,7 +154,7 @@
   ion-content {
 
     &.collapsible {
-      margin-top: 210px;
+      margin-top: 230px;
     }
 
     padding-top: 0;
@@ -190,12 +191,34 @@
         transform: translateY(100px);
       }
     }
+
+    .send-receive-buttons {
+      max-width: 600px;
+      position: absolute;
+      bottom: 20px;
+
+      >.col {
+        padding: 5px 10px;
+        margin-bottom: 0;
+      }
+      .button {
+        border: 2px solid;
+        border-radius: 47px;
+        padding: 0 15px 0 15px;
+        text-align: center;
+        width: 100%;
+        font-size: 19px;
+        font-weight: bolder;
+        min-height: auto;
+        line-height: 36px;
+      }
+    }
   }
   .amount {
     width: 100%;
     text-align: center;
     color: #fff;
-    height: 210px;
+    height: 230px;
     padding-top: 40px;
     display: block;
     align-items: center;