{"id":1522,"date":"2020-03-01T07:47:05","date_gmt":"2020-03-01T07:47:05","guid":{"rendered":"http:\/\/org.saito.tech\/?page_id=1522"},"modified":"2021-05-19T03:31:11","modified_gmt":"2021-05-19T03:31:11","slug":"tutorial-3-polkadot-and-other-cryptocurrencies","status":"publish","type":"page","link":"https:\/\/org.saito.tech\/tutorial-3-polkadot-and-other-cryptocurrencies\/","title":{"rendered":"Tutorial 3 – Polkadot and Cryptocurrencies"},"content":{"rendered":"\n

In this tutorial we create a wallet plugin that can send and receive other cryptocurrencies like Polkadot. We explain how to use the \/lib directory to handle more complicated user interfaces. And we learn a bit about the standard Saito UI library. As before, we recommend downloading the finished zipfile<\/a> or walking through our annotated online code<\/a>. This is what we are building.<\/p>\n\n\n\n

\"\"
The finished product.<\/figcaption><\/figure>\n\n\n\n

Steps<\/h4>\n\n\n\n

Create your application directory as usual. But this time create a subdirectory called \/lib inside your application directory. We put a another subdirectory inside it called “email-appspace”. This is where we will put the code that displays and manages the user-facing parts of our application. You can see this directory contains: a javascript class and a template file that contains the HTML we will insert into the page. We require the javascript file within our application javascript and can now simplify our respondTo<\/em> function as follows:<\/p>\n\n\n\n

  respondTo(type) {\n    if (type == 'email-appspace') {\n      let obj = {};\n          obj.render = function (app, mod) {\n            Tutorial03EmailAppspace.render(app, mod);\n          }\n          obj.attachEvents = function (app, mod) {\n            Tutorial03EmailAppspace.attachEvents(app, mod);\n          }\n      return obj;\n    }\n    return null;\n  }<\/pre>\n\n\n\n
Look inside \/lib\/email-appspace\/tutorial03-appspace.js <\/a>and everything should be self-explanatory. render(app, mod) <\/em>writes our HTML template file into the “email-appspace” space provided. attachEvents(app, mod) <\/em>then adds interactivity to the elements provided. With more complicated modules this type of code organization keeps our module clean. Our application file handles interactions with the blockchain and peer-to-peer network while UI-facing elements are handled as UI library components. <\/p>\n\n\n\n
PRO-TIP: if you look closely at tutorial03-appspace.js <\/em>you’ll notice that it invokes the class GameCryptoTransferManager. <\/em>This is one of many standard UI elements available to all Saito applications. You can find them within the \/lib\/saito\/ui directory<\/a>. Other useful components include modal popups, overlays, the header elements, as well as game-specific components used by the Saito Game Engine. In this case, adding GameCryptoTransferManager gives us access to  the non-interactive UI popups that indicate interactions with other blockchains. Feel welcome to customize these UI elements and provide them as part of your module.<\/p><\/blockquote>\n\n\n\n
Now look at the way that our module is interacting with our external blockchain. These functions are all inside the \/lib\/saito\/wallet.js<\/a> class – scroll down for the section identified by the “PREFERRED CRYPTOS” header:<\/p>\n\n\n\n
app.wallet.checkBalance(address, ticker);\n\napp.wallet.sendPayment(senders=[], receivers=[], amounts=[], timestamp, mycallback, ticker);\n\nasync app.wallet.receivePayment(senders=[], receivers=[], amounts=[], timestamp, mycallback, ticker, tries = 36, pollWaitTime = 5000);<\/pre>\n\n\n\n
Developers can find full document on available wallet-level functions. The important thing to note is that calling these wallet-level functions is blockchain agnostic and identifies chains by their standard crypto ticker-symbols. Many applications like the games in the Saito Arcade are coded so that users can decide for themselves which modules they wish to install and how those cryptocurrency modules work. <\/p>\n\n\n\n
Conclusion<\/h4>\n\n\n\n
In this tutorial, we highlight the generic functions\/interface provided in \/lib\/saito\/wallet.js<\/a> in order to emphasize the flexibility that Saito provides developers. If you have a specific module that you wish to interact with on a lower-level however, you can always fetch the module and deal with it directly. For those interested in Cryptocurrency Module construction and looking to avoid the wallet-interface completely, the parent class for all cryptocurrency modules is available at \/lib\/templates\/abstractcryptomodule.js<\/a>.<\/p>\n\n\n\n
We are continuing to work to improve Saito’s ability to support cryptocurrency applications. If you have any feedback or suggestions please feel very welcome to reach out to info@saito.tech<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial we create a wallet plugin that can send and receive other cryptocurrencies like Polkadot. We explain how to use the \/lib directory to handle more complicated user interfaces. And we learn a bit about the standard Saito…<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/org.saito.tech\/wp-json\/wp\/v2\/pages\/1522"}],"collection":[{"href":"https:\/\/org.saito.tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/org.saito.tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/org.saito.tech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/org.saito.tech\/wp-json\/wp\/v2\/comments?post=1522"}],"version-history":[{"count":13,"href":"https:\/\/org.saito.tech\/wp-json\/wp\/v2\/pages\/1522\/revisions"}],"predecessor-version":[{"id":2625,"href":"https:\/\/org.saito.tech\/wp-json\/wp\/v2\/pages\/1522\/revisions\/2625"}],"wp:attachment":[{"href":"https:\/\/org.saito.tech\/wp-json\/wp\/v2\/media?parent=1522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}