Use polyfill instead of navigator.clipboard because it doesn't work in safari

src/components/CopyBtn/index.jsx

@@ -31,10 +31,6 @@ type CopyBtnProps = {
 }
 
 const CopyBtn = ({ content, increaseZindex = false }: CopyBtnProps) => {
-  if (!navigator.clipboard) {
-    return null
-  }
-
   const [clicked, setClicked] = useState<boolean>(false)
   const classes = useStyles()
   const customClasses = increaseZindex ? { popper: classes.inreasedPopperZindex } : {}

src/utils/clipboard.js

@@ -1,13 +1,17 @@
 // @flow
 
-export const copyToClipboard = (text: string) => {
+export const copyToClipboard = (text: string): void => {
-  if (!navigator.clipboard) {
+  const range = document.createRange()
-    return
+  range.selectNodeContents(document.body)
-  }
+  document.getSelection().addRange(range)
 
-  try {
+  function listener(e: ClipboardEvent) {
-    navigator.clipboard.writeText(text)
+    e.clipboardData.setData('text/plain', text)
-  } catch (err) {
+    e.preventDefault()
-    console.error(err.message)
   }
+  document.addEventListener('copy', listener)
+  document.execCommand('copy')
+  document.removeEventListener('copy', listener)
+
+  document.getSelection().removeAllRanges()
 }