374 lines
20 KiB
HTML
374 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<title>EasyDEX - Ugly GUI</title>
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<h3 style="text-align: center;">EasyDEX - Ugly GUI</h3>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading" role="tab" id="headingOne">
|
|
<h4 class="panel-title">
|
|
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#ActivateCoin" aria-expanded="true" aria-controls="ActivateCoin">
|
|
Step #1 - Activate Coin
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="ActivateCoin" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
|
<div class="panel-body">
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<button class="btn btn-default activate-btc">Activate Bitcoin</button>
|
|
<button class="btn btn-default activate-kmd">Activate Komodo</button>
|
|
<button class="btn btn-default active-coin-status">Active Coins Status</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<pre class="active-coin-output"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading" role="tab" id="headingTwo">
|
|
<h4 class="panel-title">
|
|
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#SetupBlockTrail" aria-expanded="false" aria-controls="SetupBlockTrail">
|
|
Step #2 - Setup Blocktrail.com API
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="SetupBlockTrail" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
|
<div class="panel-body">
|
|
<p>You need Blocktrail.com API. Please sign-up by going to <a href="https://www.blocktrail.com/dev/signup" target="blank">this link</a>.<br>
|
|
After login in your account go to "Settings", then go to "API Keys" tab there and get new keys from there.<br>
|
|
Make sure to save the newly generated 'API Key' and 'API Secret'. You'll only see this 'API Secret' first time and never again.</p>
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="blocktrailapi" class="control-label">Blocktrail API Key</label>
|
|
<input type="text" class="form-control blocktrailapi-key" id="blocktrailapi" placeholder="Blocktrail API Key" required="required"><br>
|
|
<button class="btn btn-default blocktrailapi-btn">Activate Blocktrail API</button>
|
|
<br><br>If you are not Liquidity Provider make sure to push this button: <button class="btn btn-default notlp-btn">I'm not LP</button>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<pre class="blocktrail-output"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading" role="tab" id="headingThree">
|
|
<h4 class="panel-title">
|
|
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#WalletLogin" aria-expanded="false" aria-controls="WalletLogin">
|
|
Step #3 - Wallet Login
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="WalletLogin" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
<div class="panel-body">
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="passphrase" class="col-sm-3 control-label">Passphrase</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" class="form-control passphrase-text" id="passphrase" placeholder="Enter your text only passphrase" required="required"><br>
|
|
<button class="btn btn-default login-btn">Login</button>
|
|
<button class="btn btn-default logout-btn">Logout</button>
|
|
<button class="btn btn-default login_btc_jumblr_btn">Login BTC Jumblr</button>
|
|
<button class="btn btn-default login_kmd_jumblr_btn">Login KMD Jumblr</button>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<pre class="passphrase-output"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default step04_smartaddr">
|
|
<div class="panel-heading" role="tab" id="headingThree">
|
|
<h4 class="panel-title">
|
|
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#ListSmartAddresses" aria-expanded="false" aria-controls="ListSmartAddresses">
|
|
Step #4 - List Smart Addresses
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="ListSmartAddresses" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
<div class="panel-body">
|
|
|
|
<div class="col-md-12">
|
|
<h4>FAQ for Smart Addresses can be found <a href="https://github.com/SuperNETorg/komodo/wiki/FAQ-for-smartaddresses" target="blank">here</a></h4>
|
|
<button class="btn btn-default list-smartaddress">List Smart Addresses</button>
|
|
</div>
|
|
|
|
<div class="col-md-6" style="margin-top: 20px;">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><strong>Type: Deposit</strong></div>
|
|
<div class="">
|
|
<table class="table table-striped">
|
|
<tr><td class="deposit_key0"></td><td class="deposit_val0"></td></tr>
|
|
<tr><td class="deposit_key1"></td><td class="deposit_val1"></td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><strong>Type: Jumblr</strong></div>
|
|
<div class="">
|
|
<table class="table table-striped">
|
|
<tr><td class="jumblr_key0"></td><td class="jumblr_val0"></td></tr>
|
|
<tr><td class="jumblr_key1"></td><td class="jumblr_val1"></td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><strong>Type: <span class="type0"></span></strong></div>
|
|
<div class="">
|
|
<table class="table table-striped">
|
|
<tr><td>coin</td><td class="type0_val0"></td></tr>
|
|
<tr><td>address</td><td class="type0_val1"></td></tr>
|
|
<tr><td>dest</td><td class="type0_val2"></td></tr>
|
|
<tr><td>jumblr_deposit</td><td class="type0_val3"></td></tr>
|
|
<tr><td>deposit_avail</td><td class="type0_val4"></td></tr>
|
|
<tr><td>jumblr</td><td class="type0_val5"></td></tr>
|
|
<tr><td>jumblr_avail</td><td class="type0_val6"></td></tr>
|
|
<tr><td>extra</td><td class="type0_val7"></td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><strong>Type: <span class="type1"></span></strong></div>
|
|
<div class="">
|
|
<table class="table table-striped">
|
|
<tr><td>coin</td><td class="type1_val0"></td></tr>
|
|
<tr><td>address</td><td class="type1_val1"></td></tr>
|
|
<tr><td>dest</td><td class="type1_val2"></td></tr>
|
|
<tr><td>jumblr_deposit</td><td class="type1_val3"></td></tr>
|
|
<tr><td>deposit_avail</td><td class="type1_val4"></td></tr>
|
|
<tr><td>jumblr</td><td class="type1_val5"></td></tr>
|
|
<tr><td>jumblr_avail</td><td class="type1_val6"></td></tr>
|
|
<tr><td>extra</td><td class="type1_val7"></td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<pre class="smartaddress-output"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default step05_dexparams">
|
|
<div class="panel-heading" role="tab" id="headingThree">
|
|
<h4 class="panel-title">
|
|
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#AdjustDEXParams" aria-expanded="false" aria-controls="AdjustDEXParams">
|
|
Step #5 - Adjust DEX Parameters
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="AdjustDEXParams" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
<div class="panel-body">
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="dexratio" class="control-label">DEX Ratio</label>
|
|
<input type="text" class="form-control dexratio-val" id="dexratio" placeholder="eg. 0.97" required="required"><br>
|
|
<button class="btn btn-default dexratio-btn">Set DEX Ratio</button>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<pre class="dexparams-output"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading" role="tab" id="headingThree">
|
|
<h4 class="panel-title">
|
|
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#CheckWallet" aria-expanded="false" aria-controls="CheckWallet">
|
|
Step #6 - Check Wallet Balance
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="CheckWallet" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
<div class="panel-body">
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<button class="btn btn-default show-btcbalance">Show Bitcoin Balance</button>
|
|
<button class="btn btn-default show-kmdbalance">Show Komodo Balance</button>
|
|
<button class="btn btn-default showwalletinfo">Show Wallet Info</button>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><strong>Coin: <span class="coin_id"></span></strong></div>
|
|
<div class="">
|
|
<table class="table table-striped">
|
|
<tr><td>Main Address</td><td class="coin_mainaddr"></td></tr>
|
|
<tr><td>Balance</td><td class="coin_balance"></td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<pre class="checkwallet-output"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default step07_initswap">
|
|
<div class="panel-heading" role="tab" id="headingThree">
|
|
<h4 class="panel-title">
|
|
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#initcoinswap" aria-expanded="false" aria-controls="initcoinswap">
|
|
Step #7 - Initiate Cross-Blockchain Coin Swap
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="initcoinswap" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
<div class="panel-body">
|
|
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label for="buy_coin" class="control-label">What you want to Buy?</label>
|
|
<select class="form-control buy_coin">
|
|
<option value="-">- Select -</option>
|
|
<option value="btc">Bitcoin (BTC)</option>
|
|
<option value="kmd">Komodo (KMD)</option>
|
|
</select><br>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><strong>Selected Coin Type: <span class="smartaddr_type"></span></strong></div>
|
|
<div class="">
|
|
<table class="table table-striped" style="margin-bottom: 0;">
|
|
<tr>
|
|
<tr><td colspan="3" style="text-align: center;"><div class="deposit_coin01 col-sm-5"></div><div class="col-sm-2"><span class="glyphicon glyphicon-transfer" aria-hidden="true" style="margin: 12px; "></span></div><div class="deposit_coin02 col-sm-5"></div></td></tr>
|
|
<tr><td rowspan="2" id="deposit_coin_qrcode" width="100px" height="100px"></td><td>Deposit <span class="deposit_coin_code"></span> To:</td><td class="deposit_coin_addr"></td></tr>
|
|
<tr><td class="deposit_info_btns" colspan="2">Minimum amount to buy/sell Komodo is 100 KMD.<br> Price for selling or buying Komodo will be adjusted and given in default buttons accordinlgy.<br><br>
|
|
<div class="deposit_btns_part_hidden" style="display: none;">
|
|
<p>Use the following button(s) or use the custom amount button to <strong>send a transaction</strong>.</p>
|
|
<button class="btn btn-default deposit_coin_btn_01">Send 100 KMD</button>
|
|
<button class="btn btn-default deposit_coin_btn_02">Send 0.001 KMD fee</button>
|
|
<span class="deposit_coin_btn_03_info">Following button is set with custom BTC deposit amount calculated as:</span>
|
|
<pre class="deposit_coin_btn_03_info_pre">("Estimate KMD price" x 100 KMD) + 0.001 BTC Fee</pre>
|
|
<button class="btn btn-default deposit_coin_btn_03">Send <span class="deposit_100kmd_worth_btc_btn"></span> BTC</button><br><br>
|
|
<div class="form-group" style="display: none;">
|
|
<label for="deposit_coin_input" class="control-label">Send custom amount</label>
|
|
<input type="text" class="form-control deposit_coin_input" id="deposit_coin_input" placeholder="e.g. 0.02" required="required">
|
|
<button class="btn btn-default deposit_coin_input_btn" style="margin-top: 5px;"></button>
|
|
</div>
|
|
</div>
|
|
</td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><strong>Esitmate Swap Price Calculation</strong></div>
|
|
<div class="">
|
|
<table class="table table-striped" style="margin-bottom: 0;">
|
|
<tr><td class="coin_swap_rate_info" style="font-size: 22px; text-align: center;"></td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading"><strong>Order Details</strong></div>
|
|
<div class="">
|
|
<div style="margin: 5px;"><strong>NOTE:</strong> In Native DEX your reciving address will be different than your logged in wallet's main address.</div>
|
|
<table class="table table-striped" style="margin-bottom: 0;">
|
|
<tr><td>Your <span class="swap_deposit_addr_coin_id" style="font-weight: bold;"></span> deposits to</td><td><span class="swap_deposit_addr" style="font-weight: bold;"></span></td></tr>
|
|
<tr><td class="deposit_coin_dest_addr">You Recieve <span class="swap_recieve_addr_coin_id" style="font-weight: bold;"></span> in</td><td><span class="swap_recieve_addr" style="font-weight: bold;"></span></td></tr>
|
|
<tr><td>Amount available in deposit address</td><td class="deposit_coin_sourceamount"></td></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<pre class="initcoinswap-output"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default step08_checkswaps">
|
|
<div class="panel-heading" role="tab" id="headingThree">
|
|
<h4 class="panel-title">
|
|
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#CheckSwapList" aria-expanded="false" aria-controls="CheckSwapList">
|
|
Step #8 - Check Swap List
|
|
</a>
|
|
</h4>
|
|
</div>
|
|
<div id="CheckSwapList" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
|
<div class="panel-body">
|
|
|
|
<div class="col-md-6">
|
|
<p>This section will show you information when coin swap is activated and is in process. Use the refrehs swap list button to get updated information.<br>
|
|
You'll need to press this refresh button again to get latest updates.</p>
|
|
<button class="btn btn-default refresh_swap_list_btn">Refresh Swap List</button>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<pre class="checkswaplist-output"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
<script src="js/jquery.min.js"></script>
|
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/qrcode.min.js"></script>
|
|
<script src="js/dexactions.js"></script>
|
|
</body>
|
|
</html> |