Add clipboard check (#262)

onflow · Sep 10, 2024 · 8f118dc · 8f118dc
1 parent 2ddaf17
commit 8f118dc
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 10 deletions.
diff --git 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
@@ -1,4 +1,4 @@
-import { Box, Flex, Spinner, Stack, Text } 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'
@@ -41,10 +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>
-        <CopyButton text={uri} />
-      </Flex>
+        <CopyButton text={uri} isDisabled={!uri || isLoading} ml="auto" />
+      </HStack>
 
       <Box padding={3} borderRadius="0.75rem" borderWidth="1px" bg="white">
         {uri && (