src/views/sendTransaction/crossChainTransaction.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 .transferType {
  11   /*width: 280px;*/
  12   /*height: 40px;*/
  13     margin: 20px;
  14   display: flex;
  15 }
  16
  17 .transferType input[type=radio] {
  18   position: absolute;
  19   visibility: hidden;
  20 }
  21
  22 .transferType input[type="radio"]:checked+label{
  23   color:white;
  24   background-color: #333333;
  25 }
  26
  27 .choice {
  28   border: 1px solid;
  29   border-radius: 6px;
  30   cursor: pointer;
  31   padding: 20px;
  32   font-size: 14px;
  33   white-space:pre-wrap;
  34   display: block;
  35   background-color: white;
  36   width:108px;
  37   margin-right:20px;
  38 }
  39
  40 .choice:hover {
  41      background-color: #f7f7f7;
  42    }
  43
  44 .form-container{
  45   margin: 20px;
  46 }
  47 .form {
  48     margin-bottom: 20px;
  49     padding: 10px 15px;
  50     border-radius:4px;
  51 }
  52 .form-container .btn{
  53     height: 48px;
  54     bottom: 20px;
  55     position: absolute;
  56     width: 320px;
  57 }
  58   .small{
  59     font-size: 12px;
  60   }
  61 .wallet{
  62   width: 40px;
  63   height: 40px;
  64   background: rgba(255,255,255,0.1);
  65   border-radius: 50%;
  66   color: white;
  67   margin-right: 20px;
  68   line-height: 40px;
  69   text-align: center;
  70 }
  71 </style>
  72
  73 <template>
  74     <div class="warp-chlid bg-gray">
  75         <section class="header bg-header">
  76             <i class="iconfont icon-back" @click="close"></i>
  77             <p>{{ $t('crossChain.title') }}</p>
  78         </section>
  79
  80         <section class="transferType">
  81           <div>
  82             <input type="radio" id="typeChoice1"
  83                    value="toVapor" v-model="transaction.type">
  84             <label class="choice" for="typeChoice1">{{$t('crossChain.toVapor')}}</label>
  85
  86           </div>
  87           <div>
  88             <input type="radio" id="typeChoice2"
  89                    value="toBytom" v-model="transaction.type">
  90             <label class="choice" for="typeChoice2">{{$t('crossChain.toBytom')}}</label>
  91
  92           </div>
  93         </section>
  94
  95         <section class="form-container">
  96           <div class="form bg-white">
  97               <!--<div class="form-item">-->
  98                   <!--<label class="form-item-label">{{ $t('crossChain.asset') }}</label>-->
  99                   <!--&lt;!&ndash;<div class="form-item-content" >&ndash;&gt;-->
 100                     <!--<v-select style="height: 32px;" class="v-select" v-bind:colorBlack="true" :clearable="false" :value="aOptions[0]" :options="aOptions"></v-select>-->
 101                   <!--&lt;!&ndash;</div>&ndash;&gt;-->
 102               <!--</div>-->
 103               <div class="form-item">
 104                   <label class="form-item-label">
 105                     {{ $t('transfer.quantity') }}
 106
 107                     <small class="float-right" style="margin-right: 8px;">{{ transaction.cost||0 }} CNY</small>
 108                   </label>
 109                   <div class="form-item-content" style=" display: flex;">
 110                       <input type="number" v-model="transaction.amount" :placeholder="bytomBalance">
 111                       <span class="color-grey" style="width: 40px; font-size: 15px;position: absolute;right: 0;">{{unit}}</span>
 112                   </div>
 113                   <p class="small color-grey">{{$t('crossChain.amountHint')}}</p>
 114               </div>
 115           </div>
 116           <a class="btn btn-primary" @click="send">{{ $t('transfer.send') }}</a>
 117         </section>
 118     </div>
 119 </template>
 120
 121 <script>
 122 import account from "@/models/account";
 123 import transaction from "@/models/transaction";
 124 import getLang from "@/assets/language/sdk";
 125 import Confirm from "./transferConfirm";
 126 import { BTM } from "@/utils/constants";
 127 import { mapActions, mapGetters, mapState } from 'vuex'
 128 import * as Actions from '@/store/constants';
 129
 130 export default {
 131     components: {
 132         Confirm
 133     },
 134     data() {
 135         const ASSET_BTM =
 136             "ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff";
 137         return {
 138             selectAsset: {
 139                 assets: ASSET_BTM,
 140                 name: "BTM"
 141             },
 142             assetOptions: [
 143                 {
 144                     assets: ASSET_BTM,
 145                     name: "BTM"
 146                 }
 147             ],
 148             aOptions: [
 149               { label: "BTM", value: ASSET_BTM },
 150             ],
 151             show: false,
 152             assets: {
 153                 ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff: "BTM"
 154             },
 155             guid: null,
 156             account: {},
 157             accountBalance: 0.00,
 158             fee: this.$t("transfer.feeType"),
 159             feeTypeOptions: [this.$t("transfer.feeType")],
 160             transaction: {
 161                 type:'toVapor',
 162                 asset: ASSET_BTM,
 163                 fee: 0,
 164                 amount: "",
 165                 to:'',
 166                 confirmations: 1
 167             }
 168         };
 169     },
 170     computed: {
 171         unit() {
 172             return this.assets[this.transaction.asset];
 173         },
 174       bytomBalance: function () {
 175         let balance, balances
 176         if(this.transaction.type === 'toVapor'){
 177           balances = this.currentAccount.balances
 178         }else if(this.transaction.type === 'toBytom'){
 179           balances = this.currentAccount.vpBalances
 180         }
 181         if(balances && balances.length >0 ){
 182           const balanceObject = balances.filter(b => b.asset === BTM)[0]
 183           balance = balanceObject.balance/Math.pow(10,balanceObject.decimals)
 184         }
 185
 186         if(this.transaction.type === 'toVapor'){
 187           return `Bytom${this.$t("crossChain.amountPlaceHolder")}${(balance != null && balance != 0) ? balance : '0.00'}`
 188         }else{
 189           return `Vapor${this.$t("crossChain.amountPlaceHolder")}${(balance != null && balance != 0) ? balance : '0.00'}`
 190         }
 191       },
 192       ...mapState([
 193         'bytom'
 194       ]),
 195       ...mapGetters([
 196         'currentAccount',
 197         'accountList',
 198         'net',
 199         'netType'
 200       ])
 201     },
 202     watch: {
 203         selectAsset: function (val) {
 204             this.transaction.asset = val.assets;
 205         },
 206         "transaction.amount": function (newAmount) {
 207             transaction.asset(this.transaction.asset).then(ret => {
 208                 this.transaction.cost = Number(ret.cny_price * newAmount).toFixed(2);
 209             });
 210         },
 211         account: function (newAccount) {
 212             this.guid = newAccount.guid;
 213         },
 214         guid: function (newGuid) {
 215             this.accountList.forEach(account => {
 216                 if (account.guid == newGuid.guid) {
 217                     this.account = account;
 218                     return;
 219                 }
 220             });
 221
 222             account.balance(newGuid).then(balances => {
 223               let balance = 0.00
 224               if(balances.length >0 ) {
 225                 const balanceObject = balances.filter(b => b.asset === BTM)[0]
 226                 balance = balanceObject.balance / Math.pow(10, balanceObject.decimals)
 227               }
 228                 this.accountBalance = balance;
 229             }).catch(error => {
 230                 console.log(error);
 231             });
 232         }
 233     },
 234     methods: {
 235         close: function () {
 236             this.$router.go(-1)
 237             this.transaction.to = "";
 238             this.transaction.amount = "";
 239             account.setupNet(`${this.net}${this.netType}`);
 240             if(this.$route.query.type == 'popup'){
 241                window.close();
 242             }
 243         },
 244         send: function () {
 245             if (this.transaction.amount <= 0) {
 246                 this.$dialog.show({
 247                     body: this.$t("transfer.noneBTM")
 248                 });
 249                 return;
 250             }
 251
 252             let loader = this.$loading.show({
 253                 // Optional parameters
 254                 container: null,
 255                 canCancel: true,
 256                 onCancel: this.onCancel
 257             });
 258
 259             // Bytom => Vapor
 260             if(this.transaction.type === 'toVapor'){
 261               transaction.chainStatus().then((resp)=>{
 262                 const address = resp.federation_address
 263                 account.setupNet(`${this.net}bytom`)
 264                 this.transaction.to = address
 265                 transaction.build(this.account.guid, address, this.transaction.asset, this.transaction.amount*100000000, this.transaction.confirmations).then(result => {
 266                   loader.hide();
 267                   this.transaction.fee = Number(result.fee / 100000000);
 268                   this.$router.push({ name: 'transfer-confirm', params: { account: this.account, transaction: this.transaction, rawData: result, type: this.$route.query.type } })
 269                 }).catch(error => {
 270                   loader.hide();
 271                   this.$dialog.show({
 272                     body: getLang(error.message)
 273                   });
 274                 });
 275               })
 276             }
 277
 278             // Vapor => Bytom
 279             else{
 280               const address = this.account.address
 281               account.setupNet(`${this.net}vapor`)
 282               this.transaction.to = address
 283               transaction.buildCrossChain(this.account.guid, address, this.transaction.asset, this.transaction.amount*100000000, this.transaction.confirmations).then(result => {
 284                   loader.hide();
 285                 this.transaction.fee = Number(result.fee / 100000000);
 286                 this.$router.push({ name: 'transfer-confirm', params: { account: this.account, transaction: this.transaction, rawData: result, type: this.$route.query.type } })
 287               }).catch(error => {
 288                   loader.hide();
 289                   this.$dialog.show({
 290                       body: getLang(error.message)
 291                   });
 292               });
 293             }
 294
 295         }
 296     }, mounted() {
 297         //detect injection
 298         if(this.$route.query.type === 'popup'){
 299           if (this.$route.query.from != undefined) {
 300               this.guid = this.$route.query.from
 301               this.account = this.accountList.filter(e => e.guid === this.guid)[0]
 302           }
 303
 304           if (this.$route.query.asset != undefined) {
 305               this.transaction.asset= this.$route.query.asset
 306           }
 307           if (this.$route.query.to != undefined) {
 308               this.transaction.to = this.$route.query.to
 309           }
 310           if (this.$route.query.amount != undefined) {
 311               this.transaction.amount = this.$route.query.amount /100000000
 312           }
 313           if (this.$route.query.gas != undefined) {
 314               this.transaction.fee = this.$route.query.gas /100000000
 315           }
 316           if(this.$route.query.confirmations != undefined) {
 317               this.transaction.confirmations = this.$route.query.confirmations
 318           }
 319         }else{
 320           this.account = this.currentAccount
 321         }
 322     }
 323 };
 324 </script>