lnbits-legend/LNbits/templates/wallet.html

<!-- @format -->

{% extends "base.html" %} {% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
  <i class="fa fa-bell-o"></i>
  <span class="label label-danger">!</span>
</a>
<ul class="dropdown-menu">
  <li class="header"><b>Instant wallet, bookmark to save</b></li>
  <li></li>
</ul>
{% endblock %} {% block menuitems %}
<li class="active treeview">
  <a href="#">
    <i class="fa fa-bitcoin"></i> <span>Wallets</span>
    <i class="fa fa-angle-left pull-right"></i>
  </a>
  <ul class="treeview-menu">
    {% for w in user_wallets %}
    <li>
      <a href="wallet?wal={{ w.id }}&usr={{ w.user }}"
        ><i class="fa fa-bolt"></i> {{ w.name }}</a
      >
    </li>
    {% endfor %}
    <li><a onclick="sidebarmake()">Add a wallet +</a></li>
    <div id="sidebarmake"></div>
  </ul>
</li>

<li class="treeview">
  <a href="#">
    <i class="fa fa-th"></i> <span>Extensions</span>
    <small class="label pull-right bg-green">coming soon</small>
  </a>
</li>
{% endblock %} {% block body %}
<!-- Right side column. Contains the navbar and content of the page -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      Wallet
      <small
        >Control panel
        <div id="wonga"></div
      ></small>
    </h1>
    <ol class="breadcrumb">
      <li>
        <a href="#"><i class="fa fa-dashboard"></i> Home</a>
      </li>
      <li class="active">Wallets</li>
      <li href="wallet?wal={{ wallet.id }}" class="active">
        {{ wallet.name }}
      </li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    <!-- Small boxes (Stat box) -->
    <div class="row">
      <div class="col-md-6">
        <!-- small box -->
        <a href="#" class="small-box-footer">
          <div class="small-box bg-aqua">
            <div class="inner">
              <h3><b>{{ wallet.balance }} sats</b></h3>
              <h3>{{ wallet.name }}</h3>
            </div>
            <div class="icon">
              <i class="ion ion-flash"></i>
            </div>
          </div>
          <!-- ./col -->

          ><!-- /.row -->

          <div class="row">
            <div class="col-sm-3">
              <button
                onclick="sendfundsinput()"
                class="btn btn-block btn-primary btn-lg"
              >
                Send
              </button>
            </div>
            <div class="col-sm-3">
              <button
                onclick="receive()"
                class="btn btn-block btn-primary btn-lg"
              >
                Receive
              </button>
            </div>
          </div>

          <div id="receive"></div>
          <div id="sendfunds"></div>

          <div class="row">
            <div class="col-md-6">
              <div class="box">
                <div class="box-header">
                  <h3 class="box-title">Transactions <b id="demo"></b></h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                  <table
                    id="pagnation"
                    class="table table-bordered table-striped"
                  >
                    <tr>
                      <th>Memo</th>
                      <th style="width: 20%">date</th>
                      <th style="width: 20%">amount</th>
                    </tr>
                    <tbody id="transactions"></tbody>
                  </table>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
          </div>

          <div id="satschart"></div>

          <div class="row">
            <div class="col-md-6">
              <div class="box box-solid">
                <div class="box-header with-border"></div>
                <!-- /.box-header -->
                <div class="box-body">
                  <div class="box-group" id="accordion">
                    <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                    <div class="panel box box-primary">
                      <div class="box-header with-border">
                        <h4 class="box-title">
                          <a
                            data-toggle="collapse"
                            data-parent="#accordion"
                            href="#collapseThree"
                            class="collapsed"
                            aria-expanded="false"
                          >
                            Wallet "{{ wallet.name }}" API info
                          </a>
                        </h4>
                      </div>
                      <div
                        id="collapseThree"
                        class="panel-collapse collapse"
                        aria-expanded="false"
                      >
                        <div class="box-body" style="word-wrap: break-word;">
                          <b>Admin key: </b><i>{{ wallet.adminkey }}</i><br />
                          <b>Invoice/Read key: </b><i>{{ wallet.inkey }}</i
                          ><br />
                          Generate an invoice:<br /><code
                            >POST /v1/invoices</code
                          ><br />Header
                          <code
                            >{"Grpc-Metadata-macaroon": "<i
                              >{{ wallet.inkey }}</i
                            >"}</code
                          ><br />
                          Body <code>{"value": "200","memo": "beer"} </code
                          ><br />
                          Returns
                          <code>{"pay_req": string,"pay_id": string} </code
                          ><br />
                          *payment will not register in the wallet until the
                          "check invoice" endpoint is used<br /><br />

                          Check invoice:<br />
                          Check an invoice:<br /><code
                            >GET /v1/invoice/*payment_hash*</code
                          ><br />Header
                          <code
                            >{"Grpc-Metadata-macaroon": "<i>{{ wallet.inkey }}</i
                            >"}</code
                          ><br />

                          Returns
                          <code>{"PAID": "TRUE"}/{"PAID": "FALSE"} </code><br />
                          *if using LNTXBOT return will hang until paid<br /><br />
                        </div>
                      </div>
                    </div>

                    <div class="panel box box-danger">
                      <div class="box-header with-border">
                        <h4 class="box-title">
                          <a
                            data-toggle="collapse"
                            data-parent="#accordion"
                            href="#collapseTwo"
                            class="collapsed"
                            aria-expanded="false"
                          >
                            Delete wallet
                          </a>
                        </h4>
                      </div>
                      <div
                        id="collapseTwo"
                        class="panel-collapse collapse"
                        aria-expanded="false"
                      >
                        <div class="box-body">
                          This whole wallet will be deleted, the funds will be
                          UNRECOVERABLE <br /><br /><button
                            class="btn btn-danger"
                            onclick="deletewallet()"
                          >
                            Delete wallet
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
          </div>

          <!-- /.content -->
        </a>
      </div>
    </div>
  </section>
</div>

<script>
  var inmacaroon = '{{ wallet.inkey }}'
  var adminmacaroon = '{{ wallet.inkey }}'
  var thehash = ''
  var theinvoice = ''
  var outamount = ''
  var outmemo = ''

  //API CALLS

  function postAjax(url, data, thekey, success) {
    var params =
      typeof data == 'string'
        ? data
        : Object.keys(data)
            .map(function(k) {
              return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
            })
            .join('&')
    var xhr = window.XMLHttpRequest
      ? new XMLHttpRequest()
      : new ActiveXObject('Microsoft.XMLHTTP')
    xhr.open('POST', url)
    xhr.onreadystatechange = function() {
      if (xhr.readyState > 3 && xhr.status == 200) {
        success(xhr.responseText)
      }
    }
    xhr.setRequestHeader('Grpc-Metadata-macaroon', thekey)
    xhr.setRequestHeader('Content-Type', 'application/json')
    xhr.send(params)
    return xhr
  }

  function getAjax(url, thekey, success) {
    var xhr = window.XMLHttpRequest
      ? new XMLHttpRequest()
      : new ActiveXObject('Microsoft.XMLHTTP')
    xhr.open('GET', url, true)
    xhr.onreadystatechange = function() {
      if (xhr.readyState > 3 && xhr.status == 200) {
        success(xhr.responseText)
      }
    }
    xhr.setRequestHeader('Grpc-Metadata-macaroon', thekey)
    xhr.setRequestHeader('Content-Type', 'application/json')
    xhr.send()
    return xhr
  }

  function sendfundsinput() {
    document.getElementById('sendfunds').innerHTML =
      "<br/><br/><div class='row'><div class='col-md-4'>" +
      "<textarea id='pasteinvoice' class='form-control' rows='3' placeholder='Paste an invoice'></textarea></div></div>" +
      "<br/><div class='row'><div class='col-md-4'><button type='submit' onclick='sendfundspaste()' class='btn btn-primary'>" +
      "Submit</button><button style='margin-left:20px;' type='submit' class='btn btn-primary' onclick='scanQRsend()'>" +
      'Use camera to scan an invoice</button></div></div><br/><br/>'
    document.getElementById('receive').innerHTML = ''
  }

  function sendfundspaste() {
    invoice = document.getElementById('pasteinvoice').value
    theinvoice = decode(invoice)
    outmemo = theinvoice.data.tags[1].value
    outamount = Number(theinvoice.human_readable_part.amount) / 1000
    if (outamount > Number('{{ wallet.balance }}')) {
      document.getElementById('sendfunds').innerHTML =
        "<div class='row'><div class='col-md-6'>" +
        "<h3><b style='color:red;'>Not enough funds!</b></h3>" +
        "<button style='margin-left:20px;' type='submit' class='btn btn-primary' onclick='cancelsend()'>Continue</button>" +
        '</br/></br/></div></div>'
    } else {
      document.getElementById('sendfunds').innerHTML =
        "<div class='row'><div class='col-md-6'>" +
        '<h3><b>Invoice details</b></br/>Amount: ' +
        outamount +
        '<br/>Memo: ' +
        outmemo +
        '</h3>' +
        "<h4 style='word-wrap: break-word;'>" +
        invoice +
        '</h4>' +
        "<button type='submit' class='btn btn-primary' onclick='sendfunds(" +
        JSON.stringify(invoice) +
        ")'>Send funds</button>" +
        "<button style='margin-left:20px;' type='submit' class='btn btn-primary' onclick='cancelsend()'>Cancel payment</button>" +
        '</br/></br/></div></div>'
    }
  }

  function receive() {
    document.getElementById('receive').innerHTML =
      "<br/><div class='row'><div id='QRCODE'>" +
      "<div class='col-sm-2'><input type='number' class='form-control' id='amount' placeholder='Amount' max='1000000' required></div>" +
      "<div class='col-sm-2'><input type='text' class='form-control' id='memo' placeholder='Memo' required></div>" +
      "<div class='col-sm-2'><input type='button' id='getinvoice' onclick='received()' class='btn btn-primary' value='Create invoice' /></div>" +
      '</div></div><br/>'
    document.getElementById('sendfunds').innerHTML = ''
  }

  function received() {
    memo = document.getElementById('memo').value
    amount = document.getElementById('amount').value
    postAjax(
      '/v1/invoices',
      JSON.stringify({value: amount, memo: memo}),
      '{{ wallet.inkey }}',
      function(data) {
        theinvoice = JSON.parse(data).pay_req
        thehash = JSON.parse(data).payment_hash
        document.getElementById('QRCODE').innerHTML =
          "<div class='col-md-4'><div class='box'><div class='box-header'>" +
          "<center><a href='lightning:" +
          theinvoice +
          "'><div id='qrcode'></div></a>" +
          "<p style='word-wrap: break-word;'>" +
          theinvoice +
          '</p></div></div></div></center>'

        new QRCode(document.getElementById('qrcode'), {
          text: theinvoice,
          width: 300,
          height: 300,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.M
        })
        getAjax('/v1/invoice/' + thehash, '{{ wallet.inkey }}', function(datab) {
          console.log(JSON.parse(datab).PAID)
          if (JSON.parse(datab).PAID == 'TRUE') {
            window.location.href =
              'wallet?wal=' + '{{ wallet.id }}' + '&usr=' + '{{ user }}'
          }
        })
      }
    )
  }

  function cancelsend() {
    window.location.href =
      'wallet?wal=' + '{{ wallet.id }}' + '&usr=' + '{{ user }}'
  }

  function sendfunds(invoice) {
    var url = '/v1/channels/transactions'
    postAjax(
      url,
      JSON.stringify({payment_request: invoice}),
      '{{ wallet.adminkey }}',
      function(data) {
        thehash = JSON.parse(data).payment_hash
        console.log(JSON.parse(data))
        if (JSON.parse(data).PAID == 'TRUE') {
          window.location.href =
            'wallet?wal=' + '{{ wallet.id }}' + '&usr=' + '{{ user }}'
        }
      }
    )
  }

  function scanQRsend() {
    document.getElementById('sendfunds').innerHTML =
      "<br/><br/><div class='row'><div class='col-md-4'>" +
      "<div id='loadingMessage'>🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>" +
      "<canvas id='canvas' hidden></canvas><div id='output' hidden><div id='outputMessage'></div>" +
      "<br/><span id='outputData'></span></div></div></div><button type='submit' class='btn btn-primary' onclick='cancelsend()'>Cancel</button><br/><br/>"
    var video = document.createElement('video')
    var canvasElement = document.getElementById('canvas')
    var canvas = canvasElement.getContext('2d')
    var loadingMessage = document.getElementById('loadingMessage')
    var outputContainer = document.getElementById('output')
    var outputMessage = document.getElementById('outputMessage')
    var outputData = document.getElementById('outputData')
    function drawLine(begin, end, color) {
      canvas.beginPath()
      canvas.moveTo(begin.x, begin.y)
      canvas.lineTo(end.x, end.y)
      canvas.lineWidth = 4
      canvas.strokeStyle = color
      canvas.stroke()
    }
    // Use facingMode: environment to attemt to get the front camera on phones
    navigator.mediaDevices
      .getUserMedia({video: {facingMode: 'environment'}})
      .then(function(stream) {
        video.srcObject = stream
        video.setAttribute('playsinline', true) // required to tell iOS safari we don't want fullscreen
        video.play()
        requestAnimationFrame(tick)
      })
    function tick() {
      loadingMessage.innerText = '⌛ Loading video...'
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        loadingMessage.hidden = true
        canvasElement.hidden = false
        outputContainer.hidden = false
        canvasElement.height = video.videoHeight
        canvasElement.width = video.videoWidth
        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height)
        var imageData = canvas.getImageData(
          0,
          0,
          canvasElement.width,
          canvasElement.height
        )
        var code = jsQR(imageData.data, imageData.width, imageData.height, {
          inversionAttempts: 'dontInvert'
        })
        if (code) {
          drawLine(
            code.location.topLeftCorner,
            code.location.topRightCorner,
            '#FF3B58'
          )
          drawLine(
            code.location.topRightCorner,
            code.location.bottomRightCorner,
            '#FF3B58'
          )
          drawLine(
            code.location.bottomRightCorner,
            code.location.bottomLeftCorner,
            '#FF3B58'
          )
          drawLine(
            code.location.bottomLeftCorner,
            code.location.topLeftCorner,
            '#FF3B58'
          )
          outputMessage.hidden = true
          outputData.parentElement.hidden = false
          outputData.innerText = JSON.stringify(code.data)
          theinvoice = decode(code.data)
          outmemo = theinvoice.data.tags[1].value
          outamount = Number(theinvoice.human_readable_part.amount) / 1000
          if (outamount > Number('{{ wallet.balance }}')) {
            document.getElementById('sendfunds').innerHTML =
              "<div class='row'><div class='col-md-6'>" +
              "<h3><b style='color:red;'>Not enough funds!</b></h3>" +
              "<button style='margin-left:20px;' type='submit' class='btn btn-primary' onclick='cancelsend()'>Continue</button>" +
              '</br/></br/></div></div>'
          } else {
            document.getElementById('sendfunds').innerHTML =
              "<div class='row'><div class='col-md-6'>" +
              '<h3><b>Invoice details</b></br/>Amount: ' +
              outamount +
              '<br/>Memo: ' +
              outmemo +
              '</h3>' +
              "<h4 style='word-wrap: break-word;'>" +
              JSON.stringify(code.data) +
              '</h4>' +
              "<button type='submit' class='btn btn-primary' onclick='sendfunds(" +
              JSON.stringify(code.data) +
              ")'>Send funds</button>" +
              "<button style='margin-left:20px;' type='submit' class='btn btn-primary' onclick='cancelsend()'>Cancel payment</button>" +
              '</br/></br/></div></div>'
          }
        } else {
          outputMessage.hidden = false
          outputData.parentElement.hidden = true
        }
      }
      requestAnimationFrame(tick)
    }
  }

  function deletewallet() {
    var urll = 'deletewallet?wal={{ wallet.id }}&usr={{ user }}'
    window.location.href = urll
  }

  function sidebarmake() {
    document.getElementById('sidebarmake').innerHTML =
      "<li><div class='form-group'>" +
      "<input  style='width:70%;float:left;' type='text' class='form-control' id='walname' placeholder='Name wallet' required>" +
      "<button style='width:30%;float:left;' type='button' class='btn btn-primary' onclick='newwallet()'>Submit</button>" +
      '</div></li><br/><br/>'
  }

  function makeid(length) {
    var result = ''
    var characters =
      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
    var charactersLength = characters.length
    for (var i = 0; i < length; i++) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength))
    }
    return result
  }

  function newwallet() {
    walname = document.getElementById('walname').value
    window.location.href =
      'wallet?usr=' + '{{ user }}' + '&wal=' + makeid(40) + '&nme=' + walname
  }

  var trans = '{{ transactions }}'
  var transac = trans.substr(1)

  //console.log(trans);

  if (transac != '') {
    var transactions = ''
    var linechart = []
    var tran = transac.split('!')
    tran.shift()
    console.log(tran)
    for (var i = 0; i < tran.length; i++) {
      rects = tran[i].split(',')
      rectstime = String(rects[1]).split('.')
      var datime = convertTimestamp(rectstime[0])

      //Make the transactions table

      transactions +=
        "<tr><td  style='width: 50%'>" +
        rects[0] +
        '</td><td>' +
        datime +
        '</td><td>' +
        rects[2] +
        '</td></tr>'

      //Make the line chart

      if (i == 0) {
        linechart.push({y: datime, item1: rects[2]})
      } else {
        linechart.push({y: datime, item1: rects[3]})
      }
    }
    document.getElementById('transactions').innerHTML = transactions
    if (linechart[0] != '') {
      document.getElementById('satschart').innerHTML =
        "<div class='row'><div class='col-md-6'><div class='box box-info'><div class='box-header'>" +
        "<h3 class='box-title'>Spending</h3></div><div class='box-body chart-responsive'>" +
        "<div class='chart' id='line-chart' style='height: 300px;'></div></div></div></div></div>"
    }
  }

  console.log(linechart)
  var data = linechart
  var line = new Morris.Line({
    element: 'line-chart',
    resize: true,
    data,
    xkey: 'y',
    ykeys: ['item1'],
    labels: ['Item 1'],
    lineColors: ['#3c8dbc'],
    hideHover: 'auto'
  })

  function convertTimestamp(timestamp) {
    var d = new Date(timestamp * 1000),
      yyyy = d.getFullYear(),
      mm = ('0' + (d.getMonth() + 1)).slice(-2),
      dd = ('0' + d.getDate()).slice(-2),
      hh = d.getHours(),
      h = hh,
      min = ('0' + d.getMinutes()).slice(-2),
      ampm = 'AM',
      time
    time = yyyy + '-' + mm + '-' + dd + ' ' + h + ':' + min
    return time
  }
</script>

{% endblock %}