{% extends "public.html" %} {% block toolbar_title %} {% raw %} {{name}} Wallet {% endraw %}

{% endblock %} {% block footer %}{% endblock %} {% block page_container %}
<q-page-container>
  <q-page>
    <div class="row q-col-gutter-md justify-center q-pt-lg">


      <div class="col-12 col-sm-8 col-md-9 col-lg-7 text-center q-gutter-y-md ">
        <q-card>
          <q-card-section>
            <h3 class="q-my-none">
              <center><strong>{% raw %} {{balanceAmount}}
              </strong> {{tickershort}}{% endraw %}</center>
            </h3>
          </q-card-section>
          
        </q-card>


        <div class="row q-pb-md q-px-md justify-center q-col-gutter-sm gt-sm q-pt-lg">
          <div class="col">
            <q-btn size="18px" icon="arrow_downward" rounded color="primary" class="full-width" @click="showParseDialog">Receive</q-btn>
          </div>
          <div class="col">
            <q-btn size="18px"  icon="arrow_upward" rounded color="primary" class="full-width" @click="showSendDialog">Send</q-btn>
          </div>
          <div class="col">
            <q-btn  size="18px" rounded color="secondary" icon="sync_alt" class="full-width" @click="showCamera">Peg in/out
            </q-btn>
          </div>
          <div class="col">
            <q-btn  size="18px" rounded color="secondary" icon="photo_camera" class="full-width" @click="showCamera">scan
            </q-btn>
          </div>
          
        </div> 


        <q-card>
          <q-card-section>
            <div class="row items-center no-wrap q-mb-sm">
              <div class="col">
                <h5 class="text-subtitle1 q-my-none">Transactions</h5>
              </div>
              <div class="col-auto">{% raw %}
                <q-btn dense flat round icon="approval" color="grey" type="a" :href="mint" target="_blank">{% endraw %}
                  <q-tooltip>Mint details</q-tooltip>
                </q-btn>
                <q-btn flat color="grey" @click="exportCSV">Export to CSV</q-btn>

                <q-btn dense flat round icon="show_chart" color="grey" @click="showChart">
                  <q-tooltip>Show chart</q-tooltip>
                </q-btn>
              </div>
            </div>
            <q-input v-if="payments.length > 10" filled dense clearable v-model="paymentsTable.filter" debounce="300"
              placeholder="Search by tag, memo, amount" class="q-mb-md">
            </q-input>
            <q-table dense flat :data="filteredPayments" :row-key="paymentTableRowKey" :columns="paymentsTable.columns"
              :pagination.sync="paymentsTable.pagination" no-data-label="No transactions made yet"
              :filter="paymentsTable.filter">
              {% 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 auto-width class="text-center">
                    <q-icon v-if="props.row.isPaid" size="14px" :name="props.row.isOut ? 'call_made' : 'call_received'"
                      :color="props.row.isOut ? 'pink' : 'green'" @click="props.expand = !props.expand"></q-icon>
                    <q-icon v-else name="settings_ethernet" color="grey" @click="props.expand = !props.expand">
                      <q-tooltip>Pending</q-tooltip>
                    </q-icon>
                  </q-td>
                  <q-td key="memo" :props="props" style="white-space: normal; word-break: break-all">
                    <q-badge v-if="props.row.tag" color="yellow" text-color="black">
                      <a class="inherit" :href="['/', props.row.tag, '/?usr=', user.id].join('')">
                        #{{ props.row.tag }}
                      </a>
                    </q-badge>
                    {{ props.row.memo }}
                  </q-td>
                  <q-td auto-width key="date" :props="props">
                    <q-tooltip>{{ props.row.date }}</q-tooltip>
                    {{ props.row.dateFrom }}
                  </q-td>
                  {% endraw %}
                  <q-td auto-width key="sat" v-if="'{{LNBITS_DENOMINATION}}' != 'sats'" :props="props">{% raw %} {{
                    parseFloat(String(props.row.fsat).replaceAll(",", "")) / 100
                    }}
                  </q-td>

                  <q-td auto-width key="sat" v-else :props="props">
                    {{ props.row.fsat }}
                  </q-td>
                  <q-td auto-width key="fee" :props="props">
                    {{ props.row.fee }}
                  </q-td>
                </q-tr>

                <q-dialog v-model="props.expand" :props="props">
                  <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
                    <div class="text-center q-mb-lg">
                      <div v-if="props.row.isIn && props.row.pending">
                        <q-icon name="settings_ethernet" color="grey"></q-icon>
                        Invoice waiting to be paid
                        <lnbits-payment-details :payment="props.row"></lnbits-payment-details>
                        <div v-if="props.row.bolt11" class="text-center q-mb-lg">
                          <a :href="'lightning:' + props.row.bolt11">
                            <q-responsive :ratio="1" class="q-mx-xl">
                              <qrcode :value="props.row.bolt11" :options="{width: 340}" class="rounded-borders">
                              </qrcode>
                            </q-responsive>
                          </a>
                        </div>
                        <div class="row q-mt-lg">
                          <q-btn outline color="grey" @click="copyText(props.row.bolt11)">Copy invoice</q-btn>
                          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
                        </div>
                      </div>
                      <div v-else-if="props.row.isPaid && props.row.isIn">
                        <q-icon size="18px" :name="'call_received'" :color="'green'"></q-icon>
                        Payment Received
                        <lnbits-payment-details :payment="props.row"></lnbits-payment-details>
                      </div>
                      <div v-else-if="props.row.isPaid && props.row.isOut">
                        <q-icon size="18px" :name="'call_made'" :color="'pink'"></q-icon>
                        Payment Sent
                        <lnbits-payment-details :payment="props.row"></lnbits-payment-details>
                      </div>
                      <div v-else-if="props.row.isOut && props.row.pending">
                        <q-icon name="settings_ethernet" color="grey"></q-icon>
                        Outgoing payment pending
                        <lnbits-payment-details :payment="props.row"></lnbits-payment-details>
                      </div>
                    </div>
                  </q-card>
                </q-dialog>
              </template>
              {% endraw %}
            </q-table>
          </q-card-section>
        </q-card>
      </div>

      <q-dialog v-model="receive.show" @hide="closeReceiveDialog">
        {% raw %}
        <q-card v-if="!receive.paymentReq" class="q-pa-lg q-pt-xl lnbits__dialog-card">
          <q-form @submit="createInvoice" class="q-gutter-md">
            <p v-if="receive.lnurl" class="text-h6 text-center q-my-none">
              <b>{{receive.lnurl.domain}}</b> is requesting an invoice:
            </p>
            {% endraw %} {% if LNBITS_DENOMINATION != 'sats' %}
            <q-input filled dense v-model.number="receive.data.amount" label="Amount ({{LNBITS_DENOMINATION}}) *"
              mask="#.##" fill-mask="0" reverse-fill-mask :min="receive.minMax[0]" :max="receive.minMax[1]"
              :readonly="receive.lnurl && receive.lnurl.fixed"></q-input>
            {% else %}
            <q-select filled dense v-model="receive.unit" type="text" label="Unit" :options="receive.units"></q-select>
            <q-input ref="setAmount" filled dense v-model.number="receive.data.amount"
              :label="'Amount (' + receive.unit + ') *'" :mask="receive.unit != 'sat' ? '#.##' : '#'" fill-mask="0"
              reverse-fill-mask :step="receive.unit != 'sat' ? '0.01' : '1'" :min="receive.minMax[0]"
              :max="receive.minMax[1]" :readonly="receive.lnurl && receive.lnurl.fixed"></q-input>
            {% endif %}

            <q-input filled dense v-model.trim="receive.data.memo" label="Memo"></q-input>
            {% raw %}
            <div v-if="receive.status == 'pending'" class="row q-mt-lg">
              <q-btn unelevated color="primary" :disable="receive.data.amount == null || receive.data.amount <= 0"
                type="submit">
                <span v-if="receive.lnurl">
                  Withdraw from {{receive.lnurl.domain}}
                </span>
                <span v-else> Create invoice </span>
              </q-btn>
              <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
            </div>
            <q-spinner v-if="receive.status == 'loading'" color="primary" size="2.55em"></q-spinner>
          </q-form>
        </q-card>
        <q-card v-else class="q-pa-lg q-pt-xl lnbits__dialog-card">
          <div class="text-center q-mb-lg">
            <a :href="'lightning:' + receive.paymentReq">
              <q-responsive :ratio="1" class="q-mx-xl">
                <qrcode :value="receive.paymentReq" :options="{width: 340}" class="rounded-borders"></qrcode>
              </q-responsive>
            </a>
          </div>
          <div class="row q-mt-lg">
            <q-btn outline color="grey" @click="copyText(receive.paymentReq)">Copy invoice</q-btn>
            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
          </div>
        </q-card>
        {% endraw %}
      </q-dialog>

      <q-dialog v-model="parse.show" @hide="closeParseDialog">
        <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
          <div v-if="parse.invoice">
            <h6 v-if="'{{LNBITS_DENOMINATION}}' != 'sats'" class="q-my-none">
              {% raw %} {{ parseFloat(String(parse.invoice.fsat).replaceAll(",",
              "")) / 100 }} {% endraw %} {{LNBITS_DENOMINATION}} {% raw %}
            </h6>
            <h6 v-else class="q-my-none">
              {{ parse.invoice.fsat }}{% endraw %} {{LNBITS_DENOMINATION}} {%
              raw %}
            </h6>
            <q-separator class="q-my-sm"></q-separator>
            <p class="text-wrap">
              <strong>Description:</strong> {{ parse.invoice.description }}<br />
              <strong>Expire date:</strong> {{ parse.invoice.expireDate }}<br />
              <strong>Hash:</strong> {{ parse.invoice.hash }}
            </p>
            {% endraw %}
            <div v-if="canPay" class="row q-mt-lg">
              <q-btn unelevated color="primary" @click="payInvoice">Pay</q-btn>
              <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
            </div>
            <div v-else class="row q-mt-lg">
              <q-btn unelevated disabled color="yellow" text-color="black">Not enough funds!</q-btn>
              <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
            </div>
          </div>
          <div v-else-if="parse.lnurlauth">
            {% raw %}
            <q-form @submit="authLnurl" class="q-gutter-md">
              <p class="q-my-none text-h6">
                Authenticate with <b>{{ parse.lnurlauth.domain }}</b>?
              </p>
              <q-separator class="q-my-sm"></q-separator>
              <p>
                For every website and for every LNbits wallet, a new keypair
                will be deterministically generated so your identity can't be
                tied to your LNbits wallet or linked across websites. No other
                data will be shared with {{ parse.lnurlauth.domain }}.
              </p>
              <p>Your public key for <b>{{ parse.lnurlauth.domain }}</b> is:</p>
              <p class="q-mx-xl">
                <code class="text-wrap"> {{ parse.lnurlauth.pubkey }} </code>
              </p>
              <div class="row q-mt-lg">
                <q-btn unelevated color="primary" type="submit">Login</q-btn>
                <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
              </div>
            </q-form>
            {% endraw %}
          </div>
          <div v-else>
            <q-form v-if="!parse.camera.show" @submit="decodeRequest" class="q-gutter-md">
              <q-input filled dense v-model.trim="parse.data.request" type="textarea" label="Paste coins">
              </q-input>
              <div class="row q-mt-lg">
                <q-btn unelevated color="primary" :disable="parse.data.request == ''" type="submit">Read</q-btn>
                <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
              </div>
            </q-form>
            <div v-else>
              <q-responsive :ratio="1">
                <qrcode-stream @decode="decodeQR" class="rounded-borders"></qrcode-stream>
              </q-responsive>
              <div class="row q-mt-lg">
                <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto">
                  Cancel
                </q-btn>
              </div>
            </div>
          </div>
        </q-card>
      </q-dialog>

      <q-dialog v-model="parse.camera.show">
        <q-card class="q-pa-lg q-pt-xl">
          <div class="text-center q-mb-lg">
            <qrcode-stream @decode="decodeQR" class="rounded-borders"></qrcode-stream>
          </div>
          <div class="row q-mt-lg">
            <q-btn @click="closeCamera" flat color="grey" class="q-ml-auto">Cancel</q-btn>
          </div>
        </q-card>
      </q-dialog>

      <q-dialog v-model="paymentsChart.show">
        <q-card class="q-pa-sm" style="width: 800px; max-width: unset">
          <q-card-section>
            <canvas ref="canvas" width="600" height="400"></canvas>
          </q-card-section>
        </q-card>
      </q-dialog>
      <q-tabs class="lt-md fixed-bottom left-0 right-0 bg-primary text-white shadow-2 z-top" active-class="px-0"
        indicator-color="transparent">
        <q-tab icon="arrow_downward" label="receive" @click="showParseDialog">
        </q-tab>
        <q-tab icon="arrow_upward" label="Send" @click="showSendDialog"></q-tab>
        <q-tab icon="sync_alt" label="Peg in/out" @click="showSendDialog"></q-tab>
        <q-tab icon="photo_camera" label="Scan" @click="showCamera"> </q-tab>
      </q-tabs>

      <q-dialog v-model="disclaimerDialog.show">
        <q-card class="q-pa-lg">
          <h6 class="q-my-md text-primary">Warning</h6>
          <p>
            <strong>BOOKMARK THIS PAGE! If only mobile you can also click the 3 dots
              and "Save to homescreen"/"Install app"</strong>!
          </p>
          <p>
            Ecash is a bearer asset, meaning you have the funds saved on this
            page, losing the page without exporting the page will mean you will
            lose the funds.
          </p>
          <div class="row q-mt-lg">
            <q-btn outline color="grey" @click="copyText(disclaimerDialog.location.href)">Copy wallet URL</q-btn>
            <q-btn v-close-popup flat color="grey" class="q-ml-auto">I understand</q-btn>
          </div>
        </q-card>
      </q-dialog>
    </div>
  </q-page>
</q-page-container>
{% endblock %} {% block styles %}
<style>
  * {
    touch-action: manipulation;
  }

  .keypad {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .keypad .btn {
    height: 100%;
  }

  .keypad .btn-confirm {
    grid-area: 1 / 4 / 5 / 4;
  }
</style>
{% endblock %} {% block scripts %}
<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 {
      balanceAmount:"",
      tickershort:"",
      name:"",
      receive: {
        show: false,
        status: 'pending',
        paymentReq: null,
        paymentHash: null,
        minMax: [0, 2100000000000000],
        lnurl: null,
        units: ['sat'],
        unit: 'sat',
        data: {
          amount: null,
          memo: ''
        }
      },
      parse: {
        show: false,
        invoice: null,
        lnurlpay: null,
        lnurlauth: null,
        data: {
          request: '',
          amount: 0,
          comment: ''
        },
        paymentChecker: null,
        camera: {
          show: false,
          camera: 'auto'
        }
      },
      payments: [],
      paymentsTable: {
        columns: [
          {
            name: 'note',
            align: 'left',
            label: 'Note',
            field: 'note'
          },
          {
            name: 'date',
            align: 'left',
            label: 'Date',
            field: 'date',
            sortable: true
          },
          {
            name: 'amount',
            align: 'right',
            label: 'Amount',
            field: 'amount',
            sortable: true
          }
        ],
        pagination: {
          rowsPerPage: 10
        },
        filter: null
      },
      paymentsChart: {
        show: false
      },
      disclaimerDialog: {
        show: false,
        location: window.location
      },
      balance: 0,
      credit: 0,
      newName: ''
    }
    },
    computed: {
    formattedBalance: function () {
      return this.balance / 100
    },
    filteredPayments: function () {
      var q = this.paymentsTable.filter
      if (!q || q === '') return this.payments

      return LNbits.utils.search(this.payments, q)
    },
    canPay: function () {
      if (!this.parse.invoice) return false
      return this.parse.invoice.sat <= this.balance
    },
    pendingPaymentsExist: function () {
      return this.payments.findIndex(payment => payment.pending) !== -1
    }
  },
  filters: {
    msatoshiFormat: function (value) {
      return LNbits.utils.formatSat(value / 1000)
    }
  },
  methods: {
    paymentTableRowKey: function (row) {
      return row.payment_hash + row.amount
    },
    closeCamera: function () {
      this.parse.camera.show = false
    },
    showCamera: function () {
      this.parse.camera.show = true
    },
    showChart: function () {
      this.paymentsChart.show = true
      this.$nextTick(() => {
        generateChart(this.$refs.canvas, this.payments)
      })
    },
    focusInput(el) {
      this.$nextTick(() => this.$refs[el].focus())
    },
    showReceiveDialog: function () {
      this.receive.show = true
      this.receive.status = 'pending'
      this.receive.paymentReq = null
      this.receive.paymentHash = null
      this.receive.data.amount = null
      this.receive.data.memo = null
      this.receive.unit = 'sat'
      this.receive.paymentChecker = null
      this.receive.minMax = [0, 2100000000000000]
      this.receive.lnurl = null
      this.focusInput('setAmount')
    },
    showParseDialog: function () {
      this.parse.show = true
      this.parse.invoice = null
      this.parse.lnurlpay = null
      this.parse.lnurlauth = null
      this.parse.data.request = ''
      this.parse.data.comment = ''
      this.parse.data.paymentChecker = null
      this.parse.camera.show = false
    },
    updateBalance: function (credit) {
      this.balance = this.balance // update balance
    },
    closeReceiveDialog: function () {
      setTimeout(() => {
        clearInterval(this.receive.paymentChecker)
      }, 10000)
    },
    closeParseDialog: function () {
      setTimeout(() => {
        clearInterval(this.parse.paymentChecker)
      }, 10000)
    },
    onPaymentReceived: function (paymentHash) {
      this.fetchPayments()
      this.fetchBalance()

      if (this.receive.paymentHash === paymentHash) {
        this.receive.show = false
        this.receive.paymentHash = null
        clearInterval(this.receive.paymentChecker)
      }
    },
    createInvoice: function () {
      this.receive.status = 'loading'
      if (LNBITS_DENOMINATION != 'sats') {
        this.receive.data.amount = this.receive.data.amount * 100
      }
      LNbits.api
        .createInvoice(
          this.receive.data.amount,
          this.receive.data.memo,
          this.receive.unit,
          this.receive.lnurl && this.receive.lnurl.callback
        )
        .then(response => {
          this.receive.status = 'success'
          this.receive.paymentReq = response.data.payment_request
          this.receive.paymentHash = response.data.payment_hash

          if (response.data.lnurl_response !== null) {
            if (response.data.lnurl_response === false) {
              response.data.lnurl_response = `Unable to connect`
            }

            if (typeof response.data.lnurl_response === 'string') {
              // failure
              this.$q.notify({
                timeout: 5000,
                type: 'warning',
                message: `${this.receive.lnurl.domain} lnurl-withdraw call failed.`,
                caption: response.data.lnurl_response
              })
              return
            } else if (response.data.lnurl_response === true) {
              // success
              this.$q.notify({
                timeout: 5000,
                message: `Invoice sent to ${this.receive.lnurl.domain}!`,
                spinner: true
              })
            }
          }

          clearInterval(this.receive.paymentChecker)
          setTimeout(() => {
            clearInterval(this.receive.paymentChecker)
          }, 40000)
          
        })
        .catch(err => {
          LNbits.utils.notifyApiError(err)
          this.receive.status = 'pending'
        })
    },
    decodeQR: function (res) {
      this.parse.data.request = res
      this.decodeRequest()
      this.parse.camera.show = false
    },
    decodeRequest: function () {
      this.parse.show = true
      let req = this.parse.data.request.toLowerCase()
      if (this.parse.data.request.toLowerCase().startsWith('lightning:')) {
        this.parse.data.request = this.parse.data.request.slice(10)
      } else if (this.parse.data.request.toLowerCase().startsWith('lnurl:')) {
        this.parse.data.request = this.parse.data.request.slice(6)
      } else if (req.indexOf('lightning=lnurl1') !== -1) {
        this.parse.data.request = this.parse.data.request
          .split('lightning=')[1]
          .split('&')[0]
      }

      if (
        this.parse.data.request.toLowerCase().startsWith('lnurl1') ||
        this.parse.data.request.match(/[\w.+-~_]+@[\w.+-~_]/)
      ) {
        return
      }

      let invoice
      try {
        invoice = decode(this.parse.data.request)
      } catch (error) {
        this.$q.notify({
          timeout: 3000,
          type: 'warning',
          message: error + '.',
          caption: '400 BAD REQUEST'
        })
        this.parse.show = false
        return
      }

      let cleanInvoice = {
        msat: invoice.human_readable_part.amount,
        sat: invoice.human_readable_part.amount / 1000,
        fsat: LNbits.utils.formatSat(invoice.human_readable_part.amount / 1000)
      }

      _.each(invoice.data.tags, tag => {
        if (_.isObject(tag) && _.has(tag, 'description')) {
          if (tag.description === 'payment_hash') {
            cleanInvoice.hash = tag.value
          } else if (tag.description === 'description') {
            cleanInvoice.description = tag.value
          } else if (tag.description === 'expiry') {
            var expireDate = new Date(
              (invoice.data.time_stamp + tag.value) * 1000
            )
            cleanInvoice.expireDate = Quasar.utils.date.formatDate(
              expireDate,
              'YYYY-MM-DDTHH:mm:ss.SSSZ'
            )
            cleanInvoice.expired = false // TODO
          }
        }
      })

      this.parse.invoice = Object.freeze(cleanInvoice)
    },
    payInvoice: function () {
      let dismissPaymentMsg = this.$q.notify({
        timeout: 0,
        message: 'Processing payment...'
      })
    },
    payLnurl: function () {
      let dismissPaymentMsg = this.$q.notify({
        timeout: 0,
        message: 'Processing payment...'
      })
    },
    authLnurl: function () {
      let dismissAuthMsg = this.$q.notify({
        timeout: 10,
        message: 'Performing authentication...'
      })
    },

    deleteWallet: function (walletId, user) {
      LNbits.utils
        .confirmDialog('Are you sure you want to delete this wallet?')
        .onOk(() => {
          LNbits.href.deleteWallet(walletId, user)
        })
    },
    fetchPayments: function () {
      return 
    },
    fetchBalance: function () {
      
    },
    exportCSV: function () {
      // status is important for export but it is not in paymentsTable
      // because it is manually added with payment detail link and icons
      // and would cause duplication in the list
      let columns = this.paymentsTable.columns
      columns.unshift({
        name: 'pending',
        align: 'left',
        label: 'Pending',
        field: 'pending'
      })
      LNbits.utils.exportCSV(columns, this.payments)
    }
  },
  watch: {
    payments: function () {
      this.fetchBalance()
    }
  },
  created: function () {
    this.fetchBalance()
    this.fetchPayments()

    LNbits.api
      .request('GET', '/api/v1/currencies')
      .then(response => {
        this.receive.units = ['sat', ...response.data]
      })
      .catch(err => {
        LNbits.utils.notifyApiError(err)
      })
  },
  created: function () {

    let params = (new URL(document.location)).searchParams
    
    // get ticker
    if(!params.get('tsh') && !this.$q.localStorage.getItem('cashu.tickershort')){
        this.$q.localStorage.set('cashu.tickershort', "CE")
        this.tickershort = "CE"
    }
    else if(params.get('tsh')){
        this.$q.localStorage.set('cashu.tickershort', params.get('tsh'))
        this.tickershort = params.get('tsh')
    }
    else if(this.$q.localStorage.getItem('cashu.tickershort')){
        this.tickershort = this.$q.localStorage.getItem('cashu.tickershort')
    }

    
    if (!this.$q.localStorage.getItem('cashu.amount')) {
      this.balanceAmount = 0
    }

    // get mint
    if (params.get('mnt')) {
      this.mint = params.get('mnt')
      this.$q.localStorage.set('cashu.mint', params.get('mnt'))
    }
    else if(this.$q.localStorage.getItem('cashu.mint')){
      this.mint = this.$q.localStorage.getItem('cashu.mint')
    }
    else{
      this.$q.notify({
        color: 'red',
        message: 'No mint set!'
      })
    }

    // get name
    if (params.get('nme')) {
      this.name = params.get('nme')
      this.$q.localStorage.set('cashu.name', params.get('nme'))
    }
    else if(this.$q.localStorage.getItem('cashu.name')){
      this.name = this.$q.localStorage.getItem('cashu.name')
    }

  }
})
</script>
{% endblock %}