# 在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,则代表交易发送成功
← Dapp开发案例 Dapp JS API →