From 636323808be0fe6fec5a39c93bb2a72b357a718f Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Mon, 17 Jul 2023 14:26:05 +0200
Subject: [PATCH 1/5] feat: cleanup QR

---
 .../components/popups/ReceiveAddressPopup.svelte |  2 +-
 packages/shared/components/QR.svelte             | 16 +++++-----------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/desktop/components/popups/ReceiveAddressPopup.svelte b/packages/desktop/components/popups/ReceiveAddressPopup.svelte
index bb98452eec0..526e9c2309d 100644
--- a/packages/desktop/components/popups/ReceiveAddressPopup.svelte
+++ b/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>
diff --git a/packages/shared/components/QR.svelte b/packages/shared/components/QR.svelte
index ba3da739c09..6687ca2ca48 100644
--- a/packages/shared/components/QR.svelte
+++ b/packages/shared/components/QR.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
     import { default as QrCode } from 'qrious'
     import { appSettings } from '@core/app'
-    import { onMount } from 'svelte'
 
     export let data: string
-    export let classes: string = ''
 
     $: color = $appSettings.darkMode ? '#ffffff' : '#000000'
 
     const QRcode = new QrCode()
-    let image = ''
+    let QRImage = ''
 
     function generateQrCode(): void {
         QRcode.set({
@@ -21,24 +19,20 @@
             value: data,
         })
 
-        image = QRcode.toDataURL('image/png')
+        QRImage = QRcode.toDataURL('image/png')
     }
 
     $: if (data) {
         generateQrCode()
     }
-
-    onMount((): void => {
-        generateQrCode()
-    })
 </script>
 
-<div class="flex justify-center {classes}">
-    <img src={image} alt={data} class="qrcode" />
+<div class="flex justify-center">
+    <img src={QRImage} alt={data} />
 </div>
 
 <style lang="scss">
-    .qrcode {
+    img {
         width: 135px;
         height: 135px;
     }

From 3bc9ba262aa04a1df6906e8ba271b31c650b0c3e Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Mon, 17 Jul 2023 17:03:36 +0200
Subject: [PATCH 2/5] fix: remove unnecessary styles

---
 packages/shared/components/QR.svelte                 | 12 +-----------
 .../components/buttons/ReceiveAddressButton.svelte   |  2 +-
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/packages/shared/components/QR.svelte b/packages/shared/components/QR.svelte
index 6687ca2ca48..cd017b31480 100644
--- a/packages/shared/components/QR.svelte
+++ b/packages/shared/components/QR.svelte
@@ -14,7 +14,6 @@
             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
             value: data,
         })
@@ -27,13 +26,4 @@
     }
 </script>
 
-<div class="flex justify-center">
-    <img src={QRImage} alt={data} />
-</div>
-
-<style lang="scss">
-    img {
-        width: 135px;
-        height: 135px;
-    }
-</style>
+<img src={QRImage} alt={data} width="135" height="135" />
diff --git a/packages/shared/components/buttons/ReceiveAddressButton.svelte b/packages/shared/components/buttons/ReceiveAddressButton.svelte
index 456ab9e3129..7cfde31710d 100644
--- a/packages/shared/components/buttons/ReceiveAddressButton.svelte
+++ b/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">
+    <inner-box class="flex flex-col items-center space-y-6 pt-7 pb-6">
         <QR data={receiveAddress} />
         <AddressBox
             bind:this={addressBoxElement}

From e3152a8494a528818a502fe719b83b1732d7ae28 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Mon, 17 Jul 2023 17:17:20 +0200
Subject: [PATCH 3/5] fix

---
 packages/shared/components/QR.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/shared/components/QR.svelte b/packages/shared/components/QR.svelte
index cd017b31480..93661841eb8 100644
--- a/packages/shared/components/QR.svelte
+++ b/packages/shared/components/QR.svelte
@@ -14,7 +14,7 @@
             background: '#ffffff00',
             foreground: color,
             level: 'L',
-            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,
         })
 
@@ -26,4 +26,4 @@
     }
 </script>
 
-<img src={QRImage} alt={data} width="135" height="135" />
+<img src={QRImage} alt={data} />

From 22745b163e72fae2d3ab2264df5e82b84d82adfa Mon Sep 17 00:00:00 2001
From: Jean Carlo Noguera <jcnoguera@boxfish.studio>
Date: Thu, 3 Aug 2023 12:50:16 +0200
Subject: [PATCH 4/5] styles: center qr in its container

---
 packages/shared/components/buttons/ReceiveAddressButton.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/components/buttons/ReceiveAddressButton.svelte b/packages/shared/components/buttons/ReceiveAddressButton.svelte
index 7cfde31710d..dabbd88935b 100644
--- a/packages/shared/components/buttons/ReceiveAddressButton.svelte
+++ b/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 items-center space-y-6 pt-7 pb-6">
+    <inner-box class="w-full flex flex-col items-center space-y-6 pt-7 pb-6">
         <QR data={receiveAddress} />
         <AddressBox
             bind:this={addressBoxElement}

From b9b274f536339a2b986f945a20a160af701308d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Sat, 19 Aug 2023 18:58:24 +0200
Subject: [PATCH 5/5] chore: cleanup code

---
 packages/shared/components/QR.svelte | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/shared/components/QR.svelte b/packages/shared/components/QR.svelte
index 93661841eb8..7d4a5d50541 100644
--- a/packages/shared/components/QR.svelte
+++ b/packages/shared/components/QR.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
-    import { default as QrCode } from 'qrious'
     import { appSettings } from '@core/app'
+    import { default as QrCode } from 'qrious'
 
     export let data: string
 
     $: color = $appSettings.darkMode ? '#ffffff' : '#000000'
+    $: data && generateQrCode()
 
-    const QRcode = new QrCode()
-    let QRImage = ''
+    const qrCode = new QrCode()
+    let qrImage = ''
 
     function generateQrCode(): void {
-        QRcode.set({
+        qrCode.set({
             background: '#ffffff00',
             foreground: color,
             level: 'L',
@@ -18,12 +19,8 @@
             value: data,
         })
 
-        QRImage = QRcode.toDataURL('image/png')
-    }
-
-    $: if (data) {
-        generateQrCode()
+        qrImage = qrCode.toDataURL('image/png')
     }
 </script>
 
-<img src={QRImage} alt={data} />
+<img src={qrImage} alt={data} />