public/index2.html

<!DOCTYPE html>
<html>
  <head>
    <title>Sphinx Relay</title>
    <link rel="icon" href="/static/sphinx-logo.png" />
    <style>
      html {
        font-family: Arial, Helvetica, sans-serif;
        color: white;
      }

      body {
        background: #292a2d;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      #qr-wrap {
        background: white;
        width: 300px;
        height: 300px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
      }

      canvas {
        height: 280px;
        width: 280px;
      }

      pre {
        margin-top: 8px;
        border-radius: 10px;
        max-width: 250px;
        padding: 18px 25px 0px 25px;
        border: 1px solid tan;
        background: white;
        overflow: hidden;
        overflow-wrap: break-word;
        display: block;
        white-space: pre-wrap;
        color: darkslategray;
      }

      img {
        height: 100px;
        width: 100px;
        margin-top: 20px;
      }

      p {
        margin-top: 30px;
        max-width: 300px;
        text-align: center;
      }

      ul {
        list-style: none;
        max-width: 333px;
      }

      li {
        margin-top: 8px;
      }

      input[type='checkbox'] {
        pointer-events: none;
      }
    </style>
    <script>
      var hi = 'hello'
    </script>
  </head>

  <body>
    <img src="/static/sphinx-logo.png" alt="logo" />

    <ul>
      <li>
        <input id="chan" type="checkbox" />
        <span id="chan-text"></span>
        <pre id="chan-pre" style="display: none">
lncli connect SPHINX_HUB_PUBKEY@54.159.193.149:9735

lncli openchannel SPHINX_HUB_PUBKEY --local_amt=*** --push_amt=*** --sat_per_byte=***
      </pre
        >
      </li>

      <li>
        <input id="fees" type="checkbox" />
        <span id="fees-text"></span>
        <pre id="fees-pre" style="display: none">
lncli updatechanpolicy --base_fee_msat=0 --fee_rate=0.000001 --time_lock_delta=40 --chan_point=***        
      </pre
        >
      </li>

      <li>
        <input id="bal" type="checkbox" />
        <span id="bal-text"></span>
      </li>
    </ul>

    <div id="qr-wrap" style="display: none">
      <canvas id="qr"></canvas>
    </div>

    <p id="qr-text">
      Scan the QR or copy the connection string into your Sphinx app
    </p>

    <pre id="connection-string" style="display: none">
CONNECTION_STRING
  </pre
    >

    <script src="/static/js/qrious.js"></script>
    <script>
      ;(function () {
        var qr = new QRious({
          element: document.getElementById('qr'),
          value: 'CONNECTION_STRING',
          size: 300,
        })
      })()
    </script>
    <script>
      function get(id) {
        return document.getElementById(id)
      }

      const chan = get('chan')
      const chanText = get('chan-text')
      const chanPre = get('chan-pre')

      if (window.channelIsOpen) {
        chan.checked = true
        chanText.innerHTML = 'You have an open channel'
      } else {
        chanText.innerHTML = 'You need to open a channel'
        chanPre.style.display = 'block'
      }

      const fees = get('fees')
      const feesText = get('fees-text')
      const feesPre = get('fees-pre')

      if (window.channelFeesBaseZero) {
        fees.checked = true
        feesText.innerHTML = 'You have set your fee base to 0'
      } else {
        feesText.innerHTML = 'You need to set your fee base to 0'
        feesPre.style.display = 'block'
      }

      const bal = get('bal')
      const balText = get('bal-text')

      if (window.hasRemoteBalance) {
        bal.checked = true
        balText.innerHTML = 'You have remote balance'
      } else {
        balText.innerHTML =
          'You need remote balance (2% of channel size recommended)'
      }

      const qrWrap = get('qr-wrap')
      const connString = get('connection-string')
      const qrText = get('qr-text')

      const readyToGo =
        window.hasRemoteBalance &&
        window.channelFeesBaseZero &&
        window.channelIsOpen

      if (window.isSignedUp) {
        qrText.innerHTML = 'You have connected your app!'
      } else if (readyToGo) {
        qrWrap.style.display = 'flex'
        connString.style.display = 'block'
      }
    </script>
  </body>
</html>