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> -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 ( + + + No Clipboard Access + + ) + } + placement="bottom" + borderRadius="md" + px={2} + py={1} + > + {node} + + ) + } + + return wrapTooltip( + >, ) } diff --git a/components/views/ScanConnect/ScanConnectDesktop.tsx b/components/views/ScanConnect/ScanConnectDesktop.tsx index 26f94e3..7b02d7f 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, 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" > - + Scan in the {wallet.name} app to connect - - + + {uri && (