Merge pull request #1266 from lnbits/icontiles

Swap out material icons for extensions for actual logo tiles

lnbits/core/templates/core/extensions.html

@@ -23,14 +23,55 @@
   >
     <q-card>
       <q-card-section>
-        <q-icon
+        <div class="row">
-          :name="extension.icon"
+          <div class="col-3">
-          color="grey-5"
+            <q-img
-          style="font-size: 4rem"
+              :src="extension.tile"
-        ></q-icon>
+              spinner-color="white"
-        {% raw %}
+              style="max-width: 100%"
-        <h5 class="q-mt-lg q-mb-xs">{{ extension.name }}</h5>
+            ></q-img>
-        <small>{{ extension.shortDescription }} </small>{% endraw %}
+          </div>
+          <div class="col-9 q-pl-sm">
+            {% raw %}
+            <div class="text-h5 gt-sm q-mt-sm q-mb-xs">
+              {{ extension.name }}
+            </div>
+            <div
+              class="text-subtitle2 gt-sm"
+              style="font-size: 11px; height: 34px"
+            >
+              {{ extension.shortDescription }}
+            </div>
+            <div class="text-subtitle1 lt-md q-mt-sm q-mb-xs">
+              {{ extension.name }}
+            </div>
+            <div
+              class="text-subtitle2 lt-md"
+              style="font-size: 9px; height: 34px"
+            >
+              {{ extension.shortDescription }}
+            </div>
+            {% endraw %}
+          </div>
+        </div>
+      </q-card-section>
+      <q-card-section>
+        <div>
+          <q-rating
+            class="gt-sm"
+            disable
+            size="2em"
+            :max="5"
+            color="primary"
+          ></q-rating
+          ><q-rating
+            class="lt-md"
+            size="1.5em"
+            :max="5"
+            color="primary"
+          ></q-rating
+          ><q-tooltip>Ratings coming soon</q-tooltip>
+        </div>
       </q-card-section>
       <q-separator></q-separator>
       <q-card-actions>

lnbits/extensions/bleskomat/config.json

@@ -1,6 +1,6 @@
 {
     "name": "Bleskomat",
     "short_description": "Connect a Bleskomat ATM to an lnbits",
-    "icon": "money",
+    "tile": "/bleskomat/static/image/bleskomat.png",
     "contributors": ["chill117"]
 }

lnbits/extensions/boltcards/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Bolt Cards",
   "short_description": "Self custody Bolt Cards with one time LNURLw",
-  "icon": "payment",
+  "tile": "/boltcards/static/image/boltcard.png",
   "contributors": ["iwarpbtc", "arcbtc", "leesalminen"]
 }

lnbits/extensions/boltz/__init__.py

@@ -1,6 +1,7 @@
 import asyncio
 
 from fastapi import APIRouter
+from fastapi.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -15,6 +16,14 @@ def boltz_renderer():
     return template_renderer(["lnbits/extensions/boltz/templates"])
 
 
+boltz_static_files = [
+    {
+        "path": "/boltz/static",
+        "app": StaticFiles(directory="lnbits/extensions/boltz/static"),
+        "name": "boltz_static",
+    }
+]
+
 from .tasks import check_for_pending_swaps, wait_for_paid_invoices
 from .views import *  # noqa
 from .views_api import *  # noqa

lnbits/extensions/boltz/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Boltz",
   "short_description": "Perform onchain/offchain swaps",
-  "icon": "swap_horiz",
+  "tile": "/boltz/static/image/boltz.png",
   "contributors": ["dni"]
 }

lnbits/extensions/cashu/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Cashu",
   "short_description": "Ecash mint and wallet",
-  "icon": "account_balance",
+  "tile": "/cashu/static/image/cashu.png",
   "contributors": ["calle", "vlad", "arcbtc"],
   "hidden": false
 }

lnbits/extensions/copilot/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Streamer Copilot",
   "short_description": "Video tips/animations/webhooks",
-  "icon": "face",
+	"tile": "/copilot/static/bitcoin-streaming.png",
   "contributors": [
     "arcbtc"
   ]

lnbits/extensions/discordbot/config.json

@@ -1,6 +1,6 @@
 {
     "name": "Discord Bot",
     "short_description": "Generate users and wallets",
-    "icon": "person_add",
+    "tile": "/discordbot/static/image/discordbot.png",
     "contributors": ["bitcoingamer21"]
 }

lnbits/extensions/events/__init__.py

@@ -1,6 +1,7 @@
 import asyncio
 
 from fastapi import APIRouter
+from fastapi.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -11,6 +12,14 @@ db = Database("ext_events")
 
 events_ext: APIRouter = APIRouter(prefix="/events", tags=["Events"])
 
+events_static_files = [
+    {
+        "path": "/events/static",
+        "app": StaticFiles(packages=[("lnbits", "extensions/events/static")]),
+        "name": "events_static",
+    }
+]
+
 
 def events_renderer():
     return template_renderer(["lnbits/extensions/events/templates"])

lnbits/extensions/events/config.json

@@ -1,6 +1,6 @@
 {
 	"name": "Events",
 	"short_description": "Sell and register event tickets",
-	"icon": "local_activity",
+	"tile": "/events/static/image/events.png",
 	"contributors": ["benarc"]
 }

lnbits/extensions/example/example.config.json

@@ -1,6 +1,6 @@
 {
   "name": "Build your own!!",
   "short_description": "Join us, make an extension",
-  "icon": "info",
+  "tile": "/cashu/static/image/tile.png",
   "contributors": ["github_username"]
 }

lnbits/extensions/gerty/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Gerty",
   "short_description": "Desktop bitcoin Assistant",
-  "icon": "sentiment_satisfied",
+	"tile": "/gerty/static/gerty.png",
   "contributors": ["arcbtc", "blackcoffeebtc"]
 }

lnbits/extensions/hivemind/__init__.py

@@ -1,4 +1,5 @@
 from fastapi import APIRouter
+from fastapi.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -12,4 +13,12 @@ def hivemind_renderer():
     return template_renderer(["lnbits/extensions/hivemind/templates"])
 
 
+hivemind_static_files = [
+    {
+        "path": "/hivemind/static",
+        "app": StaticFiles(packages=[("lnbits", "extensions/hivemind/static")]),
+        "name": "hivemind_static",
+    }
+]
+
 from .views import *  # noqa

lnbits/extensions/hivemind/config.json

@@ -1,6 +1,6 @@
 {
     "name": "Hivemind",
     "short_description": "Make cheap talk expensive!",
-    "icon": "batch_prediction",
+	"tile": "/hivemind/static/image/hivemind.png",
     "contributors": ["fiatjaf"]
 }

lnbits/extensions/invoices/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Invoices",
   "short_description": "Create invoices for your clients.",
-  "icon": "request_quote",
+	"tile": "/invoices/static/image/invoices.png",
   "contributors": ["leesalminen"]
 }

lnbits/extensions/jukebox/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Spotify Jukebox",
   "short_description": "Spotify jukebox middleware",
-  "icon": "radio",
+	"tile": "/jukebox/static/image/jukebox.png",
   "contributors": ["benarc"]
 }

lnbits/extensions/livestream/config.json

@@ -1,7 +1,7 @@
 {
   "name": "DJ Livestream",
   "short_description": "Sell tracks and split revenue (lnurl-pay)",
-  "icon": "speaker",
+  "tile": "/livestream/static/image/livestream.png",
   "contributors": [
     "fiatjaf",
     "cryptograffiti"

lnbits/extensions/lnaddress/__init__.py

@@ -1,6 +1,7 @@
 import asyncio
 
 from fastapi import APIRouter
+from starlette.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -10,6 +11,14 @@ db = Database("ext_lnaddress")
 
 lnaddress_ext: APIRouter = APIRouter(prefix="/lnaddress", tags=["lnaddress"])
 
+lnaddress_static_files = [
+    {
+        "path": "/lnaddress/static",
+        "app": StaticFiles(directory="lnbits/extensions/lnaddress/static"),
+        "name": "lnaddress_static",
+    }
+]
+
 
 def lnaddress_renderer():
     return template_renderer(["lnbits/extensions/lnaddress/templates"])

lnbits/extensions/lnaddress/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Lightning Address",
   "short_description": "Sell LN addresses for your domain",
-  "icon": "alternate_email",
+	"tile": "/lnaddress/static/image/lnaddress.png",
   "contributors": ["talvasconcelos"]
 }

lnbits/extensions/lndhub/__init__.py

@@ -1,4 +1,5 @@
 from fastapi import APIRouter
+from starlette.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -7,6 +8,14 @@ db = Database("ext_lndhub")
 
 lndhub_ext: APIRouter = APIRouter(prefix="/lndhub", tags=["lndhub"])
 
+lndhub_static_files = [
+    {
+        "path": "/lndhub/static",
+        "app": StaticFiles(directory="lnbits/extensions/lndhub/static"),
+        "name": "lndhub_static",
+    }
+]
+
 
 def lndhub_renderer():
     return template_renderer(["lnbits/extensions/lndhub/templates"])

lnbits/extensions/lndhub/config.json

@@ -1,6 +1,6 @@
 {
     "name": "LndHub",
     "short_description": "Access lnbits from BlueWallet or Zeus",
-    "icon": "navigation",
+	"tile": "/lndhub/static/image/lndhub.png",
     "contributors": ["fiatjaf"]
 }

lnbits/extensions/lnticket/__init__.py

@@ -2,6 +2,7 @@ import asyncio
 import json
 
 from fastapi import APIRouter
+from starlette.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -11,6 +12,14 @@ db = Database("ext_lnticket")
 
 lnticket_ext: APIRouter = APIRouter(prefix="/lnticket", tags=["LNTicket"])
 
+lnticket_static_files = [
+    {
+        "path": "/lnticket/static",
+        "app": StaticFiles(directory="lnbits/extensions/lnticket/static"),
+        "name": "lnticket_static",
+    }
+]
+
 
 def lnticket_renderer():
     return template_renderer(["lnbits/extensions/lnticket/templates"])

lnbits/extensions/lnticket/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Support Tickets",
   "short_description": "LN support ticket system",
-  "icon": "contact_support",
+	"tile": "/lnticket/static/image/lntickets.png",
   "contributors": ["benarc"]
 }

lnbits/extensions/lnurldevice/__init__.py

@@ -1,6 +1,7 @@
 import asyncio
 
 from fastapi import APIRouter
+from starlette.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -10,6 +11,14 @@ db = Database("ext_lnurldevice")
 
 lnurldevice_ext: APIRouter = APIRouter(prefix="/lnurldevice", tags=["lnurldevice"])
 
+lnurldevice_static_files = [
+    {
+        "path": "/lnurldevice/static",
+        "app": StaticFiles(directory="lnbits/extensions/lnurldevice/static"),
+        "name": "lnurldevice_static",
+    }
+]
+
 
 def lnurldevice_renderer():
     return template_renderer(["lnbits/extensions/lnurldevice/templates"])

lnbits/extensions/lnurldevice/config.json

@@ -1,6 +1,6 @@
 {
   "name": "LNURLDevice",
   "short_description": "For offline LNURL devices",
-  "icon": "point_of_sale",
+	"tile": "/lnurldevice/static/image/lnurldevice.png",
   "contributors": ["arcbtc"]
 }

lnbits/extensions/lnurlp/config.json

@@ -1,7 +1,7 @@
 {
   "name": "LNURLp",
   "short_description": "Make reusable LNURL pay links",
-  "icon": "receipt",
+	"tile": "/lnurlp/static/image/lnurl-pay.png",
   "contributors": [
     "arcbtc",
     "eillarra",

lnbits/extensions/nostrnip5/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Nostr NIP-5",
   "short_description": "Verify addresses for Nostr NIP-5",
-  "icon": "request_quote",
+	"tile": "/nostrnip5/static/image/nostrnip5.png",
   "contributors": ["leesalminen"]
 }

lnbits/extensions/offlineshop/config.json

@@ -1,7 +1,7 @@
 {
   "name": "OfflineShop",
   "short_description": "Receive payments for products offline!",
-  "icon": "nature_people",
+	"tile": "/offlineshop/static/image/offlineshop.png",
   "contributors": [
     "fiatjaf"
   ]

lnbits/extensions/paywall/__init__.py

@@ -1,4 +1,5 @@
 from fastapi import APIRouter
+from starlette.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -7,6 +8,14 @@ db = Database("ext_paywall")
 
 paywall_ext: APIRouter = APIRouter(prefix="/paywall", tags=["Paywall"])
 
+paywall_static_files = [
+    {
+        "path": "/paywall/static",
+        "app": StaticFiles(directory="lnbits/extensions/paywall/static"),
+        "name": "paywall_static",
+    }
+]
+
 
 def paywall_renderer():
     return template_renderer(["lnbits/extensions/paywall/templates"])

lnbits/extensions/paywall/config.json

@@ -1,6 +1,6 @@
 {
     "name": "Paywall",
     "short_description": "Create paywalls for content",
-    "icon": "policy",
+	"tile": "/paywall/static/image/paywall.png",
     "contributors": ["eillarra"]
 }

lnbits/extensions/satsdice/__init__.py

@@ -1,4 +1,5 @@
 from fastapi import APIRouter
+from starlette.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -7,6 +8,14 @@ db = Database("ext_satsdice")
 
 satsdice_ext: APIRouter = APIRouter(prefix="/satsdice", tags=["satsdice"])
 
+satsdice_static_files = [
+    {
+        "path": "/satsdice/static",
+        "app": StaticFiles(directory="lnbits/extensions/satsdice/static"),
+        "name": "satsdice_static",
+    }
+]
+
 
 def satsdice_renderer():
     return template_renderer(["lnbits/extensions/satsdice/templates"])

lnbits/extensions/satsdice/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Sats Dice",
   "short_description": "LNURL Satoshi dice",
-  "icon": "casino",
+	"tile": "/satsdice/static/image/satsdice.png",
   "contributors": ["arcbtc"]
 }

lnbits/extensions/satspay/config.json

@@ -1,6 +1,6 @@
 {
   "name": "SatsPay Server",
   "short_description": "Create onchain and LN charges",
-  "icon": "payment",
+	"tile": "/satspay/static/image/satspay.png",
   "contributors": ["arcbtc"]
 }

lnbits/extensions/scrub/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Scrub",
   "short_description": "Pass payments to LNURLp/LNaddress",
-  "icon": "send",
+	"tile": "/scrub/static/image/scrub.png",
   "contributors": ["arcbtc", "talvasconcelos"]
 }

lnbits/extensions/splitpayments/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Split Payments",
   "short_description": "Split incoming payments across wallets",
-  "icon": "call_split",
+	"tile": "/splitpayments/static/image/split-payments.png",
   "contributors": ["fiatjaf", "cryptograffiti"]
 }

lnbits/extensions/streamalerts/__init__.py

@@ -1,4 +1,5 @@
 from fastapi import APIRouter
+from fastapi.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -7,6 +8,14 @@ db = Database("ext_streamalerts")
 
 streamalerts_ext: APIRouter = APIRouter(prefix="/streamalerts", tags=["streamalerts"])
 
+streamalerts_static_files = [
+    {
+        "path": "/streamalerts/static",
+        "app": StaticFiles(directory="lnbits/extensions/streamalerts/static"),
+        "name": "streamalerts_static",
+    }
+]
+
 
 def streamalerts_renderer():
     return template_renderer(["lnbits/extensions/streamalerts/templates"])

lnbits/extensions/streamalerts/config.json

@@ -1,6 +1,6 @@
 {
     "name": "Stream Alerts",
     "short_description": "Bitcoin donations in stream alerts",
-    "icon": "notifications_active",
+	"tile": "/streamalerts/static/image/streamalerts.png",
     "contributors": ["Fittiboy"]
 }

lnbits/extensions/subdomains/__init__.py

@@ -1,6 +1,7 @@
 import asyncio
 
 from fastapi import APIRouter
+from fastapi.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -10,6 +11,14 @@ db = Database("ext_subdomains")
 
 subdomains_ext: APIRouter = APIRouter(prefix="/subdomains", tags=["subdomains"])
 
+subdomains_static_files = [
+    {
+        "path": "/subdomains/static",
+        "app": StaticFiles(directory="lnbits/extensions/subdomains/static"),
+        "name": "subdomains_static",
+    }
+]
+
 
 def subdomains_renderer():
     return template_renderer(["lnbits/extensions/subdomains/templates"])

lnbits/extensions/subdomains/config.json

@@ -1,6 +1,6 @@
 {
   "name": "Subdomains",
   "short_description": "Sell subdomains of your domain",
-  "icon": "domain",
+	"tile": "/subdomains/static/image/subdomains.png",
   "contributors": ["grmkris"]
 }

lnbits/extensions/tipjar/__init__.py

@@ -1,4 +1,5 @@
 from fastapi import APIRouter
+from fastapi.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -7,6 +8,14 @@ db = Database("ext_tipjar")
 
 tipjar_ext: APIRouter = APIRouter(prefix="/tipjar", tags=["tipjar"])
 
+tipjar_static_files = [
+    {
+        "path": "/tipjar/static",
+        "app": StaticFiles(directory="lnbits/extensions/tipjar/static"),
+        "name": "tipjar_static",
+    }
+]
+
 
 def tipjar_renderer():
     return template_renderer(["lnbits/extensions/tipjar/templates"])

lnbits/extensions/tipjar/config.json

@@ -1,6 +1,6 @@
 {
     "name": "Tip Jar",
     "short_description": "Accept Bitcoin donations, with messages attached!",
-    "icon": "favorite",
+	"tile": "/tipjar/static/image/tipjar.png",
     "contributors": ["Fittiboy"]
 }

lnbits/extensions/tpos/__init__.py

@@ -1,6 +1,7 @@
 import asyncio
 
 from fastapi import APIRouter
+from fastapi.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -10,6 +11,14 @@ db = Database("ext_tpos")
 
 tpos_ext: APIRouter = APIRouter(prefix="/tpos", tags=["TPoS"])
 
+tpos_static_files = [
+    {
+        "path": "/tpos/static",
+        "app": StaticFiles(directory="lnbits/extensions/tpos/static"),
+        "name": "tpos_static",
+    }
+]
+
 
 def tpos_renderer():
     return template_renderer(["lnbits/extensions/tpos/templates"])

lnbits/extensions/tpos/config.json

@@ -1,6 +1,6 @@
 {
   "name": "TPoS",
   "short_description": "A shareable PoS terminal!",
-  "icon": "dialpad",
+	"tile": "/tpos/static/image/tpos.png",
   "contributors": ["talvasconcelos", "arcbtc", "leesalminen"]
 }

lnbits/extensions/usermanager/__init__.py

@@ -1,4 +1,5 @@
 from fastapi import APIRouter
+from fastapi.staticfiles import StaticFiles
 
 from lnbits.db import Database
 from lnbits.helpers import template_renderer
@@ -7,6 +8,14 @@ db = Database("ext_usermanager")
 
 usermanager_ext: APIRouter = APIRouter(prefix="/usermanager", tags=["usermanager"])
 
+usermanager_static_files = [
+    {
+        "path": "/usermanager/static",
+        "app": StaticFiles(directory="lnbits/extensions/usermanager/static"),
+        "name": "usermanager_static",
+    }
+]
+
 
 def usermanager_renderer():
     return template_renderer(["lnbits/extensions/usermanager/templates"])

lnbits/extensions/usermanager/config.json

@@ -1,6 +1,6 @@
 {
     "name": "User Manager",
     "short_description": "Generate users and wallets",
-    "icon": "person_add",
+	"tile": "/usermanager/static/image/usermanager.png",
     "contributors": ["benarc"]
 }

lnbits/extensions/watchonly/config.json

@@ -1,7 +1,7 @@
 {
   "name": "Onchain Wallet",
   "short_description": "Onchain watch only wallets",
-  "icon": "visibility",
+	"tile": "/watchonly/static/bitcoin-wallet.png",
   "contributors": [
     "arcbtc",
     "motorina0"

lnbits/extensions/withdraw/config.json

@@ -1,6 +1,6 @@
 {
   "name": "LNURLw",
   "short_description": "Make LNURL withdraw links",
-  "icon": "crop_free",
+	"tile": "/withdraw/static/image/lnurl-withdraw.png",
   "contributors": ["arcbtc", "eillarra"]
 }

lnbits/helpers.py

@@ -17,7 +17,7 @@ class Extension(NamedTuple):
     is_admin_only: bool
     name: Optional[str] = None
     short_description: Optional[str] = None
-    icon: Optional[str] = None
+    tile: Optional[str] = None
     contributors: Optional[List[str]] = None
     hidden: bool = False
     migration_module: Optional[str] = None
@@ -63,7 +63,7 @@ class ExtensionManager:
                     is_admin_only,
                     config.get("name"),
                     config.get("short_description"),
-                    config.get("icon"),
+                    config.get("tile"),
                     config.get("contributors"),
                     config.get("hidden") or False,
                     config.get("migration_module"),

lnbits/static/js/base.js

@@ -126,7 +126,7 @@ window.LNbits = {
           'isAdminOnly',
           'name',
           'shortDescription',
-          'icon',
+          'tile',
           'contributors',
           'hidden'
         ],

lnbits/static/js/components.js

@@ -118,16 +118,15 @@ Vue.component('lnbits-extension-list', {
         :active="extension.isActive"
         tag="a" :href="[extension.url, '?usr=', user.id].join('')">
         <q-item-section side>
-          <q-avatar size="md"
+          <q-avatar size="md">
-            :color="(extension.isActive)
+            <q-img
-              ? (($q.dark.isActive) ? 'primary' : 'primary')
+              :src="extension.tile"
-              : 'grey-5'">
+              style="max-width:20px"
-            <q-icon :name="extension.icon" :size="($q.dark.isActive) ? '21px' : '20px'"
+            ></q-img>
-              :color="($q.dark.isActive) ? 'blue-grey-10' : 'grey-3'"></q-icon>
           </q-avatar>
         </q-item-section>
         <q-item-section>
-          <q-item-label lines="1">{{ extension.name }}</q-item-label>
+          <q-item-label lines="1">{{ extension.name }} </q-item-label>
         </q-item-section>
         <q-item-section side v-show="extension.isActive">
           <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>

lnbits/static/scss/base.scss

@@ -137,6 +137,10 @@ video {
     -moz-osx-font-smoothing: grayscale;
 }
 
+.q-rating__icon {
+    font-size: 1em;
+}
+
 // text-wrap
 .text-wrap {
     word-break: break-word;