{% 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>
        <q-btn
          label="Swap (In)"
          unelevated
          color="primary"
          @click="submarineSwapDialog.show = true"
        >
          <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left">
            Send onchain funds offchain (BTC -> LN)
          </q-tooltip>
        </q-btn>
        <q-btn
          label="Reverse Swap (Out)"
          unelevated
          color="primary"
          @click="reverseSubmarineSwapDialog.show = true"
        >
          <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left">
            Send offchain funds to onchain address (LN -> BTC)
          </q-tooltip>
        </q-btn>
        <q-btn
          label="Check Swaps"
          icon="cached"
          unelevated
          color="primary"
          @click="checkSwaps"
        >
          <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left">
            Check all pending swaps if they can be refunded.
          </q-tooltip>
        </q-btn>
      </q-card-section>
    </q-card>
    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Swaps (In)</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportSubmarineSwapCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          dense
          flat
          :data="submarineSwaps"
          row-key="id"
          :columns="submarineSwapTable.columns"
          :pagination.sync="submarineSwapTable.pagination"
        >
          {% raw %}
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.label }}
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td style="width: 10%">
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="visibility"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="openQrCodeDialog(props.row.id)"
                >
                  <q-tooltip
                    class="bg-grey-8"
                    anchor="bottom left"
                    self="top left"
                    >open swap onchain details</q-tooltip
                  >
                </q-btn>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="info"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="openStatusDialog(props.row.id)"
                >
                  <q-tooltip
                    class="bg-grey-8"
                    anchor="bottom left"
                    self="top left"
                    >open swap status info</q-tooltip
                  >
                </q-btn>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="flip_to_front"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="openMempool(props.row.id)"
                >
                  <q-tooltip
                    class="bg-grey-8"
                    anchor="bottom left"
                    self="top left"
                    >open tx on mempool.space</q-tooltip
                  >
                </q-btn>
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.value }}
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </q-table>
      </q-card-section>
    </q-card>
    <q-card>
      <q-card-section>
        <div class="row items-center no-wrap q-mb-md">
          <div class="col">
            <h5 class="text-subtitle1 q-my-none">Reverse Swaps (Out)</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportReverseSubmarineSwapCSV"
              >Export to CSV</q-btn
            >
          </div>
        </div>
        <q-table
          dense
          flat
          :data="reverseSubmarineSwaps"
          row-key="id"
          :columns="reverseSubmarineSwapTable.columns"
          :pagination.sync="reverseSubmarineSwapTable.pagination"
        >
          {% raw %}
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th auto-width></q-th>
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.label }}
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td style="width: 10%">
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="info"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="openStatusDialog(props.row.id, true)"
                >
                  <q-tooltip
                    class="bg-grey-8"
                    anchor="bottom left"
                    self="top left"
                    >open swap status info</q-tooltip
                  >
                </q-btn>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="flip_to_front"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  @click="openMempool(props.row.id)"
                >
                  <q-tooltip
                    class="bg-grey-8"
                    anchor="bottom left"
                    self="top left"
                    >open tx on mempool.space</q-tooltip
                  >
                </q-btn>
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ col.value }}
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </q-table>
      </q-card-section>
    </q-card>
  </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 "boltz/_api_docs.html" %} </q-list>
      </q-card-section>
    </q-card>
  </div>
  <q-dialog v-model="submarineSwapDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="sendSubmarineSwapFormData" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="submarineSwapDialog.data.wallet"
          :options="g.user.walletOptions"
          label="Wallet *"
          :disable="submarineSwapDialog.data.id ? true : false"
        >
        </q-select>

        <q-input
          filled
          dense
          emit-value
          v-model.trim="submarineSwapDialog.data.amount"
          :label="amountLabel()"
          type="number"
        ></q-input>
        <q-input
          filled
          dense
          emit-value
          v-model.trim="submarineSwapDialog.data.refund_address"
          type="string"
          label="Onchain address to receive funds if swap fails"
        ></q-input>
        <div class="row q-mt-lg">
          <q-btn
            v-if="submarineSwapDialog.data.id"
            unelevated
            color="primary"
            type="submit"
            label="Update Swap"
          ></q-btn>
          <q-btn
            v-else
            unelevated
            color="primary"
            :disable="disableSubmarineSwapDialog()"
            type="submit"
            label="Create Swap (IN)"
          ></q-btn>
          <q-btn
            v-close-popup
            flat
            color="grey"
            class="q-ml-auto"
            @click="resetSubmarineSwapDialog"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>
  <q-dialog v-model="reverseSubmarineSwapDialog.show" position="top">
    <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
      <q-form @submit="sendReverseSubmarineSwapFormData" class="q-gutter-md">
        <q-select
          filled
          dense
          emit-value
          v-model="reverseSubmarineSwapDialog.data.wallet"
          :options="g.user.walletOptions"
          label="Wallet *"
          :disable="reverseSubmarineSwapDialog.data.id ? true : false"
        >
        </q-select>

        <q-input
          filled
          dense
          emit-value
          :label="amountLabel()"
          v-model.trim="reverseSubmarineSwapDialog.data.amount"
          type="number"
        ></q-input>
        <div class="row">
          <div class="col">
            <q-checkbox
              v-model="reverseSubmarineSwapDialog.data.instant_settlement"
              value="false"
              label="Instant settlement"
            >
              <q-tooltip class="bg-grey-8" anchor="bottom left" self="top left">
                Create Onchain TX when transaction is in mempool, but not
                confirmed yet.
              </q-tooltip>
            </q-checkbox>
          </div>
        </div>
        <q-input
          filled
          dense
          emit-value
          v-model.trim="reverseSubmarineSwapDialog.data.onchain_address"
          type="string"
          label="Onchain address to receive funds"
        ></q-input>
        <div class="row q-mt-lg">
          <q-btn
            v-if="reverseSubmarineSwapDialog.data.id"
            unelevated
            color="primary"
            type="submit"
            label="Update Swap"
          ></q-btn>
          <q-btn
            v-else
            unelevated
            color="primary"
            :disable="disableReverseSubmarineSwapDialog()"
            type="submit"
            label="Create Reverse Swap (OUT)"
          ></q-btn>
          <q-btn
            v-close-popup
            flat
            color="grey"
            class="q-ml-auto"
            @click="resetReverseSubmarineSwapDialog"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>
  <q-dialog v-model="qrCodeDialog.show" position="top">
    <q-card v-if="qrCodeDialog.data" class="q-pa-lg lnbits__dialog-card">
      <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
        <qrcode
          :value="qrCodeDialog.data.bip21"
          :options="{width: 800}"
          class="rounded-borders"
        ></qrcode>
      </q-responsive>
      <div>
        {% raw %}
        <b>Bitcoin On-Chain TX</b><br />
        <b>Expected amount (sats): </b> {{ qrCodeDialog.data.expected_amount }}
        <br />
        <b>Expected amount (btc): </b> {{ qrCodeDialog.data.expected_amount_btc
        }} <br />
        <b>Onchain Address: </b> {{ qrCodeDialog.data.address }} <br />
        {% endraw %}
      </div>
      <div class="row q-mt-lg q-gutter-sm">
        <q-btn
          outline
          color="grey"
          @click="copyText(qrCodeDialog.data.address, 'Onchain address copied to clipboard!')"
          class="q-ml-sm"
          >Copy On-Chain Address</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
  </q-dialog>
  <q-dialog v-model="statusDialog.show" position="top">
    <q-card v-if="statusDialog.data" class="q-pa-lg lnbits__dialog-card">
      <div>
        {% raw %}
        <b>Wallet: </b> {{ statusDialog.data.wallet }} <br />
        <b>Boltz Status: </b> {{ statusDialog.data.boltz }} <br />
        <b>Mempool Status: </b> {{ statusDialog.data.mempool }} <br />
        <b>Blockheight timeout: </b> {{ statusDialog.data.timeout_block_height
        }} <br />
        {% endraw %}
      </div>
      <div class="row q-mt-lg q-gutter-sm">
        <q-btn
          outline
          color="grey"
          @click="refundSwap(statusDialog.data.swap_id)"
          v-if="!statusDialog.data.reverse"
          class="q-ml-sm"
          >Refund
        </q-btn>
        <q-btn
          outline
          color="grey"
          @click="downloadRefundFile(statusDialog.data.swap_id)"
          v-if="!statusDialog.data.reverse"
          class="q-ml-sm"
          >Download refundfile</q-btn
        >
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
  </q-dialog>
  <q-dialog v-model="allStatusDialog.show" maximized position="top">
    <q-card v-if="allStatusDialog.data" class="q-pa-lg lnbits__dialog-card">
      <h5>pending swaps</h5>
      <q-table
        dense
        flat
        :data="allStatusDialog.data.swaps"
        row-key="id"
        :columns="allStatusTable.columns"
        :rows-per-page-options="[0]"
      >
        {% raw %}
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th auto-width></q-th>
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              {{ col.label }}
            </q-th>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td style="width: 10%">
              <q-btn
                unelevated
                dense
                size="xs"
                icon="cached"
                :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                @click="refundSwap(props.row.swap_id)"
              >
                <q-tooltip
                  class="bg-grey-8"
                  anchor="bottom left"
                  self="top left"
                  >refund swap</q-tooltip
                >
              </q-btn>
              <q-btn
                unelevated
                dense
                size="xs"
                icon="download"
                :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                @click="downloadRefundFile(props.row.swap_id)"
              >
                <q-tooltip
                  class="bg-grey-8"
                  anchor="bottom left"
                  self="top left"
                  >dowload refund file</q-tooltip
                >
              </q-btn>
              <q-btn
                unelevated
                dense
                size="xs"
                icon="flip_to_front"
                :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                @click="openMempool(props.row.swap_id)"
              >
                <q-tooltip
                  class="bg-grey-8"
                  anchor="bottom left"
                  self="top left"
                  >open tx on mempool.space</q-tooltip
                >
              </q-btn>
            </q-td>
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              {{ col.value }}
            </q-td>
          </q-tr>
        </template>
        {% endraw %}
      </q-table>
      <h5>pending reverse swaps</h5>
      <q-table
        dense
        flat
        :data="allStatusDialog.data.reverse_swaps"
        row-key="id"
        :columns="allStatusTable.columns"
        :rows-per-page-options="[0]"
      >
        {% raw %}
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th auto-width></q-th>
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              {{ col.label }}
            </q-th>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td style="width: 10%">
              <q-btn
                unelevated
                dense
                size="xs"
                icon="flip_to_front"
                :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                @click="openMempool(props.row.swap_id)"
              >
                <q-tooltip
                  class="bg-grey-8"
                  anchor="bottom left"
                  self="top left"
                  >open tx on mempool.space</q-tooltip
                >
              </q-btn>
            </q-td>
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              {{ col.value }}
            </q-td>
          </q-tr>
        </template>
        {% endraw %}
      </q-table>
      <div class="row q-mt-lg q-gutter-sm">
        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
      </div>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  Vue.component(VueQrcode.name, VueQrcode)
  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        mempool: '',
        boltzConfig: {},
        submarineSwaps: [],
        reverseSubmarineSwaps: [],
        statuses: [],
        submarineSwapDialog: {
          show: false,
          data: {}
        },
        reverseSubmarineSwapDialog: {
          show: false,
          data: {
            instant_settlement: true
          }
        },
        qrCodeDialog: {
          show: false,
          data: {}
        },
        statusDialog: {
          show: false,
          data: {}
        },
        allStatusDialog: {
          show: false,
          data: {}
        },
        allStatusTable: {
          columns: [
            {
              name: 'swap_id',
              align: 'left',
              label: 'swap_id',
              field: 'swap_id'
            },
            {
              name: 'status',
              align: 'left',
              label: 'status',
              field: 'message'
            },
            {
              name: 'boltz',
              align: 'left',
              label: 'boltz',
              field: 'boltz'
            },
            {
              name: 'mempool',
              align: 'left',
              label: 'mempool',
              field: 'mempool'
            },
            {
              name: 'timeout_block_height',
              align: 'left',
              label: 'block height',
              field: 'timeout_block_height'
            }
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        reverseSubmarineSwapTable: {
          columns: [
            {
              name: 'time',
              align: 'left',
              label: 'time',
              field: 'time',
              sortable: true,
              format: function (val, row) {
                return new Date(val * 1000).toUTCString()
              }
            },
            {
              name: 'wallet',
              align: 'left',
              label: 'wallet',
              field: data => {
                let wallet = _.findWhere(this.g.user.wallets, {
                  id: data.wallet
                })
                if (wallet) {
                  return wallet.name
                }
              }
            },
            {
              name: 'status',
              align: 'left',
              label: 'status',
              field: 'status'
            },
            {
              name: 'boltz_id',
              align: 'left',
              label: 'boltz id',
              field: 'boltz_id'
            },
            {
              name: 'onchain_amount',
              align: 'left',
              label: 'onchain amount',
              field: 'onchain_amount'
            },
            {
              name: 'timeout_block_height',
              align: 'left',
              label: 'timeout block height',
              field: 'timeout_block_height'
            }
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        submarineSwapTable: {
          columns: [
            {
              name: 'time',
              align: 'left',
              label: 'time',
              field: 'time',
              sortable: true,
              format: function (val, row) {
                return new Date(val * 1000).toUTCString()
              }
            },
            {
              name: 'wallet',
              align: 'left',
              label: 'wallet',
              field: data => {
                let wallet = _.findWhere(this.g.user.wallets, {
                  id: data.wallet
                })
                if (wallet) {
                  return wallet.name
                }
              }
            },
            {
              name: 'status',
              align: 'left',
              label: 'status',
              field: 'status'
            },
            {
              name: 'boltz_id',
              align: 'left',
              label: 'boltz id',
              field: 'boltz_id'
            },
            {
              name: 'expected_amount',
              align: 'left',
              label: 'expected amount',
              field: 'expected_amount'
            },
            {
              name: 'timeout_block_height',
              align: 'left',
              label: 'timeout block height',
              field: 'timeout_block_height'
            }
          ],
          pagination: {
            rowsPerPage: 10
          }
        }
      }
    },
    methods: {
      getLimits() {
        const cfg = this.boltzConfig.data
        if (cfg) {
          return {
            min: cfg.limits.minimal,
            max: cfg.limits.maximal
          }
        }
        return {
          min: 0,
          max: 0
        }
      },
      amountLabel() {
        let limits = this.getLimits()
        return 'min: (' + limits.min + '), max: (' + limits.max + ')'
      },
      disableSubmarineSwapDialog() {
        const data = this.submarineSwapDialog.data
        let limits = this.getLimits()
        return (
          data.wallet == null ||
          data.refund_address == null ||
          data.refund_address.search(
            /^(bcrt1|bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$/
          ) !== 0 ||
          data.amount < limits.min ||
          data.amount > limits.max
        )
      },
      disableReverseSubmarineSwapDialog() {
        const data = this.reverseSubmarineSwapDialog.data
        let limits = this.getLimits()
        return (
          data.onchain_address == null ||
          data.onchain_address.search(
            /^(bcrt1|bc1|[13])[a-zA-HJ-NP-Z0-9]{25,39}$/
          ) !== 0 ||
          data.wallet == null ||
          data.amount < limits.min ||
          data.amount > limits.max
        )
      },
      downloadRefundFile(swapId) {
        let swap = _.findWhere(this.submarineSwaps, {id: swapId})
        let json = {
          id: swap.boltz_id,
          currency: 'BTC',
          redeemScript: swap.redeem_script,
          privateKey: swap.refund_privkey,
          timeoutBlockHeight: swap.timeout_block_height
        }
        let hiddenElement = document.createElement('a')
        hiddenElement.href =
          'data:application/json;charset=utf-8,' +
          encodeURI(JSON.stringify(json))
        hiddenElement.target = '_blank'
        hiddenElement.download = 'boltz-refund-' + swap.boltz_id + '.json'
        hiddenElement.click()
      },
      refundSwap(swapId) {
        LNbits.api
          .request(
            'POST',
            '/boltz/api/v1/swap/refund?swap_id=' + swapId,
            this.g.user.wallets[0].adminkey
          )
          .then(res => {
            this.resetStatusDialog()
          })
          .catch(error => {
            console.log('error', error)
            LNbits.utils.notifyApiError(error)
          })
      },
      openMempool(swap_id) {
        var swap = _.findWhere(this.submarineSwaps, {id: swap_id})
        if (swap === undefined) {
          var swap = _.findWhere(this.reverseSubmarineSwaps, {id: swap_id})
          var address = swap.lockup_address
        } else {
          var address = swap.address
        }
        var mempool_address = this.mempool

        // used for development, replace docker hosts with localhost
        if (mempool_address.search('mempool-web') !== -1) {
          mempool_address = mempool_address.replace('mempool-web', 'localhost')
        }

        window.open(mempool_address + '/address/' + address, '_blank')
      },
      openStatusDialog(swap_id, reverse) {
        LNbits.api
          .request(
            'POST',
            '/boltz/api/v1/swap/status?swap_id=' + swap_id,
            this.g.user.wallets[0].adminkey
          )
          .then(res => {
            this.resetStatusDialog()
            this.statusDialog.data = {
              reverse: reverse,
              swap_id: swap_id,
              wallet: res.data.wallet,
              boltz: res.data.boltz,
              mempool: res.data.mempool,
              timeout_block_height: res.data.timeout_block_height,
              date: new Date().toUTCString()
            }
            this.statusDialog.show = true
          })
          .catch(error => {
            console.log('error', error)
            LNbits.utils.notifyApiError(error)
          })
      },
      openQrCodeDialog(submarineSwapId) {
        var swap = _.findWhere(this.submarineSwaps, {id: submarineSwapId})
        if (swap === undefined) {
          return console.assert('swap is undefined, this should not happen')
        }
        this.qrCodeDialog.data = {
          id: swap.id,
          expected_amount: swap.expected_amount,
          expected_amount_btc: swap.expected_amount / 100000000,
          bip21: swap.bip21,
          address: swap.address
        }
        this.qrCodeDialog.show = true
      },
      resetStatusDialog() {
        this.statusDialog = {
          show: false,
          data: {}
        }
      },
      resetAllStatusDialog() {
        this.allStatusDialog = {
          show: false,
          data: {}
        }
      },
      resetSubmarineSwapDialog() {
        this.submarineSwapDialog = {
          show: false,
          data: {}
        }
      },
      resetReverseSubmarineSwapDialog() {
        this.reverseSubmarineSwapDialog = {
          show: false,
          data: {}
        }
      },
      sendReverseSubmarineSwapFormData() {
        let wallet = _.findWhere(this.g.user.wallets, {
          id: this.reverseSubmarineSwapDialog.data.wallet
        })
        let data = this.reverseSubmarineSwapDialog.data
        this.createReverseSubmarineSwap(wallet, data)
      },
      sendSubmarineSwapFormData() {
        let wallet = _.findWhere(this.g.user.wallets, {
          id: this.submarineSwapDialog.data.wallet
        })
        let data = this.submarineSwapDialog.data
        this.createSubmarineSwap(wallet, data)
      },
      exportSubmarineSwapCSV() {
        LNbits.utils.exportCSV(
          this.submarineSwapTable.columns,
          this.submarineSwaps
        )
      },
      exportReverseSubmarineSwapCSV() {
        LNbits.utils.exportCSV(
          this.reverseSubmarineSwapTable.columns,
          this.reverseSubmarineSwaps
        )
      },
      createSubmarineSwap(wallet, data) {
        LNbits.api
          .request(
            'POST',
            '/boltz/api/v1/swap',
            this.g.user.wallets[0].adminkey,
            data
          )
          .then(res => {
            this.submarineSwaps.unshift(res.data)
            this.resetSubmarineSwapDialog()
            this.openQrCodeDialog(res.data.id)
          })
          .catch(error => {
            LNbits.utils.notifyApiError(error)
          })
      },
      createReverseSubmarineSwap(wallet, data) {
        LNbits.api
          .request(
            'POST',
            '/boltz/api/v1/swap/reverse',
            this.g.user.wallets[0].adminkey,
            data
          )
          .then(res => {
            this.reverseSubmarineSwaps.unshift(res.data)
            this.resetReverseSubmarineSwapDialog()
          })
          .catch(error => {
            LNbits.utils.notifyApiError(error)
          })
      },
      getSubmarineSwap() {
        LNbits.api
          .request(
            'GET',
            '/boltz/api/v1/swap?all_wallets=true',
            this.g.user.wallets[0].inkey
          )
          .then(response => {
            this.submarineSwaps = response.data
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      getReverseSubmarineSwap() {
        LNbits.api
          .request(
            'GET',
            '/boltz/api/v1/swap/reverse?all_wallets=true',
            this.g.user.wallets[0].inkey
          )
          .then(response => {
            this.reverseSubmarineSwaps = response.data
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      getMempool() {
        LNbits.api
          .request('GET', '/boltz/api/v1/swap/mempool')
          .then(res => {
            this.mempool = res.data
          })
          .catch(error => {
            console.log('error', error)
            LNbits.utils.notifyApiError(error)
          })
      },
      getBoltzConfig() {
        LNbits.api
          .request('GET', '/boltz/api/v1/swap/boltz')
          .then(res => {
            this.boltzConfig = res
          })
          .catch(error => {
            console.log('error', error)
            LNbits.utils.notifyApiError(error)
          })
      },
      checkSwaps() {
        LNbits.api
          .request(
            'POST',
            '/boltz/api/v1/swap/check',
            this.g.user.wallets[0].adminkey
          )
          .then(res => {
            this.allStatusDialog.data = {
              swaps: _.where(res.data, {reverse: false}),
              reverse_swaps: _.where(res.data, {reverse: true})
            }
            this.allStatusDialog.show = true
          })
          .catch(error => {
            console.log('error', error)
            LNbits.utils.notifyApiError(error)
          })
      }
    },
    created: function () {
      this.getMempool()
      this.getBoltzConfig()
      this.getSubmarineSwap()
      this.getReverseSubmarineSwap()
    }
  })
</script>
{% endblock %}
