Fix copy to clipboard in any context

frontend/src/components/Dialogs/AuditPGP.tsx

@@ -15,6 +15,7 @@ import {
 } from "@mui/material"
 
 import { saveAsJson } from "../../utils/saveFile";
+import { copyToClipboard } from "../../utils/clipboard";
 
 // Icons
 import KeyIcon from '@mui/icons-material/Key';
@@ -36,7 +37,7 @@ function CredentialTextfield(props){
           InputProps={{
             endAdornment:
               <Tooltip disableHoverListener enterTouchDelay={0} title={props.copiedTitle}>
-                <IconButton onClick={()=> navigator.clipboard.writeText(props.value)}>
+                <IconButton onClick={()=> copyToClipboard(props.value)}>
                   <ContentCopy/>
                 </IconButton>
               </Tooltip>,

frontend/src/components/Dialogs/Profile.tsx

@@ -33,6 +33,7 @@ import PersonAddAltIcon from "@mui/icons-material/PersonAddAlt";
 import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
 
 import { getCookie } from "../../utils/cookies";
+import { copyToClipboard } from "../../utils/clipboard";
 
 type Props = {
   isOpen: boolean;
@@ -75,13 +76,13 @@ const ProfileDialog = ({
     const robotToken = getCookie("robot_token");
 
     if (robotToken) {
-      navigator.clipboard.writeText(robotToken);
+      copyToClipboard(robotToken);
       setAppState({copiedToken:true});
     }
   };
 
   const copyReferralCodeHandler = () => {
-    navigator.clipboard.writeText(`http://${host}/ref/${referralCode}`);
+    copyToClipboard(`http://${host}/ref/${referralCode}`);
   };
 
   return (

frontend/src/components/EncryptedChat.js

@@ -5,6 +5,7 @@ import ReconnectingWebSocket from 'reconnecting-websocket';
 import { encryptMessage , decryptMessage} from "../utils/pgp";
 import { getCookie } from "../utils/cookies";
 import { saveAsJson } from "../utils/saveFile";
+import { copyToClipboard } from "../utils/clipboard";
 import { AuditPGPDialog } from "./Dialogs"
 
 // Icons
@@ -234,7 +235,7 @@ class Chat extends Component {
                 <div style={{width:20}}>
                   <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                     <IconButton sx={{height:18,width:18}}
-                      onClick={()=> navigator.clipboard.writeText(this.state.showPGP[props.index] ? props.message.encryptedMessage : props.message.plainTextMessage)}>
+                      onClick={()=> copyToClipboard(this.state.showPGP[props.index] ? props.message.encryptedMessage : props.message.plainTextMessage)}>
                       <ContentCopy sx={{height:16,width:16,color:'#333333'}}/>
                     </IconButton>
                   </Tooltip>

frontend/src/components/MakerPage.js

@@ -19,7 +19,7 @@ import { BuySatsCheckedIcon, BuySatsIcon, SellSatsCheckedIcon, SellSatsIcon} fro
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
-
+import { copyToClipboard } from "../utils/clipboard";
 
 class MakerPage extends Component {
   defaultCurrency = 1;
@@ -732,7 +732,7 @@ class MakerPage extends Component {
                 <StoreTokenDialog
                     open={this.state.openStoreToken}
                     onClose={() => this.setState({openStoreToken:false})}
-                    onClickCopy={()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}
+                    onClickCopy={()=> (copyToClipboard(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}
                     copyIconColor={this.props.copiedToken ? "inherit" : "primary"}
                     onClickBack={() => this.setState({openStoreToken:false})}
                     onClickDone={this.handleCreateOfferButtonPressed}

frontend/src/components/OrderPage.js

@@ -23,6 +23,7 @@ import { SendReceiveIcon } from "./Icons";
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
+import { copyToClipboard } from "../utils/clipboard";
 
 class OrderPage extends Component {
   constructor(props) {
@@ -359,7 +360,7 @@ class OrderPage extends Component {
       <StoreTokenDialog
         open={this.state.openStoreToken}
         onClose={() => this.setState({openStoreToken:false})}
-        onClickCopy={()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}
+        onClickCopy={()=> (copyToClipboard(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}
         copyIconColor={this.props.copiedToken ? "inherit" : "primary"}
         onClickBack={() => this.setState({openStoreToken:false})}
         onClickDone={() => this.setState({openStoreToken:false}) &

frontend/src/components/TradeBox.js

@@ -6,6 +6,7 @@ import Countdown, { zeroPad} from 'react-countdown';
 import Chat from "./EncryptedChat"
 import MediaQuery from 'react-responsive'
 import QrReader from 'react-qr-reader'
+import { copyToClipboard } from "../utils/clipboard";
 
 // Icons
 import PercentIcon from '@mui/icons-material/Percent';
@@ -216,7 +217,7 @@ class TradeBox extends Component {
             <QRCode value={this.props.data.bond_invoice} size={305} style={{position:'relative', top:'3px'}}/>
           </Box>
           <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
-            <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> <ContentCopy/>{t("Copy to clipboard")}</Button>
+            <Button size="small" color="inherit" onClick={() => {copyToClipboard(this.props.data.bond_invoice)}} align="center"> <ContentCopy/>{t("Copy to clipboard")}</Button>
           </Tooltip>
         </Grid>
         <Grid item xs={12} align="center">
@@ -299,7 +300,7 @@ class TradeBox extends Component {
             <QRCode value={this.props.data.escrow_invoice} size={305} style={{position:'relative', top:'3px'}}/>
           </Box>
           <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
-            <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> <ContentCopy/>{t("Copy to clipboard")}</Button>
+            <Button size="small" color="inherit" onClick={() => {copyToClipboard(this.props.data.escrow_invoice)}} align="center"> <ContentCopy/>{t("Copy to clipboard")}</Button>
           </Tooltip>
         </Grid>
         <Grid item xs={12} align="center">
@@ -1252,7 +1253,7 @@ handleRatingRobosatsChange=(e)=>{
             <Alert severity="success">
               <AlertTitle>{t("Your TXID")}
                 <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
-                  <IconButton color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.txid)}}>
+                  <IconButton color="inherit" onClick={() => {copyToClipboard(this.props.data.txid)}}>
                     <ContentCopy sx={{width:16,height:16}}/>
                   </IconButton>
                 </Tooltip>

frontend/src/components/UserGenPage.js

@@ -17,7 +17,7 @@ import { genBase62Token, tokenStrength } from "../utils/token";
 import { genKey } from "../utils/pgp";
 import { getCookie, writeCookie, deleteCookie } from "../utils/cookies";
 import { saveAsJson } from "../utils/saveFile";
-
+import { copyToClipboard } from "../utils/clipboard";
 
 class UserGenPage extends Component {
   constructor(props) {
@@ -259,7 +259,7 @@ class UserGenPage extends Component {
                           <IconButton 
                             color={this.props.copiedToken ? "inherit":"primary"}
                             disabled={!(getCookie('robot_token')==this.state.token) || !this.props.avatarLoaded} 
-                            onClick={()=> (navigator.clipboard.writeText(getCookie('robot_token')) & this.props.setAppState({copiedToken:true}))}
+                            onClick={()=> (copyToClipboard(getCookie('robot_token')) & this.props.setAppState({copiedToken:true}))}
                             >
                             <ContentCopy sx={{width:18, height:18}}/>
                           </IconButton>

frontend/src/utils/clipboard.js

@@ -0,0 +1,24 @@
+export function copyToClipboard(textToCopy) {
+// navigator clipboard api needs a secure context (https)
+// this function attempts to copy also on http contexts
+// useful on the http i2p site and on torified browsers
+if (navigator.clipboard && window.isSecureContext) {
+    // navigator clipboard api method'
+    return navigator.clipboard.writeText(textToCopy);
+} else {
+    // text area method
+    let textArea = document.createElement("textarea");
+    textArea.value = textToCopy;
+    // make the textarea out of viewport
+    textArea.style.position = "fixed";
+    textArea.style.left = "-999999px";
+    textArea.style.top = "-999999px";
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    return new Promise((res, rej) => {
+        // here the magic happens
+        document.execCommand('copy') ? res() : rej();
+        textArea.remove();
+    });
+}}