From ad0cd6e11a31c2d3b6b769132f48c3a47f4753ca Mon Sep 17 00:00:00 2001
From: Jordan Ribbink <jribbink@telus.net>
Date: Mon, 9 Sep 2024 12:58:53 -0700
Subject: [PATCH 1/5] Add clipboard check

---
 .../views/ScanConnect/ScanConnectDesktop.tsx      | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/views/ScanConnect/ScanConnectDesktop.tsx b/components/views/ScanConnect/ScanConnectDesktop.tsx
index 26f94e3..f6bb52c 100644
--- a/components/views/ScanConnect/ScanConnectDesktop.tsx
+++ b/components/views/ScanConnect/ScanConnectDesktop.tsx
@@ -7,6 +7,7 @@ import { useWcUri } from '../../../hooks/useWcUri'
 import { useWalletHistory } from '../../../hooks/useWalletHistory'
 import { handleCancel } from '../../../helpers/window'
 import { ViewContainer } from '../../layout/ViewContainer'
+import { useEffect, useState } from 'react'
 
 interface ScanConnectDesktopProps {
   wallet: Wallet
@@ -23,6 +24,16 @@ export default function ScanConnectDesktop({
     handleCancel()
   })
 
+  const [isClipboardAllowed, setIsClipboardAllowed] = useState(true)
+
+  useEffect(() => {
+    navigator.permissions
+      .query({ name: 'clipboard-write' as PermissionName })
+      .then(result => {
+        setIsClipboardAllowed(result.state === 'granted')
+      })
+  }, [])
+
   if (connecting) {
     return (
       <ViewContainer
@@ -43,7 +54,9 @@ export default function ScanConnectDesktop({
     >
       <Flex justifyContent="space-between" width="100%" alignItems="center">
         <Text textStyle="body2">Scan in the {wallet.name} app to connect</Text>
-        <CopyButton text={uri} />
+        {isClipboardAllowed && (
+          <CopyButton text={uri} disabled={!uri || isLoading} />
+        )}
       </Flex>
 
       <Box padding={3} borderRadius="0.75rem" borderWidth="1px" bg="white">

From 44c0c6a29c3cbac71c9fb2ea2b3c625d66c6eaf4 Mon Sep 17 00:00:00 2001
From: Jordan Ribbink <jribbink@telus.net>
Date: Mon, 9 Sep 2024 13:28:48 -0700
Subject: [PATCH 2/5] Switch to disabled if clipboard not allowed

---
 components/views/ScanConnect/ScanConnectDesktop.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/views/ScanConnect/ScanConnectDesktop.tsx b/components/views/ScanConnect/ScanConnectDesktop.tsx
index f6bb52c..1ee6472 100644
--- a/components/views/ScanConnect/ScanConnectDesktop.tsx
+++ b/components/views/ScanConnect/ScanConnectDesktop.tsx
@@ -54,9 +54,10 @@ export default function ScanConnectDesktop({
     >
       <Flex justifyContent="space-between" width="100%" alignItems="center">
         <Text textStyle="body2">Scan in the {wallet.name} app to connect</Text>
-        {isClipboardAllowed && (
-          <CopyButton text={uri} disabled={!uri || isLoading} />
-        )}
+        <CopyButton
+          text={uri}
+          disabled={!uri || isLoading || !isClipboardAllowed}
+        />
       </Flex>
 
       <Box padding={3} borderRadius="0.75rem" borderWidth="1px" bg="white">

From 75837995c13074741f64287e383f5762318c8824 Mon Sep 17 00:00:00 2001
From: Jordan Ribbink <jribbink@telus.net>
Date: Mon, 9 Sep 2024 13:51:58 -0700
Subject: [PATCH 3/5] Add tooltip

---
 .../views/ScanConnect/ScanConnectDesktop.tsx  | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/components/views/ScanConnect/ScanConnectDesktop.tsx b/components/views/ScanConnect/ScanConnectDesktop.tsx
index 1ee6472..fad5efd 100644
--- a/components/views/ScanConnect/ScanConnectDesktop.tsx
+++ b/components/views/ScanConnect/ScanConnectDesktop.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Spinner, Stack, Text } from '@chakra-ui/react'
+import { Box, Flex, Spinner, Stack, Text, Tooltip } from '@chakra-ui/react'
 import { Wallet } from '../../../data/wallets'
 import QRCode from '../../QRCode'
 import CopyButton from '../../CopyButton'
@@ -7,7 +7,7 @@ import { useWcUri } from '../../../hooks/useWcUri'
 import { useWalletHistory } from '../../../hooks/useWalletHistory'
 import { handleCancel } from '../../../helpers/window'
 import { ViewContainer } from '../../layout/ViewContainer'
-import { useEffect, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 
 interface ScanConnectDesktopProps {
   wallet: Wallet
@@ -30,10 +30,25 @@ export default function ScanConnectDesktop({
     navigator.permissions
       .query({ name: 'clipboard-write' as PermissionName })
       .then(result => {
-        setIsClipboardAllowed(result.state === 'granted')
+        setIsClipboardAllowed(result?.state === 'granted')
+      })
+      .catch(() => {
+        setIsClipboardAllowed(false)
       })
   }, [])
 
+  const wrapTooltip = (node: ReactNode) => {
+    if (isClipboardAllowed) {
+      return node
+    }
+
+    return (
+      <Tooltip label={isClipboardAllowed ? '' : 'Clipboard access is blocked'}>
+        {node}
+      </Tooltip>
+    )
+  }
+
   if (connecting) {
     return (
       <ViewContainer
@@ -54,10 +69,13 @@ export default function ScanConnectDesktop({
     >
       <Flex justifyContent="space-between" width="100%" alignItems="center">
         <Text textStyle="body2">Scan in the {wallet.name} app to connect</Text>
-        <CopyButton
-          text={uri}
-          disabled={!uri || isLoading || !isClipboardAllowed}
-        />
+        {wrapTooltip(
+          <CopyButton
+            text={uri}
+            disabled={!uri || isLoading || !isClipboardAllowed}
+            tooltip="Copy URI"
+          />,
+        )}
       </Flex>
 
       <Box padding={3} borderRadius="0.75rem" borderWidth="1px" bg="white">

From 68d6fcce269bc9fd118cf18ad5d856ef6f96df04 Mon Sep 17 00:00:00 2001
From: Jordan Ribbink <jribbink@telus.net>
Date: Mon, 9 Sep 2024 13:53:05 -0700
Subject: [PATCH 4/5] remove unnecessary prop

---
 components/views/ScanConnect/ScanConnectDesktop.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/views/ScanConnect/ScanConnectDesktop.tsx b/components/views/ScanConnect/ScanConnectDesktop.tsx
index fad5efd..eafb70f 100644
--- a/components/views/ScanConnect/ScanConnectDesktop.tsx
+++ b/components/views/ScanConnect/ScanConnectDesktop.tsx
@@ -73,7 +73,6 @@ export default function ScanConnectDesktop({
           <CopyButton
             text={uri}
             disabled={!uri || isLoading || !isClipboardAllowed}
-            tooltip="Copy URI"
           />,
         )}
       </Flex>

From 835b6c1be1786ceeaa6fedd5920fc5693fd0f07b Mon Sep 17 00:00:00 2001
From: Jordan Ribbink <jribbink@telus.net>
Date: Mon, 9 Sep 2024 14:45:12 -0700
Subject: [PATCH 5/5] Fix warning

---
 components/CopyButton.tsx                     | 54 ++++++++++++++++---
 .../views/ScanConnect/ScanConnectDesktop.tsx  | 39 ++------------
 2 files changed, 52 insertions(+), 41 deletions(-)

diff --git a/components/CopyButton.tsx b/components/CopyButton.tsx
index d363170..2b85a8a 100644
--- a/components/CopyButton.tsx
+++ b/components/CopyButton.tsx
@@ -1,13 +1,17 @@
-import { IconButton } from '@chakra-ui/react'
+import { HStack, IconButton, Text, Tooltip } from '@chakra-ui/react'
 import CopyIcon from './icons/CopyIcon'
-import { ComponentProps, useRef, useState } from 'react'
-import { CheckIcon } from '@chakra-ui/icons'
+import { ComponentProps, ReactNode, useEffect, useRef, useState } from 'react'
+import { CheckIcon, WarningIcon } from '@chakra-ui/icons'
 
 type CopyButtonProps = {
   text: string
 } & Partial<ComponentProps<typeof IconButton>>
 
-export default function CopyButton({ text, ...props }: CopyButtonProps) {
+export default function CopyButton({
+  text,
+  isDisabled,
+  ...props
+}: CopyButtonProps) {
   const size = '1.75rem'
   const checkSize = '1.15rem'
 
@@ -30,7 +34,44 @@ export default function CopyButton({ text, ...props }: CopyButtonProps) {
     }, 1000)
   }
 
-  return (
+  const [isClipboardAllowed, setIsClipboardAllowed] = useState(true)
+  useEffect(() => {
+    navigator.permissions
+      .query({ name: 'clipboard-write' as PermissionName })
+      .then(result => {
+        setIsClipboardAllowed(result?.state === 'granted')
+      })
+      .catch(() => {
+        setIsClipboardAllowed(false)
+      })
+  }, [])
+
+  const wrapTooltip = (node: ReactNode) => {
+    if (isClipboardAllowed) {
+      return node
+    }
+
+    return (
+      <Tooltip
+        label={
+          isClipboardAllowed ? null : (
+            <HStack>
+              <WarningIcon color="red.500" />
+              <Text textStyle="body2">No Clipboard Access</Text>
+            </HStack>
+          )
+        }
+        placement="bottom"
+        borderRadius="md"
+        px={2}
+        py={1}
+      >
+        {node}
+      </Tooltip>
+    )
+  }
+
+  return wrapTooltip(
     <IconButton
       variant="ghost"
       color="foreground.60%"
@@ -42,7 +83,8 @@ export default function CopyButton({ text, ...props }: CopyButtonProps) {
       icon={icon}
       onClick={onClick}
       isRound
+      isDisabled={isDisabled || !isClipboardAllowed}
       {...props}
-    ></IconButton>
+    ></IconButton>,
   )
 }
diff --git a/components/views/ScanConnect/ScanConnectDesktop.tsx b/components/views/ScanConnect/ScanConnectDesktop.tsx
index eafb70f..7b02d7f 100644
--- a/components/views/ScanConnect/ScanConnectDesktop.tsx
+++ b/components/views/ScanConnect/ScanConnectDesktop.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Spinner, Stack, Text, Tooltip } from '@chakra-ui/react'
+import { Box, Flex, HStack, Spinner, Stack, Text } from '@chakra-ui/react'
 import { Wallet } from '../../../data/wallets'
 import QRCode from '../../QRCode'
 import CopyButton from '../../CopyButton'
@@ -7,7 +7,6 @@ import { useWcUri } from '../../../hooks/useWcUri'
 import { useWalletHistory } from '../../../hooks/useWalletHistory'
 import { handleCancel } from '../../../helpers/window'
 import { ViewContainer } from '../../layout/ViewContainer'
-import { ReactNode, useEffect, useState } from 'react'
 
 interface ScanConnectDesktopProps {
   wallet: Wallet
@@ -24,31 +23,6 @@ export default function ScanConnectDesktop({
     handleCancel()
   })
 
-  const [isClipboardAllowed, setIsClipboardAllowed] = useState(true)
-
-  useEffect(() => {
-    navigator.permissions
-      .query({ name: 'clipboard-write' as PermissionName })
-      .then(result => {
-        setIsClipboardAllowed(result?.state === 'granted')
-      })
-      .catch(() => {
-        setIsClipboardAllowed(false)
-      })
-  }, [])
-
-  const wrapTooltip = (node: ReactNode) => {
-    if (isClipboardAllowed) {
-      return node
-    }
-
-    return (
-      <Tooltip label={isClipboardAllowed ? '' : 'Clipboard access is blocked'}>
-        {node}
-      </Tooltip>
-    )
-  }
-
   if (connecting) {
     return (
       <ViewContainer
@@ -67,15 +41,10 @@ export default function ScanConnectDesktop({
       spacing={2}
       justifyContent="space-evenly"
     >
-      <Flex justifyContent="space-between" width="100%" alignItems="center">
+      <HStack width="full">
         <Text textStyle="body2">Scan in the {wallet.name} app to connect</Text>
-        {wrapTooltip(
-          <CopyButton
-            text={uri}
-            disabled={!uri || isLoading || !isClipboardAllowed}
-          />,
-        )}
-      </Flex>
+        <CopyButton text={uri} isDisabled={!uri || isLoading} ml="auto" />
+      </HStack>
 
       <Box padding={3} borderRadius="0.75rem" borderWidth="1px" bg="white">
         {uri && (