{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md">
  <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h5 class="text-subtitle1 q-mt-none q-mb-md">Deezy</h5>
        <q-separator class="q-my-lg"></q-separator>
        <q-card>
          <q-card-section>
            <q-btn
              label="SWAP (LIGHTNING -> BTC)"
              unelevated
              color="primary"
              @click="showLnToBtcForm"
            >
              <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left">
                Send lightning btc and receive on-chain btc
              </q-tooltip>
            </q-btn>
            <q-btn
              label="SWAP (BTC -> LIGHTNING)"
              unelevated
              color="primary"
              @click="swapBtcToLn.show = true; swapLnToBtc.show = false;"
            >
              <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left">
                Send on-chain btc and receive via lightning
              </q-tooltip>
            </q-btn>
          </q-card-section>
        </q-card>
        <div
          v-show="swapLnToBtc.show"
          class="q-pa-lg q-pt-xl lnbits__dialog-card"
        >
          <h6 class="q-mt-none">LIGHTNING BTC -> BTC</h6>
          <q-form @submit="sendLnToBtc" class="q-gutter-md">
            <q-input
              filled
              dense
              emit-value
              v-model.trim="swapLnToBtc.data.amount"
              label="Amount (sats)"
              type="number"
            ></q-input>
            <q-input
              filled
              dense
              emit-value
              v-model.trim="swapLnToBtc.data.on_chain_address"
              type="string"
              label="Onchain address to receive funds"
            ></q-input>
            <q-input
              filled
              dense
              emit-value
              v-model.trim="swapLnToBtc.data.on_chain_sats_per_vbyte"
              label="On chain fee rate (sats/vbyte)"
              min="1"
              type="number"
              :hint="swapLnToBtc.suggested_fees && `Economy Fee - ${swapLnToBtc.suggested_fees?.economyFee} | Half an hour fee - ${swapLnToBtc.suggested_fees?.halfHourFee} | Fastest fee - ${swapLnToBtc.suggested_fees?.fastestFee}`"
            >
            </q-input>
            <q-btn
              unelevated
              color="primary"
              type="submit"
              label="Create Swap"
            ></q-btn>
            <q-btn flat color="grey" class="q-ml-auto" @click="resetSwapLnToBtc"
              >Cancel</q-btn
            >
          </q-form>
          <q-dialog v-model="swapLnToBtc.showInvoice" persistent>
            <q-card flat bordered class="my-card">
              <q-card-section>
                <div class="flex justify-between">
                  <div class="text-h6">Pay invoice to complete swap</div>
                  <q-btn flat v-close-popup>
                    <q-icon name="close" />
                  </q-btn>
                </div>
              </q-card-section>
              <q-card-section class="q-pt-none">
                <qrcode
                  :value="swapLnToBtc.response"
                  :options="{width: 360}"
                  class="rounded-borders"
                ></qrcode>
              </q-card-section>
              <q-card-section>
                <q-btn
                  outline
                  @click="copyLnInvoice"
                  label="Copy"
                  color="primary"
                ></q-btn>
                <q-input
                  v-model="swapLnToBtc.response"
                  type="textarea"
                  readonly
                  @click="$event.target.select()"
                />
              </q-card-section>
            </q-card>
          </q-dialog>
        </div>
        <div
          v-show="swapBtcToLn.show"
          class="q-pa-lg q-pt-xl lnbits__dialog-card"
        >
          <h6 class="q-mt-none">BTC -> LIGHTNING BTC</h6>
          <q-form @submit="sendBtcToLn" class="q-gutter-md">
            <q-input
              filled
              dense
              emit-value
              v-model.trim="swapBtcToLn.data.lnurl_or_lnaddress"
              label="Lnurl or Lightning Address"
              type="string"
            ></q-input>
            <q-btn
              unelevated
              color="primary"
              type="submit"
              label="Create Swap"
            ></q-btn>
            <q-btn flat color="grey" class="q-ml-auto" @click="resetSwapBtcToLn"
              >Cancel</q-btn
            >
          </q-form>
          <q-dialog v-model="swapBtcToLn.showDetails" persistent maximized>
            <q-card flat bordered class="my-card">
              <q-card-section>
                <div class="flex justify-between">
                  <div class="text-h6">Response - Important</div>
                  <q-btn flat v-close-popup>
                    <q-icon name="close" />
                  </q-btn>
                </div>
              </q-card-section>
              {% raw %}
              <q-card-section>
                Address - {{ swapBtcToLn.response.address }}
              </q-card-section>
              <q-card-section>
                Commitment - {{ swapBtcToLn.response.commitment }}
              </q-card-section>
              <q-card-section>
                Secret Access Key - {{ swapBtcToLn.response.secret_access_key }}
              </q-card-section>
              <q-card-section>
                Signature - {{ swapBtcToLn.response.signature }}
              </q-card-section>
              {% endraw %}
            </q-card>
          </q-dialog>
        </div>
      </q-card-section>
    </q-card>
    {% raw %}
    <q-dialog v-model="swapLnToBtc.invoicePaid">
      <q-card class="bg-teal text-white" style="width: 400px">
        <q-card-section>
          <div class="text-h6">Success Bitcoin is on its way</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          Onchain tx id {{ swapLnToBtc.onchainTxId }}
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="OK" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
    {% endraw %}
  </div>
  <div class="col-12 col-md-4 col-lg-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">{{SITE_TITLE}} Boltz extension</h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list> {% include "deezy/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  Vue.component(VueQrcode.name, VueQrcode)
  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        lightning_btc: '',
        tools: [],
        swapLnToBtc: {
          show: false,
          showInvoice: false,
          data: {
            on_chain_sats_per_vbyte: 1
          },
          suggested_fees: null,
          response: null,
          invoicePaid: false,
          onchainTxId: null
        },
        swapBtcToLn: {
          show: false,
          showDetails: false,
          data: {},
          response: {}
        }
      }
    },
    methods: {
      showLnToBtcForm() {
        this.getSuggestedOnChainFees()
        this.swapLnToBtc.show = true
        this.swapBtcToLn.show = false
      },
      getSuggestedOnChainFees() {
        axios
          .get('https://mempool.space/api/v1/fees/recommended')
          .then(result => {
            this.swapLnToBtc.suggested_fees = result.data
          })
      },
      checkIfInvoiceIsPaid() {
        if (this.swapLnToBtc.response && !this.swapLnToBtc.invoicePaid) {
          var self = this
          let interval = setInterval(() => {
            axios
              .get(
                `https://api.deezy.io/v1/swap/lookup?bolt11_invoice=${self.swapLnToBtc.response}`
              )
              .then(function (response) {
                if (response.data.on_chain_txid || count > 4) {
                  self.swapLnToBtc = {
                    ...self.swapLnToBtc,
                    invoicePaid: true,
                    onchainTxId: response.data.on_chain_txid
                  }
                  clearInterval(interval)
                }
              })
          }, 4000)
        }
      },
      copyLnInvoice() {
        Quasar.utils.copyToClipboard(this.swapLnToBtc.response)
      },
      sendLnToBtc() {
        var self = this
        axios
          .post('https://api.deezy.io/v1/swap', {
            amount_sats: parseInt(self.swapLnToBtc.data.amount),
            on_chain_address: self.swapLnToBtc.data.on_chain_address,
            on_chain_sats_per_vbyte: parseInt(
              self.swapLnToBtc.data.on_chain_sats_per_vbyte
            )
          })
          .then(function (response) {
            self.swapLnToBtc = {
              ...self.swapLnToBtc,
              showInvoice: true,
              response: response.data.bolt11_invoice
            }
            self.checkIfInvoiceIsPaid()
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      sendBtcToLn() {
        var self = this
        axios
          .post('https://api.deezy.io/v1/source', {
            lnurl_or_lnaddress: self.swapBtcToLn.data.lnurl_or_lnaddress
          })
          .then(function (response) {
            self.swapBtcToLn = {
              ...self.swapBtcToLn,
              response: response.data,
              showDetails: true
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      resetSwapBtcToLn() {
        this.swapBtcToLn = {
          ...this.swapBtcToLn,
          data: {}
        }
      },
      resetSwapLnToBtc() {
        this.swapLnToBtc = {
          ...this.swapLnToBtc,
          data: {}
        }
      }
    }
  })
</script>
{% endblock %}