三 Bytom Dapp 开发笔记:Dapp Demo前端源码分析( 二 )


5)交易确认后,调用 ce 提交数据到后端;
再来看看api.js的 方法,所有与交互的接口全部写到这个文件里面:
function listDepositUTXO() {return listDappUTXO({//****** 1."program": GetContractArgs().depositProgram,"asset": GetContractArgs().assetBill,"sort": {"by":"amount","order":"desc"}})}//Api call from Buffer serverexport function listDappUTXO(params){let urlswitch (window.bytom.net){case "testnet":url = "/dapptestnet/list-utxos"breakdefault:url = "/dapp/list-utxos"}return post(url, params).then(resp => resp.data)}
很明显最终是调用的/list-utxos方法,非常简单,值得一提的是
1)里面的结构体根据******(合约代码)与***asset***(资产ID)去查找UTXO,这里其实底层是调用官方的接口的,后面会细说;
继续看看Dapp-Demo1\src\\\save\.js 的ction方法
function createContractTransaction(resp, amount, address){return new Promise((resolve, reject) => {//utxo pre calculationconst limit = GetContractArgs().radio * 100000000//****** 1.if (resp.length === 0) {reject( 'Empty UTXO info, it might be that the utxo is locked. Please retry after 60s.')} else if (amount < limit) {reject( `Please enter an amount bigger or equal than ${limit}.`)}const result = matchesUTXO(resp, amount) //****** 2.const billAmount = result.amountconst billAsset = result.assetconst utxo = result.hash//contract calculationif (amount > billAmount) {reject('input amount must be smaller or equal to ' + billAmount + '.')} else {const input = []const output = []const args = contractArguments(amount, address) //****** 3.input.push(spendUTXOAction(utxo)) //****** 4.input.push(spendWalletAction(amount, GetContractArgs().assetDeposited)) //****** 5.if (amount < billAmount) { //****** 6.output.push(controlProgramAction(amount, GetContractArgs().assetDeposited, GetContractArgs().profitProgram))output.push(controlAddressAction(amount, billAsset, address))output.push(controlProgramAction((BigNumber(billAmount).minus(BigNumber(amount))).toNumber(), billAsset, GetContractArgs().depositProgram))} else {output.push(controlProgramAction(amount, GetContractArgs().assetDeposited, GetContractArgs().profitProgram))output.push(controlAddressAction(billAmount, billAsset, address))}resolve({ //****** 7input,output,args,utxo})}})}
这个方法比较复杂,我们一步一步来
这里先看看 7),最终返回的内容是 input、 、 args、 utxo,跟发送交易页面里面的input、 、 args对应起来,如 图K

三  Bytom Dapp 开发笔记:Dapp Demo前端源码分析

文章插图
上一章说过,所有比原链的交易都要存在质量守恒定理,input与的总和要相对应,合约交易里面执行方法必须需要参数,这里的args就代表传入的参数,utxo是代表 utxo的id
1)做一下限制,设置最少值
2),根据上面的内容,刚刚已经通过 拿到所有可用的UTXO列表,这个时候要根据用户输入的数额,选择一个起码 大于或等于的的UTXO出来;
3),构建args,就是合约里面方法的参数;
4)通常合约交易会有自己资产的input,合约UTXO的input,这里是要解锁的utxo的input;
三  Bytom Dapp 开发笔记:Dapp Demo前端源码分析

文章插图
5)这个是钱包资产的input;
上一章内容说过,解锁合约的交易,必须根据合约里面的逻辑,计算出对应的结果,所以这里的逻辑跟合约里面逻辑是一样的,储蓄分红合约详细说明 如图;
三  Bytom Dapp 开发笔记:Dapp Demo前端源码分析

文章插图
判断逻辑一样,这里插件钱包跟上一章说的pc钱包接口的结构有所不同,但是原理一样 。
最后我们看看src\\\save\.js 的ce 方法
function updateDatatbaseBalance(resp, amount, address){return updateBalances({"tx_id": resp.transaction_hash,address,"asset": GetContractArgs().assetDeposited,"amount": -amount}).then(()=>{return updateBalances({"tx_id": resp.transaction_hash,address,"asset": GetContractArgs().assetBill,"amount": amount})}).catch(err => {throw err})}export function updateBalances(params){let urlswitch (window.bytom.net) {case "testnet":url = "/dapptestnet/update-balance"breakdefault:url = "/dapp/update-balance"}return post(url, params)}