From f8df16f04317c09c434cf89fe64031f6cf3aa868 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Sat, 19 Aug 2023 19:01:21 +0200
Subject: [PATCH] feat: cleanup `QR` (#7231)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: cleanup QR

* fix: remove unnecessary styles

* fix

* styles: center qr in its container

* chore: cleanup code

---------

Co-authored-by: Begoña Álvarez de la Cruz <balvarez@boxfish.studio>
Co-authored-by: JCNoguera <88061365+VmMad@users.noreply.github.com>
Co-authored-by: Jean Carlo Noguera <jcnoguera@boxfish.studio>
---
 .../popups/ReceiveAddressPopup.svelte         |  2 +-
 packages/shared/components/QR.svelte          | 35 +++++--------------
 .../buttons/ReceiveAddressButton.svelte       |  2 +-
 3 files changed, 10 insertions(+), 29 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..7d4a5d50541 100644
--- a/packages/shared/components/QR.svelte
+++ b/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} />
diff --git a/packages/shared/components/buttons/ReceiveAddressButton.svelte b/packages/shared/components/buttons/ReceiveAddressButton.svelte
index 7b18979d0d9..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 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}