prelim remake of tx detail view

src/js/controllers/modals/txDetails.js

@@ -1,14 +1,21 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('txDetailsController', function($log, $timeout, $scope, $filter, $stateParams, ongoingProcess, walletService, lodash, gettextCatalog, profileService, configService, txFormatService, externalLinkService, popupService) {
+  console.log('in txDetailsController');
   var config = configService.getSync();
   var configWallet = config.wallet;
   var walletSettings = configWallet.settings;
   var wallet;
   $scope.title = gettextCatalog.getString('Transaction');
 
+  console.log('$stateParams', $stateParams);
+  $scope.btx = $stateParams.tx;
+  $scope.wallet = $stateParams.wallet;
+
   $scope.init = function() {
+    console.log('init called');
     wallet = $scope.wallet;
+    console.log('wallet', wallet);
     $scope.alternativeIsoCode = walletSettings.alternativeIsoCode;
     $scope.color = wallet.color;
     $scope.copayerId = wallet.credentials.copayerId;
@@ -149,4 +156,6 @@ angular.module('copayApp.controllers').controller('txDetailsController', functio
   $scope.cancel = function() {
     $scope.txDetailsModal.hide();
   };
+
+  $scope.init();
 });

src/js/controllers/tab-home.js

@@ -68,7 +68,7 @@ angular.module('copayApp.controllers').controller('tabHomeController',
 
         $scope.wallet = wallet;
         $scope.btx = lodash.cloneDeep(tx);
-        $ionicModal.fromTemplateUrl('views/modals/tx-details.html', {
+        $ionicModal.fromTemplateUrl('views/confirm.html', {
           scope: $scope
         }).then(function(modal) {
           $scope.txDetailsModal = modal;

src/js/controllers/walletDetails.js

@@ -92,12 +92,15 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
   $scope.openTxModal = function(btx) {
     $scope.btx = lodash.cloneDeep(btx);
     $scope.walletId = $scope.wallet.id;
-    $ionicModal.fromTemplateUrl('views/modals/tx-details.html', {
+
-      scope: $scope
+    console.log('$state.go called');
-    }).then(function(modal) {
+    $state.go('tabs.wallet.tx-details', {tx: $scope.btx, wallet: $scope.wallet});
-      $scope.txDetailsModal = modal;
+    // $ionicModal.fromTemplateUrl('views/modals/tx-details.html', {
-      $scope.txDetailsModal.show();
+    //   scope: $scope
-    });
+    // }).then(function(modal) {
+    //   $scope.txDetailsModal = modal;
+    //   $scope.txDetailsModal.show();
+    // });
   };
 
   $scope.recreate = function() {

src/js/routes.js

@@ -177,6 +177,19 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           }
         }
       })
+      .state('tabs.wallet.tx-details', {
+        url: '/:id',
+        views: {
+          'tab-home@tabs': {
+            controller: 'txDetailsController',
+            templateUrl: 'views/modals/tx-details.html'
+          }
+        },
+        params: {
+          tx: null,
+          wallet: null
+        }
+      })
 
     /*
      *

www/views/modals/tx-details.html

@@ -1,4 +1,109 @@
-<ion-modal-view ng-controller="txDetailsController" ng-init="init()" id="tx-details">
+<ion-view id="view-confirm" hide-tabs>
+  <ion-nav-bar class="bar-royal">
+    <ion-nav-title>
+      {{title}}
+    </ion-nav-title>
+    <ion-nav-back-button>
+    </ion-nav-back-button>
+  </ion-nav-bar>
+
+  <ion-content ng-class="{'slide-to-pay': !hasClick && !insuffientFunds}">
+    <div class="list">
+      <div class="item head">
+        <div class="sending-label">
+          <img src="img/sending-icon.svg">
+          <span translate>Sent</span>
+        </div>
+        <div class="amount-label">
+          <div class="amount">{{displayAmount}} <span class="unit">{{displayUnit}}</span></div>
+          <div class="alternative">{{alternativeAmountStr}}</div>
+        </div>
+      </div>
+      <div class="info">
+        <div class="item single-line" ng-if="_paypro">
+          <span class="label" translate>Payment Expires:</span>
+          <span class="item-note" ng-if="!paymentExpired.value">{{remainingTimeStr.value}}</span>
+          <span class="item-note" ng-if="paymentExpired.value" ng-style="{'color': 'red'}" translate>Expired</span>
+        </div>
+        <div class="item">
+          <span class="label" translate>To</span>
+          <span class="payment-proposal-to">
+            <img ng-if="!cardId" src="img/icon-bitcoin-small.svg">
+            <img ng-if="cardId" src="img/icon-card.svg" width="34">
+
+            <div copy-to-clipboard="toAddress" ng-if="!_paypro" class="ellipsis">
+              <contact ng-if="!toName" address="{{btx.addressTo}}"></contact>
+              <span class="m15l size-14" ng-if="toName">{{toName}}</span>
+            </div>
+
+            <div ng-if="_paypro" ng-click="openPPModal(_paypro)" class="m15l size-14 w100p pointer">
+              <i ng-show="_paypro.verified && _paypro.caTrusted" class="ion-locked" style="color:green"></i>
+              <i ng-show="!_paypro.caTrusted" class="ion-unlocked" style="color:red"></i>
+              <span class="ellipsis" ng-show="!toName">{{_paypro.domain || _paypro.toAddress}}</span>
+              <span ng-show="toName">{{toName}}</span>
+            </div>
+            <!-- <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{toAddress}}"></contact>
+            <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span> -->
+          </span>
+        </div>
+        <div class="text-center" ng-show="insuffientFunds">
+          <span class="badge badge-energized" translate>Insufficient funds</span>
+        </div>
+        <div class="item">
+          <span class="label" translate>From</span>
+          <div class="wallet">
+            <i class="icon big-icon-svg">
+              <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
+            </i>
+            <div>{{wallet.name}}</div>
+          </div>
+        </div>
+        <a class="item single-line item-icon-right" ng-hide="insuffientFunds" ng-click="showDescriptionPopup()">
+          <span class="label" translate>Add Memo</span>
+          <span class="item-note m10l">
+            {{description}}
+          </span>
+          <i class="icon bp-arrow-right"></i>
+        </a>
+        <div class="item single-line" ng-hide="insuffientFunds">
+          <span class="label" translate>Fee: {{feeLevel}}</span>
+          <span class="item-note">
+            {{fee || '...'}}
+          </span>
+        </div>
+      </div>
+    </div>
+    <click-to-accept
+      ng-click="approve(statusChangeHandler)"
+      ng-if="hasClick && wallets[0]"
+      click-send-status="sendStatus">
+      Click to pay
+    </click-to-accept>
+  </ion-content>
+  <slide-to-accept
+    ng-if="!hasClick && wallets[0]"
+    slide-on-confirm="onConfirm()"
+    slide-send-status="sendStatus">
+    Slide to pay
+  </slide-to-accept>
+  <slide-to-accept-success
+    slide-success-show="sendStatus === 'success'"
+    slide-success-on-confirm="onSuccessConfirm()"
+    slide-success-hide-on-confirm="true">
+    <span ng-hide="wallet.m > 1">Payment Sent</span>
+    <span ng-show="wallet.m > 1">Proposal Created</span>
+  </slide-to-accept-success>
+
+  <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-modal-view ng-controller="txDetailsController" ng-init="init()" id="tx-details">
   <ion-header-bar align-title="center" class="bar-royal" ng-style="{'background-color': color, 'border-color': color}">
     <button class="button button-clear" ng-click="cancel()">
       {{'Close' | translate}}
@@ -175,4 +280,4 @@
       </div>
     </div>
   </ion-content>
-</ion-modal-view>
+</ion-modal-view> -->