如何在自己设计的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

点击断开钱包，如果你之前授权连接过钱包，则可以弹出取消授权的页面

好了，本节如何连接钱包的教程就到这里