Shulou(Shulou.com)06/01 Report--

Today, I will talk to you about using EOSJS and scatter to develop dApp on the EOS block chain, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

I summed up all the knowledge I got after doing some research. I'll explain how to use EOSJS and scatter.

What are we building?

We are building a simple todo dApp. We will write smart contracts for CRUD (create, read, update, and delete) operations and will use EOSJS and scatter to interact with deployed contracts. CRUD operations include creating, completing, deleting, and getting to-do items. We will use Jungle Testnet to deploy our smart contract.

Necessary knowledge

EOS

EOSJS

Scatter

Scatter Settin

Scatter is used to sign a transaction for the blockchain and to provide personal information to the application without revealing the key. To set up a Scatter wallet, follow this video. In the Scatter settings, you must add Jungle testnet to the network, which contains the following details:

Name: Jungle TestnetDomain or IP: dev.cryptolions.io / / It might be changed, so check for the latest onePort: 38888chainId:038f4b0fc8ff18a4f0842a8f0564611f6e96e8535901dd45e43ac8691a1c4dca

After adding the network configuration, now import your private key into your wallet by entering the key pair section and then clicking New. Fill in the key information according to the form shown in the figure below.

You should now use the key pair to add an identity. If it does not work, go to the identity section and add or edit an existing identity. In the identity section, select the network, and then select the key pair, which requires you to add the account associated with that key on the link. You should add an account with active permissions.

Your scatter has been fully set up and can be used in our dApp.

Intelligent contract

To deploy a todo smart contract, deploy it to Jungle Testnet as described in this article. Make sure you can interact with Testnet from the command line mentioned in the article.

Interact with Testnet

I'm using ReactJS as the front end. The complete logic and flow is located in a single file named index.jsx in the src folder. The following are the configuration objects:

/ / Config for scatter and eosjsconst EOS_CONFIG = {contractName: "xyz", / / Contract namecontractSender: "xyz", / / User executing the contract (should be paired with private key) network: {protocol: "http", blockchain: "eos", host: "dev.cryptolions.io", port: 38888 CainId: "038f4b0fc8ff18a4f0842a8f0564611f6e96e8535901dd45e43ac8691a1c4dca" / / get this using http://dev.cryptolions.io:38888/v1/chain/get_info},eosOptions: {}}

Interact with scatter:

Import EOS from 'eosjs';document.addEventListener (`uploterLoaded`, this.onScatterLoad); onScatterLoad = () = > {const scatter = window.scatter;window.scatter = null;// Here, we are connecting scatter with eosjs so that the transactions can be signed using keys present in scatterthis.eosClient = scatter.eos (EOS_CONFIG.network,EOS,EOS_CONFIG.eosOptions,EOS_CONFIG.network.protocol); / / scatter object to collect the information present in wallet like accounts or public keythis.scatter = scatter;// to load the data present in our tablethis.loadTodos ();}

Now, in this object, we have two references EOSClient and scatter, which we will use to interact with the EOS block chain and the wallet, respectively.

I'm adding code for a feature to use EOSClient to get stored data (all todos), and you can check the rest of the functionality in src/index.jsx:

LoadTodos () {this.eosClient.getTableRows ({code: EOS_CONFIG.contractName,scope: EOS_CONFIG.contractName,table: "todos", json: true}) .then (data = > {this.setState ({todos: data.rows});}) .catch (e = > {console.error (e);});}

To get an account, use the getIdentity () of the scatter object:

Const {accounts} = await scatter.getIdentity ({accounts: [config.EOS_CONFIG.network]})

This is ok.

After reading the above, do you have any further understanding of developing dApp using EOSJS and scatter on the EOS blockchain? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.