feat: cleanup QR

packages/desktop/components/popups/ReceiveAddressPopup.svelte

@@ -11,7 +11,7 @@
 <receive-details class="w-full h-full space-y-6 flex flex-auto flex-col shrink-0">
     <Text type="h3" fontWeight={FontWeight.semibold} classes="text-left">{title}</Text>
     <div class="flex w-full flex-col items-center space-y-6">
-        <QR data={receiveAddress} classes="w-1/2 h-1/2" />
+        <QR data={receiveAddress} />
         <AddressBox address={receiveAddress} clearBackground isCopyable />
     </div>
 </receive-details>

packages/shared/components/QR.svelte

@@ -1,45 +1,26 @@
 <script lang="ts">
-    import { default as QrCode } from 'qrious'
     import { appSettings } from '@core/app'
-    import { onMount } from 'svelte'
+    import { default as QrCode } from 'qrious'
 
     export let data: string
-    export let classes: string = ''
 
     $: color = $appSettings.darkMode ? '#ffffff' : '#000000'
+    $: data && generateQrCode()
 
-    const QRcode = new QrCode()
-    let image = ''
+    const qrCode = new QrCode()
+    let qrImage = ''
 
     function generateQrCode(): void {
-        QRcode.set({
+        qrCode.set({
             background: '#ffffff00',
             foreground: color,
             level: 'L',
-            padding: 0,
-            size: 200, // if this value is changed, the image gets some weird padding. Therefore we need to do the sizing with css
+            size: 135,
             value: data,
         })
 
-        image = QRcode.toDataURL('image/png')
-    }
-
-    $: if (data) {
-        generateQrCode()
+        qrImage = qrCode.toDataURL('image/png')
     }
-
-    onMount((): void => {
-        generateQrCode()
-    })
 </script>
 
-<div class="flex justify-center {classes}">
-    <img src={image} alt={data} class="qrcode" />
-</div>
-
-<style lang="scss">
-    .qrcode {
-        width: 135px;
-        height: 135px;
-    }
-</style>
+<img src={qrImage} alt={data} />

packages/shared/components/buttons/ReceiveAddressButton.svelte

@@ -21,7 +21,7 @@
     on:click={onReceiveClick}
 >
     <Text type="h5" fontWeight={FontWeight.semibold} classes="text-left">{localize('general.receiveFunds')}</Text>
-    <inner-box class="flex flex-col space-y-6 pt-7 pb-6 w-full">
+    <inner-box class="w-full flex flex-col items-center space-y-6 pt-7 pb-6">
         <QR data={receiveAddress} />
         <AddressBox
             bind:this={addressBoxElement}