# 如何在自己设计的web中调用Byone钱包
# 什么是Byone钱包
Byone是比原链的插件钱包,类似于以太坊的Metamask,用户可以在浏览器端管理自己的比原资产,目前可实现从插件钱包交易,转账,投票,跨入跨出BTM。
# 环境准备
我们搭建一个最简单的React.js项目来调用Byone钱包
安装NPM,根据不同的系统下载安装。
node.js版本要求11.x.x以上,npm版本6.x.x.
为了加速npm下载速度,先把npm设置为淘宝镜像地址。
npm config set registry http://registry.npm.taobao.org/
安装完后更新一些依赖包
>npm install
安装Bytom.js
npm install bytom-js-sdk
# 安装Byone
我们需要安装一下Byone钱包
具体请参考:Byone安装教程
# 搭建一个最简单的React项目
我们使用React官方的例子,create-react-app
npx create-react-app react-app
命令最后的react-app是项目的名称,可以自行更改。 稍等片刻即可完成安装。安装完成后,可以使用npm或者yarn启动项目。
cd react-app
npm start
运行成功
我们对原项目删除精简一些文件
删除前
删除后
# 连接钱包
连接钱包,即调起浏览器中的Byone插件钱包,使用
bytom.enable()
我们在App.js中,设置一个按钮,并尝试连接钱包,代码如下:
import React from 'react';
function App() {
return (
<div className="App">
<button onClick={connect}>连接Byone钱包</button>
</div>
);
}
//连接钱包
const connect = async () => {
if (window.bytom) {
try {
const res = await window.bytom.enable();
return Promise.resolve(res);
} catch (error) {
return Promise.reject(error);
}
} else {
return Promise.reject('byone not available');
}
};
export default App;
运行
npm start
点击连接钱包,看到弹出Byone的应用授权页面即可
# 断开钱包
我们可以使用以下指令来断开钱包
bytom.disable()
我们在App.js中,设置一个按钮,并尝试断开钱包,代码如下:
import React from 'react';
function App() {
return (
<div className="App">
<button onClick={disconnect}>断开Byone钱包</button>
</div>
);
}
//断开钱包
const disconnect = async () => {
if (window.bytom) {
try {
const res = await window.bytom.disable();
return Promise.resolve(res);
} catch (error) {
return Promise.reject(error);
}
} else {
return Promise.reject('byone not available');
}
};
export default App;
运行
npm start
点击断开钱包,如果你之前授权连接过钱包,则可以弹出取消授权的页面
好了,本节如何连接钱包的教程就到这里