onion-wownero-explorer/src/templates/partials/tx_details.html

<div>

    <H4 style="margin:5px">Tx hash: {{tx_hash}}</H4>
    {{#enable_mixins_details}}
        <H5 style="margin:5px">Tx prefix hash: {{tx_prefix_hash}}</H5>
    {{/enable_mixins_details}}
    <H5 style="margin:5px">Tx public key: <span id="tx_pub_key">{{tx_pub_key}}</span></H5>

    {{#has_payment_id}}
        <H5 style="margin:5px">Payment id: {{payment_id}}</H5>
        <H5 style="margin:5px">Payment id as ascii: {{payment_id_as_ascii}}</H5>
    {{/has_payment_id}}

    {{#has_payment_id8}}
        <H5 style="margin:5px">Payment id (encrypted): {{payment_id8}}</H5>
    {{/has_payment_id8}}


    {{#have_prev_hash}}
        <H5>Previous tx: <a href="/tx/{{prev_hash}}">{{prev_hash}}</a></H5>
    {{/have_prev_hash}}

    {{#have_next_hash}}
        <H5>Next tx: <a href="/tx/{{next_hash}}">{{next_hash}}</a></H5>
    {{/have_next_hash}}



    <table class="center" style="width: 80%; margin-top:10px">
        {{^have_raw_tx}}
        <tr>
            <td>Timestamp: {{blk_timestamp_uint}}</td>
            <td>Timestamp [UCT]: {{blk_timestamp}}</td>
            <td>Age [y:d:h:m:s]: {{delta_time}}</td>
        </tr>
        {{/have_raw_tx}}
        <tr>
            <td>Block: <a href="/block/{{blk_height}}">{{blk_height}}</a></td>
            <td>Fee: {{tx_fee}}</td>
            <td>Tx size: {{tx_size}} kB</td>
        </tr>
        <tr>
            <td>Tx version: {{tx_version}}</td>
            <td>No of confirmations: {{confirmations}}</td>
            <td>RingCT/type:  {{#is_ringct}}yes/{{rct_type}}{{/is_ringct}}{{^is_ringct}}no{{/is_ringct}}</td>
        </tr>


        <tr>
            <td colspan="3">Extra: {{extra}}</td>
        </tr>


    </table>


  <h3>{{outputs_no}} output(s) for total of {{outputs_xmr_sum}} xmr</h3>
  <div class="center">
      <table class="center">
          <tr>
              <td>stealth address</td>
              <td>amount</td>
              <td>amount idx</td>
          </tr>
          {{#outputs}}
          <tr>
              <td>{{output_idx}}: {{out_pub_key}}</td>
              <td>{{amount}}</td>
              <td>{{amount_idx}} of {{num_outputs}}</td>
          </tr>
          {{/outputs}}
      </table>
  </div>

    {{^have_raw_tx}}
    <div class="center" style="width:90%">
        <div class="tabs">

            <div class="tab">
                <input type="radio" id="tab-1" name="tab-group-1" checked>
                <label for="tab-1">Decode outputs</label>
                <div class="content">
                    <h4 style="margin: 0px">Check which outputs belong to given Monero address/subaddress and viewkey</h4>
                    <h5 style="margin: 0px">
                        For RingCT transactions, outputs' amounts are also decoded
                        <br/>
                        {{#enable_js}}
                            Note: address/subaddress and viewkey are NOT sent to the server, as the calculations are done on the client side
                        {{/enable_js}}
                        {{^enable_js}}
                            Note: address/subaddress and viewkey are sent to the server, as the calculations are done on the server side
                        {{/enable_js}}
                    </h5>
                    <form action="/myoutputs" method="post" style="width:100%; margin-top:2px" class="style-1">
                        <input type="hidden" name="tx_hash" value="{{tx_hash}}"><br/>
                        <input type="text" name="xmr_address" size="90" placeholder="Monero address/subaddress"><br/>
                        <input type="text" name="viewkey" size="90" placeholder="Private viewkey" style="margin-top:5px"><br/>
                        <input type="hidden" name="raw_tx_data" value="{{raw_tx_data}}">
                        <!--above raw_tx_data field only used when checking raw tx data through tx pusher-->

                        {{#enable_js}}
                        <!-- if have js, DONOT submit the form to server.
                             change submit button, to just a button -->
                            <button type="button" style="margin-top:5px" id="decode_btn" >Decode outputs</button>
                        {{/enable_js}}
                        {{^enable_js}}
                            <input type="submit" value="Decode outputs" style="margin-top:5px" >
                        {{/enable_js}}
                    </form>
                </div>
            </div>

            <div class="tab">
                <input type="radio" id="tab-2" name="tab-group-1">
                <label for="tab-2">Prove sending</label>

                <div class="content">
                    <h4 style="margin: 0px">Prove to someone that you have sent them Monero in this transaction</h4>
                    <h5 style="margin: 0px">
                        Tx private key can be obtained using <i>get_tx_key</i>
                        command in  <i>monero-wallet-cli</i> command line tool
                        <br/>
                        {{#enable_js}}
                            Note: address/subaddress and tx private key are NOT sent to the server, as the calculations are done on the client side
                        {{/enable_js}}
                        {{^enable_js}}
                            Note: address/subaddress and tx private key are sent to the server, as the calculations are done on the server side
                        {{/enable_js}}
                    </h5>
                    <form action="/prove" method="post" style="width:100%;margin-top:2px" class="style-1">
                       <input type="hidden" name="txhash" value="{{tx_hash}}"><br/>
                       <input type="text" name="txprvkey" size="90" placeholder="Tx private key"><br/>
                        <input type="hidden" name="raw_tx_data" value="{{raw_tx_data}}">
                        <!--above raw_tx_data field only used when checking raw tx data through tx pusher-->
                       <input type="text" name="xmraddress" size="90" placeholder="Recipient's monero address/subaddress" style="margin-top:5px"><br/>

                        {{#enable_js}}
                            <!-- if have js, DONOT submit the form to server.
                                 change submit button, to just a button -->
                            <button type="button" style="margin-top:5px" id="prove_btn">Prove sending</button>
                        {{/enable_js}}
                        {{^enable_js}}
                           <input type="submit" value="Prove sending" style="margin-top:5px">
                        {{/enable_js}}

                    </form>
                </div>
            </div>
        </div>
    </div>
    {{/have_raw_tx}}

    {{#enable_js}}

        <!-- to disply results from deconding and proving txs using js -->
        <div id="decode-prove-results" class="center" style="width: 80%; margin-top:10px">

        </div>

        <script>

            //  here we handle button presses from the above forms
            //  to decode and prove txs.
            $(document).ready(function() {

                // we need output pubplic keys, their indexes and amounts.
                // all this is already avaliable on the html, but we can use
                // musch framework to produce js array for this

                var tx_json = {{#tx_json_raw}}{{/tx_json_raw}};

                var tx_public_key = $("#tx_pub_key").text();


                $("#decode_btn").click(function() {

                    var address = $("input[name=xmr_address]").val();
                    var viewkey = $("input[name=viewkey]").val();

                    var address_decoded = decode_address(address);

                    decodeOutputs(tx_json, tx_public_key, viewkey, address_decoded.spend);

                });

                $("#prove_btn").click(function() {

                    var address    = $("input[name=xmraddress]").val();
                    var tx_prv_key = $("input[name=txprvkey]").val();

                    var address_decoded = decode_address(address);

                    decodeOutputs(tx_json, address_decoded.view, tx_prv_key, address_decoded.spend);

                });

            });

            function decodeOutputs(tx_json, pub_key, sec_key, address_pub_key) {
                //console.log(tx_json);

                var is_rct = (tx_json.version === 2);
                var rct_type = (is_rct ? tx_json.rct_signatures.type : -1);

                var key_derivation = generate_key_derivation(pub_key, sec_key);

                // console.log(pub_key, address_pub_key, sec_key, key_derivation);


                // go over each tx output, and check if it is ours or not
                var decoding_results_str = '<h4>Output decoding results</h4>';

                decoding_results_str += '<table class="center">';

                var output_idx = 0;

                var sum_outptus = 0;

                tx_json.vout.forEach(function(output) {

                    var output_pub_key = output.target.key;
                    var amount         = output.amount;

                    var pubkey_generated = derive_public_key(key_derivation, output_idx, address_pub_key);

                    var mine_output = (output_pub_key == pubkey_generated);

                    var mine_output_str = "false";

                    if (mine_output) {

                        mine_output_str = '<span style="color: #008009;font-weight: bold">true</span>';

                        if (is_rct) {
                            try {
                                var ecdh = decodeRct(tx_json.rct_signatures, output_idx, key_derivation);
                                amount = ecdh.amount;
                            } catch (err) {
                                decoding_results_str += "<span class='validNo'>RingCT amount for output " + i + " with pubkey: " + output_pub_key + "</span>" + "<br>"; //rct commitment != computed
                                throw "invalid rct amount";
                            }
                        }

                        sum_outptus += amount;
                    }

                    decoding_results_str += "<tr>"
                        +"<td>" + output_idx +  "</td>"
                        +"<td>" + output_pub_key +  "</td>"
                        +"<td>" + mine_output_str +  "</td>"
                        +"<td>" + (amount / 1e12) +  "</td>"
                        +"</tr>";

                    //console.log(output[1], pubkey_generated);

                    output_idx++;
                });

                decoding_results_str += "</table>"

                decoding_results_str += "<h3>Sum XMR from matched outputs (i.e., incoming XMR): " + (sum_outptus / 1e12) + "</h3>"

                $("#decode-prove-results").html(decoding_results_str);
            }

            //decode amount and mask and check against commitment
            // from https://xmr.llcoins.net/js/site.js

            var H = "8b655970153799af2aeadc9ff1add0ea6c7251d54154cfa92c173a0dd39c1f94";

            // from https://xmr.llcoins.net/js/site.js
            function decodeRct(rv, i, der){
                var key = derivation_to_scalar(der, i);
                var ecdh = decode_rct_ecdh(rv.ecdhInfo[i], key);
                //console.log(ecdh);
                var Ctmp = commit(ecdh.amount, ecdh.mask);
                //console.log(Ctmp);
                if (Ctmp !== rv.outPk[i]){
                    throw "mismatched commitments!";
                }
                ecdh.amount = s2d(ecdh.amount);
                return ecdh;
            }

            //creates a Pedersen commitment from an amount (in scalar form) and a mask
            //C = bG + aH where b = mask, a = amount
            // from https://xmr.llcoins.net/js/site.js
            function commit(amount, mask){
                if (!valid_hex(mask) || mask.length !== 64 || !valid_hex(amount) || amount.length !== 64){
                    throw "invalid amount or mask!";
                }
                var C = ge_double_scalarmult_base_vartime(amount, H, mask);
                return C;
            }

            // // from https://xmr.llcoins.net/js/site.js
            function s2d(scalar){
                return JSBigInt.parse(swapEndian(scalar), 16).toString();
            }

            //switch byte order for hex string
            // from https://xmr.llcoins.net/js/site.js
            function swapEndian(hex){
                if (hex.length % 2 !== 0){return "length must be a multiple of 2!";}
                var data = "";
                for (var i=1; i <= hex.length / 2; i++){
                    data += hex.substr(0 - 2 * i, 2);
                }
                return data;
            }

        </script>

    {{/enable_js}}



{{#has_inputs}}
    {{#enable_mixins_details}}
      <h3>Inputs' ring size time scale (from {{min_mix_time}} till {{max_mix_time}};
        resolution: {{timescales_scale}} days{{#have_raw_tx}}; R - real ring member {{/have_raw_tx}})
      </h3>
      <div class="center">
        <ul class="center">
          {{#timescales}}
            <li  style="list-style-type: none; text-align: center; font-size: 8px">|{{timescale}}|</li>
          {{/timescales}}
        </ul>
      </div>
    {{/enable_mixins_details}}

    {{^inputs_xmr_sum_not_zero}}
        <h3>{{inputs_no}} input(s) for total of {{inputs_xmr_sum}} xmr</h3>
    {{/inputs_xmr_sum_not_zero}}
    {{#inputs_xmr_sum_not_zero}}
        {{^have_any_unknown_amount}}
            <h3>{{inputs_no}} inputs(s) for total of {{inputs_xmr_sum}} xmr</h3>
        {{/have_any_unknown_amount}}
        {{#have_any_unknown_amount}}
            <h3>{{inputs_no}} inputs(s) for total of at least {{inputs_xmr_sum}} xmr</h3>
        {{/have_any_unknown_amount}}
    {{/inputs_xmr_sum_not_zero}}

    {{#show_part_of_inputs}}
        <h5 style="margin-top: 2px">
           Only {{max_no_of_inputs_to_show}} inputs are shown. To see all,
            click "<a href="/tx/{{tx_hash}}/1">more details</a>"
        </h5>
    {{/show_part_of_inputs}}

    <div class="center">
       <table class="center">
      {{#inputs}}
        <tr>
          <td style="text-align: left;">
              key image  {{input_idx}}: {{in_key_img}}
              {{#have_raw_tx}}
               Already spent:
                {{#already_spent}}
                    <span style="color: red; font-weight: bold;">True</span>
                {{/already_spent}}
              {{^already_spent}}
                False
              {{/already_spent}}

              {{/have_raw_tx}}
          </td>
          <td>amount: {{amount}}</td>
       </tr>
          <tr>
            <td colspan="2">
                {{#enable_mixins_details}}
                    <table style="width:100%; margin-bottom:20px">
                    <tr>
                      <td>ring members</td>
                      {{#have_raw_tx}}
                        <td>Is it real?</td>
                      {{/have_raw_tx}}
                      <td>blk</td>
                      <td>ring size</td>
                      <td>in/out</td>
                      <td>timestamp</td>
                      <td>age [y:d:h:m:s]</td>

                    </tr>
                 {{#mixins}}
                    <tr>
                      <td> - {{mix_idx}}: <a href="/tx/{{mix_tx_hash}}">{{mix_pub_key}}</a></td>
                      {{#have_raw_tx}}
                        {{#mix_is_it_real}}
                            <td><span style="color: #008009;font-weight: bold">{{mix_is_it_real}}</span></td>
                        {{/mix_is_it_real}}
                        {{^mix_is_it_real}}
                            <td>{{mix_is_it_real}}</td>
                        {{/mix_is_it_real}}
                      {{/have_raw_tx}}
                      <td>{{mix_blk}}</td>
                      <td>{{mix_mixin_no}}</td>
                      <td>{{mix_inputs_no}}/{{mix_outputs_no}}</td>
                      <td>{{mix_timestamp}}</td>
                      <td>{{mix_age}}</td>
                    </tr>
                 {{/mixins}}
                 </table>
                {{/enable_mixins_details}}
                {{^enable_mixins_details}}
                <table style="width:100%; margin-bottom:20px">
                    <tr>
                        <td>ring members</td>
                        {{#have_raw_tx}}
                            <td>Is it real?</td>
                        {{/have_raw_tx}}
                        <td>blk</td>
                    </tr>
                    {{#mixins}}
                    <tr>
                        <td> - {{mix_idx}}: {{mix_pub_key}}</td>
                        {{#have_raw_tx}}
                            {{#mix_is_it_real}}
                                <td><span style="color: #008009;font-weight: bold">{{mix_is_it_real}}</span></td>
                            {{/mix_is_it_real}}
                            {{^mix_is_it_real}}
                                <td>{{mix_is_it_real}}</td>
                            {{/mix_is_it_real}}
                        {{/have_raw_tx}}
                        <td>{{mix_blk}}</td>
                    </tr>
                    {{/mixins}}
                </table>
                {{/enable_mixins_details}}
           </td>
         </tr>

<!--
        {{#with_ring_signatures}}

          <tr>
            <td colspan="2">
                <table style="width:100%; margin-bottom:20px">
                <tr>
                  <td>Ring signature</td>
                </tr>
                {{#ring_sigs}}
                <tr>
                    <td>{{ring_sig}}</td>
                </tr>
                {{/ring_sigs}}
             </table>
           </td>
         </tr>

        {{/with_ring_signatures}}
-->

      {{/inputs}}
      </table>


  </div>


 {{/has_inputs}}

{{^have_raw_tx}}
    {{^with_ring_signatures}}
        {{#show_more_details_link}}
            <h5 style="margin-top:1px"><a href="/tx/{{tx_hash}}/1">More details</a></h5>
        {{/show_more_details_link}}
    {{/with_ring_signatures}}
    {{#with_ring_signatures}}
        <label id="show-decoded-inputs" for="toggle-1">Show JSON representation of tx</label>
        <input type="checkbox" id="toggle-1">
        <div id="decoded-inputs">
            <div class="center">
                <code style="white-space: pre-wrap; font-size: 10px">
                    {{tx_json}}
                </code>
            </div>
        </div>
        <br/><br/>
        <h5 style="margin-top:1px"><a href="/tx/{{tx_hash}}">Less details</a></h5>
    {{/with_ring_signatures}}
{{/have_raw_tx}}


{{#show_cache_times}}
    <div class="center">
        {{#construction_time}}
            <h6 style="margin-top: 1px;color:#949490">
                Tx details construction time: {{construction_time}} s
                {{#from_cache}}
                    <br/>Tx read from the tx cache
                {{/from_cache}}
            </h6>
        {{/construction_time}}
    </div>
{{/show_cache_times}}

</div>