fix: qr pairing button not appearing

airgap-it · Jan 31, 2025 · 21d0c22 · 21d0c22
1 parent ba20fda
commit 21d0c22
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/packages/beacon-ui/src/components/info/styles.css b/packages/beacon-ui/src/components/info/styles.css
@@ -114,6 +114,11 @@ button#qr-code-icon {
   top: 0.3rem;
   right: 0.3rem;
 }
+
+button#qr-code-icon svg {
+  width: 25px;
+}
+
 @media only screen and (max-width: 300px) {
   button#qr-code-icon {
     min-width: 1.5rem;

diff --git a/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx b/packages/beacon-ui/src/ui/alert/components/pairing-alert/index.tsx
@@ -38,7 +38,8 @@ const PairingAlert: React.FC<ConfigurableAlertProps> = (props) => {
     handleClickDownloadDesktopApp,
     handleUpdateState,
     handleUpdateQRCode,
-    handleShowMoreContent
+    handleShowMoreContent,
+    handleDisplayQRExtra
   ] = useConnect(isMobile, wcPayload, p2pPayload, postPayload, wallets, props.onClose)
   const isOnline = navigator.onLine
   const walletList = Array.from(wallets.values())
@@ -278,7 +279,7 @@ const PairingAlert: React.FC<ConfigurableAlertProps> = (props) => {
                     }
 
                     handleUpdateState('qr')
-                    // todo setDisplayQrExtra(true)
+                    handleDisplayQRExtra(true)
                   }}
                 />
               ) : (

diff --git a/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx b/packages/beacon-ui/src/ui/alert/hooks/useConnect.tsx
@@ -88,7 +88,7 @@ const useConnect = (
         }
       }
       setIsLoading(false)
-    } else if (selectedWallet?.types.includes('ios') && isMobile) {
+    } else if (isMobileOS(window) && selectedWallet?.types.includes('ios') && isMobile) {
       setQRCode('')
 
       if (config.pairingPayload) {
@@ -103,18 +103,19 @@ const useConnect = (
 
         updateSelectedWalletWithURL(link)
 
-        if (isAndroid(window)) window.open(link, '_blank', 'noopener')
-        else if (isIOS(window)) {
+        if (isAndroid(window)) {
+          window.open(link, '_blank', 'noopener')
+        } else {
           const a = document.createElement('a')
           a.setAttribute('href', link)
           a.setAttribute('rel', 'noopener')
           a.dispatchEvent(
             new MouseEvent('click', { view: window, bubbles: true, cancelable: true })
           )
         }
-      }
 
-      setIsLoading(false)
+        setIsLoading(false)
+      }
     } else {
       setIsLoading(false)
       setInstallState(selectedWallet)
@@ -314,6 +315,8 @@ const useConnect = (
 
   const handleShowMoreContent = () => setShowMoreContent((prev) => !prev)
 
+  const handleDisplayQRExtra = (show: boolean) => setDisplayQRExtra(show)
+
   return [
     wallet,
     isLoading,
@@ -332,7 +335,8 @@ const useConnect = (
     handleClickDownloadDesktopApp,
     handleUpdateState,
     handleUpdateQRCode,
-    handleShowMoreContent
+    handleShowMoreContent,
+    handleDisplayQRExtra
   ] as const
 }