o3-dapi-ont
Version:
Ontology Plugin for o3-dapi
475 lines (418 loc) • 20.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta property="og:title" content="O3 dapi - Ontology Testbed">
<meta property="og:type" content="website">
<meta property="og:url" content="https://o3.network">
<meta property="og:image" content="https://cdn.o3.network/img/nep5icons/ONT.png">
<meta property="og:description" content="A testbed for the O3 dapi Ontology plugin.">
<title>O3 Dapp Platform - Ontology</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<!-- <script type="text/javascript" src="../../core/lib/o3-dapi-core.min.js"></script>
<script type="text/javascript" src="../lib/o3-dapi-ont.min.js"></script> -->
<!-- <script type="text/javascript" src="../../core/build/bundle.js"></script> -->
<script type="text/javascript" src="../build/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/o3-dapi-core@0.3.0/lib/o3-dapi-core.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/o3-dapi-ont@0.2.3/lib/o3-dapi-ont.min.js"></script> -->
</head>
<body>
<div class="nav">
<h4 class="title">O3 Dapp Platform - Ontology Plugin</h4>
<div class='account-container'>
<div id="account" class="account"></div>
<div id="disconnect" class="disconnect" onclick="disconnect()"></div>
</div>
<select id="networks" name="networks"></select>
</div>
<div class="content">
<div class="functions">
<h3>Available functions</h3>
<div class="scroll-container">
<div class="function-container">
<h5 class="title">getProvider</h5>
<p class="text">
<p>Returns information about the dAPI provider, including who this provider is, the version of their dAPI, and the NEP that the interface is compatible with.</p>
</p>
<button type="button" class="btn btn-primary" onclick="getProvider()">Get provider</button>
</div>
<div class="function-container">
<h5 class="title">getNetworks</h5>
<p class="text">
<p>Returns a list of available provider networks</p>
</p>
<button type="button" class="btn btn-primary" onclick="getNetworks()">Get networks</button>
</div>
<div class="function-container">
<h5 class="title">getAccount</h5>
<p class="text">
<p>Returns connected account address.</p>
</p>
<button type="button" class="btn btn-primary" onclick="getAccount()">Get account</button>
</div>
<div class="function-container">
<h5 class="title">getPublicKey</h5>
<p class="text">
<p>Returns connected account public key.</p>
</p>
<button type="button" class="btn btn-primary" onclick="getPublicKey()">Get public key</button>
</div>
<div class="function-container">
<h5 class="title">getNodeCount</h5>
<p class="text">
<p>Returns the number of nodes in the network.</p>
</p>
<button type="button" class="btn btn-primary" onclick="getNodeCount()">Get Node Count</button>
</div>
<div class="function-container">
<h5 class="title">getBlockHeight</h5>
<p class="text">
<p>Returns the block height of the network.</p>
</p>
<button type="button" class="btn btn-primary" onclick="getBlockHeight()">Get Block Height</button>
</div>
<div class="function-container">
<h5 class="title">getMerkleProof</h5>
<p class="text">
<p>Returns the Merkle Proof for a given transaction hash.</p>
</p>
<br/>
<p>Transaction ID:</p>
<input id='getMerkleProofInput' type="text" value="20054354e385b262f5754929c11990a86757e4e9f5104102ba0b0aa6b1368999"/>
<button type="button" class="btn btn-primary" onclick="getMerkleProof()">Get Merkle Proof</button>
</div>
<div class="function-container">
<h5 class="title">getTransaction</h5>
<p class="text">
<p>Returns the transaction JSON for a given transaction hash.</p>
</p>
<br/>
<p>Transaction ID:</p>
<input id='getTransactionInput' type="text" value="20054354e385b262f5754929c11990a86757e4e9f5104102ba0b0aa6b1368999"/>
<button type="button" class="btn btn-primary" onclick="getTransaction()">Get Tx</button>
</div>
<div class="function-container">
<h5 class="title">getBlock</h5>
<p class="text">
<p>Returns information about a block a given block height or hash.</p>
</p>
<br/>
<p>Block height or hash:</p>
<input id='getBlockInput' type="text" value="1088379"/>
<button type="button" class="btn btn-primary" onclick="getBlock()">Get Block</button>
</div>
<div class="function-container">
<h5 class="title">getSmartCodeEvent</h5>
<p class="text">
<p>Returns information about a block a given block height or hash.</p>
</p>
<br/>
<p>Transaction ID:</p>
<input id='getSmartCodeEventInput' type="text" value="20054354e385b262f5754929c11990a86757e4e9f5104102ba0b0aa6b1368999"/>
<button type="button" class="btn btn-primary" onclick="getSmartCodeEvent()">Get Smart Code Event</button>
</div>
<div class="function-container">
<h5 class="title">getContract</h5>
<p class="text">
<p>Returns information about a given smart contract.</p>
</p>
<br/>
<p>Script hash:</p>
<input id='getContractInput' type="text" value="0200000000000000000000000000000000000000"/>
<button type="button" class="btn btn-primary" onclick="getContract()">Get Contract</button>
</div>
<div class="function-container">
<h5 class="title">getStorage</h5>
<p class="text">
<p>Reads the raw value in smart contract storage.</p>
</p>
<p>Script hash:</p>
<input id='getStorageScriptHash' type="text" value="0200000000000000000000000000000000000000"/>
<br/>
<p>Key:</p>
<input id='getStorageKey' type="text" value="AFmseVrdL9f9oyCzZefL9tG6UbviEH9ugK"/>
<button type="button" class="btn btn-primary" onclick="getStorage()">Get storage</button>
</div>
<!-- <div class="function-container">
<h5 class="title">getGasPrice</h5>
<p class="text">
<p>Returns gas price (network fee).</p>
</p>
<button type="button" class="btn btn-primary" onclick="getGasPrice()">Get gas price</button>
</div> -->
<div class="function-container">
<h5 class="title">getBalance</h5>
<p class="text">
<p>Returns the ONT and ONG balance for a given address.</p>
</p>
<input id='getBalanceInput' type="text" value="AFmseVrdL9f9oyCzZefL9tG6UbviEH9ugK"/>
<button type="button" class="btn btn-primary" onclick="getBalance()">Get balance</button>
</div>
<div class="function-container">
<h5 class="title">getBlockHeightByTxHash</h5>
<p class="text">
<p>Returns the block hight that a given tx was executed in.</p>
</p>
<input id='getBlockHeightByTxHashInput' type="text" value="20054354e385b262f5754929c11990a86757e4e9f5104102ba0b0aa6b1368999"/>
<button type="button" class="btn btn-primary" onclick="getBlockHeightByTxHash()">Get tx block height</button>
</div>
<div class="function-container">
<h5 class="title">getAllowance</h5>
<p class="text">
<p>Reads the raw value in smart contract storage.</p>
</p>
<p>Asset:</p>
<input id='getAllowanceAssetInput' type="text" value="ONT"/>
<br/>
<p>From address:</p>
<input id='getAllowanceFromInput' type="text" value="AFmseVrdL9f9oyCzZefL9tG6UbviEH9ugK"/>
<br/>
<p>To address:</p>
<input id='getAllowanceToInput' type="text" value="AYmMcV5chKwkBWpXCxdCDaBJYrLFLbycYb"/>
<button type="button" class="btn btn-primary" onclick="getAllowance()">Get allowance</button>
</div>
<div class="function-container">
<h5 class="title">invokeRead</h5>
<p class="text">
<p>Execute a contract invocation in read-only mode.</p>
</p>
<p>Script hash:</p>
<input id='invokeReadScriptHash' type="text" value="0239dcf9b4a46f15c5f23f20d52fac916a0bac0d"/>
<br/>
<p>Operation:</p>
<input id='invokeReadOperation' type="text" value="balanceOf"/>
<br/>
<p>Arguments:</p>
<textarea id='invokeReadArgs'>[{"type":"Address","value":"AUr5QUfeBADq6BMY6Tp5yuMsUNGpsD7nLZ"}]</textarea>
<button type="button" class="btn btn-primary" onclick="invokeRead()">Invoke read</button>
</div>
<div class="function-container">
<h5 class="title">invoke</h5>
<p class="text">
<p>Execute a contract invocation.</p>
</p>
<br/>
<p>Script hash:</p>
<input id='invokeScriptHash' type="text" value="0239dcf9b4a46f15c5f23f20d52fac916a0bac0d"/>
<br/>
<p>Operation:</p>
<input id='invokeOperation' type="text" value="transfer"/>
<br/>
<p>Arguments:</p>
<textarea id='invokeArgs'>[{"type":"Address","value":"AUr5QUfeBADq6BMY6Tp5yuMsUNGpsD7nLZ"},{"type":"Address","value":"AecaeSEBkt5GcBCxwz1F41TvdjX3dnKBkJ"},{"type":"ByteArray","value":"0600000000000000"}]</textarea>
<br/>
<p>Gas price override: (Optional)</p>
<input id='invokeGasPrice' type="text" placeholder="500" value="500"/>
<br/>
<p>Gas limit override: (Optional)</p>
<input id='invokeGasLimit' type="text" placeholder="20000" value="20000"/>
<br/>
<p>Broadcast override:</p>
<input id='invokeBroadcastOverride' type="checkbox"/>
<br/>
<button type="button" class="btn btn-primary" onclick="invoke()">Invoke</button>
</div>
<div class="function-container">
<h5 class="title">deploy</h5>
<p class="text">
<p>Deploy a smart contract.</p>
</p>
<br/>
<p>Name:</p>
<input id='deployName' type="text" value="Hello World"/>
<br/>
<p>Version:</p>
<input id='deployVersion' type="text" value="v8"/>
<br/>
<p>Author:</p>
<input id='deployAuthor' type="text" value="James"/>
<br/>
<p>Email:</p>
<input id='deployEmail' type="text" value="support@o3.network"/>
<br/>
<p>Description:</p>
<input id='deployDescription' type="text" value="This is my first smart contract!"/>
<br/>
<p>NeedStorage:</p>
<input id='deployNeedStorage' type="checkbox" />
<br/>
<p>GasPrice (optional):</p>
<input id='deployGasPrice' type="text" value="500"/>
<br/>
<p>GasLimit (optional):</p>
<input id='deployGasLimit' type="text" value="20000000"/>
<br/>
<p>Code:</p>
<textarea id='deployCode'>0113c56b6a00527ac46a51527ac46a00c30551756572799c6416006a51c300c36a52527ac46a52c365f4026c7566616a00c30852656769737465729c6424006a51c300c36a52527ac46a51c351c36a53527ac46a52c36a53c37c6519026c7566616a00c3085472616e736665729c6424006a51c300c36a52527ac46a51c351c36a54527ac46a52c36a54c37c65f4006c7566616a00c30c44656c657465446f6d61696e9c6416006a51c300c36a52527ac46a52c3650b006c756661006c75665bc56b6a00527ac4681953797374656d2e53746f726167652e476574436f6e74657874616a51527ac46a51c36a00c37c681253797374656d2e53746f726167652e476574616a52527ac46a52c3681b53797374656d2e52756e74696d652e436865636b5769746e657373616a53527ac46a53c3630700006c7566616a51c36a00c37c681553797374656d2e53746f726167652e44656c657465610644656c6574656a00c37c681553797374656d2e52756e74696d652e4e6f7469667961516c75660112c56b6a00527ac46a51527ac46a51c3009c640700006c756661681953797374656d2e53746f726167652e476574436f6e74657874616a52527ac46a52c36a00c37c681253797374656d2e53746f726167652e476574616a53527ac46a53c3009c640700006c7566616a53c36a51c39c640700516c7566616a53c3681b53797374656d2e52756e74696d652e436865636b5769746e657373616a54527ac46a54c3630700006c7566616a52c36a00c36a51c35272681253797374656d2e53746f726167652e50757461085472616e736665726a00c37c681553797374656d2e52756e74696d652e4e6f7469667961516c75665bc56b6a00527ac46a51527ac4681953797374656d2e53746f726167652e476574436f6e74657874616a52527ac46a52c36a00c37c681253797374656d2e53746f726167652e476574616a53527ac46a53c3009e640700006c7566616a52c36a00c36a51c35272681253797374656d2e53746f726167652e507574610852656769737465726a00c36a51c35272681553797374656d2e52756e74696d652e4e6f7469667961516c756654c56b6a00527ac4681953797374656d2e53746f726167652e476574436f6e74657874616a00c37c681253797374656d2e53746f726167652e476574616c7566</textarea>
<br/>
<p>Broadcast override:</p>
<input id='deployBroadcastOverride' type="checkbox"/>
<br/>
<button type="button" class="btn btn-primary" onclick="deploy()">Deploy</button>
</div>
<div class="function-container">
<h5 class="title">send</h5>
<p class="text">
<p>Invoke a transfer of a specified amount of a given asset from the connected account to another account.</p>
</p>
<br/>
<p>To address:</p>
<input id='sendToAddress' type="text" value="AecaeSEBkt5GcBCxwz1F41TvdjX3dnKBkJ"/>
<br/>
<p>Asset:</p>
<input id='sendAsset' type="text" value="ONG"/>
<br/>
<p>Amount:</p>
<input id='sendAmount' type="text" value="0.01"/>
<br/>
<p>Broadcast override:</p>
<input id='sendBroadcastOverride' type="checkbox"/>
<br/>
<button type="button" class="btn btn-primary" onclick="send()">Send</button>
</div>
<div class="function-container">
<h5 class="title">signMessage</h5>
<p class="text">
<p>Sign an arbitrary message.</p>
</p>
<p>Message:</p>
<textarea id='signMessageInput'>Hello World!</textarea>
<button type="button" class="btn btn-primary" onclick="signMessage()">Sign</button>
</div>
<div class="function-container">
<h5 class="title">verifyMessage</h5>
<p class="text">
<p>Verify a message signature.</p>
</p>
<p>Message:</p>
<textarea id='verifyMessageInput'>Hello World!</textarea>
<br/>
<p>Signature:</p>
<textarea id='verifyMessageSignatureInput'></textarea>
<br/>
<p>Public Key:</p>
<input id='verifyMessagePiblicKeyInput' type="text"/>
<br/>
<button type="button" class="btn btn-primary" onclick="verifyMessage()">Verify</button>
</div>
<div class="function-container">
<h5 class="title">TestNet ONG Request</h5>
<p class="text">
<p>This is not a part of the Ontology dapi, but is a request for 100 testnet ONG. Only one request can be submitted per address. If you have previously received testnet ONG from this faucet before, please change accounts and request again.</p>
</p>
<button type="button" class="btn btn-primary" onclick="requestTestnetOng()">Request</button>
</div>
</div>
</div>
<div class="output">
<h3>Output</h3>
<div class="scroll-container">
<div id="loading"><div style="width:100%;height:100%" class="lds-pacman"><div><div></div><div></div><div></div></div><div><div></div><div></div></div></div></div>
<div id="result"></div>
<div id="error"></div>
</div>
</div>
<div id="utils-button" onclick="toggleUtils()">Utils</div>
<div id="utils">
<h3>Utils</h3>
<div class="scroll-container">
<div class="function-container">
<h5 class="title">Hex String <===> String</h5>
<div class="text">
68656c6c6f <===> hello
</div>
<div class="">
<div class="row">
<div>Hex string:</div>
<div>
<input id='utilsHex2strInput' type="text"/>
</div>
<div>=></div>
<div id='utilsHex2strOutput'></div>
</div>
<div class="row">
<div>String:</div>
<div>
<input id='utilsStr2hexInput' type="text"/>
</div>
<div>=></div>
<div id='utilsStr2hexOutput'></div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="utilsString()">Transform</button>
</div>
<div class="function-container">
<h5 class="title">Hex String <===> Integer</h5>
<div class="text">
00e1f505 <===> 100000000
</div>
<div class="">
<div class="row">
<div>Hex string:</div>
<div>
<input id='utilsHex2intInput' type="text"/>
</div>
<div>=></div>
<div id='utilsHex2intOutput'></div>
</div>
<div class="row">
<div>Integer:</div>
<div>
<input id='utilsInt2hexInput' type="number"/>
</div>
<div>=></div>
<div id='utilsInt2hexOutput'></div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="utilsInteger()">Transform</button>
</div>
<div class="function-container">
<h5 class="title">Big endian <===> Little endian</h5>
<div class="text">
bc99b2a477e28581b2fd04249ba27599ebd736d3 <===> d336d7eb9975a29b2404fdb28185e277a4b299bc
</div>
<div class="">
<div class="row">
<div>Hex string:</div>
<div>
<input id='utilsReverseHexInput' type="text"/>
</div>
<div>=></div>
<div id='utilsReverseHexOutput'></div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="utilsReverseHex()">Transform</button>
</div>
<div class="function-container">
<h5 class="title">Address <===> ScriptHash</h5>
<div class="text">
Ab2fvZdmnM4HwDgVbdBrbTLz1wK5TcEyhU <===> d336d7eb9975a29b2404fdb28185e277a4b299bc
</div>
<div class="">
<div class="row">
<div>Address:</div>
<div>
<input id='utilsAddress2scriptHashInput' type="text"/>
</div>
<div>=></div>
<div id='utilsAddress2scriptHashOutput'></div>
</div>
<div class="row">
<div>ScriptHash:</div>
<div>
<input id='utilsScriptHash2addressInput' type="text"/>
</div>
<div>=></div>
<div id='utilsScriptHash2addressOutput'></div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="utilsAddress()">Transform</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>