Free encrypted STEEM AR POS Terminal - No equipment to buy

disregardfiat (59)in #utopian-io • 6 years ago

Hey Steemians and Utopians, today I'm going to build more functionality in to the dlux templates to encourage commerce because of steem. Utilizing this "freemium" blockchain enables anybody wishing to interact with another or trade with another a utility to do just that.

By providing a way to interact in the real world with no software downloads to users of nearly any smart device, we've bridged the p2p gap in the face2face economy.

Now on to the fun part: providing a template to sell your inventory.

AFRAME.registerComponent('buy', { 
        schema: {default: ''},

        init: function () {
          var el = document.querySelector('buy');
          this.el.addEventListener('click', function(){
            if (iam == 'Guest') {
              sendLink('/auth');
            } else {
            window.parent.postMessage({
            'func': 'passGenerateHotLink',
            'message': {to:'disregardfiat',amount:'1.000 STEEM',memo:'I paid for nothing in a cool new way',uri:''}
            }, "*");
            }
          });
        }
      });

This is a component definition for an aframe. entity. These allow you to trigger interactions with your environment. The dlux portion of this asks if a user has logged in with steem connect, so if you user isn't logged on with this example they will be directed to a steem connect login instead of a different action. They will recieve a cookie that will return them to the dApp upon completion. This is done because it is difficult to enter text in VR as this is device agnostic, asking a user to sign in with steem connect also becomes a familiar and trustable experience for the end user.

If a user is logged in the only variable that the dApp has is their username at this time(However, the hot signing link handles this outside of the app). This is used to generate the hot link again in the familiar steemconnect interface. Where a user may keep their active password in a password manager. The message to the parent window is on a white list to prevent XXS of the steem connect wallet functions outside of vote. There are also calls to send a link to navigate off the dApp. Future work will include sending follow request, custom json, and flags for requests to set client side permissions.

passGenerateHotLink has 5 arguments:

to: this is where steem will be transfered
amount: must contain 3 decimal places and STEEM or SBD identifier
memo: pass a message
uri: where to return, leave this blank to return to the dApp, start the string with ? to pass variable back into your dApp?var=value, otherwise fill out as appropriate.
skipEncode: true of false to send a clear text memo.
- If your user doesn't have their memo key loaded the output of the encoder will be : "No Private Memo Key Found" and the user will still have the option to send the amount. You can check for the hasMemoKey flag and sendlink('/keycam') to direct a user to a secure place to load their key, verify on github.

Passing back variables may not get you out of your jam, your app is static once posted. However, it does have access to the steem blockchain, which means you can come up with all kinds of clever ways to interface beyond the sale. Query the users account history to see the transaction. Over charge by 0.00n to send back n status messages. The real holy grail is encrypted communications which enable far more kinds of services and transactions. Such as sending a ride share request, we don't want everybody to know where you are.

After looking through some steemconnect documentation this doesn't appear to be readily possible. Which means I needed to modify dlux to enable the type of e-commerce I'm foreseeing. I found "instascan" by schmich under the MIT license. This is an all javascript QR reader with no external dependencies. I built a page to serve the camera scanner /keycam and also to dump the keys stored on local storage. A memo key never needs to be exposed to the dApps posted on the blockchain. So now I can built a memo encoder.

So this is what I came up with:
A QR code reader that checks if a valid memo key has been scanned for the logged in user, if so... stores that as a memoKey. These are stored in the dlux.io local storage and has no API to the dApps.
Here is some relevant code:

function passGenerateHotLink(message) {
            if(message.uri == ''){
              message.uri = window.location;
            } else if (message.uri.charAt(0) == '?') {
            message.uri = window.location + message.uri
            }
            if (!message.skipEncode){
            var message.memo = encodeMsg(message.memo, message.to)
            }
            generateHotLink(message.to,message.amount,message.memo,message.uri)
          }

as well as the key scanner(can this be more secure?):

function clearLocalStorage () {
      localStorage.memoKey = ''
      document.getElementById('memoMsg').innerHTML = 'Scan Private Memo Key'
      }
      if (localStorage.memoKey) {
      document.getElementById('memoMsg').innerHTML = 'Memo Key Stored'
      } else {
      document.getElementById('memoMsg').innerHTML = 'Scan Private Memo Key'
      }
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
      steem.api.getAccounts(['#{iAm}'], (err, result) => {
      if (err) {
      console.log(err)
      }
      if (result.length === 0) {
     console.log('No Such User')
      }
      let publicMemoKey = result[0].memo_key
      try {
      if (steem.auth.wifIsValid(content, publicMemoKey)){
      localStorage.memoKey = content;
      document.getElementById('memoMsg').innerHTML = 'Memo Key Stored'
      }
      } catch (e) {
      console.log(e)
      }
      });
      });

I also added a flag to give dApps knowledge if a user has a stored memo key.

target.postMessage({
      'func': 'memoKey',
      'message': hasMemoKey(),
      }, "*");

which you can see in the glitch templates

var hasMemoKey = false;
    function memoKey (message) {
    hasMemoKey = message;
    }

Finally, we have the ability to conduct obscured commerce!
Next we'll locate a button nested in the AR marker.

<a-marker preset="hiro">
<a-box position="-2 0 0" color="green" buy>
      <a-text position="0 0.51 0" rotation="-90 0 0" value="Buy" buy></a-text>
</a-box>
(html comment removed:  Lots more stuff can go in here and is )
</a-marker>

Final Result

Of course adding a model of what you are selling, or a description of where their steem is going and what for couldn't hurt.

You can generate qr codes that have ?table=4&store=130 appended to them so the static dApp knows where to send a food order. When your dApp is posted on dlux it will automatically be generated with the standard AR marker and qr code. Use https://dlix.io/qr?link=https://dlux.io/dluxar/@yourname/permlink?var1=bar&var2=foo format to generate location and purpose specific qr codes.

Now just follow the rest of the instructions in the readme to post your application.

#steem #dlux #learning #cryptocurrency