Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
387 lines (330 sloc) 10.5 KB
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Security-Policy" content="
default-src 'none';
script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net;
style-src 'self' 'unsafe-inline' https://necolas.github.io;
img-src 'self' data:;
frame-src *;
connect-src *;
">
<title>cosmic-lib demo page</title>
<link rel="stylesheet" type="text/css"
href="https://necolas.github.io/normalize.css/latest/normalize.css">
</head>
<script>
var cosmicLink, pageBox, networkBox, sourceBox, extraBox, signerBox,
formatBoxes = [], lockButton, signButton, sendButton,
formats = ['uri', 'query', 'json', 'xdr', 'sep7']
function preinit () {
// Asynchronous CSS loading.
cosmicLib.load.styles('cosmic-lib.css').then(init)
}
function init () {
// Grabbing the HTML elements for later use.
pageBox = document.querySelector('#page')
networkBox = document.querySelector('#network')
horizonBox = document.querySelector('#horizon')
callbackBox = document.querySelector('#callback')
sourceBox = document.querySelector('#source')
extraBox = document.querySelector('#extra')
signerBox = document.querySelector('#signer')
lockButton = document.querySelector('#lockButton')
signButton = document.querySelector('#signButton')
sendButton = document.querySelector('#sendButton')
// Default configuration.
cosmicLib.config.page = pageBox.value = 'https://cosmic.link'
cosmicLib.config.network = networkBox.value = 'test'
cosmicLib.config.source = sourceBox.value = ''
// Setup format boxes.
formats.forEach(format => initBox(format))
// Maybe show SEP-0007 handler registering.
if (cosmicLib.sep7Utils.isWebHandlerSupported()) {
document.querySelector('#registerSep7Handler').hidden = false
}
// Create the initial cosmicLink.
refresh()
}
function initBox (format) {
const box = document.querySelector('#' + format)
// Save HTML format boxes for later use.
formatBoxes[format] = box
// Parse a new cosmicLink each time a format box is changed.
box.onchange = function () { refresh(box.value) }
}
// Parse cosmicLink.
function refresh (transaction) {
// Use an empty query if none is provided.
if (!transaction) transaction = location.search || '?'
// Reset the interface.
clearBoxes()
disableButtons()
lockButton.disabled = false
// Create the new cosmicLink.
cosmicLink = new CosmicLink(transaction, { page: pageBox.value })
refreshBoxes()
}
function set () {
const page = pageBox.value
const txFields = {
network: networkBox.value || null, horizon: horizonBox.value || null,
callback: callbackBox.value || null, source: sourceBox.value || null,
sequence: sourceBox.value === cosmicLink.source ? cosmicLink.tdesc.sequence : null
}
if (lockButton.disabled) refresh()
cosmicLink.page = page
cosmicLink.setTxFields(txFields)
refreshBoxes()
}
// Compute XDR and update boxes accordingly.
function lock () {
formats.forEach(format => formatBoxes[format].placeholder = 'Computing...')
cosmicLink.lock({ network: networkBox.value, source: sourceBox.value })
.then(function (obj) {
// cosmicLink may have changed by the time lock() resolves.
if (obj !== cosmicLink) return
refreshBoxes()
enableButtons()
}).catch(refreshBoxes)
}
function sign () {
// Get the signer (private key or preimage) from user input.
var signer = signerBox.value
// Ignore cases when there's no input in signer box.
if (!signer) return
// Transform secret seed into Stellar Keypair.
if (signer.substr(0,1) === 'S') {
var signer = StellarSdk.Keypair.fromSecret(signer)
}
// Update the interface.
display('Signing...')
disableButtons()
// Sign.
cosmicLink.sign(signer)
.then(function () {
display('Done')
refreshBoxes()
})
.catch(display)
.finally(enableButtons)
}
function send () {
// Send.
const promise = cosmicLink.send()
display('Sending...')
disableButtons()
promise.then(display).catch(display).finally(enableButtons)
}
function openLink (target) {
try {
cosmicLink.open(target)
} catch (error) {
console.error(error)
display(error.message)
}
}
function registerSep7Handler () {
cosmicLib.sep7Utils.registerWebHandler(
location.href.slice(0, -location.search.length),
"Cosmic.plus SEP-0007 debugger"
)
}
/** Helpers **/
// Display a message in the interface
function display (message) {
var box = document.querySelector('#message')
if (message._links) {
box.textContent = 'Success: ' + message._links.transaction.href
} else {
box.textContent = message
}
if (message.response && message.response.data) {
const json = JSON.stringify(message.response.data.extras.result_codes, null, 2)
box.textContent += '\n' + json
}
}
// Clear format boxes.
function clearBoxes () {
for (let format in formatBoxes) {
formatBoxes[format].value = ''
formatBoxes[format].placeholder = format
}
}
// Refresh boxes content.
function refreshBoxes () {
if (cosmicLink.errors) lockButton.disabled = true
// Refresh edition boxes.
pageBox.value = cosmicLink.page || cosmicLib.config.page
networkBox.value = cosmicLink.network || cosmicLib.config.network
horizonBox.value = cosmicLink.horizon || ""
callbackBox.value = cosmicLink.callback || ""
sourceBox.value = cosmicLink.source || ""
extraBox.value = JSON.stringify(cosmicLink.extra, null, 2)
// SEP-0007: Update origin_domain after signature check.
if (cosmicLink.extra.originDomain) {
cosmicLink.verifySep7().catch(error => {
cosmicLink.extra.originDomain = error.message
}).finally(() => {
extraBox.value = JSON.stringify(cosmicLink.extra, null, 2)
})
}
// Refresh format boxes.
formats.forEach(format => {
const box = formatBoxes[format]
if (format === 'query') history.replaceState({}, '', cosmicLink[format])
try {
box.value = cosmicLink[format] || ""
box.placeholder = cosmicLink.status || format
} catch (error) {
box.placeholder = error.message
}
})
}
// Disable sign/send buttons.
function disableButtons () {
signButton.disabled = true
sendButton.disabled = true
}
// Enable sign/send buttons.
function enableButtons () {
signButton.disabled = null
sendButton.disabled = null
lockButton.disabled = true
}
</script>
<style>
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
width: 100%;
font-size: 1.2em;
}
h1 {
font-size: 1.6em;
float: left;
}
h2 {
font-size: 1.4em;
}
hr {
clear: both;
}
a {
font-size: 1.2em;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
max-width: 80em;
margin: auto;
}
.column {
box-sizing: border-box;
min-width: 40%;
width: 32em;
max-width: 90%;
margin: 0 auto;
padding: 1%;
overflow: hidden;
}
label {
float: left;
width: 10em;
margin: auto;
}
input, textarea {
display: block;
width: 100%;
max-width: 20em;
resize: none;
margin: 0.5em auto;
}
</style>
<body id="body" onload="preinit()">
<header>
<h1>cosmic-lib demo page</h1>
<a href="https://github.com/MisterTicot/js-cosmic-lib-src/blob/master/static/demo.html">
(Source code)</a>
</header>
<hr>
<main>
<div class="column">
<h2>Transaction</h2>
<!-- An HTML element with id="cosmiclink_description" will automatically
contains the last cosmicLink transaction description.
-->
<div id="cosmiclink_description"></div>
<h2>Sign & Send</h2>
<form autocomplete="off">
<input id="signer" type="text" placeholder="Private key or preimage">
<input id="signButton" type="button" value="Sign" onclick="sign()">
<input id="sendButton" type="button" value="Send" onclick="send()">
<pre id="message"></pre>
</form>
<h2>Open</h2>
<ul>
<li><a href="javascript:openLink('frame')">
Open in side-frame
</a></li>
<li><a href="javascript:openLink('tab')">
Open in new tab
</a></li>
<li><a href="javascript:openLink('current')">
Open in current window
</a></li>
<li><a href="javascript:openLink('sep7')">
Open with your SEP-0007 handler
</a></li>
</ul>
<div id="registerSep7Handler" hidden>
<h2>Setup</h2>
<ul>
<li><a href="javascript:registerSep7Handler()">
Set this page as your SEP-0007 handler
</a></li>
</ul>
</div>
</div>
<div class="column">
<form autocomplete="off">
<h2>Meta-Parameters</h2>
<label for="page">Page:</label>
<input id="page" type="text" onchange="set()">
<label for="network">Network:</label>
<input id="network" type="text" onchange="set()">
<label for="horizon">Horizon:</label>
<input id="horizon" type="text" onchange="set()">
<label for="callback">Callback:</label>
<input id="callback" type="text" onchange="set()">
<label for="source">Source:</label>
<input id="source" type="text" onchange="set()">
<h2>Formats</h2>
<label for="uri">URI:</label>
<input id="uri" type="text" placeholder="URI">
<label for="query">Query:</label>
<input id="query" type="text" placeholder="Query">
<label for="json">JSON:</label>
<textarea id="json" rows=8 placeholder="JSON"></textarea>
<label for="lockButton">Lock:</label>
<input id="lockButton" type="button" value="Check Sources / Compute XDR" onclick="lock()">
<label for="xdr">XDR:</label>
<textarea id="xdr" rows=3 placeholder="XDR"></textarea>
<label for="sep7">SEP-0007:</label>
<input id="sep7" type="text" placeholder="SEP-0007">
<label for="extra">SEP-0007 extra:</label>
<textarea id="extra" rows=5 placeHolder="/xtra"></textarea>
</form>
</div>
</main>
<hr>
<footer>
</footer>
<script src="https://cdn.jsdelivr.net/gh/stellar/bower-js-stellar-sdk@3.x/stellar-sdk.min.js"></script>
<script>console.log(StellarSdk)</script>
<script src="cosmic-lib.js"></script>
<script>console.log(cosmicLib)</script>
<script>var CosmicLink = cosmicLib.CosmicLink</script>
</body>
</html>
You can’t perform that action at this time.