{% 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>
        <b>Cashu mint and wallet</b>
        <p></p>
        <p>
          Here you can create multiple cashu mints that you can share. Each mint
          can service many users but all ecash tokens of a mint are only valid
          inside that mint and not across different mints. To exchange funds
          between mints, use Lightning payments.
        </p>
        <b>Important</b>
        <p></p>
        <p>
          If you are the operator of this LNbits instance, make sure to set
          CASHU_PRIVATE_KEY="randomkey" in your configuration file. Do not
          create mints before setting the key and do not change the key once
          set.
        </p>
      </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">Mints</h5>
          </div>
          <div class="col-auto">
            <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>
          </div>
        </div>
        <q-table
          dense
          flat
          :data="cashus"
          row-key="id"
          :columns="cashusTable.columns"
          :pagination.sync="cashusTable.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-th auto-width></q-th>
            </q-tr>
          </template>

          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="account_balance_wallet"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  :href="'wallet/?' + 'mint_id=' + props.row.id"
                  target="_blank"
                  ><q-tooltip>Shareable wallet</q-tooltip></q-btn
                >

                <q-btn
                  unelevated
                  dense
                  size="xs"
                  icon="account_balance"
                  :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'"
                  type="a"
                  :href="'mint/' + props.row.id"
                  target="_blank"
                  ><q-tooltip>Shareable mint page</q-tooltip></q-btn
                >
              </q-td>
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                {{ (col.name == 'tip_options' && col.value ?
                JSON.parse(col.value).join(", ") : col.value) }}
              </q-td>
              <q-td auto-width>
                <q-btn
                  flat
                  dense
                  size="xs"
                  @click="deleteMint(props.row.id)"
                  icon="cancel"
                  color="pink"
                ></q-btn>
              </q-td>
            </q-tr>
          </template>
          {% endraw %}
        </q-table>
        <q-btn
          class="q-pt-l"
          unelevated
          color="primary"
          @click="formDialog.show = true"
          >New Mint</q-btn
        >
      </q-card-section>
    </q-card>
  </div>

  <div class="col-12 col-md-5 q-gutter-y-md">
    <q-card>
      <q-card-section>
        <h6 class="text-subtitle1 q-my-none">{{SITE_TITLE}} Cashu extension</h6>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <q-separator></q-separator>
        <q-list>
          {% include "cashu/_api_docs.html" %}
          <q-separator></q-separator>
          {% include "cashu/_cashu.html" %}
        </q-list>
      </q-card-section>
    </q-card>
  </div>

  <q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
    <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
      <q-form @submit="createMint" class="q-gutter-md">
        <q-input
          filled
          dense
          v-model.trim="formDialog.data.name"
          label="Mint Name"
          placeholder="Cashu Mint"
        ></q-input>
        <q-select
          filled
          dense
          emit-value
          v-model="formDialog.data.wallet"
          :options="g.user.walletOptions"
          label="Cashu wallet *"
        ></q-select>
        <!-- <q-toggle
          v-model="toggleAdvanced"
          label="Show advanced options"
        ></q-toggle>
        <div v-show="toggleAdvanced">
          <div class="row">
            <div class="col-5">
              <q-checkbox
                v-model="formDialog.data.fraction"
                color="primary"
                label="sats/coins?"
              >
                <q-tooltip
                  >Use with hedging extension to create a stablecoin!</q-tooltip
                >
              </q-checkbox>
            </div>
            <div class="col-7">
              <q-input
                v-if="!formDialog.data.fraction"
                filled
                dense
                type="number"
                v-model.trim="formDialog.data.cost"
                label="Sat coin cost (optional)"
                value="1"
                type="number"
              ></q-input>
              <q-input
                v-if="!formDialog.data.fraction"
                filled
                dense
                v-model.trim="formDialog.data.tickershort"
                label="Ticker shorthand"
                placeholder="sats"
                #
              ></q-input>
            </div>
          </div>
          <q-input
            class="q-mt-md"
            filled
            dense
            type="number"
            v-model.trim="formDialog.data.maxsats"
            label="Maximum mint liquidity (optional)"
            placeholder="∞"
          ></q-input>
          <q-input
            class="q-mt-md"
            filled
            dense
            type="number"
            v-model.trim="formDialog.data.coins"
            label="Coins that 'exist' in mint (optional)"
            placeholder="∞"
          ></q-input>
        </div> -->
        <div class="row q-mt-md">
          <q-btn
            unelevated
            color="primary"
            :disable="formDialog.data.wallet == null || formDialog.data.name == null"
            type="submit"
            >Create Mint
          </q-btn>
          <q-btn v-close-popup flat color="grey" class="q-ml-auto"
            >Cancel</q-btn
          >
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</div>
{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script>
  var mapMint = function (obj) {
    obj.date = Quasar.utils.date.formatDate(
      new Date(obj.time * 1000),
      'YYYY-MM-DD HH:mm'
    )
    obj.fsat = new Intl.NumberFormat(LOCALE).format(obj.amount)
    obj.cashu = ['/cashu/', obj.id].join('')
    return obj
  }

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        cashus: [],
        hostname: location.protocol + '//' + location.host + '/cashu/mint/',
        toggleAdvanced: false,
        cashusTable: {
          columns: [
            {name: 'id', align: 'left', label: 'Mint ID', field: 'id'},
            {name: 'name', align: 'left', label: 'Name', field: 'name'},
            // {
            //   name: 'tickershort',
            //   align: 'left',
            //   label: 'Ticker',
            //   field: 'tickershort'
            // },
            {
              name: 'wallet',
              align: 'left',
              label: 'Mint wallet',
              field: 'wallet'
            }
            // {
            //   name: 'fraction',
            //   align: 'left',
            //   label: 'Using fraction',
            //   field: 'fraction'
            // },
            // {
            //   name: 'maxsats',
            //   align: 'left',
            //   label: 'Max Sats',
            //   field: 'maxsats'
            // },
            // {
            //   name: 'coins',
            //   align: 'left',
            //   label: 'No. of coins',
            //   field: 'coins'
            // }
          ],
          pagination: {
            rowsPerPage: 10
          }
        },
        formDialog: {
          show: false,
          data: {fraction: false}
        }
      }
    },
    methods: {
      closeFormDialog: function () {
        this.formDialog.data = {}
      },
      getMints: function () {
        var self = this

        LNbits.api
          .request(
            'GET',
            '/cashu/api/v1/mints?all_wallets=true',
            this.g.user.wallets[0].inkey
          )
          .then(function (response) {
            self.cashus = response.data.map(function (obj) {
              return mapMint(obj)
            })
          })
      },
      createMint: function () {
        if (this.formDialog.data.maxliquid == null) {
          this.formDialog.data.maxliquid = 0
        }
        var data = {
          name: this.formDialog.data.name,
          tickershort: this.formDialog.data.tickershort,
          maxliquid: this.formDialog.data.maxliquid
        }
        var self = this

        LNbits.api
          .request(
            'POST',
            '/cashu/api/v1/mints',
            _.findWhere(this.g.user.wallets, {id: this.formDialog.data.wallet})
              .inkey,
            data
          )
          .then(function (response) {
            self.cashus.push(mapMint(response.data))
            self.formDialog.show = false
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      },
      deleteMint: function (cashuId) {
        var self = this
        var cashu = _.findWhere(this.cashus, {id: cashuId})
        console.log(cashu)

        LNbits.utils
          .confirmDialog(
            "Are you sure you want to delete this Mint? This mint's users will not be able to redeem their tokens!"
          )
          .onOk(function () {
            LNbits.api
              .request(
                'DELETE',
                '/cashu/api/v1/mints/' + cashuId,
                _.findWhere(self.g.user.wallets, {id: cashu.wallet}).adminkey
              )
              .then(function (response) {
                self.cashus = _.reject(self.cashus, function (obj) {
                  return obj.id == cashuId
                })
              })
              .catch(function (error) {
                LNbits.utils.notifyApiError(error)
              })
          })
      },
      exportCSV: function () {
        LNbits.utils.exportCSV(this.cashusTable.columns, this.cashus)
      }
    },
    created: function () {
      if (this.g.user.wallets.length) {
        this.getMints()
      }
    }
  })
</script>
{% endblock %}
