const c = console
const http = require('axios')
const address = "12RXhCqxnXgJyfJLL2mvcqT3jCQ2o6rMAR"
const main_tx = "6ccb90813afb1ef86cf778be68d43f2625352a03791b22aa4cdb9fbf622a108b"
// Data available when reading data at BTC addres 12RXhCqxnXgJyfJLL2mvcqT3jCQ2o6rMAR (${address}) - you can use this runkit / nodejs script to generate the json or directly call it here - https://runkit.com/makevoid/blockchain-contract
//
// let ctr = require('@runkit/makevoid/blockchain-contract/3.0.0')
//
let ctr = '{"contract":{"marriage":["Kristina Butkute","Francesco Canessa"]},"timestamp":"2016-10-29 1:30 PM UTC","location":"Tower Hamlets public hall, London, UK","signatures":["FC","KB"],"contract_scan_sha2":"WILL_PROVIDE","contract_scan":{"http":"WILL_UPLOAD","torrent":"WU","ipfs":"WU"},"location_coords":{"lat":"51.527952","lng":"-0.019323"},"image_files":["marriage_certificate.jpg"],"github_usernames":["makevoid","kristinab"],"eid_1":"CANESSA,FRANCESCO,38706040087","eid_sig_1":{"FC":"48ddf18e4ec4fbccf7403d01bd83abdd26f7afb4ff5"},"eid_2":"BUTKUTE,KRISTINA,48511110100","void_address":"14EUVdBzCnAqm872XyeCThzG4hsgjZ9NB9","eid_sig_2":{"KB":"5632e93da14fbe30580b0daae4c927878fd8337226c"},"h":"abc96bfe2ca6966ab3ad20044907fac1573684d6eae66a489f92c8ccc88e8e81","cert_http":"http://mkvd.s3.amazonaws.com/marriage_certificate.jpg","torrent":"a4e79d1b4531dcb1d99c34fd6aad30241b95d976&dn=m%5Fcert.jpg","ipfs":"Qmcq9Epj1qNFwseojUAXYqwQGgw45Q4Xwfg7WsM7za3xBV","contract_end":true}'
// let ctr = require @runkit
ctr = JSON.parse(ctr)
c.log(ctr)
let firstKey = (obj) => {
return Object.keys(obj)[0]
}
let firstValue = (obj) => {
return obj[firstKey(obj)]
}
let capitalize = (str) => {
let tail = str.toString().substr(1)
return `${str[0].toUpperCase()}${tail}`
}
let ghLinks = (usernames) => {
return usernames.map((username) => {
return `<a href="https://github.com/${username}">${username}</a>`
}).join(", ")
}
let ghImages = (details) => {
return details.map((detail) => {
let image = detail.avatar_url
return `
<div class="column-nah">
<img src="${image}" style="width: 200px; float:left; margin-right: 20px;" />
</div>
`
}).join(" ")
}
let arrPrint = (arr) => {
return arr.join(", ")
}
// ---------------------
// request data (inline using async)
let ghDetails = []
for (username of ctr.github_usernames) {
let url = `https://api.github.com/users/${username}`
let resp = await http.get(url)
ghDetails.push(resp.data)
}
//
// ---------------------
// view layer
const gpsCoordsCsv = `${ctr.location_coords.lat}, ${ctr.location_coords.lng}`
const contractTitle = `
<h2 class="subtitle" style="margin-bottom: 25px;">${capitalize(firstKey(ctr.contract))}:</h2>
<h1 class="title">${arrPrint(firstValue(ctr.contract))}</h1>`
// cdn default bulma: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css
const view = `
<html><head>
<link rel="stylesheet" href="https://dl.dropbox.com/s/ey8p6kgsln720wp/bulma.css">
<style type="text/css">
.s10 { height: 10px; display: block; }
.s20 { height: 20px; display: block; }
.s30 { height: 30px; display: block; }
.s40 { height: 40px; display: block; }
.s50 { height: 50px; display: block; }
.clear { clear: both; }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
</head><body>
<div class="container is-fluid">
<section class="hero is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
${contractTitle}
</h1>
<h2 class="subtitle">
Blockchain OP_RETURN Contract
<br>
<a href="https://chainflyer.bitflyer.jp/Transaction/${main_tx}">${main_tx}</a>
</h2>
</div>
</div>
</section>
<div class="box">
<h3 class="title is-3">Details:</h3>
<h3 class="title is-5">Github usernames:</h3>
<h3 class="title is-4">
${ghLinks(ctr.github_usernames)}
</h3>
<div class="s40"></div>
${ghImages(ghDetails)}
<div class="clear"></div>
<h3 class="title is-5">Location:</h3>
<h3 class="title is-4">
<a href="https://www.google.co.uk/maps/search/${ctr.location}">
${ctr.location}
</a>
</h3>
<pre><code>coordinates: ${JSON.stringify(ctr.location_coords)}</pre></code>
<div class="s20"></div>
<div id="map" style="width: 350px; height: 150px;"></div>
<div class="s40"></div>
<h3 class="title is-5"></h3>
<h3 class="title is-4">${''}</h3>
<div class="s40"></div>
<h3 class="title is-5"></h3>
<h3 class="title is-4">${''}</h3>
<div class="s40"></div>
<h3 class="title is-5"></h3>
<h3 class="title is-4">${''}</h3>
<div class="s40"></div>
<h3 class="title is-5"></h3>
<h3 class="title is-4">${''}</h3>
<div class="s40"></div>
<h3 class="title is-5">Signatures</h3>
<h3 class="title is-4">${''}</h3>
<p>The digital signatures were performed using two Estonian IDs / E-Residency Cards.</p>
<div class="s40"></div>
<h3 class="title is-5">Raw Contract</h3>
<h3 class="title is-4">${''}</h3>
<div class="s40"></div>
<h3 class="title is-5">BTC Address</h3>
<h3 class="title is-4">
<a href="https://chainflyer.bitflyer.jp/Address/${address}">
${address}
</a>
</h3>
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var L = window.L
var map = L.map('map').setView([${gpsCoordsCsv}], 8);
// var id = "mapbox.streets"
//
// 'https://{s}.tile.osm.org/{z}/{x}/{y}.png'
L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
attribution: ''
}).addTo(map);
L.marker([${gpsCoordsCsv}]).addTo(map)
})
</script>
</body>
`
view
2 comments
- posted 7 years ago byCongrats!
- posted 7 years ago bycool
sign in to comment