Skip to content
This repository has been archived by the owner on Feb 2, 2020. It is now read-only.

Commit

Permalink
+ add playground
Browse files Browse the repository at this point in the history 
* update readme
  • Loading branch information
Sing Painter committed Sep 30, 2018
1 parent 7b60d2f commit 89dfadb
Show file tree
Hide file tree
Showing 2 changed files with 298 additions and 4 deletions.
33 changes: 29 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,25 @@
------------

## Презентация
![google-slides-icon](https://user-images.githubusercontent.com/2198826/46068734-88cf5b00-c182-11e8-8f89-acf0056f3593.png) [goo.gl/ptF2ei](https://goo.gl/ptF2ei)
![46068734-88cf5b00-c182-11e8-8f89-acf0056f3593](https://user-images.githubusercontent.com/2198826/46261295-557e2a80-c4fa-11e8-992a-f958facdea0f.png) **[goo.gl/ptF2ei](https://goo.gl/ptF2ei)**

------------

## Песочница
![metahash-playground](https://user-images.githubusercontent.com/2198826/46261230-3501a080-c4f9-11e8-8390-84730faead28.png)

Песочница находится в [playground.html](playground.html).

[Запустить песочницу](https://epexa.github.io/metahash-js/playground.html) с GitHub Pages **(если нода работает только по HTTP без HTTPS, то в браузере нужно разрешить [запустить небезопасные скрипты](https://user-images.githubusercontent.com/2198826/46060896-5cf5aa80-c16d-11e8-9c50-9b8813923279.png))**.

------------

TODO:
- [ ] доработать песочницу
- [ ] метод getIpFromDns для получения ip-адреса ноды
- [ ] получение адреса (hash) по публичному ключу
- [ ] сделать версию для NodeJS (NPM)
- [ ] README на английском

------------

Expand All @@ -19,7 +37,7 @@
```
2. Если нужно изменить конфигурацию: адрес ноды, и т.д.:
```js
metahash.apiUrl = '172.104.157.248:5795';
metahash.apiUrl = 'http://172.104.157.248:5795';
```
3. Вызвать необходимый метод. Методы возвращают коллбэк в котором есть две переменных: **res** - результат запроса и **err** - в случае ошибки:
```js
Expand All @@ -43,11 +61,11 @@ metahash.имяМетода(первыйПараметр, (res, err) => {
- ### apiUrl
HTTP-адрес ноды.

Значение по умолчанию: "172.104.157.248:5795"
Значение по умолчанию: "http://172.104.157.248:5795"

Пример использования:
```js
metahash.apiUrl = '172.104.157.248:5795';
metahash.apiUrl = 'http://172.104.157.248:5795';
```

- ### tokenPrefix
Expand Down Expand Up @@ -111,12 +129,19 @@ metahash.getTx('23fb8f98f1faecf04c23112ad47bba7b42ff7bcec0cdf22ce231061d02e9ad2c

Параметры:
***to***

***value***

***fee***

***nonce***

***data***

***publicKeyHex***

***privateKey***

***youHashAddress***

Пример использования:
Expand Down
269 changes: 269 additions & 0 deletions playground.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>MetaHash JavaScript playground</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
body {
margin-bottom: 60px;
}
html {
position: relative;
min-height: 100%;
}
.navbar-brand {
font-weight: bold;
padding: 0;
}
.navbar-brand img {
position: relative;
top: 7px;
height: 16px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
text-align: center;
}
.navbar li {
margin: 0 20px;
}
.card-body {
padding-bottom: 0;
}
#network-form {
margin-right: -30px;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="# ">
<img src="https://static.metahash.org/img/logo_mail.svg" class="d-inline-block align-top" alt="MegaHash"> JavaScript playground
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://github.com/epexa/metahash-js">JavaScript library</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="https://developers.metahash.org/hc/en-us/sections/360000600513-General">Documentation</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 col-sm-5" id="network-form">
<div class="col-sm-12">
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="ip-address" placeholder="API URL">
<div class="input-group-append">
<button class="btn btn-warning btn-sm" id="node-address-modal-btn" type="button"><span class="icon-database"></span> Change</button>
</div>
</div>
</div>
</form>
</div>
</div>
</nav>
</header>
<article>
<main role="main" class="container">
<br>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<form id="fetch-balance-form">
<fieldset>
<div class="row">
<div class="col">
<h5 class="card-title"><a target="_blank" href="https://github.com/epexa/metahash-js#fetchbalance">fetchBalance</a></h5>
<h6 class="card-subtitle mb-2 text-muted">get balance information for address</h6>
<br>
<div class="form-group">
<label for="fetch-balance-address">Address:</label>
<input type="text" class="form-control" name="address" id="fetch-balance-address" placeholder="0x009b84f533aa2192456a7e944eb471183abbceafe678a98984" required>
<small class="form-text text-muted">Example: 0x009b84f533aa2192456a7e944eb471183abbceafe678a98984</small>
</div>
<div class="form-group">
<button class="btn btn-success" type="submit">Send request</button>
<a class="btn btn-info explorer-btn" target="_blank" href="">Open in explorer</a>
<button class="btn btn-danger clear-btn" type="button">Clear</button>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Result:</label>
<textarea class="form-control" name="log" rows="7" readonly></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<form id="fetch-history-form">
<fieldset>
<div class="row">
<div class="col">
<h5 class="card-title"><a target="_blank" href="https://github.com/epexa/metahash-js#fetchhistory">fetchHistory</a></h5>
<h6 class="card-subtitle mb-2 text-muted">get history transactions for address</h6>
<br>
<div class="form-group">
<label for="fetch-balance-address">Address:</label>
<input type="text" class="form-control" name="address" id="fetch-balance-address" placeholder="0x009b84f533aa2192456a7e944eb471183abbceafe678a98984" required>
<small class="form-text text-muted">Example: 0x009b84f533aa2192456a7e944eb471183abbceafe678a98984</small>
</div>
<div class="form-group">
<button class="btn btn-success" type="submit">Send request</button>
<a class="btn btn-info explorer-btn" target="_blank" href="#">Open in explorer</a>
<button class="btn btn-danger clear-btn" type="button">Clear</button>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Result:</label>
<textarea class="form-control" name="log" rows="7" readonly></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<form id="get-tx-form">
<fieldset>
<div class="row">
<div class="col">
<h5 class="card-title"><a target="_blank" href="https://github.com/epexa/metahash-js#fetchhistory">getTx</a></h5>
<h6 class="card-subtitle mb-2 text-muted">get transaction information by hash</h6>
<br>
<div class="form-group">
<label for="get-tx-hash">Hash:</label>
<input type="text" class="form-control" name="hash" id="get-tx-hash" placeholder="2af70ff53c2f6e3d28aea8ee4fb566e41fdb2e4ed061ab7ca7989bd4f4a681ab" required>
<small class="form-text text-muted">Example: 2af70ff53c2f6e3d28aea8ee4fb566e41fdb2e4ed061ab7ca7989bd4f4a681ab</small>
</div>
<div class="form-group">
<button class="btn btn-success" type="submit">Send request</button>
<a class="btn btn-info explorer-btn" target="_blank" href="#">Open in explorer</a>
<button class="btn btn-danger clear-btn" type="button">Clear</button>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Result:</label>
<textarea class="form-control" name="log" rows="7" readonly></textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</main>
</article>
<br>
<footer class="footer">
<div class="container-fluid">
<span class="text-muted">MetaHash @ 2018</span>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-native-v4.min.js"></script>
<script src="metahash.min.js"></script>
<script>
const camelCase = (str) => {
str = str.replace(/[=\[\]"]/g, ' ').replace(/ +/g, ' ').replace(/[#\.]/g, '');
str = str.replace(/-([a-z])/g, (_m, l) => {
return l.toUpperCase();
});
return str.replace(/ ([a-z])/g, (_m, l) => {
return l.toUpperCase();
});
}

const initHtmlElements = ($htmlElements) => {
for (let name in $htmlElements) {
let nameConst = $htmlElements[name];
nameConst = camelCase(nameConst);
eval(`window.$${nameConst} = document.querySelector('${$htmlElements[name]}');`);
}
};

initHtmlElements([ '#network-form', '#network-form input[name="ip-address"]', '#fetch-balance-form', '#fetch-balance-form fieldset', '#fetch-balance-form input[name="address"]', '#fetch-balance-form textarea[name="log"]' , '#fetch-balance-form a[class="btn btn-info explorer-btn"]', '#fetch-history-form', '#fetch-history-form fieldset', '#fetch-history-form input[name="address"]', '#fetch-history-form textarea[name="log"]' , '#fetch-history-form a[class="btn btn-info explorer-btn"]', '#get-tx-form', '#get-tx-form fieldset', '#get-tx-form input[name="hash"]', '#get-tx-form textarea[name="log"]' , '#get-tx-form a[class="btn btn-info explorer-btn"]' ]);

//metahash.apiUrl = 'http://172.104.224.65:5795'; // net-dev
$networkFormInputNameIpAddress.value = metahash.apiUrl;

explorerUrl = 'http://mhscan.com/';

$fetchBalanceForm.addEventListener('submit', (e) => {
e.preventDefault();
metahash.apiUrl = 'http://172.104.224.65:5795';
metahash.fetchBalance($fetchBalanceFormInputNameAddress.value, (res, err) => {
if (res) {
console.log('fetchBalance', res);
$fetchBalanceFormTextareaNameLog.value = JSON.stringify(res);
$fetchBalanceFormAClassBtnBtnInfoExplorerBtn.href = explorerUrl + '?page=address&id=' + $fetchBalanceFormInputNameAddress.value;
}
else console.error('fetchBalance', err)
});
});

$fetchHistoryForm.addEventListener('submit', (e) => {
e.preventDefault();
metahash.apiUrl = 'http://172.104.224.65:5795';
metahash.fetchHistory($fetchHistoryFormInputNameAddress.value, (res, err) => {
if (res) {
console.log('fetchHistory', res);
$fetchHistoryFormTextareaNameLog.value = JSON.stringify(res);
$fetchHistoryFormAClassBtnBtnInfoExplorerBtn.href = explorerUrl + '?page=address&id=' + $fetchHistoryFormInputNameAddress.value;
}
else console.error('fetchHistory', err)
});
});

$getTxForm.addEventListener('submit', (e) => {
e.preventDefault();
metahash.apiUrl = 'http://172.104.224.65:5795';
metahash.getTx($getTxFormInputNameHash.value, (res, err) => {
if (res) {
console.log('getTx', res);
$getTxFormTextareaNameLog.value = JSON.stringify(res);
$getTxFormAClassBtnBtnInfoExplorerBtn.href = explorerUrl + '?page=tx&id=' + $getTxFormInputNameHash.value;
}
else console.error('getTx', err)
});
});

</script>


</body>
</html>


0 comments on commit 89dfadb

Please sign in to comment.