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

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

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

Last Updated: 10/29/2020, 5:45:54 PM