Sending transaction with Scatter from a single-page application

Question

Request for help:

I need a simple example of sending transaction (pushing a contract action test) by Scatter written in plain JS for a single-page browser scrip without any requirjs , vue , angularjs , react or other dependencies.

I need to push action test in contract deployed at address walletzzzzzz with parameters eosio::name (walletxxxxxx) and uint64_t number 11;

What I did and why it doesn't work:

• I've built eosjs browser version and placed it into dist-web folder as it was advised by documentation.

• I can't find any official examples or guidelines of how to send transaction with JS so I was trying to follow this example: https://gist.github.com/miguelmota/c2a12cb4ed938d2d6f93146903390065

• I have modified the code to exclude requires and replaced it with my src="dist-web/eosjs-api.js" declarations.

• The problem here is that I don't know what to do with the const eos = scatter.eos(network, Eos, eosOptions); declaration. I know that the Eos arg is a link to the eosjs library and it does the same thing as api and rpc classes of my code, but I don't know how to get it working with my declarations. I can't find documentation of scatter.eos( ... ) function anywhere.

• I was trying to follow this guide and I found that they were using the following declaration: eos = scatter.eos(network, Api, { rpc }); but it is throwing an error whenever I'm trying to use it with my code.

Here is my code:

test-index.html

<header>Hello Scatter</header>

<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="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-core.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-eosjs.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-eosjs2.min.js"></script>
<script>

ScatterJS.plugins(new ScatterEOS());


  const defaultPrivateKey = "5JtUScZK2XEp3g9gh7F8bwtPTRAkASmNrrftmx4AxDKD5K4zDnr";
  const signatureProvider = new eosjs_jssig.JsSignatureProvider([defaultPrivateKey]);

  // This is a simple single-page application
  // that will connect to Scatter and send a transaction (push `test` action at `walletzzzzzz`)
  // once the page is loaded.

const connectionOptions = {
  initTimeout: 10000
}

const network = {
    blockchain:'eos',
    chainId:'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906',
    host:'api.eosio.cr',
    port:80,
    protocol:'https'
}

ScatterJS.scatter.connect('My-App', connectionOptions).then(connected => {
  if (!connected) {
    // User does not have Scatter installed/unlocked.
    return false;
  }

  const scatter = ScatterJS.scatter;
  const requiredFields = {
    accounts: [network]
  };

  scatter.getIdentity(requiredFields).then(async() => {

    const account = scatter.identity.accounts.find(x => x.blockchain === 'eos');
    console.log(account);
    const eosOptions = {
      expireInSeconds: 60
    }

    // Get a proxy reference to eosjs which you can use to sign transactions with a user's Scatter.
    //const eosScatter = scatter.eos(network, Eos, eosOptions); <<== Does not work
    //const eosScatter = scatter.eos(network, Api, {rpc}, eosOptions); <<== Does not work
    //const eosScatter = scatter.eos(network, { Api, rpc }, eosOptions); <<== Does not work

    const rpc = new eosjs_jsonrpc.JsonRpc('https://api.eosnewyork.io');
    const api = new eosjs_api.Api({ rpc: rpc, signatureProvider: scatter.eosHook(network), textDecoder: new TextDecoder(), textEncoder: new TextEncoder()});

    console.log( rpc.get_account('walletzzzzzz') ); // <<==== This is working fine
                                                    // returns Promise with a correct Promise.Value linking to the account

    const eosScatter = scatter.eos(network, api, rpc);

    console.log("Success");

    const transactionOptions = {
      authorization: [`${account.name}@${account.authority}`]
    };

    // example of pushing an action
    eosScatter.transaction({
      actions: [{
        account: 'walletzzzzzz',
        name: 'test',
        authorization: [{
          actor: 'walletxxxxxx',
          permission: 'active',
        }],
        data: {
          acct: account.name,
          number: 10,
        },
      }]
    }, {
      broadcast: true,
      sign: true
    })
    .then(trx => {
      console.log(`Transaction ID: ${trx.transaction_id}`);
    }).catch(error => {
      console.error(error);
    });
  })
  .catch(err => {
    console.error(err)
  })
})
</script>

The problem is that const eosScatter = scatter.eos(network, api, rpc); declaration causes the following error:

TypeError: e is not a constructor
    at t.eos (index.js:70)
    at test-index.html:64

Answer 1

It's my first time to answer question at this site :)

I encountered the same issue coincidently.

What I did successfully is to add one more parameter network while calling the scatter.connect.

ScatterJS.scatter.connect("Your APP name", {network}).then

I had a complete example at GitHub.

Good luck.