From f842610f9833c81e399991e69621378fbbab998b Mon Sep 17 00:00:00 2001
From: vorujack <vorujack@gmail.com>
Date: Tue, 12 Mar 2024 07:16:22 +0330
Subject: [PATCH] center align qrcodes

---
 README.md                                     |  2 +-
 .../display-qrcode/DisplayQRCode.tsx          |  4 +--
 src/components/display-qrcode/QrCodeSVG.tsx   | 29 +++++++++++++++++++
 .../settings/WalletExtendedPublicKey.tsx      |  4 +--
 .../wallet-page/address/AddressViewCard.tsx   |  6 ++--
 5 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 src/components/display-qrcode/QrCodeSVG.tsx

diff --git a/README.md b/README.md
index ee2e002..0b759e4 100644
--- a/README.md
+++ b/README.md
@@ -89,7 +89,7 @@ npm run electron:make
 
 For Apple Silicon chips (M series) you must use the `arm64` build. Using the intel-based build will result in camera malfunction.
 
-In case of ***damaged file*** error, use this command:
+In case of **_damaged file_** error, use this command:
 
 ```
 sudo xattr -r -s com.apple.quarantine /Application/minotaur.app
diff --git a/src/components/display-qrcode/DisplayQRCode.tsx b/src/components/display-qrcode/DisplayQRCode.tsx
index 648e863..d418a7b 100644
--- a/src/components/display-qrcode/DisplayQRCode.tsx
+++ b/src/components/display-qrcode/DisplayQRCode.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Alert, Box, Button, MobileStepper, Slider } from '@mui/material';
-import { QRCodeSVG } from 'qrcode.react';
+import QRCodeSVG from './QrCodeSVG';
 import { MAX_CHUNK_SIZE, QRCODE_MINIMUM_CHUNK_SIZE } from '@/utils/const';
 import {
   ContentCopyOutlined,
@@ -53,7 +53,7 @@ const DisplayQRCode = (props: DisplayQRCodePropsType) => {
           border: '1px solid #ddd',
         }}
       >
-        <QRCodeSVG value={value} size={512} />
+        <QRCodeSVG value={value} />
       </Box>
       {pageCount > 1 ? (
         <MobileStepper
diff --git a/src/components/display-qrcode/QrCodeSVG.tsx b/src/components/display-qrcode/QrCodeSVG.tsx
new file mode 100644
index 0000000..867e1b4
--- /dev/null
+++ b/src/components/display-qrcode/QrCodeSVG.tsx
@@ -0,0 +1,29 @@
+import { QRCodeSVG as PackageQrCode } from 'qrcode.react';
+import { useEffect, useRef, useState } from 'react';
+
+interface QrCodeSVGPropsType {
+  value: string;
+}
+const QrCodeSVG = (props: QrCodeSVGPropsType) => {
+  const [size, setSize] = useState(512);
+  const [clientSize, setClientSize] = useState(0);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (ref && ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      const newSize = Math.min(rect.width, rect.height);
+      if (newSize !== clientSize) {
+        setClientSize(newSize);
+        const pow = Math.min(Math.floor(Math.log(newSize) / Math.log(2)), 9);
+        setSize(Math.pow(2, pow));
+      }
+    }
+  }, [size, ref, clientSize]);
+  return (
+    <div ref={ref}>
+      <PackageQrCode size={size} value={props.value} />
+    </div>
+  );
+};
+
+export default QrCodeSVG;
diff --git a/src/pages/settings/WalletExtendedPublicKey.tsx b/src/pages/settings/WalletExtendedPublicKey.tsx
index b26383c..9894aa2 100644
--- a/src/pages/settings/WalletExtendedPublicKey.tsx
+++ b/src/pages/settings/WalletExtendedPublicKey.tsx
@@ -9,7 +9,7 @@ import {
 } from '@mui/material';
 import CopyToClipboardIcon from '@/components/copy-to-clipboard/CopyToClipboardIcon';
 import AppFrame from '@/layouts/AppFrame';
-import { QRCodeSVG } from 'qrcode.react';
+import QRCodeSVG from '@/components/display-qrcode/QrCodeSVG';
 import base58 from 'bs58';
 import { StateWallet } from '@/store/reducer/wallet';
 import BackButtonRouter from '@/components/back-button/BackButtonRouter';
@@ -61,7 +61,7 @@ const WalletExtendedPublicKey = (props: WalletExtendedPublicKeyPropsType) => {
         sx={{ bgcolor: 'white', textAlign: 'center', mt: 1, mb: 2 }}
       >
         <Typography sx={{ p: 8, fontStyle: 'italic', color: 'textSecondary' }}>
-          <QRCodeSVG value={xPubEncoded} size={256} />
+          <QRCodeSVG value={xPubEncoded} />
         </Typography>
       </Card>
       <Card>
diff --git a/src/pages/wallet-page/address/AddressViewCard.tsx b/src/pages/wallet-page/address/AddressViewCard.tsx
index cf49df2..066e4fe 100644
--- a/src/pages/wallet-page/address/AddressViewCard.tsx
+++ b/src/pages/wallet-page/address/AddressViewCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Card, Divider, IconButton, Typography } from '@mui/material';
 import { Close, EditOutlined } from '@mui/icons-material';
-import { QRCodeSVG } from 'qrcode.react';
+import QRCodeSVG from '@/components/display-qrcode/QrCodeSVG';
 import CopyToClipboardIcon from '@/components/copy-to-clipboard/CopyToClipboardIcon';
 import Heading from '@/components/heading/Heading';
 import ListController from '@/components/list-controller/ListController';
@@ -54,8 +54,8 @@ const AddressViewCard = (props: AddressViewCardPropsType) => {
           <Divider sx={{ my: 2 }} />
         </React.Fragment>
       ) : null}
-      <Box sx={{ p: 8, textAlign: 'center', fontStyle: 'italic' }}>
-        <QRCodeSVG value={props.address.address} size={256} />
+      <Box sx={{ pt: 8, pb: 8, textAlign: 'center', fontStyle: 'italic' }}>
+        <QRCodeSVG value={props.address.address} />
       </Box>
       <Box>
         <Card sx={{ display: 'flex', bgcolor: 'info.light', p: 2 }}>