在Dapp中连接Byone

连接钱包

在调用Byone钱包发送交易之前，必须先连接钱包。

import { provider } from 'bytom'

async function connect () {
  await provider.detectProvider()
  await window.bytom2.enable()
}

交易解析

在比原链上的交易分为三步：build 构建交易、sign 签名交易、submit 提交交易，在 DApp JS 中将其简化为 sendTransaction 接口。

sendTransaction方法的类型：

type Params = {
  /** 资产ID **/
  asset: string
  /** 发送地址，一般使用钱包默认地址（确保有资产余额） **/
  from: string
  /** 接收地址和金额，可以多个 **/
  to: {
    [address: string]: string
  }
}

type Result = {
  /** 交易哈希 **/
  hash: string
}

bytom2.sendTransaction(params: Params): Promise<Params>

调用方式

使用 window.bytom2.sendTransaction 调用 Byone 钱包

const params = {
   asset:
     'ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff',
   from: window.bytom2.account.address,
   to: {
     tm1qjtd6lp75zd69rcm9tydrf0ns68q9trhrk82q40: '0.5'
   }
}
window.bytom2.sendTransaction(params).then(function (resp) {
    alert(resp)
  }).catch(function (err){
    alert(err)
  })

资产ID可以通过Blockmeta (opens new window)查到，注意不要使用资产名称。

实例

我们仍然使用一个React.js项目，代码如下：

function App() {
  const [toAddress,setAddress] = useState('');
  const [amount,setAmount] = useState('');

  function handleAddressInput(event) {
    setAddress(event.target.value);
  }
  function handleAmountInput(event) {
    setAmount(event.target.value);
  }
  async function connect () {
    await provider.detectProvider()
    await window.bytom2.enable()
  }
  const sendTX = async () => {
    if (window.bytom2) {
      const params = {
         from: window.bytom2.account.address
          to: {
            [toAddress]: amount
          }
         asset:"ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff"
      }
      window.bytom.sendTransaction(params).then(function (resp) {
          alert(resp.hash)
        }).catch(function (err){
          alert(err)
        })
    }
  };
  return (
    <div className="App">
      <button onClick={connect}>连接Byone钱包</button>
      <p>输入接收地址</p>
      <input onChange={handleAddressInput}></input>
      <p>输入发送数量</p>
      <input onChange={handleAmountInput}></input>
      <button onClick={sendTX}>发送交易</button>
    </div>
  );
}
export default App;

弹出钱包进行签名

当最后弹出交易hash，则代表交易发送成功