fix qr code web

src/components/QrCode.js

@@ -13,7 +13,12 @@ const QrCode = ({
   errorCorrectionLevel = "M",
 }) => {
   const { matrix } = useMemo(() => {
-    return generateQrMatrix({ value, errorCorrectionLevel });
+    try {
+      return generateQrMatrix({ value, errorCorrectionLevel });
+    } catch (error) {
+      console.error("qr.code.generate.error", error);
+      return { matrix: [] };
+    }
   }, [value, errorCorrectionLevel]);
 
   const cellSize = useMemo(() => {
@@ -58,4 +63,3 @@ const QrCode = ({
 };
 
 export default QrCode;
-

src/components/modal/ShareModal.js

@@ -46,6 +46,7 @@ const ShareModal = ({ payload }) => {
 
   const [copied, setCopied] = useState(false);
   const copyTimeout = useRef(null);
+  const shareQrTimeoutRef = useRef(null);
   const modalRef = useRef(null);
   const [webVisible, setWebVisible] = useState(true);
   const blurProps =
@@ -88,6 +89,7 @@ const ShareModal = ({ payload }) => {
       if (copyTimeout.current) {
         clearTimeout(copyTimeout.current);
       }
+
     };
   }, []);
 
@@ -191,14 +193,45 @@ const ShareModal = ({ payload }) => {
   const handleShareOption = useCallback(
     async (option) => {
       if (option?.type === "qr") {
-        await closeSheet();
+        console.log("share.modal.handleShareOption", {
-        setGlobal({
+          key: option?.key,
-          shareQrModal: {
+          platform: Platform.OS,
-            visible: true,
+        });
+
+        if (shareQrTimeoutRef.current) {
+          clearTimeout(shareQrTimeoutRef.current);
+        }
+
+        const openQrModal = () => {
+          console.log("share.modal.openQrModal", {
+            platform: Platform.OS,
             url: qrUrl,
             title: qrTitle,
-          },
+          });
-        });
+          shareQrTimeoutRef.current = null;
+          setGlobal({
+            shareQrModal: {
+              visible: true,
+              url: qrUrl,
+              title: qrTitle,
+            },
+          });
+        };
+
+        if (Platform.OS === "web") {
+          console.log("share.modal.scheduleQr", { platform: Platform.OS });
+          const maybePromise = closeSheet();
+          shareQrTimeoutRef.current = setTimeout(openQrModal, 80);
+          if (maybePromise && typeof maybePromise.catch === "function") {
+            maybePromise.catch((error) => {
+              console.error("share.modal.closeSheet.error", error);
+            });
+          }
+        } else {
+          await closeSheet();
+          openQrModal();
+        }
+
         return;
       }
 

src/components/modal/ShareQrModal.js

@@ -1,6 +1,6 @@
 import { Portal } from "@gorhom/portal";
 import { BlurView } from "expo-blur";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 
 import { Palette } from "../../styles";
@@ -15,6 +15,13 @@ const ShareQrModal = ({
 }) => {
   const shareUrl = useMemo(() => url, [url]);
 
+  useEffect(() => {
+    console.log("share.qr.modal.state", {
+      visible,
+      url: shareUrl,
+    });
+  }, [shareUrl, visible]);
+
   if (!visible) {
     return null;
   }

src/components/modal/ShareQrModalContainer.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useGlobal } from "reactn";
 
 import { musiclandShareUrl } from "../../data";
@@ -9,6 +9,14 @@ const ShareQrModalContainer = () => {
 
   const { visible, url, title } = shareQrModal || {};
 
+  useEffect(() => {
+    console.log("share.qr.container.state", {
+      visible: !!visible,
+      url,
+      title,
+    });
+  }, [visible, url, title]);
+
   const handleClose = () => {
     setShareQrModal({
       visible: false,