Dalam era kriptografi, penggunaan teknologi blockchain seperti EOS menjadi sangat penting. Dalam artikel ini, kita akan membahas bagaimana mengintegrasikan Scatter, sebuah plugin yang memungkinkan penggunaan blockchain, dengan aplikasi React. Kita juga akan membuat instance EOSIOClient dan signing transaksi menggunakan Scatter.

Menginisialisasi Instance EOSIOClient

Pertama-tama, kita perlu menginisialisasi instance EOSIOClient. Kita dapat melakukannya dengan membuat sebuah class yang inheren dari React.Component. Class ini akan memiliki constructor yang akan menerima parameter contractAccount.

export default class EOSIOClient extends React.Component {
 constructor(contractAccount) {
 super(contractAccount);
 this.contractAccount = contractAccount;
 }
}

Menginisialisasi ScatterJS

Selanjutnya, kita perlu menginisialisasi ScatterJS. Kita dapat melakukannya dengan membuat instance ScatterEOS dan memberikan parameter new ScatterEOS().

ScatterJS.plugins(new ScatterEOS());

Terhubung dengan Scatter dan Membuat Referensi

Kita juga perlu terhubung dengan Scatter, menciptakan referensi ke akun pengguna dan membuat referensi ke proxy Scatter yang sudah terinisialisasi. Proses ini dapat dilakukan dalam constructor instance EOSIOClient.

try {
 ScatterJS.scatter.connect(this.contractAccount).then(connected => {
 if (!connected) return console.log("Issue Connecting");
 const scatter = ScatterJS.scatter;
 const requiredFields = {accounts: [network]}; // We defined this above};
 scatter.getIdentity(requiredFields).then(() => {
 this.account = scatter.identity.accounts.find(x => x.blockchain === "eos");
 const rpc = new JsonRpc(endpoint);
 this.eos = scatter.eos(network, Api, {rpc});
 });
 });

} catch (error) {console.log(error);}}

Membuat Metode Transaksi

Setelah instance EOSIOClient terinisialisasi, kita dapat membuat metode transaksi yang akan digunakan untuk signing transaksi. Kita dapat membuat sebuah fungsi transaction yang akan menerima parameter action dan data.

transaction = (action, data) => {
 return this.eos.transact({
 actions: [{
 account: this.contractAccount,
 name: action,
 authorization: [{actor: this.account.name, permission: this.account.authority}],
 data: {...data}
 }]
 }, {blocksBehind: 3, expireSeconds: 30});
};

Membuat Instance EOSIOClient di Aplikasi

Selanjutnya, kita perlu membuat instance EOSIOClient di dalam aplikasi React. Kita dapat melakukannya dengan mengimpor class EOSIOClient dan membuat instance baru.

import EOSIOClient from "../utils/eosio-client";

this.eosio = new EOSIOClient("YOUR_APP_NAME");

Membuat Transaksi Pertama

Sekarang, kita dapat membuat transaksi pertama. Dalam contoh ini, pengguna akan membeli RAM. Dalam interface React, pengguna dapat menginputkan jumlah byte yang ingin dibeli dan klik tombol "Buy Now" untuk melakukannya.

handleBuyRam = async event => {
 event.preventDefault();
 let bytes = event.target.bytes.value;
 const actionName = "buyrambytes";
 const actionData = {buyer: accountName, receiver: accountName, bytes: parseInt(bytes)};
 try {
 const result = await this.eosio.transaction(actionName, actionData);
 console.log(result);
 this.getBalance(); // We can check a user's EOS balance.
 } catch (e) {
 console.log("\nCaught exception: " + e);
 if (e instanceof RpcError) console.log(JSON.stringify(e.json, null, 2));
 }
};

Langkah Selanjutnya

Dalam artikel ini, kita telah memahami bagaimana mengintegrasikan Scatter dengan aplikasi React dan membuat instance EOSIOClient. Kita juga telah membuat metode transaksi yang akan digunakan untuk signing transaksi. Dalam langkah selanjutnya, kita dapat menggunakan informasi dari blockchain untuk menampilkan informasi kepada pengguna.

Artikel ini adalah bagian pertama dari seri tentang mengintegrasikan Scatter dengan aplikasi React. Kita berharap bahwa artikel ini telah membantu Anda memahami bagaimana menginisialisasi instance EOSIOClient dan signing transaksi menggunakan Scatter.