feat: wallet featured button (#3740)

lnbits/helpers.py

@@ -98,6 +98,9 @@ def template_renderer(additional_folders: list | None = None) -> Jinja2Templates
         "LNBITS_SERVICE_FEE_WALLET": settings.lnbits_service_fee_wallet,
         "LNBITS_SHOW_HOME_PAGE_ELEMENTS": settings.lnbits_show_home_page_elements,
         "LNBITS_THEME_OPTIONS": settings.lnbits_theme_options,
+        "WALLET_FEATURED_BUTTON_LABEL": settings.lnbits_wallet_featured_button_label,
+        "WALLET_FEATURED_BUTTON_URL": settings.lnbits_wallet_featured_button_url,
+        "WALLET_FEATURED_BUTTON_ICON": settings.lnbits_wallet_featured_button_icon,
         "LNBITS_VERSION": settings.version,
         "USE_CUSTOM_LOGO": settings.lnbits_custom_logo,
         "LNBITS_DEFAULT_REACTION": settings.lnbits_default_reaction,

lnbits/settings.py

@@ -252,6 +252,11 @@ class ThemesSettings(LNbitsSettings):
     )
     lnbits_show_home_page_elements: bool = Field(default=True)
     lnbits_default_wallet_name: str = Field(default="LNbits wallet")
+
+    lnbits_wallet_featured_button_label: str | None = Field(default=None)
+    lnbits_wallet_featured_button_url: str | None = Field(default=None)
+    lnbits_wallet_featured_button_icon: str | None = Field(default=None)
+
     lnbits_custom_badge: str | None = Field(default=None)
     lnbits_custom_badge_color: str = Field(default="warning")
     lnbits_theme_options: list[str] = Field(

lnbits/static/i18n/en.js

@@ -658,6 +658,15 @@ window.localisation.en = {
   ui_site_description_hint: 'Use plain text, Markdown, or raw HTML',
   ui_default_wallet_name: 'Default Wallet Name',
   ui_default_theme: 'Default Theme',
+  wallet_featured_button_label: 'Wallet Featured Button Label',
+  wallet_featured_button_label_hint:
+    'Show featured button on the wallet homepage',
+  wallet_featured_button_url: 'Featured Button URL',
+  wallet_featured_button_url_hint:
+    'On click the button will open this URL. Leave empty to hide the button.',
+  wallet_featured_button_icon: 'Featured Button Icon',
+  wallet_featured_button_icon_hint:
+    'Icon shown on the featured button (check quasar icons)',
   lnbits_wallet: 'LNbits wallet',
   denomination: 'Denomination',
   denomination_hint: 'The name for the FakeWallet token',

lnbits/templates/components/admin/site_customisation.vue

@@ -86,6 +86,42 @@
           ></q-input>
         </div>
       </div>
+      <br />
+      <div class="row q-col-gutter-md">
+        <div class="col-12 col-md-4">
+          <p>
+            <span v-text="$t('wallet_featured_button_label')"></span>
+          </p>
+          <q-input
+            filled
+            type="text"
+            v-model="formData.lnbits_wallet_featured_button_label"
+            label="Loop to Onchain"
+            :hint="$t('wallet_featured_button_label_hint')"
+          ></q-input>
+        </div>
+        <div class="col-12 col-md-4">
+          <p><span v-text="$t('wallet_featured_button_url')"></span></p>
+          <q-input
+            filled
+            type="text"
+            v-model="formData.lnbits_wallet_featured_button_url"
+            label="/boltz"
+            :hint="$t('wallet_featured_button_url_hint')"
+          ></q-input>
+        </div>
+        <div class="col-12 col-md-4">
+          <p><span v-text="$t('wallet_featured_button_icon')"></span></p>
+          <q-input
+            filled
+            type="text"
+            v-model="formData.lnbits_wallet_featured_button_icon"
+            label="bolt"
+            :hint="$t('wallet_featured_button_icon_hint')"
+          ></q-input>
+        </div>
+      </div>
+
       <div class="row q-col-gutter-md q-mt-md">
         <div class="col-12 col-md-6">
           <p><span v-text="$t('ui_custom_badge')"></span></p>

lnbits/templates/pages/wallet.vue

@@ -171,6 +171,19 @@
                   ><span v-text="$t('camera_tooltip')"></span
                 ></q-tooltip>
               </q-btn>
+              <div
+                v-if="WALLET_FEATURED_BUTTON_URL"
+                class="float-right q-mt-sm q-ml-sm"
+              >
+                <q-btn
+                  color="primary"
+                  :label="WALLET_FEATURED_BUTTON_LABEL"
+                  :icon="WALLET_FEATURED_BUTTON_ICON || undefined"
+                  size="sm"
+                  :to="WALLET_FEATURED_BUTTON_URL"
+                >
+                </q-btn>
+              </div>
               <lnbits-update-balance
                 v-if="$q.screen.gt.md"
                 :wallet_id="this.g.wallet.id"