Como Desenvolver um DApp no VeChain (III): Componentes e Codificação

    > cd vtho-transfer/

    > npm install -g [@vue/cli](http://twitter.com/vue/cli) # Instale o vue-cli.


    > vue create -b -n my-project # Cria um projeto Vue limpo.

    > cd my-project # Agora você está em um espaço de trabalho Vue!

    > npm install vue bootstrap-vue bootstrap # Instalar BootstrapVue.

    > npm install bignumber.js # Biblioteca matemática.

    > npm run serve # Inicia o servidor de desenvolvimento em segundo plano.

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue' // Aqui
import 'bootstrap/dist/css/bootstrap.css' // Aqui
import ' bootstrap-vue/dist/bootstrap-vue.css' // Aqui
importa App de './App.vue'

Vue.use(BootstrapVue) // Aqui

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">
    <div>
      <b-card style= "largura máxima: 30rem;" header="Meu endereço aqui">
        <p>Meu valor aqui <span class="text-primary">VTHO</span></p>

        <b-form-group label="To Address:" label-for= "toaddress">
          <b-form-input id="toaddress" v-model.trim="toaddress"></b-form-input>
        </b-form-group>

        <b-form-group label=" Valor da transferência" label-for="toamount">
          <b-input-group append="VTHO">
            <b-form-input id="toamount" type="number" min="0" v-model.number= "toamount">
            </b-form-input>
          </b-input-group>
        </b-form-group>

        <b-button variant="primary" v-on:click="transfer">
          Transfer
        </ b-button>
      </b-card>
    </div>
  </div>
</template>

<script>
export default
 {


}
</script>

/**
 * Obtém a quantidade de token do detentor de um contrato.
 * @param {String} addressContract 0x endereço inicial.
 * @param {String} addressHolder 0x endereço inicial.
 */
função async getTokenBalance (addressContract, addressHolder) {
  const balanceOfABI = {
      'constant': true,
      'inputs': [
      {
          'name': '_owner',
          'type': 'address'
      }
      ],
      'name': ' balanceOf',
      'outputs': [
      {
          'name': 'balance',
          'type': 'uint256'
      }
      ],
      'payable': false,
      'stateMutability': 'view',
      'type': 'function'
  }
  / / eslint-disable-next-line
  const balanceOfMethod = connex.thor.account(addressContract).method(balanceOfABI)
  const balanceInfo = await balanceOfMethod.call(addressHolder)
  return balanceInfo
}

/**
 * Transferir token de um para outro.
 * @param {String} addressContract Endereço do contrato.
 * @param {String} signerAddress Impõe quem assina a transação.
 * @param {String} toAddress Destinatário da transferência.
 * @param {String} amountEVM Número grande na string.
 * @param {Number} amountHuman Número normal em Javascript.
 * @param {String} símbolo Symbol do token.
 */
async function
 transferToken (addressContract, signerAddress, toAddress, amountEVM, amountHuman, symbol) {
    const transferABI = {
      'constant': false,
      'inputs': [
        {
          'name': '_to',
          'type': 'address'
        },
        {
          'name': '_value',
          'type': 'uint256'
        }
      ],
      'name': 'transfer',
      'outputs': [
        {
          'name': '',
          'type': 'bool'
        }
      ],
      'payable': false,
      'stateMutability': 'nonpayable',
      'type': 'function'
    }
    // eslint-disable-next-line
    const transferMethod = connex.thor.account(addressContract).method(transferABI)
    const transferClause = transferMethod.asClause(toAddress, amountEVM)
    // eslint-disable-next-line
    const signatureService = connex.vendor.sign('tx')
    signatureService
      .signer(signerAddress) // Aplica signatário
      .comment('Token transfer: ' + amountHuman.toString() + ' ' + symbol)


    let transactionInfo = await signatureService.request([
      {
        comment: 'Hello! Transfer Demo!',
        ...transferClause
      }
    ])
    return transactionInfo
  }

 export {
    getTokenBalance,
    transferToken
  }

123.456 * (10 ^ 18) e depois enviar para a EVM. E vice-versa.

const BigNumber = require('bignumber.js')
const DECIMALS = function (points) {
  return new BigNumber(10 ** points) // Decimals = 18 na VTHO e maioria dos contratos.
}

/**
 * Transforma uma string em um número grande.
 * @param {String} aString uma string numérica.
 */
const makeBN = function (aString) {
  return BigNumber(aString)
}

/**
 * Transforma um BigNumber em uma string imprimível.
 * @param {BigNumer} aBigNumber Um número grande.
 * @param {Integer} dp Uma integral de precisão, o padrão é 2.
 */
const printBN = function (aBigNumber, dp = 2) {
  return aBigNumber.toFixed(dp)
}

/**
 * Transforma um grande número EVM em humano normal com precisão compreensível.
 * @param {BigNumber} aBigNumber Um grande número EVM.
 * @param {Number} decimais Precisões que o número EVM possui. O padrão é 18.
 */
const evmToHuman = function (aBigNumber, decimals = 18) {
  return aBigNumber.dividedBy(DECIMALS(decimals))
}

/**
 * Transforma um número humano compreensível em um grande número EVM.
 * @param {String} aNumber Um float/int normal da entrada do usuário.
 * @param {Number} decimais Precisões que o número EVM possui. O padrão é 18.
 * @returns {String} Número representado por string.
 */
const humanToEVM = function (aNumber, decimals = 18) {
  const a = makeBN(aNumber)
  return a.multipliedBy(DECIMALS(decimals)).toString(10)
}

/**
 * Atalho para transformar string de número grande EVM em legível por humanos em formato curto.
 * @param {String} aString String representando o número grande da EVM.
 * @param {Number} decimais Precisões que o número EVM possui. O padrão é 18.
 * @param {BigNumber} dp pontos decimais que o resultado deve manter.
 */
const evmToPrintable = function (aString, decimals = 18, dp = 2) {
  const evmNumber = makeBN(aString)
  const humanNumber = evmToHuman(evmNumber, decimals)
  return printBN(humanNumber, dp)
}

export {
  makeBN,
  printBN,
  evmToHuman,
  humanToEVM,
  evmToPrintable
}

<script>
const operation = require('./operations.js')
const utils = require('./utils.js')
export default {
  data() {
    return {
      myaddress: '0xa7a609b928c4eac077d0e5640f3fa650746c4fcf',
      myamount: 0,
      contract: '0x000000000000000000000000000456e65726779'
    }
  },
  beforeMount () {
    this.refreshTokenBalance()
  },
  métodos: {
    refreshTokenBalance () {
      operações.getTokenBalance(this.contract, this.myaddress) .then
        (result => {
          this.myamount = utils.evmToPrintable (result['decoded']['balance'], this.decimals)
        })
        .then(() => {
          // eslint-disable-next-line
          const ticker = connex.thor.ticker()
          ticker.next( ).then(() => { this.refreshTokenBalance() })
        })
    }
  }
}
</script>

Observação: você sempre pode usar ticker() em vez de setTimeout() para consultar recursivamente o saldo de sua conta. 😉

<script>
: {
 // ... adicionar depois de refreshTokenBalance()
  transfer () { // Confirma e envia uma transferência.
    const evmAmount = utils.humanToEVM(this.toamount.toString(), 18)
    operações.transferToken(this.contract, this.myaddress, this.toaddress, evmAmount, this.toamount, 'VTHO') .then
      (result => { alert('success!')})
      .catch(e => {alert('failed!')})
  }
}
</script>

Ótimo! Agora atualize nosso modelo para vincular a esses dados:
<template>
  <div id="app">
    <div>
      <b-card style="max-width: 30rem;" :header="myaddress">
        <p>{{myamount}} <span class="text-primary">VTHO</span></p>

        <b-form-group label="To Address:" label-for ="toaddress">
          <b-form-input id="toaddress" v-model.trim="toaddress"></b-form-input>
        </b-form-group>

        <b-form-group label= "Transfer Amount" label-for="toamount">
          <b-input-group append="VTHO">
            <b-form-input id="toamount" type="number" min="0" v-model.number ="toamount">
            </b-form-input>
          </b-input-group>
        </b-form-group>

        <b-button variant="primary" v-on:click="transfer">
          Transferir
        < /b-button>
      </b-card>
    </div>
  </div>
</template>

GitHub repo de todo o código-fonte: [GitHub Link]