purple-explorer/views/claim_address.pug

extends layout

block content
  script.
    $(function () {
        function showClaimAlert(claimClass, warnMsg) {
          if ($('#claimAlert').length == 0)
            $('<div id="claimAlert"></div>').insertBefore('#claimForm');
          $('#claimAlert').html('<div class="alert alert-' + claimClass + '"><div class="font-weight-bold" style="padding-bottom:10px;">' + (claimClass == 'success' ? 'Address claimed successfully' : (claimClass == 'danger' ? 'Failed to claim address' : 'Required field missing')) + '</div> ' + (claimClass == 'success' ? 'This address will now be referred to as <strong>"' + $('#message').val() + '"</strong> throughout the website' : (claimClass == 'danger' ? 'Invalid signature' : warnMsg)) + '.</div>');			
        }

        $('#claimForm').on('submit', function (e) {
          e.preventDefault();
          var address = $('input#address').val();
          var message = $('input#message').val();
          var signature = $('input#signature').val();
          var url = '/address/'+address+'/claim';
          
          if (message == null || message.trim().length == 0) {
            showClaimAlert('warning', 'Please enter the name you would like your address to be referred to on this site');
            $('input#message').focus();
          } else if (signature == null || signature.trim().length == 0) {
            showClaimAlert('warning', 'Please enter the signature value from your wallet software');
            $('input#signature').focus();          
          } else {
            $.ajax({
              type: 'post',
              url: url,
              data: {
                'address': address,
                'message': message,
                'signature': signature
              },
              success: function (data) {
                showClaimAlert((data.status == 'success' ? 'success' : 'danger'), '');
              }
            });
          }
        });
      });
  - var balance = ((address.received - address.sent) / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
  - var balanceParts = balance.split('.');
  - var sent = (address.sent /100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
  - var sentParts = sent.split('.');
  - var received = (address.received / 100000000).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
  - var receivedParts = received.split('.');
  .col-xs-12.col-md-12.cardSpacer
    .card.card-default.border-0.card-address-summary.cardSpacer
      .card-header(style='position:relative;')
        strong=address.a_id
        if settings.labels[address.a_id]
          if settings.labels[address.a_id].type
            label.d-none.d-sm-block.badge.float-right(class='badge-'+settings.labels[address.a_id].type, style='margin-left:15px;margin-bottom:0;')
              =settings.labels[address.a_id].label
              if settings.labels[address.a_id].url
                a(href=settings.labels[address.a_id].url, target='_blank', alt='Visit site', title='Visit site', data-toggle='tooltip', data-placement='top')
                  span.fa.fa-question-circle(style='margin-left:5px;')
          else
            label.d-none.d-sm-block.badge.badge-default.float-right(style='margin-left:15px;margin-bottom:0;')
              =settings.labels[address.a_id].label
              if settings.labels[address.a_id].url
                a(href=settings.labels[address.a_id].url, target='_blank', alt='Visit site', title='Visit site', data-toggle='tooltip', data-placement='top')
                  span.fa.fa-question-circle(style='margin-left:5px;')
      table.table.table-bordered.table-striped.summary-table.mobile-border-right
        - var theadClasses = [];
        if settings.display.table_header_bgcolor != null && settings.display.table_header_bgcolor != ''
          - theadClasses.push('thead-' + settings.display.table_header_bgcolor);
        thead(class=theadClasses)
          tr
            if settings.show_sent_received == true
              th.d-none.d-sm-table-cell #{settings.locale.total_sent}
                span.small  (#{settings.symbol})
            if address.a_id !== 'coinbase'
              if settings.show_sent_received == true
                th.d-none.d-sm-table-cell #{settings.locale.total_received}
                  span.small  (#{settings.symbol})
              th #{settings.locale.rl_balance}
                span.small  (#{settings.symbol})
              th #{settings.locale.a_qr}
        tbody
          tr
            if settings.show_sent_received == true
              td.addr-summary.d-none.d-sm-table-cell #{sentParts[0]}.
                span.decimal #{sentParts[1]}
            if address.a_id !== 'coinbase'
              if settings.show_sent_received == true
                td.addr-summary.d-none.d-sm-table-cell #{receivedParts[0]}.
                  span.decimal #{receivedParts[1]}
              td.addr-summary #{balanceParts[0]}.
                span.decimal #{balanceParts[1]}
              td.addr-summary
                img.qrcode(src='/qr/'+address.a_id)
    .card.card-default.border-0.cardSpacer
      .card-header
        strong Claim this Address
      .card-body
        div.alert.alert-primary
          div
            span You can use the
            span.font-weight-bold  Sign Message
            span  feature from your
            span.font-weight-bold  #{settings.coin}
            span  wallet to verify ownership of this address.
          br
          div Enter the following data into the wallet software:
          br
          div
            span.font-weight-bold Address:
            span  #{address.a_id}
          div
            span.font-weight-bold Message:
            span=' <display name from the form below>'
          br
          div
            span Click the
            span.font-weight-bold  Sign Message
            span  button in the wallet, and copy/paste the resulting
            span.font-weight-bold  Signature
            span  in the form below.
          br
          div
            span Finally, click the
            span.font-weight-bold  Submit
            span  button below to claim your address, which will display your custom display name instead of the default wallet address on this site.
        form#claimForm
          .form-group
            fieldset.entryField
              label(for='address') Wallet Address
              input#address.form-control(type='text' value=address.a_id readonly="")
          .form-group
            fieldset.entryField
              label(for='message') Display Name
              input#message.form-control(type='text', placeholder='Display Name', maxlength='50')
          .form-group
            fieldset.entryField
              label(for='signature') Signature
              input#signature.form-control(type='text', placeholder='Signature', maxlength='100')
          button.btn.btn-primary(type='submit') Submit