Add a customizable logo to QR (#1955)

* add QR_LOGO variable
* add logo to images folder
* css for overlaying logo on qr
* qr url on settings
* add qr url to global env
* add QR url input on theme tab in adminUI
* new component added
* use svg
* remove white border around logo in the QR

---------

Co-authored-by: Pavol Rusnak <pavol@rusnak.io>
Co-authored-by: dni ⚡ <office@dnilabs.com>

lnbits/static/css/base.css

@@ -535,3 +535,21 @@ video {
 .q-card code {
   overflow-wrap: break-word;
 }
+
+.qrcode__wrapper > canvas {
+  position: relative;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.qrcode__image {
+  width: 15%;
+  height: 15%;
+  overflow: hidden;
+  left: 50%;
+  overflow: hidden;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0.3rem;
+}

lnbits/static/images/logos/lnbits.svg

@@ -0,0 +1,19 @@
+<svg width="900" height="900" viewBox="0 0 900 900" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_i_10_29)">
+<circle cx="450" cy="450" r="450" fill="#1E1E1E"/>
+</g>
+<path d="M387.802 476.423L281.613 730.887L584.54 389.763H459.418L619.113 168.387H407.558L305.485 476.423H387.802Z" fill="#FF1FE1"/>
+<defs>
+<filter id="filter0_i_10_29" x="-0.1" y="-0.1" width="900.1" height="900.1" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="0.6" operator="dilate" in="SourceAlpha" result="effect1_innerShadow_10_29"/>
+<feOffset dx="-1" dy="-0.4"/>
+<feGaussianBlur stdDeviation="0.35"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.121569 0 0 0 0 0.882353 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_10_29"/>
+</filter>
+</defs>
+</svg>

lnbits/static/js/components.js

@@ -356,6 +356,24 @@ Vue.component('lnbits-lnurlpay-success-action', {
   }
 })
 
+Vue.component('lnbits-qrcode', {
+  mixins: [windowMixin],
+  props: ['value'],
+  components: {[VueQrcode.name]: VueQrcode},
+  data() {
+    return {
+      logo: LNBITS_QR_LOGO
+    }
+  },
+  template: `
+  <div class="qrcode__wrapper">
+    <qrcode :value="value"
+    :options="{errorCorrectionLevel: 'Q'}" class="rounded-borders"></qrcode>    
+    <img class="qrcode__image" :src="logo" alt="..." />    
+  </div>
+  `
+})
+
 Vue.component('lnbits-notifications-btn', {
   mixins: [windowMixin],
   props: ['pubkey'],

lnbits/static/scss/base.scss

@@ -213,3 +213,21 @@ video {
     overflow-wrap: break-word;
   }
 }
+
+.qrcode__wrapper > canvas {
+  position: relative;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.qrcode__image {
+  width: 15%;
+  height: 15%;
+  overflow: hidden;
+  left: 50%;
+  overflow: hidden;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0.3rem;
+}