EOS Dapp Programming

Hi Carlos,

Thank you for your reply. Sorry I haven’t been around for a week now, but I’m back :slight_smile:

I checked carefully your GIF:

Like you, I enabled only one network, which I called Local EOS as well. The other ones (LEDGIS Mainnet, EOS Mainnet) are also disabled.

I have the same network settings: 127.0.0.1 in host, 8888 in port. Blockchain: EOSIO. By default, “Protocol” is set on https. And I inserted my chain ID: cf057bbfb72640471fd910bcb67639c22df9f92470936cddc1ade0e2f2e7dc4f

When I go to “Manage Account”, I have this:

EOS8ir5nvRSAxcHVMBgFKduEK9sCfP3bevi1WintMYmyW3xv5oNFb is my default EOS account public key that I received when I installed and set up Scatter. This default key is attached to a mnemonic phrase, which I wrote down.

When I scroll down the box, my other public key appears:

EOS5dnHK432yiTvnmavNvPQ7QpjMJkxp6nRgk8XAD58v1RU46RfDt is my other public key that I have used several times before, the one from my cleos wallet.

In your GIF, I see only one key. Why do you have only one, if you added your cleos wallet key?

So in my Account Settings, I see “Connection Error” under Local EOS, my enabled network:

And when I refresh my localhost:8000 Dog Dapp page, I still have the same issue: No Local EOS Account.

Thank you for your assistance. :hammer_and_wrench: :gear: :slightly_smiling_face:

1 Like

Yes, i delete all my keys on Scatter without any issue, then i just add the one that i need to use, for me everything is working as usual, have you tried to add another key? so you could have multiple accounts?
also have you tried to deactivate all the other networks and the only one active is the Local EOS?

If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.

1 Like

I cannot delete the key that Scatter has given me by default (with the mnemonic seed attached). There is no Trash icon, as you can see in the screenshot below.

Regarding the other key that I have added, the key from my cleos wallet, I can delete it by clicking on the Trash icon (see circled in green on the screenshot).

As you can see, two keys are selected (circled in blue). I think only one should be selected, but I cannot select only one, I cannot check or uncheck “selected”. Is it an issue with this version of Scatter?

Are some other students having the same issue? @jmsofarelli @grahappa @scooleo

Yes I tried to add a key: I added the second key on the screenshot below by importing the private key (“Add key”). So i do have multiple accounts (2).

Yes I did as well desactivate all the other networks, and the only active one is Local EOS.

If I keep staying stuck at this point, I will try to uninstall Scatter and reinstall it again from scratch.

1 Like

Hello sir, ok I have reset all my Scatter just to be sure that everything will work great since the beginning of the process, probably you only need to change the protocol to http instead of https.

Here is a GIF that I made to follow the same process that you should follow.
EOS_ScatterReset_Config

After that simple configuration, I’ve made possible to use my Dapp with my new Scatter local account without any issue.

Hope you find this useful.
If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.

1 Like

Thanks Carlos, your help is very appreciated! :muscle: :+1:

I reset my Scatter as well and imported again my mnemonic seed, then added my cleos wallet private key again.

I followed your GIF and compared your settings with mine, they look the same. It seems there is a small difference at Manage/Select account (the box with the two keypairs), I see some red button at the bottom right of the Select account box of your Scatter that I don’t have.

For you to better understand what I have on my Scatter, I made a GIF as well.

Here is what I have on Scatter:

Here is what happens when I refresh my localhost:8000 page:

Finally, this is what happens when I clear the cache of my Chrome browser and reload the localhost:8000 page:

So I still have the same issue…

Are you using Scatter on Ubuntu, like me? My version of Scatter (12.1.1) is installed on Ubuntu 18.04.4 LTS.

Shall I install an earlier version of Scatter Desktop? Or can I get some help on Github?

Wow, this stuff requires patience… :sweat_smile: Thanks a lot for your assistance! :toolbox: :hammer_and_wrench:

Hello Vincent, sorry for the long waiting, I have researching my self to see If there any error related to yours, but i did not find too much usefull data, I tried to put myself into that situation, but my Scatter is working as usual without a way to get into that issue.

Every time I deleted my keys or reset the Scatter or delete all his data folder’s and installed from scratch.
I never run into that issue, thats weird.

So I advice you 2 options:

  • Ask help in the scatter community.
  • Download an old version of scatter and try it.

Yes, both versions are the same for me, ubuntu 18.04 and scatter 12.1.1, I worked with the old version of scatter without any issue, probably it could work for you too.

Hope you find this useful.
If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.

1 Like

Scatter 12 is terrible, full of bugs. I highly recommend going down to Scatter 11 or using another wallet entirely such as Anchor.

1 Like

Hi Carlos, sorry for the long waiting too, I am been attending another programming online course.

Thanks a lot for your patience, follow-up and assistance, this is greatly appreciated! :hammer_and_wrench: :+1:

Your advice is wise, I will go down to an older version of Scatter, namely Scatter 11 as suggested by @Phillip_Hamnett, and I may want to ask for assistance in the Scatter community if necessary.

I am just tagging Filip @filip to let him know about my unresolved issue with Scatter 12.

If I can complete the course with Scatter 11, this will be perfectly fine! :wink:

All the best,
Vincent

1 Like

Hi Philip, good to know I am not alone having issues with Scatter 12 :wink:

But I think it is a good way to go to go down to Scatter 11, as you suggested. This is what I am going to do. Is there an 11 version you are advising me? Is this one fine: https://github.com/GetScatter/ScatterDesktop/releases/tag/11.0.1 ?

I don’t want to use another wallet such as Anchor, because it will be difficult to follow the course.

All the best!

1 Like

That Scatter v11 is good enough, that is exactly what i have before trying with Scatter 12 for you.

I hope it work for you without any issue, keep us updated please!

Carlos Z.

1 Like

Hey Carlos,

I removed Scatter 12.1.1 and installed Scatter 11.0.1 from their GitHub page.

This is a good surprise, as it is working smoothly. The UI is quite different, and it seems they are more features with this previous version (I think that on version 12, they wanted to simplify the app).

When I launched Scatter 11 for the first time, I clicked on Reset to start from scratch.

Then I was able to import my keys. I was not given default keys like with Scatter 12, which is nice.

I chose an identity and enabled only one network, which I called again Local EOS, with the correct settings: 127.0.0.1, 8888, http and my chain ID.

Finally, when I refreshed my localhost:8000 page, with my Python server, cleos and Scatter up and running, I finally got a box with the DogDapp name, which looks better now! :sweat_smile:

But I still need to create an account (or import it?)

This is also what Scatter is telling me:
“You don’t have any accounts linked to this key.”

What do you advise me to do?

But I think this a clear progress, this is an encouraging step. Switching back to Scatter 11 was the right thing to do for me.

1 Like

Now this are great news! Congratulations sir! your scatter is working for now!

Keep going into the course, you might find in next lessons how to connect your account to your smart contract, I have a little function that show which account is connected with the Dapp.

But i will give it to you once you are almost done with your contract, you are really close to finish it!

If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.

1 Like

Yes, this is good news indeed! :+1:

OK, let’s keep on going! :slight_smile:

1 Like

Hi! I am back in business with the Academy! Glad to be here :slightly_smiling_face:

I picked up where I left off, namely at Dapp Programming > Get Dogs.

When I am calling the getDogs() function (line 33 of the main.js file), I am not getting the expected response in the console with three rows with the dogs that Bob owns, I am not getting the JSON object form, but instead, I am getting an error in the console:
asyncToGenerator.js:6 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

JSON_error

I googled the error, and it seems that this happens because when the request is made to the server, the response is HTML instead of JSON.

Do you have any idea why I am getting this error and how to fix it? @thecil @filip

Here is my code at this stage from main.js:

ScatterJS.plugins( new ScatterEOS() );

const network = ScatterJS.Network.fromJson({
    blockchain:'eos',
    chainId:'cf057bbfb72640471fd910bcb67639c22df9f92470936cddc1ade0e2f2e7dc4f',
    host:'127.0.0.1',
    port:8888,
    protocol:'http'
});

const contractConfig = {
  code: "dogcontract",
  scope: "dogcontract",
  dogTableName: "dogs",
  balancesTableName: "balances",
  symbol: "DOGCOIN"
}

var eos;
var rpc;
var account;

ScatterJS.connect('DogDapp', {network}).then(connected => {
  if(!connected) return alert("No Scatter Detected");
  console.log("Scatter Connected");

  const scatter = ScatterJS.scatter;
  window.ScatterJS = null;

  scatter.login({accounts: [network]}).then(function(){
    account = scatter.account('eos');
    rpc = new eosjs_jsonrpc.JsonRpc(network.fullhost());
    getDogs();
  });

});

function getDogs(){
  rpc.get_table_rows({
    json: true,
    code: contractConfig.code,
    scope: contractConfig.scope,
    table: contractConfig.dogTableName,
    index_position: 2,
    key_type: "name",
    lower_bound: account.name,
    upper_bound: account.name
  }).then(function(res){
    console.log(res);
  })
}

$(document).ready(function() {

});

Thank you!

@swisscrypto glad to know you are back! now I might need to check your entire main.js file, i’m checking mine and looks exactly has yours, just that i used a function login in a button to log in with my scatter.

Please try to share me your entire main.js so i can review it.
Here is part of mine, just to verify that everything looks good for you

ScatterJS.plugins( new ScatterEOS() );

const network = ScatterJS.Network.fromJson({
    blockchain:'eos',
    chainId:'cf057bbfb72640471fd910bcb67639c22df9f92470936cddc1ade0e2f2e7dc4f',
    host:'127.0.0.1',
    port:8888,
    protocol:'http'
});

const contractConfig = {
  code: "dogctrissuer",
  scope: "dogctrissuer",
  dogTableName: "dogs",
  balancesTableName: "balances",
  symbol: "DOGCOIN"
}

const scatter = ScatterJS.scatter;
var eos;
var rpc; //fetch data from blockchain
var account;
//initialize function to scatter and webpage functions
ScatterJS.connect('DogDapp', {network}).then(connected => {
  //check if scatter is running
  if(!connected) return alert("No Scatter Detected");
  console.log("Scatter Connected");


  window.ScatterJS = null;


});//end ScatterJS.connect function

function logIn(){
  //scatter login popup window
  scatter.login({accounts: [network]}).then(function(){
    account = scatter.account('eos');
    //get data from blockchain into a Json
    rpc = new eosjs_jsonrpc.JsonRpc(network.fullhost());
    //initialize eos object to create transactions
    eos = scatter.eos(network, eosjs_api.Api, {rpc});
    //get table data functions
    getAccount();
    getBalance();
    getDogs();

  });

}//end logIn
function logOut(){
  scatter.logout({accounts: null}).then();
}//enf logOut

//get name account
function getAccount(){
  $("#Account").empty();
  var AccId = document.getElementById("Account");
  var AccName = account.name;
  AccId.innerHTML = AccName;
}//end getAccount

//function to get data from blockchain tables
function getDogs(){
  rpc.get_table_rows({
    json: true,
    code: contractConfig.code,
    scope: contractConfig.scope,
    table: contractConfig.dogTableName,
    index_position: 2,
    key_type: "name",
    lower_bound: account.name,
    upper_bound: account.name
  }).then(function(res){
    console.log(res);
    populatedoglist(res.rows);
  })
}//end getDogs()

//wait until html page is loaded and apply some logic to objects
$(document).ready(function() {
  //Add dog button function
  $("#add_button").click(addDog);
  //Delete dog button function
  $("#del_button").click(deleteDog);
  //Delete ALL button function
  $("#del_all_button").click(deleteAll);
  //Deposit coins into contract
  $("#deposit_button").click(deposit_coin);
  //logIn and logOut buttons
  $("#login_button").click(logIn);
  $("#logout_button").click(logOut);
});

Hope you find this useful.
If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.

1 Like

Hey @thecil, great to see you too! :smiley:

Here is my main.js code:

ScatterJS.plugins( new ScatterEOS() );

const network = ScatterJS.Network.fromJson({
    blockchain:'eos',
    chainId:'cf057bbfb72640471fd910bcb67639c22df9f92470936cddc1ade0e2f2e7dc4f',
    host:'127.0.0.1',
    port:8888,
    protocol:'http'
});

const contractConfig = {
  code: "dogcontract",
  scope: "dogcontract",
  dogTableName: "dogs",
  balancesTableName: "balances",
  symbol: "DOGCOIN"
}

var eos;
var rpc;
var account;

ScatterJS.connect('DogDapp', {network}).then(connected => {
  if(!connected) return alert("No Scatter Detected");
  console.log("Scatter Connected");

  const scatter = ScatterJS.scatter;
  window.ScatterJS = null;

  scatter.login({accounts: [network]}).then(function(){
    account = scatter.account('eos');
    rpc = new eosjs_jsonrpc.JsonRpc(network.fullhost());
    getDogs();
  });

});

function getDogs(){
  rpc.get_table_rows({
    json: true,
    code: contractConfig.code,
    scope: contractConfig.scope,
    table: contractConfig.dogTableName,
    index_position: 2,
    key_type: "name",
    lower_bound: account.name,
    upper_bound: account.name
  }).then(function(res){
    console.log(res);
  })
}

$(document).ready(function() {

});

In the meantime, I will try with your code and let you know how it is working.

Thanks,
Vincent

1 Like

@thecil With your code, it is working! The Scatter app is popping up as expected (see screenshot below).

I was following Filip’s instructions in the Get Dogs video and modifying the main.jscode along the way, because I like learning by practice in doing the modifications myself in the code while following the video. At some stage of the video, Filip used the getDogs() function and got a response in the console with three rows and the dogs. Instead, I got an error, as I posted above. But this is fine, I will continue with your code and follow the videos along.

Thanks for your support, as always! :+1: :grinning:

1 Like

Glad to know is working for you, the first list of error you receive is from the scatter, those happens usually, is the wallet trying to connect through different sockets, now you are still getting the unexpected token issue, maybe you should check your Local EOS config, verify that your protocol is set on http not https.

Also you have not imported the private keys of your EOS accounts into scatter, try to import one (which have an account created through cleos).

If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.

1 Like

OK, in this case I am ignoring these errors.

Yes, I am still getting the unexpected token issue, as follows:

unexpected_token

OK, I checked my Local EOS config, and my protocol is set on http, as you can see:

Actually, I did import the public-private keypair of my EOS account created through cleos, please see below a screenshot of my Scatter wallet:

I keep following the course and watching the videos (I just finished the Add Dog Section), but I cannot get the three rows with the dogs under “Your Dogs”, and I cannot add a dog either, I think the issues above hinder me to do so.

Here is a screenshot of my DogDapp web page with the Scatter box that popped up:

Here is my main.js code now:

ScatterJS.plugins( new ScatterEOS() );

const network = ScatterJS.Network.fromJson({
    blockchain:'eos',
    chainId:'cf057bbfb72640471fd910bcb67639c22df9f92470936cddc1ade0e2f2e7dc4f',
    host:'127.0.0.1',
    port:8888,
    protocol:'http'
});

const contractConfig = {
  code: "dogctrissuer",
  scope: "dogctrissuer",
  dogTableName: "dogs",
  balancesTableName: "balances",
  symbol: "DOGCOIN"
}

const scatter = ScatterJS.scatter;
var eos;
var rpc; //fetch data from blockchain
var account;
//initialize function to scatter and webpage functions
ScatterJS.connect('DogDapp', {network}).then(connected => {
  //check if scatter is running
  if(!connected) return alert("No Scatter Detected");
  console.log("Scatter Connected");


  window.ScatterJS = null;


});//end ScatterJS.connect function

function logIn(){
  //scatter login popup window
  scatter.login({accounts: [network]}).then(function(){
    account = scatter.account('eos');
    //get data from blockchain into a Json
    rpc = new eosjs_jsonrpc.JsonRpc(network.fullhost());
    //initialize eos object to create transactions
    eos = scatter.eos(network, eosjs_api.Api, {rpc});
    //get table data functions
    getAccount();
    getBalance();
    getDogs();

  });

}//end logIn
function logOut(){
  scatter.logout({accounts: null}).then();
}//enf logOut

//get name account
function getAccount(){
  $("#Account").empty();
  var AccId = document.getElementById("Account");
  var AccName = account.name;
  AccId.innerHTML = AccName;
}//end getAccount

//function to get data from blockchain tables
function getDogs(){
  rpc.get_table_rows({
    json: true,
    code: contractConfig.code,
    scope: contractConfig.scope,
    table: contractConfig.dogTableName,
    index_position: 2,
    key_type: "name",
    lower_bound: account.name,
    upper_bound: account.name
  }).then(function(res){
    console.log(res);
    populateDogList(res.rows);
  })
}//end getDogs()

function populateDogList(dogs){
  var ul = document.getElementById("doglist");
  for (var i = 0; i < dogs.length; i++) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(dogs[i].id + ": " + dogs[i].dog_name + ", " + dogs[i].age));
    ul.appendChild("li");
  }
}

function addDog(){
  var dogName = $(""#dog_name").val();
  var dogAge = $(""#dog_age").val();

  eos.transact({
    actions: [{
      account: contractConfig.code,
      name: 'insert',
      authorization: [{
        actor: account.name,
        permission: account.authority
      }]
      data: {
        owner: account.name,
        dog_name: dogName,
        age: dogAge
      }
    }]
  }, {
    blocksBehind: 3,
    expireSeconds: 30
  }).then(function(res){
    console.log(res);
  }).catch(function(err){
  alert(err);
  })
}

//wait until html page is loaded and apply some logic to objects
$(document).ready(function() {
  //Add dog button function
  $("#add_button").click(addDog);
  //Delete dog button function
  $("#del_button").click(deleteDog);
  //Delete ALL button function
  $("#del_all_button").click(deleteAll);
  //Deposit coins into contract
  $("#deposit_button").click(deposit_coin);
  //logIn and logOut buttons
  $("#login_button").click(logIn);
  $("#logout_button").click(logOut);
});

Please note that starting from your code, I also added the populateDogList(dogs) and addDog() functions, following along what Filip explained in the Get Dog and Add Dog sections.

Here is also my HTML code:

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script src="dist-web/scatterjs-core.min.js"></script>
    <script src="dist-web/scatterjs-plugin-eosjs2.min.js"></script>
    <script src='dist-web/eosjs-api.js'></script>
    <script src='dist-web/eosjs-jsonrpc.js'></script>
    <script src='dist-web/eosjs-jssig.js'></script>
    <script src="main.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Dog Dapp</title>

  </head>
  <body>
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4">Dog Dapp</h1>
        <p class="lead">We store your dogs in a safe and decentralized way.</p>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col">
          <h2>Your Dogs</h2>
          <ul id="doglist">

          </ul>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <h2>Add dog</h2>
          <div>
            <label>Dog name</label>
            <input type="text" id="dog_name">
          </div>
          <div>
            <label>Dog age</label>
            <input type="number" id="dog_age">
          </div>
          <button type="button" class="btn btn-primary" id="add_button">Add</button>
        </div>
      </div>
    </div>
  </body>
</html>

If you can help me move forward in the course, your assistance is welcomed! Thanks :slight_smile:

All your code looks good, the problem is on the scatter, might wanna have to close it and open it again, sometimes it goes buggy by not showing you the account, if you have imported a private key that belongs to an account, try to click on the refresh button on the scatter to show the account.

Be sure that your nodeos is running without any problem since basically your scatter connect to your local node which is your nodeos instance.

If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.

1 Like