Custom CSS on SatsPay server working!:)

lnbits/extensions/satspay/crud.py

@@ -3,8 +3,6 @@ from typing import List, Optional
 
 from loguru import logger
 
-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 . import db
 from .helpers import fetch_onchain_balance
 from .models import Charges, CreateCharge, SatsPaySettings
 
-
 ###############CHARGES##########################
 
 
@@ -102,14 +99,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:
@@ -150,10 +145,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/models.py

@@ -72,6 +72,7 @@ class Charges(BaseModel):
 
     def must_call_webhook(self):
         return self.webhook and self.paid and self.config.webhook_success == False
+
 class SatsPaySettings(BaseModel):
     custom_css: str = Query(None)
 

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

@@ -297,7 +297,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>
@@ -310,6 +315,7 @@
     mixins: [windowMixin],
     data() {
       return {
+        customCss: '',
         charge: JSON.parse('{{charge_data | tojson}}'),
         mempoolEndpoint: '{{mempool_endpoint}}',
         network: '{{network}}',
@@ -335,6 +341,27 @@
       }
     },
     methods: {
+      startPaymentNotifier() {
+        this.cancelListener()
+        if (!this.lnbitswallet) return
+        this.cancelListener = LNbits.events.onInvoicePaid(
+          this.wallet,
+          payment => {
+            this.checkInvoiceBalance()
+          }
+        )
+      },
+      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.payment_request && this.charge.hasOnchainStaleBalance)
           return
@@ -438,6 +465,7 @@
       }
     },
     created: async function () {
+      await this.getCustomCss()
       if (this.charge.payment_request) this.payInvoice()
       else this.payOnchain()
 

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>
 
@@ -400,7 +402,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
@@ -410,15 +412,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
-            unelevated
-            color="primary"
-            type="submit"
-            >Save Settings</q-btn
-          >
+          <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
           >
@@ -539,16 +538,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
       },
@@ -624,14 +623,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)
@@ -716,7 +715,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.decorators import check_user_exists
 from lnbits.extensions.satspay.helpers import public_charge
 
 from . import satspay_ext, satspay_renderer
-from .crud import get_charge
+from .crud import get_charge, get_charge_config, get_settings
 
 templates = Jinja2Templates(directory="templates")
 
@@ -40,3 +41,18 @@ async def display(request: Request, charge_id: str):
             "network": charge.config.network,
         },
     )
+
+
+@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,11 +1,12 @@
 import json
 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,
@@ -20,9 +21,9 @@ from .crud import (
     delete_charge,
     get_charge,
     get_charges,
-    update_charge,
-    save_settings,
     get_settings,
+    save_settings,
+    update_charge,
 )
 from .helpers import call_webhook, public_charge
 from .helpers import compact_charge
@@ -143,6 +144,7 @@ async def api_charge_balance(charge_id):
     
     return {**public_charge(charge)}
 
+
 #############################CHARGES##########################
 
 
@@ -150,18 +152,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 ""