Wording, design, and require api token

lnbits/extensions/deezy/templates/deezy/index.html

@@ -6,103 +6,50 @@
       <q-card-section>
         <h5 class="text-subtitle1 q-mt-none q-mb-md">Deezy</h5>
         <p class="text-subtitle2 q-mt-none q-mb-md">
-          Due to regulatory reasons you need to get a access token from deezy.
+          An access token is required to use the swap service.
-          Contact - support@deezy.io or @dannydeezy on telegram
+          Email support@deezy.io or contact @dannydeezy on telegram to get one.
         </p>
         <div>
           <div class="flex justify-between items-center">
             <span>Deezy token </span>
-            <q-btn
+            <q-btn type="button" @click="showDeezyTokenForm = !showDeezyTokenForm">Add or Update token</q-btn>
-              type="button"
-              @click="showDeezyTokenForm = !showDeezyTokenForm"
-              >Add or Update token</q-btn
-            >
           </div>
           <p v-if="storedDeezyToken" v-text="storedDeezyToken"></p>
         </div>
-        <q-form
+        <q-form v-if="showDeezyTokenForm" @submit="storeDeezyToken" class="q-gutter-md q-mt-lg">
-          v-if="showDeezyTokenForm"
+          <q-input filled dense emit-value :placeholder="storedDeezyToken" v-model.trim="deezyToken" label="Deezy Token"
-          @submit="storeDeezyToken"
+            type="text"></q-input>
-          class="q-gutter-md q-mt-lg"
-        >
-          <q-input
-            filled
-            dense
-            emit-value
-            :placeholder="storedDeezyToken"
-            v-model.trim="deezyToken"
-            label="Deezy Token"
-            type="text"
-          ></q-input>
           <q-btn color="grey" type="submit" label="Store Deezy Token"></q-btn>
         </q-form>
         <q-separator class="q-my-lg"></q-separator>
         <q-card>
           <q-card-section>
-            <q-btn
+            <q-btn label="SWAP (LIGHTNING -> BTC)" unelevated color="primary" @click="showLnToBtcForm" :disabled="!storedDeezyToken">
-              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
+            <q-btn label="SWAP (BTC -> LIGHTNING)" unelevated color="primary"
-              label="SWAP (BTC -> LIGHTNING)"
+              @click="swapBtcToLn.show = true; swapLnToBtc.show = false;" :disabled="!storedDeezyToken">
-              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
+        <div v-show="swapLnToBtc.show" class="q-pa-lg q-pt-xl lnbits__dialog-card">
-          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
+            <q-input filled dense emit-value v-model.trim="swapLnToBtc.data.amount" label="Amount (sats)"
-              filled
+              type="number"></q-input>
-              dense
+            <q-input filled dense emit-value v-model.trim="swapLnToBtc.data.on_chain_address" type="string"
-              emit-value
+              label="Onchain address to receive funds"></q-input>
-              v-model.trim="swapLnToBtc.data.amount"
+            <q-input filled dense emit-value v-model.trim="swapLnToBtc.data.on_chain_sats_per_vbyte"
-              label="Amount (sats)"
+              label="On chain fee rate (sats/vbyte)" min="1" type="number"
-              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-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
+            <q-btn unelevated color="primary" type="submit" label="Create Swap"></q-btn>
-              unelevated
+            <q-btn flat color="grey" class="q-ml-auto" @click="resetSwapLnToBtc">Cancel</q-btn>
-              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">
@@ -115,77 +62,44 @@
                 </div>
               </q-card-section>
               <q-card-section class="q-pt-none">
-                <qrcode
+                <qrcode :value="swapLnToBtc.response" :options="{width: 360}" class="rounded-borders"></qrcode>
-                  :value="swapLnToBtc.response"
-                  :options="{width: 360}"
-                  class="rounded-borders"
-                ></qrcode>
               </q-card-section>
               <q-card-section>
-                <q-btn
+                <q-btn outline @click="copyLnInvoice" label="Copy" color="primary"></q-btn>
-                  outline
+                <q-input v-model="swapLnToBtc.response" type="textarea" readonly @click="$event.target.select()" />
-                  @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
+        <div v-show="swapBtcToLn.show" class="q-pa-lg q-pt-xl lnbits__dialog-card">
-          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
+            <q-input filled dense emit-value v-model.trim="swapBtcToLn.data.lnurl_or_lnaddress"
-              filled
+              label="Lnurl or Lightning Address" type="string"></q-input>
-              dense
+            <q-btn unelevated color="primary" type="submit" label="Generate Onchain Address"></q-btn>
-              emit-value
+            <q-btn flat color="grey" class="q-ml-auto" @click="resetSwapBtcToLn">Cancel</q-btn>
-              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-dialog v-model="swapBtcToLn.showDetails" persistent>
             <q-card flat bordered class="my-card">
               <q-card-section>
                 <div class="flex justify-between">
-                  <div class="text-h6">Response - Important</div>
+                  <div class="text-h6">Onchain Address</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-input v-model="swapBtcToLn.response.address" type="textarea" readonly
+                  @click="$event.target.select()" />
               </q-card-section>
               <q-card-section>
-                Commitment - {{ swapBtcToLn.response.commitment }}
+                <q-btn outline @click="copyBtcToLnBtcAddress" label="Copy Address" color="primary"></q-btn>
               </q-card-section>
               <q-card-section>
-                Secret Access Key - {{ swapBtcToLn.response.secret_access_key }}
+                <q-input v-model="swapBtcToLn.response.commitment" type="textarea" readonly
+                  @click="$event.target.select()" />
               </q-card-section>
-              <q-card-section>
-                Signature - {{ swapBtcToLn.response.signature }}
-              </q-card-section>
-              {% endraw %}
             </q-card>
           </q-dialog>
         </div>
@@ -221,20 +135,10 @@
     </q-card>
   </div>
   <div class="q-pa-md full-width">
-    <q-table
+    <q-table title="Swaps Lightning -> BTC" :data="rowsLnToBtc" :columns="columnsLnToBtc" row-key="name" />
-      title="Swaps Lightning -> BTC"
-      :data="rowsLnToBtc"
-      :columns="columnsLnToBtc"
-      row-key="name"
-    />
   </div>
   <div class="q-pa-md full-width">
-    <q-table
+    <q-table title="Swaps BTC -> Lightning" :data="rowsBtcToLn" :columns="columnsBtcToLn" row-key="name" />
-      title="Swaps BTC -> Lightning"
-      :data="rowsBtcToLn"
-      :columns="columnsBtcToLn"
-      row-key="name"
-    />
   </div>
 </div>
 {% endblock %} {% block scripts %} {{ window_vars(user) }}
@@ -272,8 +176,8 @@
             align: 'left',
             field: 'fee_sats'
           },
-          {name: 'txid', label: 'Tx Id', align: 'left', field: 'txid'},
+          { name: 'txid', label: 'Tx Id', align: 'left', field: 'txid' },
-          {name: 'tx_hex', label: 'Tx Hex', align: 'left', field: 'tx_hex'},
+          { name: 'tx_hex', label: 'Tx Hex', align: 'left', field: 'tx_hex' },
           {
             name: 'created_at',
             label: 'Created at',
@@ -300,7 +204,7 @@
           {
             name: 'secret_access_key',
             align: 'left',
-            label: 'Onchain Address',
+            label: 'Secret Access Key',
             field: 'secret_access_key'
           },
           {
@@ -443,6 +347,9 @@
       copyLnInvoice() {
         Quasar.utils.copyToClipboard(this.swapLnToBtc.response)
       },
+      copyBtcToLnBtcAddress() {
+        Quasar.utils.copyToClipboard(this.swapBtcToLn.response.address)
+      },
       sendLnToBtc() {
         var self = this
         axios