<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser-polyfill.min.js'></script>



  <script src="https://unpkg.com/@arianee/arianeejs@latest/browser/bundle.js">
  </script>
  
</head>
<body>

  <div class="centered">
    <button type="submit" onclick="start()" class="big_button" id="big_button">Create an Arianee Certificate</button>
    <div id="console"></div>
    <div id="loader"></div>
    <div id="qrcodediv" style="display:none">
      Please scan with Arianee Wallet<br/>
  <img id="qrcode"  width="200" height="200" />
    </div>
  </div>
</body>
</html>
img{
  image-rendering: pixelated;
}

.big_button {
  font-size: 20px!important;
}

.centered {
  position: relative;
  width: 100%;
  margin: auto;
}

#console, #qrcodediv {
  margin: auto;
  position: relative;
  width: auto;
  margin: auto;
  max-width: 250px;
  
  font-family: arial;
  
}

#qrcodediv {
  padding-top: 20px;
  text-align:center;
  font-weight: bold;
}
.show {
  display: block!important;
}

.hide {
  display: none!important;
  
}

#loader {
  margin-top: 20px;
  background: url('https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif');
  width: 48px;
  height: 48px;
  display:none;
}

#console li {
    padding-left: 20px;
    content: "\f2bc";
    background: url('https://img.icons8.com/material-outlined/24/000000/checked.png') no-repeat;
  background-size: 15px ;
}

.centered * {
  margin: auto!important;
  display: block
}
// Create random wallet
async function createAsync() {
  
  const {Arianee} = ArianeeLib;

  const arianeeLib = new Arianee();
  const arianee = await arianeeLib.init("testnet");
  
  // Create a random wallet
  var wallet = arianee.fromRandomKey();
  
_("Generating new wallet");
  
// Getting POA token for Gas
await wallet.requestPoa()
     .then(i => _("Getting POA"))
     .catch(i => _("Getting POA",false));

// Getting Aria
await wallet.requestAria()
     .then(i => _("Getting ARIA"))
     .catch(i => _("Getting ARIA",false));

// Approve store contract to manage our Aria  
await wallet.methods.approveStore()
     .then(i => _("Approve store"))
     .catch(i => _("Approve store",false));  
 
// Buy certificate credits  
await wallet.methods.buyCredits('certificate', 5)   
     .then(i => _("Buying credits"))
     .catch(i => _("Buying credits",false));

// Grab certificate content
var certificate = await fetch("https://cert.arianee.org/cert/sampleCertAdv.json");
var content = await certificate.json().then(i => {_("Getting certificate content"); return i;});

  
// Create a certificate based on a self hosted json  
await wallet.methods.createCertificate({
     uri: "https://cert.arianee.org/cert/sampleCertAdv.json",
     content:content})      
     .then((i) => {
          _("Creating certificate");
          _("Arianee ID:"+i.certificateId);
          _("Passphrase:"+i.passphrase)
         
          displayQRCode(i.certificateId,i.passphrase);
 
    })
     .catch(i => console.log("Creating certificate : error ", JSON.stringify(i)));

}







// Helper functions for live demo

function _(log,success=true) {
  console.log(log);
  
  var node = document.createElement("LI");                 // Create a <li> node
  var textnode = document.createTextNode(log);         // Create a text node
node.appendChild(textnode);                              // Append the text to <li>
  document.getElementById("console").appendChild(node);     // Append <li> to <ul> with id="myList"
  
  window.scrollTo(0,1000);
  
}

function displayQRCode(id,passphrase) {
  document.getElementById('qrcode').src='https://tools.arianee.org/qrcode.php?&chld=L&size=200x200&logo=https://demo.arianee.org/demo/logoa.png&data=https://test.arian.ee/'+id+','+passphrase;
  document.getElementById('qrcodediv').style='';
  document.getElementById('loader').classList.add('hide');
   window.scrollTo(0,1000);

}

function start() {
  
var loader = document.getElementById("loader");
  loader.classList.add("show");
  
 var button = document.getElementById("big_button");
  button.classList.add("hide"); 
  createAsync();
} 

console.clear()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.