Feat: Adds wallet icon/color select (#2917)

lnbits/core/crud/wallets.py

@@ -161,4 +161,4 @@ async def get_wallet_for_key(
 async def get_total_balance(conn: Optional[Connection] = None):
     result = await (conn or db).execute("SELECT SUM(balance) as balance FROM balances")
     row = result.mappings().first()
-    return row.get("balance", 0)
+    return row.get("balance", 0) or 0

lnbits/core/migrations.py

@@ -692,3 +692,10 @@ async def m030_add_user_api_tokens_column(db: Connection):
         ALTER TABLE accounts ADD COLUMN access_control_list TEXT
         """
     )
+
+
+async def m031_add_color_and_icon_to_wallets(db: Connection):
+    """
+    Adds icon and color columns to wallets.
+    """
+    await db.execute("ALTER TABLE wallets ADD COLUMN extra TEXT")

lnbits/core/models/wallets.py

@@ -23,6 +23,11 @@ class BaseWallet(BaseModel):
     balance_msat: int
 
 
+class WalletExtra(BaseModel):
+    icon: str = "flash_on"
+    color: str = "primary"
+
+
 class Wallet(BaseModel):
     id: str
     user: str
@@ -34,6 +39,7 @@ class Wallet(BaseModel):
     updated_at: datetime = Field(default_factory=lambda: datetime.now(timezone.utc))
     currency: Optional[str] = None
     balance_msat: int = Field(default=0, no_database=True)
+    extra: WalletExtra = WalletExtra()
 
     @property
     def balance(self) -> int:

lnbits/core/templates/core/wallet.html

@@ -206,11 +206,29 @@
         {% else %}
         <div v-if="!mobileSimple" class="col-12 col-md-5 q-gutter-y-md">
           <q-card>
-            <q-card-section>
-              <h6 class="text-subtitle1 q-mt-none q-mb-sm">
-                {{ SITE_TITLE }} Wallet:
-                <strong><em v-text="g.wallet.name"></em></strong>
-              </h6>
+            <q-card-section class="q-pb-xs">
+              <div class="row items-center">
+                <q-avatar
+                  size="lg"
+                  :icon="g.wallet.extra.icon"
+                  :text-color="$q.dark.isActive ? 'black' : 'grey-3'"
+                  :color="g.wallet.extra.color"
+                >
+                </q-avatar>
+                <q-btn
+                  @click="icon.show = true"
+                  round
+                  color="grey-5"
+                  text-color="black"
+                  size="xs"
+                  icon="add"
+                  style="position: relative; left: -20px; bottom: -10px"
+                ></q-btn>
+                <div class="text-subtitle1 q-mt-none q-mb-none">
+                  {{ SITE_TITLE }} Wallet:
+                  <strong><em v-text="g.wallet.name"></em></strong>
+                </div>
+              </div>
             </q-card-section>
             <q-card-section class="q-pa-none">
               <q-separator></q-separator>
@@ -388,6 +406,50 @@
         </div>
       </div>
 
+      <q-dialog v-model="icon.show" position="top">
+        <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+          <q-form @submit="setIcon" class="q-gutter-md">
+            <div class="q-gutter-sm q-pa-sm flex flex-wrap justify-center">
+              <!-- Loop through all icons -->
+              <q-btn
+                v-for="(thisIcon, index) in icon.options"
+                :key="index"
+                @click="setSelectedIcon(thisIcon)"
+                round
+                text-color="black"
+                :color="icon.data.icon === thisIcon ? icon.data.color || 'primary' : 'grey-5'"
+                size="md"
+                :icon="thisIcon"
+                class="q-mb-sm"
+              ></q-btn>
+            </div>
+            <div class="q-pa-sm flex justify-between items-center">
+              <div class="flex q-pl-lg">
+                <!-- Color options -->
+                <q-btn
+                  v-for="(color, index) in icon.colorOptions"
+                  :key="'color-' + index"
+                  @click="setSelectedColor(color)"
+                  round
+                  :color="color"
+                  size="xs"
+                  style="width: 24px; height: 24px; min-width: 24px; padding: 0"
+                  class="q-mr-xs"
+                ></q-btn>
+              </div>
+              <q-btn
+                unelevated
+                color="primary"
+                :disable="!icon.data.icon"
+                type="submit"
+              >
+                Save Icon
+              </q-btn>
+            </div>
+          </q-form>
+        </q-card>
+      </q-dialog>
+
       <q-dialog
         v-model="receive.show"
         position="top"

lnbits/core/views/wallet_api.py

@@ -59,6 +59,8 @@ async def api_update_wallet_name(
 @wallet_router.patch("")
 async def api_update_wallet(
     name: Optional[str] = Body(None),
+    icon: Optional[str] = Body(None),
+    color: Optional[str] = Body(None),
     currency: Optional[str] = Body(None),
     key_info: WalletTypeInfo = Depends(require_admin_key),
 ) -> Wallet:
@@ -66,6 +68,8 @@ async def api_update_wallet(
     if not wallet:
         raise HTTPException(status_code=HTTPStatus.NOT_FOUND, detail="Wallet not found")
     wallet.name = name or wallet.name
+    wallet.extra.icon = icon or wallet.extra.icon
+    wallet.extra.color = color or wallet.extra.color
     wallet.currency = currency if currency is not None else wallet.currency
     await update_wallet(wallet)
     return wallet