Add an optional name

crud.py

@@ -43,6 +43,7 @@ async def create_charge(
         INSERT INTO satspay.charges (
             id,
             "user",
+            name,
             description,
             onchainwallet,
             onchainaddress,
@@ -59,11 +60,12 @@ async def create_charge(
             extra,
             custom_css
         )
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
         """,
         (
             charge_id,
             user,
+            data.name,
             data.description,
             data.onchainwallet,
             onchainaddress,

helpers.py

@@ -11,6 +11,7 @@
 def public_charge(charge: Charges):
     c = {
         "id": charge.id,
+        "name": charge.name,
         "description": charge.description,
         "onchainaddress": charge.onchainaddress,
         "payment_request": charge.payment_request,

migrations.py

@@ -112,3 +112,13 @@ async def m007_add_pending_column(db):
         )
     except OperationalError:
         pass
+
+
+async def m008_add_name_column(db):
+    """
+    Add 'name' column for storing the name of the charge
+    """
+    try:
+        await db.execute(f"ALTER TABLE satspay.charges ADD COLUMN name TEXT;")
+    except OperationalError:
+        pass

models.py

@@ -14,6 +14,7 @@
 class CreateCharge(BaseModel):
     onchainwallet: str = Query(None)
     lnbitswallet: str = Query(None)
+    name: str = Query(None)
     description: str = Query(...)
     webhook: str = Query(None)
     completelink: str = Query(None)
@@ -34,6 +35,7 @@ class ChargeConfig(BaseModel):
 
 class Charges(BaseModel):
     id: str
+    name: Optional[str]
     description: Optional[str]
     onchainwallet: Optional[str]
     onchainaddress: Optional[str]

static/js/components.js

@@ -32,6 +32,7 @@ Vue.component('satspay-paid', {
 
 Vue.component('satspay-show-qr', {
   props: ['charge-amount', 'type', 'value', 'href'],
+  mixins: [windowMixin],
   template: `
   <div>
     <div class="row justify-center q-mb-sm">

templates/satspay/display.html

@@ -3,7 +3,7 @@
   <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10">
     <q-card>
       <q-card-section class="text-center">
-        <div class="text-h4">SatsPay</div>
+        <div class="text-h4">${charge.name || 'LNbits SatsPay'}</div>
         <div class="text-subtitle1">${charge.description}</div>
       </q-card-section>
       <satspay-time-elapsed :charge="charge"></satspay-time-elapsed>

templates/satspay/index.html

@@ -366,6 +366,13 @@ <h6 class="text-subtitle1 q-my-none">
   <q-dialog v-model="formDialogCharge.show" position="top">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <q-form @submit="sendFormDataCharge" class="q-gutter-md">
+        <q-input
+          filled
+          dense
+          v-model.trim="formDialogCharge.data.name"
+          type="text"
+          label="Title (Default is 'LNbits SatsPay')"
+        ></q-input>
         <q-input
           filled
           dense
@@ -720,6 +727,7 @@ <h6 class="text-subtitle1 q-my-none">
         this.formDialogThemes.show = false
       },
       cancelCharge: function (data) {
+        this.formDialogCharge.data.description = null
         this.formDialogCharge.data.description = ''
         this.formDialogCharge.data.onchain = false
         this.formDialogCharge.data.onchainwallet = ''
@@ -877,8 +885,11 @@ <h6 class="text-subtitle1 q-my-none">
           )
 
           for (const charge of onchainActiveCharges) {
-            const fn = async () =>{
-              const api = charge.extra?.network === 'Testnet' ? addressesTestAPI : addressesAPI
+            const fn = async () => {
+              const api =
+                charge.extra?.network === 'Testnet'
+                  ? addressesTestAPI
+                  : addressesAPI
               return api.getAddressTxsUtxo({
                 address: charge.onchainaddress
               })