Use a web page to interact with Obyte powered AA
Real example of the use of Obyte URI protocole that can be used from a web page to open a wallet/app in the desired screen with pre-filled address, amount and inputs.
WHY
To use an AA, you can use the wallet only. But depending of the AA, it can be not or not at all user friendly.
URI
The official Obyte documentation can be found here.
URI stands Uniform Resource Identifier
For Obyte it is ‘byteball:’ for the main net wallet/app and ‘byteball-tn:’ for the test net wallet/app.
To open a pre-filled ‘send’ tab of the test-net wallet, we basically need to create this link:
byteball-tn:<aa address>?amount=<amount>&base64data=<data encoded>Where the <fields> are replaced by some relevant data.
The AA used
For this tutorial we will send transaction to an AA called ARGAA (A Renting Guarantee Autonomous Agent) to create a secure renting guarantee that can be unlock only if both parties, renter and owner find an agreement on how to spread it.
The definition of ARGAA can be found here on the test-net explorer.
The web page
The part of the page that allows to create a new guarantee looks like this:
After filling the 3 text boxes with relevant information, clicking the button will open the Obyte Wallet in the ‘send’ tab with all fields filled and locked:
Same principle for the part of the page that allows to make proposition of release in order to find agreement:
The button click will open the wallet here:
You can find the html file containing all the java script code necessary on github.
The java script code
In the html file, you can find in the <script> block all we need to create and use the URI link.
The function needed behind the button click is the following:
event.preventDefault() will avoid the page to reset and the inputs to be lost after the click.
The data object contains the input fields required by the AA to create a new guarantee.
The total amount of the transaction include the guarantee and the 10000 bytes of bouncing bee.
To build the URI link we finally need to provide the data object into URL encoded base64 format:
Depending on the size of the data to encode, the result can end up with trailing ‘=’ that need to be removed in other for the wallet to correctly receive the data.
In our example, the encoded data before ‘=’ trimming looks like this:
eyJjcmVhdGUiOjEsImFjY291bnRfbmFtZSI6Im15X2FjY291bnQiLCJvd25lciI6IjM1SVQzWllLRVBRU0NYRzJGN0E3S1dOUkFEM1NaWE40In0==The Result
We wanted to create such a URI link:
byteball-tn:<aa address>?amount=<amount>&base64data=<data encoded>Finally the link created that will successfully open the a pre-filled ‘send’ tab of the wallet is:
byteball-tn:IRMDUTCPHBAS4Z5EDIGBSHPB57GBNYPU?amount=15000&base64data=eyJjcmVhdGUiOjEsImFjY291bnRfbmFtZSI6Im15X2FjY291bnQiLCJvd25lciI6IjM1SVQzWllLRVBRU0NYRzJGN0E3S1dOUkFEM1NaWE40In0Enjoy AA coding and web interfaces.
