feat: add page confirm for transaction

diff --git a/src/assets/style.css b/src/assets/style.css
index 3e82444..74662f5 100644 (file)
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -75,16 +75,16 @@ hr {
 
 @font-face {
   font-family: "iconfont";
-  src: url("//at.alicdn.com/t/font_806738_laee0sjvt7c.eot?t=1540095470997"); /* IE9*/
-  src: url("//at.alicdn.com/t/font_806738_laee0sjvt7c.eot?t=1540095470997#iefix")
+  src: url("//at.alicdn.com/t/font_806738_pnniif0zn4q.eot?t=1540652693831"); /* IE9*/
+  src: url("//at.alicdn.com/t/font_806738_pnniif0zn4q.eot?t=1540652693831#iefix")
       format("embedded-opentype"),
     /* IE6-IE8 */
-      url("data:application/x-font-woff;charset=utf-8;base64,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")
+      url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAoEAAsAAAAAD2wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8eUv4Y21hcAAAAYAAAAC6AAACaOwiXSVnbHlmAAACPAAABT0AAAegJ/arwmhlYWQAAAd8AAAAMQAAADYTE4MnaGhlYQAAB7AAAAAgAAAAJAfdA5BobXR4AAAH0AAAABQAAAA4OAH//2xvY2EAAAfkAAAAHgAAAB4QNg4IbWF4cAAACAQAAAAfAAAAIAEkAGJuYW1lAAAIJAAAAUUAAAJtPlT+fXBvc3QAAAlsAAAAlwAAAMZ1OoGYeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMb9iY27438AQw9zA0AAUZgTJAQDeJgvweJzlkrENg0AMRT8BDkJARFQU6ShoMhSLsEBmSZ0qGzAD7UdiCfKN0yWZID69k2yffNa3AaQAYnEVCRA9EcHsoWi0x2MUezzBTX6LsyI5Y2as2bBjz4Ejp2Vew7YByqTfM18tUsUWl48DHJEpW+CAoC4rnFAi19/WZfhR7Z+s3O/726tMeUfKgakjDcHg2DyZOTZT1o4UBhsH9rZzbDfYO3v9wdEkwNGxLjg5mg6W2bGdWoOD5AVqgEFbAAB4nG1VT4wTVRh/33udeZ3ZzszOtNPpP3Z3dtopdskubLcdCbodAhI0USOhCwQMiQeJCGETPGwxu04EiQeueObCRpeTFzVAoFET8eBBkRj3gldDzB5UDppO/Wa6JYA0733/5/35vt/7SoR+v387QZhPisQjPnmZvEqIYE9DVZ+H2aylj0Hdnm16m5oKkJ1tQdOtOpPuizCHXIUtkBGnQAUrPdeczWbESdcbCtW66TC/F7xxmkK5WQYoF2lQjDgq9HR4WC7IP8mi4quGoXYj4iui/I5RMnB0B+xKt7ubnToA+F25GAalcrk0lA+cgoOSdFdOgaEGigFgKIFqQEoGTzGMIi43YNM+wZ8UEXaSXoxlk2TJOJki20iD7CYk7QzPbOF951zHnhQzWf7IWon1euyDZ1rv7CjVisVa6V+4ls7n02HbyOe/2rTR1Vg1Yldv6VlWetAslWqlUjbv5nB8NtD8vJvH0ScDdfdAJSRFSL/LAoYXIpyMEI2kiUUcUsUbzZA61pKk6w2H2bpt4fRQBt3WI113Go5e1+um3XAqm/6KY9ajeI6zGwQBBGHgA+kTH2UfAr9PgARdH21+jzzyUgz1fR8nJUFvEOcH1A+jBbpAQoKR+El34OoGvWjxqAw0rkV0/hFEHgHHxFM16o06nsNWgSPuLHsePH0a6L21hTUcC7218naA7WW6EHNoR9Y1aKPpcRdmhPS/YbfYPMljJvYTUlHBFCqu44pmJmsJXrbpmZV5aCDKn/Q00GMNPN6OiityQYXIjma0zrlsOT0aroZXVXNiXFNgGdSto7CsaOAUn3CsaFs1iBzUSYbnR7eq4YeKNrSjWdsACa5+mmROTs0lb4KM6pfJgpq3v0dpdeCwpOuPHDn725tJmrzO81tyyRsSJG9GEqZQjPP4A9OewAHW3nQ827T5U/z1Tuch/bi39PApzrROp3N3aWnpFs7N+vR/Z5dYjihRfazJaWh6EKGeg2hPVsHFJ2DBGD77T2QtyTi9J+UzUm9Kot8pEcvkJXqPs6RmyYbB6YZsFKSeLst0QyoYck/nhiFv7vMrW2VT2HnaiIM5fEhVrzkD06DhnMFWE7UWDUQNqi4SMTuO7QaLwsVx3L6FEw3ZXTDbbAECxso24/4kYHFRRRipwF5IADuS4gtMkd4drWR0pvA1roKe1ssnJJW3mcCPPBUyIl/jCkZU9JNcS7QZiOFbrTZAuxVTaMuZQkberyiXE4zVUqZ0BruQLL4npnI1JoiXExrf+78QLsv8jGSm4ghc1h0uh5TEuA2wFwdYxwx5HvuwS6pN4mWJJZJqhL+o2aTxddTjboxClBAucsf06uZc02t6O2LwUrIe3hcEsNfXwRaE8P4/E7WaX6tNHF9hi9A63qIwXrQy8pgqA8CZicKYVdxCV4LHvljHFW5AdWcVB/2AnT20befObVtmsKFK49VCUVGUsRlFzxX3uYfObtbxa7bMWnj2Mawj5h2zHz8wLGNVxGxXXUel2ai7wnOsc+zoOUrPHT3WoXuSb+6V+Es/H0xy/7i16324tLiPnjjWYcOg3h9vX6DA3EQtwS7e+YhewP0gyhWjbIUIiE4JPAlCWA7PvwZfhK/Mw224vidkvahrRYe7RteJjn0gxu0mjCXADk4DIxX+qCgwo0wWlHADdCXvxlpEijaawg3FLsb3+41dYRN4Pxu3x9wPr5gG/A/k7gy4CLzZcfAikqXk8weJxIPPY1oO/waqJFMji4LgMJEd/guJI7CJYQDS8JfwT8YBRhZFoUzpkYeUlsX/ADEMcokAAAB4nGNgZGBgAGLtzA1n4vltvjJwszCAwPVf86fC6P///zewMDA3ALkcDEwgUQBztg3ZAAAAeJxjYGRgYG7438AQw8L4/z8DAwsDA1AEBfABAHX+BHZ4nGNhYGBgYfz/nwVEk4ABaZgCOAAAAAAAdgDcATwBagHgAgwCQALGAyQDXANwA5QD0AAAeJxjYGRgYOBjCGPgYQABJiDmAkIGhv9gPgMAEz4BhwB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxtzE0OgjAQQOEO8icqauI1SFx5n2kd6ITSIW0JxtOrYetbf3kqU1uN+l8LGewghwJKqKCGPTRwgCOcoIWzqtOiGeX+aNmI78Ung/xEX1FYiSesZrdELa/ruCC/LYom7sl/cbnBwjiJVEdKif0Qc0tuzpdI4fIbdhiCrF3gwaZcoxlvLLEzlsw4YRg7w8E4UuoDiSsxpQA=")
       format("woff"),
-    url("//at.alicdn.com/t/font_806738_laee0sjvt7c.ttf?t=1540095470997")
+    url("//at.alicdn.com/t/font_806738_pnniif0zn4q.ttf?t=1540652693831")
       format("truetype"),
     /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-      url("//at.alicdn.com/t/font_806738_laee0sjvt7c.svg?t=1540095470997#iconfont")
+      url("//at.alicdn.com/t/font_806738_pnniif0zn4q.svg?t=1540652693831#iconfont")
       format("svg"); /* iOS 4.1- */
 }
 
@@ -146,6 +146,9 @@ hr {
 .icon-ios-checkmark-circle:before {
   content: "\e627";
 }
+.icon-arrow-right:before {
+  content: "\e660";
+}
 
 .color-black {
   color: #282f38;
@@ -183,6 +186,39 @@ hr {
 .faster {
   animation-duration: 0.3s !important;
 }
+
+.row {
+  position: relative;
+  margin-left: 0;
+  margin-right: 0;
+  height: auto;
+  zoom: 1;
+  display: block;
+}
+
+.row:after,
+.row:before {
+  content: "";
+  display: table;
+}
+
+.row:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0;
+}
+
+.col {
+  position: relative;
+  float: left;
+  flex: 0 0 auto;
+}
+
+.divider {
+  border-top: 1px solid #282f38;
+}
+
 /*按钮样式*/
 /* button, */
 .btn {
@@ -283,7 +319,8 @@ hr {
   width: 100%;
 }
 
-.form-item input,select {
+.form-item input,
+select {
   font: 15px system-ui;
 }
 

diff --git a/src/background/transaction.js b/src/background/transaction.js
index 15d2f0d..11c6d9b 100644 (file)
--- a/src/background/transaction.js
+++ b/src/background/transaction.js
@@ -8,15 +8,21 @@ transaction.prototype.list = function(guid, address) {
   return this.bytom.transaction.list(guid, address);
 };
 
-transaction.prototype.transfer = function(guid, to, asset, amount, fee, password){
+transaction.prototype.build = function(guid, to, asset, amount, fee){
     let retPromise = new Promise((resolve, reject) => {
         this.bytom.transaction.buildPayment(guid, to, asset, Number(amount*100000000)).then(res => {
-            this.bytom.transaction.signTransaction(guid, JSON.stringify(res.data), password).then(ret => {
-                this.bytom.transaction.submitPayment(guid, ret.raw_transaction, ret.signatures).then(res3 => {
-                    resolve(res3);
-                }).catch(error => {
-                    reject(error);
-                });
+            resolve(res);
+        }).catch(error => {
+            reject(error);
+        });
+    })
+    return retPromise;
+}
+transaction.prototype.transfer = function(guid, transaction, password){
+    let retPromise = new Promise((resolve, reject) => {
+        this.bytom.transaction.signTransaction(guid, JSON.stringify(transaction), password).then(ret => {
+            this.bytom.transaction.submitPayment(guid, ret.raw_transaction, ret.signatures).then(res3 => {
+                resolve(res3);
             }).catch(error => {
                 reject(error);
             });

diff --git a/src/popup/home/components/modal-passwd.vue b/src/popup/home/components/modal-passwd.vue
new file mode 100644 (file)
index 0000000..302ca70
--- /dev/null
+++ b/src/popup/home/components/modal-passwd.vue
@@ -0,0 +1,80 @@
+<style scoped>
+.mask {
+  z-index: 3 !important;
+  top: 60px !important;
+}
+
+.confirm {
+  padding: 10px 20px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 4;
+}
+
+.btn-inline {
+  display: flex;
+  padding: 0;
+}
+.btn-inline .btn {
+  margin: 10px 15px;
+}
+</style>
+
+<template>
+    <div>        
+        <section v-show="show" class="mask"></section>
+        <transition name="page-transfer"
+        <!-- enter-active-class="animated slideInUp faster" 
+        leave-active-class="animated slideOutDown faster"> -->
+            <div v-show="show" class="confirm form bg-gray">
+                <div class="form-item">
+                    <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
+                    <div class="form-item-content" style="margin-left: 85px;">
+                    <input type="password" v-model="passwd" autofocus>
+                    </div>
+                </div>
+                <div class="btn-group btn-inline">
+                    <div class="btn bg-green" @click="confirm">确认</div>
+                    <div class="btn bg-red" @click="close">取消</div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+      passwd: ""
+    };
+  },
+  methods: {
+    open() {
+      this.show = true;
+
+      this.passwd = "";
+    },
+    close() {
+      this.show = false;
+    },
+    confirm() {
+      if (this.passwd == "") {
+        this.$dialog.show({
+          body: this.$t("transfer.emptyPassword")
+        });
+        return;
+      }
+
+      this.close();
+      this.$emit("confirm", this.passwd);
+    }
+  }
+};
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file

diff --git a/src/popup/home/components/transfer-confirm.vue b/src/popup/home/components/transfer-confirm.vue
new file mode 100644 (file)
index 0000000..7bfd064
--- /dev/null
+++ b/src/popup/home/components/transfer-confirm.vue
@@ -0,0 +1,172 @@
+<style lang="" scoped>
+.warp {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 600px;
+  z-index: 2;
+}
+.header {
+  height: 60px;
+}
+
+.content {
+  padding: 25px 30px;
+}
+
+.ft {
+  border-radius: 5px;
+  padding: 0 20px !important;
+  line-height: 45px;
+  margin-bottom: 20px;
+}
+
+.ft .from {
+  overflow-x: hidden;
+  width: 90px;
+}
+.ft .to {
+  overflow-x: hidden;
+  padding-left: 20px;
+  float: right;
+}
+
+.right-arrow {
+  width: 32px;
+  height: 32px;
+  border-top: 12px solid #3c454b;
+  border-right: 12px solid #3c454b;
+  transform: rotate(45deg);
+  position: absolute;
+  left: 105px;
+}
+
+.row {
+  padding: 12px 10px;
+}
+.value {
+  float: right;
+}
+.value .uint {
+  font-size: 12px;
+  margin-left: 3px;
+}
+
+.fee-intro {
+  font-size: 10px;
+}
+
+.btn-inline {
+  display: flex;
+  padding: 0;
+}
+.btn-inline .btn {
+  margin: 10px 15px;
+}
+</style>
+
+<template>
+  <div>
+    <transition name="page-transfer"
+        <!-- enter-active-class="animated slideInUp faster" 
+        leave-active-class="animated slideOutDown faster"> -->
+        <div v-show="show" class="warp bg-gray">
+          <section class="header bg-green">
+            <i class="iconfont icon-back" @click="show=false"></i>
+          </section>
+
+          <section class="content">
+            <div class="row bg-green ft">
+              <div class="col from">{{account.alias}}</div>
+              <div class="col right-arrow"></div>
+              <div class="col to">{{transaction.toShort}}</div>
+            </div>
+            <div class="row">
+              <div class="col label">转账金额</div>
+              <div class="col value">{{transaction.amount}}<span class="uint">BTM</span></div>
+            </div>
+            <div class="row">
+              <div class="col label">矿工费用</div>
+              <div class="col value">{{transaction.fee}}<span class="uint">BTM</span></div>
+            </div>
+
+            <div class="divider" style="margin-top: 30px; margin-bottom: 10px;"></div>
+            <div class="row" style="text-align: right;">
+              <div class="col label" style="line-height: 50px;">总计</div>
+              <div class="col value">
+                <p class="fee-intro">转账费用+矿工费用</p>
+                {{transaction.amount+transaction.fee}}<span class="uint">BTM</span>
+              </div>
+            </div>
+            <div class="row" style="margin: 20px;">
+              <div class="btn bg-green" @click="$refs.modalPasswd.open()">{{ $t('transfer.confirm') }}</div>
+            </div>
+          </section>
+        </div>
+    </transition>
+
+    <modalPasswd ref="modalPasswd" @confirm="transfer"></modalPasswd>
+  </div>
+</template>
+
+<script>
+import bytom from "../../script/bytom";
+import utils from "../../script/utils";
+import modalPasswd from "./modal-passwd";
+export default {
+  components: {
+    modalPasswd
+  },
+  data() {
+    return {
+      show: false,
+      rawData: {},
+      account: {},
+      transaction: {
+        to: "",
+        toShort: "",
+        amount: 0,
+        fee: "",
+      }
+    };
+  },
+  methods: {
+    open: function(account, transaction, data) {
+      console.log(transaction);
+      this.account = account;
+      this.transaction = transaction;
+      this.transaction.toShort = utils.shortAddress(transaction.to, 4);
+      this.rawData = data;
+      this.show = true;
+    },
+    close: function() {
+      this.show = false;
+    },
+    transfer: function(passwd) {
+      let loader = this.$loading.show({
+        // Optional parameters
+        container: null,
+        canCancel: true,
+        onCancel: this.onCancel
+      });
+
+      // rawData, password
+      bytom.Transaction.transfer(this.account.guid, this.rawData, passwd)
+        .then(ret => {
+          loader.hide();
+          console.log(ret);
+
+          this.close();
+          this.$emit("on-success");
+        })
+        .catch(error => {
+          loader.hide();
+          this.$dialog.show({
+            body: error.message
+          });
+        });
+    }
+  }
+};
+</script>
\ No newline at end of file

diff --git a/src/popup/home/components/transfer.vue b/src/popup/home/components/transfer.vue
index dde7fd6..e03704e 100644 (file)
--- a/src/popup/home/components/transfer.vue
+++ b/src/popup/home/components/transfer.vue
@@ -28,10 +28,6 @@
   font-size: 18px;
   margin-left: 2px;
 }
-.mask {
-  z-index: 3 !important;
-  top: 150px !important;
-}
 .form {
   padding: 10px 20px;
 }
@@ -41,14 +37,6 @@
 .form-item-group .form-item {
   width: 40%;
 }
-.confirm {
-  padding: 10px 20px;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 4;
-}
 
 .btn-inline {
   display: flex;
@@ -66,19 +54,18 @@
       leave-active-class="animated fadeOutLeft faster">
       <div v-show="show" class="warp bg-gray">
         <section class="header bg-green">
-          <i class="iconfont icon-back" @click="show=false; confirmClose()"></i>
+          <i class="iconfont icon-back" @click="close"></i>
           <div class="balance">
             <img src="../../../assets/logo.png" class="token-icon">
-            <div class="token-amount">{{balance}}<span class="asset">BTM</span></div>
+            <div class="token-amount">{{account.balance}}<span class="asset">BTM</span></div>
           </div>
         </section>
         
-        <section v-show="maskShow" class="mask"></section>
         <section class="form">
           <div class="form-item-group">
             <div class="form-item">
               <!-- <label>账户</label> -->
-              <select v-model="transaction.guid">
+              <select v-model="guid">
                 <option :key="index" v-for="(account, index) in accounts" :value="account.guid">{{account.alias != null ? account.alias : '账户1'}}</option>
               </select>
             </div>
@@ -117,59 +104,59 @@
           </div>
           <br>
           <div style="width: 200px; margin: 0 auto;">
-            <div class="btn bg-green" @click="confirmOpen">{{ $t('transfer.send') }}</div>
+            <div class="btn bg-green" @click="send">{{ $t('transfer.send') }}</div>
           </div>
         </section>
       </div>
     </transition>
 
-    <transition name="page-transfer"
-        <!-- enter-active-class="animated slideInUp faster" 
-        leave-active-class="animated slideOutDown faster"> -->
-        <div v-show="confirmShow" class="confirm form bg-gray">
-            <div class="form-item">
-              <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
-              <div class="form-item-content" style="margin-left: 85px;">
-                <input type="password" v-model="transaction.passwd" autofocus>
-              </div>
-            </div>
-            <div class="btn-group btn-inline">
-              <div class="btn bg-green" @click="confirmTransfer">{{ $t('transfer.confirm') }}</div>
-              <div class="btn bg-red" @click="confirmClose">{{ $t('transfer.cancel') }}</div>
-            </div>
-        </div>
-    </transition>
+    <TransferConfirm ref="transferConfirm" @on-success="close"></TransferConfirm>
   </div>
 </template>
 
 <script>
 import bytom from "../../script/bytom";
+<<<<<<< Updated upstream
 import getLang from "../../../assets/language/sdk"
+=======
+import TransferConfirm from "./transfer-confirm";
+>>>>>>> Stashed changes
 export default {
-  name: "",
+  components: {
+    TransferConfirm
+  },
   data() {
     const ASSET_BTM =
       "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff";
     return {
       show: false,
-      maskShow: false,
-      confirmShow: false,
-      balance: 0,
       accounts: [],
-      unit: this.$t("transfer.unit"),
+      unit: "",
       assets: {
         ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff: "BTM"
       },
+      guid: "",
+      account: {
+        guid: ""
+      },
       transaction: {
-        guid: "",
         to: "",
         asset: ASSET_BTM,
         amount: 0,
-        fee: "",
-        passwd: ""
+        fee: ""
       }
     };
   },
+  watch: {
+    guid: function(newGuid) {
+      this.accounts.forEach(account => {
+        if (account.guid == newGuid) {
+          this.account = account;
+          return;
+        }
+      });
+    }
+  },
   methods: {
     open: function(accountInfo) {
       this.show = true;
@@ -178,69 +165,55 @@ export default {
         this.accounts = accounts;
       });
 
-      this.balance = accountInfo.balance;
-      this.transaction.guid = accountInfo.guid;
+      this.account = accountInfo;
+      this.guid = accountInfo.guid;
       this.unit = this.assets[this.transaction.asset];
     },
     close: function() {
       this.show = false;
+      this.transaction.to = "";
+      this.transaction.amount = 0;
     },
-    confirmOpen: function() {
+    send: function() {
       if (this.transaction.to == "") {
         this.$dialog.show({
-          body: this.$t("transfer.emptyTo"),
+          body: this.$t("transfer.emptyTo")
         });
         return;
       }
       let num = parseInt(this.transaction.amount);
-      if (isNaN(num) || num<=0) {
-        this.$dialog.show({
-          body: this.$t("transfer.noneBTM"),
-        });
-        return;
-      }
-      this.maskShow = true;
-      this.confirmShow = true;
-    },
-    confirmClose: function() {
-      this.confirmShow = false;
-      this.maskShow = false;
-    },
-    confirmTransfer: function() {
-      if (this.transaction.passwd == "") {
+      if (isNaN(num) || num <= 0) {
         this.$dialog.show({
-          body: this.$t("transfer.emptyPassword"),
+          body: this.$t("transfer.noneBTM")
         });
         return;
       }
+
       let loader = this.$loading.show({
         // Optional parameters
         container: null,
         canCancel: true,
         onCancel: this.onCancel
       });
-      // guid, to, asset, amount, fee, password
-      bytom.Transaction.transfer(
-        this.transaction.guid,
+      bytom.Transaction.build(
+        this.account.guid,
         this.transaction.to,
         this.transaction.asset,
         this.transaction.amount,
-        this.transaction.fee,
-        this.transaction.passwd
+        this.transaction.fee
       )
         .then(ret => {
           console.log(ret);
-
           loader.hide();
-          this.close();
-          this.confirmClose();
-          this.$emit("on-success");
-          this.transaction.passwd = "";
+
+          this.$refs.transferConfirm.open(
+            this.account,
+            this.transaction,
+            ret.data
+          );
         })
         .catch(error => {
           loader.hide();
-          this.confirmClose();
-          this.transaction.passwd = "";
           this.$dialog.show({
             body: getLang(error.message)
           });

diff --git a/src/popup/home/main.vue b/src/popup/home/main.vue
index 96cdfd2..9a03be8 100644 (file)
--- a/src/popup/home/main.vue
+++ b/src/popup/home/main.vue
@@ -178,6 +178,7 @@ import Qrcode from "./components/qrcode";
 import Transfer from "./components/transfer";
 import TxInfo from "./components/tx-info";
 import bytom from "../script/bytom";
+import utils from "../script/utils";
 export default {
   name: "",
   components: {
@@ -204,18 +205,13 @@ export default {
 
       this.$refs.menu.updateAccounts();
     },
-    shortAddress(address) {
-      return (
-        address.substr(0, 7) + "..." + address.substr(address.length - 7, 7)
-      );
-    },
     accountClear: function() {
       this.accountInfo = {};
       this.transcations = [];
     },
     accountLoader: function(accountInfo) {
       this.accountInfo = accountInfo;
-      this.accountInfo.address_short = this.shortAddress(
+      this.accountInfo.address_short = utils.shortAddress(
         this.accountInfo.address
       );
       this.refreshTransactions();
@@ -249,14 +245,15 @@ export default {
           outputAddresses.push(output.address);
         });
 
+        console.log(transaction);
         let val = outoutSum - inputSum;
         if (val > 0) {
           transaction.direct = "+";
-          transaction.address = this.shortAddress(inputAddresses.pop());
+          transaction.address = utils.shortAddress(inputAddresses.pop());
         } else {
           val = inputSum - outoutSum;
           transaction.direct = "-";
-          transaction.address = this.shortAddress(outputAddresses.pop());
+          transaction.address = utils.shortAddress(outputAddresses.pop());
         }
         transaction.val = Number(val / 100000000).toFixed(8);
       });

diff --git a/src/popup/script/utils.js b/src/popup/script/utils.js
new file mode 100644 (file)
index 0000000..742e8c3
--- /dev/null
+++ b/src/popup/script/utils.js
@@ -0,0 +1,17 @@
+let utils = {};
+
+utils.shortAddress = function(address, length) {
+  if (address == undefined) {
+    return '-';
+  }
+
+  if (length == undefined) {
+    length = 7;
+  }
+
+  let startSome = address.substr(0, length);
+  let endSome = address.substr(address.length - length, length);
+  return startSome + "..." + endSome;
+};
+
+export default utils;