imports/ui/components/address/address.html
<template name="address">
{{#if notFound}}
<h3 class="ui pageHeader header">
<i class="tiny icon"></i>
<div class="content wordBreak">
{{address.parameter}}
</div>
</h3>
<div class="ui negative message">
State for <span class="hack">{{address.parameter}}</span> not found on this chain.<br>
Is this address from a different QRL network?
</div>
{{else}}
<h3 class="ui pageHeader header">
<i class="tiny icon"></i>
<div class="content wordBreak f-h">
{{address.state.address}}
{{#if knownProviderNonSpecific}}
<i class="ui certificate icon" title="Verified NFT Provider"></i>
{{/if}}
</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="nftBalances">NFTs</a>
<a class="item" data-tab="otsTrackerTab">OTS</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.svg" />
{{else}}
<img class="transactionTypeImage" src="/img/icons/receive.svg" />
{{/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">
{{#if isCreateNFT}}
<img class="transactionTypeImage" src="/img/icons/receive.svg" />
{{else}}
<img class="transactionTypeImage" src="/img/icons/send.svg" />
{{/if}}
<div class="content">
<div class="header">
{{#if isCreateNFT}}
Create NFT -
{{#if knownProvider}}
<i class="ui certificate icon" title="Verified NFT Provider"></i>
{{/if}}
{{#if knownProvider}}
<a href="{{providerURL}}/{{this.transaction_hash}}">{{providerName}}</a> ({{providerID}})
{{else}}
Unknown provider {{providerID}} |
{{/if}}
{{this.timestamp}}
{{else}}
Token Creation - {{this.token.name}} ({{this.token.symbol}}) | {{this.timestamp}}
{{/if}}
</div>
<p class="transactionAddress value">
{{this.transaction_hash}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">
{{#if isCreateNFT}}
View Tx >
{{else}}
{{this.token.symbol}} >
{{/if}}
</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.svg" />
{{else}}
<img class="transactionTypeImage" src="/img/icons/receive.svg" />
{{/if}}
<div class="content">
<div class="header">
{{#if isThisAddress this.addr_from}}
{{#if isNFTTransfer}}NFT Sent -
{{#if knownProvider}}
<i class="ui certificate icon" title="Verified NFT Provider"></i>
{{/if}}
{{#if knownProvider}}
<a href="{{providerURL}}/{{this.transaction_hash}}">{{providerName}}</a> ({{providerID}})
{{else}}
Unknown provider {{providerID}}
{{/if}}
{{else}}Tokens Sent{{/if}}
{{else}}
{{#if isNFTTransfer}}NFT Received -
{{#if knownProvider}}
<i class="ui certificate icon" title="Verified NFT Provider"></i>
{{/if}}
{{#if knownProvider}}
<a href="{{providerURL}}/{{this.transaction_hash}}">{{providerName}}</a> ({{providerID}})
{{else}}
Unknown provider {{providerID}}
{{/if}}
{{else}}Tokens Received{{/if}}
{{/if}}
| {{this.timestamp}}
</div>
<p class="transactionAddress value">
{{#if isNFTTransfer}}
{{this.transaction_hash}}
{{else}}
{{#if isThisAddress this.addr_from}}
{{#each this.outputs}}
{{this.amount}} » {{this.address_hex}}<br />
{{/each}}
{{else}}
{{this.from}}
{{/if}}
{{/if}}
</p>
</div>
<div class="floatright ta-c">
<a href="/tx/{{this.transaction_hash}}">
{{#if isNFTTransfer}}
View Tx
{{else}}
{{receivedTokens this}}
{{/if}}
></a>
</div>
</div>
{{/if}}
{{#if isCoinbaseTxn this.transactionType}}
<div class="ui icon message transactionRecord">
<img class="transactionTypeImage" src="/img/icons/receive.svg" />
<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.svg" />
<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.svg" />
<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.svg" />
<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.svg" />
<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.svg" />
<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.svg" />
<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.svg" />
<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.svg" />
<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">
{{#if ownTokens}}
{{#each tokensHeld}}
<div class="item">
<i class="large tags middle aligned icon"></i>
<div class="content">
{{#if heldTokenIsNFT}}
{{else}}
<p class="header"><a href="/tx/{{this.hash}}">{{this.name}} ({{this.symbol}})</a></p>
<div class="description tc-w">{{this.balance}}</div>
{{/if}}
</div>
</div>
{{/each}}
{{else}}
No tokens owned
{{/if}}
</div>
</div>
<!-- NFTs -->
<div class="ui bottom attached tab segment" data-tab="nftBalances">
<h2 class="ui header">
<div class="content">
NFTs
</div>
</h2>
<div id="nftBalancesLoading" class="ui icon message">
<br /><br />
<i class="notched circle loading icon"></i>
<div class="content">
<div class="header">
Just a moment
</div>
<p>NFTs are loading...</p>
</div>
</div>
<div class="ui middle aligned divided list">
{{#if ownNFTs}}
{{#each tokensHeld}}
<div class="item">
<i class="large tags middle aligned icon"></i>
<div class="content">
{{#if heldTokenIsNFT}}
<p class="header">
{{#if this.nft.providerDetails.known}}
<a href="{{this.nft.providerDetails.url}}/{{this.nft.txhash}}">
{{this.nft.providerDetails.name}} (0x{{this.nft.id}})</a>
<i class="ui certificate icon" title="Verified NFT Provider"></i>Verified Provider
{{else}}
<i class="ui warning icon" title="Unverified NFT Provider"></i>Unverified Provider (0x{{this.nft.id}})
{{/if}}
</p>
<div class="description tc-w">
<a href="/tx/{{this.nft.txhash}}">{{this.nft.txhash}}</a>
</div>
{{else}}
{{/if}}
</div>
</div>
{{/each}}
{{else}}
No NFTs owned
{{/if}}
</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 slave-address"><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>
{{/if}}
</template>