icon stuff

lnbits/core/models/wallets.py

@@ -33,8 +33,8 @@ 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)
-    icon: str
+    icon: str = "flash_on"
-    color: str
+    color: str = "primary"
 
     @property
     def balance(self) -> int:

lnbits/core/templates/core/wallet.html

@@ -36,50 +36,54 @@
         >
           <div class="row no-wrap q-gutter-md q-pr-md">
             <q-card
-              v-for="wallet in g.user.wallets"
+              v-for="wallets in g.user.wallets"
-              :key="wallet.id"
+              :key="wallets.id"
               class="wallet-list-card"
               bordered
               tag="a"
-              :href="wallet.url"
+              @click="getWallet(wallets)"
               :style="
-          g.wallet && g.wallet.id === wallet.id
+          wallet && wallet.id === wallets.id
             ? `border: 1px solid ${primaryColor}; width: 250px; text-decoration: none;`
             : 'width: 250px; text-decoration: none;'
         "
               :class="{
-            'active-wallet-card': g.wallet && g.wallet.id === wallet.id
+            'active-wallet-card': wallet && wallet.id === wallets.id
           }"
             >
               <q-card-section>
                 <div class="row items-center">
+
                   <q-avatar
-                    size="lg"
+                  size="lg"
-                    :color="
+                  :icon="
-                g.wallet && g.wallet.id === wallet.id
+              wallet && wallet.id === wallets.id
-                  ? $q.dark.isActive
+                ? wallet.icon
-                    ? 'primary'
+                : wallets.icon
-                    : 'primary'
+            "
-                  : 'grey-5'
+                  :text-color="$q.dark.isActive ? 'black' : 'grey-3'"
+                  :class="wallet && wallet.id === wallet.id
+                  ? ''
+                  : 'disabled'
               "
-                  >
+                  :color="
-                    <q-icon
+              wallet && wallet.id === wallets.id
-                      :name="g.wallet.icon"
+                ? wallet.color
-                      :size="$q.dark.isActive ? '21px' : '20px'"
+                : wallets.color
-                      :color="$q.dark.isActive ? 'black' : 'grey-3'"
+            "
-                    ></q-icon>
+                >
-                  </q-avatar>
+                </q-avatar>
                   <div
                     class="text-h6 q-pl-md"
                     :class="{
-                'text-bold': g.wallet && g.wallet.id === wallet.id
+                'text-bold': wallet && wallet.id === wallet.id
               }"
-                    v-text="wallet.name"
+                    v-text="wallets.name"
                   ></div>
                 </div>
                 <div class="row items-center q-pt-sm">
                   <h6 class="q-my-none text-no-wrap">
-                    <strong v-text="wallet.fsat"></strong>
+                    <strong v-text="wallets.fsat"></strong>
                     <small> {{LNBITS_DENOMINATION}}</small>
                   </h6>
                 </div>
@@ -102,7 +106,7 @@
                   <strong v-text="formattedBalance"></strong>
                   <small> {{LNBITS_DENOMINATION}}</small>
                   <lnbits-update-balance
-                    :wallet_id="this.g.wallet.id"
+                    :wallet_id="wallet.id"
                     @credit-value="handleBalanceUpdate"
                     class="q-ml-md"
                   ></lnbits-update-balance>
@@ -110,7 +114,7 @@
 
                 <div class="row">
                   <div class="col">
-                    <div v-if="g.wallet.currency">
+                    <div v-if="wallet.currency">
                       <span
                         class="text-h5 text-italic"
                         v-text="formattedFiatBalance"
@@ -182,7 +186,7 @@
           <q-card-section>
             <payment-list
               :update="updatePayments"
-              :wallet="this.g.wallet"
+              :wallet="wallet"
               :mobile-simple="mobileSimple"
             />
           </q-card-section>
@@ -200,15 +204,16 @@
             <div class="row items-center">
 
               <q-avatar
-              size="xl"
+              size="lg"
-              color="primary">
+              :icon="wallet.icon"
-                <q-icon
+              :text-color="$q.dark.isActive ? 'black' : 'grey-3'"
-                  :name="g.wallet.icon"
+              :color="
-                  :size="$q.dark.isActive ? '21px' : '20px'"
+          wallet && wallet.id === wallet.id
-                  :color="$q.dark.isActive ? 'blue-grey-10' : 'grey-3'"
+            ? wallet.color
-                ></q-icon>
+            : wallet.color
-                
+        "
-              </q-avatar>
+            >
+            </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:
@@ -223,7 +228,7 @@
           </q-card-section>
           <q-card-section style="padding: 0">
           <wallet-payment-chart
-            :wallet="this.g.wallet"
+            :wallet="this.wallet"
           ></wallet-payment-chart>
         </q-card-section>
       </q-card>

lnbits/core/views/wallet_api.py

@@ -40,7 +40,7 @@ async def api_wallet(key_info: WalletTypeInfo = Depends(require_invoice_key)):
     return res
 
 
-@wallet_router.put("/{new_name}")
+@wallet_router.put("/")
 async def api_update_wallet_name(
     new_name: str, key_info: WalletTypeInfo = Depends(require_admin_key)
 ):
@@ -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.icon = icon or wallet.icon
+    wallet.color = color or wallet.color
     wallet.currency = currency if currency is not None else wallet.currency
     await update_wallet(wallet)
     return wallet

lnbits/static/js/wallet.js

@@ -211,6 +211,12 @@ window.app = Vue.createApp({
       console.log(this.icon.data)
       this.updateWallet(this.icon.data)
     },
+    getWallet(wallet) {
+      console.log(wallet)
+      console.log(this.g.wallet)
+      this.wallet = LNbits.map.wallet(wallet)
+      console.log(this.g.wallet)
+    },
     createInvoice() {
       this.receive.status = 'loading'
       if (LNBITS_DENOMINATION != 'sats') {
@@ -566,13 +572,15 @@ window.app = Vue.createApp({
     updateWallet(data) {
       LNbits.api
         .request('PATCH', '/api/v1/wallet', this.g.wallet.adminkey, data)
-        .then(_ => {
+        .then(response => {
+          console.log(response.data)
+          this.wallet = LNbits.map.wallet(response.data)
           Quasar.Notify.create({
             message: `Wallet updated.`,
             type: 'positive',
             timeout: 3500
           })
-          window.location.reload()
+         // window.location.reload()
         })
         .catch(err => {
           LNbits.utils.notifyApiError(err)
@@ -709,7 +717,24 @@ window.app = Vue.createApp({
           dismissPaymentMsg()
           LNbits.utils.notifyApiError(err)
         })
+    },
+    walletColorAlpha(color){
+      console.log(LNbits.utils.getPaletteColor(color))
+      console.log(LNbits.utils.hexAlpha(LNbits.utils.getPaletteColor(color),0.3))
+      return LNbits.utils.hexAlpha(LNbits.utils.getPaletteColor(color),0.3)
+    },
+    incoming(wallet){
+        // listen to incoming payments
+        LNbits.events.onInvoicePaid(wallet, data => {
+          console.log('Payment received:', data.payment.payment_hash)
+          console.log('Wallet balance:', data.wallet_balance)
+          console.log('Wallet ID:', wallet)
+          this.onPaymentReceived(data.payment.payment_hash)
+          this.balance = data.wallet_balance
+          eventReaction(data.payment.amount)
+        })
     }
+
   },
   created() {
     const urlParams = new URLSearchParams(window.location.search)
@@ -726,7 +751,6 @@ window.app = Vue.createApp({
     this.update.currency = this.g.wallet.currency
     this.receive.units = ['sat', ...window.currencies]
     this.updateFiatBalance()
-    console.log('Wallet:', this.wallet)
   },
   watch: {
     updatePayments() {
@@ -744,15 +768,7 @@ window.app = Vue.createApp({
       this.disclaimerDialog.show = true
       this.$q.localStorage.set('lnbits.disclaimerShown', true)
     }
-    // listen to incoming payments
+    this.incoming(this.g.wallet)
-    LNbits.events.onInvoicePaid(this.g.wallet, data => {
-      console.log('Payment received:', data.payment.payment_hash)
-      console.log('Wallet balance:', data.wallet_balance)
-      console.log('Wallet ID:', this.g.wallet)
-      this.onPaymentReceived(data.payment.payment_hash)
-      this.balance = data.wallet_balance
-      eventReaction(data.payment.amount)
-    })
   }
 })
 

lnbits/templates/components.vue

@@ -15,21 +15,20 @@
     >
       <q-item-section side>
         <q-avatar
-          size="md"
+              size="lg"
-          :color="
+              :icon="wallet.icon"
-            activeWallet && activeWallet.id === wallet.id
+              :text-color="$q.dark.isActive ? 'black' : 'grey-3'"
-              ? $q.dark.isActive
+              :class="activeWallet && activeWallet.id === wallet.id
-                ? 'primary'
+                  ? ''
-                : 'primary'
+                  : 'disabled'
-              : 'grey-5'
+              "
-          "
+              :color="
-        >
+          activeWallet && activeWallet.id === wallet.id
-          <q-icon
+            ? wallet.color
-            name="flash_on"
+            : wallet.color
-            :size="$q.dark.isActive ? '21px' : '20px'"
+        "
-            :color="$q.dark.isActive ? 'blue-grey-10' : 'grey-3'"
+            >
-          ></q-icon>
+            </q-avatar>
-        </q-avatar>
       </q-item-section>
       <q-item-section>
         <q-item-label lines="1"