src/views/sendTransaction/transfer.vue

   1 <style lang="" scoped>
   2 .header {
   3   display: flex;
   4 }
   5 .header p{
   6   text-align: center;
   7   width: 270px;
   8   padding-top: 17px;
   9 }
  10 .balance {
  11   width: 280px;
  12   height: 40px;
  13     margin: 20px;
  14     padding: 20px;
  15   display: flex;
  16 }
  17 .balance .token-icon {
  18     height: 38px;
  19     width: 38px;
  20     margin-right: 5px;
  21 }
  22 .balance .token-amount {
  23     display: inline-block;
  24 }
  25 .balance .token-amount .asset {
  26     font-size: 18px;
  27     margin-left: 2px;
  28     text-transform: uppercase;
  29 }
  30 .form-container{
  31   margin: 20px;
  32 }
  33 .form {
  34     margin-bottom: 20px;
  35     padding: 10px 15px;
  36     border-radius:4px;
  37 }
  38 .form-container .btn{
  39     height: 48px;
  40     bottom: 20px;
  41     position: absolute;
  42     width: 320px;
  43 }
  44   .small{
  45     font-size: 12px;
  46   }
  47 .transfer-header{
  48   background-image: url("../../assets/img/backgroundHead/transfer.svg");
  49   background-size: 320px 80px;
  50 }
  51 .wallet{
  52   width: 40px;
  53   height: 40px;
  54   background: rgba(255,255,255,0.1);
  55   border-radius: 50%;
  56   color: white;
  57   margin-right: 20px;
  58   line-height: 40px;
  59   text-align: center;
  60 }
  61
  62 .asset-option{
  63   font-size: 15px;
  64   text-transform: uppercase;
  65 }
  66
  67 .asset-option  .asset-id{
  68   font-size: 13px;
  69 }
  70
  71 .v-select{
  72   height: 50px;
  73   width: 100%;
  74   background: rgba(247,247,247,1);
  75   font-size: 14px;
  76   margin: auto;
  77   border-bottom: 1px solid #E0E0E0;
  78 }
  79
  80 </style>
  81
  82 <template>
  83     <div class="warp-chlid bg-gray">
  84         <section class="header bg-header">
  85             <i class="iconfont icon-back" @click="close"></i>
  86             <p>{{ $t('main.send') }}</p>
  87         </section>
  88
  89         <section class="balance transfer-header">
  90           <div class="wallet">
  91             <i class="iconfont icon-wallet"></i>
  92           </div>
  93           <div>
  94             <div class="token-amount">
  95                 {{accountBalance}}
  96                 <span v-if="selectAsset.symbol" class="asset">{{selectAsset.symbol}}</span>
  97             </div>
  98             <div class="small color-grey">
  99               {{currentAccount.alias}}
 100             </div>
 101           </div>
 102         </section>
 103
 104         <section class="form-container">
 105           <div class="form bg-white">
 106               <div class="form-item">
 107                   <label class="form-item-label">{{ $t('transfer.asset') }}</label>
 108                   <div class="form-item-content" >
 109                     <v-select :options="assets" v-bind:colorBlack="true" :clearable="false" :value="selectAsset" :onChange="assetChange" label="asset">
 110                       <template slot="selected-option" slot-scope="asset">
 111                         <div class="asset-option">
 112                           <div>{{asset.symbol || 'Asset'}}</div>
 113                           <div  class="color-grey asset-id">{{shortAddress(asset.asset)}}</div>
 114                         </div>
 115                       </template>
 116                       <template slot="option" slot-scope="asset">
 117                         <div class="asset-option">
 118                           <div>{{asset.symbol || 'Asset'}}</div>
 119                           <div class="color-grey  asset-id">{{shortAddress(asset.asset)}}</div>
 120                         </div>
 121                       </template>
 122                     </v-select>
 123                   </div>
 124               </div>
 125               <div class="form-item">
 126                 <label class="form-item-label">{{ $t('transfer.address') }}</label>
 127                 <div class="form-item-content" >
 128                   <input type="text" v-model="transaction.to">
 129                 </div>
 130               </div>
 131               <div class="form-item">
 132                   <label class="form-item-label">
 133                     {{ $t('transfer.quantity') }}
 134
 135                     <small class="float-right" style="margin-right: 8px;">{{formatCurrency(transaction.cost||0)}}</small>
 136                   </label>
 137                   <div class="form-item-content" style=" display: flex;">
 138                     <input type="number" v-model="transaction.amount" placeholder="0" @keypress="limitAmount">
 139                       <span class="color-grey" style="font-size: 15px;position: absolute;right: 0;text-transform: uppercase;">{{unit}}</span>
 140                   </div>
 141               </div>
 142               <div class="form-item">
 143                   <label class="form-item-label">{{ $t('transfer.fee') }}</label>
 144                   <div class="form-item-content" >
 145                       <!--<v-select :clearable="false" v-model="fee" style="height: 32px;" :options="feeTypeOptions"></v-select>-->
 146                     <input type="text"  v-model="fee" disabled >
 147                   </div>
 148               </div>
 149           </div>
 150           <a class="btn btn-primary" @click="send">{{ $t('transfer.send') }}</a>
 151         </section>
 152     </div>
 153 </template>
 154
 155 <script>
 156   import address from "@/utils/address";
 157   import account from "@/models/account";
 158 import transaction from "@/models/transaction";
 159 import getLang from "@/assets/language/sdk";
 160 import Confirm from "./transferConfirm";
 161 import { BTM } from "@/utils/constants";
 162   import { Number as Num } from "@/utils/Number"
 163 import { mapActions, mapGetters, mapState } from 'vuex'
 164 import * as Actions from '@/store/constants';
 165   import _ from 'lodash'
 166
 167   const currencyInPrice = {
 168     in_cny: 'cny_price',
 169     in_usd: 'usd_price',
 170     in_btc:'btc_price'
 171   }
 172
 173 export default {
 174     components: {
 175         Confirm
 176     },
 177     data() {
 178         return {
 179             selectAsset: {
 180                 asset: BTM,
 181                 symbol: "BTM",
 182                 decimals:8
 183             },
 184             show: false,
 185             guid: null,
 186             account: {},
 187             accountBalance: 0.00,
 188             fee: this.$t("transfer.feeType"),
 189             feeTypeOptions: [this.$t("transfer.feeType")],
 190             transaction: {
 191                 to: "",
 192                 asset: BTM,
 193                 amount: "",
 194                 fee: null,
 195                 cost: "",
 196                 confirmations: 1
 197             }
 198         };
 199     },
 200     computed: {
 201         assets(){
 202           if(this.netType === 'vapor'){
 203             if(!this.currentAccount.vpBalances ||this.currentAccount.vpBalances.length == 0){
 204               return [this.selectAsset]
 205             }else{
 206               return this.currentAccount.vpBalances
 207             }
 208           }else{
 209             if(!this.currentAccount.balances ||this.currentAccount.balances.length == 0){
 210               return [this.selectAsset]
 211             }else{
 212               return this.currentAccount.balances
 213             }
 214           }
 215         },
 216         unit() {
 217             return this.selectAsset.symbol;
 218         },
 219       ...mapState([
 220         'bytom'
 221       ]),
 222       ...mapGetters([
 223         'currentAccount',
 224         'accountList',
 225         'currency',
 226         'netType'
 227       ])
 228     },
 229     watch: {
 230         "transaction.amount": function (newAmount) {
 231             const singlePrice = this.selectAsset[currencyInPrice[this.currency]]||this.selectAsset[this.currency]||0
 232             this.transaction.cost = Number( singlePrice * newAmount).toFixed(2);
 233         },
 234         account: function (newAccount) {
 235             this.guid = newAccount.guid;
 236         },
 237         guid: function (newGuid) {
 238             this.accountList.forEach(account => {
 239                 if (account.guid == newGuid.guid) {
 240                     this.account = account;
 241                     return;
 242                 }
 243             });
 244
 245             account.balance(newGuid).then(obj => {
 246               const balances = obj.balances
 247               let balance = 0.00
 248               if(balances.length >0 ) {
 249                 const balanceObject = balances.filter(b => b.asset === this.selectAsset.asset)[0]
 250                 balance = Num.formatNue(balanceObject.balance, balanceObject.decimals)
 251               }
 252                 this.accountBalance = balance;
 253             }).catch(error => {
 254                 console.log(error);
 255             });
 256         }
 257     },
 258     methods: {
 259         shortAddress: function (add) {
 260           return address.short(add)
 261         },
 262         formatCurrency: function (num) {
 263           return Num.formatCurrency(num, this.currency)
 264         },
 265         limitAmount ($event) {
 266           // restrict to 2 decimal places
 267           if(this.transaction.amount!=null && this.transaction.amount.indexOf(".")>-1 && (this.transaction.amount.split('.')[1].length > (this.selectAsset.decimals-1))){
 268             $event.preventDefault();
 269           }
 270         },
 271         assetChange: function (val) {
 272           if(val.asset !== this.selectAsset.asset){
 273             this.transaction.asset = val.asset;
 274             const balances = this.netType === 'vapor'?this.currentAccount.vpBalances:this.currentAccount.balances
 275             let balance = 0.00
 276             if(balances.length >0 ) {
 277               const balanceObject = balances.filter(b => b.asset === val.asset)[0]
 278               balance = Num.formatNue(balanceObject.balance, balanceObject.decimals)
 279             }
 280             this.accountBalance = balance;
 281             transaction.asset(val.asset).then(ret => {
 282               this.selectAsset = Object.assign(ret,val)
 283               this.transaction.cost = Number(ret[currencyInPrice[this.currency]] * this.transaction.amount).toFixed(2);
 284             });
 285           }
 286         },
 287         close: function () {
 288             this.$router.go(-1)
 289             this.transaction.to = "";
 290             this.transaction.amount = "";
 291             if(this.$route.query.type == 'popup'){
 292                window.close();
 293             }
 294         },
 295         send: function () {
 296             if (this.transaction.to == "") {
 297                 this.$dialog.show({
 298                     body: this.$t("transfer.emptyTo")
 299                 });
 300                 return;
 301             }
 302
 303             if (this.transaction.amount <= 0) {
 304                 this.$dialog.show({
 305                     body: this.$t("transfer.noneBTM")
 306                 });
 307                 return;
 308             }
 309
 310             let loader = this.$loading.show({
 311                 // Optional parameters
 312                 container: null,
 313                 canCancel: true,
 314                 onCancel: this.onCancel
 315             });
 316             transaction.build(this.account.guid, this.transaction.to, this.transaction.asset, Num.convertToNue(this.transaction.amount,this.selectAsset.decimals), this.transaction.fee, this.transaction.confirmations).then(result => {
 317                 loader.hide();
 318                 if(!this.transaction.fee){
 319                     this.transaction.fee = Number( _.sumBy(result, 'fee') / 100000000);
 320                 }
 321                 this.$router.push({ name: 'transfer-confirm', params: { account: this.account, transaction: this.transaction, rawData: result, assetAlias: this.selectAsset.symbol, type: this.$route.query.type } })
 322             }).catch(error => {
 323                 loader.hide();
 324                 this.$dialog.show({
 325                     body: getLang(error.message)
 326                 });
 327             });
 328         }
 329     }, mounted() {
 330         //detect injection
 331         if(this.$route.query.type === 'popup'){
 332           if (this.$route.query.from != undefined) {
 333               this.guid = this.$route.query.from
 334               this.account = this.accountList.filter(e => e.guid === this.guid)[0]
 335           }
 336
 337           if (this.$route.query.asset != undefined) {
 338             const currentAssetId = this.$route.query.asset
 339
 340             this.transaction.asset= currentAssetId
 341
 342             const assets = this.assets
 343             this.selectAsset = assets.filter(b => b.asset === currentAssetId.toLowerCase())[0]
 344
 345
 346           }
 347           if (this.$route.query.to != undefined) {
 348               this.transaction.to = this.$route.query.to
 349           }
 350           if (this.$route.query.amount != undefined) {
 351               this.transaction.amount = this.$route.query.amount /100000000
 352           }
 353           if (this.$route.query.gas != undefined) {
 354               this.transaction.fee = this.$route.query.gas /100000000
 355           }
 356           if(this.$route.query.confirmations != undefined) {
 357               this.transaction.confirmations = this.$route.query.confirmations
 358           }
 359         }else{
 360           this.account = this.currentAccount
 361
 362           const currentAsset = this.currentAccount.balances[0]
 363
 364           if(currentAsset){
 365             transaction.asset(currentAsset.asset).then(ret => {
 366                 this.selectAsset = Object.assign(ret,currentAsset)
 367             });
 368           }
 369         }
 370
 371     }
 372 };
 373 </script>