feat: cleanup QR (#7231)

* 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 <[email protected]> Co-authored-by: JCNoguera <[email protected]> Co-authored-by: Jean Carlo Noguera <[email protected]>
iotaledger · Aug 19, 2023 · f8df16f · f8df16f
1 parent be2c429
commit f8df16f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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}