A brief analysis of the development of the EOS blockchain grapefruit wallet front-end plug-in scatter (share)

In the previous article "Teach you how to use iis to deploy and run node in Node.js (with code)", I will introduce to you how to use iis to deploy and run node. The following article will introduce you to the development of the EOS blockchain grapefruit wallet front-end plug-in scatter. Let’s take a look.

Based on blockchain EOS wallet front-end plug-in scatter installation and use

Installation and use

npm i scatterjs-core scatterjs-plugin-eosjs eosjs -D

//main.js
import ScatterJS from "scatterjs-core";
import ScatterEOS from "scatterjs-plugin-eosjs";
import Eos from "eosjs";
ScatterJS.plugins(new ScatterEOS());

Network chain

// EOS公链(正式环境)
let main = {
  protocol: "https",
  blockchain: "eos",
  host: "nodes.get-scatter.com",
  port: 443,
  chainId: "aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906",
};

// 测试链 (就是用来测试的)
let jungle2 = {
  protocol: "http",
  blockchain: "eos",
  host: "jungle2.cryptolions.io",
  port: 80,
  chainId: "e70aaab8997e1dfce58fbfac80cbbb8fecec7b99cf982a9444273cbc64c41473",
};

Debugging and configuration

Download over the wallscatterPlug-in installation .

1. Open scatter---setting--network---create a new one and fill in the information of jungle2 Go to the corresponding location, (name it as you like, jungle2)--Save

2. Generate a secret key pair, generate private key and public key with one click

The address to generate the secret key pair https://eostea.github.io/eos-generate-key/

3. To create a new test account, you need to fill in the public key just now. The account name is z-a,1-512-digit combination

The address of the new test account https://monitor.jungletestnet.io/#account

4. Recharge. If you have no money after the account is successfully established, you can recharge 100 yuan first. When testing, be careful to use the

recharge address http://monitor.jungletestnet.io/#faucet

5. After the account on the test chain is established , open scatter---Identity---New, select the network => jungle2 just created, and then select the corresponding account. Click Import---Save

The scatter plug-in configuration is completed. You can develop happily.

Create scatter

ScatterJS.scatter.connect("app").then((connected) => {
  if (!connected) return false;
  let scatter = ScatterJS.scatter; //这里就是
  window.ScatterJS = null;
  window.scatter = null;
  //通过两种方式拿到eos 对象
  // this.eos = Eos({ httpEndpoint: '', signatureProvider: ScatterJS.scatter.eosHook(jungle2) });
  this.eos = scatter.eos(jungle2, Eos, { expireInSeconds: 60 });
  //如果授权成功,则可以拿到用户相关信息
  if (scatter.identity) {
    this.account = scatter.identity.accounts.find(
      (x) => x.blockchain === "eos"
    );
  }
});

Authorization and deauthorization

//授权
const requiredFields = { accounts: [jungle2] };

scatter
  .getIdentity(requiredFields)
  .then(() => {
    //分别拿到用户信息 和 eos 对象
    this.account = scatter.identity.accounts.find(
      (x) => x.blockchain === "eos"
    );
    this.eos = scatter.eos(jungle2, Eos, { expireInSeconds: 60 }, "https");
  })
  .catch((res) => {});

//退出
scatter.forgetIdentity().then((id) => {
  this.account = null;
  this.eos = null;
});

Transfer transaction part

//取币种相关信息
let config = {
  account: "xxx", //账号名称
  code: "eosio.token", //合约名称
  symbol: "ETH", //币种
};
eos.getCurrencyBalance(config).then((e) => {
  console.log(e);
});

//取用户相关信息
eos.getAccount({ account_name: "xxx" }).then((res) => {
  // console.log(res)
  let totoal = res.core_liquid_balance; //余额
  let cpu = res.cpu_limit; //CPU
  let net = res.net_limit; //NET
});

//发起转账
// eos.transfer('发送方帐号', '接收方帐号', '0.3000 DEV','memo', options, callback)

eos
  .transfer(account.name, user, `${coin} EOS`, memo, transactionOptions)
  .then((trx) => {
    // That's it!
    console.log(`Transaction ID: ${trx.transaction_id}`);
    //有transaction_id 就代表转账成功了
  })
  .catch((res) => {});

//还可以使用对象
eos.transfer({
  from: "发送方帐号",
  to: "接收方帐号",
  quantity: "0.1000 DEV",
  memo: "备注",
  callback,
});

Interactive part

// 获取Table行数据
eosjs.getTableRows({"scope":'合约名字', "code":'合约名字', "table":"game", "json": true},callback)

//执行合约上的函数

eos.contract("合约名字").then(actions => {       //actions随便起的变量名
    actions.test('hello', {                     //test是方法名, 'hello'是该actions合约test方法的参数
    	authorization: [{actor:'lilei'}]           //lilei是建立该合约的用户
    }).then(result => {
        console.log(result);
    });

Of course, there are many addresses for EOS API: https://developers.eos.io/eosio-nodeos/ v1.6.0/reference#get_block But for the front end, the above is enough to develop an online gambling game.

As for issuing tokens, deploying contracts, staking, bidding, selling, buying, and creating new accounts are not needed and can be transferred to the backend.

【End】

Recommended learning: JS video tutorial

The above is the detailed content of A brief analysis of the development of the EOS blockchain grapefruit wallet front-end plug-in scatter (share). For more information, please follow other related articles on the PHP Chinese website!