@rahlfantasy/block-explorer
Version:
QRL block explorer
454 lines (420 loc) • 16.9 kB
HTML
<template name="address">
<h3 class="ui pageHeader header">
<i class="tiny icon"></i>
<div class="content wordBreak f-h">
{{address.state.address}}
</div>
</h3>
<div class="ui segment pageSegment">
<div class="description">
<div class="ui hidden divider"></div>
<div class="ui stackable grid">
<div class="twelve wide column">
<div class="ui basic center aligned segment">
<div class="ui statistic">
<div class="label">
<div class="ui label">
{{#if isMultiSig}}
MultiSig Balance
{{else}}
Balance
{{/if}}
</div>
</div>
<div class="value" data-html="<div class='content'>USD ${{qrl}}</div>">
{{address.state.balance}}
</div>
<div class="label">
Quanta<br><small>USD ${{qrl}}</small>
</div>
</div>
</div>
</div>
<div class="four wide column center aligned" style="display: none;">
<div class="row">
<canvas id="identicon" width="100" height="100"></canvas>
<div class="qr-code-container"></div>
</div>
<!-- <div class="row"> -->
<!-- <button class="ui button blue" id="clickHelp" data-html="<p>This is an identicon and a QR code. The identicon is a visual representation of the address: you will be able to recognise this address from the identicon across the QRL network.</p><p>The QR code contains the QRL address for scanning with our mobile wallet app.</p><p>Click the help icon to visit our documentation site to learn more.</p>" data-position="bottom center"><i class="help icon" style="margin-right: 0px"></i> </button> -->
<!-- </div> -->
<div class="row"></div>
</div>
</div>
<div class="ui grid">
<div class="ui celled horizontal list">
<div class="item"><strong>Transactions</strong> {{address.state.transaction_hash_count}}</div>
{{#if isMultiSig}}{{else}}<div class="item"><strong>Nonce</strong> {{address.state.nonce}}</div>{{/if}}
<div class="item"><strong>Signature Scheme</strong> {{addressValidation.signatureScheme}}</div>
{{#if isMultiSig}}{{else}}<div class="item"><strong>Tree Height</strong> {{addressValidation.height}}</div>{{/if}}
{{#if isMultiSig}}{{else}}<div class="item"><strong>Total Signatures</strong> {{addressValidation.totalSignatures}}</div>{{/if}}
{{#if isMultiSig}}{{else}}<div class="item"><strong>Signatures Remaining</strong> {{addressValidation.keysRemaining}}</div>{{/if}}
<div class="item"><strong>Hash Function</strong> {{addressValidation.hashFunction}}</div>
<!-- <div class="item" id="OTStracker"><button class="ui small button secondary"><i class="expand arrows alternate icon"></i>OTS tracker</button></div> -->
</div>
</div>
</div>
{{#if isMultiSig}}
<h3 class="value">Signatories</h3>
<table class="ui table">
<thead><th>Address</th><th>Weight</th></thead>
<tbody>
{{#each signatories 'MULTISIG'}}
<tr>
<td class="hack">
<!-- {{# if bech32}}{{ this.address_b32 }}{{else}} -->
<a href="/a/{{ this.address_hex}}">{{ this.address_hex}}</a>
<!-- {{/if}} -->
</td>
<td>{{ this.weight }}</td>
</tr>
{{/each}}
</tbody>
<tfoot>
<th>Threshold for spend</th>
<th>{{ threshold }}</th>
</tfoot>
</table>
{{else}}
<!-- Send/Receive Section -->
<div id="addressTabs" class="ui top attached tabular menu">
<a class="item active" data-tab="transactions">Quanta</a>
<a class="item" data-tab="tokenBalances">Tokens</a>
<a class="item" data-tab="otsTrackerTab">OTS Tracker</a>
<a class="item" data-tab="slavesTab">Slaves</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="transactions">
<h2 class="ui header">
<div class="content">
Transactions
</div>
</h2>
<div id="loadingTransactions" class="ui icon message">
<br /><br />
<i class="notched circle loading icon"></i>
<div class="content">
<div class="header">
Just a moment
</div>
<p id="relayingMsg">Transaction history loading ...</p>
</div>
</div>
{{#if addressHasTransactions}}
{{#each addressTransactions}}
{{#if isTransfer this.transactionType}}
<div class="ui icon message transactionRecord">
{{#if isThisAddress this.addr_from}}
<img class="transactionTypeImage" src="/img/icons/send.png" />
{{else}}
<img class="transactionTypeImage" src="/img/icons/receive.png" />
{{/if}}
<div class="content">
<div class="header">
{{#if isThisAddress this.addr_from}}
Sent
{{else}}
Received
{{/if}}
| {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{#if isThisAddress this.addr_from}}
{{#each sendingOutputs this}}
{{this.amount}} » {{this.to}}<br />
{{/each}}
{{else}}
{{# if bech32}}{{this.addr_from}}{{else}}{{this.addr_from}}{{/if}}
{{/if}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">{{#if isThisAddress this.addr_from}} {{totalTransferred this}} {{else}} {{receivedAmount this}} {{/if}} Quanta ></a>
</div>
</div>
{{/if}}
{{#if isTokenCreation this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/send.png" />
<div class="content">
<div class="header">
Token Creation - {{this.token.name}} ({{this.token.symbol}}) | {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{this.transaction_hash}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">{{this.token.symbol}} ></a>
</div>
</div>
{{/if}}
{{#if isTokenTransfer this.transactionType}}
<div class="ui icon message transactionRecord">
{{#if isThisAddress this.addr_from}}
<img class="transactionTypeImage" src="/img/icons/send.png" />
{{else}}
<img class="transactionTypeImage" src="/img/icons/receive.png" />
{{/if}}
<div class="content">
<div class="header">
{{#if isThisAddress this.addr_from}}
Tokens Sent
{{else}}
Tokens Received
{{/if}}
| {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{#if isThisAddress this.addr_from}}
{{#each this.outputs}}
{{this.amount}} » {{this.address_hex}}<br />
{{/each}}
{{else}}
{{this.from}}
{{/if}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">{{this.totalTransferred}} ></a>
</div>
</div>
{{/if}}
{{#if isCoinbaseTxn this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/receive.png" />
<div class="content">
<div class="header">
Coinbase Received | {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{# if bech32}}{{this.from_b32}}{{else}}{{this.from_hex}}{{/if}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">{{coinbaseValue}} Quanta ></a>
</div>
</div>
{{/if}}
{{#if isSlaveTxn this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/send.png" />
<div class="content">
<div class="header">
Slave Transaction | {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{this.transaction_hash}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">{{this.amount}} Quanta ></a>
</div>
</div>
{{/if}}
{{#if isMultiSigCreateTxn this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/send.png" />
<div class="content">
<div class="header">
MultiSig CREATE | {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{this.transaction_hash}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">{{signatories this}} ></a>
</div>
</div>
{{/if}}
{{#if isMultiSigSpendTxn this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/send.png" />
<div class="content">
<div class="header">
MultiSig SPEND | {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{this.transaction_hash}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">{{msSpendAmount this}} Quanta ></a>
</div>
</div>
{{/if}}
{{#if isMultiSigVoteTxn this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/send.png" />
<div class="content">
<div class="header">
MultiSig VOTE | {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{this.transaction_hash}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">{{msVoteStatus this}} ></a>
</div>
</div>
{{/if}}
{{#if isLatticePKTxn this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/send.png" />
<div class="content">
<div class="header">
Lattice Public Key | {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{this.transaction_hash}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">View Transaction ></a>
</div>
</div>
{{/if}}
{{#if isMessageTxn this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/send.png" />
<div class="content">
<div class="header">
Message | {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{this.transaction_hash}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">View Transaction ></a>
</div>
</div>
{{/if}}
{{#if isKeybaseTxn this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/send.png" />
<div class="content">
<div class="header">
Keybase | {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{this.transaction_hash}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">View Transaction ></a>
</div>
</div>
{{/if}}
{{#if isDocumentNotarisation this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/send.png" />
<div class="content">
<div class="header">
Document Notarisation | {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{this.transaction_hash}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">View Transaction ></a>
</div>
</div>
{{/if}}
{{/each}}
{{else}}
<div id="noTransactionsFound" style="display: none;" class="ui icon message">
<br /><br />
<div class="content">
<div class="header">
No transactions found
</div>
</div>
</div>
{{/if}}
<table class="ui striped table">
{{#if pagination}}
<tfoot>
<tr><th colspan="7">
<div class="ui left floated menu">
<div class="ui right labeled fluid input">
<label for="paginator" class="ui label">Page </label>
<input type="text" placeholder="{{currentPage}}" id="paginator">
<div class="ui label"> of {{totalPages}}</div>
</div>
</div>
<div class="ui right floated pagination menu">
{{#if pback}}
<a qrl-data="back" class="icon item">
<i qrl-data="back" class="left chevron icon"></i>
</a>
{{/if}}
{{#each pages}}
<a class="item {{isActive}}">{{this.number}}</a>
{{/each}}
{{#if pforward}}
<a qrl-data="forward" class="icon item">
<i qrl-data="forward" class="right chevron icon"></i>
</a>
{{/if}}
</div>
</th>
</tr>
</tfoot>
{{/if}}
</table>
</div>
<!-- Token Balances -->
<div class="ui bottom attached tab segment" data-tab="tokenBalances">
<h2 class="ui header">
<div class="content">
Token Balances
</div>
</h2>
<div id="tokenBalancesLoading" class="ui icon message">
<br /><br />
<i class="notched circle loading icon"></i>
<div class="content">
<div class="header">
Just a moment
</div>
<p>Token balances are loading...</p>
</div>
</div>
<div class="ui middle aligned divided list">
{{#each tokensHeld}}
<div class="item">
<i class="large tags middle aligned icon"></i>
<div class="content">
<p class="header"><a href="/tx/{{this.hash}}">{{this.name}} ({{this.symbol}})</a></p>
<div class="description tc-w">{{this.balance}}</div>
</div>
</div>
{{/each}}
</div>
</div>
<div class="ui bottom attached tab segment" data-tab="otsTrackerTab">
<h4>Warning</h4>
<p>The OTS tracker uses the blockchain to determine OTS key usage. It will not account for transactions which have not yet been confirmed into the blockchain.</p>
<p>More about OTS key use is contained in the <a href="https://docs.theqrl.org">documentation</a></p>
<div class="ui ten column celled grid">
{{{OTStracker}}}
</div>
</div>
<div class="ui bottom attached tab segment" data-tab="slavesTab">
<h4>Slave addresses</h4>
{{#if hasSlaves}}
<div class="ui bulleted list">
{{#each slaves}}<div class="ui item"><a href="/a/{{this.slave_address}}">{{this.slave_address}}</a></div>{{/each}}
</div>
{{else}}
<p>None found for this address</p>
{{/if}}
</div>
{{/if}}
<button class="ui mini button jsonclick">Meta <i class="down angle icon"></i></button>
<div class="ui raised segment jsonbox json" style="display: none">{{json}}</div>
</div>
</template>