From ec3fca4cda6691e589474d212cd6f1d807a286ef Mon Sep 17 00:00:00 2001
From: Marty Alcala <marty@bitpay.com>
Date: Wed, 12 Oct 2016 20:13:28 -0400
Subject: [PATCH] make wallet selector a standalone directive

---
 src/js/controllers/confirm.js               |  9 +--
 src/js/directives/actionSheet.js            |  5 --
 src/js/directives/walletSelector.js         | 27 +++++++++
 src/sass/views/confirm.scss                 | 59 +-------------------
 src/sass/views/includes/walletSelector.scss | 62 +++++++++++++++++++++
 src/sass/views/views.scss                   |  1 +
 www/views/confirm.html                      | 41 +++-----------
 www/views/includes/walletSelector.html      | 30 ++++++++++
 8 files changed, 132 insertions(+), 102 deletions(-)
 create mode 100644 src/js/directives/walletSelector.js
 create mode 100644 src/sass/views/includes/walletSelector.scss
 create mode 100644 www/views/includes/walletSelector.html

diff --git a/src/js/controllers/confirm.js b/src/js/controllers/confirm.js
index 662e48329..3fa1febeb 100644
--- a/src/js/controllers/confirm.js
+++ b/src/js/controllers/confirm.js
@@ -113,16 +113,11 @@ angular.module('copayApp.controllers').controller('confirmController', function(
   });
 
   $scope.showWalletSelector = function() {
-    console.log('showWalletSelector called');
-    console.log('$scope.wallets', $scope.wallets);
     $scope.showWallets = true;
   };
 
-  $scope.selectWallet = function(w) {
-    $timeout(function() {
-      $scope.showWallets = false;
-    }, 100);
-    setWallet(w);
+  $scope.onWalletSelect = function(wallet) {
+    setWallet(wallet);
   };
 
 
diff --git a/src/js/directives/actionSheet.js b/src/js/directives/actionSheet.js
index d2697e930..4ca9fddb0 100644
--- a/src/js/directives/actionSheet.js
+++ b/src/js/directives/actionSheet.js
@@ -10,11 +10,6 @@ angular.module('copayApp.directives')
         show: '=actionSheetShow',
       },
       link: function(scope, element, attrs) {
-        console.log('action sheet instantiated');
-        scope.$watch('show', function() {
-          console.log('show called', scope.show);
-        });
-
         scope.hide = function() {
           scope.show = false;
         };
diff --git a/src/js/directives/walletSelector.js b/src/js/directives/walletSelector.js
new file mode 100644
index 000000000..97149d528
--- /dev/null
+++ b/src/js/directives/walletSelector.js
@@ -0,0 +1,27 @@
+'use strict';
+
+angular.module('copayApp.directives')
+  .directive('walletSelector', function($timeout) {
+    return {
+      restrict: 'E',
+      templateUrl: 'views/includes/walletSelector.html',
+      transclude: true,
+      scope: {
+        show: '=walletSelectorShow',
+        wallets: '=walletSelectorWallets',
+        selectedWallet: '=walletSelectorSelectedWallet',
+        onSelect: '=walletSelectorOnSelect'
+      },
+      link: function(scope, element, attrs) {
+        scope.hide = function() {
+          scope.show = false;
+        };
+        scope.selectWallet = function(wallet) {
+          $timeout(function() {
+            scope.hide();
+          }, 100);
+          scope.onSelect(wallet);
+        };
+      }
+    };
+  });
diff --git a/src/sass/views/confirm.scss b/src/sass/views/confirm.scss
index c7e5e80f2..b8500593e 100644
--- a/src/sass/views/confirm.scss
+++ b/src/sass/views/confirm.scss
@@ -1,60 +1,3 @@
 #view-confirm {
-  $border-color: #EFEFEF;
-  height: auto;
-  .wallet-selector {
-    .wallet {
-      border: 0;
-      padding-right: 0;
-      padding-top: 0;
-      padding-left: 65px;
-      padding-bottom: 0;
-      margin-bottom: 1px;
-      overflow: visible;
-
-      > i {
-        padding: 0;
-        margin-left: -5px;
-
-        > img {
-          height: 39px;
-          width: 39px;
-          padding: 4px;
-        }
-      }
-    }
-    .wallet-inner {
-      display: flex;
-      position: relative;
-      padding-top: 16px;
-      padding-bottom: 16px;
-
-      &::after {
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 1px;
-        background: $border-color;
-        bottom: 0;
-        right: 0;
-        content: '';
-      }
-
-      .check {
-        padding: 0 1.2rem;
-      }
-    }
-    .wallet-details {
-      flex-grow: 1;
-
-      .wallet-name {
-        padding-bottom: 5px;
-      }
-
-      .wallet-balance {
-        color: #3A3A3A;
-        font-family: "Roboto-Light";
-      }
-
-    }
-  }
+  
 }
diff --git a/src/sass/views/includes/walletSelector.scss b/src/sass/views/includes/walletSelector.scss
new file mode 100644
index 000000000..d0990b71b
--- /dev/null
+++ b/src/sass/views/includes/walletSelector.scss
@@ -0,0 +1,62 @@
+wallet-selector {
+  
+  $border-color: #EFEFEF;
+
+  .wallet-selector {
+    .wallet {
+      border: 0;
+      padding-right: 0;
+      padding-top: 0;
+      padding-left: 65px;
+      padding-bottom: 0;
+      margin-bottom: 1px;
+      overflow: visible;
+
+      > i {
+        padding: 0;
+        margin-left: -5px;
+
+        > img {
+          height: 39px;
+          width: 39px;
+          padding: 4px;
+        }
+      }
+    }
+    .wallet-inner {
+      display: flex;
+      position: relative;
+      padding-top: 16px;
+      padding-bottom: 16px;
+
+      &::after {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: $border-color;
+        bottom: 0;
+        right: 0;
+        content: '';
+      }
+
+      .check {
+        padding: 0 1.2rem;
+      }
+    }
+    .wallet-details {
+      flex-grow: 1;
+
+      .wallet-name {
+        padding-bottom: 5px;
+      }
+
+      .wallet-balance {
+        color: #3A3A3A;
+        font-family: "Roboto-Light";
+      }
+
+    }
+  }
+
+}
diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss
index 8bf09e6df..10e818bd6 100644
--- a/src/sass/views/views.scss
+++ b/src/sass/views/views.scss
@@ -27,4 +27,5 @@
 @import "includes/tx-details";
 @import "includes/txp-details";
 @import "includes/tx-status";
+@import "includes/walletSelector";
 @import "integrations/coinbase.scss";
diff --git a/www/views/confirm.html b/www/views/confirm.html
index b1f28c7b3..65cd83729 100644
--- a/www/views/confirm.html
+++ b/www/views/confirm.html
@@ -79,38 +79,15 @@
     <span ng-hide="wallet.m > 1">Payment Sent</span>
     <span ng-show="wallet.m > 1">Proposal Created</span>
   </slide-to-accept-success>
-  <action-sheet action-sheet-show="showWallets" class="wallet-selector">
-    <!-- <div ng-repeat="wallet in wallets">{{wallet.name}}</div> -->
-    <a
-      ng-repeat="w in wallets track by $index"
-      class="item item-icon-left item-big-icon-left item-icon-right wallet"
-      ng-click="selectWallet(w)"
-    >
-        <i class="icon big-icon-svg">
-          <img src="img/icon-wallet.svg" ng-style="{'background-color': w.color}" class="bg">
-        </i>
-        <div class="wallet-inner">
-          <div class="wallet-details">
-            <div class="wallet-name">
-              {{w.name}}
-            </div>
-            <p class="wallet-balance">
-              <span ng-if="!w.isComplete()" class="assertive" translate>
-                Incomplete
-              </span>
-              <span ng-if="w.isComplete()">
-                <span ng-if="!w.balanceHidden">{{w.status.availableBalanceStr}}</span>
-                <span ng-if="w.balanceHidden" translate>[Balance Hidden]</span>
-              </span>
-            </span>
-            &nbsp;
-            </p>
-          </div>
-          <img class="check" src="img/icon-check-selected.svg" ng-show="wallet === w">
-        </div>
-        <!-- <i class="icon bp-arrow-right"></i> -->
-      </a>
-  </action-sheet>
+
+  <wallet-selector
+    wallet-selector-wallets="wallets"
+    wallet-selector-selected-wallet="wallet"
+    wallet-selector-show="showWallets"
+    wallet-selector-on-select="onWalletSelect"
+  >
+  </wallet-selector>
+
 </ion-view>
 <!-- <ion-view id="view-confirm">
   <ion-nav-bar class="bar-royal">
diff --git a/www/views/includes/walletSelector.html b/www/views/includes/walletSelector.html
new file mode 100644
index 000000000..ba97edad0
--- /dev/null
+++ b/www/views/includes/walletSelector.html
@@ -0,0 +1,30 @@
+<action-sheet action-sheet-show="show" class="wallet-selector">
+  <a
+    ng-repeat="w in wallets track by $index"
+    class="item item-icon-left item-big-icon-left item-icon-right wallet"
+    ng-click="selectWallet(w)"
+  >
+      <i class="icon big-icon-svg">
+        <img src="img/icon-wallet.svg" ng-style="{'background-color': w.color}" class="bg">
+      </i>
+      <div class="wallet-inner">
+        <div class="wallet-details">
+          <div class="wallet-name">
+            {{w.name}}
+          </div>
+          <p class="wallet-balance">
+            <span ng-if="!w.isComplete()" class="assertive" translate>
+              Incomplete
+            </span>
+            <span ng-if="w.isComplete()">
+              <span ng-if="!w.balanceHidden">{{w.status.availableBalanceStr}}</span>
+              <span ng-if="w.balanceHidden" translate>[Balance Hidden]</span>
+            </span>
+          </span>
+          &nbsp;
+          </p>
+        </div>
+        <img class="check" src="img/icon-check-selected.svg" ng-show="selectedWallet === w">
+      </div>
+    </a>
+</action-sheet>