feat(ui): migrate all clipboard stuff to useClipboard

invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx

@@ -19,6 +19,7 @@ import {
   useDisclosure,
 } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { useClipboard } from 'common/hooks/useClipboard';
 import { discordLink, githubLink, websiteLink } from 'features/system/store/constants';
 import { map } from 'lodash-es';
 import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg';
@@ -36,6 +37,7 @@ type AboutModalProps = {
 const AboutModal = ({ children }: AboutModalProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
+  const clipboard = useClipboard();
   const { depsArray, depsObject } = useGetAppDepsQuery(undefined, {
     selectFromResult: ({ data }) => ({
       depsObject: data,
@@ -45,8 +47,8 @@ const AboutModal = ({ children }: AboutModalProps) => {
   const { data: appVersion } = useGetAppVersionQuery();
 
   const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(JSON.stringify(depsObject, null, 2));
-  }, [depsObject]);
+    clipboard.writeText(JSON.stringify(depsObject, null, 2));
+  }, [clipboard, depsObject]);
 
   return (
     <>

invokeai/frontend/web/src/features/system/util/copyBlobToClipboard.ts

@@ -1,10 +0,0 @@
-/**
- * Copies a blob to the clipboard by calling navigator.clipboard.write().
- */
-export const copyBlobToClipboard = (blob: Promise<Blob> | Blob, type = 'image/png') => {
-  navigator.clipboard.write([
-    new ClipboardItem({
-      [type]: blob,
-    }),
-  ]);
-};