Custom CSS on SatsPay server working!:)

lnbits/extensions/satspay/crud.py

@@ -2,8 +2,6 @@ from typing import List, Optional
 
 import httpx
 
-from loguru import logger
-
 from lnbits.core.services import create_invoice
 from lnbits.core.views.api import api_payment
 from lnbits.helpers import urlsafe_short_hash
@@ -14,7 +12,6 @@ from ..watchonly.crud import get_config, get_fresh_address
 from . import db
 from .models import Charges, CreateCharge, SatsPaySettings
 
-
 ###############CHARGES##########################
 
 
@@ -96,14 +93,12 @@ async def get_charges(user: str) -> List[Charges]:
     )
     return [Charges.from_row(row) for row in rows]
 
+
 async def get_settings(user: str) -> SatsPaySettings:
     row = await db.fetchone(
         """SELECT * FROM satspay.settings WHERE "user" = ?""",
         (user,),
     )
-    logger.debug('Settings data')
-    logger.debug(row)
-
     if row:
         return SatsPaySettings.from_row(row)
     else:
@@ -158,10 +153,7 @@ async def save_settings(user: str, data: SatsPaySettings):
             """
             UPDATE satspay.settings SET custom_css = ? WHERE user = ?
             """,
-            (
+            (data.custom_css, user),
-                data.custom_css,
-                user
-            ),
         )
     else:
         await db.execute(

lnbits/extensions/satspay/migrations.py

@@ -27,6 +27,7 @@ async def m001_initial(db):
     """
     )
 
+
 async def m002_add_settings_table(db):
     """
     Settings table

lnbits/extensions/satspay/models.py

@@ -55,6 +55,7 @@ class Charges(BaseModel):
         else:
             return False
 
+
 class SatsPaySettings(BaseModel):
     custom_css: str = Query(None)
 

lnbits/extensions/satspay/templates/satspay/display.html

@@ -289,7 +289,12 @@
   </div>
   <div class="col-lg- 4 col-md-3 col-sm-1"></div>
 </div>
-
+{% endblock %} {% block styles %}
+<link
+  href="/satspay/css/{{ charge_data.id }}"
+  rel="stylesheet"
+  type="text/css"
+/>
 {% endblock %} {% block scripts %}
 
 <script src="https://mempool.space/mempool.js"></script>
@@ -302,6 +307,7 @@
     mixins: [windowMixin],
     data() {
       return {
+        customCss: '',
         charge: JSON.parse('{{charge_data | tojson}}'),
         mempool_endpoint: '{{mempool_endpoint}}',
         pendingFunds: 0,
@@ -327,6 +333,17 @@
           }
         )
       },
+      getCustomCss: async function () {
+        try {
+          const {data} = await LNbits.api.request(
+            'GET',
+            `/satspay/api/v1/settings/css/${this.charge.id}`
+          )
+          this.customCss = data
+        } catch (error) {
+          LNbits.utils.notifyApiError(error)
+        }
+      },
       checkBalances: async function () {
         if (this.charge.hasStaleBalance) return
         try {
@@ -428,6 +445,7 @@
       }
     },
     created: async function () {
+      await this.getCustomCss()
       if (this.charge.lnbitswallet) this.payInvoice()
       else this.payOnchain()
       await this.checkBalances()

lnbits/extensions/satspay/templates/satspay/index.html

@@ -9,10 +9,12 @@
           >New charge
         </q-btn>
 
-          <q-btn unelevated color="primary" @click="getSettings();formDialogSettings.show = true"
+        <q-btn
+          unelevated
+          color="primary"
+          @click="getSettings();formDialogSettings.show = true"
           >SatsPay settings
         </q-btn>
-
       </q-card-section>
     </q-card>
 
@@ -395,7 +397,7 @@
     </q-card>
   </q-dialog>
 
-<q-dialog v-model="formDialogSettings.show" position="top">
+  <q-dialog v-model="formDialogSettings.show" position="top">
     <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
       <q-form @submit="sendFormDataSettings" class="q-gutter-md">
         <q-input
@@ -405,15 +407,12 @@
           type="textarea"
           label="Custom CSS"
         >
-            <q-tooltip>Custom CSS to apply styles to your SatsPay invoice</q-tooltip>
+          <q-tooltip
+            >Custom CSS to apply styles to your SatsPay invoice</q-tooltip
+          >
         </q-input>
         <div class="row q-mt-lg">
-          <q-btn
+          <q-btn unelevated color="primary" type="submit">Save Settings</q-btn>
-            unelevated
-            color="primary"
-            type="submit"
-            >Save Settings</q-btn
-          >
           <q-btn @click="cancelSettings" flat color="grey" class="q-ml-auto"
             >Cancel</q-btn
           >
@@ -533,16 +532,16 @@
             amount: null
           }
         },
-      formDialogSettings: {
+        formDialogSettings: {
           show: false,
           data: {
-            custom_css: '',
+            custom_css: ''
-            }
+          }
         }
       }
     },
     methods: {
-      cancelSettings: function(data) {
+      cancelSettings: function (data) {
         this.formDialogCharge.data.custom_css = ''
         this.formDialogSettings.show = false
       },
@@ -616,14 +615,14 @@
         }
       },
 
-    getSettings: async function () {
+      getSettings: async function () {
         try {
           const {data} = await LNbits.api.request(
             'GET',
             '/satspay/api/v1/settings',
             this.g.user.wallets[0].inkey
           )
-            console.log('Settings data', data)
+          console.log('Settings data', data)
           this.formDialogSettings.data = data
         } catch (error) {
           LNbits.utils.notifyApiError(error)
@@ -707,7 +706,7 @@
         }
       },
       saveSettings: async function (wallet, data) {
-          console.log('wallet', wallet)
+        console.log('wallet', wallet)
         try {
           const resp = await LNbits.api.request(
             'POST',

lnbits/extensions/satspay/views.py

@@ -1,5 +1,6 @@
 from http import HTTPStatus
 
+from fastapi import Response
 from fastapi.param_functions import Depends
 from fastapi.templating import Jinja2Templates
 from starlette.exceptions import HTTPException
@@ -11,7 +12,7 @@ from lnbits.core.models import User
 from lnbits.decorators import check_user_exists
 
 from . import satspay_ext, satspay_renderer
-from .crud import get_charge, get_charge_config
+from .crud import get_charge, get_charge_config, get_settings
 
 templates = Jinja2Templates(directory="templates")
 
@@ -45,3 +46,18 @@ async def display(request: Request, charge_id: str):
             "mempool_endpoint": mempool_endpoint,
         },
     )
+
+
+@satspay_ext.get("/css/{charge_id}")
+async def display(charge_id: str, response: Response):
+    charge = await get_charge(charge_id)
+    if not charge:
+        raise HTTPException(
+            status_code=HTTPStatus.NOT_FOUND, detail="Charge link does not exist."
+        )
+    wallet = await get_wallet(charge.lnbitswallet)
+    settings = await get_settings(wallet.user)
+    if settings:
+        return Response(content=settings.custom_css, media_type="text/css")
+
+    return None

lnbits/extensions/satspay/views_api.py

@@ -1,10 +1,11 @@
 from http import HTTPStatus
 
-from loguru import logger
 import httpx
 from fastapi.params import Depends
+from loguru import logger
 from starlette.exceptions import HTTPException
 
+from lnbits.core.crud import get_wallet
 from lnbits.decorators import (
     WalletTypeInfo,
     get_key_type,
@@ -19,9 +20,9 @@ from .crud import (
     delete_charge,
     get_charge,
     get_charges,
-    update_charge,
-    save_settings,
     get_settings,
+    save_settings,
+    update_charge,
 )
 from .helpers import compact_charge
 from .models import CreateCharge, SatsPaySettings
@@ -139,6 +140,7 @@ async def api_charge_balance(charge_id):
         **{"paid": charge.paid},
     }
 
+
 #############################CHARGES##########################
 
 
@@ -146,18 +148,15 @@ async def api_charge_balance(charge_id):
 async def api_settings_save(
     data: SatsPaySettings, wallet: WalletTypeInfo = Depends(require_invoice_key)
 ):
-    logger.debug("wallet.wallet.user")
-    logger.debug(wallet.wallet.user)
     await save_settings(user=wallet.wallet.user, data=data)
     return True
 
 
 @satspay_ext.get("/api/v1/settings")
 async def api_settings_retrieve(wallet: WalletTypeInfo = Depends(get_key_type)):
-    logger.debug('HERHEHRHEHRHEHR')
     try:
         return await get_settings(wallet.wallet.user)
     except HTTPException:
-        logger.error('Error loading satspay settings')
+        logger.error("Error loading satspay settings")
         logger.error(HTTPException)
         return ""