Latest Posts

dApp development on EOS Blockchain using EOSJS and scatter

Technology / By

As I have been diving deep into the development of EOS dApp, I have come across so many good articles. Here, I am aggregating all the knowledge I got after doing some research. In this article, I will be explaining how to use EOSJS and scatter together. I am assuming you have a basic understanding about smart contracts and how to deploy them on EOS blockchain as I’ll be skipping that part in this article.

What are we building?

We are building a simple todo dApp. We will write a smart contract for the CRUD (create, read, update, and delete) operations and will interact with deployed contract using EOSJS and scatter. CRUD operations include creating, completing, removing and getting todos. We will use Jungle Testnet for deploying our smart contract.

Pre requisite knowledge

  • EOS
  • EOSJS
  • Scatter

Scatter setup

Scatter is used to sign transactions for blockchain and provide personal information to applications without ever exposing your keys. For setting up your scatter wallet, follow this video. In scatter settings, you have to add the jungle testnet in networks with the following details:

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

After adding the network configuration, now import your private key into the wallet by going into key pair section then click on new. Fill in the key information according to the form as shown in the pic below.

dapp-development

Now you should add an identity using your key pair. Go to identities section and add or edit existing identity if it is of no use. In the identity section, select the network and then key pair, it will ask you to add your account associated with that key on the chain net. You should add the account with active permission.

Your scatter is all set up and ready to be used in our dApp.

Scatter

Smart contract

For deploying the todo smart contract, follow this article and deploy it on Jungle Testnet. Make sure you are able to interact with Testnet from the command line as mentioned in the article.

Interacting with the Testnet

I am using ReactJS for the frontend part. The complete logic and flow is in a single file named index.jsx inside the src folder. Following is the configuration object:

// Config for scatter and eosjs
const EOS_CONFIG = {
contractName: “xyz”, // Contract name
contractSender: “xyz”, // User executing the contract (should be paired with private key)
network: {
protocol: “http”,
blockchain: “eos”,
host: “dev.cryptolions.io”,
port: 38888,
chainId: “038f4b0fc8ff18a4f0842a8f0564611f6e96e8535901dd45e43ac8691a1c4dca” // get this using http://dev.cryptolions.io:38888/v1/chain/get_info
},
eosOptions: {}
};

Interacting with scatter:

import EOS from ‘eosjs’;
document.addEventListener(`scatterLoaded`, 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 scatter
this.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 key
this.scatter = scatter;
// to load the data present in our table
this.loadTodos();
};

Now, in this object we have two references EOSClient and scatter which we will be using to interact with EOS blockchain and wallet respectively.

I am adding the code for one functionality to get the stored data (all the todos) using EOSClient, the rest of the functionalities you can check in the 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 the account, use getIdentity() of scatter object:

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

That’s it.

Conclusion

One of the biggest advantages of this is you don’t have to maintain a wallet on your machine, scatter manages everything for you. There are other methods also to host the wallet but scatter gives the responsibility to end user and nothing private needs to be handled by the developer.

Resources and references

  1. To do contract deployment (https://medium.com/r/?url=https%3A%2F%2Fsteemit.com%2Feos%2F%40eos-asia%2Fpart-2-building-a-to-do-list-with-eos-or-working-with-persistent-data-in-eos)
  2. Scatter setup (https://medium.com/r/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQcbCf5mm_Ek)
  3. Todo contract without scatter integration (https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Feosasia%2Feos-todo)
  4. EOS Stack Exchange (https://medium.com/r/?url=https%3A%2F%2Feosio.stackexchange.com%2F)
  5. EOS developers (https://medium.com/r/?url=https%3A%2F%2Fdevelopers.eos.io%2F)

Technology blog banner

Featured Blogs

0